Works, the first step

src/App.re

@@ -1,6 +1,7 @@
 type route =
   | Model(string)
   | DistBuilder
+  | DistBuilder2
   | Home
   | NotFound;
 
@@ -8,6 +9,7 @@ let routeToPath = route =>
   switch (route) {
   | Model(modelId) => "/m/" ++ modelId
   | DistBuilder => "/dist-builder"
+  | DistBuilder2 => "/dist-builder2"
   | Home => "/"
   | _ => "/"
   };
@@ -76,6 +78,9 @@ module Menu = {
       <Item href={routeToPath(DistBuilder)} key="dist-builder">
         {"Dist Builder" |> E.ste}
       </Item>
+      <Item href={routeToPath(DistBuilder2)} key="dist-builder">
+        {"Dist Builder 2" |> E.ste}
+      </Item>
     </div>;
   };
 };
@@ -88,6 +93,7 @@ let make = () => {
     switch (url.path) {
     | ["m", modelId] => Model(modelId)
     | ["dist-builder"] => DistBuilder
+    | ["dist-builder2"] => DistBuilder2
     | [] => Home
     | _ => NotFound
     };
@@ -101,6 +107,7 @@ let make = () => {
        | None => <div> {"Page is not found" |> E.ste} </div>
        }
      | DistBuilder => <DistBuilder />
+     | DistBuilder2 => <DistBuilder2 />
      | Home => <div> {"Welcome" |> E.ste} </div>
      | _ => <div> {"Page is not found" |> E.ste} </div>
      }}

src/components/DistBuilder2.re

@@ -0,0 +1,149 @@
+open BsReform;
+open Antd.Grid;
+
+type shape = (array(float), array(float));
+
+[@bs.module "./editor/main.js"]
+external getPdfFromUserInput: string => shape = "get_pdf_from_user_input";
+
+module FormConfig = [%lenses type state = {guesstimatorString: string}];
+
+module Form = ReForm.Make(FormConfig);
+
+let schema = Form.Validation.Schema([||]);
+
+module FieldString = {
+  [@react.component]
+  let make = (~field, ~label) => {
+    <Form.Field
+      field
+      render={({handleChange, error, value, validate}) =>
+        <Antd.Form.Item label={label |> E.ste}>
+          <Antd.Input
+            value
+            onChange={BsReform.Helpers.handleChange(handleChange)}
+            onBlur={_ => validate()}
+          />
+        </Antd.Form.Item>
+      }
+    />;
+  };
+};
+
+module Styles = {
+  open Css;
+  let rows =
+    style([
+      selector(
+        ">.ant-col:first-child",
+        [paddingLeft(em(0.25)), paddingRight(em(0.125))],
+      ),
+      selector(
+        ">.ant-col:last-child",
+        [paddingLeft(em(0.125)), paddingRight(em(0.25))],
+      ),
+      selector(
+        ">.ant-col:not(:first-child):not(:last-child)",
+        [paddingLeft(em(0.125)), paddingRight(em(0.125))],
+      ),
+    ]);
+  let parent =
+    style([
+      selector(".ant-input-number", [width(`percent(100.))]),
+      selector(".anticon", [verticalAlign(`zero)]),
+    ]);
+  let form = style([backgroundColor(hex("eee")), padding(em(1.))]);
+  let dist = style([padding(em(1.))]);
+  let spacer = style([marginTop(em(1.))]);
+  let groupA =
+    style([
+      selector(
+        ".ant-input-number-input",
+        [backgroundColor(hex("fff7db"))],
+      ),
+    ]);
+  let groupB =
+    style([
+      selector(
+        ".ant-input-number-input",
+        [backgroundColor(hex("eaf4ff"))],
+      ),
+    ]);
+};
+
+module DemoDist = {
+  [@react.component]
+  let make = (~guesstimatorString: string) => {
+    let (ys, xs) = getPdfFromUserInput("normal(1, 1)  / normal(10, 1)");
+    let continuous: DistTypes.xyShape = {xs, ys};
+    <Antd.Card title={"Distribution" |> E.ste}>
+      <div className=Styles.spacer />
+      <DistributionPlot height=400 continuous />
+    </Antd.Card>;
+  };
+};
+
+[@react.component]
+let make = () => {
+  let (reloader, setRealoader) = React.useState(() => 1);
+  let reform =
+    Form.use(
+      ~validationStrategy=OnDemand,
+      ~schema,
+      ~onSubmit=({state}) => {None},
+      ~initialState={guesstimatorString: "normal(1, 1)  / normal(10, 1)"},
+      (),
+    );
+
+  let onSubmit = e => {
+    e->ReactEvent.Synthetic.preventDefault;
+    reform.submit();
+  };
+
+  let demoDist =
+    React.useMemo1(
+      () => {
+        <DemoDist
+          guesstimatorString={reform.state.values.guesstimatorString}
+        />
+      },
+      [|reform.state.values.guesstimatorString|],
+    );
+
+  let onRealod = _ => {
+    setRealoader(_ => reloader + 1);
+  };
+
+  <div className=Styles.parent>
+    <div className=Styles.spacer />
+    demoDist
+    <div className=Styles.spacer />
+    <Antd.Card
+      title={"Distribution Form" |> E.ste}
+      extra={
+        <Antd.Button
+          icon=Antd.IconName.reload
+          shape=`circle
+          onClick=onRealod
+        />
+      }>
+      <Form.Provider value=reform>
+        <Antd.Form onSubmit>
+          <Row _type=`flex className=Styles.rows>
+            <Col span=12>
+              <FieldString
+                field=FormConfig.GuesstimatorString
+                label="Guesstimator String"
+              />
+            </Col>
+          </Row>
+          <Antd.Button
+            _type=`primary icon=Antd.IconName.reload onClick=onRealod>
+            {"Update Distribution" |> E.ste}
+          </Antd.Button>
+        </Antd.Form>
+      </Form.Provider>
+    </Antd.Card>
+    <div className=Styles.spacer />
+  </div>;
+};

src/components/charts/DistributionPlot/DistributionPlot.re

@@ -114,7 +114,7 @@ let make =
       ~minX=?,
       ~yMaxDiscreteDomainFactor=?,
       ~yMaxContinuousDomainFactor=?,
-      ~onHover: float => unit,
+      ~onHover: float => unit=_ => (),
       ~continuous=?,
       ~scale=?,
       ~showDistributionLines=false,

src/components/editor/distribution.js

@@ -82,9 +82,11 @@ class BaseDistributionBinned {
     let args_str = args.toString() + ")";
     let substr = this.name + ".pdf(x, " + args_str;
     let compiled = math.compile(substr);
+
     function pdf_func(x) {
       return compiled.evaluate({ x: x });
     }
+
     let mc_compiled = math.compile(this.name + ".sample(" + args_str);
     let kv_pairs = this.param_names.map((val, idx) => [val, args[idx]]);
     let params = Object.fromEntries(new Map(kv_pairs));
@@ -97,12 +99,14 @@ class NormalDistributionBinned extends BaseDistributionBinned {
     this.name = "normal";
     this.param_names = ["mean", "std"];
   }
+
   get_bounds() {
     return [
       this.params.mean - 4 * this.params.std,
       this.params.mean + 4 * this.params.std
     ];
   }
+
   bin() {
     return this._adabin(this.params.std);
   }
@@ -114,9 +118,11 @@ class UniformDistributionBinned extends BaseDistributionBinned {
     this.param_names = ["start_point", "end_point"];
     this.num_bins = 200;
   }
+
   get_bounds() {
     return [this.params.start_point, this.params.end_point];
   }
+
   bin() {
     let divider_pts = evenly_spaced_grid(
       this.params.start_point,
@@ -152,6 +158,7 @@ class LogNormalDistributionBinned extends BaseDistributionBinned {
     }
     return largest_buffer[n - 1];
   }
+
   get_bounds() {
     let samples = Array(this.n_bounds_samples)
       .fill(0)
@@ -161,6 +168,7 @@ class LogNormalDistributionBinned extends BaseDistributionBinned {
       this._nth_largest(samples, this.n_largest_bound_sample)
     ];
   }
+
   bin() {
     return this._adabin();
   }

src/components/editor/index.js

@@ -1,31 +0,0 @@
-import "./styles.css";
-const embed = require("vega-embed").embed;
-const get_pdf_from_user_input = require("./main.js").get_pdf_from_user_input;
-
-let [y, x] = get_pdf_from_user_input("normal(1, 1)  / normal(10, 1)");
-
-let pdf = x.map((val, idx) => ({ x: val, pdf: y[idx] }));
-
-let spec = {
-  data: {
-    values: pdf
-  },
-  mark: { type: "area", line: true },
-  encoding: {
-    x: { field: "x", type: "quantitative" },
-    y: {
-      field: "pdf",
-      type: "quantitative",
-      scale: { domain: [0, 3 * Math.max(...y)] }
-    }
-  },
-  width: 500
-};
-
-embed("#viz", spec);
-
-console.log(y.reduce((a, b) => a + b));
-
-document.getElementById("app").innerHTML = `
-<div id="viz"></div>
-`;

src/components/editor/main.js

@@ -267,11 +267,13 @@ function get_grid_transform(distr_string) {
     arg_strings.push("x_" + i.toString());
   }
   let compiled = math.compile(distr_string);
+
   function grid_transform(x) {
     let kv_pairs = arg_strings.map((val, idx) => [val, x[idx]]);
     let args_obj = Object.fromEntries(new Map(kv_pairs));
     return compiled.evaluate(args_obj);
   }
+
   return grid_transform;
 }