Merge pull request #622 from quantified-uncertainty/May-tailwind-refactor

2022-06-02 05:17:04 -07:00 · 2022-06-02 05:17:04 -07:00 · 7f3cacae59
commit 7f3cacae59
parent 793c42ce20 4bad537a5d
15 changed files with 549 additions and 209 deletions
--- a/packages/components/package.json
+++ b/packages/components/package.json
@ -3,6 +3,8 @@
  "version": "0.2.20",
  "license": "MIT",
  "dependencies": {
+    "@headlessui/react": "^1.6.4",
+    "@heroicons/react": "^1.0.6",
    "@hookform/resolvers": "^2.8.10",
    "@quri/squiggle-lang": "^0.2.8",
    "@react-hook/size": "^2.1.2",
@ -28,6 +30,7 @@
    "@storybook/node-logger": "^6.5.6",
    "@storybook/preset-create-react-app": "^4.1.1",
    "@storybook/react": "^6.5.6",
+    "@tailwindcss/forms": "^0.5.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.2.0",
--- a/packages/components/src/components/Alert.tsx
+++ b/packages/components/src/components/Alert.tsx
@ -0,0 +1,83 @@
+import * as React from "react";
+import {
+  XCircleIcon,
+  InformationCircleIcon,
+  CheckCircleIcon,
+} from "@heroicons/react/solid";
+
+export const Alert: React.FC<{
+  heading: string;
+  backgroundColor: string;
+  headingColor: string;
+  bodyColor: string;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}> = ({
+  heading = "Error",
+  backgroundColor,
+  headingColor,
+  bodyColor,
+  icon,
+  children,
+}) => {
+  return (
+    <div className={`rounded-md p-4 ${backgroundColor}`}>
+      <div className="flex">
+        <div className="flex-shrink-0">{icon}</div>
+        <div className="ml-3">
+          <h3 className={`text-sm font-medium ${headingColor}`}>{heading}</h3>
+          <div className={`mt-2 text-sm ${bodyColor}`}>{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ErrorAlert: React.FC<{
+  heading: string;
+  children: React.ReactNode;
+}> = ({ heading = "Error", children }) => (
+  <Alert
+    heading={heading}
+    children={children}
+    backgroundColor="bg-red-100"
+    headingColor="text-red-800"
+    bodyColor="text-red-700"
+    icon={<XCircleIcon className="h-5 w-5 text-red-400" aria-hidden="true" />}
+  />
+);
+
+export const MessageAlert: React.FC<{
+  heading: string;
+  children: React.ReactNode;
+}> = ({ heading = "Error", children }) => (
+  <Alert
+    heading={heading}
+    children={children}
+    backgroundColor="bg-slate-100"
+    headingColor="text-slate-700"
+    bodyColor="text-slate-700"
+    icon={
+      <InformationCircleIcon
+        className="h-5 w-5 text-slate-400"
+        aria-hidden="true"
+      />
+    }
+  />
+);
+
+export const SuccessAlert: React.FC<{
+  heading: string;
+  children: React.ReactNode;
+}> = ({ heading = "Error", children }) => (
+  <Alert
+    heading={heading}
+    children={children}
+    backgroundColor="bg-green-50"
+    headingColor="text-green-800"
+    bodyColor="text-green-700"
+    icon={
+      <CheckCircleIcon className="h-5 w-5 text-green-400" aria-hidden="true" />
+    }
+  />
+);
--- a/packages/components/src/components/CodeEditor.tsx
+++ b/packages/components/src/components/CodeEditor.tsx
@ -29,6 +29,7 @@ export let CodeEditor: FC<CodeEditorProps> = ({
      mode="golang"
      theme="github"
      width={"100%"}
+      fontSize={14}
      height={String(height) + "px"}
      minLines={oneLine ? lineCount : undefined}
      maxLines={oneLine ? lineCount : undefined}
--- a/packages/components/src/components/DistributionChart.tsx
+++ b/packages/components/src/components/DistributionChart.tsx
@ -8,7 +8,7 @@ import {
 } from "@quri/squiggle-lang";
 import { Vega, VisualizationSpec } from "react-vega";
 import * as chartSpecification from "../vega-specs/spec-distributions.json";
-import { ErrorBox } from "./ErrorBox";
+import { ErrorAlert } from "./Alert";
 import { useSize } from "react-use";
 import {
  linearXScale,
@ -45,6 +45,12 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
        shape.value.discrete.some((x) => x.x <= 0);
      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;
+      }

      // Check whether we should disable the checkbox
      var logCheckbox = (
@ -86,9 +92,9 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
      );
    } else {
      var result = (
-        <ErrorBox heading="Distribution Error">
+        <ErrorAlert heading="Distribution Error">
          {distributionErrorToString(shape.value)}
-        </ErrorBox>
+        </ErrorAlert>
      );
    }

@ -157,18 +163,24 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
      return <NumberShower number={x.value} />;
    } else {
      return (
-        <ErrorBox heading="Distribution Error">
+        <ErrorAlert heading="Distribution Error">
          {distributionErrorToString(x.value)}
-        </ErrorBox>
+        </ErrorAlert>
      );
    }
  };

  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 py-1 px-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 py-1 px-2 text-slate-900 ">
+      {children}
+    </td>
  );

  return (
--- a/packages/components/src/components/ErrorBox.tsx
+++ b/packages/components/src/components/ErrorBox.tsx
@ -1,12 +0,0 @@
-import * as React from "react";
-export const ErrorBox: React.FC<{
-  heading: string;
-  children: React.ReactNode;
-}> = ({ heading = "Error", children }) => {
-  return (
-    <div className="border border-red-200 bg-gray-50 p-4">
-      <h3>{heading}</h3>
-      {children}
-    </div>
-  );
-};
--- a/packages/components/src/components/FunctionChart.tsx
+++ b/packages/components/src/components/FunctionChart.tsx
@ -2,7 +2,7 @@ import * as React from "react";
 import { lambdaValue, environment, runForeign } from "@quri/squiggle-lang";
 import { FunctionChart1Dist } from "./FunctionChart1Dist";
 import { FunctionChart1Number } from "./FunctionChart1Number";
-import { ErrorBox } from "./ErrorBox";
+import { ErrorAlert, MessageAlert } from "./Alert";

 export type FunctionChartSettings = {
  start: number;
@ -23,9 +23,16 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
  environment,
  height,
 }: FunctionChartProps) => {
-  let result1 = runForeign(fn, [chartSettings.start], environment);
-  let result2 = runForeign(fn, [chartSettings.stop], environment);
-  let getValidResult = () => {
+  if (fn.parameters.length > 1) {
+    return (
+      <MessageAlert heading="Function Display Not Supported">
+        Only functions with one parameter are displayed.
+      </MessageAlert>
+    );
+  }
+  const result1 = runForeign(fn, [chartSettings.start], environment);
+  const result2 = runForeign(fn, [chartSettings.stop], environment);
+  const getValidResult = () => {
    if (result1.tag === "Ok") {
      return result1;
    } else if (result2.tag === "Ok") {
@ -34,41 +41,39 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
      return result1;
    }
  };
-  let validResult = getValidResult();
-  let resultType = validResult.tag === "Ok" ? validResult.value.tag : "Error";
+  const validResult = getValidResult();
+  const resultType =
+    validResult.tag === "Ok" ? validResult.value.tag : ("Error" as const);

-  let component = () => {
-    switch (resultType) {
-      case "distribution":
-        return (
-          <FunctionChart1Dist
-            fn={fn}
-            chartSettings={chartSettings}
-            environment={environment}
-            height={height}
-          />
-        );
-      case "number":
-        return (
-          <FunctionChart1Number
-            fn={fn}
-            chartSettings={chartSettings}
-            environment={environment}
-            height={height}
-          />
-        );
-      case "Error":
-        return (
-          <ErrorBox heading="Error">The function failed to be run</ErrorBox>
-        );
-      default:
-        return (
-          <ErrorBox heading="No Viewer">
-            There is no function visualization for this type of function
-          </ErrorBox>
-        );
-    }
-  };
-
-  return component();
+  switch (resultType) {
+    case "distribution":
+      return (
+        <FunctionChart1Dist
+          fn={fn}
+          chartSettings={chartSettings}
+          environment={environment}
+          height={height}
+        />
+      );
+    case "number":
+      return (
+        <FunctionChart1Number
+          fn={fn}
+          chartSettings={chartSettings}
+          environment={environment}
+          height={height}
+        />
+      );
+    case "Error":
+      return (
+        <ErrorAlert heading="Error">The function failed to be run</ErrorAlert>
+      );
+    default:
+      return (
+        <MessageAlert heading="Function Display Not Supported">
+          There is no function visualization for this type of output:{" "}
+          <span className="font-bold">{resultType}</span>
+        </MessageAlert>
+      );
+  }
 };
--- a/packages/components/src/components/FunctionChart1Dist.tsx
+++ b/packages/components/src/components/FunctionChart1Dist.tsx
@ -15,7 +15,7 @@ import { createClassFromSpec } from "react-vega";
 import * as percentilesSpec from "../vega-specs/spec-percentiles.json";
 import { DistributionChart } from "./DistributionChart";
 import { NumberShower } from "./NumberShower";
-import { ErrorBox } from "./ErrorBox";
+import { ErrorAlert } from "./Alert";

 let SquigglePercentilesChart = createClassFromSpec({
  spec: percentilesSpec as Spec,
@ -197,7 +197,7 @@ export const FunctionChart1Dist: React.FC<FunctionChart1DistProps> = ({
      {showChart}
      {_.entries(getPercentilesMemoized.errors).map(
        ([errorName, errorPoints]) => (
-          <ErrorBox key={errorName} heading={errorName}>
+          <ErrorAlert key={errorName} heading={errorName}>
            Values:{" "}
            {errorPoints
              .map((r, i) => <NumberShower key={i} number={r.x} />)
@ -206,7 +206,7 @@ export const FunctionChart1Dist: React.FC<FunctionChart1DistProps> = ({
                  {a}, {b}
                </>
              ))}
-          </ErrorBox>
+          </ErrorAlert>
        )
      )}
    </>
--- a/packages/components/src/components/FunctionChart1Number.tsx
+++ b/packages/components/src/components/FunctionChart1Number.tsx
@ -10,7 +10,7 @@ import {
 } from "@quri/squiggle-lang";
 import { createClassFromSpec } from "react-vega";
 import * as lineChartSpec from "../vega-specs/spec-line-chart.json";
-import { ErrorBox } from "./ErrorBox";
+import { ErrorAlert } from "./Alert";

 let SquiggleLineChart = createClassFromSpec({
  spec: lineChartSpec as Spec,
@ -110,9 +110,9 @@ export const FunctionChart1Number: React.FC<FunctionChart1NumberProps> = ({
        actions={false}
      />
      {getFunctionImageMemoized.errors.map(({ x, value }) => (
-        <ErrorBox key={x} heading={value}>
+        <ErrorAlert key={x} heading={value}>
          Error at point ${x}
-        </ErrorBox>
+        </ErrorAlert>
      ))}
    </>
  );
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@ -14,7 +14,7 @@ import {
 } from "@quri/squiggle-lang";
 import { NumberShower } from "./NumberShower";
 import { DistributionChart } from "./DistributionChart";
-import { ErrorBox } from "./ErrorBox";
+import { ErrorAlert } from "./Alert";
 import { FunctionChart, FunctionChartSettings } from "./FunctionChart";

 function getRange<a>(x: declaration<a>) {
@ -54,7 +54,7 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
    return (
      <div className="bg-white border border-grey-200 m-2">
        <div className="border-b border-grey-200 p-3">
-          <h3>{heading}</h3>
+          <h3 className="font-mono">{heading}</h3>
        </div>
        <div className="p-3">{children}</div>
      </div>
@ -95,7 +95,9 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
    case "number":
      return (
        <VariableBox heading="Number" showTypes={showTypes}>
-          <NumberShower precision={3} number={expression.value} />
+          <div className="font-semibold text-slate-600">
+            <NumberShower precision={3} number={expression.value} />
+          </div>
        </VariableBox>
      );
    case "distribution": {
@ -124,10 +126,13 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
    }
    case "string":
      return (
-        <VariableBox
-          heading="String"
-          showTypes={showTypes}
-        >{`"${expression.value}"`}</VariableBox>
+        <VariableBox heading="String" showTypes={showTypes}>
+          <span className="text-slate-400">"</span>
+          <span className="text-slate-600 font-semibold">
+            {expression.value}
+          </span>
+          <span className="text-slate-400">"</span>
+        </VariableBox>
      );
    case "boolean":
      return (
@ -138,7 +143,8 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
    case "symbol":
      return (
        <VariableBox heading="Symbol" showTypes={showTypes}>
-          {expression.value}
+          <span className="text-slate-500 mr-2">Undefined Symbol:</span>
+          <span className="text-slate-600">{expression.value}</span>
        </VariableBox>
      );
    case "call":
@ -151,17 +157,24 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
      return (
        <VariableBox heading="Array" showTypes={showTypes}>
          {expression.value.map((r, i) => (
-            <SquiggleItem
-              key={i}
-              expression={r}
-              width={width !== undefined ? width - 20 : width}
-              height={50}
-              showTypes={showTypes}
-              showControls={showControls}
-              chartSettings={chartSettings}
-              environment={environment}
-              showSummary={showSummary}
-            />
+            <div key={i} className="flex flex-row pt-1">
+              <div className="flex-none bg-slate-100 rounded-sm px-1">
+                <h3 className="text-slate-400 font-mono">{i}</h3>
+              </div>
+              <div className="px-2 mb-2 grow ">
+                <SquiggleItem
+                  key={i}
+                  expression={r}
+                  width={width !== undefined ? width - 20 : width}
+                  height={50}
+                  showTypes={showTypes}
+                  showControls={showControls}
+                  chartSettings={chartSettings}
+                  environment={environment}
+                  showSummary={showSummary}
+                />
+              </div>
+            </div>
          ))}
        </VariableBox>
      );
@ -169,18 +182,22 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
      return (
        <VariableBox heading="Record" showTypes={showTypes}>
          {Object.entries(expression.value).map(([key, r]) => (
-            <div key={key}>
-              <h3>{key}</h3>
-              <SquiggleItem
-                expression={r}
-                width={width !== undefined ? width - 20 : width}
-                height={height / 3}
-                showTypes={showTypes}
-                showSummary={showSummary}
-                showControls={showControls}
-                chartSettings={chartSettings}
-                environment={environment}
-              />
+            <div key={key} className="flex flex-row pt-1">
+              <div className="flex-none pr-2">
+                <h3 className="text-slate-500 font-mono">{key}:</h3>
+              </div>
+              <div className="pl-2 pr-2 mb-2 grow bg-gray-50 border border-gray-100 rounded-sm">
+                <SquiggleItem
+                  expression={r}
+                  width={width !== undefined ? width - 20 : width}
+                  height={height / 3}
+                  showTypes={showTypes}
+                  showSummary={showSummary}
+                  showControls={showControls}
+                  chartSettings={chartSettings}
+                  environment={environment}
+                />
+              </div>
            </div>
          ))}
        </VariableBox>
@ -207,6 +224,9 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
    case "lambda":
      return (
        <VariableBox heading="Function" showTypes={showTypes}>
+          <div className="text-amber-700 bg-amber-100 rounded-md font-mono p-1 pl-2 mb-3 mt-1 text-sm">{`function(${expression.value.parameters.join(
+            ","
+          )})`}</div>
          <FunctionChart
            fn={expression.value}
            chartSettings={chartSettings}
@ -300,9 +320,9 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
    );
  } else {
    internal = (
-      <ErrorBox heading={"Parse Error"}>
+      <ErrorAlert heading={"Parse Error"}>
        {errorValueToString(expressionResult.value)}
-      </ErrorBox>
+      </ErrorAlert>
    );
  }
  return internal;
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@ -14,7 +14,7 @@ import {
  defaultImports,
  defaultBindings,
 } from "@quri/squiggle-lang";
-import { ErrorBox } from "./ErrorBox";
+import { ErrorAlert } from "./Alert";

 export interface SquiggleEditorProps {
  /** The input string for squiggle */
@ -181,7 +181,11 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
          height={20}
        />
      </div>
-      {error !== null ? <ErrorBox heading="Error">{error}</ErrorBox> : <></>}
+      {error !== null ? (
+        <ErrorAlert heading="Error">{error}</ErrorAlert>
+      ) : (
+        <></>
+      )}
    </div>
  );
 };
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@ -8,31 +8,13 @@ import { useForm, useWatch } from "react-hook-form";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { defaultBindings, environment } from "@quri/squiggle-lang";
-
-interface ShowBoxProps {
-  height: number;
-  children: React.ReactNode;
-}
-
-const ShowBox: React.FC<ShowBoxProps> = ({ height, children }) => (
-  <div className="border border-grey-100" style={{ height: height + "px" }}>
-    {children}
-  </div>
-);
-
-interface TitleProps {
-  readonly maxHeight: number;
-  children: React.ReactNode;
-}
-
-const Display: React.FC<TitleProps> = ({ maxHeight, children }) => (
-  <div
-    className="bg-gray-50 border-l border-grey-100 p-2"
-    style={{ maxHeight: maxHeight + "px" }}
-  >
-    {children}
-  </div>
-);
+import { Tab } from "@headlessui/react";
+import { CodeIcon } from "@heroicons/react/solid";
+import { CogIcon } from "@heroicons/react/solid";
+import { ChartSquareBarIcon } from "@heroicons/react/solid";
+import { CurrencyDollarIcon } from "@heroicons/react/solid";
+import { Fragment } from "react";
+import { ErrorAlert, SuccessAlert } from "./Alert";

 interface PlaygroundProps {
  /** The initial squiggle string to put in the playground */
@ -79,6 +61,27 @@ const schema = yup
    showControls: yup.boolean(),
    showSummary: yup.boolean(),
    showSettingsPage: yup.boolean().default(false),
+    diagramStart: yup
+      .number()
+      .required()
+      .positive()
+      .integer()
+      .default(0)
+      .min(0),
+    diagramStop: yup
+      .number()
+      .required()
+      .positive()
+      .integer()
+      .default(10)
+      .min(0),
+    diagramCount: yup
+      .number()
+      .required()
+      .positive()
+      .integer()
+      .default(20)
+      .min(2),
  })
  .required();

@ -88,12 +91,68 @@ type InputProps = {
 };

 const InputItem: React.FC<InputProps> = ({ label, children }) => (
-  <div>
-    <label>{label}</label>
-    {children}
+  <div className="col-span-4">
+    <label className="block text-sm font-medium text-gray-600">{label}</label>
+    <div className="mt-1">{children}</div>
  </div>
 );

+let numberStyle =
+  "max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md";
+
+function classNames(...classes: string[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+type StyledTabProps = {
+  name: string;
+  iconName: string;
+};
+
+const StyledTab: React.FC<StyledTabProps> = ({ name, iconName }) => {
+  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={name} 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"
+              }
+            >
+              {name}
+            </span>
+          </span>
+        </button>
+      )}
+    </Tab>
+  );
+};
+
 let SquigglePlayground: FC<PlaygroundProps> = ({
  initialSquiggleString = "",
  height = 500,
@ -105,14 +164,6 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
  let [importString, setImportString] = useState("{}");
  let [imports, setImports] = useState({});
  let [importsAreValid, setImportsAreValid] = useState(true);
-  let [diagramStart, setDiagramStart] = useState(0);
-  let [diagramStop, setDiagramStop] = useState(10);
-  let [diagramCount, setDiagramCount] = useState(20);
-  let chartSettings = {
-    start: diagramStart,
-    stop: diagramStop,
-    count: diagramCount,
-  };
  const { register, control } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
@ -124,11 +175,19 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
      showSummary: showSummary,
      leftSizePercent: 50,
      showSettingsPage: false,
+      diagramStart: 0,
+      diagramStop: 10,
+      diagramCount: 20,
    },
  });
  const vars = useWatch({
    control,
  });
+  let chartSettings = {
+    start: Number(vars.diagramStart),
+    stop: Number(vars.diagramStop),
+    count: Number(vars.diagramCount),
+  };
  let env: environment = {
    sampleCount: Number(vars.sampleCount),
    xyPointLength: Number(vars.xyPointLength),
@ -142,80 +201,222 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
      setImportsAreValid(false);
    }
  };
-  return (
-    <ShowBox height={height}>
-      <input type="checkbox" {...register("showSettingsPage")} />
-      <div className="columns-2">
-        <div className="break-inside-avoid">
-          {vars.showSettingsPage ? (
-            <>
-              <InputItem label="Sample Count">
-                <input type="number" {...register("sampleCount")} />
-              </InputItem>
-              <InputItem label="XYPointLength Count">
-                <input type="number" {...register("xyPointLength")} />
-              </InputItem>
-              <InputItem label="Chart Height (in Pixels)">
-                <input type="number" {...register("chartHeight")} />
-              </InputItem>
-              <InputItem label="Show Types">
-                <input type="checkbox" {...register("showTypes")} />
-              </InputItem>
-              <InputItem label="Show Controls">
-                <input type="checkbox" {...register("showControls")} />
-              </InputItem>
-              <InputItem label="Show Summary Statistics">
-                <input type="checkbox" {...register("showSummary")} />
-              </InputItem>
-              <InputItem label="Editor Width">
-                <input
-                  type="range"
-                  min="1"
-                  max="100"
-                  className="slider"
-                  {...register("leftSizePercent")}
-                />
-              </InputItem>
-              <InputItem label="Json Editor for imports">
-                <>
-                  <JsonEditor
-                    value={importString}
-                    onChange={getChangeJson}
-                    oneLine={false}
-                    showGutter={true}
-                    height={100}
-                  />
-                  {importsAreValid ? "Valid" : "Invalid"}
-                </>
-              </InputItem>
-            </>
-          ) : (
-            <CodeEditor
-              value={squiggleString}
-              onChange={setSquiggleString}
-              oneLine={false}
-              showGutter={true}
-              height={height - 3}
+
+  let samplingSettings = (
+    <div className="space-y-6 p-3 max-w-xl">
+      <InputItem label="Sample Count">
+        <>
+          <input
+            type="number"
+            {...register("sampleCount")}
+            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.
+          </p>
+        </>
+      </InputItem>
+      <InputItem label="Coordinate Count (For PointSet Shapes)">
+        <>
+          <input
+            type="number"
+            {...register("xyPointLength")}
+            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.
+          </p>
+        </>
+      </InputItem>
+    </div>
+  );
+
+  let viewSettings = (
+    <div className="space-y-6 p-3 divide-y divide-gray-200 max-w-xl">
+      <div className="space-y-2">
+        <h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
+          General Display Settings
+        </h3>
+        <InputItem label="Chart Height (in pixels)">
+          <input
+            type="number"
+            {...register("chartHeight")}
+            className={numberStyle}
+          />
+        </InputItem>
+        <div className="relative flex items-start pt-3">
+          <div className="flex items-center h-5">
+            <input
+              type="checkbox"
+              {...register("showTypes")}
+              className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
            />
-          )}
-        </div>
-        <div>
-          <Display maxHeight={height - 3}>
-            <SquiggleChart
-              squiggleString={squiggleString}
-              environment={env}
-              chartSettings={chartSettings}
-              height={vars.chartHeight}
-              showTypes={vars.showTypes}
-              showControls={vars.showControls}
-              bindings={defaultBindings}
-              jsImports={imports}
-              showSummary={vars.showSummary}
-            />
-          </Display>
+          </div>
+          <div className="ml-3 text-sm">
+            <label className="font-medium text-gray-700">
+              Show information about displayed types.
+            </label>
+          </div>
        </div>
      </div>
-    </ShowBox>
+
+      <div className="space-y-2 pt-8">
+        <h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
+          Distribution Display Settings
+        </h3>
+
+        <div className="relative flex items-start">
+          <div className="flex items-center h-5">
+            <input
+              type="checkbox"
+              {...register("showControls")}
+              className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+            />
+          </div>
+          <div className="ml-3 text-sm">
+            <label className="font-medium text-gray-700">
+              Show toggles to adjust scale of x and y axes
+            </label>
+          </div>
+        </div>
+        <div className="relative flex items-start">
+          <div className="flex items-center h-5">
+            <input
+              type="checkbox"
+              {...register("showSummary")}
+              className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+            />
+          </div>
+          <div className="ml-3 text-sm">
+            <label className="font-medium text-gray-700">
+              Show summary statistics
+            </label>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-2 pt-8">
+        <h3 className="text-lg leading-6 font-medium text-gray-900 pb-2">
+          Function Display Settings
+        </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.
+        </p>
+        <div className="pt-4 grid grid-cols-1 gap-y-4 gap-x-4">
+          <InputItem label="Min X Value">
+            <input
+              type="number"
+              {...register("diagramStart")}
+              className={numberStyle}
+            />
+          </InputItem>
+          <InputItem label="Max X Value">
+            <input
+              type="number"
+              {...register("diagramStop")}
+              className={numberStyle}
+            />
+          </InputItem>
+          <InputItem label="Points between X min and X max to sample">
+            <input
+              type="number"
+              {...register("diagramCount")}
+              className={numberStyle}
+            />
+          </InputItem>
+        </div>
+      </div>
+    </div>
+  );
+
+  let inputVariableSettings = (
+    <div className="space-y-6 p-3 max-w-3xl">
+      <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".
+      </p>
+      <div className="border border-slate-200 mt-6 mb-2">
+        <JsonEditor
+          value={importString}
+          onChange={getChangeJson}
+          oneLine={false}
+          showGutter={true}
+          height={150}
+        />
+      </div>
+      <div className="p-1 pt-2">
+        {importsAreValid ? (
+          <SuccessAlert heading="Valid Json">
+            <></>
+          </SuccessAlert>
+        ) : (
+          <ErrorAlert heading="Invalid JSON">
+            You must use valid json in this editor.
+          </ErrorAlert>
+        )}
+      </div>
+    </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">
+            <StyledTab name="Code" iconName="code" />
+            <StyledTab name="Sampling Settings" iconName="cog" />
+            <StyledTab name="View Settings" iconName="squareBar" />
+            <StyledTab name="Input Variables" iconName="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>
+
+          <div className="w-1/2 p-2 pl-4">
+            <div style={{ maxHeight: height + "px" }}>
+              <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>
+        </div>
+      </div>
+    </Tab.Group>
  );
 };
 export default SquigglePlayground;
--- a/packages/components/src/tailwind.css
+++ b/packages/components/src/tailwind.css
@ -1,3 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+@tailwind forms;
--- a/packages/components/src/vega-specs/spec-distributions.json
+++ b/packages/components/src/vega-specs/spec-distributions.json
@ -49,7 +49,7 @@
            "value": 0
          },
          "fill": {
-            "value": "#4C78A8"
+            "value": "#739ECC"
          },
          "interpolate": {
            "value": "linear"
--- a/packages/components/tailwind.config.js
+++ b/packages/components/tailwind.config.js
@ -3,5 +3,5 @@ module.exports = {
  theme: {
    extend: {},
  },
-  plugins: [],
+  plugins: [require("@tailwindcss/forms")],
 };
--- a/yarn.lock
+++ b/yarn.lock
@ -1842,6 +1842,16 @@
  dependencies:
    "@hapi/hoek" "^9.0.0"

+"@headlessui/react@^1.6.4":
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.6.4.tgz#c73084e23386bef5fb86cd16da3352c3a844bb4c"
+  integrity sha512-0yqz1scwbFtwljmbbKjXsSGl5ABEYNICVHZnMCWo0UtOZodo2Tpu94uOVgCRjRZ77l2WcTi2S0uidINDvG7lsA==
+
+"@heroicons/react@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
+  integrity sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==
+
 "@hookform/resolvers@^2.8.10":
  version "2.8.10"
  resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.8.10.tgz#b66d7a7848b1b1dd5b976a73fff36bb366666e7d"
@ -3880,6 +3890,13 @@
  dependencies:
    defer-to-connect "^1.0.1"

+"@tailwindcss/forms@^0.5.2":
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.2.tgz#4ef45f9916dcb37838cbe7fecdcc4ba7a7c2ab59"
+  integrity sha512-pSrFeJB6Bg1Mrg9CdQW3+hqZXAKsBrSG9MAfFLKy1pVA4Mb4W7C0k7mEhlmS2Dfo/otxrQOET7NJiJ9RrS563w==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
 "@testing-library/dom@^8.5.0":
  version "8.13.0"
  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.13.0.tgz#bc00bdd64c7d8b40841e27a70211399ad3af46f5"
@ -12231,6 +12248,11 @@ mini-css-extract-plugin@^2.4.5, mini-css-extract-plugin@^2.6.0:
  dependencies:
    schema-utils "^4.0.0"

+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz#8ab0aabcdf8c29ad5693ca595af19dd2ead09939"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"