Format and fix build error

package.json

@@ -8,7 +8,7 @@
     "packages/*"
   ],
   "resolutions": {
-    "@types/react": "17.0.39"
+    "@types/react": "^17.0.43"
   },
   "packageManager": "yarn@1.22.17"
 }

packages/components/README.md

@@ -1,25 +1,29 @@
 # Squiggle Components
+
 This package contains all the components for squiggle. These can be used either as a library or hosted as a [storybook](https://storybook.js.org/).
 
 # Build for development
+
 We assume that you had run `yarn` at monorepo level, installing dependencies.
 
 You need to _prepare_ by building and bundling `squiggle-lang`
-``` sh
+
+```sh
 cd ../squiggle-lang
 yarn build
 ```
+
 If you've otherwise done this recently you can skip those.
 
 Run a development server
 
-``` sh
+```sh
 yarn start
 ```
 
 And build artefacts for production,
 
-``` sh
+```sh
 yarn bundle  # builds components library
 yarn build  # builds storybook app
 ```

packages/components/package.json

@@ -9,7 +9,6 @@
     "@types/jest": "^27.4.0",
     "@types/lodash": "^4.14.178",
     "@types/node": "^17.0.16",
-    "@types/react": "^17.0.43",
     "@types/react-dom": "^17.0.14",
     "antd": "^4.19.3",
     "cross-env": "^7.0.3",
@@ -29,7 +28,7 @@
   },
   "scripts": {
     "start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
-    "build": "build-storybook -s public",
+    "build": "tsc -b && build-storybook -s public",
     "bundle": "webpack",
     "all": "yarn bundle && yarn build"
   },

packages/components/src/CodeEditor.tsx

@@ -1,4 +1,4 @@
-import React, {FC} from "react";
+import React, { FC } from "react";
 import AceEditor from "react-ace";
 
 import "ace-builds/src-noconflict/mode-golang";
@@ -7,31 +7,32 @@ import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/keybinding-vim";
 
 interface CodeEditorProps {
-   value : string,
+  value: string;
-   onChange : (value: string) => void,
+  onChange: (value: string) => void;
-   oneLine : boolean,
+  oneLine: boolean;
-   width?: number
+  width?: number;
 }
 
-export let CodeEditor : FC<CodeEditorProps> = (props) =>
+export let CodeEditor: FC<CodeEditorProps> = (props) => (
-    <AceEditor
+  <AceEditor
-      value={props.value}
+    value={props.value}
-      mode="golang"
+    mode="golang"
-      theme="github"
+    theme="github"
-      width={props.width ? props.width + 'px' : '500px'}
+    width={props.width ? props.width + "px" : "500px"}
-      height={props.oneLine ? "1.2em" : "500px"}
+    height={props.oneLine ? "1.2em" : "500px"}
-      showGutter={false}
+    showGutter={false}
-      highlightActiveLine={false}
+    highlightActiveLine={false}
-      showPrintMargin={false}
+    showPrintMargin={false}
-      onChange={props.onChange}
+    onChange={props.onChange}
-      name="UNIQUE_ID_OF_DIV"
+    name="UNIQUE_ID_OF_DIV"
-      editorProps={{
+    editorProps={{
-        $blockScrolling: true,
+      $blockScrolling: true,
-      }}
+    }}
-      setOptions={{
+    setOptions={{
-        enableBasicAutocompletion: false,
+      enableBasicAutocompletion: false,
-        enableLiveAutocompletion: true,
+      enableLiveAutocompletion: true,
-        enableSnippets: true,
+      enableSnippets: true,
-      }}
+    }}
-    />
+  />
-export default CodeEditor
+);
+export default CodeEditor;

packages/components/src/SquiggleChart.tsx

@@ -13,11 +13,11 @@ import * as chartSpecification from "./spec-distributions.json";
 import * as percentilesSpec from "./spec-percentiles.json";
 
 let SquiggleVegaChart = createClassFromSpec({
-  spec: chartSpecification as Spec
+  spec: chartSpecification as Spec,
 });
 
 let SquigglePercentilesChart = createClassFromSpec({
-  spec: percentilesSpec as Spec
+  spec: percentilesSpec as Spec,
 });
 
 export interface SquiggleChartProps {
@@ -76,8 +76,13 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
             y: y,
           }));
 
-          console.log(values.length)
+          return (
-          return <SquiggleVegaChart width={props.width ? props.width : 500} data={{ con: values }} actions={false}/>;
+            <SquiggleVegaChart
+              width={props.width ? props.width : 500}
+              data={{ con: values }}
+              actions={false}
+            />
+          );
         } else if (shape.tag === "Discrete") {
           let xyShape = shape.value.xyShape;
           let totalY = xyShape.ys.reduce((a, b) => a + b);
@@ -92,7 +97,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
             y: y,
           }));
 
-          return <SquiggleVegaChart data={{ dis: values }} actions={false}/>;
+          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);
@@ -126,10 +131,10 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
 
           let total = 0;
           let cdf = sortedPoints.map((point: labeledPoint) => {
-            if (point.type == "discrete") {
+            if (point.type === "discrete") {
               total += point.y;
               return total;
-            } else if (point.type == "continuous") {
+            } else if (point.type === "continuous") {
               total += (point.y / totalY) * totalContinuous;
               return total;
             }
@@ -150,10 +155,10 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
             })
           );
           let continuousValues = cdfLabeledPoint.filter(
-            (x) => x.type == "continuous"
+            (x) => x.type === "continuous"
           );
           let discreteValues = cdfLabeledPoint.filter(
-            (x) => x.type == "discrete"
+            (x) => x.type === "discrete"
           );
 
           return (
@@ -170,9 +175,9 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
         let count = props.diagramCount ? props.diagramCount : 20;
         let step = (stop - start) / count;
         let data = _.range(start, stop, step).map((x) => {
-          if (chartResult.NAME == "Function") {
+          if (chartResult.NAME === "Function") {
             let result = chartResult.VAL(x);
-            if (result.tag == "Ok") {
+            if (result.tag === "Ok") {
               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,
@@ -199,14 +204,16 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
             return null;
           }
         });
-        return <SquigglePercentilesChart 
+        return (
-            data={{ facet: data.filter(x => x !== null) }} 
+          <SquigglePercentilesChart
+            data={{ facet: data.filter((x) => x !== null) }}
             actions={false}
-          />;
+          />
+        );
       }
     });
     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>;
   }
@@ -214,7 +221,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
 };
 
 function getPercentiles(percentiles: number[], t: DistPlus) {
-  if (t.pointSetDist.tag == "Discrete") {
+  if (t.pointSetDist.tag === "Discrete") {
     let total = 0;
     let maxX = _.max(t.pointSetDist.value.xyShape.xs);
     let bounds = percentiles.map((_) => maxX);
@@ -224,14 +231,14 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
       (x, y) => {
         total += y;
         percentiles.forEach((v, i) => {
-          if (total > v && bounds[i] == maxX) {
+          if (total > v && bounds[i] === maxX) {
             bounds[i] = x;
           }
         });
       }
     );
     return bounds;
-  } else if (t.pointSetDist.tag == "Continuous") {
+  } 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);
@@ -242,14 +249,14 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
       (x, y) => {
         total += y / totalY;
         percentiles.forEach((v, i) => {
-          if (total > v && bounds[i] == maxX) {
+          if (total > v && bounds[i] === maxX) {
             bounds[i] = x;
           }
         });
       }
     );
     return bounds;
-  } else if (t.pointSetDist.tag == "Mixed") {
+  } else if (t.pointSetDist.tag === "Mixed") {
     let discreteShape = t.pointSetDist.value.discrete.xyShape;
     let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
 
@@ -283,13 +290,13 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
     let maxX = _.max(sortedPoints.map((x) => x.x));
     let bounds = percentiles.map((_) => maxX);
     sortedPoints.map((point: labeledPoint) => {
-      if (point.type == "discrete") {
+      if (point.type === "discrete") {
         total += point.y;
-      } else if (point.type == "continuous") {
+      } else if (point.type === "continuous") {
         total += (point.y / totalY) * totalContinuous;
       }
       percentiles.forEach((v, i) => {
-        if (total > v && bounds[i] == maxX) {
+        if (total > v && bounds[i] === maxX) {
           bounds[i] = total;
         }
       });

packages/components/src/SquigglePlayground.tsx

@@ -1,47 +1,51 @@
-import React, { FC, useState } from "react"
+import React, { FC, useState } from "react";
-import ReactDOM from "react-dom"
+import ReactDOM from "react-dom";
-import { SquiggleChart } from "./SquiggleChart"
+import { SquiggleChart } from "./SquiggleChart";
-import CodeEditor from "./CodeEditor"
+import CodeEditor from "./CodeEditor";
-import { Form, Input, Card, Row, Col } from "antd"
+import { Form, Input, Card, Row, Col } from "antd";
-import 'antd/dist/antd.css';
+import "antd/dist/antd.css";
 
 interface FieldFloatProps {
-  label : string,
+  label: string;
-  className? : string,
+  className?: string;
-  value : number,
+  value: number;
-  onChange : (value: number) => void,
+  onChange: (value: number) => void;
 }
 
 function FieldFloat(Props: FieldFloatProps) {
   let [contents, setContents] = useState(Props.value + "");
-  return <Form.Item label={Props.label}>
+  return (
-    <Input 
+    <Form.Item label={Props.label}>
-      value={contents} 
+      <Input
-      className={Props.className ? Props.className : ""}
+        value={contents}
-      onChange={(e) => setContents(e.target.value)}
+        className={Props.className ? Props.className : ""}
-      onBlur={(_) => {
+        onChange={(e) => setContents(e.target.value)}
-        let result = parseFloat(contents);
+        onBlur={(_) => {
-        if(result != NaN) {
+          let result = parseFloat(contents);
-          Props.onChange(result)
+          if (result != NaN) {
-        }
+            Props.onChange(result);
-      }}
+          }
+        }}
       />
-  </Form.Item> 
+    </Form.Item>
+  );
 }
 
 interface Props {
-  initialSquiggleString : string
+  initialSquiggleString: string;
 }
 
-let SquigglePlayground : FC<Props> = (props) => {
+let SquigglePlayground: FC<Props> = (props) => {
-  let [squiggleString, setSquiggleString] = useState(props.initialSquiggleString)
+  let [squiggleString, setSquiggleString] = useState(
-  let [sampleCount, setSampleCount] = useState(1000)
+    props.initialSquiggleString
-  let [outputXYPoints, setOutputXYPoints] = useState(1000)
+  );
-  let [pointDistLength, setPointDistLength] = useState(1000)
+  let [sampleCount, setSampleCount] = useState(1000);
-  let [diagramStart, setDiagramStart] = useState(0)
+  let [outputXYPoints, setOutputXYPoints] = useState(1000);
-  let [diagramStop, setDiagramStop] = useState(10)
+  let [pointDistLength, setPointDistLength] = useState(1000);
-  let [diagramCount, setDiagramCount] = useState(20)
+  let [diagramStart, setDiagramStart] = useState(0);
-  var demoDist = 
+  let [diagramStop, setDiagramStop] = useState(10);
+  let [diagramCount, setDiagramCount] = useState(20);
+  var demoDist = (
     <SquiggleChart
       squiggleString={squiggleString}
       sampleCount={sampleCount}
@@ -50,16 +54,21 @@ let SquigglePlayground : FC<Props> = (props) => {
       diagramStop={diagramStop}
       diagramCount={diagramCount}
       pointDistLength={pointDistLength}
-      />
+    />
+  );
   return (
     <Row>
       <Col span={12}>
-        <Card
+        <Card title="Distribution Form">
-          title="Distribution Form">
           <Form>
             <Row gutter={16}>
               <Col span={24}>
-                <CodeEditor value={squiggleString} onChange={setSquiggleString} oneLine={false}/> </Col>
+                <CodeEditor
+                  value={squiggleString}
+                  onChange={setSquiggleString}
+                  oneLine={false}
+                />{" "}
+              </Col>
             </Row>
             <Row gutter={16}>
               <Col span={12}>
@@ -67,58 +76,54 @@ let SquigglePlayground : FC<Props> = (props) => {
                   value={sampleCount}
                   label="Sample Count"
                   onChange={setSampleCount}
-                  /> </Col>
+                />{" "}
+              </Col>
               <Col span={12}>
                 <FieldFloat
                   value={outputXYPoints}
                   onChange={setOutputXYPoints}
-                  label="Output XY-points" />
+                  label="Output XY-points"
+                />
               </Col>
               <Col span={12}>
                 <FieldFloat
-                   value={pointDistLength}
+                  value={pointDistLength}
-                   onChange={setPointDistLength}
+                  onChange={setPointDistLength}
-                   label="Downsample To"
+                  label="Downsample To"
-                   />
+                />
               </Col>
               <Col span={12}>
                 <FieldFloat
                   value={diagramStart}
                   onChange={setDiagramStart}
                   label="Diagram Start"
-                  />
+                />
               </Col>
               <Col span={12}>
                 <FieldFloat
                   value={diagramStop}
                   onChange={setDiagramStop}
                   label="Diagram Stop"
-                  /> </Col>
+                />{" "}
+              </Col>
               <Col span={12}>
                 <FieldFloat
                   value={diagramCount}
                   onChange={setDiagramCount}
                   label="Diagram Count"
-                  />
+                />
               </Col>
             </Row>
           </Form>
         </Card>
       </Col>
-      <Col span={12} >
+      <Col span={12}>{demoDist}</Col>
-        {demoDist}
-      </Col>
     </Row>
-  )
-}
-export default SquigglePlayground;
-export function renderSquigglePlayground(props : Props){
-  let parent = document.createElement("div");
-  ReactDOM.render(
-    <SquigglePlayground
-      {...props}
-    />,
-    parent
   );
+};
+export default SquigglePlayground;
+export function renderSquigglePlayground(props: Props) {
+  let parent = document.createElement("div");
+  ReactDOM.render(<SquigglePlayground {...props} />, parent);
   return parent;
 }

packages/components/src/index.ts

@@ -1,4 +1,6 @@
 export { SquiggleChart } from "./SquiggleChart";
 export { SquiggleEditor, renderSquiggleEditor } from "./SquiggleEditor";
-import SquigglePlayground, { renderSquigglePlayground } from './SquigglePlayground';
+import SquigglePlayground, {
+  renderSquigglePlayground,
+} from "./SquigglePlayground";
 export { SquigglePlayground, renderSquigglePlayground };

packages/components/src/spec-distributions.json

@@ -66,9 +66,7 @@
     }
   ],
 
-  "axes": [
+  "axes": [{ "orient": "bottom", "scale": "xscale", "tickCount": 20 }],
-    { "orient": "bottom", "scale": "xscale", "tickCount": 20 }
-  ],
 
   "marks": [
     {

packages/components/tsconfig.json

@@ -16,10 +16,10 @@
     "declaration": true,
     "sourceMap": true
   },
-  "files": ["src/spec-distributions.json","src/spec-percentiles.json"],
+  "files": ["src/spec-distributions.json", "src/spec-percentiles.json"],
   "target": "ES6",
   "include": ["src/**/*", "src/*"],
-  "exclude": ["node_modules", "**/*.spec.ts"],
+  "exclude": ["node_modules", "**/*.spec.ts", "webpack.config.js"],
   "references": [
     {
       "path": "../squiggle-lang"

packages/components/webpack.config.js

@@ -21,7 +21,7 @@ module.exports = {
   resolve: {
     extensions: [".js", ".tsx", ".ts"],
     alias: {
-      "@quri/squiggle-lang": path.resolve(__dirname, '../squiggle-lang/src/js')
+      "@quri/squiggle-lang": path.resolve(__dirname, "../squiggle-lang/src/js"),
     },
   },
   output: {

packages/squiggle-lang/package.json

@@ -29,7 +29,6 @@
   "devDependencies": {
     "@glennsl/rescript-jest": "^0.9.0",
     "@types/jest": "^27.4.0",
-    "@types/webpack": "^5.28.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
     "docsify": "^4.12.2",
     "gentype": "^4.3.0",