From 38a0e788730aebe5624fe6e898c186f0774acb74 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Fri, 17 Jun 2022 15:47:37 -0700
Subject: [PATCH] Refactors to address CR

---
 .../src/components/SquiggleItem.tsx           |  4 +-
 .../src/components/SquigglePlayground.tsx     | 69 ++++++++++---------
 2 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/packages/components/src/components/SquiggleItem.tsx b/packages/components/src/components/SquiggleItem.tsx
index 48d5a226..a64df99e 100644
--- a/packages/components/src/components/SquiggleItem.tsx
+++ b/packages/components/src/components/SquiggleItem.tsx
@@ -252,10 +252,10 @@ export const SquiggleItem: React.FC<SquiggleItemProps> = ({
     }
     default: {
       return (
-        <>
+        <div>
           <span>No display for type: </span>{" "}
           <span className="font-semibold text-slate-600">{expression.tag}</span>
-        </>
+        </div>
       );
     }
   }
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 6eefd513..08486d07 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -384,25 +384,31 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     </div>
   );
 
+  const InFirstTab: React.FC<{ children: React.ReactNode }> = ({
+    children,
+  }) => (
+    <Tab.Panels>
+      <Tab.Panel>{children}</Tab.Panel>
+      <Tab.Panel>{samplingSettings}</Tab.Panel>
+      <Tab.Panel>{viewSettings}</Tab.Panel>
+      <Tab.Panel>{inputVariableSettings}</Tab.Panel>
+    </Tab.Panels>
+  );
+
   let withEditor = (
     <div className="flex mt-1" style={{ height }}>
       <div className="w-1/2">
-        <Tab.Panels>
-          <Tab.Panel>
-            <div className="border border-slate-200">
-              <CodeEditor
-                value={squiggleString}
-                onChange={setSquiggleString}
-                oneLine={false}
-                showGutter={true}
-                height={height - 1}
-              />
-            </div>
-          </Tab.Panel>
-          <Tab.Panel>{samplingSettings}</Tab.Panel>
-          <Tab.Panel>{viewSettings}</Tab.Panel>
-          <Tab.Panel>{inputVariableSettings}</Tab.Panel>
-        </Tab.Panels>
+        <InFirstTab>
+          <div className="border border-slate-200">
+            <CodeEditor
+              value={squiggleString}
+              onChange={setSquiggleString}
+              oneLine={false}
+              showGutter={true}
+              height={height - 1}
+            />
+          </div>
+        </InFirstTab>
       </div>
 
       <div className="w-1/2 p-2 pl-4">
@@ -423,24 +429,19 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
 
   let withoutEditor = (
     <div className="mt-3">
-      <Tab.Panels>
-        <Tab.Panel>
-          <SquiggleChart
-            squiggleString={squiggleString}
-            environment={env}
-            chartSettings={chartSettings}
-            height={vars.chartHeight}
-            showTypes={vars.showTypes}
-            showControls={vars.showControls}
-            bindings={defaultBindings}
-            jsImports={imports}
-            showSummary={vars.showSummary}
-          />
-        </Tab.Panel>
-        <Tab.Panel>{samplingSettings}</Tab.Panel>
-        <Tab.Panel>{viewSettings}</Tab.Panel>
-        <Tab.Panel>{inputVariableSettings}</Tab.Panel>
-      </Tab.Panels>
+      <InFirstTab>
+        <SquiggleChart
+          squiggleString={squiggleString}
+          environment={env}
+          chartSettings={chartSettings}
+          height={vars.chartHeight}
+          showTypes={vars.showTypes}
+          showControls={vars.showControls}
+          bindings={defaultBindings}
+          jsImports={imports}
+          showSummary={vars.showSummary}
+        />
+      </InFirstTab>
     </div>
   );