From f156840d652612b81fd9b3cabe3d2fc89045c462 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Fri, 17 Jun 2022 07:31:59 -0700
Subject: [PATCH 1/4] Added toggle to optionally display code editor

---
 .../src/components/SquigglePlayground.tsx     | 112 ++++++++++++------
 1 file changed, 74 insertions(+), 38 deletions(-)

diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index a0615ca4..18999d8d 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -9,6 +9,7 @@ import {
   CodeIcon,
   CogIcon,
   CurrencyDollarIcon,
+  EyeIcon,
 } from "@heroicons/react/solid";
 import clsx from "clsx";
 
@@ -31,6 +32,7 @@ interface PlaygroundProps {
   showControls?: boolean;
   /** Whether to show the summary table in the playground */
   showSummary?: boolean;
+  showEditor?: boolean;
 }
 
 const schema = yup
@@ -64,6 +66,7 @@ const schema = yup
     showTypes: yup.boolean(),
     showControls: yup.boolean(),
     showSummary: yup.boolean(),
+    showEditor: yup.boolean(),
     showSettingsPage: yup.boolean().default(false),
     diagramStart: yup
       .number()
@@ -196,6 +199,7 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
   showTypes = false,
   showControls = false,
   showSummary = false,
+  showEditor = true,
 }) => {
   const [squiggleString, setSquiggleString] = useState(initialSquiggleString);
   const [importString, setImportString] = useState("{}");
@@ -210,6 +214,7 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
       showTypes: showTypes,
       showControls: showControls,
       showSummary: showSummary,
+      showEditor: showEditor,
       leftSizePercent: 50,
       showSettingsPage: false,
       diagramStart: 0,
@@ -276,6 +281,11 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
     <div className="space-y-6 p-3 divide-y divide-gray-200 max-w-xl">
       <HeadedSection title="General Display Settings">
         <div className="space-y-4">
+          <Checkbox
+            name="showEditor"
+            register={register}
+            label="Show code editor on left"
+          />
           <InputItem
             name="chartHeight"
             type="number"
@@ -374,52 +384,78 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
     </div>
   );
 
+  let withEditor = (
+    <div className="flex" 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>
+      </div>
+
+      <div className="w-1/2 p-2 pl-4">
+        <SquiggleChart
+          squiggleString={squiggleString}
+          environment={env}
+          chartSettings={chartSettings}
+          height={vars.chartHeight}
+          showTypes={vars.showTypes}
+          showControls={vars.showControls}
+          bindings={defaultBindings}
+          jsImports={imports}
+          showSummary={vars.showSummary}
+        />
+      </div>
+    </div>
+  );
+
+  let withoutEditor = (
+    <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>
+  );
+
   return (
     <SquiggleContainer>
       <Tab.Group>
         <div className="pb-4">
-          <Tab.List className="flex w-fit p-0.5 rounded-md bg-slate-100 hover:bg-slate-200">
-            <StyledTab name="Code" icon={CodeIcon} />
+          <Tab.List className="flex w-fit p-0.5 mt-2 mb-1 rounded-md bg-slate-100 hover:bg-slate-200">
+            <StyledTab
+              name={vars.showEditor ? "Code" : "Display"}
+              icon={vars.showEditor ? CodeIcon : EyeIcon}
+            />
             <StyledTab name="Sampling Settings" icon={CogIcon} />
             <StyledTab name="View Settings" icon={ChartSquareBarIcon} />
             <StyledTab name="Input Variables" icon={CurrencyDollarIcon} />
           </Tab.List>
-        </div>
-        <div className="flex" 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>
-          </div>
-
-          <div className="w-1/2 p-2 pl-4">
-            <div style={{ maxHeight: height }}>
-              <SquiggleChart
-                squiggleString={squiggleString}
-                environment={env}
-                chartSettings={chartSettings}
-                height={vars.chartHeight}
-                showTypes={vars.showTypes}
-                showControls={vars.showControls}
-                bindings={defaultBindings}
-                jsImports={imports}
-                showSummary={vars.showSummary}
-              />
-            </div>
-          </div>
+          {vars.showEditor ? withEditor : withoutEditor}
         </div>
       </Tab.Group>
     </SquiggleContainer>

From 8e7756fe35420e806bdd38e59fcf31da20562846 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Fri, 17 Jun 2022 07:42:44 -0700
Subject: [PATCH 2/4] Added Module type display and better error message if no
 type is found

---
 .../components/src/components/SquiggleChart.tsx    | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index 8bedd265..a8db5386 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -251,8 +251,20 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
         </VariableBox>
       );
     }
+    case "module": {
+      return (
+        <VariableBox heading="Module" showTypes={showTypes}>
+          <span className="text-slate-600 font-semibold">Internal Module</span>
+        </VariableBox>
+      );
+    }
     default: {
-      return <>Should be unreachable</>;
+      return (
+        <>
+          <span>No display for type: </span>{" "}
+          <span className="font-semibold text-slate-600">{expression.tag}</span>
+        </>
+      );
     }
   }
 };

From 342b5ba17b583804967b45071b73989239970c4b Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Fri, 17 Jun 2022 07:45:58 -0700
Subject: [PATCH 3/4] Tiny css cleanup

---
 .../src/components/SquigglePlayground.tsx     | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 18999d8d..21e524bc 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -385,7 +385,7 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
   );
 
   let withEditor = (
-    <div className="flex" style={{ height }}>
+    <div className="flex mt-1" style={{ height }}>
       <div className="w-1/2">
         <Tab.Panels>
           <Tab.Panel>
@@ -422,31 +422,33 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
   );
 
   let withoutEditor = (
-    <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>
+    <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>
+    </div>
   );
 
   return (
     <SquiggleContainer>
       <Tab.Group>
         <div className="pb-4">
-          <Tab.List className="flex w-fit p-0.5 mt-2 mb-1 rounded-md bg-slate-100 hover:bg-slate-200">
+          <Tab.List className="flex w-fit p-0.5 mt-2 rounded-md bg-slate-100 hover:bg-slate-200">
             <StyledTab
               name={vars.showEditor ? "Code" : "Display"}
               icon={vars.showEditor ? CodeIcon : EyeIcon}

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 4/4] 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>
   );