Minor cleanup

packages/components/src/components/FunctionChart.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import _ from "lodash";
 import type { Spec } from "vega";
 import {
   Distribution,
@@ -31,8 +30,19 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
   environment,
   height,
 }: FunctionChartProps) => {
-  let result = runForeign(fn, [chartSettings.start], environment);
-  let resultType = result.tag === "Ok" ? result.value.tag : "Error";
+  let result1 = runForeign(fn, [chartSettings.start], environment);
+  let result2 = runForeign(fn, [chartSettings.stop], environment);
+  let getValidResult = () => {
+    if (result1.tag === "Ok") {
+      return result1;
+    } else if (result2.tag === "Ok") {
+      return result2;
+    } else {
+      return result1;
+    }
+  };
+  let validResult = getValidResult();
+  let resultType = validResult.tag === "Ok" ? validResult.value.tag : "Error";
 
   let comp = () => {
     switch (resultType) {

packages/components/src/components/FunctionChart1Number.tsx

@@ -51,10 +51,13 @@ interface FunctionChartProps {
 type point = { x: number; value: result<number, string> };
 
 let getFunctionImage = ({ chartSettings, fn, environment }) => {
+  //We adjust the count, because the count is made for distributions, which are much more expensive to estimate
+  let adjustedCount = chartSettings.count * 20;
+
   let chartPointsToRender = _rangeByCount(
     chartSettings.start,
     chartSettings.stop,
-    chartSettings.count
+    adjustedCount
   );
 
   let chartPointsData: point[] = chartPointsToRender.map((x) => {

packages/components/src/components/SquiggleChart.tsx

@@ -172,7 +172,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
               <SquiggleItem
                 expression={r}
                 width={width !== undefined ? width - 20 : width}
-                height={50}
+                height={height / 3}
                 showTypes={showTypes}
                 showSummary={showSummary}
                 showControls={showControls}
@@ -204,15 +204,17 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
     }
     case "lambda":
       return (
-        <FunctionChart
-          fn={expression.value}
-          chartSettings={chartSettings}
-          height={height}
-          environment={{
-            sampleCount: environment.sampleCount / 10,
-            xyPointLength: environment.xyPointLength / 10,
-          }}
-        />
+        <VariableBox heading="Function" showTypes={showTypes}>
+          <FunctionChart
+            fn={expression.value}
+            chartSettings={chartSettings}
+            height={height}
+            environment={{
+              sampleCount: environment.sampleCount / 10,
+              xyPointLength: environment.xyPointLength / 10,
+            }}
+          />
+        </VariableBox>
       );
   }
 };
@@ -255,7 +257,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   squiggleString = "",
   environment,
   onChange = () => {},
-  height = 60,
+  height = 200,
   bindings = defaultBindings,
   jsImports = defaultImports,
   showSummary = false,

packages/components/src/components/SquigglePlayground.tsx

@@ -78,7 +78,8 @@ interface RowProps {
 
 const Row = styled.div<RowProps>`
   display: grid;
-  grid-template-columns: ${(p) => p.leftPercentage}% ${(p) => 100 - p.leftPercentage}%;
+  grid-template-columns: ${(p) => p.leftPercentage}% ${(p) =>
+      100 - p.leftPercentage}%;
 `;
 const Col = styled.div``;
 
@@ -115,10 +116,18 @@ const schema = yup
       .min(10)
       .max(10000),
     chartHeight: yup.number().required().positive().integer().default(350),
-    leftSize: yup.number().required().positive().integer().min(10).max(100).default(50),
+    leftSizePercent: yup
+      .number()
+      .required()
+      .positive()
+      .integer()
+      .min(10)
+      .max(100)
+      .default(50),
     showTypes: yup.boolean(),
     showControls: yup.boolean(),
     showSummary: yup.boolean(),
+    showSettingsPage: yup.boolean().default(false),
   })
   .required();
 
@@ -133,9 +142,6 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
   let [importString, setImportString] = useState("{}");
   let [imports, setImports] = useState({});
   let [importsAreValid, setImportsAreValid] = useState(true);
-  let [showTypesInput, setShowTypesInput] = useState(showTypes);
-  let [showControlsInput, setShowControlsInput] = useState(showControls);
-  let [showSummaryInput, setShowSummaryInput] = useState(showSummary);
   let [diagramStart, setDiagramStart] = useState(0);
   let [diagramStop, setDiagramStop] = useState(10);
   let [diagramCount, setDiagramCount] = useState(20);
@@ -157,7 +163,8 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
       showTypes: showTypes,
       showControls: showControls,
       showSummary: showSummary,
-      leftSize: 50,
+      leftSizePercent: 50,
+      showSettingsPage: false,
     },
   });
   const vars = useWatch({
@@ -178,30 +185,36 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
   };
   return (
     <ShowBox height={height}>
-      <input type="number" {...register("sampleCount")} />
-      <input type="number" {...register("xyPointLength")} />
-      <input type="number" {...register("chartHeight")} />
-      <input type="number" {...register("leftSize")} />
-      <input type="checkbox" {...register("showTypes")} />
-      <input type="checkbox" {...register("showControls")} />
-      <input type="checkbox" {...register("showSummary")} />
-      <Row leftPercentage={vars.leftSize || 50}>
+              <input type="checkbox" {...register("showSettingsPage")} />
+      <Row leftPercentage={vars.leftSizePercent || 50}>
         <Col>
-          <CodeEditor
-            value={squiggleString}
-            onChange={setSquiggleString}
-            oneLine={false}
-            showGutter={true}
-            height={height - 3}
-          />
-          <JsonEditor
-            value={importString}
-            onChange={getChangeJson}
-            oneLine={false}
-            showGutter={true}
-            height={100}
-          />
-          {importsAreValid ? "Valid" : "INVALID"}
+          {vars.showSettingsPage ? (
+            <div>
+              <input type="number" {...register("sampleCount")} />
+              <input type="number" {...register("xyPointLength")} />
+              <input type="number" {...register("chartHeight")} />
+              <input type="number" {...register("leftSizePercent")} />
+              <input type="checkbox" {...register("showTypes")} />
+              <input type="checkbox" {...register("showControls")} />
+              <input type="checkbox" {...register("showSummary")} />
+              <JsonEditor
+                value={importString}
+                onChange={getChangeJson}
+                oneLine={false}
+                showGutter={true}
+                height={100}
+              />
+              {importsAreValid ? "Valid" : "Invalid"}
+            </div>
+          ) : (
+            <CodeEditor
+              value={squiggleString}
+              onChange={setSquiggleString}
+              oneLine={false}
+              showGutter={true}
+              height={height - 3}
+            />
+          )}
         </Col>
         <Col>
           <Display maxHeight={height - 3}>