From 4d0a522e9610bb2fa626c0ad713592983b72594d Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Wed, 6 Apr 2022 17:51:24 -0400
Subject: [PATCH 1/6] Moved NumberShower to its own Storybook, and slight
 cleanup to other code.

---
 packages/components/src/NumberShower.tsx      |  98 ++++++
 packages/components/src/SquiggleChart.tsx     |  93 +-----
 .../components/src/spec-distributions.json    | 138 +++++++--
 packages/components/src/spec-percentiles.json | 283 ++++++++++++++----
 .../src/stories/Introduction.stories.mdx      |   7 +-
 .../src/stories/NumberShower.stories.mdx      |  60 ++++
 .../src/stories/SquiggleChart.stories.mdx     |  19 +-
 7 files changed, 504 insertions(+), 194 deletions(-)
 create mode 100644 packages/components/src/NumberShower.tsx
 create mode 100644 packages/components/src/stories/NumberShower.stories.mdx

diff --git a/packages/components/src/NumberShower.tsx b/packages/components/src/NumberShower.tsx
new file mode 100644
index 00000000..ca9dc943
--- /dev/null
+++ b/packages/components/src/NumberShower.tsx
@@ -0,0 +1,98 @@
+import * as React from "react";
+import _ from "lodash";
+
+const orderOfMagnitudeNum = (n: number) => {
+    return Math.pow(10, n);
+};
+
+// 105 -> 3
+const orderOfMagnitude = (n: number) => {
+    return Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
+};
+
+function withXSigFigs(number: number, sigFigs: number) {
+    const withPrecision = number.toPrecision(sigFigs);
+    const formatted = Number(withPrecision);
+    return `${formatted}`;
+}
+
+class NumberShowerBuilder {
+    number: number;
+    precision: number;
+
+    constructor(number: number, precision = 2) {
+        this.number = number;
+        this.precision = precision;
+    }
+
+    convert() {
+        const number = Math.abs(this.number);
+        const response = this.evaluate(number);
+        if (this.number < 0) {
+            response.value = "-" + response.value;
+        }
+        return response;
+    }
+
+    metricSystem(number: number, order: number) {
+        const newNumber = number / orderOfMagnitudeNum(order);
+        const precision = this.precision;
+        return `${withXSigFigs(newNumber, precision)}`;
+    }
+
+    evaluate(number: number) {
+        if (number === 0) {
+            return { value: this.metricSystem(0, 0) };
+        }
+
+        const order = orderOfMagnitude(number);
+        if (order < -2) {
+            return { value: this.metricSystem(number, order), power: order };
+        } else if (order < 4) {
+            return { value: this.metricSystem(number, 0) };
+        } else if (order < 6) {
+            return { value: this.metricSystem(number, 3), symbol: "K" };
+        } else if (order < 9) {
+            return { value: this.metricSystem(number, 6), symbol: "M" };
+        } else if (order < 12) {
+            return { value: this.metricSystem(number, 9), symbol: "B" };
+        } else if (order < 15) {
+            return { value: this.metricSystem(number, 12), symbol: "T" };
+        } else {
+            return { value: this.metricSystem(number, order), power: order };
+        }
+    }
+}
+
+export function numberShow(number: number, precision = 2) {
+    const ns = new NumberShowerBuilder(number, precision);
+    return ns.convert();
+}
+
+export interface NumberShowerProps {
+    number: number;
+    precision?: number
+}
+
+export let NumberShower: React.FC<NumberShowerProps> = ({
+    number,
+    precision = 2
+}: NumberShowerProps) => {
+    let numberWithPresentation = numberShow(number, precision);
+    return (
+        <span>
+            {numberWithPresentation.value}
+            {numberWithPresentation.symbol}
+            {numberWithPresentation.power ? (
+                <span>
+                    {"\u00b710"}
+                    <span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
+                        {numberWithPresentation.power}
+                    </span>
+                </span>
+            ) : (
+                <></>
+            )}
+        </span>
+    );
+}
diff --git a/packages/components/src/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx
index 2e4234d9..bb9294af 100644
--- a/packages/components/src/SquiggleChart.tsx
+++ b/packages/components/src/SquiggleChart.tsx
@@ -11,6 +11,7 @@ import type {
 import { createClassFromSpec } from "react-vega";
 import * as chartSpecification from "./spec-distributions.json";
 import * as percentilesSpec from "./spec-percentiles.json";
+import { NumberShower }  from "./NumberShower";
 
 let SquiggleVegaChart = createClassFromSpec({
   spec: chartSpecification as Spec,
@@ -71,7 +72,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     onEnvChange(environment);
     let chartResults = exports.map((chartResult: exportDistribution) => {
       if (chartResult["NAME"] === "Float") {
-        return <MakeNumberShower precision={3} number={chartResult["VAL"]} />;
+        return <NumberShower precision={3} number={chartResult["VAL"]} />;
       } else if (chartResult["NAME"] === "DistPlus") {
         let shape = chartResult.VAL.pointSetDist;
         if (shape.tag === "Continuous") {
@@ -316,92 +317,4 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
     });
     return bounds;
   }
-}
-
-function MakeNumberShower(props: { number: number; precision: number }) {
-  let numberWithPresentation = numberShow(props.number, props.precision);
-  return (
-    <span>
-      {numberWithPresentation.value}
-      {numberWithPresentation.symbol}
-      {numberWithPresentation.power ? (
-        <span>
-          {"\u00b710"}
-          <span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
-            {numberWithPresentation.power}
-          </span>
-        </span>
-      ) : (
-        <></>
-      )}
-    </span>
-  );
-}
-
-const orderOfMagnitudeNum = (n: number) => {
-  return Math.pow(10, n);
-};
-
-// 105 -> 3
-const orderOfMagnitude = (n: number) => {
-  return Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
-};
-
-function withXSigFigs(number: number, sigFigs: number) {
-  const withPrecision = number.toPrecision(sigFigs);
-  const formatted = Number(withPrecision);
-  return `${formatted}`;
-}
-
-class NumberShower {
-  number: number;
-  precision: number;
-
-  constructor(number: number, precision = 2) {
-    this.number = number;
-    this.precision = precision;
-  }
-
-  convert() {
-    const number = Math.abs(this.number);
-    const response = this.evaluate(number);
-    if (this.number < 0) {
-      response.value = "-" + response.value;
-    }
-    return response;
-  }
-
-  metricSystem(number: number, order: number) {
-    const newNumber = number / orderOfMagnitudeNum(order);
-    const precision = this.precision;
-    return `${withXSigFigs(newNumber, precision)}`;
-  }
-
-  evaluate(number: number) {
-    if (number === 0) {
-      return { value: this.metricSystem(0, 0) };
-    }
-
-    const order = orderOfMagnitude(number);
-    if (order < -2) {
-      return { value: this.metricSystem(number, order), power: order };
-    } else if (order < 4) {
-      return { value: this.metricSystem(number, 0) };
-    } else if (order < 6) {
-      return { value: this.metricSystem(number, 3), symbol: "K" };
-    } else if (order < 9) {
-      return { value: this.metricSystem(number, 6), symbol: "M" };
-    } else if (order < 12) {
-      return { value: this.metricSystem(number, 9), symbol: "B" };
-    } else if (order < 15) {
-      return { value: this.metricSystem(number, 12), symbol: "T" };
-    } else {
-      return { value: this.metricSystem(number, order), power: order };
-    }
-  }
-}
-
-export function numberShow(number: number, precision = 2) {
-  const ns = new NumberShower(number, precision);
-  return ns.convert();
-}
+}
\ No newline at end of file
diff --git a/packages/components/src/spec-distributions.json b/packages/components/src/spec-distributions.json
index 8a5bbff9..0c488441 100644
--- a/packages/components/src/spec-distributions.json
+++ b/packages/components/src/spec-distributions.json
@@ -4,14 +4,25 @@
   "width": 500,
   "height": 200,
   "padding": 5,
-  "data": [{ "name": "con" }, { "name": "dis" }],
-
+  "data": [
+    {
+      "name": "con"
+    },
+    {
+      "name": "dis"
+    }
+  ],
   "signals": [
     {
       "name": "mousex",
       "description": "x position of mouse",
       "update": "0",
-      "on": [{ "events": "mousemove", "update": "1-x()/width" }]
+      "on": [
+        {
+          "events": "mousemove",
+          "update": "1-x()/width"
+        }
+      ]
     },
     {
       "name": "xscale",
@@ -32,89 +43,152 @@
       }
     }
   ],
-
   "scales": [
     {
       "name": "xscale",
       "type": "pow",
-      "exponent": { "signal": "xscale ? 0.1 : 1" },
+      "exponent": {
+        "signal": "xscale ? 0.1 : 1"
+      },
       "range": "width",
       "zero": false,
       "nice": false,
       "domain": {
         "fields": [
-          { "data": "con", "field": "x" },
-          { "data": "dis", "field": "x" }
+          {
+            "data": "con",
+            "field": "x"
+          },
+          {
+            "data": "dis",
+            "field": "x"
+          }
         ]
       }
     },
     {
       "name": "yscale",
       "type": "pow",
-      "exponent": { "signal": "yscale ? 0.1 : 1" },
+      "exponent": {
+        "signal": "yscale ? 0.1 : 1"
+      },
       "range": "height",
       "nice": true,
       "zero": true,
       "domain": {
         "fields": [
-          { "data": "con", "field": "y" },
-          { "data": "dis", "field": "y" }
+          {
+            "data": "con",
+            "field": "y"
+          },
+          {
+            "data": "dis",
+            "field": "y"
+          }
         ]
       }
     }
   ],
-
-  "axes": [{ "orient": "bottom", "scale": "xscale", "tickCount": 20 }],
-
+  "axes": [
+    {
+      "orient": "bottom",
+      "scale": "xscale",
+      "tickCount": 20
+    }
+  ],
   "marks": [
     {
       "type": "area",
-      "from": { "data": "con" },
+      "from": {
+        "data": "con"
+      },
       "encode": {
         "enter": {
-          "tooltip": { "signal": "datum.cdf" }
+          "tooltip": {
+            "signal": "datum.cdf"
+          }
         },
         "update": {
-          "x": { "scale": "xscale", "field": "x" },
-          "y": { "scale": "yscale", "field": "y" },
-          "y2": { "scale": "yscale", "value": 0 },
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "y"
+          },
+          "y2": {
+            "scale": "yscale",
+            "value": 0
+          },
           "fill": {
             "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#1b6fac'}, {offset: 1.0, color: '#1b6fac'} ] }",
             "color": "#000"
           },
-          "interpolate": { "value": "monotone" },
-          "fillOpacity": { "value": 1 }
+          "interpolate": {
+            "value": "monotone"
+          },
+          "fillOpacity": {
+            "value": 1
+          }
         }
       }
     },
     {
       "type": "rect",
-      "from": { "data": "dis" },
+      "from": {
+        "data": "dis"
+      },
       "encode": {
         "enter": {
-          "y2": { "scale": "yscale", "value": 0 },
-          "width": { "value": 1 }
+          "y2": {
+            "scale": "yscale",
+            "value": 0
+          },
+          "width": {
+            "value": 1
+          }
         },
         "update": {
-          "x": { "scale": "xscale", "field": "x" },
-          "y": { "scale": "yscale", "field": "y" }
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "y"
+          }
         }
       }
     },
     {
       "type": "symbol",
-      "from": { "data": "dis" },
+      "from": {
+        "data": "dis"
+      },
       "encode": {
         "enter": {
-          "shape": { "value": "circle" },
-          "width": { "value": 5 },
-          "tooltip": { "signal": "datum.y" }
+          "shape": {
+            "value": "circle"
+          },
+          "width": {
+            "value": 5
+          },
+          "tooltip": {
+            "signal": "datum.y"
+          }
         },
         "update": {
-          "x": { "scale": "xscale", "field": "x" },
-          "y": { "scale": "yscale", "field": "y" }
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "y"
+          }
         }
       }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/packages/components/src/spec-percentiles.json b/packages/components/src/spec-percentiles.json
index c3b0a21f..6afa5c0b 100644
--- a/packages/components/src/spec-percentiles.json
+++ b/packages/components/src/spec-percentiles.json
@@ -7,7 +7,12 @@
     {
       "name": "facet",
       "values": [],
-      "format": { "type": "json", "parse": { "timestamp": "date" } }
+      "format": {
+        "type": "json",
+        "parse": {
+          "timestamp": "date"
+        }
+      }
     },
     {
       "name": "table",
@@ -15,7 +20,9 @@
       "transform": [
         {
           "type": "aggregate",
-          "groupby": ["x"],
+          "groupby": [
+            "x"
+          ],
           "ops": [
             "mean",
             "mean",
@@ -70,7 +77,10 @@
       "name": "xscale",
       "type": "linear",
       "nice": true,
-      "domain": { "data": "facet", "field": "x" },
+      "domain": {
+        "data": "facet",
+        "field": "x"
+      },
       "range": "width"
     },
     {
@@ -79,7 +89,10 @@
       "range": "height",
       "nice": true,
       "zero": true,
-      "domain": { "data": "facet", "field": "p99" }
+      "domain": {
+        "data": "facet",
+        "field": "p99"
+      }
     }
   ],
   "axes": [
@@ -89,8 +102,20 @@
       "grid": false,
       "tickSize": 2,
       "encode": {
-        "grid": { "enter": { "stroke": { "value": "#ccc" } } },
-        "ticks": { "enter": { "stroke": { "value": "#ccc" } } }
+        "grid": {
+          "enter": {
+            "stroke": {
+              "value": "#ccc"
+            }
+          }
+        },
+        "ticks": {
+          "enter": {
+            "stroke": {
+              "value": "#ccc"
+            }
+          }
+        }
       }
     },
     {
@@ -100,109 +125,251 @@
       "domain": false,
       "tickSize": 2,
       "encode": {
-        "grid": { "enter": { "stroke": { "value": "#ccc" } } },
-        "ticks": { "enter": { "stroke": { "value": "#ccc" } } }
+        "grid": {
+          "enter": {
+            "stroke": {
+              "value": "#ccc"
+            }
+          }
+        },
+        "ticks": {
+          "enter": {
+            "stroke": {
+              "value": "#ccc"
+            }
+          }
+        }
       }
     }
   ],
   "marks": [
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
-          "x": { "scale": "xscale", "field": "x" },
-          "y": { "scale": "yscale", "field": "p1" },
-          "y2": { "scale": "yscale", "field": "p99" },
-          "opacity": { "value": 0.05 }
+          "interpolate": {
+            "value": "monotone"
+          },
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p1"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p99"
+          },
+          "opacity": {
+            "value": 0.05
+          }
         }
       }
     },
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
-          "x": { "scale": "xscale", "field": "x" },
-          "y": { "scale": "yscale", "field": "p5" },
-          "y2": { "scale": "yscale", "field": "p95" },
-          "opacity": { "value": 0.1 }
+          "interpolate": {
+            "value": "monotone"
+          },
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p5"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p95"
+          },
+          "opacity": {
+            "value": 0.1
+          }
         }
       }
     },
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
-          "x": { "scale": "xscale", "field": "x" },
-          "y": { "scale": "yscale", "field": "p10" },
-          "y2": { "scale": "yscale", "field": "p90" },
-          "opacity": { "value": 0.15 }
+          "interpolate": {
+            "value": "monotone"
+          },
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p10"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p90"
+          },
+          "opacity": {
+            "value": 0.15
+          }
         }
       }
     },
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
-          "x": { "scale": "xscale", "field": "x" },
-          "y": { "scale": "yscale", "field": "p20" },
-          "y2": { "scale": "yscale", "field": "p80" },
-          "opacity": { "value": 0.2 }
+          "interpolate": {
+            "value": "monotone"
+          },
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p20"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p80"
+          },
+          "opacity": {
+            "value": 0.2
+          }
         }
       }
     },
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
-          "x": { "scale": "xscale", "field": "x" },
-          "y": { "scale": "yscale", "field": "p30" },
-          "y2": { "scale": "yscale", "field": "p70" },
-          "opacity": { "value": 0.2 }
+          "interpolate": {
+            "value": "monotone"
+          },
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p30"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p70"
+          },
+          "opacity": {
+            "value": 0.2
+          }
         }
       }
     },
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
-          "x": { "scale": "xscale", "field": "x" },
-          "y": { "scale": "yscale", "field": "p40" },
-          "y2": { "scale": "yscale", "field": "p60" },
-          "opacity": { "value": 0.2 }
+          "interpolate": {
+            "value": "monotone"
+          },
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p40"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p60"
+          },
+          "opacity": {
+            "value": 0.2
+          }
         }
       }
     },
     {
       "type": "line",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
         "update": {
-          "interpolate": { "value": "monotone" },
-          "stroke": { "value": "#4C78A8" },
-          "strokeWidth": { "value": 2 },
-          "opacity": { "value": 0.8 },
-          "x": { "scale": "xscale", "field": "x" },
-          "y": { "scale": "yscale", "field": "p50" }
+          "interpolate": {
+            "value": "monotone"
+          },
+          "stroke": {
+            "value": "#4C78A8"
+          },
+          "strokeWidth": {
+            "value": 2
+          },
+          "opacity": {
+            "value": 0.8
+          },
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p50"
+          }
         }
       }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/packages/components/src/stories/Introduction.stories.mdx b/packages/components/src/stories/Introduction.stories.mdx
index db08d6f5..525c12bb 100644
--- a/packages/components/src/stories/Introduction.stories.mdx
+++ b/packages/components/src/stories/Introduction.stories.mdx
@@ -2,8 +2,5 @@ import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Squiggle/Introduction" />
 
-This is the component library for Squiggle. All of these components are react
-components, and can be used in any application that you see fit.
-
-Currently, the only component that is provided is the SquiggleChart component.
-This component allows you to render the result of a squiggle expression.
+This is the component library for Squiggle. These are React
+components, and can be used in any application that you see fit.
\ No newline at end of file
diff --git a/packages/components/src/stories/NumberShower.stories.mdx b/packages/components/src/stories/NumberShower.stories.mdx
new file mode 100644
index 00000000..5f040be5
--- /dev/null
+++ b/packages/components/src/stories/NumberShower.stories.mdx
@@ -0,0 +1,60 @@
+import { NumberShower } from "../NumberShower";
+import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
+
+<Meta title="Squiggle/NumberShower" component={NumberShower} />
+
+# Number Shower
+
+The number shower is a simple component to display a number.
+
+It uses the symbols "K", "M", "B", and "T", to represent thousands, millions, billions, and trillions. Outside of that range, it uses scientific notation.
+
+<Canvas>
+  <Story
+    name="Ten Thousand"
+    args={{
+      number: 10000,
+      precision: 2
+    }}
+  >
+    {args => <NumberShower {...args}/>}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Ten Billion"
+    args={{
+      number: 10000000000,
+      precision: 2
+    }}
+  >
+    {args => <NumberShower {...args}/>}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="1.2*10^15"
+    args={{
+      number: 1200000000000000,
+      precision: 2
+    }}
+  >
+    {args => <NumberShower {...args}/>}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="1.35*10^-13"
+    args={{
+      number: 0.000000000000135,
+      precision: 2
+    }}
+  >
+    {args => <NumberShower {...args}/>}
+  </Story>
+</Canvas>
+
+<Props of={NumberShower} />
diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx
index ad76b880..4c193b84 100644
--- a/packages/components/src/stories/SquiggleChart.stories.mdx
+++ b/packages/components/src/stories/SquiggleChart.stories.mdx
@@ -18,7 +18,7 @@ could be continuous, discrete or mixed.
 
 ## Distributions
 
-An example of a normal distribution is:
+### Continuous Distributions
 
 <Canvas>
   <Story
@@ -31,26 +31,26 @@ An example of a normal distribution is:
   </Story>
 </Canvas>
 
-An example of a Discrete distribution is:
+### Discrete Distributions
 
 <Canvas>
   <Story
     name="Discrete"
     args={{
-      squiggleString: "mm(0, 1, [0.5, 0.5])",
+      squiggleString: "mm(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
     }}
   >
     {Template.bind({})}
   </Story>
 </Canvas>
 
-An example of a Mixed distribution is:
+## Mixed distributions
 
 <Canvas>
   <Story
     name="Mixed"
     args={{
-      squiggleString: "mm(0, 5 to 10, [0.5, 0.5])",
+      squiggleString: "mm(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
     }}
   >
     {Template.bind({})}
@@ -66,7 +66,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Constant"
     args={{
-      squiggleString: "500000 * 5000000",
+      squiggleString: "500000000",
     }}
   >
     {Template.bind({})}
@@ -75,14 +75,15 @@ to allow large and small numbers being printed cleanly.
 
 ## Functions
 
-Finally, a function can be returned, and this shows how the distribution changes
-over the axis between x = 0 and 10.
+Full functions can be returned. These plot out the results of distributions between a set of x-coordinates.  
+
+The default is show 10 points between 0 and 10.
 
 <Canvas>
   <Story
     name="Function"
     args={{
-      squiggleString: "f(x) = normal(x,x)\nf",
+      squiggleString: "f(x) = normal(x^2,x^1.8)\nf",
     }}
   >
     {Template.bind({})}

From d5c183e7ee89a6fb7a068d9980ecc53bb871f16c Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Wed, 6 Apr 2022 20:46:22 -0400
Subject: [PATCH 2/6] SquiggleChart accepts a height, and doesn't have a hover,
 because it was broken for mixed distributions

---
 packages/components/src/SquiggleChart.tsx     |  3 ++
 .../components/src/SquigglePlayground.tsx     |  1 +
 .../components/src/spec-distributions.json    | 29 ++++++-------------
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/packages/components/src/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx
index bb9294af..db5a6a5a 100644
--- a/packages/components/src/SquiggleChart.tsx
+++ b/packages/components/src/SquiggleChart.tsx
@@ -43,6 +43,7 @@ export interface SquiggleChartProps {
   onEnvChange?(env: exportEnv): void;
   /** CSS width of the element */
   width?: number;
+  height?: number;
 }
 
 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
@@ -57,6 +58,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   environment = [],
   onEnvChange = () => {},
   width = 500,
+  height = 60,
 }: SquiggleChartProps) => {
   let samplingInputs: SamplingInputs = {
     sampleCount: sampleCount,
@@ -92,6 +94,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
           return (
             <SquiggleVegaChart
               width={width}
+              height={height}
               data={{ con: values }}
               actions={false}
             />
diff --git a/packages/components/src/SquigglePlayground.tsx b/packages/components/src/SquigglePlayground.tsx
index 3375cf96..6712c340 100644
--- a/packages/components/src/SquigglePlayground.tsx
+++ b/packages/components/src/SquigglePlayground.tsx
@@ -55,6 +55,7 @@ let SquigglePlayground: FC<Props> = (props) => {
       diagramStop={diagramStop}
       diagramCount={diagramCount}
       pointDistLength={pointDistLength}
+      height={150}
     />
   );
   return (
diff --git a/packages/components/src/spec-distributions.json b/packages/components/src/spec-distributions.json
index 0c488441..64231c21 100644
--- a/packages/components/src/spec-distributions.json
+++ b/packages/components/src/spec-distributions.json
@@ -1,8 +1,8 @@
 {
   "$schema": "https://vega.github.io/schema/vega/v5.json",
-  "description": "A basic area chart example.",
+  "description": "A basic area chart example",
   "width": 500,
-  "height": 200,
+  "height": 100,
   "padding": 5,
   "data": [
     {
@@ -13,17 +13,6 @@
     }
   ],
   "signals": [
-    {
-      "name": "mousex",
-      "description": "x position of mouse",
-      "update": "0",
-      "on": [
-        {
-          "events": "mousemove",
-          "update": "1-x()/width"
-        }
-      ]
-    },
     {
       "name": "xscale",
       "description": "The transform of the x scale",
@@ -93,6 +82,9 @@
     {
       "orient": "bottom",
       "scale": "xscale",
+      "labelColor": "#666",
+      "tickColor": "#ddd",
+      "format": "~s",
       "tickCount": 20
     }
   ],
@@ -103,11 +95,6 @@
         "data": "con"
       },
       "encode": {
-        "enter": {
-          "tooltip": {
-            "signal": "datum.cdf"
-          }
-        },
         "update": {
           "x": {
             "scale": "xscale",
@@ -122,8 +109,7 @@
             "value": 0
           },
           "fill": {
-            "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#1b6fac'}, {offset: 1.0, color: '#1b6fac'} ] }",
-            "color": "#000"
+            "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#4C78A8'}] }"
           },
           "interpolate": {
             "value": "monotone"
@@ -186,6 +172,9 @@
           "y": {
             "scale": "yscale",
             "field": "y"
+          },
+          "fill": {
+            "value": "#1e4577"
           }
         }
       }

From 7d086a9cdee37c45eb45d893e6be10bf47cfbd80 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Wed, 6 Apr 2022 21:37:08 -0400
Subject: [PATCH 3/6] Added simple error component to SquiggleChart, when
 return is error

---
 packages/components/package.json              |   1 +
 packages/components/src/CodeEditor.tsx        |   3 +-
 packages/components/src/SquiggleChart.tsx     |  22 +++-
 packages/components/src/SquiggleEditor.tsx    |  20 ++-
 .../src/stories/SquiggleChart.stories.mdx     |  13 ++
 yarn.lock                                     | 114 ++++++++++++++++--
 6 files changed, 153 insertions(+), 20 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 42468257..1e942cac 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -18,6 +18,7 @@
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",
     "react-vega": "^7.4.4",
+    "styled-components": "^5.3.5",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.6.3",
     "vega": "^5.21.0",
diff --git a/packages/components/src/CodeEditor.tsx b/packages/components/src/CodeEditor.tsx
index 3cee774e..71b66a5c 100644
--- a/packages/components/src/CodeEditor.tsx
+++ b/packages/components/src/CodeEditor.tsx
@@ -16,7 +16,6 @@ export let CodeEditor: FC<CodeEditorProps> = ({
   value,
   onChange,
   oneLine = false,
-  width = 500,
 }: CodeEditorProps) => {
   let lineCount = value.split("\n").length;
   let id = _.uniqueId();
@@ -25,7 +24,7 @@ export let CodeEditor: FC<CodeEditorProps> = ({
       value={value}
       mode="golang"
       theme="github"
-      width={width + "px"}
+      width={"100%"}
       minLines={oneLine ? lineCount : 15}
       maxLines={oneLine ? lineCount : 15}
       showGutter={false}
diff --git a/packages/components/src/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx
index db5a6a5a..f3d6f982 100644
--- a/packages/components/src/SquiggleChart.tsx
+++ b/packages/components/src/SquiggleChart.tsx
@@ -11,7 +11,8 @@ import type {
 import { createClassFromSpec } from "react-vega";
 import * as chartSpecification from "./spec-distributions.json";
 import * as percentilesSpec from "./spec-percentiles.json";
-import { NumberShower }  from "./NumberShower";
+import { NumberShower } from "./NumberShower";
+import styled from 'styled-components'
 
 let SquiggleVegaChart = createClassFromSpec({
   spec: chartSpecification as Spec,
@@ -46,6 +47,21 @@ export interface SquiggleChartProps {
   height?: number;
 }
 
+const Error = styled.div`
+  border: 1px solid #792e2e;
+  background: #eee2e2;
+  padding: 0.4em 0.8em;
+`;
+
+const ShowError: React.FC<{ heading:string, errorMessage: string }> = ({ heading="Error", errorMessage }) => {
+  return (
+    <Error>
+      <h3>{heading}</h3>
+      <>{errorMessage}</>
+    </Error>
+  );
+}
+
 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   squiggleString = "",
   sampleCount = 1000,
@@ -56,7 +72,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   diagramStop = 10,
   diagramCount = 20,
   environment = [],
-  onEnvChange = () => {},
+  onEnvChange = () => { },
   width = 500,
   height = 60,
 }: SquiggleChartProps) => {
@@ -231,7 +247,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     return <>{chartResults}</>;
   } else if (result.tag === "Error") {
     // At this point, we came across an error. What was our error?
-    return <p>{"Error parsing Squiggle: " + result.value}</p>;
+    return <ShowError heading={"Parse Error"} errorMessage={result.value} />
   }
   return <p>{"Invalid Response"}</p>;
 };
diff --git a/packages/components/src/SquiggleEditor.tsx b/packages/components/src/SquiggleEditor.tsx
index 37b471da..964c277d 100644
--- a/packages/components/src/SquiggleEditor.tsx
+++ b/packages/components/src/SquiggleEditor.tsx
@@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom";
 import { SquiggleChart } from "./SquiggleChart";
 import { CodeEditor } from "./CodeEditor";
 import type { exportEnv } from "@quri/squiggle-lang";
+import styled from 'styled-components'
 
 export interface SquiggleEditorProps {
   /** The input string for squiggle */
@@ -27,6 +28,12 @@ export interface SquiggleEditorProps {
   width: number;
 }
 
+const Input = styled.div`
+  border: 1px solid #ddd;
+  padding: 0.1em 0.1em;
+  margin-bottom: 1em;
+`;
+
 export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
   initialSquiggleString = "",
   width = 500,
@@ -43,12 +50,13 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
   let [expression, setExpression] = React.useState(initialSquiggleString);
   return (
     <div>
-      <CodeEditor
-        width={width}
-        value={expression}
-        onChange={setExpression}
-        oneLine={true}
-      />
+      <Input>
+        <CodeEditor
+          value={expression}
+          onChange={setExpression}
+          oneLine={true}
+        />
+      </Input>
       <SquiggleChart
         width={width}
         squiggleString={expression}
diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx
index 4c193b84..76c40228 100644
--- a/packages/components/src/stories/SquiggleChart.stories.mdx
+++ b/packages/components/src/stories/SquiggleChart.stories.mdx
@@ -90,4 +90,17 @@ The default is show 10 points between 0 and 10.
   </Story>
 </Canvas>
 
+## Errors
+
+<Canvas>
+  <Story
+    name="Error"
+    args={{
+      squiggleString: "f(x) = normal(",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 <Props of={SquiggleChart} />
diff --git a/yarn.lock b/yarn.lock
index 9817cdd1..664ffbda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -253,7 +253,16 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.16.7":
+"@babel/generator@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.9.tgz#f4af9fd38fa8de143c29fce3f71852406fc1e2fc"
+  integrity sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==
+  dependencies:
+    "@babel/types" "^7.17.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
   integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
@@ -350,6 +359,14 @@
     "@babel/template" "^7.16.7"
     "@babel/types" "^7.16.7"
 
+"@babel/helper-function-name@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz#136fcd54bc1da82fcb47565cf16fd8e444b1ff12"
+  integrity sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==
+  dependencies:
+    "@babel/template" "^7.16.7"
+    "@babel/types" "^7.17.0"
+
 "@babel/helper-get-function-arity@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
@@ -371,7 +388,7 @@
   dependencies:
     "@babel/types" "^7.17.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.7":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0", "@babel/helper-module-imports@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
   integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
@@ -493,6 +510,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
   integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
 
+"@babel/parser@^7.17.9":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef"
+  integrity sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.16.7.tgz#4eda6d6c2a0aa79c70fa7b6da67763dfe2141050"
@@ -1310,6 +1332,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.4.5":
+  version "7.17.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d"
+  integrity sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==
+  dependencies:
+    "@babel/code-frame" "^7.16.7"
+    "@babel/generator" "^7.17.9"
+    "@babel/helper-environment-visitor" "^7.16.7"
+    "@babel/helper-function-name" "^7.17.9"
+    "@babel/helper-hoist-variables" "^7.16.7"
+    "@babel/helper-split-export-declaration" "^7.16.7"
+    "@babel/parser" "^7.17.9"
+    "@babel/types" "^7.17.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.11", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.15.6", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.17.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
@@ -1838,11 +1876,23 @@
   dependencies:
     "@emotion/memoize" "0.7.4"
 
+"@emotion/is-prop-valid@^1.1.0":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95"
+  integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
 "@emotion/memoize@0.7.4":
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
   integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
 
+"@emotion/memoize@^0.7.4":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
 "@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
   version "0.11.16"
   resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
@@ -1877,12 +1927,12 @@
     "@emotion/styled-base" "^10.3.0"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/stylis@0.8.5":
+"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4":
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.7.5":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -4021,7 +4071,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.19", "@types/react@^17.0.43":
+"@types/react@*", "@types/react@17.0.43", "@types/react@^16.9.19":
   version "17.0.43"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
   integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
@@ -5342,6 +5392,17 @@ babel-plugin-react-docgen@^4.1.0, babel-plugin-react-docgen@^4.2.1:
     lodash "^4.17.15"
     react-docgen "^5.0.0"
 
+"babel-plugin-styled-components@>= 1.12.0":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.6.tgz#6f76c7f7224b7af7edc24a4910351948c691fc90"
+  integrity sha512-Sk+7o/oa2HfHv3Eh8sxoz75/fFvEdHsXV4grdeHufX0nauCmymlnN0rGhIvfpMQSJMvGutJ85gvCGea4iqmDpg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-module-imports" "^7.16.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    lodash "^4.17.11"
+    picomatch "^2.3.0"
+
 babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -5921,6 +5982,11 @@ camelcase@^6.2.0, camelcase@^6.2.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
+camelize@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
+  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -6709,6 +6775,11 @@ css-blank-pseudo@^3.0.3:
   dependencies:
     postcss-selector-parser "^6.0.9"
 
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
+
 css-declaration-sorter@^6.2.2:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.2.2.tgz#bfd2f6f50002d6a3ae779a87d3a0c5d5b10e0f02"
@@ -6823,6 +6894,15 @@ css-select@~1.2.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
+css-to-react-native@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
+  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -9314,7 +9394,7 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -11187,7 +11267,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.17.21, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
+lodash@4.17.21, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -13180,7 +13260,7 @@ postcss-unique-selectors@^5.1.1:
   dependencies:
     postcss-selector-parser "^6.0.5"
 
-postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -15743,6 +15823,22 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+styled-components@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
+  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/traverse" "^7.4.5"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@emotion/stylis" "^0.8.4"
+    "@emotion/unitless" "^0.7.4"
+    babel-plugin-styled-components ">= 1.12.0"
+    css-to-react-native "^3.0.0"
+    hoist-non-react-statics "^3.0.0"
+    shallowequal "^1.1.0"
+    supports-color "^5.5.0"
+
 stylehacks@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.0.tgz#a40066490ca0caca04e96c6b02153ddc39913520"
@@ -15756,7 +15852,7 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^5.3.0:
+supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==

From 2d12e6b3efd709784885cacb14cc0f835efd71e3 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Wed, 6 Apr 2022 21:51:04 -0400
Subject: [PATCH 4/6] Small padding increase to SquiggleEditor Input

---
 packages/components/src/SquiggleEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/SquiggleEditor.tsx b/packages/components/src/SquiggleEditor.tsx
index 964c277d..e606937d 100644
--- a/packages/components/src/SquiggleEditor.tsx
+++ b/packages/components/src/SquiggleEditor.tsx
@@ -30,7 +30,7 @@ export interface SquiggleEditorProps {
 
 const Input = styled.div`
   border: 1px solid #ddd;
-  padding: 0.1em 0.1em;
+  padding: 0.3em 0.3em;
   margin-bottom: 1em;
 `;
 

From 0f0d0270d00c0adec898c8b8e63dbb9fb883f5c3 Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Wed, 6 Apr 2022 22:16:38 -0400
Subject: [PATCH 5/6] Updated yarn.lock

---
 yarn.lock | 33 ++-------------------------------
 1 file changed, 2 insertions(+), 31 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index da4e51ca..ce5accca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -283,15 +283,6 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.17.9":
-  version "7.17.9"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.9.tgz#f4af9fd38fa8de143c29fce3f71852406fc1e2fc"
-  integrity sha512-rAdDousTwxbIxbz5I7GEQ3lUip+xVCXooZNbsydCWs3xA7ZsYOv+CFRdzGxRX78BmQHu9B1Eso59AOZQOJDEdQ==
-  dependencies:
-    "@babel/types" "^7.17.0"
-    jsesc "^2.5.1"
-    source-map "^0.5.0"
-
 "@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
@@ -549,11 +540,7 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.17.8.tgz"
   integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
 
-<<<<<<< HEAD
-"@babel/parser@^7.17.9":
-=======
 "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.17.9":
->>>>>>> staging
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.9.tgz#9c94189a6062f0291418ca021077983058e171ef"
   integrity sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==
@@ -1367,7 +1354,7 @@
     "@babel/parser" "^7.16.7"
     "@babel/types" "^7.16.7"
 
-"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.9":
+"@babel/traverse@^7.1.6", "@babel/traverse@^7.12.11", "@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.16.7", "@babel/traverse@^7.16.8", "@babel/traverse@^7.17.9", "@babel/traverse@^7.4.5":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d"
   integrity sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==
@@ -1399,22 +1386,6 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.4.5":
-  version "7.17.9"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.9.tgz#1f9b207435d9ae4a8ed6998b2b82300d83c37a0d"
-  integrity sha512-PQO8sDIJ8SIwipTPiR71kJQCKQYB5NGImbOviK8K+kg5xkNSYXLBupuX9QhatFowrsvo9Hj8WgArg3W7ijNAQw==
-  dependencies:
-    "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.17.9"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.17.9"
-    "@babel/helper-hoist-variables" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/parser" "^7.17.9"
-    "@babel/types" "^7.17.0"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
 "@babel/types@^7.0.0", "@babel/types@^7.12.11", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.15.6", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.17.0"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz"
@@ -4138,7 +4109,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.43", "@types/react@^16.9.19":
+"@types/react@*", "@types/react@^16.9.19", "@types/react@^17.0.43":
   version "17.0.43"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
   integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==

From f8af290bcf72ad0b1a42cc7d05b4f71a7c7050fd Mon Sep 17 00:00:00 2001
From: Ozzie Gooen <ozzieagooen@gmail.com>
Date: Thu, 7 Apr 2022 07:28:33 -0400
Subject: [PATCH 6/6] Responded to code review comments

---
 packages/components/src/SquiggleChart.tsx     | 21 ++++++++++++-------
 .../components/src/spec-distributions.json    |  2 +-
 packages/components/src/spec-percentiles.json |  6 ++----
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx
index f3d6f982..e381127c 100644
--- a/packages/components/src/SquiggleChart.tsx
+++ b/packages/components/src/SquiggleChart.tsx
@@ -12,7 +12,7 @@ import { createClassFromSpec } from "react-vega";
 import * as chartSpecification from "./spec-distributions.json";
 import * as percentilesSpec from "./spec-percentiles.json";
 import { NumberShower } from "./NumberShower";
-import styled from 'styled-components'
+import styled from "styled-components";
 
 let SquiggleVegaChart = createClassFromSpec({
   spec: chartSpecification as Spec,
@@ -53,14 +53,17 @@ const Error = styled.div`
   padding: 0.4em 0.8em;
 `;
 
-const ShowError: React.FC<{ heading:string, errorMessage: string }> = ({ heading="Error", errorMessage }) => {
+const ShowError: React.FC<{ heading: string; children: React.ReactNode }> = ({
+  heading = "Error",
+  children,
+}) => {
   return (
     <Error>
       <h3>{heading}</h3>
-      <>{errorMessage}</>
+      {children}
     </Error>
   );
-}
+};
 
 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   squiggleString = "",
@@ -72,7 +75,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   diagramStop = 10,
   diagramCount = 20,
   environment = [],
-  onEnvChange = () => { },
+  onEnvChange = () => {},
   width = 500,
   height = 60,
 }: SquiggleChartProps) => {
@@ -247,7 +250,11 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     return <>{chartResults}</>;
   } else if (result.tag === "Error") {
     // At this point, we came across an error. What was our error?
-    return <ShowError heading={"Parse Error"} errorMessage={result.value} />
+    return (
+      <ShowError heading={"Parse Error"}>
+        {result.value}
+      </ShowError>
+    );
   }
   return <p>{"Invalid Response"}</p>;
 };
@@ -336,4 +343,4 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
     });
     return bounds;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/spec-distributions.json b/packages/components/src/spec-distributions.json
index 64231c21..40aebfe4 100644
--- a/packages/components/src/spec-distributions.json
+++ b/packages/components/src/spec-distributions.json
@@ -180,4 +180,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/components/src/spec-percentiles.json b/packages/components/src/spec-percentiles.json
index 6afa5c0b..64b9035d 100644
--- a/packages/components/src/spec-percentiles.json
+++ b/packages/components/src/spec-percentiles.json
@@ -20,9 +20,7 @@
       "transform": [
         {
           "type": "aggregate",
-          "groupby": [
-            "x"
-          ],
+          "groupby": ["x"],
           "ops": [
             "mean",
             "mean",
@@ -372,4 +370,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}