Merge branch 'develop' into Umur-reducer-dev

2022-06-08 16:05:02 +02:00 · 2022-06-08 16:05:02 +02:00 · 2dc204e222
commit 2dc204e222
parent d811fcbf3b b022ea2fae
38 changed files with 1010 additions and 933 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -154,5 +154,7 @@ jobs:
        run: cd ../../ && yarn
      - name: Build rescript in squiggle-lang
        run: cd ../squiggle-lang && yarn build
+      - name: Build components
+        run: cd ../components && yarn build
      - name: Build website assets
        run: yarn build
--- a/packages/components/package.json
+++ b/packages/components/package.json
@ -5,7 +5,7 @@
  "dependencies": {
    "@headlessui/react": "^1.6.4",
    "@heroicons/react": "^1.0.6",
-    "@hookform/resolvers": "^2.8.10",
+    "@hookform/resolvers": "^2.9.0",
    "@quri/squiggle-lang": "^0.2.8",
    "@react-hook/size": "^2.1.2",
    "lodash": "^4.17.21",
@ -22,40 +22,42 @@
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.17.12",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/builder-webpack5": "^6.5.6",
-    "@storybook/manager-webpack5": "^6.5.6",
+    "@storybook/addon-actions": "^6.5.7",
+    "@storybook/addon-essentials": "^6.5.7",
+    "@storybook/addon-links": "^6.5.7",
+    "@storybook/builder-webpack5": "^6.5.7",
+    "@storybook/manager-webpack5": "^6.5.7",
    "@storybook/node-logger": "^6.5.6",
-    "@storybook/preset-create-react-app": "^4.1.1",
-    "@storybook/react": "^6.5.6",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.7",
    "@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",
    "@types/jest": "^27.5.0",
    "@types/lodash": "^4.14.182",
-    "@types/node": "^17.0.36",
+    "@types/node": "^17.0.40",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.5",
    "@types/styled-components": "^5.1.24",
    "@types/webpack": "^5.28.0",
    "cross-env": "^7.0.3",
+    "mini-css-extract-plugin": "^2.6.0",
+    "postcss-loader": "^7.0.0",
    "react-scripts": "^5.0.1",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.24",
    "ts-loader": "^9.3.0",
    "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.7.2",
+    "typescript": "^4.7.3",
    "web-vitals": "^2.1.4",
-    "webpack": "^5.72.1",
+    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "scripts": {
    "start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
-    "build": "tsc -b && build-storybook -s public",
+    "build": "tsc -b && tailwindcss -i ./src/tailwind.css -o ./dist/main.css && build-storybook -s public",
    "bundle": "webpack",
    "all": "yarn bundle && yarn build",
    "lint": "prettier --check .",
--- a/packages/components/postcss.config.js
+++ b/packages/components/postcss.config.js
@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+    cssnano: {},
+  },
+};
--- a/packages/components/src/components/Alert.tsx
+++ b/packages/components/src/components/Alert.tsx
@ -10,23 +10,32 @@ export const Alert: React.FC<{
  backgroundColor: string;
  headingColor: string;
  bodyColor: string;
-  icon: React.ReactNode;
-  children: React.ReactNode;
+  icon: (props: React.ComponentProps<"svg">) => JSX.Element;
+  iconColor: string;
+  children?: React.ReactNode;
 }> = ({
  heading = "Error",
  backgroundColor,
  headingColor,
  bodyColor,
-  icon,
+  icon: Icon,
+  iconColor,
  children,
 }) => {
  return (
    <div className={`rounded-md p-4 ${backgroundColor}`}>
      <div className="flex">
-        <div className="flex-shrink-0">{icon}</div>
+        <Icon
+          className={`h-5 w-5 flex-shrink-0 ${iconColor}`}
+          aria-hidden="true"
+        />
        <div className="ml-3">
-          <h3 className={`text-sm font-medium ${headingColor}`}>{heading}</h3>
-          <div className={`mt-2 text-sm ${bodyColor}`}>{children}</div>
+          <header className={`text-sm font-medium ${headingColor}`}>
+            {heading}
+          </header>
+          {children && React.Children.count(children) ? (
+            <div className={`mt-2 text-sm ${bodyColor}`}>{children}</div>
+          ) : null}
        </div>
      </div>
    </div>
@ -35,49 +44,42 @@ export const Alert: React.FC<{

 export const ErrorAlert: React.FC<{
  heading: string;
-  children: React.ReactNode;
-}> = ({ heading = "Error", children }) => (
+  children?: React.ReactNode;
+}> = (props) => (
  <Alert
-    heading={heading}
-    children={children}
+    {...props}
    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" />}
+    icon={XCircleIcon}
+    iconColor="text-red-400"
  />
 );

 export const MessageAlert: React.FC<{
  heading: string;
-  children: React.ReactNode;
-}> = ({ heading = "Error", children }) => (
+  children?: React.ReactNode;
+}> = (props) => (
  <Alert
-    heading={heading}
-    children={children}
+    {...props}
    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"
-      />
-    }
+    icon={InformationCircleIcon}
+    iconColor="text-slate-400"
  />
 );

 export const SuccessAlert: React.FC<{
  heading: string;
-  children: React.ReactNode;
-}> = ({ heading = "Error", children }) => (
+  children?: React.ReactNode;
+}> = (props) => (
  <Alert
-    heading={heading}
-    children={children}
+    {...props}
    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" />
-    }
+    icon={CheckCircleIcon}
+    iconColor="text-green-400"
  />
 );
--- a/packages/components/src/components/CodeEditor.tsx
+++ b/packages/components/src/components/CodeEditor.tsx
@ -14,13 +14,13 @@ interface CodeEditorProps {
  showGutter?: boolean;
 }

-export let CodeEditor: FC<CodeEditorProps> = ({
+export const CodeEditor: FC<CodeEditorProps> = ({
  value,
  onChange,
  oneLine = false,
  showGutter = false,
  height,
-}: CodeEditorProps) => {
+}) => {
  let lineCount = value.split("\n").length;
  let id = _.uniqueId();
  return (
@ -48,4 +48,3 @@ export let CodeEditor: FC<CodeEditorProps> = ({
    />
  );
 };
-export default CodeEditor;
--- a/packages/components/src/components/DistributionChart.tsx
+++ b/packages/components/src/components/DistributionChart.tsx
@ -1,5 +1,4 @@
 import * as React from "react";
-import _ from "lodash";
 import {
  Distribution,
  result,
@ -34,71 +33,64 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
  showSummary,
  width,
  showControls = false,
-}: DistributionChartProps) => {
-  let [isLogX, setLogX] = React.useState(false);
-  let [isExpY, setExpY] = React.useState(false);
-  let shape = distribution.pointSet();
-  const [sized, _] = useSize((size) => {
-    if (shape.tag === "Ok") {
-      let massBelow0 =
-        shape.value.continuous.some((x) => x.x <= 0) ||
-        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 = (
-        <CheckBox label="Log X scale" value={isLogX} onChange={setLogX} />
-      );
-      if (massBelow0) {
-        logCheckbox = (
-          <CheckBox
-            label="Log X scale"
-            value={isLogX}
-            onChange={setLogX}
-            disabled={true}
-            tooltip={
-              "Your distribution has mass lower than or equal to 0. Log only works on strictly positive values."
-            }
-          />
-        );
-      }
-
-      var result = (
-        <div style={{ width: widthProp + "px" }}>
-          <Vega
-            spec={spec}
-            data={{ con: shape.value.continuous, dis: shape.value.discrete }}
-            width={widthProp - 10}
-            height={height}
-            actions={false}
-          />
-          <div className="flex justify-center">
-            {showSummary && <SummaryTable distribution={distribution} />}
-          </div>
-          {showControls && (
-            <div>
-              {logCheckbox}
-              <CheckBox label="Exp Y scale" value={isExpY} onChange={setExpY} />
-            </div>
-          )}
-        </div>
-      );
-    } else {
-      var result = (
+}) => {
+  const [isLogX, setLogX] = React.useState(false);
+  const [isExpY, setExpY] = React.useState(false);
+  const shape = distribution.pointSet();
+  const [sized] = useSize((size) => {
+    if (shape.tag === "Error") {
+      return (
        <ErrorAlert heading="Distribution Error">
          {distributionErrorToString(shape.value)}
        </ErrorAlert>
      );
    }

-    return result;
+    const massBelow0 =
+      shape.value.continuous.some((x) => x.x <= 0) ||
+      shape.value.discrete.some((x) => x.x <= 0);
+    const 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;
+    }
+
+    return (
+      <div style={{ width: widthProp }}>
+        <Vega
+          spec={spec}
+          data={{ con: shape.value.continuous, dis: shape.value.discrete }}
+          width={widthProp - 10}
+          height={height}
+          actions={false}
+        />
+        <div className="flex justify-center">
+          {showSummary && <SummaryTable distribution={distribution} />}
+        </div>
+        {showControls && (
+          <div>
+            <CheckBox
+              label="Log X scale"
+              value={isLogX}
+              onChange={setLogX}
+              // Check whether we should disable the checkbox
+              {...(massBelow0
+                ? {
+                    disabled: true,
+                    tooltip:
+                      "Your distribution has mass lower than or equal to 0. Log only works on strictly positive values.",
+                  }
+                : {})}
+            />
+            <CheckBox label="Exp Y scale" value={isExpY} onChange={setExpY} />
+          </div>
+        )}
+      </div>
+    );
  });
  return sized;
 };
@ -121,13 +113,13 @@ interface CheckBoxProps {
  tooltip?: string;
 }

-export const CheckBox = ({
+export const CheckBox: React.FC<CheckBoxProps> = ({
  label,
  onChange,
  value,
  disabled = false,
  tooltip,
-}: CheckBoxProps) => {
+}) => {
  return (
    <span title={tooltip}>
      <input
@ -141,22 +133,39 @@ export const CheckBox = ({
  );
 };

+const TableHeadCell: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <th className="border border-slate-200 bg-slate-50 py-1 px-2 text-slate-500 font-semibold">
+    {children}
+  </th>
+);
+
+const Cell: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <td className="border border-slate-200 py-1 px-2 text-slate-900">
+    {children}
+  </td>
+);
+
 type SummaryTableProps = {
  distribution: Distribution;
 };

-const SummaryTable: React.FC<SummaryTableProps> = ({
-  distribution,
-}: SummaryTableProps) => {
-  let mean = distribution.mean();
-  let p5 = distribution.inv(0.05);
-  let p10 = distribution.inv(0.1);
-  let p25 = distribution.inv(0.25);
-  let p50 = distribution.inv(0.5);
-  let p75 = distribution.inv(0.75);
-  let p90 = distribution.inv(0.9);
-  let p95 = distribution.inv(0.95);
-  let unwrapResult = (
+const SummaryTable: React.FC<SummaryTableProps> = ({ distribution }) => {
+  const mean = distribution.mean();
+  const stdev = distribution.stdev();
+  const p5 = distribution.inv(0.05);
+  const p10 = distribution.inv(0.1);
+  const p25 = distribution.inv(0.25);
+  const p50 = distribution.inv(0.5);
+  const p75 = distribution.inv(0.75);
+  const p90 = distribution.inv(0.9);
+  const p95 = distribution.inv(0.95);
+
+  const hasResult = (x: result<number, distributionError>): boolean =>
+    x.tag === "Ok";
+
+  const unwrapResult = (
    x: result<number, distributionError>
  ): React.ReactNode => {
    if (x.tag === "Ok") {
@ -170,24 +179,12 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
    }
  };

-  let TableHeadCell: React.FC<{ children: React.ReactNode }> = ({
-    children,
-  }) => (
-    <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-200 py-1 px-2 text-slate-900 ">
-      {children}
-    </td>
-  );
-
  return (
    <table className="border border-collapse border-slate-400">
      <thead className="bg-slate-50">
        <tr>
          <TableHeadCell>{"Mean"}</TableHeadCell>
+          {hasResult(stdev) && <TableHeadCell>{"Stdev"}</TableHeadCell>}
          <TableHeadCell>{"5%"}</TableHeadCell>
          <TableHeadCell>{"10%"}</TableHeadCell>
          <TableHeadCell>{"25%"}</TableHeadCell>
@ -200,6 +197,7 @@ const SummaryTable: React.FC<SummaryTableProps> = ({
      <tbody>
        <tr>
          <Cell>{unwrapResult(mean)}</Cell>
+          {hasResult(stdev) && <Cell>{unwrapResult(stdev)}</Cell>}
          <Cell>{unwrapResult(p5)}</Cell>
          <Cell>{unwrapResult(p10)}</Cell>
          <Cell>{unwrapResult(p25)}</Cell>
--- a/packages/components/src/components/FunctionChart.tsx
+++ b/packages/components/src/components/FunctionChart.tsx
@ -22,7 +22,7 @@ export const FunctionChart: React.FC<FunctionChartProps> = ({
  chartSettings,
  environment,
  height,
-}: FunctionChartProps) => {
+}) => {
  if (fn.parameters.length > 1) {
    return (
      <MessageAlert heading="Function Display Not Supported">
--- a/packages/components/src/components/FunctionChart1Dist.tsx
+++ b/packages/components/src/components/FunctionChart1Dist.tsx
@ -151,7 +151,7 @@ export const FunctionChart1Dist: React.FC<FunctionChart1DistProps> = ({
  chartSettings,
  environment,
  height,
-}: FunctionChart1DistProps) => {
+}) => {
  let [mouseOverlay, setMouseOverlay] = React.useState(0);
  function handleHover(_name: string, value: unknown) {
    setMouseOverlay(value as number);
@ -170,16 +170,14 @@ export const FunctionChart1Dist: React.FC<FunctionChart1DistProps> = ({
        },
      };
  let showChart =
-    mouseItem.tag === "Ok" && mouseItem.value.tag == "distribution" ? (
+    mouseItem.tag === "Ok" && mouseItem.value.tag === "distribution" ? (
      <DistributionChart
        distribution={mouseItem.value.value}
        width={400}
        height={50}
        showSummary={false}
      />
-    ) : (
-      <></>
-    );
+    ) : null;

  let getPercentilesMemoized = React.useMemo(
    () => getPercentiles({ chartSettings, fn, environment }),
--- a/packages/components/src/components/JsonEditor.tsx
+++ b/packages/components/src/components/JsonEditor.tsx
@ -14,15 +14,15 @@ interface CodeEditorProps {
  showGutter?: boolean;
 }

-export let JsonEditor: FC<CodeEditorProps> = ({
+export const JsonEditor: FC<CodeEditorProps> = ({
  value,
  onChange,
  oneLine = false,
  showGutter = false,
  height,
-}: CodeEditorProps) => {
-  let lineCount = value.split("\n").length;
-  let id = _.uniqueId();
+}) => {
+  const lineCount = value.split("\n").length;
+  const id = _.uniqueId();
  return (
    <AceEditor
      value={value}
@ -47,5 +47,3 @@ export let JsonEditor: FC<CodeEditorProps> = ({
    />
  );
 };
-
-export default JsonEditor;
--- a/packages/components/src/components/NumberShower.tsx
+++ b/packages/components/src/components/NumberShower.tsx
@ -1,5 +1,4 @@
 import * as React from "react";
-import _ from "lodash";

 const orderOfMagnitudeNum = (n: number) => {
  return Math.pow(10, n);
@ -74,25 +73,23 @@ export interface NumberShowerProps {
  precision?: number;
 }

-export let NumberShower: React.FC<NumberShowerProps> = ({
+export const NumberShower: React.FC<NumberShowerProps> = ({
  number,
  precision = 2,
-}: NumberShowerProps) => {
-  let numberWithPresentation = numberShow(number, precision);
+}) => {
+  const numberWithPresentation = numberShow(number, precision);
  return (
    <span>
      {numberWithPresentation.value}
      {numberWithPresentation.symbol}
      {numberWithPresentation.power ? (
        <span>
-          {"\u00b710"}
+          {"\u00b7" /* dot symbol */}10
          <span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
            {numberWithPresentation.power}
          </span>
        </span>
-      ) : (
-        <></>
-      )}
+      ) : null}
    </span>
  );
 };
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@ -1,5 +1,4 @@
 import * as React from "react";
-import _ from "lodash";
 import {
  run,
  errorValueToString,
@ -28,6 +27,7 @@ function getRange<a>(x: declaration<a>) {
    }
  }
 }
+
 function getChartSettings<a>(x: declaration<a>): FunctionChartSettings {
  let range = getRange(x);
  let min = range.floats ? range.floats.min : 0;
@ -49,12 +49,12 @@ export const VariableBox: React.FC<VariableBoxProps> = ({
  heading = "Error",
  children,
  showTypes = false,
-}: VariableBoxProps) => {
+}) => {
  if (showTypes) {
    return (
      <div className="bg-white border border-grey-200 m-2">
        <div className="border-b border-grey-200 p-3">
-          <h3 className="font-mono">{heading}</h3>
+          <header className="font-mono">{heading}</header>
        </div>
        <div className="p-3">{children}</div>
      </div>
@ -90,7 +90,7 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
  showControls = false,
  chartSettings,
  environment,
-}: SquiggleItemProps) => {
+}) => {
  switch (expression.tag) {
    case "number":
      return (
@ -108,12 +108,8 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
          showTypes={showTypes}
        >
          {distType === "Symbolic" && showTypes ? (
-            <>
-              <div>{expression.value.toString()}</div>
-            </>
-          ) : (
-            <></>
-          )}
+            <div>{expression.value.toString()}</div>
+          ) : null}
          <DistributionChart
            distribution={expression.value}
            height={height}
@ -157,11 +153,11 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
      return (
        <VariableBox heading="Array" showTypes={showTypes}>
          {expression.value.map((r, i) => (
-            <div key={i} className="flex flex-row pt-1">
+            <div key={i} className="flex pt-1">
              <div className="flex-none bg-slate-100 rounded-sm px-1">
-                <h3 className="text-slate-400 font-mono">{i}</h3>
+                <header className="text-slate-400 font-mono">{i}</header>
              </div>
-              <div className="px-2 mb-2 grow ">
+              <div className="px-2 mb-2 grow">
                <SquiggleItem
                  key={i}
                  expression={r}
@ -181,25 +177,27 @@ const SquiggleItem: React.FC<SquiggleItemProps> = ({
    case "record":
      return (
        <VariableBox heading="Record" showTypes={showTypes}>
-          {Object.entries(expression.value).map(([key, r]) => (
-            <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 className="space-y-3">
+            {Object.entries(expression.value).map(([key, r]) => (
+              <div key={key} className="flex space-x-2">
+                <div className="flex-none">
+                  <header className="text-slate-500 font-mono">{key}:</header>
+                </div>
+                <div className="px-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>
-              <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>
-          ))}
+            ))}
+          </div>
        </VariableBox>
      );
    case "arraystring":
@ -285,7 +283,7 @@ export interface SquiggleChartProps {
  showControls?: boolean;
 }

-let defaultChartSettings = { start: 0, stop: 10, count: 20 };
+const defaultChartSettings = { start: 0, stop: 10, count: 20 };

 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
  squiggleString = "",
@ -299,31 +297,29 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
  showTypes = false,
  showControls = false,
  chartSettings = defaultChartSettings,
-}: SquiggleChartProps) => {
+}) => {
  let expressionResult = run(squiggleString, bindings, environment, jsImports);
-  let e = environment ? environment : defaultEnvironment;
-  let internal: JSX.Element;
-  if (expressionResult.tag === "Ok") {
-    let expression = expressionResult.value;
-    onChange(expression);
-    internal = (
-      <SquiggleItem
-        expression={expression}
-        width={width}
-        height={height}
-        showSummary={showSummary}
-        showTypes={showTypes}
-        showControls={showControls}
-        chartSettings={chartSettings}
-        environment={e}
-      />
-    );
-  } else {
-    internal = (
+  if (expressionResult.tag !== "Ok") {
+    return (
      <ErrorAlert heading={"Parse Error"}>
        {errorValueToString(expressionResult.value)}
      </ErrorAlert>
    );
  }
-  return internal;
+
+  let e = environment ?? defaultEnvironment;
+  let expression = expressionResult.value;
+  onChange(expression);
+  return (
+    <SquiggleItem
+      expression={expression}
+      width={width}
+      height={height}
+      showSummary={showSummary}
+      showTypes={showTypes}
+      showControls={showControls}
+      chartSettings={chartSettings}
+      environment={e}
+    />
+  );
 };
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@ -57,8 +57,8 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
  showControls = false,
  showSummary = false,
 }: SquiggleEditorProps) => {
-  let [expression, setExpression] = React.useState(initialSquiggleString);
-  let chartSettings = {
+  const [expression, setExpression] = React.useState(initialSquiggleString);
+  const chartSettings = {
    start: diagramStart,
    stop: diagramStop,
    count: diagramCount,
@ -150,17 +150,17 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
  environment,
  jsImports = defaultImports,
 }: SquigglePartialProps) => {
-  let [expression, setExpression] = React.useState(initialSquiggleString);
-  let [error, setError] = React.useState<string | null>(null);
+  const [expression, setExpression] = React.useState(initialSquiggleString);
+  const [error, setError] = React.useState<string | null>(null);

-  let runSquiggleAndUpdateBindings = () => {
-    let squiggleResult = runPartial(
+  const runSquiggleAndUpdateBindings = () => {
+    const squiggleResult = runPartial(
      expression,
      bindings,
      environment,
      jsImports
    );
-    if (squiggleResult.tag == "Ok") {
+    if (squiggleResult.tag === "Ok") {
      if (onChange) onChange(squiggleResult.value);
      setError(null);
    } else {
@ -181,11 +181,7 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
          height={20}
        />
      </div>
-      {error !== null ? (
-        <ErrorAlert heading="Error">{error}</ErrorAlert>
-      ) : (
-        <></>
-      )}
+      {error !== null ? <ErrorAlert heading="Error">{error}</ErrorAlert> : null}
    </div>
  );
 };
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@ -1,19 +1,21 @@
-import _ from "lodash";
-import React, { FC, ReactElement, useState } from "react";
+import React, { FC, Fragment, useState } from "react";
 import ReactDOM from "react-dom";
-import { SquiggleChart } from "./SquiggleChart";
-import CodeEditor from "./CodeEditor";
-import JsonEditor from "./JsonEditor";
-import { useForm, useWatch } from "react-hook-form";
+import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { defaultBindings, environment } from "@quri/squiggle-lang";
 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 {
+  ChartSquareBarIcon,
+  CodeIcon,
+  CogIcon,
+  CurrencyDollarIcon,
+} from "@heroicons/react/solid";
+
+import { defaultBindings, environment } from "@quri/squiggle-lang";
+
+import { SquiggleChart } from "./SquiggleChart";
+import { CodeEditor } from "./CodeEditor";
+import { JsonEditor } from "./JsonEditor";
 import { ErrorAlert, SuccessAlert } from "./Alert";

 interface PlaygroundProps {
@ -85,49 +87,20 @@ const schema = yup
  })
  .required();

-type InputProps = {
-  label: string;
-  children: ReactElement;
-};
-
-const InputItem: React.FC<InputProps> = ({ 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;
+  icon: (props: React.ComponentProps<"svg">) => JSX.Element;
 };

-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]);
-
+const StyledTab: React.FC<StyledTabProps> = ({ name, icon: Icon }) => {
  return (
    <Tab key={name} as={Fragment}>
      {({ selected }) => (
-        <button className="flex rounded-md focus:outline-none focus-visible:ring-offset-gray-100 ">
+        <button className="group 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",
@ -136,7 +109,14 @@ const StyledTab: React.FC<StyledTabProps> = ({ name, iconName }) => {
                : ""
            )}
          >
-            {icon(selected)}
+            <Icon
+              className={classNames(
+                "-ml-0.5 mr-2 h-4 w-4",
+                selected
+                  ? "text-slate-500"
+                  : "text-gray-400 group-hover:text-gray-900"
+              )}
+            />
            <span
              className={
                selected
@ -153,17 +133,77 @@ const StyledTab: React.FC<StyledTabProps> = ({ name, iconName }) => {
  );
 };

-let SquigglePlayground: FC<PlaygroundProps> = ({
+const HeadedSection: FC<{ title: string; children: React.ReactNode }> = ({
+  title,
+  children,
+}) => (
+  <div>
+    <header className="text-lg leading-6 font-medium text-gray-900">
+      {title}
+    </header>
+    <div className="mt-4">{children}</div>
+  </div>
+);
+
+const Text: FC<{ children: React.ReactNode }> = ({ children }) => (
+  <p className="text-sm text-gray-500">{children}</p>
+);
+
+function InputItem<T>({
+  name,
+  label,
+  type,
+  register,
+}: {
+  name: Path<T>;
+  label: string;
+  type: "number";
+  register: UseFormRegister<T>;
+}) {
+  const 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";
+
+  return (
+    <label className="block">
+      <div className="text-sm font-medium text-gray-600 mb-1">{label}</div>
+      <input type={type} {...register(name)} className={numberStyle} />
+    </label>
+  );
+}
+
+function Checkbox<T>({
+  name,
+  label,
+  register,
+}: {
+  name: Path<T>;
+  label: string;
+  register: UseFormRegister<T>;
+}) {
+  return (
+    <label className="flex items-center">
+      <input
+        type="checkbox"
+        {...register(name)}
+        className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+      />
+      {/* Clicking on the div makes the checkbox lose focus while mouse button is pressed, leading to annoying blinking; I couldn't figure out how to fix this. */}
+      <div className="ml-3 text-sm font-medium text-gray-700">{label}</div>
+    </label>
+  );
+}
+
+const SquigglePlayground: FC<PlaygroundProps> = ({
  initialSquiggleString = "",
  height = 500,
  showTypes = false,
  showControls = false,
  showSummary = false,
-}: PlaygroundProps) => {
-  let [squiggleString, setSquiggleString] = useState(initialSquiggleString);
-  let [importString, setImportString] = useState("{}");
-  let [imports, setImports] = useState({});
-  let [importsAreValid, setImportsAreValid] = useState(true);
+}) => {
+  const [squiggleString, setSquiggleString] = useState(initialSquiggleString);
+  const [importString, setImportString] = useState("{}");
+  const [imports, setImports] = useState({});
+  const [importsAreValid, setImportsAreValid] = useState(true);
  const { register, control } = useForm({
    resolver: yupResolver(schema),
    defaultValues: {
@ -183,16 +223,16 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
  const vars = useWatch({
    control,
  });
-  let chartSettings = {
+  const chartSettings = {
    start: Number(vars.diagramStart),
    stop: Number(vars.diagramStop),
    count: Number(vars.diagramCount),
  };
-  let env: environment = {
+  const env: environment = {
    sampleCount: Number(vars.sampleCount),
    xyPointLength: Number(vars.xyPointLength),
  };
-  let getChangeJson = (r: string) => {
+  const getChangeJson = (r: string) => {
    setImportString(r);
    try {
      setImports(JSON.parse(r));
@ -202,217 +242,184 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
    }
  };

-  let samplingSettings = (
+  const 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">
+      <div>
+        <InputItem
+          name="sampleCount"
+          type="number"
+          label="Sample Count"
+          register={register}
+        />
+        <div className="mt-2">
+          <Text>
            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">
+          </Text>
+        </div>
+      </div>
+      <div>
+        <InputItem
+          name="xyPointLength"
+          type="number"
+          register={register}
+          label="Coordinate Count (For PointSet Shapes)"
+        />
+        <div className="mt-2">
+          <Text>
            When distributions are converted into PointSet shapes, we need to
            know how many coordinates to use.
-          </p>
-        </>
-      </InputItem>
+          </Text>
+        </div>
+      </div>
    </div>
  );

-  let viewSettings = (
+  const 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
+      <HeadedSection title="General Display Settings">
+        <div className="space-y-4">
+          <InputItem
+            name="chartHeight"
            type="number"
-            {...register("chartHeight")}
-            className={numberStyle}
+            register={register}
+            label="Chart Height (in pixels)"
          />
-        </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"
+          <Checkbox
+            name="showTypes"
+            register={register}
+            label="Show information about displayed types"
+          />
+        </div>
+      </HeadedSection>
+
+      <div className="pt-8">
+        <HeadedSection title="Distribution Display Settings">
+          <div className="space-y-2">
+            <Checkbox
+              register={register}
+              name="showControls"
+              label="Show toggles to adjust scale of x and y axes"
+            />
+            <Checkbox
+              register={register}
+              name="showSummary"
+              label="Show summary statistics"
            />
          </div>
-          <div className="ml-3 text-sm">
-            <label className="font-medium text-gray-700">
-              Show information about displayed types.
-            </label>
-          </div>
-        </div>
+        </HeadedSection>
      </div>

-      <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 className="pt-8">
+        <HeadedSection title="Function Display Settings">
+          <div className="space-y-6">
+            <Text>
+              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.
+            </Text>
+            <div className="space-y-4">
+              <InputItem
+                type="number"
+                name="diagramStart"
+                register={register}
+                label="Min X Value"
+              />
+              <InputItem
+                type="number"
+                name="diagramStop"
+                register={register}
+                label="Max X Value"
+              />
+              <InputItem
+                type="number"
+                name="diagramCount"
+                register={register}
+                label="Points between X min and X max to sample"
+              />
+            </div>
          </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>
+        </HeadedSection>
      </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>
+  const inputVariableSettings = (
+    <div className="p-3 max-w-3xl">
+      <HeadedSection title="Import Variables from JSON">
+        <div className="space-y-6">
+          <Text>
+            You can import variables from JSON into your Squiggle code.
+            Variables are accessed with dollar signs. For example, "timeNow"
+            would be accessed as "$timeNow".
+          </Text>
+          <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" />
+            ) : (
+              <ErrorAlert heading="Invalid JSON">
+                You must use valid JSON in this editor.
+              </ErrorAlert>
+            )}
+          </div>
+        </div>
+      </HeadedSection>
    </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 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} />
+          <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="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 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>
      </div>
@ -421,7 +428,7 @@ let SquigglePlayground: FC<PlaygroundProps> = ({
 };
 export default SquigglePlayground;
 export function renderSquigglePlaygroundToDom(props: PlaygroundProps) {
-  let parent = document.createElement("div");
+  const parent = document.createElement("div");
  ReactDOM.render(<SquigglePlayground {...props} />, parent);
  return parent;
 }
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@ -5,9 +5,9 @@ export {
  renderSquiggleEditorToDom,
  renderSquigglePartialToDom,
 } from "./components/SquiggleEditor";
-import SquigglePlayground, {
+export {
+  default as SquigglePlayground,
  renderSquigglePlaygroundToDom,
 } from "./components/SquigglePlayground";
-export { SquigglePlayground, renderSquigglePlaygroundToDom };

 export { mergeBindings } from "@quri/squiggle-lang";
--- a/packages/components/src/stories/SquiggleChart.stories.js.map
+++ b/packages/components/src/stories/SquiggleChart.stories.js.map
@ -1 +0,0 @@
-{"version":3,"file":"SquiggleChart.stories.js","sourceRoot":"","sources":["SquiggleChart.stories.tsx"],"names":[],"mappings":";;;AAAA,6BAA8B;AAC9B,iDAA+C;AAG/C,qBAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,6BAAa;CACzB,CAAA;AAED,IAAM,QAAQ,GAAG,UAAC,EAAgB;QAAf,cAAc,oBAAA;IAAM,OAAA,oBAAC,6BAAa,IAAC,cAAc,EAAE,cAAc,GAAI;AAAjD,CAAiD,CAAA;AAE3E,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,eAAO,CAAC,IAAI,GAAG;IACb,cAAc,EAAE,cAAc;CAC/B,CAAC"}
--- a/packages/components/webpack.config.js
+++ b/packages/components/webpack.config.js
@ -1,24 +1,26 @@
 const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");

 module.exports = {
  mode: "production",
  devtool: "source-map",
  profile: true,
-  entry: "./src/index.ts",
+  entry: ["./src/index.ts", "./src/tailwind.css"],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
-        options: { projectReferences: true, transpileOnly: true },
+        options: { projectReferences: true },
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
+        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
      },
    ],
  },
+  plugins: [new MiniCssExtractPlugin()],
  resolve: {
    extensions: [".js", ".tsx", ".ts"],
    alias: {
--- a/packages/squiggle-lang/tests/Reducer/Reducer_Peggy/Reducer_Peggy_Parse_test.res
+++ b/packages/squiggle-lang/tests/Reducer/Reducer_Peggy/Reducer_Peggy_Parse_test.res
@ -232,6 +232,7 @@ describe("Peggy parse", () => {
  })
  describe("unit", () => {
    testParse("1m", "{(::fromUnit_m 1)}")
+    testParse("1M", "{(::fromUnit_M 1)}")
    testParse("1m+2cm", "{(::add (::fromUnit_m 1) (::fromUnit_cm 2))}")
  })
 })
--- a/packages/squiggle-lang/package.json
+++ b/packages/squiggle-lang/package.json
@ -56,14 +56,14 @@
    "lodash": "^4.17.21",
    "moduleserve": "^0.9.1",
    "nyc": "^15.1.0",
-    "peggy": "^2.0.0",
+    "peggy": "^2.0.1",
    "reanalyze": "^2.22.0",
    "rescript-fast-check": "^1.1.1",
    "ts-jest": "^27.1.4",
    "ts-loader": "^9.3.0",
-    "ts-node": "^10.8.0",
-    "typescript": "^4.7.2",
-    "webpack": "^5.72.1",
+    "ts-node": "^10.8.1",
+    "typescript": "^4.7.3",
+    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2"
  },
  "source": "./src/js/index.ts",
--- a/packages/squiggle-lang/src/js/distribution.ts
+++ b/packages/squiggle-lang/src/js/distribution.ts
@ -11,6 +11,7 @@ import {
 import { result, resultMap, Ok } from "./types";
 import {
  Constructors_mean,
+  Constructors_stdev,
  Constructors_sample,
  Constructors_pdf,
  Constructors_cdf,
@ -69,6 +70,10 @@ export class Distribution {
    return Constructors_mean({ env: this.env }, this.t);
  }

+  stdev(): result<number, distributionError> {
+    return Constructors_stdev({ env: this.env }, this.t);
+  }
+
  sample(): result<number, distributionError> {
    return Constructors_sample({ env: this.env }, this.t);
  }
--- a/packages/squiggle-lang/src/rescript/Distributions/DistributionOperation.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/DistributionOperation.res
@ -265,6 +265,8 @@ module Constructors = {
  module C = DistributionTypes.Constructors.UsingDists
  open OutputLocal
  let mean = (~env, dist) => C.mean(dist)->run(~env)->toFloatR
+  let stdev = (~env, dist) => C.stdev(dist)->run(~env)->toFloatR
+  let variance = (~env, dist) => C.variance(dist)->run(~env)->toFloatR
  let sample = (~env, dist) => C.sample(dist)->run(~env)->toFloatR
  let cdf = (~env, dist, f) => C.cdf(dist, f)->run(~env)->toFloatR
  let inv = (~env, dist, f) => C.inv(dist, f)->run(~env)->toFloatR
--- a/packages/squiggle-lang/src/rescript/Distributions/DistributionOperation.resi
+++ b/packages/squiggle-lang/src/rescript/Distributions/DistributionOperation.resi
@ -49,6 +49,10 @@ module Constructors: {
  @genType
  let mean: (~env: env, genericDist) => result<float, error>
  @genType
+  let stdev: (~env: env, genericDist) => result<float, error>
+  @genType
+  let variance: (~env: env, genericDist) => result<float, error>
+  @genType
  let sample: (~env: env, genericDist) => result<float, error>
  @genType
  let cdf: (~env: env, genericDist, float) => result<float, error>
--- a/packages/squiggle-lang/src/rescript/Distributions/DistributionTypes.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/DistributionTypes.res
@ -30,9 +30,9 @@ module Error = {
  @genType
  let toString = (err: error): string =>
    switch err {
-    | NotYetImplemented => "Function Not Yet Implemented"
+    | NotYetImplemented => "Function not yet implemented"
    | Unreachable => "Unreachable"
-    | DistributionVerticalShiftIsInvalid => "Distribution Vertical Shift is Invalid"
+    | DistributionVerticalShiftIsInvalid => "Distribution vertical shift is invalid"
    | ArgumentError(s) => `Argument Error ${s}`
    | LogarithmOfDistributionError(s) => `Logarithm of input error: ${s}`
    | SampleSetError(TooFewSamples) => "Too Few Samples"
@ -68,6 +68,11 @@ module DistributionOperation = {
    | #Mean
    | #Sample
    | #IntegralSum
+    | #Mode
+    | #Stdev
+    | #Min
+    | #Max
+    | #Variance
  ]

  type toScaleFn = [
@ -117,6 +122,11 @@ module DistributionOperation = {
    | ToFloat(#Cdf(r)) => `cdf(${E.Float.toFixed(r)})`
    | ToFloat(#Inv(r)) => `inv(${E.Float.toFixed(r)})`
    | ToFloat(#Mean) => `mean`
+    | ToFloat(#Min) => `min`
+    | ToFloat(#Max) => `max`
+    | ToFloat(#Stdev) => `stdev`
+    | ToFloat(#Variance) => `variance`
+    | ToFloat(#Mode) => `mode`
    | ToFloat(#Pdf(r)) => `pdf(${E.Float.toFixed(r)})`
    | ToFloat(#Sample) => `sample`
    | ToFloat(#IntegralSum) => `integralSum`
@ -151,6 +161,8 @@ module Constructors = {
  module UsingDists = {
    @genType
    let mean = (dist): t => FromDist(ToFloat(#Mean), dist)
+    let stdev = (dist): t => FromDist(ToFloat(#Stdev), dist)
+    let variance = (dist): t => FromDist(ToFloat(#Variance), dist)
    let sample = (dist): t => FromDist(ToFloat(#Sample), dist)
    let cdf = (dist, x): t => FromDist(ToFloat(#Cdf(x)), dist)
    let inv = (dist, x): t => FromDist(ToFloat(#Inv(x)), dist)
--- a/packages/squiggle-lang/src/rescript/Distributions/GenericDist.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/GenericDist.res
@ -108,7 +108,7 @@ let toFloatOperation = (
 ) => {
  switch distToFloatOperation {
  | #IntegralSum => Ok(integralEndY(t))
-  | (#Pdf(_) | #Cdf(_) | #Inv(_) | #Mean | #Sample) as op => {
+  | (#Pdf(_) | #Cdf(_) | #Inv(_) | #Mean | #Sample | #Min | #Max) as op => {
      let trySymbolicSolution = switch (t: t) {
      | Symbolic(r) => SymbolicDist.T.operate(op, r)->E.R.toOption
      | _ => None
@ -118,6 +118,8 @@ let toFloatOperation = (
      | (SampleSet(sampleSet), #Mean) => SampleSetDist.mean(sampleSet)->Some
      | (SampleSet(sampleSet), #Sample) => SampleSetDist.sample(sampleSet)->Some
      | (SampleSet(sampleSet), #Inv(r)) => SampleSetDist.percentile(sampleSet, r)->Some
+      | (SampleSet(sampleSet), #Min) => SampleSetDist.min(sampleSet)->Some
+      | (SampleSet(sampleSet), #Max) => SampleSetDist.max(sampleSet)->Some
      | _ => None
      }

@ -130,6 +132,16 @@ let toFloatOperation = (
        }
      }
    }
+  | (#Stdev | #Variance | #Mode) as op =>
+    switch t {
+    | SampleSet(s) =>
+      switch op {
+      | #Stdev => SampleSetDist.stdev(s)->Ok
+      | #Variance => SampleSetDist.variance(s)->Ok
+      | #Mode => SampleSetDist.mode(s)->Ok
+      }
+    | _ => Error(DistributionTypes.NotYetImplemented)
+    }
  }
 }

--- a/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/PointSetDist.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/PointSetDist.res
@ -254,6 +254,8 @@ let operate = (distToFloatOp: Operation.distToFloatOperation, s): float =>
  | #Inv(f) => inv(f, s)
  | #Sample => sample(s)
  | #Mean => T.mean(s)
+  | #Min => T.minX(s)
+  | #Max => T.maxX(s)
  }

 let toSparkline = (t: t, bucketCount): result<string, PointSetTypes.sparklineError> =>
--- a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res
@ -449,6 +449,8 @@ module T = {
    | #Cdf(f) => Ok(cdf(f, s))
    | #Pdf(f) => Ok(pdf(f, s))
    | #Inv(f) => Ok(inv(f, s))
+    | #Min => Ok(min(s))
+    | #Max => Ok(max(s))
    | #Sample => Ok(sample(s))
    | #Mean => mean(s)
    }
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Peggy/Reducer_Peggy_GeneratedParser.peggy
@ -264,6 +264,9 @@ basicLiteral
 identifier 'identifier'
  = ([_a-z]+[_a-z0-9]i*) {return nodeIdentifier(text())} 

+unitIdentifier 'identifier'
+  = ([_a-zA-Z]+[_a-z0-9]i*) {return nodeIdentifier(text())} 
+
 dollarIdentifier '$identifier'
  = ([\$_a-z]+[\$_a-z0-9]i*) {return nodeIdentifier(text())} 

@ -271,7 +274,7 @@ string 'string'
  = characters:("'" @([^'])* "'") {return nodeString(characters.join(''))} 
  / characters:('"' @([^"])* '"') {return nodeString(characters.join(''))}

-number = number:(float / integer) unit:identifier?
+number = number:(float / integer) unit:unitIdentifier?
  { 
    if (unit === null)
      { return number }
--- a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_Date.res
+++ b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_Date.res
@ -0,0 +1,27 @@
+module EV = ReducerInterface_ExpressionValue
+type expressionValue = EV.expressionValue
+
+let dispatch = (call: EV.functionCall, _: DistributionOperation.env): option<
+  result<expressionValue, QuriSquiggleLang.Reducer_ErrorValue.errorValue>,
+> => {
+  switch call {
+  | ("toString", [EvDate(t)]) => EV.EvString(DateTime.Date.toString(t))->Ok->Some
+  | ("makeDateFromYear", [EvNumber(year)]) =>
+    switch DateTime.Date.makeFromYear(year) {
+    | Ok(t) => EV.EvDate(t)->Ok->Some
+    | Error(e) => Reducer_ErrorValue.RETodo(e)->Error->Some
+    }
+  | ("dateFromNumber", [EvNumber(f)]) => EV.EvDate(DateTime.Date.fromFloat(f))->Ok->Some
+  | ("toNumber", [EvDate(f)]) => EV.EvNumber(DateTime.Date.toFloat(f))->Ok->Some
+  | ("subtract", [EvDate(d1), EvDate(d2)]) =>
+    switch DateTime.Date.subtract(d1, d2) {
+    | Ok(d) => EV.EvTimeDuration(d)->Ok
+    | Error(e) => Error(RETodo(e))
+    }->Some
+  | ("subtract", [EvDate(d1), EvTimeDuration(d2)]) =>
+    EV.EvDate(DateTime.Date.subtractDuration(d1, d2))->Ok->Some
+  | ("add", [EvDate(d1), EvTimeDuration(d2)]) =>
+    EV.EvDate(DateTime.Date.addDuration(d1, d2))->Ok->Some
+  | _ => None
+  }
+}
--- a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_Duration.res
+++ b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_Duration.res
@ -1,32 +1,7 @@
 module EV = ReducerInterface_ExpressionValue
 type expressionValue = EV.expressionValue

-let dateDispatch = (call: EV.functionCall, _: DistributionOperation.env): option<
-  result<expressionValue, QuriSquiggleLang.Reducer_ErrorValue.errorValue>,
-> => {
-  switch call {
-  | ("toString", [EvDate(t)]) => EV.EvString(DateTime.Date.toString(t))->Ok->Some
-  | ("makeDateFromYear", [EvNumber(year)]) =>
-    switch DateTime.Date.makeFromYear(year) {
-    | Ok(t) => EV.EvDate(t)->Ok->Some
-    | Error(e) => Reducer_ErrorValue.RETodo(e)->Error->Some
-    }
-  | ("dateFromNumber", [EvNumber(f)]) => EV.EvDate(DateTime.Date.fromFloat(f))->Ok->Some
-  | ("toNumber", [EvDate(f)]) => EV.EvNumber(DateTime.Date.toFloat(f))->Ok->Some
-  | ("subtract", [EvDate(d1), EvDate(d2)]) =>
-    switch DateTime.Date.subtract(d1, d2) {
-    | Ok(d) => EV.EvTimeDuration(d)->Ok
-    | Error(e) => Error(RETodo(e))
-    }->Some
-  | ("subtract", [EvDate(d1), EvTimeDuration(d2)]) =>
-    EV.EvDate(DateTime.Date.subtractDuration(d1, d2))->Ok->Some
-  | ("add", [EvDate(d1), EvTimeDuration(d2)]) =>
-    EV.EvDate(DateTime.Date.addDuration(d1, d2))->Ok->Some
-  | _ => None
-  }
-}
-
-let durationDispatch = (call: EV.functionCall, _: DistributionOperation.env): option<
+let dispatch = (call: EV.functionCall, _: DistributionOperation.env): option<
  result<expressionValue, QuriSquiggleLang.Reducer_ErrorValue.errorValue>,
 > => {
  switch call {
@ -54,17 +29,4 @@ let durationDispatch = (call: EV.functionCall, _: DistributionOperation.env): op
    EV.EvTimeDuration(DateTime.Duration.divide(d1, d2))->Ok->Some
  | _ => None
  }
-}
-
-let dispatch = (call: EV.functionCall, env: DistributionOperation.env): option<
-  result<expressionValue, QuriSquiggleLang.Reducer_ErrorValue.errorValue>,
-> => {
-  switch dateDispatch(call, env) {
-  | Some(r) => Some(r)
-  | None =>
-    switch durationDispatch(call, env) {
-    | Some(r) => Some(r)
-    | None => None
-    }
-  }
-}
+}
--- a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_ExternalLibrary.res
+++ b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_ExternalLibrary.res
@ -14,15 +14,27 @@ type expressionValue = ExpressionValue.expressionValue
  Map external calls of Reducer
 */

+// I expect that it's important to build this first, so it doesn't get recalculated for each tryRegistry() call.
+let registry = FunctionRegistry_Library.registry
+
+let tryRegistry = ((fnName, args): ExpressionValue.functionCall, env) => {
+  FunctionRegistry_Core.Registry.matchAndRun(~registry, ~fnName, ~args, ~env)->E.O2.fmap(
+    E.R2.errMap(_, s => Reducer_ErrorValue.RETodo(s)),
+  )
+}
+
 let dispatch = (call: ExpressionValue.functionCall, environment, chain): result<
  expressionValue,
  'e,
-> =>
-  switch ReducerInterface_GenericDistribution.dispatch(call, environment) {
-  | Some(r) => r
-  | None =>
-    ReducerInterface_DateTime.dispatch(call, environment) |> E.O.default(chain(call, environment))
-  }
+> => {
+  E.A.O.firstSomeFn([
+    () => ReducerInterface_GenericDistribution.dispatch(call, environment),
+    () => ReducerInterface_Date.dispatch(call, environment),
+    () => ReducerInterface_Duration.dispatch(call, environment),
+    () => ReducerInterface_Number.dispatch(call, environment),
+    () => tryRegistry(call, environment),
+  ])->E.O2.default(chain(call, environment))
+}
 /*
 If your dispatch is too big you can divide it into smaller dispatches and pass the call so that it gets called finally.

--- a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_GenericDistribution.res
+++ b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_GenericDistribution.res
@ -209,7 +209,18 @@ let dispatchToGenericOutput = (
  | ("sample", [EvDistribution(dist)]) => Helpers.toFloatFn(#Sample, dist, ~env)
  | ("sampleN", [EvDistribution(dist), EvNumber(n)]) =>
    Some(FloatArray(GenericDist.sampleN(dist, Belt.Int.fromFloat(n))))
-  | ("mean", [EvDistribution(dist)]) => Helpers.toFloatFn(#Mean, dist, ~env)
+  | (("mean" | "stdev" | "variance" | "min" | "max" | "mode") as op, [EvDistribution(dist)]) => {
+      let fn = switch op {
+      | "mean" => #Mean
+      | "stdev" => #Stdev
+      | "variance" => #Variance
+      | "min" => #Min
+      | "max" => #Max
+      | "mode" => #Mode
+      | _ => #Mean
+      }
+      Helpers.toFloatFn(fn, dist, ~env)
+    }
  | ("integralSum", [EvDistribution(dist)]) => Helpers.toFloatFn(#IntegralSum, dist, ~env)
  | ("toString", [EvDistribution(dist)]) => Helpers.toStringFn(ToString, dist, ~env)
  | ("toSparkline", [EvDistribution(dist)]) =>
@ -350,20 +361,5 @@ let genericOutputToReducerValue = (o: DistributionOperation.outputType): result<
  | GenDistError(err) => Error(REDistributionError(err))
  }

-// I expect that it's important to build this first, so it doesn't get recalculated for each tryRegistry() call.
-let registry = FunctionRegistry_Library.registry
-
-let tryRegistry = ((fnName, args): ExpressionValue.functionCall, env) => {
-  FunctionRegistry_Core.Registry.matchAndRun(~registry, ~fnName, ~args, ~env)->E.O2.fmap(
-    E.R2.errMap(_, s => Reducer_ErrorValue.RETodo(s)),
-  )
-}
-
-let dispatch = (call: ExpressionValue.functionCall, environment) => {
-  let regularDispatch =
-    dispatchToGenericOutput(call, environment)->E.O2.fmap(genericOutputToReducerValue)
-  switch regularDispatch {
-  | Some(x) => Some(x)
-  | None => tryRegistry(call, environment)
-  }
-}
+let dispatch = (call: ExpressionValue.functionCall, environment) =>
+  dispatchToGenericOutput(call, environment)->E.O2.fmap(genericOutputToReducerValue)
--- a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_Number.res
+++ b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_Number.res
@ -0,0 +1,45 @@
+module EV = ReducerInterface_ExpressionValue
+type expressionValue = EV.expressionValue
+
+module ScientificUnit = {
+  let nameToMultiplier = str =>
+    switch str {
+    | "n" => Some(1E-9)
+    | "m" => Some(1E-3)
+    | "k" => Some(1E3)
+    | "M" => Some(1E6)
+    | "B" => Some(1E9)
+    | "G" => Some(1E9)
+    | "T" => Some(1E12)
+    | "P" => Some(1E15)
+    | _ => None
+    }
+
+  let getMultiplier = (r: string) => {
+    let match = Js.String2.match_(r, %re(`/fromUnit_([_a-zA-Z]*)/`))
+    switch match {
+    | Some([_, unit]) => nameToMultiplier(unit)
+    | _ => None
+    }
+  }
+}
+
+let dispatch = (call: EV.functionCall, _: DistributionOperation.env): option<
+  result<expressionValue, QuriSquiggleLang.Reducer_ErrorValue.errorValue>,
+> => {
+  switch call {
+  | (
+      ("fromUnit_n"
+      | "fromUnit_m"
+      | "fromUnit_k"
+      | "fromUnit_M"
+      | "fromUnit_B"
+      | "fromUnit_G"
+      | "fromUnit_T"
+      | "fromUnit_P") as op,
+      [EvNumber(f)],
+    ) =>
+    op->ScientificUnit.getMultiplier->E.O2.fmap(multiplier => EV.EvNumber(f *. multiplier)->Ok)
+  | _ => None
+  }
+}
--- a/packages/squiggle-lang/src/rescript/Utility/Operation.res
+++ b/packages/squiggle-lang/src/rescript/Utility/Operation.res
@ -26,6 +26,8 @@ type distToFloatOperation = [
  | #Inv(float)
  | #Mean
  | #Sample
+  | #Min
+  | #Max
 ]

 module Convolution = {
--- a/packages/website/docusaurus.config.js
+++ b/packages/website/docusaurus.config.js
@ -19,27 +19,7 @@ const config = {
  organizationName: "quantified-uncertainty", // Usually your GitHub org/user name.
  projectName: "squiggle", // Usually your repo name.

-  plugins: [
-    "docusaurus-tailwindcss",
-    () => ({
-      configureWebpack(config, isServer, utils, content) {
-        return {
-          resolve: {
-            alias: {
-              "@quri/squiggle-components": path.resolve(
-                __dirname,
-                "../components/src"
-              ),
-              "@quri/squiggle-lang": path.resolve(
-                __dirname,
-                "../squiggle-lang/src/js"
-              ),
-            },
-          },
-        };
-      },
-    }),
-  ],
+  plugins: [],

  presets: [
    [
@ -61,7 +41,10 @@ const config = {
            "https://github.com/quantified-uncertainty/squiggle/tree/develop/packages/website/",
        },
        theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: [
+            require.resolve("./src/css/custom.css"),
+            require.resolve("@quri/squiggle-components/dist/main.css"),
+          ],
        },
      }),
    ],
--- a/packages/website/netlify.toml
+++ b/packages/website/netlify.toml
@ -1,6 +1,6 @@
 [build]
    base = "packages/website/"
-    command = "cd ../squiggle-lang && yarn build && cd ../website && yarn build"
+    command = "cd ../squiggle-lang && yarn build && cd ../components && yarn build && cd ../website && yarn build"
    publish = "build/"
    ignore = "node -e 'process.exitCode = process.env.BRANCH.includes(\"dependabot\") ? 0 : 1' && git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ../"

--- a/packages/website/src/css/custom.css
+++ b/packages/website/src/css/custom.css
@ -4,10 +4,6 @@
 * work well for content-centric websites.
 */

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 /* You can override the default Infima variables here. */
 :root {
  --ifm-color-primary: #2488df;
--- a/packages/website/tailwind.config.js
+++ b/packages/website/tailwind.config.js
@ -0,0 +1,7 @@
+module.exports = {
+  content: ["./src/**/*.{html,tsx,ts,js,jsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/forms")],
+};
--- a/packages/website/webpack.config.js
+++ b/packages/website/webpack.config.js
@ -0,0 +1 @@
+module.exports = {};
--- a/yarn.lock
+++ b/yarn.lock
				`@ -1 +0,0 @@`
				`{"version":3,"file":"SquiggleChart.stories.js","sourceRoot":"","sources":["SquiggleChart.stories.tsx"],"names":[],"mappings":";;;AAAA,6BAA8B;AAC9B,iDAA+C;AAG/C,qBAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,6BAAa;CACzB,CAAA;AAED,IAAM,QAAQ,GAAG,UAAC,EAAgB;QAAf,cAAc,oBAAA;IAAM,OAAA,oBAAC,6BAAa,IAAC,cAAc,EAAE,cAAc,GAAI;AAAjD,CAAiD,CAAA;AAE3E,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,eAAO,CAAC,IAAI,GAAG;IACb,cAAc,EAAE,cAAc;CAC/B,CAAC"}`