Merge pull request #7 from foretold-app/feature/1091

Feature/1091

src/App.re

@@ -1,11 +1,13 @@
 type route =
   | Model(string)
+  | DistBuilder
   | Home
   | NotFound;
 
 let routeToPath = route =>
   switch (route) {
-  | Model(i) => "/m/" ++ i
+  | Model(modelId) => "/m/" ++ modelId
+  | DistBuilder => "/dist-builder"
   | Home => "/"
   | _ => "/"
   };
@@ -66,11 +68,14 @@ module Menu = {
       <Item href={routeToPath(Home)} key="home"> {"Home" |> E.ste} </Item>
       {Models.all
        |> E.A.fmap((model: Prop.Model.t) => {
-            <Item href={routeToPath(Model(model.id))} key="ea-funds">
+            <Item href={routeToPath(Model(model.id))} key={model.id}>
               {model.name |> E.ste}
             </Item>
           })
        |> ReasonReact.array}
+      <Item href={routeToPath(DistBuilder)} key="dist-builder">
+        {"Dist Builder" |> E.ste}
+      </Item>
     </div>;
   };
 };
@@ -82,6 +87,7 @@ let make = () => {
   let routing =
     switch (url.path) {
     | ["m", modelId] => Model(modelId)
+    | ["dist-builder"] => DistBuilder
     | [] => Home
     | _ => NotFound
     };
@@ -89,13 +95,14 @@ let make = () => {
   <div className="w-full max-w-screen-xl mx-auto px-6">
     <Menu />
     {switch (routing) {
-     | Model(n) =>
+     | Model(id) =>
-       switch (Models.getById(n)) {
+       switch (Models.getById(id)) {
-       | Some(model) => <FormBuilder.ModelForm model />
+       | Some(model) => <FormBuilder.ModelForm model key=id />
        | None => <div> {"Page is not found" |> E.ste} </div>
        }
+     | DistBuilder => <DistBuilder />
      | Home => <div> {"Welcome" |> E.ste} </div>
      | _ => <div> {"Page is not found" |> E.ste} </div>
      }}
   </div>;
-};
+};

src/components/DistBuilder.re

@@ -0,0 +1,278 @@
+open BsReform;
+
+module FormConfig = [%lenses
+  type state = {
+    guesstimatorString: string,
+    //
+    domainType: string, // Complete, LeftLimited(...), RightLimited(...), LeftAndRightLimited(..., ...)
+    xPoint: string,
+    xPoint2: string,
+    excludingProbabilityMass: string,
+    excludingProbabilityMass2: string,
+    //
+    unitType: string, // UnspecifiedDistribution, TimeDistribution(zero, unit)
+    zero: MomentRe.Moment.t,
+    unit: 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 row =
+    style([display(`flex), selector("div > div", [flex(`num(1.))])]);
+  let form = style([backgroundColor(hex("eee")), padding(em(1.))]);
+  let spacer = style([marginTop(em(3.))]);
+};
+
+module FieldFloat = {
+  [@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>
+      }
+    />;
+  };
+};
+
+[@react.component]
+let make = () => {
+  let reform =
+    Form.use(
+      ~validationStrategy=OnDemand,
+      ~schema,
+      ~onSubmit=({state}) => {None},
+      ~initialState={
+        guesstimatorString: "mm(5 to 20, floor(normal(20,2)), [.5, .5])",
+        domainType: "Complete",
+        xPoint: "50.0",
+        xPoint2: "60.0",
+        excludingProbabilityMass2: "0.5",
+        excludingProbabilityMass: "0.3",
+        unitType: "UnspecifiedDistribution",
+        zero: MomentRe.momentNow(),
+        unit: "days",
+      },
+      (),
+    );
+
+  let onSubmit = e => {
+    e->ReactEvent.Synthetic.preventDefault;
+    reform.submit();
+  };
+
+  let domain =
+    switch (reform.state.values.domainType) {
+    | "Complete" => DistTypes.Complete
+    | "LeftLimited" =>
+      LeftLimited({
+        xPoint: reform.state.values.xPoint |> float_of_string,
+        excludingProbabilityMass:
+          reform.state.values.excludingProbabilityMass |> float_of_string,
+      })
+    | "RightLimited" =>
+      RightLimited({
+        xPoint: reform.state.values.xPoint |> float_of_string,
+        excludingProbabilityMass:
+          reform.state.values.excludingProbabilityMass |> float_of_string,
+      })
+    | "LeftAndRightLimited" =>
+      LeftAndRightLimited(
+        {
+          xPoint: reform.state.values.xPoint |> float_of_string,
+          excludingProbabilityMass:
+            reform.state.values.excludingProbabilityMass |> float_of_string,
+        },
+        {
+          xPoint: reform.state.values.xPoint2 |> float_of_string,
+          excludingProbabilityMass:
+            reform.state.values.excludingProbabilityMass2 |> float_of_string,
+        },
+      )
+    | _ => Js.Exn.raiseError("domain is unknown")
+    };
+
+  let unit =
+    switch (reform.state.values.unitType) {
+    | "UnspecifiedDistribution" => DistTypes.UnspecifiedDistribution
+    | "TimeDistribution" =>
+      TimeDistribution({
+        zero: reform.state.values.zero,
+        unit: reform.state.values.unit |> TimeTypes.TimeUnit.ofString,
+      })
+    | _ => Js.Exn.raiseError("unit is unknown")
+    };
+
+  let guesstimatorString = reform.state.values.guesstimatorString;
+
+  <div>
+    <div className=Styles.spacer />
+    <div>
+      <div>
+        {DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ())
+         |> DistPlusIngredients.toDistPlus(
+              ~sampleCount=10000,
+              ~outputXYPoints=2000,
+              ~truncateTo=Some(1000),
+            )
+         |> E.O.React.fmapOrNull(distPlus => <DistPlusPlot distPlus />)}
+      </div>
+    </div>
+    <div className=Styles.spacer />
+    <div className=Styles.form>
+      <Form.Provider value=reform>
+        <Antd.Form onSubmit>
+          <FieldString
+            field=FormConfig.GuesstimatorString
+            label="Guesstimator String"
+          />
+          <div className=Styles.row>
+            <div>
+              <Form.Field
+                field=FormConfig.DomainType
+                render={({handleChange, value}) =>
+                  <Antd.Form.Item label={"Domain Type" |> E.ste}>
+                    <Antd.Select value onChange={e => e |> handleChange}>
+                      <Antd.Select.Option value="Complete">
+                        {"Complete" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="LeftLimited">
+                        {"Left Limited" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="RightLimited">
+                        {"Right Limited" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="LeftAndRightLimited">
+                        {"Left And Right Limited" |> E.ste}
+                      </Antd.Select.Option>
+                    </Antd.Select>
+                  </Antd.Form.Item>
+                }
+              />
+            </div>
+            <div>
+              <FieldString field=FormConfig.XPoint label="X-point" />
+            </div>
+            <div>
+              <FieldString
+                field=FormConfig.ExcludingProbabilityMass
+                label="Excluding Probability Mass"
+              />
+            </div>
+            <div>
+              <FieldString field=FormConfig.XPoint2 label="X-point (2)" />
+            </div>
+            <div>
+              <FieldString
+                field=FormConfig.ExcludingProbabilityMass2
+                label="Excluding Probability Mass (2)"
+              />
+            </div>
+          </div>
+          <div className=Styles.row>
+            <div>
+              <Form.Field
+                field=FormConfig.UnitType
+                render={({handleChange, value}) =>
+                  <Antd.Form.Item label={"Zero Type" |> E.ste}>
+                    <Antd.Select value onChange={e => e |> handleChange}>
+                      <Antd.Select.Option value="UnspecifiedDistribution">
+                        {"Unspecified Distribution" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="TimeDistribution">
+                        {"Time Distribution" |> E.ste}
+                      </Antd.Select.Option>
+                    </Antd.Select>
+                  </Antd.Form.Item>
+                }
+              />
+            </div>
+            <div>
+              <Form.Field
+                field=FormConfig.Zero
+                render={({handleChange, value}) =>
+                  <Antd.Form.Item label={"Zero" |> E.ste}>
+                    <Antd_DatePicker
+                      value
+                      onChange={e => {
+                        e |> handleChange;
+                        _ => ();
+                      }}
+                    />
+                  </Antd.Form.Item>
+                }
+              />
+            </div>
+            <div>
+              <Form.Field
+                field=FormConfig.Unit
+                render={({handleChange, value}) =>
+                  <Antd.Form.Item label={"Unit" |> E.ste}>
+                    <Antd.Select value onChange={e => e |> handleChange}>
+                      <Antd.Select.Option value="days">
+                        {"days" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="hours">
+                        {"hours" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="milliseconds">
+                        {"milliseconds" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="minutes">
+                        {"minutes" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="months">
+                        {"months" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="quarters">
+                        {"quarters" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="seconds">
+                        {"seconds" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="weeks">
+                        {"weeks" |> E.ste}
+                      </Antd.Select.Option>
+                      <Antd.Select.Option value="years">
+                        {"years" |> E.ste}
+                      </Antd.Select.Option>
+                    </Antd.Select>
+                  </Antd.Form.Item>
+                }
+              />
+            </div>
+          </div>
+        </Antd.Form>
+      </Form.Provider>
+    </div>
+  </div>;
+};

src/distributions/TimeTypes.re

@@ -33,6 +33,20 @@ module TimeUnit = {
     | `weeks => "weeks"
     | `years => "years"
     };
+
+  let ofString = (timeUnit: string) =>
+    switch (timeUnit) {
+    | "days" => `days
+    | "hours" => `hours
+    | "milliseconds" => `milliseconds
+    | "minutes" => `minutes
+    | "months" => `months
+    | "quarters" => `quarters
+    | "seconds" => `seconds
+    | "weeks" => `weeks
+    | "years" => `years
+    | _ => Js.Exn.raiseError("TimeUnit is unknown")
+    };
 };
 
 module TimePoint = {
@@ -72,4 +86,4 @@ module RelativeTimePoint = {
     | Time(r) => _timeToX(r, timeVector.zero, timeVector.unit)
     | XValue(r) => r
     };
-};
+};