Refactored SquigglePlayground a bit

packages/components/src/components/DistributionChart.tsx

@@ -46,8 +46,10 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
       let spec = buildVegaSpec(isLogX, isExpY);
       let widthProp = width ? width : size.width;
       if (widthProp < 20) {
-        console.warn(`Width of Distribution is set to ${widthProp}, which is too small`)
-        widthProp = 20
+        console.warn(
+          `Width of Distribution is set to ${widthProp}, which is too small`
+        );
+        widthProp = 20;
       }
 
       // Check whether we should disable the checkbox
@@ -170,9 +172,15 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
 
   let TableHeadCell: React.FC<{ children: React.ReactNode }> = ({
     children,
-  }) => <th className="border border-slate-400 bg-slate-50 p-4">{children}</th>;
+  }) => (
+    <th className="border border-slate-200 bg-slate-50 pt-1 pb-1 pl-2 pr-2 text-slate-500 font-semibold">
+      {children}
+    </th>
+  );
   let Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-    <td className="border border-slate-400 p-4">{children}</td>
+    <td className="border border-slate-200 pt-1 pb-1 pl-2 pr-2 text-slate-900 ">
+      {children}
+    </td>
   );
 
   return (

packages/components/src/components/SquigglePlayground.tsx

@@ -104,6 +104,50 @@ function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
 }
 
+let tab = (key: string, iconName: string) => {
+  let iconStyle = (isSelected: boolean) =>
+    classNames(
+      "-ml-0.5 mr-2 h-4 w-4 ",
+      isSelected ? "text-slate-500" : "text-gray-400 group-hover:text-gray-900"
+    );
+
+  let icon = (selected: boolean) =>
+    ({
+      code: <CodeIcon className={iconStyle(selected)} />,
+      cog: <CogIcon className={iconStyle(selected)} />,
+      squareBar: <ChartSquareBarIcon className={iconStyle(selected)} />,
+      dollar: <CurrencyDollarIcon className={iconStyle(selected)} />,
+    }[iconName]);
+
+  return (
+    <Tab key={key} as={Fragment}>
+      {({ selected }) => (
+        <button className="flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 ">
+          <span
+            className={classNames(
+              "p-1 pl-2.5 pr-3.5 rounded-md flex items-center text-sm font-medium",
+              selected
+                ? "bg-white shadow-sm ring-1 ring-black ring-opacity-5"
+                : ""
+            )}
+          >
+            {icon(selected)}
+            <span
+              className={
+                selected
+                  ? "text-gray-900"
+                  : "text-gray-600 group-hover:text-gray-900"
+              }
+            >
+              {key}
+            </span>
+          </span>
+        </button>
+      )}
+    </Tab>
+  );
+};
+
 let SquigglePlayground: FC<PlaygroundProps> = ({
   initialSquiggleString = "",
   height = 500,
@@ -153,79 +197,7 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
     }
   };
 
-  let tab = (key: string, iconName: string) => {
-    let iconStyle = (isSelected: boolean) =>
-      classNames(
-        "-ml-0.5 mr-2 h-4 w-4 ",
-        isSelected
-          ? "text-slate-500"
-          : "text-gray-400 group-hover:text-gray-900"
-      );
-
-    let icon = (selected: boolean) =>
-      ({
-        code: <CodeIcon className={iconStyle(selected)} />,
-        cog: <CogIcon className={iconStyle(selected)} />,
-        squareBar: <ChartSquareBarIcon className={iconStyle(selected)} />,
-        dollar: <CurrencyDollarIcon className={iconStyle(selected)} />,
-      }[iconName]);
-
-    return (
-      <Tab key={key} as={Fragment}>
-        {({ selected }) => (
-          <button className="flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 ">
-            <span
-              className={classNames(
-                "p-1 pl-2.5 pr-3.5 rounded-md flex items-center text-sm font-medium",
-                selected
-                  ? "bg-white shadow-sm ring-1 ring-black ring-opacity-5"
-                  : ""
-              )}
-            >
-              {icon(selected)}
-              <span
-                className={
-                  selected
-                    ? "text-gray-900"
-                    : "text-gray-600 group-hover:text-gray-900"
-                }
-              >
-                {key}
-              </span>
-            </span>
-          </button>
-        )}
-      </Tab>
-    );
-  };
-
-  return (
-    <Tab.Group>
-      <div className=" flex-col flex">
-        <div className="pb-4">
-          <Tab.List className="p-0.5 rounded-md bg-slate-100 hover:bg-slate-200 inline-flex">
-            {tab("Code", "code")}
-            {tab("Sampling Settings", "cog")}
-            {tab("View Settings", "squareBar")}
-            {tab("Input Variables", "dollar")}
-          </Tab.List>
-        </div>
-        <div className="flex" style={{ height: height + "px" }}>
-          <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>
+  let samplingSettings = (
     <div className="space-y-6 p-3">
       <InputItem label="Sample Count">
         <>
@@ -235,9 +207,8 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
             className={numberStyle}
           />
           <p className="mt-2 text-sm text-gray-500">
-                        How many samples to use for Monte Carlo simulations.
-                        This can occasionally be overridden by specific Squiggle
-                        programs.
+            How many samples to use for Monte Carlo simulations. This can
+            occasionally be overridden by specific Squiggle programs.
           </p>
         </>
       </InputItem>
@@ -249,15 +220,15 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
             className={numberStyle}
           />
           <p className="mt-2 text-sm text-gray-500">
-                        When distributions are converted into PointSet shapes,
-                        we need to know how many coordinates to use.
+            When distributions are converted into PointSet shapes, we need to
+            know how many coordinates to use.
           </p>
         </>
       </InputItem>
     </div>
-              </Tab.Panel>
+  );
 
-              <Tab.Panel>
+  let viewSettings = (
     <div className="space-y-6 divide-y divide-gray-200">
       <div className="space-y-2">
         <h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
@@ -327,11 +298,10 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
         </h3>
 
         <p className="mt-2 text-sm text-gray-500">
-                      When displaying functions of single variables that return
-                      numbers or distributions, we need to use defaults for the
-                      x-axis. We need to select a minimum and maximum value of x
-                      to sample, and a number n of the number of points to
-                      sample.
+          When displaying functions of single variables that return numbers or
+          distributions, we need to use defaults for the x-axis. We need to
+          select a minimum and maximum value of x to sample, and a number n of
+          the number of points to sample.
         </p>
         <div className="pt-4 grid grid-cols-1 gap-y-4 gap-x-4">
           <InputItem label="Min X Value">
@@ -358,19 +328,18 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
         </div>
       </div>
     </div>
-              </Tab.Panel>
+  );
 
-              <Tab.Panel>
+  let inputVariableSettings = (
+    <>
       <h3 className="text-lg leading-6 font-medium text-gray-900">
         Import Variables from JSON
       </h3>
       <p className="mt-2 text-sm text-gray-500">
-                  You can import variables from JSON into your Squiggle code.
-                  Variables are accessed with dollar signs. For example,
-                  "timeNow" would be accessed as "$timeNow".
+        You can import variables from JSON into your Squiggle code. Variables
+        are accessed with dollar signs. For example, "timeNow" would be accessed
+        as "$timeNow".
       </p>
-                <>
-
       <div className="border border-slate-200 mt-6 mb-2">
         <JsonEditor
           value={importString}
@@ -392,7 +361,36 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
         )}
       </div>
     </>
+  );
+
+  return (
+    <Tab.Group>
+      <div className=" flex-col flex">
+        <div className="pb-4">
+          <Tab.List className="p-0.5 rounded-md bg-slate-100 hover:bg-slate-200 inline-flex">
+            {tab("Code", "code")}
+            {tab("Sampling Settings", "cog")}
+            {tab("View Settings", "squareBar")}
+            {tab("Input Variables", "dollar")}
+          </Tab.List>
+        </div>
+        <div className="flex" style={{ height: height + "px" }}>
+          <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>
           </div>