Add cdf tooltip and squiggle code control

packages/components/src/stories/SquiggleChart.stories.tsx

@@ -7,4 +7,9 @@ export default {
   component: SquiggleChart
 }
 
-export const Default = () => <SquiggleChart squiggleString="normal(5, 2)" />
+const Template = ({squiggleString}) => <SquiggleChart squiggleString={squiggleString} />
+
+export const Default = Template.bind({})
+Default.args = {
+  squiggleString: "normal(5, 2)"
+};

packages/components/src/stories/SquiggleChart.tsx

@@ -62,7 +62,7 @@ let specification : Spec = {
         },
         "update": {
           "fill": {
-              "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: 'steelblue'}, {offset: mousex, color: 'steelblue'}, {offset: mousex, color: 'blue'}, {offset: 1.0, color: 'blue'} ] }"
+              "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'blue'}, {offset: 1.0, color: 'blue'} ] }"
             },
           "interpolate": {"value": "monotone"},
           "fillOpacity": {"value": 1}
@@ -79,11 +79,17 @@ function zip<T>(a: Array<T>, b: Array<T>): Array<Array<T>>{
     return [e, b[i]];
   })
 }
+function zip3<T>(a: Array<T>, b: Array<T>, c: Array<T>): Array<Array<T>>{
+  return a.map(function(e, i) {
+    return [e, b[i], c[i]];
+  })
+}
 /**
  * Primary UI component for user interaction
  */
 export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) => {
   let result = run(squiggleString);
+  console.log(result);
   if (result.tag === "Ok") {
     let chartResult = result.value[0];
     if(chartResult["NAME"] === "Float"){
@@ -93,8 +99,14 @@ export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) =>
       let shape = chartResult.VAL.shape;
       if(shape.tag === "Continuous"){
         let xyShape = shape.value.xyShape;
-        let values = zip(xyShape.xs, xyShape.ys).map(([x,y]) => ({x: x, y: y}));
+        let totalY = xyShape.ys.reduce((a, b) => a + b);
-        console.log(values)
+        let total = 0;
+        let cdf = xyShape.ys.map(y => {
+          total += y;
+          return total / totalY;
+        })
+        console.log(cdf)
+        let values = zip3(cdf, xyShape.xs, xyShape.ys).map(([c, x, y ]) => ({cdf: (c * 100).toFixed(2) + "%", x: x, y: y}));
 
         return (
           <SquiggleVegaChart 
@@ -104,7 +116,13 @@ export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) =>
       }
       else if(shape.tag === "Discrete"){
         let xyShape = shape.value.xyShape;
-        let values = zip(xyShape.xs, xyShape.ys).map(([x,y]) => ({x: x, y: y}));
+        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 = zip3(cdf, xyShape.xs, xyShape.ys).map(([c, x,y]) => ({cdf: (c * 100).toFixed(2) + "%", x: x, y: y}));
 
         return (
           <SquiggleVegaChart 
@@ -113,6 +131,8 @@ export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) =>
         );
       }
       else if(shape.tag === "Mixed"){
+        console.log(shape.value.integralSumCache)
+        console.log(shape.value.integralCache)
         let xyShape = shape.value.continuous.xyShape;
         let values = zip(xyShape.xs, xyShape.ys).map(([x,y]) => ({x: x, y: y}));
 
@@ -127,6 +147,11 @@ export const SquiggleChart = ({ squiggleString }: { squiggleString: string}) =>
 
     }
   }
+  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>{"Invalid Response"}</p>)
 };