Merge pull request #53 from QURIresearch/notebook

Add squiggle notebooks

packages/components/.prettierignore

@@ -0,0 +1,5 @@
+dist
+build
+node_modules
+storybook-static
+.storybook

packages/components/.prettierrc.json

@@ -0,0 +1 @@
+{}

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quri/squiggle-components",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "dependencies": {
     "@quri/squiggle-lang": "0.2.2",
     "@testing-library/jest-dom": "^5.16.2",
@@ -69,10 +69,12 @@
     "@storybook/preset-create-react-app": "^4.0.0",
     "@storybook/react": "^6.4.18",
     "@types/webpack": "^5.28.0",
+    "prettier": "^2.6.0",
     "react-codejar": "^1.1.2",
     "ts-loader": "^9.2.8",
     "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2"
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
   },
   "resolutions": {
     "@types/react": "17.0.39"

packages/components/public/index.html

@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
+    <meta name="description" content="Squiggle components" />
-      name="description"
-      content="Squiggle components"
-    />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <title>Squiggle Components</title>
   </head>

packages/components/src/SquiggleChart.tsx

@@ -1,86 +1,96 @@
-import * as React  from 'react';
+import * as React from "react";
-import * as _ from 'lodash';
+import _ from "lodash";
-import type { Spec } from 'vega';
+import type { Spec } from "vega";
-import { run } from '@squiggle/lang';
+import { run } from "@quri/squiggle-lang";
-import type { DistPlus, SamplingInputs } from '@squiggle/lang';
+import type {
-import { createClassFromSpec } from 'react-vega';
+  DistPlus,
-import * as chartSpecification from './spec-distributions.json'
+  SamplingInputs,
-import * as percentilesSpec from './spec-pertentiles.json'
+  exportEnv,
+  exportDistribution,
+} from "@quri/squiggle-lang";
+import { createClassFromSpec } from "react-vega";
+import * as chartSpecification from "./spec-distributions.json";
+import * as percentilesSpec from "./spec-pertentiles.json";
 
-let SquiggleVegaChart = createClassFromSpec({'spec': chartSpecification as Spec});
+let SquiggleVegaChart = createClassFromSpec({
+  spec: chartSpecification as Spec,
+});
 
-let SquigglePercentilesChart = createClassFromSpec({'spec': percentilesSpec as Spec});
+let SquigglePercentilesChart = createClassFromSpec({
+  spec: percentilesSpec as Spec,
+});
 
 export interface SquiggleChartProps {
   /** The input string for squiggle */
-  squiggleString : string,
+  squiggleString: string;
 
   /** If the output requires monte carlo sampling, the amount of samples */
-  sampleCount? : number,
+  sampleCount?: number;
   /** The amount of points returned to draw the distribution */
-  outputXYPoints? : number,
+  outputXYPoints?: number;
-  kernelWidth? : number,
+  kernelWidth?: number;
-  pointDistLength? : number,
+  pointDistLength?: number;
   /** If the result is a function, where the function starts */
-  diagramStart? : number,
+  diagramStart?: number;
   /** If the result is a function, where the function ends */
-  diagramStop? : number,
+  diagramStop?: number;
   /** If the result is a function, how many points along the function it samples */
-  diagramCount? : number
+  diagramCount?: number;
+  /** variables declared before this expression */
+  environment?: exportEnv;
+  /** When the environment changes */
+  onEnvChange?(env: exportEnv): void;
 }
 
-export const SquiggleChart : React.FC<SquiggleChartProps> = props => {
+export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
   let samplingInputs: SamplingInputs = {
     sampleCount: props.sampleCount,
     outputXYPoints: props.outputXYPoints,
     kernelWidth: props.kernelWidth,
-    pointDistLength : props.pointDistLength
+    pointDistLength: props.pointDistLength,
-  }
+  };
 
-
+  let result = run(props.squiggleString, samplingInputs, props.environment);
-  let result = run(props.squiggleString, samplingInputs);
-  console.log(result)
   if (result.tag === "Ok") {
-    let chartResults = result.value.map(chartResult => {
+    let environment = result.value.environment;
-      console.log(chartResult)
+    let exports = result.value.exports;
+    if (props.onEnvChange) props.onEnvChange(environment);
+    let chartResults = exports.map((chartResult: exportDistribution) => {
       if (chartResult["NAME"] === "Float") {
         return <MakeNumberShower precision={3} number={chartResult["VAL"]} />;
-      }
+      } else if (chartResult["NAME"] === "DistPlus") {
-      else if(chartResult["NAME"] === "DistPlus"){
         let shape = chartResult.VAL.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 => {
+          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}));
+          let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y]) => ({
+            cdf: (c * 100).toFixed(2) + "%",
+            x: x,
+            y: y,
+          }));
 
-          return (
+          return <SquiggleVegaChart data={{ con: values }} />;
-            <SquiggleVegaChart 
+        } else if (shape.tag === "Discrete") {
-              data={{"con": values}}
-              />
-          );
-        }
-        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 => {
+          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}));
+          let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y]) => ({
+            cdf: (c * 100).toFixed(2) + "%",
+            x: x,
+            y: y,
+          }));
 
-          return (
+          return <SquiggleVegaChart data={{ dis: values }} />;
-            <SquiggleVegaChart 
+        } else if (shape.tag === "Mixed") {
-              data={{"dis": values}}
-              />
-          );
-        }
-        else if(shape.tag === "Mixed"){
           let discreteShape = shape.value.discrete.xyShape;
           let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
 
@@ -89,141 +99,150 @@ export const SquiggleChart : React.FC<SquiggleChartProps> = props => {
           let continuousPoints = _.zip(continuousShape.xs, continuousShape.ys);
 
           interface labeledPoint {
-            x: number,
+            x: number;
-            y: number,
+            y: number;
-            type: "discrete" | "continuous"
+            type: "discrete" | "continuous";
-          };
+          }
 
-          let markedDisPoints : labeledPoint[] = discretePoints.map(([x,y]) => ({x: x, y: y, type: "discrete"}))
+          let markedDisPoints: labeledPoint[] = discretePoints.map(
-          let markedConPoints : labeledPoint[] = continuousPoints.map(([x,y]) => ({x: x, y: y, type: "continuous"}))
+            ([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 sortedPoints = _.sortBy(
+            markedDisPoints.concat(markedConPoints),
+            "x"
+          );
 
           let totalContinuous = 1 - totalDiscrete;
-          let totalY = continuousShape.ys.reduce((a:number, b:number) => a + b);
+          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") {
-            else if (point.type == "continuous") {
+              total += (point.y / totalY) * totalContinuous;
-              total += point.y / totalY * totalContinuous;
               return total;
             }
           });
 
           interface cdfLabeledPoint {
-            cdf: string,
+            cdf: string;
-            x: number,
+            x: number;
-            y: number,
+            y: number;
-            type: "discrete" | "continuous"
+            type: "discrete" | "continuous";
           }
-          let cdfLabeledPoint : cdfLabeledPoint[] = _.zipWith(cdf, sortedPoints, (c: number, point: labeledPoint) => ({...point, cdf: (c * 100).toFixed(2) + "%"}))
+          let cdfLabeledPoint: cdfLabeledPoint[] = _.zipWith(
-          let continuousValues = cdfLabeledPoint.filter(x => x.type == "continuous")
+            cdf,
-          let discreteValues = cdfLabeledPoint.filter(x => x.type == "discrete")
+            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}}
+              data={{ con: continuousValues, dis: discreteValues }}
             />
           );
         }
-      }
+      } else if (chartResult.NAME === "Function") {
-      else if(chartResult.NAME === "Function"){
         // We are looking at a function. In this case, we draw a Percentiles chart
-          let start = props.diagramStart ? props.diagramStart : 0
+        let start = props.diagramStart ? props.diagramStart : 0;
-          let stop = props.diagramStop ? props.diagramStop : 10
+        let stop = props.diagramStop ? props.diagramStop : 10;
-          let count = props.diagramCount ? props.diagramCount : 0.1
+        let count = props.diagramCount ? props.diagramCount : 0.1;
-          let step = (stop - start)/ count
+        let step = (stop - start) / count;
-          let data = _.range(start, stop, step).map(x => {
+        let data = _.range(start, stop, step).map((x) => {
           if (chartResult.NAME == "Function") {
             let result = chartResult.VAL(x);
             if (result.tag == "Ok") {
               let percentileArray = [
-                  0.01,
+                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.05,
+                0.99,
-                  0.1,
+              ];
-                  0.2,
-                  0.3,
-                  0.4,
-                  0.5,
-                  0.6,
-                  0.7,
-                  0.8,
-                  0.9,
-                  0.95,
-                  0.99
-                ]
 
               let percentiles = getPercentiles(percentileArray, result.value);
               return {
-                  "x": x,
+                x: x,
-                  "p1": percentiles[0],
+                p1: percentiles[0],
-                  "p5": percentiles[1],
+                p5: percentiles[1],
-                  "p10": percentiles[2],
+                p10: percentiles[2],
-                  "p20": percentiles[3],
+                p20: percentiles[3],
-                  "p30": percentiles[4],
+                p30: percentiles[4],
-                  "p40": percentiles[5],
+                p40: percentiles[5],
-                  "p50": percentiles[6],
+                p50: percentiles[6],
-                  "p60": percentiles[7],
+                p60: percentiles[7],
-                  "p70": percentiles[8],
+                p70: percentiles[8],
-                  "p80": percentiles[9],
+                p80: percentiles[9],
-                  "p90": percentiles[10],
+                p90: percentiles[10],
-                  "p95": percentiles[11],
+                p95: percentiles[11],
-                  "p99": percentiles[12]
+                p99: percentiles[12],
+              };
             }
-
-                }
-
           }
           return 0;
-          })
+        });
-          return <SquigglePercentilesChart data={{"facet": data}} />
+        return <SquigglePercentilesChart data={{ facet: data }} />;
       }
-      })
+    });
     return <>{chartResults}</>;
-  }
+  } else if (result.tag == "Error") {
-  else if(result.tag == "Error") {
     // At this point, we came across an error. What was our error?
-    return (<p>{"Error parsing Squiggle: " + result.value}</p>)
+    return <p>{"Error parsing Squiggle: " + result.value}</p>;
-
   }
-  return (<p>{"Invalid Response"}</p>)
+  return <p>{"Invalid Response"}</p>;
 };
 
 function getPercentiles(percentiles: number[], t: DistPlus) {
   if (t.pointSetDist.tag == "Discrete") {
     let total = 0;
-    let maxX = _.max(t.pointSetDist.value.xyShape.xs)
+    let maxX = _.max(t.pointSetDist.value.xyShape.xs);
-    let bounds = percentiles.map(_ => maxX);
+    let bounds = percentiles.map((_) => maxX);
-     _.zipWith(t.pointSetDist.value.xyShape.xs,t.pointSetDist.value.xyShape.ys, (x,y) => {
+    _.zipWith(
-        total += y
+      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
+            bounds[i] = x;
           }
-        })
         });
-     return bounds;
       }
-  else if(t.pointSetDist.tag == "Continuous"){
+    );
+    return bounds;
+  } else if (t.pointSetDist.tag == "Continuous") {
     let total = 0;
-    let maxX = _.max(t.pointSetDist.value.xyShape.xs)
+    let maxX = _.max(t.pointSetDist.value.xyShape.xs);
-    let totalY = _.sum(t.pointSetDist.value.xyShape.ys)
+    let totalY = _.sum(t.pointSetDist.value.xyShape.ys);
-    let bounds = percentiles.map(_ => maxX);
+    let bounds = percentiles.map((_) => maxX);
-     _.zipWith(t.pointSetDist.value.xyShape.xs,t.pointSetDist.value.xyShape.ys, (x,y) => {
+    _.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
+            bounds[i] = x;
           }
-        })
         });
-     return bounds;
       }
-  else if(t.pointSetDist.tag == "Mixed"){
+    );
+    return bounds;
+  } else if (t.pointSetDist.tag == "Mixed") {
     let discreteShape = t.pointSetDist.value.discrete.xyShape;
     let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
 
@@ -232,58 +251,65 @@ function getPercentiles(percentiles:number[], t : DistPlus) {
     let continuousPoints = _.zip(continuousShape.xs, continuousShape.ys);
 
     interface labeledPoint {
-      x: number,
+      x: number;
-      y: number,
+      y: number;
-      type: "discrete" | "continuous"
+      type: "discrete" | "continuous";
-    };
+    }
 
-    let markedDisPoints : labeledPoint[] = discretePoints.map(([x,y]) => ({x: x, y: y, type: "discrete"}))
+    let markedDisPoints: labeledPoint[] = discretePoints.map(([x, y]) => ({
-    let markedConPoints : labeledPoint[] = continuousPoints.map(([x,y]) => ({x: x, y: y, type: "continuous"}))
+      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 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 maxX = _.max(sortedPoints.map((x) => x.x));
-    let bounds = percentiles.map(_ => maxX);
+    let bounds = percentiles.map((_) => maxX);
     sortedPoints.map((point: labeledPoint) => {
       if (point.type == "discrete") {
         total += point.y;
-      }
+      } else if (point.type == "continuous") {
-      else if (point.type == "continuous") {
+        total += (point.y / totalY) * totalContinuous;
-        total += point.y / totalY * totalContinuous;
       }
       percentiles.forEach((v, i) => {
         if (total > v && bounds[i] == maxX) {
           bounds[i] = total;
         }
-      })
+      });
       return total;
     });
     return bounds;
   }
 }
 
-function MakeNumberShower(props: {number: number, precision :number}){
+function MakeNumberShower(props: { number: number; precision: number }) {
   let numberWithPresentation = numberShow(props.number, props.precision);
   return (
     <span>
       {numberWithPresentation.value}
       {numberWithPresentation.symbol}
-      {numberWithPresentation.power ? 
+      {numberWithPresentation.power ? (
         <span>
-        {'\u00b710'}
+          {"\u00b710"}
           <span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
             {numberWithPresentation.power}
           </span>
         </span>
-      : <></>}
+      ) : (
+        <></>
+      )}
     </span>
-
   );
-
 }
 
 const orderOfMagnitudeNum = (n: number) => {
@@ -302,8 +328,8 @@ function withXSigFigs(number:number, sigFigs:number) {
 }
 
 class NumberShower {
-  number: number
+  number: number;
-  precision: number
+  precision: number;
 
   constructor(number: number, precision = 2) {
     this.number = number;
@@ -314,9 +340,9 @@ class NumberShower {
     const number = Math.abs(this.number);
     const response = this.evaluate(number);
     if (this.number < 0) {
-      response.value = '-' + response.value;
+      response.value = "-" + response.value;
     }
-    return response
+    return response;
   }
 
   metricSystem(number: number, order: number) {
@@ -327,7 +353,7 @@ class NumberShower {
 
   evaluate(number: number) {
     if (number === 0) {
-      return { value: this.metricSystem(0, 0) }
+      return { value: this.metricSystem(0, 0) };
     }
 
     const order = orderOfMagnitude(number);
@@ -336,13 +362,13 @@ class NumberShower {
     } else if (order < 4) {
       return { value: this.metricSystem(number, 0) };
     } else if (order < 6) {
-      return { value: this.metricSystem(number, 3), symbol: 'K' };
+      return { value: this.metricSystem(number, 3), symbol: "K" };
     } else if (order < 9) {
-      return { value: this.metricSystem(number, 6), symbol: 'M' };
+      return { value: this.metricSystem(number, 6), symbol: "M" };
     } else if (order < 12) {
-      return { value: this.metricSystem(number, 9), symbol: 'B' };
+      return { value: this.metricSystem(number, 9), symbol: "B" };
     } else if (order < 15) {
-      return { value: this.metricSystem(number, 12), symbol: 'T' };
+      return { value: this.metricSystem(number, 12), symbol: "T" };
     } else {
       return { value: this.metricSystem(number, order), power: order };
     }

packages/components/src/SquiggleEditor.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { SquiggleChart } from "./SquiggleChart";
+import { ReactCodeJar } from "react-codejar";
+import type { exportEnv } from "@quri/squiggle-lang";
+
+export interface SquiggleEditorProps {
+  /** The input string for squiggle */
+  initialSquiggleString?: string;
+  /** If the output requires monte carlo sampling, the amount of samples */
+  sampleCount?: number;
+  /** The amount of points returned to draw the distribution */
+  outputXYPoints?: number;
+  kernelWidth?: number;
+  pointDistLength?: number;
+  /** If the result is a function, where the function starts */
+  diagramStart?: number;
+  /** If the result is a function, where the function ends */
+  diagramStop?: number;
+  /** If the result is a function, how many points along the function it samples */
+  diagramCount?: number;
+  /** The environment, other variables that were already declared */
+  environment?: exportEnv;
+  /** when the environment changes. Used again for notebook magic*/
+  onEnvChange?(env: exportEnv): void;
+}
+
+const highlight = (editor: HTMLInputElement) => {
+  let code = editor.textContent;
+  code = code.replace(/\((\w+?)(\b)/g, '(<font color="#8a2be2">$1</font>$2');
+  editor.innerHTML = code;
+};
+
+interface SquiggleEditorState {
+  expression: string;
+  env: exportEnv;
+}
+
+export class SquiggleEditor extends React.Component<
+  SquiggleEditorProps,
+  SquiggleEditorState
+> {
+  constructor(props: SquiggleEditorProps) {
+    super(props);
+    let code = props.initialSquiggleString ? props.initialSquiggleString : "";
+    this.state = { expression: code, env: props.environment };
+  }
+  render() {
+    let { expression, env } = this.state;
+    let props = this.props;
+    return (
+      <div>
+        <ReactCodeJar
+          code={expression}
+          onUpdate={(e) => {
+            this.setState({ expression: e });
+          }}
+          style={{
+            borderRadius: "6px",
+            width: "530px",
+            border: "1px solid grey",
+            fontFamily: "'Source Code Pro', monospace",
+            fontSize: "14px",
+            fontWeight: "400",
+            letterSpacing: "normal",
+            lineHeight: "20px",
+            padding: "10px",
+            tabSize: "4",
+          }}
+          highlight={highlight}
+          lineNumbers={false}
+        />
+        <SquiggleChart
+          squiggleString={expression}
+          sampleCount={props.sampleCount}
+          outputXYPoints={props.outputXYPoints}
+          kernelWidth={props.kernelWidth}
+          pointDistLength={props.pointDistLength}
+          diagramStart={props.diagramStart}
+          diagramStop={props.diagramStop}
+          diagramCount={props.diagramCount}
+          environment={env}
+          onEnvChange={props.onEnvChange}
+        />
+      </div>
+    );
+  }
+}
+
+export function renderSquiggleEditor(props: SquiggleEditorProps) {
+  let parent = document.createElement("div");
+  ReactDOM.render(
+    <SquiggleEditor
+      {...props}
+      onEnvChange={(env) => {
+        // Typescript complains on two levels here.
+        //  - Div elements don't have a value property
+        //  - Even if it did (like it was an input element), it would have to
+        //    be a string
+        //
+        //  Which are reasonable in most web contexts.
+        //
+        //  However we're using observable, neither of those things have to be
+        //  true there. div elements can contain the value property, and can have
+        //  the value be any datatype they wish.
+        //
+        //  This is here to get the 'viewof' part of:
+        //  viewof env = cell('normal(0,1)')
+        //  to work
+        // @ts-ignore
+        parent.value = env;
+
+        parent.dispatchEvent(new CustomEvent("input"));
+        if (props.onEnvChange) props.onEnvChange(env);
+      }}
+    />,
+    parent
+  );
+  return parent;
+}

packages/components/src/index.ts

@@ -1 +1,2 @@
-export { SquiggleChart } from './SquiggleChart';
+export { SquiggleChart } from "./SquiggleChart";
+export { SquiggleEditor, renderSquiggleEditor } from "./SquiggleEditor";

packages/components/src/spec-distributions.json

@@ -35,7 +35,8 @@
     }
   ],
 
-  "scales": [{
+  "scales": [
+    {
       "name": "xscale",
       "type": "pow",
       "exponent": { "signal": "xscale" },
@@ -48,7 +49,8 @@
           { "data": "dis", "field": "x" }
         ]
       }
-  }, {
+    },
+    {
       "name": "yscale",
       "type": "pow",
       "exponent": { "signal": "yscale" },

packages/components/src/stories/Introduction.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Squiggle/Introduction" />
 

packages/components/src/stories/SquiggleChart.stories.mdx

@@ -1,9 +1,9 @@
-import { SquiggleChart } from '../SquiggleChart'
+import { SquiggleChart } from "../SquiggleChart";
-import { Canvas, Meta, Story, Props } from '@storybook/addon-docs';
+import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
 
 <Meta title="Squiggle/SquiggleChart" component={SquiggleChart} />
 
-export const Template = SquiggleChart
+export const Template = SquiggleChart;
 
 # Squiggle Chart
 
@@ -19,53 +19,62 @@ could be continuous, discrete or mixed.
 ## Distributions
 
 An example of a normal distribution is:
+
 <Canvas>
   <Story
     name="Normal"
     args={{
-      squiggleString: "normal(5,2)"
+      squiggleString: "normal(5,2)",
-    }}> 
+    }}
+  >
     {Template.bind({})}
   </Story>
 </Canvas>
 
-
 An example of a Discrete distribution is:
+
 <Canvas>
   <Story
     name="Discrete"
     args={{
-      squiggleString: "mm(0, 1, [0.5, 0.5])"
+      squiggleString: "mm(0, 1, [0.5, 0.5])",
-    }}>
+    }}
+  >
     {Template.bind({})}
   </Story>
 </Canvas>
 
 An example of a Mixed distribution is:
+
 <Canvas>
   <Story
     name="Mixed"
     args={{
-      squiggleString: "mm(0, 5 to 10, [0.5, 0.5])"
+      squiggleString: "mm(0, 5 to 10, [0.5, 0.5])",
-    }}> 
+    }}
+  >
     {Template.bind({})}
   </Story>
 </Canvas>
 
 ## Constants
+
 A constant is a simple number as a result. This has special formatting rules
 to allow large and small numbers being printed cleanly.
+
 <Canvas>
   <Story
     name="Constant"
     args={{
-      squiggleString: "500000 * 5000000"
+      squiggleString: "500000 * 5000000",
-    }}> 
+    }}
+  >
     {Template.bind({})}
   </Story>
 </Canvas>
 
 ## Functions
+
 Finally, a function can be returned, and this shows how the distribution changes
 over the axis between x = 0 and 10.
 
@@ -73,8 +82,9 @@ over the axis between x = 0 and 10.
   <Story
     name="Function"
     args={{
-      squiggleString: "f(x) = normal(x,x)\nf"
+      squiggleString: "f(x) = normal(x,x)\nf",
-    }}> 
+    }}
+  >
     {Template.bind({})}
   </Story>
 </Canvas>

packages/components/webpack.config.js

@@ -1,26 +1,34 @@
-const path = require('path');
+const path = require("path");
 
 module.exports = {
-  mode: 'production',
+  mode: "production",
-  entry: './src/index.ts',
+  devtool: "source-map",
+  entry: "./src/index.ts",
   module: {
     rules: [
       {
         test: /\.tsx?$/,
-        use: 'ts-loader',
+        use: "ts-loader",
         exclude: /node_modules/,
       },
     ],
   },
   resolve: {
-    extensions: ['.js', '.tsx', '.ts'],
+    extensions: [".js", ".tsx", ".ts"],
   },
   output: {
-    filename: 'bundle.js',
+    filename: "bundle.js",
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(__dirname, "dist"),
     library: {
-      name: 'squiggle_components',
+      name: "squiggle_components",
-      type: 'umd',
+      type: "umd",
     },
   },
+  devServer: {
+    static: {
+      directory: path.join(__dirname, "public"),
+    },
+    compress: true,
+    port: 9000,
+  },
 };

packages/squiggle-lang/__tests__/JS__Test.ts

@@ -1,19 +1,34 @@
 import { run } from '../src/js/index';
 
-describe("A simple result", () => {
+let testRun = (x: string) => {
+  let result = run(x)
+  if(result.tag == 'Ok'){
+    return { tag: 'Ok', value: result.value.exports }
+  }
+  else {
+    return result
+  }
+}
+
+describe("Simple calculations and results", () => {
     test("mean(normal(5,2))", () => {
-        expect(run("mean(normal(5,2))")).toEqual({ tag: 'Ok', value: [ { NAME: 'Float', VAL: 5  } ] })
+        expect(testRun("mean(normal(5,2))")).toEqual({ tag: 'Ok', value: [ { NAME: 'Float', VAL: 5  } ] })
     })
     test("10+10", () => {
-        let foo = run("10 + 10")
+        let foo = testRun("10 + 10")
         expect(foo).toEqual({ tag: 'Ok', value: [ { NAME: 'Float', VAL: 20  } ] })
     })
+})
+describe("Log function", () => {
     test("log(1) = 0", () => {
-      let foo = run("log(1)")
+      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 = run("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" })
     })
 });

packages/squiggle-lang/src/js/index.ts

@@ -1,6 +1,6 @@
 import {runAll} from '../rescript/ProgramEvaluator.gen';
-import type { Inputs_SamplingInputs_t as SamplingInputs } from '../rescript/ProgramEvaluator.gen';
+import type { Inputs_SamplingInputs_t as SamplingInputs,exportEnv, exportType, exportDistribution} from '../rescript/ProgramEvaluator.gen';
-export type { SamplingInputs } 
+export type { SamplingInputs , exportEnv, exportDistribution } 
 export type {t as DistPlus} from '../rescript/pointSetDist/DistPlus.gen';
 
 export let defaultSamplingInputs : SamplingInputs = {
@@ -9,7 +9,9 @@ export let defaultSamplingInputs : SamplingInputs = {
   pointDistLength : 1000
 }
 
-export function run(squiggleString : string, samplingInputs? : SamplingInputs) {
+export function run(squiggleString : string, samplingInputs? : SamplingInputs, environment?: exportEnv) : { tag: "Ok"; value: exportType }
+  | { tag: "Error"; value: string } {
   let si : SamplingInputs = samplingInputs ? samplingInputs : defaultSamplingInputs
-  return runAll(squiggleString, si)
+  let env : exportEnv = environment ? environment : []
+  return runAll(squiggleString, si, env)
 }

packages/squiggle-lang/src/rescript/ProgramEvaluator.res

@@ -36,12 +36,20 @@ module Inputs = {
   }
 }
 
-type exportType = [
+type exportDistribution = [
   | #DistPlus(DistPlus.t)
   | #Float(float)
   | #Function((float) => Belt.Result.t<DistPlus.t,string>)
 ]
 
+type exportEnv = array<(string, ASTTypes.node)>
+
+type exportType = {
+  environment : exportEnv,
+  exports: array<exportDistribution>
+}
+
+
 module Internals = {
   let addVariable = (
     {samplingInputs, squiggleString, environment}: Inputs.inputs,
@@ -71,29 +79,6 @@ module Internals = {
   let runNode = (inputs, node) =>
     AST.toLeaf(makeInputs(inputs), inputs.environment, node)
 
-  let runProgram = (inputs: Inputs.inputs, p: ASTTypes.program) => {
-    let ins = ref(inputs)
-    p
-    |> E.A.fmap(x =>
-      switch x {
-      | #Assignment(name, node) =>
-        ins := addVariable(ins.contents, name, node)
-        None
-      | #Expression(node) =>
-        Some(runNode(ins.contents, node) |> E.R.fmap(r => (ins.contents.environment, r)))
-      }
-    )
-    |> E.A.O.concatSomes
-    |> E.A.R.firstErrorOrOpen
-  }
-
-  let inputsToLeaf = (inputs: Inputs.inputs) =>
-    Parser.fromString(inputs.squiggleString) |> E.R.bind(_, g => runProgram(inputs, g))
-
-  let outputToDistPlus = (inputs: Inputs.inputs, pointSetDist: PointSetTypes.pointSetDist) =>
-    DistPlus.make(~pointSetDist, ~squiggleString=Some(inputs.squiggleString), ())
-}
-
   let renderIfNeeded = (inputs: Inputs.inputs, node: ASTTypes.node): result<
     ASTTypes.node,
     string,
@@ -104,7 +89,7 @@ let renderIfNeeded = (inputs: Inputs.inputs, node: ASTTypes.node): result<
         | #Normalize(_) as n
         | #SymbolicDist(_) as n =>
           #Render(n)
-        |> Internals.runNode(inputs)
+          |> runNode(inputs)
           |> (
             x =>
               switch x {
@@ -118,6 +103,9 @@ let renderIfNeeded = (inputs: Inputs.inputs, node: ASTTypes.node): result<
         }
     )
 
+  let outputToDistPlus = (inputs: Inputs.inputs, pointSetDist: PointSetTypes.pointSetDist) =>
+    DistPlus.make(~pointSetDist, ~squiggleString=Some(inputs.squiggleString), ())
+
   let rec returnDist = (functionInfo : (array<string>, ASTTypes.node), 
                     inputs : Inputs.inputs,
                     env : ASTTypes.environment) => {
@@ -141,15 +129,15 @@ let rec returnDist = (functionInfo : (array<string>, ASTTypes.node),
   and coersionToExportedTypes = (
     inputs,
     env: ASTTypes.environment,
-  node: ASTTypes.node,
+    ex: ASTTypes.node,
-): result<exportType, string> =>
+  ): result<exportDistribution, string> =>
-  node
+    ex
     |> renderIfNeeded(inputs)
     |> E.R.bind(_, x =>
       switch x {
       | #RenderedDist(Discrete({xyShape: {xs: [x], ys: [1.0]}})) => Ok(#Float(x))
       | #SymbolicDist(#Float(x)) => Ok(#Float(x))
-    | #RenderedDist(n) => Ok(#DistPlus(Internals.outputToDistPlus(inputs, n)))
+      | #RenderedDist(n) => Ok(#DistPlus(outputToDistPlus(inputs, n)))
       | #Function(n) => Ok(#Function(returnDist(n, inputs, env)))
       | n => Error("Didn't output a rendered distribution. Format:" ++ AST.toString(n))
       }
@@ -161,7 +149,7 @@ and evaluateFunction = (
     fnInputs,
   ) => {
     let output = AST.runFunction(
-    Internals.makeInputs(inputs),
+      makeInputs(inputs),
       inputs.environment,
       fnInputs,
       fn,
@@ -169,37 +157,47 @@ and evaluateFunction = (
     output |> E.R.bind(_, coersionToExportedTypes(inputs, inputs.environment))
   }
 
-
+  let runProgram = (inputs: Inputs.inputs, p: ASTTypes.program) => {
-
+    let ins = ref(inputs)
-
+    p
-let rec mapM = (f, xs) =>
+      |> E.A.fmap(x =>
-  switch xs {
+        switch x {
-  | [] => Ok([])
+        | #Assignment(name, node) =>
-  | arr =>
+          ins := addVariable(ins.contents, name, node)
-    switch f(arr[0]) {
+          None
-    | Error(err) => Error(err)
+        | #Expression(node) =>
-    | Ok(val) =>
+          Some(runNode(ins.contents, node))
-      switch mapM(f, Belt.Array.sliceToEnd(arr, 1)) {
-      | Error(err) => Error(err)
-      | Ok(restList) => Ok(Belt.Array.concat([val], restList))
         }
+      )
+      |> E.A.O.concatSomes
+      |> E.A.R.firstErrorOrOpen
+      |> E.R.bind(_, d => 
+           d
+            |> E.A.fmap(x => coersionToExportedTypes(inputs, ins.contents.environment, x))
+            |> E.A.R.firstErrorOrOpen
+         )
+      |> E.R.fmap(ex => 
+          {
+            environment: Belt.Map.String.toArray(ins.contents.environment),
+            exports: ex
           }
+        )
   }
 
-let evaluateProgram = (inputs: Inputs.inputs) =>
+  let inputsToLeaf = (inputs: Inputs.inputs) =>
-  inputs
+    Parser.fromString(inputs.squiggleString) |> E.R.bind(_, g => runProgram(inputs, g))
-  |> Internals.inputsToLeaf
+
-  |> E.R.bind(_, xs => mapM(((a, b)) => coersionToExportedTypes(inputs, a, b), xs))
+}
 
 
 @genType
-let runAll = (squiggleString: string, samplingInputs: Inputs.SamplingInputs.t) => {
+let runAll : (string, Inputs.SamplingInputs.t, exportEnv) => result<exportType,string> = 
+   (squiggleString, samplingInputs, environment) => {
   let inputs = Inputs.make(
     ~samplingInputs,
     ~squiggleString,
-    ~environment=[]->Belt.Map.String.fromArray,
+    ~environment=Belt.Map.String.fromArray(environment),
     (),
   )
-  let response1 = evaluateProgram(inputs);
+  Internals.inputsToLeaf(inputs)
-  response1
 }

packages/squiggle-lang/src/rescript/interpreter/ASTTypes.res

@@ -1,3 +1,4 @@
+@genType
 type rec hash = array<(string, node)>
 and node = [
   | #SymbolicDist(SymbolicDistTypes.symbolicDist)

packages/squiggle-lang/src/rescript/symbolicDist/SymbolicDistTypes.res

@@ -31,6 +31,7 @@ type triangular = {
   high: float,
 }
 
+@genType
 type symbolicDist = [
   | #Normal(normal)
   | #Beta(beta)

packages/squiggle-lang/src/rescript/utility/Operation.res

@@ -1,5 +1,6 @@
 // This file has no dependencies. It's used outside of the interpreter, but the interpreter depends on it.
 
+@genType
 type algebraicOperation = [
   | #Add
   | #Multiply
@@ -7,6 +8,7 @@ type algebraicOperation = [
   | #Divide
   | #Exponentiate
 ]
+@genType
 type pointwiseOperation = [#Add | #Multiply | #Exponentiate]
 type scaleOperation = [#Multiply | #Exponentiate | #Log]
 type distToFloatOperation = [

yarn.lock

@@ -14370,6 +14370,11 @@ prepend-http@^2.0.0:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
   integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
 
+prettier@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.0.tgz#12f8f504c4d8ddb76475f441337542fa799207d4"
+  integrity sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@@ -18696,7 +18701,7 @@ webpack-dev-middleware@^5.3.1:
     range-parser "^1.2.1"
     schema-utils "^4.0.0"
 
-webpack-dev-server@^4.6.0, webpack-dev-server@^4.7.1:
+webpack-dev-server@^4.6.0, webpack-dev-server@^4.7.1, webpack-dev-server@^4.7.4:
   version "4.7.4"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.7.4.tgz#d0ef7da78224578384e795ac228d8efb63d5f945"
   integrity sha512-nfdsb02Zi2qzkNmgtZjkrMOcXnYZ6FLKcQwpxT7MvmHKc+oTtDsBju8j+NMyAygZ9GW1jMEUpy3itHtqgEhe1A==