From 6565d97f53c6e40d5a1d0bb539e18ef925330cb9 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Mon, 11 Apr 2022 11:18:38 +1000
Subject: [PATCH 1/7] Rename eval to evaluate

eval is a JS keyword
---
 .../Reducer_Dispatch/Reducer_Dispatch_BuiltIn_test.res        | 2 +-
 .../squiggle-lang/__tests__/Reducer/Reducer_TestHelpers.res   | 2 +-
 packages/squiggle-lang/src/rescript/Reducer/Reducer.res       | 2 +-
 packages/squiggle-lang/src/rescript/Reducer/Reducer.resi      | 4 +++-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/squiggle-lang/__tests__/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltIn_test.res b/packages/squiggle-lang/__tests__/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltIn_test.res
index 2fd2a976..1bb26e28 100644
--- a/packages/squiggle-lang/__tests__/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltIn_test.res
+++ b/packages/squiggle-lang/__tests__/Reducer/Reducer_Dispatch/Reducer_Dispatch_BuiltIn_test.res
@@ -4,7 +4,7 @@ open Jest
 open Expect
 
 let expectEvalToBe = (expr: string, answer: string) =>
-  Reducer.eval(expr)->ExpressionValue.toStringResult->expect->toBe(answer)
+  Reducer.evaluate(expr)->ExpressionValue.toStringResult->expect->toBe(answer)
 
 describe("builtin", () => {
   // All MathJs operators and functions are available for string, number and boolean
diff --git a/packages/squiggle-lang/__tests__/Reducer/Reducer_TestHelpers.res b/packages/squiggle-lang/__tests__/Reducer/Reducer_TestHelpers.res
index 65f689cc..e6183ba0 100644
--- a/packages/squiggle-lang/__tests__/Reducer/Reducer_TestHelpers.res
+++ b/packages/squiggle-lang/__tests__/Reducer/Reducer_TestHelpers.res
@@ -8,4 +8,4 @@ let expectParseToBe = (expr: string, answer: string) =>
   Reducer.parse(expr)->Expression.toStringResult->expect->toBe(answer)
 
 let expectEvalToBe = (expr: string, answer: string) =>
-  Reducer.eval(expr)->ExpressionValue.toStringResult->expect->toBe(answer)
+  Reducer.evaluate(expr)->ExpressionValue.toStringResult->expect->toBe(answer)
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer.res
index bc5f496d..6e8dbdfa 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer.res
@@ -5,5 +5,5 @@ module Extra = Reducer_Extra
 module Js = Reducer_Js
 module MathJs = Reducer_MathJs
 
-let eval = Expression.eval
+let evaluate = Expression.eval
 let parse = Expression.parse
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer.resi b/packages/squiggle-lang/src/rescript/Reducer/Reducer.resi
index 65b2a62a..cf015a95 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer.resi
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer.resi
@@ -4,5 +4,7 @@ module Expression = Reducer_Expression
 module Extra = Reducer_Extra
 module Js = Reducer_Js
 module MathJs = Reducer_MathJs
-let eval: string => result<Expression.expressionValue, ErrorValue.errorValue>
+
+@genType
+let evaluate: string => result<Expression.expressionValue, ErrorValue.errorValue>
 let parse: string => result<Expression.expression, ErrorValue.errorValue>

From 61b589d0bd096decb7048b02c58f3b2790217817 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Mon, 11 Apr 2022 13:16:31 +1000
Subject: [PATCH 2/7] Change typescript interface to reducer

---
 packages/squiggle-lang/__tests__/JS__Test.ts  |  31 ++---
 packages/squiggle-lang/src/js/index.ts        | 127 +++++++++++-------
 .../src/rescript/Reducer/Reducer.res          |   1 +
 .../src/rescript/Reducer/Reducer.resi         |   5 +-
 .../rescript/Reducer/Reducer_ErrorValue.res   |   1 +
 .../Reducer_Expression.resi                   |   3 +-
 .../ReducerInterface_ExpressionValue.res      |   1 +
 .../src/rescript/TypescriptInterface.res      |  27 ++--
 .../src/rescript/shims/Js.shim.ts             |   1 +
 9 files changed, 117 insertions(+), 80 deletions(-)
 create mode 100644 packages/squiggle-lang/src/rescript/shims/Js.shim.ts

diff --git a/packages/squiggle-lang/__tests__/JS__Test.ts b/packages/squiggle-lang/__tests__/JS__Test.ts
index ffba5b82..67e42e55 100644
--- a/packages/squiggle-lang/__tests__/JS__Test.ts
+++ b/packages/squiggle-lang/__tests__/JS__Test.ts
@@ -1,11 +1,10 @@
-import { run, Distribution, resultMap } from "../src/js/index";
+import { run, Distribution, resultMap, squiggleExpression } from "../src/js/index";
 
-let testRun = (x: string) => {
-  let result = run(x);
-  if (result.tag == "Ok") {
-    return { tag: "Ok", value: result.value.exports };
-  } else {
-    return result;
+let testRun = (x: string): squiggleExpression => {
+  let result = run(x, {sampleCount: 100, xyPointLength: 100});
+  expect(result.tag).toEqual("Ok")
+  if(result.tag === "Ok") {
+    return result.value
   }
 };
 
@@ -16,29 +15,19 @@ function Ok<b>(x: b) {
 describe("Simple calculations and results", () => {
   test("mean(normal(5,2))", () => {
     expect(testRun("mean(normal(5,2))")).toEqual({
-      tag: "Ok",
-      value: [{ NAME: "Float", VAL: 5 }],
+      tag: "number",
+      value: 5
     });
   });
   test("10+10", () => {
     let foo = testRun("10 + 10");
-    expect(foo).toEqual({ tag: "Ok", value: [{ NAME: "Float", VAL: 20 }] });
+    expect(foo).toEqual({ tag: "number", value: 20 });
   });
 });
 describe("Log function", () => {
   test("log(1) = 0", () => {
     let foo = testRun("log(1)");
-    expect(foo).toEqual({ tag: "Ok", value: [{ NAME: "Float", VAL: 0 }] });
-  });
-});
-
-describe("Multimodal too many weights error", () => {
-  test("mm(0,0,[0,0,0])", () => {
-    let foo = testRun("mm(0,0,[0,0,0])");
-    expect(foo).toEqual({
-      tag: "Error",
-      value: "Function multimodal error: Too many weights provided",
-    });
+    expect(foo).toEqual({ tag: "number", value: 0 });
   });
 });
 
diff --git a/packages/squiggle-lang/src/js/index.ts b/packages/squiggle-lang/src/js/index.ts
index 8ff08228..923303ef 100644
--- a/packages/squiggle-lang/src/js/index.ts
+++ b/packages/squiggle-lang/src/js/index.ts
@@ -1,13 +1,10 @@
-import { runAll } from "../rescript/ProgramEvaluator.gen";
+import * as _ from 'lodash'
 import type {
-  Inputs_SamplingInputs_t as SamplingInputs,
   exportEnv,
-  exportType,
   exportDistribution,
 } from "../rescript/ProgramEvaluator.gen";
-export type { SamplingInputs, exportEnv, exportDistribution };
-export type { t as DistPlus } from "../rescript/OldInterpreter/DistPlus.gen";
-import { genericDist, env, error } from "../rescript/TypescriptInterface.gen";
+export type {  exportEnv, exportDistribution };
+import { genericDist, samplingParams, evaluate, expressionValue, errorValue, distributionError } from "../rescript/TypescriptInterface.gen";
 export { makeSampleSetDist } from "../rescript/TypescriptInterface.gen";
 import {
   Constructors_mean,
@@ -36,23 +33,16 @@ import {
   Constructors_pointwisePower,
 } from "../rescript/Distributions/DistributionOperation/DistributionOperation.gen";
 
-export let defaultSamplingInputs: SamplingInputs = {
-  sampleCount: 10000,
-  outputXYPoints: 10000,
-  pointDistLength: 1000,
+export type SamplingInputs = {
+  readonly sampleCount?: number; 
+  readonly outputXYPoints?: number; 
+  readonly kernelWidth?: number; 
+  readonly pointDistLength?: number
+};
+export let defaultSamplingInputs: samplingParams = {
+  sampleCount: 10000,
+  xyPointLength: 10000
 };
-
-export function run(
-  squiggleString: string,
-  samplingInputs?: SamplingInputs,
-  environment?: exportEnv
-): result<exportType, string> {
-  let si: SamplingInputs = samplingInputs
-    ? samplingInputs
-    : defaultSamplingInputs;
-  let env: exportEnv = environment ? environment : [];
-  return runAll(squiggleString, si, env);
-}
 
 type result<a, b> =
   | {
@@ -75,147 +65,186 @@ export function resultMap<a, b, c>(
   }
 }
 
+type tagged<a, b> = {tag: a, value: b}
+
+function tag<a,b>(x: a, y: b) : tagged<a, b>{
+  return { tag: x, value: y}
+}
+
+export type squiggleExpression = tagged<"symbol", string> | tagged<"string", string> | tagged<"array", squiggleExpression[]> | tagged<"boolean", boolean> | tagged<"distribution", Distribution> | tagged<"number", number> | tagged<"record", {[key: string]: squiggleExpression }>
+export function run(
+  squiggleString: string,
+  samplingInputs?: samplingParams,
+  _environment?: exportEnv
+): result<squiggleExpression, errorValue> {
+  let si: samplingParams = samplingInputs
+    ? samplingInputs
+    : defaultSamplingInputs;
+  let result : result<expressionValue, errorValue> = evaluate(squiggleString);
+  return resultMap(result, x => createTsExport(x, si));
+}
+
+
+function createTsExport(x: expressionValue, sampEnv: samplingParams): squiggleExpression {
+  switch (x.tag) {
+    case "EvArray":
+      return tag("array", x.value.map(x => createTsExport(x, sampEnv)));
+    case "EvBool":
+      return tag("boolean", x.value);
+    case "EvDistribution":
+      return tag("distribution", new Distribution(x.value, sampEnv));
+    case "EvNumber":
+      return tag("number", x.value);
+    case "EvRecord":
+      return tag("record", _.mapValues(x.value, x => createTsExport(x, sampEnv)))
+
+      
+      
+  }
+}
+
+
 export function resultExn<a, c>(r: result<a, c>): a | c {
   return r.value;
 }
 
 export class Distribution {
   t: genericDist;
-  env: env;
+  env: samplingParams;
 
-  constructor(t: genericDist, env: env) {
+  constructor(t: genericDist, env: samplingParams) {
     this.t = t;
     this.env = env;
     return this;
   }
 
-  mapResultDist(r: result<genericDist, error>): result<Distribution, error> {
+  mapResultDist(r: result<genericDist, distributionError>): result<Distribution, distributionError> {
     return resultMap(r, (v: genericDist) => new Distribution(v, this.env));
   }
 
-  mean(): result<number, error> {
+  mean(): result<number, distributionError> {
     return Constructors_mean({ env: this.env }, this.t);
   }
 
-  sample(): result<number, error> {
+  sample(): result<number, distributionError> {
     return Constructors_sample({ env: this.env }, this.t);
   }
 
-  pdf(n: number): result<number, error> {
+  pdf(n: number): result<number, distributionError> {
     return Constructors_pdf({ env: this.env }, this.t, n);
   }
 
-  cdf(n: number): result<number, error> {
+  cdf(n: number): result<number, distributionError> {
     return Constructors_cdf({ env: this.env }, this.t, n);
   }
 
-  inv(n: number): result<number, error> {
+  inv(n: number): result<number, distributionError> {
     return Constructors_inv({ env: this.env }, this.t, n);
   }
 
-  normalize(): result<Distribution, error> {
+  normalize(): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_normalize({ env: this.env }, this.t)
     );
   }
 
-  toPointSet(): result<Distribution, error> {
+  toPointSet(): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_toPointSet({ env: this.env }, this.t)
     );
   }
 
-  toSampleSet(n: number): result<Distribution, error> {
+  toSampleSet(n: number): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_toSampleSet({ env: this.env }, this.t, n)
     );
   }
 
-  truncate(left: number, right: number): result<Distribution, error> {
+  truncate(left: number, right: number): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_truncate({ env: this.env }, this.t, left, right)
     );
   }
 
-  inspect(): result<Distribution, error> {
+  inspect(): result<Distribution, distributionError> {
     return this.mapResultDist(Constructors_inspect({ env: this.env }, this.t));
   }
 
-  toString(): result<string, error> {
+  toString(): result<string, distributionError> {
     return Constructors_toString({ env: this.env }, this.t);
   }
 
-  toSparkline(n: number): result<string, error> {
+  toSparkline(n: number): result<string, distributionError> {
     return Constructors_toSparkline({ env: this.env }, this.t, n);
   }
 
-  algebraicAdd(d2: Distribution): result<Distribution, error> {
+  algebraicAdd(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_algebraicAdd({ env: this.env }, this.t, d2.t)
     );
   }
 
-  algebraicMultiply(d2: Distribution): result<Distribution, error> {
+  algebraicMultiply(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_algebraicMultiply({ env: this.env }, this.t, d2.t)
     );
   }
 
-  algebraicDivide(d2: Distribution): result<Distribution, error> {
+  algebraicDivide(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_algebraicDivide({ env: this.env }, this.t, d2.t)
     );
   }
 
-  algebraicSubtract(d2: Distribution): result<Distribution, error> {
+  algebraicSubtract(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_algebraicSubtract({ env: this.env }, this.t, d2.t)
     );
   }
 
-  algebraicLogarithm(d2: Distribution): result<Distribution, error> {
+  algebraicLogarithm(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_algebraicLogarithm({ env: this.env }, this.t, d2.t)
     );
   }
 
-  algebraicPower(d2: Distribution): result<Distribution, error> {
+  algebraicPower(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_algebraicPower({ env: this.env }, this.t, d2.t)
     );
   }
 
-  pointwiseAdd(d2: Distribution): result<Distribution, error> {
+  pointwiseAdd(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_pointwiseAdd({ env: this.env }, this.t, d2.t)
     );
   }
 
-  pointwiseMultiply(d2: Distribution): result<Distribution, error> {
+  pointwiseMultiply(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_pointwiseMultiply({ env: this.env }, this.t, d2.t)
     );
   }
 
-  pointwiseDivide(d2: Distribution): result<Distribution, error> {
+  pointwiseDivide(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_pointwiseDivide({ env: this.env }, this.t, d2.t)
     );
   }
 
-  pointwiseSubtract(d2: Distribution): result<Distribution, error> {
+  pointwiseSubtract(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_pointwiseSubtract({ env: this.env }, this.t, d2.t)
     );
   }
 
-  pointwiseLogarithm(d2: Distribution): result<Distribution, error> {
+  pointwiseLogarithm(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_pointwiseLogarithm({ env: this.env }, this.t, d2.t)
     );
   }
 
-  pointwisePower(d2: Distribution): result<Distribution, error> {
+  pointwisePower(d2: Distribution): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_pointwisePower({ env: this.env }, this.t, d2.t)
     );
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer.res
index 6e8dbdfa..7e93f367 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer.res
@@ -5,5 +5,6 @@ module Extra = Reducer_Extra
 module Js = Reducer_Js
 module MathJs = Reducer_MathJs
 
+type expressionValue = Reducer_Expression.expressionValue
 let evaluate = Expression.eval
 let parse = Expression.parse
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer.resi b/packages/squiggle-lang/src/rescript/Reducer/Reducer.resi
index cf015a95..b5b811e6 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer.resi
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer.resi
@@ -6,5 +6,8 @@ module Js = Reducer_Js
 module MathJs = Reducer_MathJs
 
 @genType
-let evaluate: string => result<Expression.expressionValue, ErrorValue.errorValue>
+type expressionValue = Reducer_Expression.expressionValue
+
+@genType
+let evaluate: string => result<expressionValue, Reducer_ErrorValue.errorValue>
 let parse: string => result<Expression.expression, ErrorValue.errorValue>
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_ErrorValue.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_ErrorValue.res
index 4f57bc2c..666f5476 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_ErrorValue.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_ErrorValue.res
@@ -1,3 +1,4 @@
+@genType
 type errorValue =
   | REArrayIndexNotFound(string, int)
   | REFunctionExpected(string)
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression.resi b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression.resi
index 8b09c516..2a6db9bd 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression.resi
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_Expression/Reducer_Expression.resi
@@ -1,7 +1,8 @@
 module Result = Belt.Result
 module T = Reducer_Expression_T
 type expression = T.expression
-type expressionValue = ReducerInterface.ExpressionValue.expressionValue
+@genType
+type expressionValue = ReducerInterface_ExpressionValue.expressionValue
 type t = expression
 let toString: T.expression => Js.String.t
 let toStringResult: result<T.expression, 'a> => string
diff --git a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_ExpressionValue.res b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_ExpressionValue.res
index bfb79df1..8842ce8f 100644
--- a/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_ExpressionValue.res
+++ b/packages/squiggle-lang/src/rescript/ReducerInterface/ReducerInterface_ExpressionValue.res
@@ -5,6 +5,7 @@
 module Extra_Array = Reducer_Extra_Array
 module ErrorValue = Reducer_ErrorValue
 
+@genType
 type rec expressionValue =
   | EvBool(bool)
   | EvNumber(float)
diff --git a/packages/squiggle-lang/src/rescript/TypescriptInterface.res b/packages/squiggle-lang/src/rescript/TypescriptInterface.res
index 6fe6f3d4..c52dd8a7 100644
--- a/packages/squiggle-lang/src/rescript/TypescriptInterface.res
+++ b/packages/squiggle-lang/src/rescript/TypescriptInterface.res
@@ -8,20 +8,31 @@ The below few seem to work fine. In the future there's definitely more work to d
 */
 
 @genType
-type env = DistributionOperation.env
+type samplingParams = DistributionOperation.env
 
 @genType
 type genericDist = GenericDist_Types.genericDist
 
 @genType
-type error = GenericDist_Types.error
+type distributionError = GenericDist_Types.error
 
 @genType
-type resultDist = result<genericDist, error>
-@genType
-type resultFloat = result<float, error>
-@genType
-type resultString = result<string, error>
+type resultDist = result<genericDist, distributionError>
 
 @genType
-let makeSampleSetDist = SampleSetDist.make
\ No newline at end of file
+type resultFloat = result<float, distributionError>
+
+@genType
+type resultString = result<string, distributionError>
+
+@genType
+let makeSampleSetDist = SampleSetDist.make
+
+@genType
+let evaluate = Reducer.evaluate
+
+@genType
+type expressionValue = Reducer_Expression.expressionValue
+
+@genType
+type errorValue = Reducer_ErrorValue.errorValue
diff --git a/packages/squiggle-lang/src/rescript/shims/Js.shim.ts b/packages/squiggle-lang/src/rescript/shims/Js.shim.ts
new file mode 100644
index 00000000..c4f41786
--- /dev/null
+++ b/packages/squiggle-lang/src/rescript/shims/Js.shim.ts
@@ -0,0 +1 @@
+export type Dict_t<T> = { [key: string]: T }

From cb07f5f68ab37e825d6e0ecc7566837b31e26d1c Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Mon, 11 Apr 2022 16:16:29 +1000
Subject: [PATCH 3/7] A playground based on reducer

---
 .../src/components/DistPlusChart.tsx          | 124 ----------------
 .../src/components/DistributionChart.tsx      |  38 +++++
 .../src/components/FunctionChart.tsx          | 134 ++++--------------
 .../src/components/SquiggleChart.tsx          |  62 ++++----
 packages/squiggle-lang/src/js/index.ts        |  71 ++++++++--
 .../GenericDist/GenericDist.resi              |   1 +
 .../GenericDist/GenericDist_Types.res         |  12 ++
 .../Distributions/PointSetDist/Discrete.res   |   2 +-
 .../PointSetDist/PointSetTypes.res            |   3 +
 .../rescript/Reducer/Reducer_ErrorValue.res   |   1 +
 .../src/rescript/TypescriptInterface.res      |  18 +++
 11 files changed, 181 insertions(+), 285 deletions(-)
 delete mode 100644 packages/components/src/components/DistPlusChart.tsx
 create mode 100644 packages/components/src/components/DistributionChart.tsx

diff --git a/packages/components/src/components/DistPlusChart.tsx b/packages/components/src/components/DistPlusChart.tsx
deleted file mode 100644
index 02f2fabd..00000000
--- a/packages/components/src/components/DistPlusChart.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import * as React from "react";
-import _ from "lodash";
-import type { Spec } from "vega";
-import type {
-  DistPlus,
-} from "@quri/squiggle-lang";
-import { createClassFromSpec } from "react-vega";
-import * as chartSpecification from "../vega-specs/spec-distributions.json";
-
-let SquiggleVegaChart = createClassFromSpec({
-  spec: chartSpecification as Spec,
-});
-
-export const DistPlusChart: React.FC<{
-  distPlus: DistPlus;
-  width: number;
-  height: number;
-}> = ({ distPlus, width, height }) => {
-  let shape = distPlus.pointSetDist;
-  if (shape.tag === "Continuous") {
-    let xyShape = shape.value.xyShape;
-    let totalY = xyShape.ys.reduce((a, b) => a + b);
-    let total = 0;
-    let cdf = xyShape.ys.map((y) => {
-      total += y;
-      return total / totalY;
-    });
-    let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y]) => ({
-      cdf: (c * 100).toFixed(2) + "%",
-      x: x,
-      y: y,
-    }));
-
-    return (
-      <SquiggleVegaChart
-        width={width}
-        height={height}
-        data={{ con: values }}
-        actions={false}
-      />
-    );
-  } else if (shape.tag === "Discrete") {
-    let xyShape = shape.value.xyShape;
-    let totalY = xyShape.ys.reduce((a, b) => a + b);
-    let total = 0;
-    let cdf = xyShape.ys.map((y) => {
-      total += y;
-      return total / totalY;
-    });
-    let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y]) => ({
-      cdf: (c * 100).toFixed(2) + "%",
-      x: x,
-      y: y,
-    }));
-
-    return <SquiggleVegaChart data={{ dis: values }} actions={false} />;
-  } else if (shape.tag === "Mixed") {
-    let discreteShape = shape.value.discrete.xyShape;
-    let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
-
-    let discretePoints = _.zip(discreteShape.xs, discreteShape.ys);
-    let continuousShape = shape.value.continuous.xyShape;
-    let continuousPoints = _.zip(continuousShape.xs, continuousShape.ys);
-
-    interface labeledPoint {
-      x: number;
-      y: number;
-      type: "discrete" | "continuous";
-    }
-
-    let markedDisPoints: labeledPoint[] = discretePoints.map(([x, y]) => ({
-      x: x,
-      y: y,
-      type: "discrete",
-    }));
-    let markedConPoints: labeledPoint[] = continuousPoints.map(([x, y]) => ({
-      x: x,
-      y: y,
-      type: "continuous",
-    }));
-
-    let sortedPoints = _.sortBy(markedDisPoints.concat(markedConPoints), "x");
-
-    let totalContinuous = 1 - totalDiscrete;
-    let totalY = continuousShape.ys.reduce((a: number, b: number) => a + b);
-
-    let total = 0;
-    let cdf = sortedPoints.map((point: labeledPoint) => {
-      if (point.type === "discrete") {
-        total += point.y;
-        return total;
-      } else if (point.type === "continuous") {
-        total += (point.y / totalY) * totalContinuous;
-        return total;
-      }
-    });
-
-    interface cdfLabeledPoint {
-      cdf: string;
-      x: number;
-      y: number;
-      type: "discrete" | "continuous";
-    }
-    let cdfLabeledPoint: cdfLabeledPoint[] = _.zipWith(
-      cdf,
-      sortedPoints,
-      (c: number, point: labeledPoint) => ({
-        ...point,
-        cdf: (c * 100).toFixed(2) + "%",
-      })
-    );
-    let continuousValues = cdfLabeledPoint.filter(
-      (x) => x.type === "continuous"
-    );
-    let discreteValues = cdfLabeledPoint.filter((x) => x.type === "discrete");
-
-    return (
-      <SquiggleVegaChart
-        data={{ con: continuousValues, dis: discreteValues }}
-        actions={false}
-      />
-    );
-  }
-};
\ No newline at end of file
diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx
new file mode 100644
index 00000000..502adc8c
--- /dev/null
+++ b/packages/components/src/components/DistributionChart.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import _ from "lodash";
+import type { Spec } from "vega";
+import type {
+  Distribution,
+} from "@quri/squiggle-lang";
+import { distributionErrorToString } from '@quri/squiggle-lang';
+import { createClassFromSpec } from "react-vega";
+import * as chartSpecification from "../vega-specs/spec-distributions.json";
+
+let SquiggleVegaChart = createClassFromSpec({
+  spec: chartSpecification as Spec,
+});
+
+type DistributionChartProps = {
+  distribution: Distribution;
+  width: number;
+  height: number;
+}
+
+export const DistributionChart: React.FC<DistributionChartProps> = ({ distribution, width, height }: DistributionChartProps) => {
+  console.log("Making shape")
+  let shape = distribution.shape();
+  console.log(shape)
+  if (shape.tag === "Ok") {
+    return (
+      <SquiggleVegaChart
+        data={{ con: shape.value.continuous, dis: shape.value.discrete }}
+        width={width}
+        height={height}
+        actions={false}
+      />
+    );
+  }
+  else{
+    return <> {distributionErrorToString(shape.value)} </>;
+  }
+};
diff --git a/packages/components/src/components/FunctionChart.tsx b/packages/components/src/components/FunctionChart.tsx
index 7625b2da..e93e8bd9 100644
--- a/packages/components/src/components/FunctionChart.tsx
+++ b/packages/components/src/components/FunctionChart.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
 import _ from "lodash";
 import type { Spec } from "vega";
-import type { DistPlus } from "@quri/squiggle-lang";
+import type { Distribution, errorValue, result } from "@quri/squiggle-lang";
 import { createClassFromSpec } from "react-vega";
 import * as percentilesSpec from "../vega-specs/spec-percentiles.json";
-import { DistPlusChart } from "./DistPlusChart";
+import { DistributionChart } from "./DistributionChart";
 import { Error } from "./Error";
 
 let SquigglePercentilesChart = createClassFromSpec({
@@ -13,36 +13,38 @@ let SquigglePercentilesChart = createClassFromSpec({
 
 type distPlusFn = (
   a: number
-) => { tag: "Ok"; value: DistPlus } | { tag: "Error"; value: string };
+) => result<Distribution, errorValue>
 
-const _rangeByCount = (start, stop, count) => {
+const _rangeByCount = (start: number, stop: number, count: number) => {
   const step = (stop - start) / (count - 1);
   const items = _.range(start, stop, step);
   const result = items.concat([stop]);
   return result;
 };
 
+function unwrap<a, b>( x: result<a, b>): a {
+  if(x.tag === "Ok"){
+    return x.value
+  }
+}
 export const FunctionChart: React.FC<{
   distPlusFn: distPlusFn;
   diagramStart: number;
   diagramStop: number;
   diagramCount: number;
 }> = ({ distPlusFn, diagramStart, diagramStop, diagramCount }) => {
-  let [mouseOverlay, setMouseOverlay] = React.useState(NaN);
+  let [mouseOverlay, setMouseOverlay] = React.useState(0);
   function handleHover(...args) {
     setMouseOverlay(args[1]);
   }
-  function handleOut(...args) {
+  function handleOut() {
     setMouseOverlay(NaN);
   }
   const signalListeners = { mousemove: handleHover, mouseout: handleOut };
-  let percentileArray = [
-    0.01, 0.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.95, 0.99,
-  ];
   let mouseItem = distPlusFn(mouseOverlay);
   let showChart =
     mouseItem.tag === "Ok" ? (
-      <DistPlusChart distPlus={mouseItem.value} width={400} height={140} />
+      <DistributionChart distribution={mouseItem.value} width={400} height={140} />
     ) : (
       <></>
     );
@@ -56,22 +58,21 @@ export const FunctionChart: React.FC<{
     })
     .filter((x) => x !== null)
     .map(({ x, value }) => {
-      let percentiles = getPercentiles(percentileArray, value);
       return {
         x: x,
-        p1: percentiles[0],
-        p5: percentiles[1],
-        p10: percentiles[2],
-        p20: percentiles[3],
-        p30: percentiles[4],
-        p40: percentiles[5],
-        p50: percentiles[6],
-        p60: percentiles[7],
-        p70: percentiles[8],
-        p80: percentiles[9],
-        p90: percentiles[10],
-        p95: percentiles[11],
-        p99: percentiles[12],
+        p1: unwrap(value.inv(0.01)),
+        p5: unwrap(value.inv(0.05)),
+        p10: unwrap(value.inv(0.12)),
+        p20: unwrap(value.inv(0.20)),
+        p30: unwrap(value.inv(0.30)),
+        p40: unwrap(value.inv(0.40)),
+        p50: unwrap(value.inv(0.50)),
+        p60: unwrap(value.inv(0.60)),
+        p70: unwrap(value.inv(0.70)),
+        p80: unwrap(value.inv(0.80)),
+        p90: unwrap(value.inv(0.90)),
+        p95: unwrap(value.inv(0.95)),
+        p99: unwrap(value.inv(0.99)),
       };
     });
 
@@ -101,88 +102,3 @@ export const FunctionChart: React.FC<{
   );
 };
 
-function getPercentiles(percentiles: number[], t: DistPlus) {
-  if (t.pointSetDist.tag === "Discrete") {
-    let total = 0;
-    let maxX = _.max(t.pointSetDist.value.xyShape.xs);
-    let bounds = percentiles.map((_) => maxX);
-    _.zipWith(
-      t.pointSetDist.value.xyShape.xs,
-      t.pointSetDist.value.xyShape.ys,
-      (x, y) => {
-        total += y;
-        percentiles.forEach((v, i) => {
-          if (total > v && bounds[i] === maxX) {
-            bounds[i] = x;
-          }
-        });
-      }
-    );
-    return bounds;
-  } else if (t.pointSetDist.tag === "Continuous") {
-    let total = 0;
-    let maxX = _.max(t.pointSetDist.value.xyShape.xs);
-    let totalY = _.sum(t.pointSetDist.value.xyShape.ys);
-    let bounds = percentiles.map((_) => maxX);
-    _.zipWith(
-      t.pointSetDist.value.xyShape.xs,
-      t.pointSetDist.value.xyShape.ys,
-      (x, y) => {
-        total += y / totalY;
-        percentiles.forEach((v, i) => {
-          if (total > v && bounds[i] === maxX) {
-            bounds[i] = x;
-          }
-        });
-      }
-    );
-    return bounds;
-  } else if (t.pointSetDist.tag === "Mixed") {
-    let discreteShape = t.pointSetDist.value.discrete.xyShape;
-    let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
-
-    let discretePoints = _.zip(discreteShape.xs, discreteShape.ys);
-    let continuousShape = t.pointSetDist.value.continuous.xyShape;
-    let continuousPoints = _.zip(continuousShape.xs, continuousShape.ys);
-
-    interface labeledPoint {
-      x: number;
-      y: number;
-      type: "discrete" | "continuous";
-    }
-
-    let markedDisPoints: labeledPoint[] = discretePoints.map(([x, y]) => ({
-      x: x,
-      y: y,
-      type: "discrete",
-    }));
-    let markedConPoints: labeledPoint[] = continuousPoints.map(([x, y]) => ({
-      x: x,
-      y: y,
-      type: "continuous",
-    }));
-
-    let sortedPoints = _.sortBy(markedDisPoints.concat(markedConPoints), "x");
-
-    let totalContinuous = 1 - totalDiscrete;
-    let totalY = continuousShape.ys.reduce((a: number, b: number) => a + b);
-
-    let total = 0;
-    let maxX = _.max(sortedPoints.map((x) => x.x));
-    let bounds = percentiles.map((_) => maxX);
-    sortedPoints.map((point: labeledPoint) => {
-      if (point.type === "discrete") {
-        total += point.y;
-      } else if (point.type === "continuous") {
-        total += (point.y / totalY) * totalContinuous;
-      }
-      percentiles.forEach((v, i) => {
-        if (total > v && bounds[i] === maxX) {
-          bounds[i] = total;
-        }
-      });
-      return total;
-    });
-    return bounds;
-  }
-}
diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index f5dc5667..ded0a96a 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -1,14 +1,12 @@
 import * as React from "react";
 import _ from "lodash";
-import { run } from "@quri/squiggle-lang";
+import { run, errorValueToString } from "@quri/squiggle-lang";
 import type {
-  SamplingInputs,
+  samplingParams,
   exportEnv,
-  exportDistribution,
 } from "@quri/squiggle-lang";
 import { NumberShower } from "./NumberShower";
-import { DistPlusChart } from "./DistPlusChart";
-import { FunctionChart } from "./FunctionChart";
+import { DistributionChart } from "./DistributionChart";
 import { Error } from "./Error";
 
 export interface SquiggleChartProps {
@@ -39,8 +37,6 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   squiggleString = "",
   sampleCount = 1000,
   outputXYPoints = 1000,
-  kernelWidth,
-  pointDistLength = 1000,
   diagramStart = 0,
   diagramStop = 10,
   diagramCount = 20,
@@ -49,43 +45,35 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   width = 500,
   height = 60,
 }: SquiggleChartProps) => {
-  let samplingInputs: SamplingInputs = {
+  let samplingInputs: samplingParams = {
     sampleCount: sampleCount,
-    outputXYPoints: outputXYPoints,
-    kernelWidth: kernelWidth,
-    pointDistLength: pointDistLength,
+    xyPointLength: outputXYPoints
   };
 
   let result = run(squiggleString, samplingInputs, environment);
+  console.log(result)
   if (result.tag === "Ok") {
-    let environment = result.value.environment;
-    let exports = result.value.exports;
     onEnvChange(environment);
-    let chartResults = exports.map((chartResult: exportDistribution) => {
-      if (chartResult["NAME"] === "Float") {
-        return <NumberShower precision={3} number={chartResult["VAL"]} />;
-      } else if (chartResult["NAME"] === "DistPlus") {
-        return (
-          <DistPlusChart
-            distPlus={chartResult.VAL}
-            height={height}
-            width={width}
-          />
-        );
-      } else if (chartResult.NAME === "Function") {
-        return (
-          <FunctionChart
-            distPlusFn={chartResult.VAL}
-            diagramStart={diagramStart}
-            diagramStop={diagramStop}
-            diagramCount={diagramCount}
-          />
-        );
-      }
-    });
-    return <>{chartResults}</>;
+    let chartResult = result.value;
+    if (chartResult.tag === "number") {
+      return <NumberShower precision={3} number={chartResult.value} />;
+    } else if (chartResult.tag === "distribution") {
+      console.log("Is a distribution")
+      return (
+        <DistributionChart
+          distribution={chartResult.value}
+          height={height}
+          width={width}
+        />
+      );
+      console.log("NOT THIS LINE")
+    }
+    else {
+      console.log("Is a distribution")
+      return <Error heading="No Viewer">{"We don't currently have a viewer for this type: " + chartResult.tag}</Error>;
+    }
   } else if (result.tag === "Error") {
     // At this point, we came across an error. What was our error?
-    return <Error heading={"Parse Error"}>{result.value}</Error>;
+    return <Error heading={"Parse Error"}>{errorValueToString(result.value)}</Error>;
   }
 };
diff --git a/packages/squiggle-lang/src/js/index.ts b/packages/squiggle-lang/src/js/index.ts
index 923303ef..35fa0537 100644
--- a/packages/squiggle-lang/src/js/index.ts
+++ b/packages/squiggle-lang/src/js/index.ts
@@ -4,8 +4,8 @@ import type {
   exportDistribution,
 } from "../rescript/ProgramEvaluator.gen";
 export type {  exportEnv, exportDistribution };
-import { genericDist, samplingParams, evaluate, expressionValue, errorValue, distributionError } from "../rescript/TypescriptInterface.gen";
-export { makeSampleSetDist } from "../rescript/TypescriptInterface.gen";
+import { genericDist, samplingParams, evaluate, expressionValue, errorValue, distributionError, toPointSet, continuousShape, discreteShape, distributionErrorToString } from "../rescript/TypescriptInterface.gen";
+export { makeSampleSetDist, errorValueToString, distributionErrorToString } from "../rescript/TypescriptInterface.gen";
 import {
   Constructors_mean,
   Constructors_sample,
@@ -32,19 +32,14 @@ import {
   Constructors_pointwiseLogarithm,
   Constructors_pointwisePower,
 } from "../rescript/Distributions/DistributionOperation/DistributionOperation.gen";
+export type {samplingParams, errorValue}
 
-export type SamplingInputs = {
-  readonly sampleCount?: number; 
-  readonly outputXYPoints?: number; 
-  readonly kernelWidth?: number; 
-  readonly pointDistLength?: number
-};
 export let defaultSamplingInputs: samplingParams = {
   sampleCount: 10000,
   xyPointLength: 10000
 };
 
-type result<a, b> =
+export type result<a, b> =
   | {
       tag: "Ok";
       value: a;
@@ -65,6 +60,10 @@ export function resultMap<a, b, c>(
   }
 }
 
+function Ok<a,b>(x: a): result<a,b> {
+  return {"tag": "Ok", value: x}
+}
+
 type tagged<a, b> = {tag: a, value: b}
 
 function tag<a,b>(x: a, y: b) : tagged<a, b>{
@@ -97,9 +96,6 @@ function createTsExport(x: expressionValue, sampEnv: samplingParams): squiggleEx
       return tag("number", x.value);
     case "EvRecord":
       return tag("record", _.mapValues(x.value, x => createTsExport(x, sampEnv)))
-
-      
-      
   }
 }
 
@@ -108,6 +104,19 @@ export function resultExn<a, c>(r: result<a, c>): a | c {
   return r.value;
 }
 
+export type point = { x: number, y: number}
+
+export type shape = {
+  continuous: point[]
+  discrete: point[]
+}
+
+function shapePoints(x : continuousShape | discreteShape): point[]{
+  let xs = x.xyShape.xs;
+  let ys = x.xyShape.ys;
+  return _.zipWith(xs, ys, (x, y) => ({x, y}))
+}
+
 export class Distribution {
   t: genericDist;
   env: samplingParams;
@@ -148,6 +157,34 @@ export class Distribution {
     );
   }
 
+  shape() : result<shape, distributionError> {
+    let pointSet = toPointSet(this.t, {xyPointLength: this.env.xyPointLength, sampleCount: this.env.sampleCount}, null);
+    if(pointSet.tag === "Ok"){
+      let distribution = pointSet.value;
+      if(distribution.tag === "Continuous"){
+        return Ok({
+          continuous: shapePoints(distribution.value),
+          discrete: []
+        })
+      }
+      else if(distribution.tag === "Discrete"){
+        return Ok({
+          discrete: shapePoints(distribution.value),
+          continuous: []
+        })
+      }
+      else if(distribution.tag === "Mixed"){
+        return Ok({
+          discrete: shapePoints(distribution.value.discrete),
+          continuous: shapePoints(distribution.value.continuous)
+        })
+      }
+    }
+    else {
+      return pointSet
+    }
+  }
+
   toPointSet(): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_toPointSet({ env: this.env }, this.t)
@@ -170,8 +207,14 @@ export class Distribution {
     return this.mapResultDist(Constructors_inspect({ env: this.env }, this.t));
   }
 
-  toString(): result<string, distributionError> {
-    return Constructors_toString({ env: this.env }, this.t);
+  toString(): string {
+    let result = Constructors_toString({ env: this.env }, this.t);
+    if(result.tag  === "Ok"){
+      result.value
+    }
+    else {
+      return distributionErrorToString(result.value)
+    }
   }
 
   toSparkline(n: number): result<string, distributionError> {
diff --git a/packages/squiggle-lang/src/rescript/Distributions/GenericDist/GenericDist.resi b/packages/squiggle-lang/src/rescript/Distributions/GenericDist/GenericDist.resi
index 4565ec14..bd6755fd 100644
--- a/packages/squiggle-lang/src/rescript/Distributions/GenericDist/GenericDist.resi
+++ b/packages/squiggle-lang/src/rescript/Distributions/GenericDist/GenericDist.resi
@@ -21,6 +21,7 @@ let toFloatOperation: (
   ~distToFloatOperation: Operation.distToFloatOperation,
 ) => result<float, error>
 
+@genType
 let toPointSet: (
   t,
   ~xyPointLength: int,
diff --git a/packages/squiggle-lang/src/rescript/Distributions/GenericDist/GenericDist_Types.res b/packages/squiggle-lang/src/rescript/Distributions/GenericDist/GenericDist_Types.res
index 96e7d3f8..4d2ba9b6 100644
--- a/packages/squiggle-lang/src/rescript/Distributions/GenericDist/GenericDist_Types.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/GenericDist/GenericDist_Types.res
@@ -10,10 +10,21 @@ type error =
   | DistributionVerticalShiftIsInvalid
   | Other(string)
 
+@genType
 module Error = {
   type t = error
 
   let fromString = (s: string): t => Other(s)
+  
+  @genType
+  let toString = (x: t) => {
+    switch x {
+    | NotYetImplemented => "Not Yet Implemented"
+    | Unreachable => "Unreachable"
+    | DistributionVerticalShiftIsInvalid => "Distribution Vertical Shift Is Invalid"
+    | Other(s) => s
+    }
+  }
 
   let resultStringToResultError: result<'a, string> => result<'a, error> = n =>
     n->E.R2.errMap(r => r->fromString->Error)
@@ -51,6 +62,7 @@ module Operation = {
     | #Sample
   ]
 
+  @genType
   type pointsetXSelection = [#Linear | #ByWeight]
 
   type toDist =
diff --git a/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/Discrete.res b/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/Discrete.res
index 3b689453..3bd22018 100644
--- a/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/Discrete.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/Discrete.res
@@ -214,4 +214,4 @@ module T = Dist({
     let getMeanOfSquares = t => t |> shapeMap(XYShape.T.square) |> mean
     XYShape.Analysis.getVarianceDangerously(t, mean, getMeanOfSquares)
   }
-})
\ No newline at end of file
+})
diff --git a/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/PointSetTypes.res b/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/PointSetTypes.res
index 2d7947c0..4de2e880 100644
--- a/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/PointSetTypes.res
+++ b/packages/squiggle-lang/src/rescript/Distributions/PointSetDist/PointSetTypes.res
@@ -19,6 +19,7 @@ type interpolationStrategy = XYShape.interpolationStrategy;
 type extrapolationStrategy = XYShape.extrapolationStrategy;
 type interpolator = XYShape.extrapolationStrategy;
 
+@genType
 type rec continuousShape = {
   xyShape: xyShape,
   interpolation: interpolationStrategy,
@@ -26,12 +27,14 @@ type rec continuousShape = {
   integralCache: option<continuousShape>,
 }
 
+@genType
 type discreteShape = {
   xyShape: xyShape,
   integralSumCache: option<float>,
   integralCache: option<continuousShape>,
 }
 
+@genType
 type mixedShape = {
   continuous: continuousShape,
   discrete: discreteShape,
diff --git a/packages/squiggle-lang/src/rescript/Reducer/Reducer_ErrorValue.res b/packages/squiggle-lang/src/rescript/Reducer/Reducer_ErrorValue.res
index 666f5476..d0c85d59 100644
--- a/packages/squiggle-lang/src/rescript/Reducer/Reducer_ErrorValue.res
+++ b/packages/squiggle-lang/src/rescript/Reducer/Reducer_ErrorValue.res
@@ -8,6 +8,7 @@ type errorValue =
 
 type t = errorValue
 
+@genType
 let errorToString = err =>
   switch err {
   | REArrayIndexNotFound(msg, index) => `${msg}: ${Js.String.make(index)}`
diff --git a/packages/squiggle-lang/src/rescript/TypescriptInterface.res b/packages/squiggle-lang/src/rescript/TypescriptInterface.res
index c52dd8a7..a706bdd2 100644
--- a/packages/squiggle-lang/src/rescript/TypescriptInterface.res
+++ b/packages/squiggle-lang/src/rescript/TypescriptInterface.res
@@ -36,3 +36,21 @@ type expressionValue = Reducer_Expression.expressionValue
 
 @genType
 type errorValue = Reducer_ErrorValue.errorValue
+
+@genType
+let toPointSet = GenericDist.toPointSet
+
+@genType
+type mixedShape = PointSetTypes.mixedShape
+
+@genType
+type discreteShape = PointSetTypes.discreteShape
+
+@genType
+type continuousShape = PointSetTypes.continuousShape
+
+@genType
+let errorValueToString = Reducer_ErrorValue.errorToString
+
+@genType
+let distributionErrorToString = GenericDist_Types.Error.toString

From 26433c52892e296110c490f3f725c408ee3ed64a Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Mon, 11 Apr 2022 16:31:54 +1000
Subject: [PATCH 4/7] Fix failing tests based on new toString

---
 packages/squiggle-lang/__tests__/JS__Test.ts | 2 +-
 packages/squiggle-lang/src/js/index.ts       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/squiggle-lang/__tests__/JS__Test.ts b/packages/squiggle-lang/__tests__/JS__Test.ts
index 67e42e55..be276a93 100644
--- a/packages/squiggle-lang/__tests__/JS__Test.ts
+++ b/packages/squiggle-lang/__tests__/JS__Test.ts
@@ -58,7 +58,7 @@ describe("Distribution", () => {
   });
   test("toPointSet", () => {
     expect(
-      resultMap(dist.toPointSet(), (r: Distribution) => r.toString()).value
+      resultMap(dist.toPointSet(), (r: Distribution) => r.toString())
     ).toEqual(Ok("Point Set Distribution"));
   });
   test("toSparkline", () => {
diff --git a/packages/squiggle-lang/src/js/index.ts b/packages/squiggle-lang/src/js/index.ts
index 35fa0537..2d331c6e 100644
--- a/packages/squiggle-lang/src/js/index.ts
+++ b/packages/squiggle-lang/src/js/index.ts
@@ -210,7 +210,7 @@ export class Distribution {
   toString(): string {
     let result = Constructors_toString({ env: this.env }, this.t);
     if(result.tag  === "Ok"){
-      result.value
+      return result.value
     }
     else {
       return distributionErrorToString(result.value)

From 440bfabffa55cc0854d87be52f6016945bfe8822 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Tue, 12 Apr 2022 15:41:36 +1000
Subject: [PATCH 5/7] Run prettier on monorepo + fix crashing playground

---
 .github/ISSUE_TEMPLATE/developer-bug.md       |   9 +-
 .github/ISSUE_TEMPLATE/future.md              |   5 +-
 .github/ISSUE_TEMPLATE/pl.md                  |  15 +-
 .github/ISSUE_TEMPLATE/user-bug.md            |   9 +-
 .github/workflows/ci.yaml                     |  53 ++++---
 .github/workflows/codeql-analysis.yml         |  66 ++++----
 .prettierignore                               |   9 ++
 CONTRIBUTING.md                               |  28 ++--
 README.md                                     |  35 +++--
 package.json                                  |   3 +-
 packages/components/.prettierignore           |   5 -
 packages/components/.storybook/main.js        |  36 +++--
 packages/components/.storybook/preview.js     |   2 +-
 packages/components/package.json              |   9 +-
 .../src/components/DistributionChart.tsx      |  19 ++-
 .../components/{Error.tsx => ErrorBox.tsx}    |   8 +-
 .../src/components/FunctionChart.tsx          | 101 ++++++------
 .../src/components/NumberShower.tsx           | 136 ++++++++--------
 .../src/components/SquiggleChart.tsx          |  33 ++--
 .../src/components/SquiggleEditor.tsx         |   2 +-
 .../src/components/SquigglePlayground.tsx     |   6 +-
 packages/components/src/index.ts              |   5 +-
 .../src/stories/Introduction.stories.mdx      |   2 +-
 .../src/stories/NumberShower.stories.mdx      |  16 +-
 .../src/stories/SquiggleChart.stories.mdx     |   5 +-
 .../src/vega-specs/spec-distributions.json    |   2 +-
 .../src/vega-specs/spec-percentiles.json      |   6 +-
 packages/components/tsconfig.json             |   7 +-
 packages/components/webpack.config.js         |   4 +-
 packages/squiggle-lang/.prettierignore        |   3 -
 packages/squiggle-lang/__tests__/JS__Test.ts  |  17 +-
 packages/squiggle-lang/src/js/index.ts        | 147 ++++++++++++------
 .../src/rescript/shims/Js.shim.ts             |   2 +-
 packages/squiggle-lang/tsconfig.json          |   1 +
 packages/website/.prettierignore              |   1 -
 yarn.lock                                     |  33 ++--
 36 files changed, 452 insertions(+), 388 deletions(-)
 create mode 100644 .prettierignore
 delete mode 100644 packages/components/.prettierignore
 rename packages/components/src/components/{Error.tsx => ErrorBox.tsx} (68%)
 delete mode 100644 packages/squiggle-lang/.prettierignore
 delete mode 100644 packages/website/.prettierignore

diff --git a/.github/ISSUE_TEMPLATE/developer-bug.md b/.github/ISSUE_TEMPLATE/developer-bug.md
index 5c4ccb54..db88bcad 100644
--- a/.github/ISSUE_TEMPLATE/developer-bug.md
+++ b/.github/ISSUE_TEMPLATE/developer-bug.md
@@ -1,14 +1,13 @@
 ---
 name: Developer friction when contributing to Squiggle
-about: Did your yarn scripts fail? Did the CI diverge from a README? Have a testing-related task? Etc. 
-labels: 'ops & testing'
+about: Did your yarn scripts fail? Did the CI diverge from a README? Have a testing-related task? Etc.
+labels: "ops & testing"
 ---
+
 # Description:
 
-
 # The OS and version, yarn version, etc. in which this came up
+
 _delete this section if testing task_
 
 # Desired behavior
-
-
diff --git a/.github/ISSUE_TEMPLATE/future.md b/.github/ISSUE_TEMPLATE/future.md
index 517892ec..6333a60e 100644
--- a/.github/ISSUE_TEMPLATE/future.md
+++ b/.github/ISSUE_TEMPLATE/future.md
@@ -1,7 +1,6 @@
 ---
 name: Idea or feature request
-about: Where would you like to see Squiggle go over the next few months, several months, or few years? 
+about: Where would you like to see Squiggle go over the next few months, several months, or few years?
 ---
+
 # Description
-
-
diff --git a/.github/ISSUE_TEMPLATE/pl.md b/.github/ISSUE_TEMPLATE/pl.md
index ab4161a1..aa482feb 100644
--- a/.github/ISSUE_TEMPLATE/pl.md
+++ b/.github/ISSUE_TEMPLATE/pl.md
@@ -1,14 +1,13 @@
 ---
 name: Regarding the programming language
 about: Interpreter, parser, syntax, semantics, and including distributions
-labels: 'programming language'
+labels: "programming language"
 ---
-<!-- mark one with an x --> 
-- _ Is refactor
-- _ Is new feature
-- _ Concerns documentation
+
+<!-- mark one with an x -->
+
+- \_ Is refactor
+- \_ Is new feature
+- \_ Concerns documentation
 
 # Description of suggestion or shortcoming:
-
-
-
diff --git a/.github/ISSUE_TEMPLATE/user-bug.md b/.github/ISSUE_TEMPLATE/user-bug.md
index ca30abbe..281a859f 100644
--- a/.github/ISSUE_TEMPLATE/user-bug.md
+++ b/.github/ISSUE_TEMPLATE/user-bug.md
@@ -1,18 +1,17 @@
 ---
 name: Bug reports for Squiggle users
-about: Rendering oddly, trouble with the playground, something like this? 
-labels: 'bug'
+about: Rendering oddly, trouble with the playground, something like this?
+labels: "bug"
 ---
+
 # Description:
 
-
 # Steps to reproduce:
+
 1.
 2.
 3.
 
 # Expected behavior:
 
-
 # What I got instead:
-
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index e139caeb..b45318d8 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -1,14 +1,13 @@
 name: Squiggle packages check
 
 on:
-  push:  # Delete this line if there becomes a scarcity of build minutes.
+  push: # Delete this line if there becomes a scarcity of build minutes.
   pull_request:
     branches:
       - master
       - staging
 
 jobs:
-
   pre_check:
     name: Precheck for skipping redundant jobs
     runs-on: ubuntu-latest
@@ -43,15 +42,15 @@ jobs:
         shell: bash
         working-directory: packages/squiggle-lang
     steps:
-    - uses: actions/checkout@v2
-    - name: Install dependencies from monorepo level
-      run: cd ../../ && yarn
-    - name: Build rescript codebase
-      run: yarn build
-    - name: Run tests
-      run: yarn test
-    - name: Run webpack
-      run: yarn bundle
+      - uses: actions/checkout@v2
+      - name: Install dependencies from monorepo level
+        run: cd ../../ && yarn
+      - name: Build rescript codebase
+        run: yarn build
+      - name: Run tests
+        run: yarn test
+      - name: Run webpack
+        run: yarn bundle
 
   components-build-test:
     name: Components build and test
@@ -63,15 +62,15 @@ jobs:
         shell: bash
         working-directory: packages/components
     steps:
-    - uses: actions/checkout@v2
-    - name: Install dependencies from monorepo level
-      run: cd ../../ && yarn
-    - name: Build rescript codebase in squiggle-lang
-      run: cd ../squiggle-lang && yarn build
-    - name: Run webpack
-      run: yarn bundle
-    - name: Build storybook
-      run: yarn build
+      - uses: actions/checkout@v2
+      - name: Install dependencies from monorepo level
+        run: cd ../../ && yarn
+      - name: Build rescript codebase in squiggle-lang
+        run: cd ../squiggle-lang && yarn build
+      - name: Run webpack
+        run: yarn bundle
+      - name: Build storybook
+        run: yarn build
 
   website-build:
     name: Website build
@@ -83,10 +82,10 @@ jobs:
         shell: bash
         working-directory: packages/website
     steps:
-    - uses: actions/checkout@v2
-    - name: Install dependencies from monorepo level
-      run: cd ../../ && yarn
-    - name: Build rescript in squiggle-lang
-      run: cd ../squiggle-lang && yarn build
-    - name: Build website assets
-      run: yarn build
+      - uses: actions/checkout@v2
+      - name: Install dependencies from monorepo level
+        run: cd ../../ && yarn
+      - name: Build rescript in squiggle-lang
+        run: cd ../squiggle-lang && yarn build
+      - name: Build website assets
+        run: yarn build
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index 67007416..13446dab 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -13,16 +13,16 @@ name: "CodeQL"
 
 on:
   push:
-    branches: 
-    - master
-    - staging
+    branches:
+      - master
+      - staging
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: 
-    - master
-    - staging
+    branches:
+      - master
+      - staging
   schedule:
-    - cron: '42 19 * * 0'
+    - cron: "42 19 * * 0"
 
 jobs:
   analyze:
@@ -36,39 +36,39 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ["javascript"]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://git.io/codeql-language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
+      - name: Checkout repository
+        uses: actions/checkout@v2
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v1
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v1
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      #- run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v1
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..175742ce
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,9 @@
+.direnv
+*.bs.js
+*.gen.tsx
+packages/*/dist
+packages/components/storybook-static
+node_modules
+packages/*/node_modules
+packages/website/.docusaurus
+packages/squiggle-lang/lib
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 3c17b1e7..22e5384f 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,9 +2,9 @@ _The current document was written quickly and not exhaustively, yet, it's unfini
 
 # Contributing to Squiggle
 
-We welcome contributions from developers, especially people in react/typescript, rescript, and interpreters/parsers. We also are keen to hear issues filed by users! 
+We welcome contributions from developers, especially people in react/typescript, rescript, and interpreters/parsers. We also are keen to hear issues filed by users!
 
-Squiggle is currently pre-alpha. 
+Squiggle is currently pre-alpha.
 
 # Quick links
 
@@ -12,41 +12,43 @@ Squiggle is currently pre-alpha.
 - The team presently communicates via the **EA Forecasting and Epistemics** slack (channels `#squiggle` and `#squiggle-ops`), you can track down an invite by reaching out to Ozzie Gooen
 - [Squiggle documentation](https://www.squiggle-language.com/docs/Language)
 - [Rescript documentation](https://rescript-lang.org/docs/manual/latest/introduction)
-- You can email `quinn@quantifieduncertainty.org` if you need assistance in onboarding or if you have questions 
+- You can email `quinn@quantifieduncertainty.org` if you need assistance in onboarding or if you have questions
 
 # Bug reports
 
-Anyone (with a github account) can file an issue at any time. Please allow Quinn, Sam, and Ozzie to triage, but otherwise just follow the suggestions in the issue templates. 
+Anyone (with a github account) can file an issue at any time. Please allow Quinn, Sam, and Ozzie to triage, but otherwise just follow the suggestions in the issue templates.
 
 # Project structure
 
-Squiggle is a **monorepo** with four **packages**. 
+Squiggle is a **monorepo** with four **packages**.
+
 - **components** is where we improve reactive interfacing with Squiggle
 - **playground** is the site `playground.squiggle-language.com`
-- **squiggle-lang** is where the magic happens: probability distributions, the interpreter, etc. 
+- **squiggle-lang** is where the magic happens: probability distributions, the interpreter, etc.
 - **website** is the site `squiggle-language.com`
 
 # Deployment ops
 
-We use netlify, and it should only concern Quinn, Sam, and Ozzie. 
+We use netlify, and it should only concern Quinn, Sam, and Ozzie.
 
 # Development environment, building, testing, dev server
 
-You need `yarn`. 
+You need `yarn`.
 
-Being a monorepo, where packages are connected by dependency, it's important to follow `README.md`s closely. Each package has it's own `README.md`, which is where the bulk of information is. 
+Being a monorepo, where packages are connected by dependency, it's important to follow `README.md`s closely. Each package has it's own `README.md`, which is where the bulk of information is.
 
-We aspire for `ci.yaml` and `README.md`s to be in one-to-one correspondence. 
+We aspire for `ci.yaml` and `README.md`s to be in one-to-one correspondence.
 
 ## If you're on NixOS
 
-You'll need to run a command like this in order to get `yarn build` to run, especially in `packages/squiggle-lang`. 
+You'll need to run a command like this in order to get `yarn build` to run, especially in `packages/squiggle-lang`.
+
 ```sh
-patchelf --set-interpreter $(patchelf --print-interpreter $(which mkdir)) ./node_modules/gentype/gentype.exe 
+patchelf --set-interpreter $(patchelf --print-interpreter $(which mkdir)) ./node_modules/gentype/gentype.exe
 ```
 
 See [here](https://github.com/NixOS/nixpkgs/issues/107375)
 
 # Pull request protocol
 
-Please work against `staging` branch. **Do not** work against `master`. Please do not merge without approval from some subset of Quinn, Sam, and Ozzie; they will be auto-pinged. 
+Please work against `staging` branch. **Do not** work against `master`. Please do not merge without approval from some subset of Quinn, Sam, and Ozzie; they will be auto-pinged.
diff --git a/README.md b/README.md
index bdc6c8cf..94ea7d68 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,10 @@
 # Squiggle
+
 ![Packages check](https://github.com/QURIresearch/squiggle/actions/workflows/ci.yaml/badge.svg)
 [![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-lang.svg)](https://www.npmjs.com/package/@quri/squiggle-lang)
 [![npm version](https://badge.fury.io/js/@quri%2Fsquiggle-components.svg)](https://www.npmjs.com/package/@quri/squiggle-components)
 
-This is an experimental DSL/language for making probabilistic estimates. The full story can be found [here](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3). 
+This is an experimental DSL/language for making probabilistic estimates. The full story can be found [here](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3).
 
 ## Our deployments
 
@@ -12,40 +13,42 @@ This is an experimental DSL/language for making probabilistic estimates. The ful
 - **old playground**: https://playground.squiggle-language.com
 
 ## Packages
-This monorepo has several packages that can be used for various purposes. All 
+
+This monorepo has several packages that can be used for various purposes. All
 the packages can be found in `packages`.
 
 - `@quri/squiggle-lang` in `packages/squiggle-lang` contains the core language, particularly
-an interface to parse squiggle expressions and return descriptions of distributions
-or results.
+  an interface to parse squiggle expressions and return descriptions of distributions
+  or results.
 - `@quri/squiggle-components` in `packages/components` contains React components that
-can be passed squiggle strings as props, and return a presentation of the result
-of the calculation.
+  can be passed squiggle strings as props, and return a presentation of the result
+  of the calculation.
 - `@quri/squiggle-website` in `packages/website` The main descriptive website for squiggle,
-it is hosted at `squiggle-language.com`.
+  it is hosted at `squiggle-language.com`.
 
 The playground depends on the components library which then depends on the language. This means that if you wish to work on the components library, you will need to build (no need to bundle) the language, and as of this writing playground doesn't really work.
 
 # Develop
 
-For any project in the repo, begin by running `yarn` in the top level (TODO: is this true?) 
+For any project in the repo, begin by running `yarn` in the top level (TODO: is this true?)
 
-``` sh
+```sh
 yarn
 ```
 
-See `packages/*/README.md` to work with whatever project you're interested in. 
+See `packages/*/README.md` to work with whatever project you're interested in.
 
-## `codium` for `rescript` 
+## `codium` for `rescript`
 
-If you have `nix` installed with `flakes` enabled, you can build a `codium` in this repo for `rescript` development, if you don't want to pollute your machine's global editor with another mode/extension. 
+If you have `nix` installed with `flakes` enabled, you can build a `codium` in this repo for `rescript` development, if you don't want to pollute your machine's global editor with another mode/extension.
 
-``` sh
+```sh
 nix develop
-codium 
+codium
 ```
 
-The `nix develop` shell also provides `yarn`. 
+The `nix develop` shell also provides `yarn`.
 
 # Contributing
-See `CONTRIBUTING.md`. 
+
+See `CONTRIBUTING.md`.
diff --git a/package.json b/package.json
index a527e1fa..13655910 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,8 @@
     "packages/*"
   ],
   "resolutions": {
-    "@types/react": "^17.0.43"
+    "@types/react": "^18.0.1",
+    "react": "^18.0.0"
   },
   "packageManager": "yarn@1.22.17"
 }
diff --git a/packages/components/.prettierignore b/packages/components/.prettierignore
deleted file mode 100644
index 009d61a2..00000000
--- a/packages/components/.prettierignore
+++ /dev/null
@@ -1,5 +0,0 @@
-dist
-build
-node_modules
-storybook-static
-.storybook
diff --git a/packages/components/.storybook/main.js b/packages/components/.storybook/main.js
index 7be66cf0..56f372fe 100644
--- a/packages/components/.storybook/main.js
+++ b/packages/components/.storybook/main.js
@@ -1,31 +1,37 @@
 //const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-const custom = require('../webpack.config.js');
+const custom = require("../webpack.config.js");
 
 module.exports = {
-   webpackFinal: async (config) => {
+  webpackFinal: async (config) => {
     config.resolve.alias = custom.resolve.alias;
-    return { ...config, module: { ...config.module, rules: config.module.rules.concat(custom.module.rules.filter(x => x.loader === "ts-loader")) } };
+    return {
+      ...config,
+      module: {
+        ...config.module,
+        rules: config.module.rules.concat(
+          custom.module.rules.filter((x) => x.loader === "ts-loader")
+        ),
+      },
+    };
   },
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app"
+    "@storybook/preset-create-react-app",
   ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "webpack5"
+  framework: "@storybook/react",
+  core: {
+    builder: "webpack5",
   },
   typescript: {
     check: false,
     checkOptions: {},
-    reactDocgen: 'react-docgen-typescript',
+    reactDocgen: "react-docgen-typescript",
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
-      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
     },
   },
-}
+};
diff --git a/packages/components/.storybook/preview.js b/packages/components/.storybook/preview.js
index 786b0e25..f089c7f9 100644
--- a/packages/components/.storybook/preview.js
+++ b/packages/components/.storybook/preview.js
@@ -6,4 +6,4 @@ export const parameters = {
       date: /Date$/,
     },
   },
-}
+};
diff --git a/packages/components/package.json b/packages/components/package.json
index 22bf24a4..aedc8a0a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -15,10 +15,10 @@
     "cross-env": "^7.0.3",
     "lodash": "^4.17.21",
     "react": "^18.0.0",
+    "react-ace": "9.5.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.0",
     "react-vega": "^7.5.0",
-    "react-ace": "9.5.0", 
     "styled-components": "^5.3.5",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.6.3",
@@ -63,9 +63,6 @@
     ]
   },
   "devDependencies": {
-    "@types/styled-components": "^5.1.24",
-    "css-loader": "^6.7.1",
-    "style-loader": "^3.3.1",
     "@babel/plugin-proposal-private-property-in-object": "^7.16.7",
     "@storybook/addon-actions": "^6.4.20",
     "@storybook/addon-essentials": "^6.4.20",
@@ -75,9 +72,13 @@
     "@storybook/node-logger": "^6.4.20",
     "@storybook/preset-create-react-app": "^4.1.0",
     "@storybook/react": "^6.4.20",
+    "@types/styled-components": "^5.1.24",
     "@types/webpack": "^4.41.32",
+    "css-loader": "^6.7.1",
     "prettier": "^2.6.2",
     "react-codejar": "^1.1.2",
+    "speed-measure-webpack-plugin": "^1.5.0",
+    "style-loader": "^3.3.1",
     "ts-loader": "^9.2.8",
     "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx
index 502adc8c..4556329c 100644
--- a/packages/components/src/components/DistributionChart.tsx
+++ b/packages/components/src/components/DistributionChart.tsx
@@ -1,10 +1,8 @@
 import * as React from "react";
 import _ from "lodash";
 import type { Spec } from "vega";
-import type {
-  Distribution,
-} from "@quri/squiggle-lang";
-import { distributionErrorToString } from '@quri/squiggle-lang';
+import type { Distribution } from "@quri/squiggle-lang";
+import { distributionErrorToString } from "@quri/squiggle-lang";
 import { createClassFromSpec } from "react-vega";
 import * as chartSpecification from "../vega-specs/spec-distributions.json";
 
@@ -16,12 +14,14 @@ type DistributionChartProps = {
   distribution: Distribution;
   width: number;
   height: number;
-}
+};
 
-export const DistributionChart: React.FC<DistributionChartProps> = ({ distribution, width, height }: DistributionChartProps) => {
-  console.log("Making shape")
+export const DistributionChart: React.FC<DistributionChartProps> = ({
+  distribution,
+  width,
+  height,
+}: DistributionChartProps) => {
   let shape = distribution.shape();
-  console.log(shape)
   if (shape.tag === "Ok") {
     return (
       <SquiggleVegaChart
@@ -31,8 +31,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({ distributi
         actions={false}
       />
     );
-  }
-  else{
+  } else {
     return <> {distributionErrorToString(shape.value)} </>;
   }
 };
diff --git a/packages/components/src/components/Error.tsx b/packages/components/src/components/ErrorBox.tsx
similarity index 68%
rename from packages/components/src/components/Error.tsx
rename to packages/components/src/components/ErrorBox.tsx
index 4f5236ae..58e46218 100644
--- a/packages/components/src/components/Error.tsx
+++ b/packages/components/src/components/ErrorBox.tsx
@@ -7,10 +7,10 @@ const ShowError = styled.div`
   padding: 0.4em 0.8em;
 `;
 
-export const Error: React.FC<{ heading: string; children: React.ReactNode }> = ({
-  heading = "Error",
-  children,
-}) => {
+export const ErrorBox: React.FC<{
+  heading: string;
+  children: React.ReactNode;
+}> = ({ heading = "Error", children }) => {
   return (
     <ShowError>
       <h3>{heading}</h3>
diff --git a/packages/components/src/components/FunctionChart.tsx b/packages/components/src/components/FunctionChart.tsx
index e93e8bd9..ea00aa9c 100644
--- a/packages/components/src/components/FunctionChart.tsx
+++ b/packages/components/src/components/FunctionChart.tsx
@@ -5,15 +5,13 @@ import type { Distribution, errorValue, result } from "@quri/squiggle-lang";
 import { createClassFromSpec } from "react-vega";
 import * as percentilesSpec from "../vega-specs/spec-percentiles.json";
 import { DistributionChart } from "./DistributionChart";
-import { Error } from "./Error";
+import { ErrorBox } from "./ErrorBox";
 
 let SquigglePercentilesChart = createClassFromSpec({
   spec: percentilesSpec as Spec,
 });
 
-type distPlusFn = (
-  a: number
-) => result<Distribution, errorValue>
+type distPlusFn = (a: number) => result<Distribution, errorValue>;
 
 const _rangeByCount = (start: number, stop: number, count: number) => {
   const step = (stop - start) / (count - 1);
@@ -22,11 +20,26 @@ const _rangeByCount = (start: number, stop: number, count: number) => {
   return result;
 };
 
-function unwrap<a, b>( x: result<a, b>): a {
-  if(x.tag === "Ok"){
-    return x.value
+function unwrap<a, b>(x: result<a, b>): a {
+  if (x.tag === "Ok") {
+    return x.value;
+  } else {
+    throw Error("FAILURE TO UNWRAP");
   }
 }
+
+function mapFilter<a, b>(xs: a[], f: (x: a) => b | undefined): b[] {
+  let initial: b[] = [];
+  return xs.reduce((previous, current) => {
+    let value: b | undefined = f(current);
+    if (value !== undefined) {
+      return previous.concat([value]);
+    } else {
+      return previous;
+    }
+  }, initial);
+}
+
 export const FunctionChart: React.FC<{
   distPlusFn: distPlusFn;
   diagramStart: number;
@@ -44,46 +57,45 @@ export const FunctionChart: React.FC<{
   let mouseItem = distPlusFn(mouseOverlay);
   let showChart =
     mouseItem.tag === "Ok" ? (
-      <DistributionChart distribution={mouseItem.value} width={400} height={140} />
+      <DistributionChart
+        distribution={mouseItem.value}
+        width={400}
+        height={140}
+      />
     ) : (
       <></>
     );
   let data1 = _rangeByCount(diagramStart, diagramStop, diagramCount);
-  let valueData = data1
-    .map((x) => {
-      let result = distPlusFn(x);
-      if (result.tag === "Ok") {
-        return { x: x, value: result.value };
-      } else return null;
-    })
-    .filter((x) => x !== null)
-    .map(({ x, value }) => {
-      return {
-        x: x,
-        p1: unwrap(value.inv(0.01)),
-        p5: unwrap(value.inv(0.05)),
-        p10: unwrap(value.inv(0.12)),
-        p20: unwrap(value.inv(0.20)),
-        p30: unwrap(value.inv(0.30)),
-        p40: unwrap(value.inv(0.40)),
-        p50: unwrap(value.inv(0.50)),
-        p60: unwrap(value.inv(0.60)),
-        p70: unwrap(value.inv(0.70)),
-        p80: unwrap(value.inv(0.80)),
-        p90: unwrap(value.inv(0.90)),
-        p95: unwrap(value.inv(0.95)),
-        p99: unwrap(value.inv(0.99)),
-      };
-    });
+  let valueData = mapFilter(data1, (x) => {
+    let result = distPlusFn(x);
+    if (result.tag === "Ok") {
+      return { x: x, value: result.value };
+    }
+  }).map(({ x, value }) => {
+    return {
+      x: x,
+      p1: unwrap(value.inv(0.01)),
+      p5: unwrap(value.inv(0.05)),
+      p10: unwrap(value.inv(0.12)),
+      p20: unwrap(value.inv(0.2)),
+      p30: unwrap(value.inv(0.3)),
+      p40: unwrap(value.inv(0.4)),
+      p50: unwrap(value.inv(0.5)),
+      p60: unwrap(value.inv(0.6)),
+      p70: unwrap(value.inv(0.7)),
+      p80: unwrap(value.inv(0.8)),
+      p90: unwrap(value.inv(0.9)),
+      p95: unwrap(value.inv(0.95)),
+      p99: unwrap(value.inv(0.99)),
+    };
+  });
 
-  let errorData = data1
-    .map((x) => {
-      let result = distPlusFn(x);
-      if (result.tag === "Error") {
-        return { x: x, error: result.value };
-      } else return null;
-    })
-    .filter((x) => x !== null);
+  let errorData = mapFilter(data1, (x) => {
+    let result = distPlusFn(x);
+    if (result.tag === "Error") {
+      return { x: x, error: result.value };
+    }
+  });
   let error2 = _.groupBy(errorData, (x) => x.error);
   return (
     <>
@@ -94,11 +106,10 @@ export const FunctionChart: React.FC<{
       />
       {showChart}
       {_.keysIn(error2).map((k) => (
-        <Error heading={k}>
+        <ErrorBox heading={k}>
           {`Values: [${error2[k].map((r) => r.x.toFixed(2)).join(",")}]`}
-        </Error>
+        </ErrorBox>
       ))}
     </>
   );
 };
-
diff --git a/packages/components/src/components/NumberShower.tsx b/packages/components/src/components/NumberShower.tsx
index ca9dc943..8d3ddae9 100644
--- a/packages/components/src/components/NumberShower.tsx
+++ b/packages/components/src/components/NumberShower.tsx
@@ -2,97 +2,97 @@ import * as React from "react";
 import _ from "lodash";
 
 const orderOfMagnitudeNum = (n: number) => {
-    return Math.pow(10, n);
+  return Math.pow(10, n);
 };
 
 // 105 -> 3
 const orderOfMagnitude = (n: number) => {
-    return Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
+  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}`;
+  const withPrecision = number.toPrecision(sigFigs);
+  const formatted = Number(withPrecision);
+  return `${formatted}`;
 }
 
 class NumberShowerBuilder {
-    number: number;
-    precision: number;
+  number: number;
+  precision: number;
 
-    constructor(number: number, precision = 2) {
-        this.number = number;
-        this.precision = precision;
+  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) };
     }
 
-    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 };
-        }
+    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();
+  const ns = new NumberShowerBuilder(number, precision);
+  return ns.convert();
 }
 
 export interface NumberShowerProps {
-    number: number;
-    precision?: number
+  number: number;
+  precision?: number;
 }
 
 export let NumberShower: React.FC<NumberShowerProps> = ({
-    number,
-    precision = 2
+  number,
+  precision = 2,
 }: NumberShowerProps) => {
-    let numberWithPresentation = numberShow(number, precision);
-    return (
+  let numberWithPresentation = numberShow(number, precision);
+  return (
+    <span>
+      {numberWithPresentation.value}
+      {numberWithPresentation.symbol}
+      {numberWithPresentation.power ? (
         <span>
-            {numberWithPresentation.value}
-            {numberWithPresentation.symbol}
-            {numberWithPresentation.power ? (
-                <span>
-                    {"\u00b710"}
-                    <span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
-                        {numberWithPresentation.power}
-                    </span>
-                </span>
-            ) : (
-                <></>
-            )}
+          {"\u00b710"}
+          <span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
+            {numberWithPresentation.power}
+          </span>
         </span>
-    );
-}
+      ) : (
+        <></>
+      )}
+    </span>
+  );
+};
diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index ded0a96a..382b3a4e 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -1,13 +1,10 @@
 import * as React from "react";
 import _ from "lodash";
 import { run, errorValueToString } from "@quri/squiggle-lang";
-import type {
-  samplingParams,
-  exportEnv,
-} from "@quri/squiggle-lang";
+import type { samplingParams, exportEnv } from "@quri/squiggle-lang";
 import { NumberShower } from "./NumberShower";
 import { DistributionChart } from "./DistributionChart";
-import { Error } from "./Error";
+import { ErrorBox } from "./ErrorBox";
 
 export interface SquiggleChartProps {
   /** The input string for squiggle */
@@ -37,9 +34,6 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   squiggleString = "",
   sampleCount = 1000,
   outputXYPoints = 1000,
-  diagramStart = 0,
-  diagramStop = 10,
-  diagramCount = 20,
   environment = [],
   onEnvChange = () => {},
   width = 500,
@@ -47,18 +41,16 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
 }: SquiggleChartProps) => {
   let samplingInputs: samplingParams = {
     sampleCount: sampleCount,
-    xyPointLength: outputXYPoints
+    xyPointLength: outputXYPoints,
   };
 
   let result = run(squiggleString, samplingInputs, environment);
-  console.log(result)
   if (result.tag === "Ok") {
     onEnvChange(environment);
     let chartResult = result.value;
     if (chartResult.tag === "number") {
       return <NumberShower precision={3} number={chartResult.value} />;
     } else if (chartResult.tag === "distribution") {
-      console.log("Is a distribution")
       return (
         <DistributionChart
           distribution={chartResult.value}
@@ -66,14 +58,19 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
           width={width}
         />
       );
-      console.log("NOT THIS LINE")
+    } else {
+      return (
+        <ErrorBox heading="No Viewer">
+          {"We don't currently have a viewer for this type: " + chartResult.tag}
+        </ErrorBox>
+      );
     }
-    else {
-      console.log("Is a distribution")
-      return <Error heading="No Viewer">{"We don't currently have a viewer for this type: " + chartResult.tag}</Error>;
-    }
-  } else if (result.tag === "Error") {
+  } else {
     // At this point, we came across an error. What was our error?
-    return <Error heading={"Parse Error"}>{errorValueToString(result.value)}</Error>;
+    return (
+      <ErrorBox heading={"Parse Error"}>
+        {errorValueToString(result.value)}
+      </ErrorBox>
+    );
   }
 };
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index e606937d..f393a2d7 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -3,7 +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'
+import styled from "styled-components";
 
 export interface SquiggleEditorProps {
   /** The input string for squiggle */
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index e6f4d3be..ae38563c 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -36,10 +36,8 @@ interface Props {
   initialSquiggleString?: string;
 }
 
-let SquigglePlayground: FC<Props> = ({initialSquiggleString=""}: Props) => {
-  let [squiggleString, setSquiggleString] = useState(
-    initialSquiggleString
-  );
+let SquigglePlayground: FC<Props> = ({ initialSquiggleString = "" }: Props) => {
+  let [squiggleString, setSquiggleString] = useState(initialSquiggleString);
   let [sampleCount, setSampleCount] = useState(1000);
   let [outputXYPoints, setOutputXYPoints] = useState(1000);
   let [pointDistLength, setPointDistLength] = useState(1000);
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index c16e5ac7..364e6dcb 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,5 +1,8 @@
 export { SquiggleChart } from "./components/SquiggleChart";
-export { SquiggleEditor, renderSquiggleEditorToDom } from "./components/SquiggleEditor";
+export {
+  SquiggleEditor,
+  renderSquiggleEditorToDom,
+} from "./components/SquiggleEditor";
 import SquigglePlayground, {
   renderSquigglePlaygroundToDom,
 } from "./components/SquigglePlayground";
diff --git a/packages/components/src/stories/Introduction.stories.mdx b/packages/components/src/stories/Introduction.stories.mdx
index 525c12bb..0217397c 100644
--- a/packages/components/src/stories/Introduction.stories.mdx
+++ b/packages/components/src/stories/Introduction.stories.mdx
@@ -3,4 +3,4 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Squiggle/Introduction" />
 
 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
+components, and can be used in any application that you see fit.
diff --git a/packages/components/src/stories/NumberShower.stories.mdx b/packages/components/src/stories/NumberShower.stories.mdx
index fd9f39d1..56527106 100644
--- a/packages/components/src/stories/NumberShower.stories.mdx
+++ b/packages/components/src/stories/NumberShower.stories.mdx
@@ -14,10 +14,10 @@ It uses the symbols "K", "M", "B", and "T", to represent thousands, millions, bi
     name="Ten Thousand"
     args={{
       number: 10000,
-      precision: 2
+      precision: 2,
     }}
   >
-    {args => <NumberShower {...args}/>}
+    {(args) => <NumberShower {...args} />}
   </Story>
 </Canvas>
 
@@ -26,10 +26,10 @@ It uses the symbols "K", "M", "B", and "T", to represent thousands, millions, bi
     name="Ten Billion"
     args={{
       number: 10000000000,
-      precision: 2
+      precision: 2,
     }}
   >
-    {args => <NumberShower {...args}/>}
+    {(args) => <NumberShower {...args} />}
   </Story>
 </Canvas>
 
@@ -38,10 +38,10 @@ It uses the symbols "K", "M", "B", and "T", to represent thousands, millions, bi
     name="1.2*10^15"
     args={{
       number: 1200000000000000,
-      precision: 2
+      precision: 2,
     }}
   >
-    {args => <NumberShower {...args}/>}
+    {(args) => <NumberShower {...args} />}
   </Story>
 </Canvas>
 
@@ -50,10 +50,10 @@ It uses the symbols "K", "M", "B", and "T", to represent thousands, millions, bi
     name="1.35*10^-13"
     args={{
       number: 0.000000000000135,
-      precision: 2
+      precision: 2,
     }}
   >
-    {args => <NumberShower {...args}/>}
+    {(args) => <NumberShower {...args} />}
   </Story>
 </Canvas>
 
diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx
index 9c4799e1..cd7c1c2c 100644
--- a/packages/components/src/stories/SquiggleChart.stories.mdx
+++ b/packages/components/src/stories/SquiggleChart.stories.mdx
@@ -50,7 +50,8 @@ could be continuous, discrete or mixed.
   <Story
     name="Mixed"
     args={{
-      squiggleString: "mm(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
+      squiggleString:
+        "mm(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
     }}
   >
     {Template.bind({})}
@@ -75,7 +76,7 @@ to allow large and small numbers being printed cleanly.
 
 ## Functions
 
-Full functions can be returned. These plot out the results of distributions between a set of x-coordinates.  
+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.
 
diff --git a/packages/components/src/vega-specs/spec-distributions.json b/packages/components/src/vega-specs/spec-distributions.json
index c8f340c3..d67c3762 100644
--- a/packages/components/src/vega-specs/spec-distributions.json
+++ b/packages/components/src/vega-specs/spec-distributions.json
@@ -160,7 +160,7 @@
           "shape": {
             "value": "circle"
           },
-          "size": [{"value": 30}],
+          "size": [{ "value": 30 }],
           "tooltip": {
             "signal": "datum.y"
           }
diff --git a/packages/components/src/vega-specs/spec-percentiles.json b/packages/components/src/vega-specs/spec-percentiles.json
index a9fc08d4..d533a866 100644
--- a/packages/components/src/vega-specs/spec-percentiles.json
+++ b/packages/components/src/vega-specs/spec-percentiles.json
@@ -96,11 +96,11 @@
   "signals": [
     {
       "name": "mousemove",
-      "on": [{"events": "mousemove", "update": "invert('xscale', x())"}]
+      "on": [{ "events": "mousemove", "update": "invert('xscale', x())" }]
     },
     {
       "name": "mouseout",
-      "on": [{"events": "mouseout", "update": "invert('xscale', x())"}]
+      "on": [{ "events": "mouseout", "update": "invert('xscale', x())" }]
     }
   ],
   "axes": [
@@ -132,7 +132,7 @@
       "type": "rule",
       "encode": {
         "update": {
-          "xscale": {"scale": "xscale", "signal": "mousemove"}
+          "xscale": { "scale": "xscale", "signal": "mousemove" }
         }
       }
     },
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 5152fc9b..c8d799d5 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -5,10 +5,12 @@
     },
     "module": "commonjs",
     "jsx": "react",
+    "skipLibCheck": true,
     "resolveJsonModule": true,
     "noImplicitAny": false,
     "esModuleInterop": true,
     "removeComments": true,
+    "strict": true,
     "preserveConstEnums": true,
     "composite": true,
     "outDir": "./dist",
@@ -16,7 +18,10 @@
     "declaration": true,
     "sourceMap": true
   },
-  "files": ["src/vega-specs/spec-distributions.json", "src/vega-specs/spec-percentiles.json"],
+  "files": [
+    "src/vega-specs/spec-distributions.json",
+    "src/vega-specs/spec-percentiles.json"
+  ],
   "target": "ES6",
   "include": ["src/**/*", "src/*"],
   "exclude": ["node_modules", "**/*.spec.ts", "webpack.config.js"],
diff --git a/packages/components/webpack.config.js b/packages/components/webpack.config.js
index 6da80035..16365e4a 100644
--- a/packages/components/webpack.config.js
+++ b/packages/components/webpack.config.js
@@ -3,13 +3,15 @@ const path = require("path");
 module.exports = {
   mode: "production",
   devtool: "source-map",
+  profile: true,
   entry: "./src/index.ts",
   module: {
     rules: [
       {
         test: /\.tsx?$/,
         loader: "ts-loader",
-        options: { projectReferences: true },
+        include: path.resolve(__dirname, "src"),
+        options: { projectReferences: true, transpileOnly: true },
         exclude: /node_modules/,
       },
       {
diff --git a/packages/squiggle-lang/.prettierignore b/packages/squiggle-lang/.prettierignore
deleted file mode 100644
index 07e4ebf8..00000000
--- a/packages/squiggle-lang/.prettierignore
+++ /dev/null
@@ -1,3 +0,0 @@
-*.bs.js
-*.gen.tsx
-dist
diff --git a/packages/squiggle-lang/__tests__/JS__Test.ts b/packages/squiggle-lang/__tests__/JS__Test.ts
index be276a93..e85bc1fc 100644
--- a/packages/squiggle-lang/__tests__/JS__Test.ts
+++ b/packages/squiggle-lang/__tests__/JS__Test.ts
@@ -1,10 +1,15 @@
-import { run, Distribution, resultMap, squiggleExpression } from "../src/js/index";
+import {
+  run,
+  Distribution,
+  resultMap,
+  squiggleExpression,
+} from "../src/js/index";
 
 let testRun = (x: string): squiggleExpression => {
-  let result = run(x, {sampleCount: 100, xyPointLength: 100});
-  expect(result.tag).toEqual("Ok")
-  if(result.tag === "Ok") {
-    return result.value
+  let result = run(x, { sampleCount: 100, xyPointLength: 100 });
+  expect(result.tag).toEqual("Ok");
+  if (result.tag === "Ok") {
+    return result.value;
   }
 };
 
@@ -16,7 +21,7 @@ describe("Simple calculations and results", () => {
   test("mean(normal(5,2))", () => {
     expect(testRun("mean(normal(5,2))")).toEqual({
       tag: "number",
-      value: 5
+      value: 5,
     });
   });
   test("10+10", () => {
diff --git a/packages/squiggle-lang/src/js/index.ts b/packages/squiggle-lang/src/js/index.ts
index 2d331c6e..201ec29b 100644
--- a/packages/squiggle-lang/src/js/index.ts
+++ b/packages/squiggle-lang/src/js/index.ts
@@ -1,11 +1,26 @@
-import * as _ from 'lodash'
+import * as _ from "lodash";
 import type {
   exportEnv,
   exportDistribution,
 } from "../rescript/ProgramEvaluator.gen";
-export type {  exportEnv, exportDistribution };
-import { genericDist, samplingParams, evaluate, expressionValue, errorValue, distributionError, toPointSet, continuousShape, discreteShape, distributionErrorToString } from "../rescript/TypescriptInterface.gen";
-export { makeSampleSetDist, errorValueToString, distributionErrorToString } from "../rescript/TypescriptInterface.gen";
+export type { exportEnv, exportDistribution };
+import {
+  genericDist,
+  samplingParams,
+  evaluate,
+  expressionValue,
+  errorValue,
+  distributionError,
+  toPointSet,
+  continuousShape,
+  discreteShape,
+  distributionErrorToString,
+} from "../rescript/TypescriptInterface.gen";
+export {
+  makeSampleSetDist,
+  errorValueToString,
+  distributionErrorToString,
+} from "../rescript/TypescriptInterface.gen";
 import {
   Constructors_mean,
   Constructors_sample,
@@ -32,11 +47,11 @@ import {
   Constructors_pointwiseLogarithm,
   Constructors_pointwisePower,
 } from "../rescript/Distributions/DistributionOperation/DistributionOperation.gen";
-export type {samplingParams, errorValue}
+export type { samplingParams, errorValue };
 
 export let defaultSamplingInputs: samplingParams = {
   sampleCount: 10000,
-  xyPointLength: 10000
+  xyPointLength: 10000,
 };
 
 export type result<a, b> =
@@ -60,17 +75,24 @@ export function resultMap<a, b, c>(
   }
 }
 
-function Ok<a,b>(x: a): result<a,b> {
-  return {"tag": "Ok", value: x}
+function Ok<a, b>(x: a): result<a, b> {
+  return { tag: "Ok", value: x };
 }
 
-type tagged<a, b> = {tag: a, value: b}
+type tagged<a, b> = { tag: a; value: b };
 
-function tag<a,b>(x: a, y: b) : tagged<a, b>{
-  return { tag: x, value: y}
+function tag<a, b>(x: a, y: b): tagged<a, b> {
+  return { tag: x, value: y };
 }
 
-export type squiggleExpression = tagged<"symbol", string> | tagged<"string", string> | tagged<"array", squiggleExpression[]> | tagged<"boolean", boolean> | tagged<"distribution", Distribution> | tagged<"number", number> | tagged<"record", {[key: string]: squiggleExpression }>
+export type squiggleExpression =
+  | tagged<"symbol", string>
+  | tagged<"string", string>
+  | tagged<"array", squiggleExpression[]>
+  | tagged<"boolean", boolean>
+  | tagged<"distribution", Distribution>
+  | tagged<"number", number>
+  | tagged<"record", { [key: string]: squiggleExpression }>;
 export function run(
   squiggleString: string,
   samplingInputs?: samplingParams,
@@ -79,15 +101,20 @@ export function run(
   let si: samplingParams = samplingInputs
     ? samplingInputs
     : defaultSamplingInputs;
-  let result : result<expressionValue, errorValue> = evaluate(squiggleString);
-  return resultMap(result, x => createTsExport(x, si));
+  let result: result<expressionValue, errorValue> = evaluate(squiggleString);
+  return resultMap(result, (x) => createTsExport(x, si));
 }
 
-
-function createTsExport(x: expressionValue, sampEnv: samplingParams): squiggleExpression {
+function createTsExport(
+  x: expressionValue,
+  sampEnv: samplingParams
+): squiggleExpression {
   switch (x.tag) {
     case "EvArray":
-      return tag("array", x.value.map(x => createTsExport(x, sampEnv)));
+      return tag(
+        "array",
+        x.value.map((x) => createTsExport(x, sampEnv))
+      );
     case "EvBool":
       return tag("boolean", x.value);
     case "EvDistribution":
@@ -95,26 +122,32 @@ function createTsExport(x: expressionValue, sampEnv: samplingParams): squiggleEx
     case "EvNumber":
       return tag("number", x.value);
     case "EvRecord":
-      return tag("record", _.mapValues(x.value, x => createTsExport(x, sampEnv)))
+      return tag(
+        "record",
+        _.mapValues(x.value, (x) => createTsExport(x, sampEnv))
+      );
+    case "EvString":
+      return tag("string", x.value);
+    case "EvSymbol":
+      return tag("symbol", x.value);
   }
 }
 
-
 export function resultExn<a, c>(r: result<a, c>): a | c {
   return r.value;
 }
 
-export type point = { x: number, y: number}
+export type point = { x: number; y: number };
 
 export type shape = {
-  continuous: point[]
-  discrete: point[]
-}
+  continuous: point[];
+  discrete: point[];
+};
 
-function shapePoints(x : continuousShape | discreteShape): point[]{
+function shapePoints(x: continuousShape | discreteShape): point[] {
   let xs = x.xyShape.xs;
   let ys = x.xyShape.ys;
-  return _.zipWith(xs, ys, (x, y) => ({x, y}))
+  return _.zipWith(xs, ys, (x, y) => ({ x, y }));
 }
 
 export class Distribution {
@@ -127,7 +160,9 @@ export class Distribution {
     return this;
   }
 
-  mapResultDist(r: result<genericDist, distributionError>): result<Distribution, distributionError> {
+  mapResultDist(
+    r: result<genericDist, distributionError>
+  ): result<Distribution, distributionError> {
     return resultMap(r, (v: genericDist) => new Distribution(v, this.env));
   }
 
@@ -157,31 +192,35 @@ export class Distribution {
     );
   }
 
-  shape() : result<shape, distributionError> {
-    let pointSet = toPointSet(this.t, {xyPointLength: this.env.xyPointLength, sampleCount: this.env.sampleCount}, null);
-    if(pointSet.tag === "Ok"){
+  shape(): result<shape, distributionError> {
+    let pointSet = toPointSet(
+      this.t,
+      {
+        xyPointLength: this.env.xyPointLength,
+        sampleCount: this.env.sampleCount,
+      },
+      undefined
+    );
+    if (pointSet.tag === "Ok") {
       let distribution = pointSet.value;
-      if(distribution.tag === "Continuous"){
+      if (distribution.tag === "Continuous") {
         return Ok({
           continuous: shapePoints(distribution.value),
-          discrete: []
-        })
-      }
-      else if(distribution.tag === "Discrete"){
+          discrete: [],
+        });
+      } else if (distribution.tag === "Discrete") {
         return Ok({
           discrete: shapePoints(distribution.value),
-          continuous: []
-        })
-      }
-      else if(distribution.tag === "Mixed"){
+          continuous: [],
+        });
+      } else {
         return Ok({
           discrete: shapePoints(distribution.value.discrete),
-          continuous: shapePoints(distribution.value.continuous)
-        })
+          continuous: shapePoints(distribution.value.continuous),
+        });
       }
-    }
-    else {
-      return pointSet
+    } else {
+      return pointSet;
     }
   }
 
@@ -197,7 +236,10 @@ export class Distribution {
     );
   }
 
-  truncate(left: number, right: number): result<Distribution, distributionError> {
+  truncate(
+    left: number,
+    right: number
+  ): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_truncate({ env: this.env }, this.t, left, right)
     );
@@ -209,11 +251,10 @@ export class Distribution {
 
   toString(): string {
     let result = Constructors_toString({ env: this.env }, this.t);
-    if(result.tag  === "Ok"){
-      return result.value
-    }
-    else {
-      return distributionErrorToString(result.value)
+    if (result.tag === "Ok") {
+      return result.value;
+    } else {
+      return distributionErrorToString(result.value);
     }
   }
 
@@ -245,7 +286,9 @@ export class Distribution {
     );
   }
 
-  algebraicLogarithm(d2: Distribution): result<Distribution, distributionError> {
+  algebraicLogarithm(
+    d2: Distribution
+  ): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_algebraicLogarithm({ env: this.env }, this.t, d2.t)
     );
@@ -281,7 +324,9 @@ export class Distribution {
     );
   }
 
-  pointwiseLogarithm(d2: Distribution): result<Distribution, distributionError> {
+  pointwiseLogarithm(
+    d2: Distribution
+  ): result<Distribution, distributionError> {
     return this.mapResultDist(
       Constructors_pointwiseLogarithm({ env: this.env }, this.t, d2.t)
     );
diff --git a/packages/squiggle-lang/src/rescript/shims/Js.shim.ts b/packages/squiggle-lang/src/rescript/shims/Js.shim.ts
index c4f41786..76f971a3 100644
--- a/packages/squiggle-lang/src/rescript/shims/Js.shim.ts
+++ b/packages/squiggle-lang/src/rescript/shims/Js.shim.ts
@@ -1 +1 @@
-export type Dict_t<T> = { [key: string]: T }
+export type Dict_t<T> = { [key: string]: T };
diff --git a/packages/squiggle-lang/tsconfig.json b/packages/squiggle-lang/tsconfig.json
index 2f41e5e1..7a610d10 100644
--- a/packages/squiggle-lang/tsconfig.json
+++ b/packages/squiggle-lang/tsconfig.json
@@ -7,6 +7,7 @@
     "removeComments": true,
     "preserveConstEnums": true,
     "sourceMap": true,
+    "strict": true,
     "outDir": "./dist",
     "declarationDir": "./dist",
     "declaration": true,
diff --git a/packages/website/.prettierignore b/packages/website/.prettierignore
deleted file mode 100644
index b52c4a85..00000000
--- a/packages/website/.prettierignore
+++ /dev/null
@@ -1 +0,0 @@
-.docusaurus
diff --git a/yarn.lock b/yarn.lock
index 007e0c31..bd8996a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4025,28 +4025,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
-  version "17.0.44"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
-  integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^16.9.19":
-  version "16.14.24"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.24.tgz#f2c5e9fa78f83f769884b83defcf7924b9eb5c82"
-  integrity sha512-e7U2WC8XQP/xfR7bwhOhNFZKPTfW1ph+MiqtudKb8tSV8RyCsovQx2sNVtKoOryjxFKpHPPC/yNiGfdeVM5Gyw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@^18.0.1":
-  version "18.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.1.tgz#1b2e02fb7613212518733946e49fb963dfc66e19"
-  integrity sha512-VnWlrVgG0dYt+NqlfMI0yUYb8Rdl4XUROyH+c6gq/iFCiZ805Vi//26UW38DHnxQkbDhnrIWTBiy6oKZqL11cw==
+"@types/react@*", "@types/react@17.0.43", "@types/react@^16.9.19", "@types/react@^18.0.1":
+  version "17.0.43"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
+  integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -15495,6 +15477,13 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+speed-measure-webpack-plugin@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/speed-measure-webpack-plugin/-/speed-measure-webpack-plugin-1.5.0.tgz#caf2c5bee24ab66c1c7c30e8daa7910497f7681a"
+  integrity sha512-Re0wX5CtM6gW7bZA64ONOfEPEhwbiSF/vz6e2GvadjuaPrQcHTQdRGsD8+BE7iUOysXH8tIenkPCQBEcspXsNg==
+  dependencies:
+    chalk "^4.1.0"
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"

From 21458227ced6e49154fbe3f6e4e085dbb58a3708 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Tue, 12 Apr 2022 16:02:34 +1000
Subject: [PATCH 6/7] Respond to reducer playground PR comments

---
 .../src/components/DistributionChart.tsx       |  9 +++++++--
 .../src/components/SquiggleChart.tsx           | 18 +++++++++---------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/components/DistributionChart.tsx b/packages/components/src/components/DistributionChart.tsx
index 4556329c..6111476c 100644
--- a/packages/components/src/components/DistributionChart.tsx
+++ b/packages/components/src/components/DistributionChart.tsx
@@ -5,6 +5,7 @@ import type { Distribution } from "@quri/squiggle-lang";
 import { distributionErrorToString } from "@quri/squiggle-lang";
 import { createClassFromSpec } from "react-vega";
 import * as chartSpecification from "../vega-specs/spec-distributions.json";
+import { ErrorBox } from "./ErrorBox";
 
 let SquiggleVegaChart = createClassFromSpec({
   spec: chartSpecification as Spec,
@@ -21,7 +22,7 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
   width,
   height,
 }: DistributionChartProps) => {
-  let shape = distribution.shape();
+  let shape = distribution.pointSet();
   if (shape.tag === "Ok") {
     return (
       <SquiggleVegaChart
@@ -32,6 +33,10 @@ export const DistributionChart: React.FC<DistributionChartProps> = ({
       />
     );
   } else {
-    return <> {distributionErrorToString(shape.value)} </>;
+    return (
+      <ErrorBox heading="Distribution Error">
+        {distributionErrorToString(shape.value)}
+      </ErrorBox>
+    );
   }
 };
diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index 382b3a4e..b8be8c7f 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -44,16 +44,16 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     xyPointLength: outputXYPoints,
   };
 
-  let result = run(squiggleString, samplingInputs, environment);
-  if (result.tag === "Ok") {
+  let expressionResult = run(squiggleString, samplingInputs, environment);
+  if (expressionResult.tag === "Ok") {
     onEnvChange(environment);
-    let chartResult = result.value;
-    if (chartResult.tag === "number") {
-      return <NumberShower precision={3} number={chartResult.value} />;
-    } else if (chartResult.tag === "distribution") {
+    let expression = expressionResult.value;
+    if (expression.tag === "number") {
+      return <NumberShower precision={3} number={expression.value} />;
+    } else if (expression.tag === "distribution") {
       return (
         <DistributionChart
-          distribution={chartResult.value}
+          distribution={expression.value}
           height={height}
           width={width}
         />
@@ -61,7 +61,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     } else {
       return (
         <ErrorBox heading="No Viewer">
-          {"We don't currently have a viewer for this type: " + chartResult.tag}
+          {"We don't currently have a viewer for this type: " + expression.tag}
         </ErrorBox>
       );
     }
@@ -69,7 +69,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     // At this point, we came across an error. What was our error?
     return (
       <ErrorBox heading={"Parse Error"}>
-        {errorValueToString(result.value)}
+        {errorValueToString(expressionResult.value)}
       </ErrorBox>
     );
   }

From e5f8b6c7d3218d1f24af3770f8b7a4abdbb919f3 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Tue, 12 Apr 2022 16:21:32 +1000
Subject: [PATCH 7/7] Fix build errors for components and lang

---
 packages/components/package.json             | 2 +-
 packages/components/webpack.config.js        | 1 -
 packages/squiggle-lang/__tests__/JS__Test.ts | 6 ++++++
 packages/squiggle-lang/src/js/index.ts       | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index aedc8a0a..717694f3 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -31,7 +31,7 @@
   "scripts": {
     "start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
     "build": "tsc -b && build-storybook -s public",
-    "bundle": "webpack",
+    "bundle": "tsc -b && webpack",
     "all": "yarn bundle && yarn build"
   },
   "eslintConfig": {
diff --git a/packages/components/webpack.config.js b/packages/components/webpack.config.js
index 16365e4a..d0c93be0 100644
--- a/packages/components/webpack.config.js
+++ b/packages/components/webpack.config.js
@@ -10,7 +10,6 @@ module.exports = {
       {
         test: /\.tsx?$/,
         loader: "ts-loader",
-        include: path.resolve(__dirname, "src"),
         options: { projectReferences: true, transpileOnly: true },
         exclude: /node_modules/,
       },
diff --git a/packages/squiggle-lang/__tests__/JS__Test.ts b/packages/squiggle-lang/__tests__/JS__Test.ts
index e85bc1fc..72f68ba4 100644
--- a/packages/squiggle-lang/__tests__/JS__Test.ts
+++ b/packages/squiggle-lang/__tests__/JS__Test.ts
@@ -3,6 +3,7 @@ import {
   Distribution,
   resultMap,
   squiggleExpression,
+  errorValueToString,
 } from "../src/js/index";
 
 let testRun = (x: string): squiggleExpression => {
@@ -10,6 +11,11 @@ let testRun = (x: string): squiggleExpression => {
   expect(result.tag).toEqual("Ok");
   if (result.tag === "Ok") {
     return result.value;
+  } else {
+    throw Error(
+      "Expected squiggle expression to evaluate but got error: " +
+        errorValueToString(result.value)
+    );
   }
 };
 
diff --git a/packages/squiggle-lang/src/js/index.ts b/packages/squiggle-lang/src/js/index.ts
index 201ec29b..8455c601 100644
--- a/packages/squiggle-lang/src/js/index.ts
+++ b/packages/squiggle-lang/src/js/index.ts
@@ -192,7 +192,7 @@ export class Distribution {
     );
   }
 
-  shape(): result<shape, distributionError> {
+  pointSet(): result<shape, distributionError> {
     let pointSet = toPointSet(
       this.t,
       {