Merge pull request #713 from quantified-uncertainty/playground-focus-fix

Fix playground focus issue

packages/components/src/components/SquigglePlayground.tsx

@@ -394,18 +394,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     </div>
   );
 
-  const InFirstTab: React.FC<{ children: React.ReactNode }> = ({
+  const squiggleChart = (
-    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 squiggleChart = (
     <SquiggleChart
       squiggleString={code}
       environment={env}
@@ -419,37 +408,43 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     />
   );
 
-  let withEditor = (
+  const firstTab = vars.showEditor ? (
-    <div className="flex mt-1" style={{ height }}>
+    <div className="border border-slate-200">
-      <div className="w-1/2">
+      <CodeEditor
-        <InFirstTab>
+        value={code}
-          <div className="border border-slate-200">
+        onChange={(newCode) => {
-            <CodeEditor
+          if (controlledCode === undefined) {
-              value={code}
+            // uncontrolled mode
-              onChange={(newCode) => {
+            setUncontrolledCode(newCode);
-                if (controlledCode === undefined) {
+          }
-                  // uncontrolled mode
+          onCodeChange?.(newCode);
-                  setUncontrolledCode(newCode);
+        }}
-                }
+        oneLine={false}
-                onCodeChange?.(newCode);
+        showGutter={true}
-              }}
+        height={height - 1}
-              oneLine={false}
+      />
-              showGutter={true}
+    </div>
-              height={height - 1}
+  ) : (
-            />
+    squiggleChart
-          </div>
+  );
-        </InFirstTab>
-      </div>
 
+  const tabs = (
+    <Tab.Panels>
+      <Tab.Panel>{firstTab}</Tab.Panel>
+      <Tab.Panel>{samplingSettings}</Tab.Panel>
+      <Tab.Panel>{viewSettings}</Tab.Panel>
+      <Tab.Panel>{inputVariableSettings}</Tab.Panel>
+    </Tab.Panels>
+  );
+
+  const withEditor = (
+    <div className="flex mt-1" style={{ height }}>
+      <div className="w-1/2">{tabs}</div>
       <div className="w-1/2 p-2 pl-4">{squiggleChart}</div>
     </div>
   );
 
-  let withoutEditor = (
+  const withoutEditor = <div className="mt-3">{tabs}</div>;
-    <div className="mt-3">
-      <InFirstTab>{squiggleChart}</InFirstTab>
-    </div>
-  );
 
   return (
     <SquiggleContainer>