Merge pull request #8 from foretold-app/feature/1093

Form

src/components/DistBuilder.re

@@ -1,18 +1,23 @@
 open BsReform;
+open Antd.Grid;
 
 module FormConfig = [%lenses
   type state = {
     guesstimatorString: string,
     //
     domainType: string, // Complete, LeftLimited(...), RightLimited(...), LeftAndRightLimited(..., ...)
-    xPoint: string,
+    xPoint: float,
-    xPoint2: string,
+    xPoint2: float,
-    excludingProbabilityMass: string,
+    excludingProbabilityMass: float,
-    excludingProbabilityMass2: string,
+    excludingProbabilityMass2: float,
     //
     unitType: string, // UnspecifiedDistribution, TimeDistribution(zero, unit)
     zero: MomentRe.Moment.t,
     unit: string,
+    //
+    sampleCount: int,
+    outputXYPoints: int,
+    truncateTo: int,
   }
 ];
 
@@ -38,24 +43,19 @@ module FieldString = {
   };
 };
 
-module Styles = {
+module FieldNumber = {
-  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
+          <Antd.InputNumber
             value
-            onChange={BsReform.Helpers.handleChange(handleChange)}
+            onChange={e => {
+              e |> handleChange;
+              ();
+            }}
             onBlur={_ => validate()}
           />
         </Antd.Form.Item>
@@ -64,8 +64,100 @@ module FieldFloat = {
   };
 };
 
+module FieldFloat = {
+  [@react.component]
+  let make = (~field, ~label, ~className=Css.style([])) => {
+    <Form.Field
+      field
+      render={({handleChange, error, value, validate}) =>
+        <Antd.Form.Item label={label |> E.ste}>
+          <Antd.InputFloat
+            value
+            onChange={e => {
+              e |> handleChange;
+              ();
+            }}
+            onBlur={_ => validate()}
+            className
+          />
+        </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,
+        ~domain,
+        ~unit,
+        ~sampleCount,
+        ~outputXYPoints,
+        ~truncateTo,
+      ) => {
+    <Antd.Card title={"Distribution" |> E.ste}>
+      <div className=Styles.spacer />
+      <div>
+        <div>
+          {DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ())
+           |> DistPlusIngredients.toDistPlus(
+                ~sampleCount,
+                ~outputXYPoints,
+                ~truncateTo,
+              )
+           |> E.O.React.fmapOrNull(distPlus => <DistPlusPlot distPlus />)}
+        </div>
+      </div>
+    </Antd.Card>;
+  };
+};
+
 [@react.component]
 let make = () => {
+  let (reloader, setRealoader) = React.useState(() => 1);
   let reform =
     Form.use(
       ~validationStrategy=OnDemand,
@@ -73,14 +165,17 @@ let make = () => {
       ~onSubmit=({state}) => {None},
       ~initialState={
         guesstimatorString: "mm(5 to 20, floor(normal(20,2)), [.5, .5])",
-        domainType: "Complete",
+        domainType: "LeftLimited",
-        xPoint: "50.0",
+        xPoint: 50.0,
-        xPoint2: "60.0",
+        xPoint2: 60.0,
-        excludingProbabilityMass2: "0.5",
+        excludingProbabilityMass2: 0.5,
-        excludingProbabilityMass: "0.3",
+        excludingProbabilityMass: 0.3,
         unitType: "UnspecifiedDistribution",
         zero: MomentRe.momentNow(),
         unit: "days",
+        sampleCount: 10000,
+        outputXYPoints: 2000,
+        truncateTo: 1000,
       },
       (),
     );
@@ -95,27 +190,26 @@ let make = () => {
     | "Complete" => DistTypes.Complete
     | "LeftLimited" =>
       LeftLimited({
-        xPoint: reform.state.values.xPoint |> float_of_string,
+        xPoint: reform.state.values.xPoint,
-        excludingProbabilityMass:
+        excludingProbabilityMass: reform.state.values.excludingProbabilityMass,
-          reform.state.values.excludingProbabilityMass |> float_of_string,
       })
     | "RightLimited" =>
       RightLimited({
-        xPoint: reform.state.values.xPoint |> float_of_string,
+        xPoint: reform.state.values.xPoint2,
         excludingProbabilityMass:
-          reform.state.values.excludingProbabilityMass |> float_of_string,
+          reform.state.values.excludingProbabilityMass2,
       })
     | "LeftAndRightLimited" =>
       LeftAndRightLimited(
         {
-          xPoint: reform.state.values.xPoint |> float_of_string,
+          xPoint: reform.state.values.xPoint,
           excludingProbabilityMass:
-            reform.state.values.excludingProbabilityMass |> float_of_string,
+            reform.state.values.excludingProbabilityMass,
         },
         {
-          xPoint: reform.state.values.xPoint2 |> float_of_string,
+          xPoint: reform.state.values.xPoint2,
           excludingProbabilityMass:
-            reform.state.values.excludingProbabilityMass2 |> float_of_string,
+            reform.state.values.excludingProbabilityMass2,
         },
       )
     | _ => Js.Exn.raiseError("domain is unknown")
@@ -133,30 +227,69 @@ let make = () => {
     };
 
   let guesstimatorString = reform.state.values.guesstimatorString;
+  let sampleCount = reform.state.values.sampleCount;
+  let outputXYPoints = reform.state.values.outputXYPoints;
+  let truncateTo = reform.state.values.truncateTo |> E.O.some;
 
-  <div>
+  let demoDist =
+    React.useMemo1(
+      () => {
+        <DemoDist
+          guesstimatorString
+          domain
+          unit
+          sampleCount
+          outputXYPoints
+          truncateTo
+        />
+      },
+      [|
+        reform.state.values.guesstimatorString,
+        reform.state.values.domainType,
+        reform.state.values.xPoint |> string_of_float,
+        reform.state.values.xPoint2 |> string_of_float,
+        reform.state.values.xPoint2 |> string_of_float,
+        reform.state.values.excludingProbabilityMass |> string_of_float,
+        reform.state.values.excludingProbabilityMass2 |> string_of_float,
+        reform.state.values.unitType,
+        reform.state.values.zero |> E.M.format(E.M.format_standard),
+        reform.state.values.unit,
+        reform.state.values.sampleCount |> string_of_int,
+        reform.state.values.outputXYPoints |> string_of_int,
+        reform.state.values.truncateTo |> string_of_int,
+        reloader |> string_of_int,
+      |],
+    );
+
+  let onRealod = _ => {
+    setRealoader(_ => reloader + 1);
+  };
+
+  <div className=Styles.parent>
     <div className=Styles.spacer />
-    <div>
+    demoDist
-      <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>
+    <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"
               />
-          <div className=Styles.row>
+            </Col>
-            <div>
+          </Row>
+          <Row _type=`flex className=Styles.rows>
+            <Col span=4>
               <Form.Field
                 field=FormConfig.DomainType
                 render={({handleChange, value}) =>
@@ -178,32 +311,58 @@ let make = () => {
                   </Antd.Form.Item>
                 }
               />
-            </div>
+            </Col>
-            <div>
+            {<>
-              <FieldString field=FormConfig.XPoint label="X-point" />
+               <Col span=4>
-            </div>
+                 <FieldFloat
-            <div>
+                   field=FormConfig.XPoint
-              <FieldString
+                   label="Left X-point"
+                   className=Styles.groupA
+                 />
+               </Col>
+               <Col span=4>
+                 <FieldFloat
                    field=FormConfig.ExcludingProbabilityMass
-                label="Excluding Probability Mass"
+                   label="Left Excluding Probability Mass"
+                   className=Styles.groupA
                  />
-            </div>
+               </Col>
-            <div>
+             </>
-              <FieldString field=FormConfig.XPoint2 label="X-point (2)" />
+             |> E.showIf(
-            </div>
+                  E.L.contains(
-            <div>
+                    reform.state.values.domainType,
-              <FieldString
+                    ["LeftLimited", "LeftAndRightLimited"],
+                  ),
+                )}
+            {<>
+               <Col span=4>
+                 <FieldFloat
+                   field=FormConfig.XPoint2
+                   label="Right X-point"
+                   className=Styles.groupB
+                 />
+               </Col>
+               <Col span=4>
+                 <FieldFloat
                    field=FormConfig.ExcludingProbabilityMass2
-                label="Excluding Probability Mass (2)"
+                   label="Right Excluding Probability Mass"
+                   className=Styles.groupB
                  />
-            </div>
+               </Col>
-          </div>
+             </>
-          <div className=Styles.row>
+             |> E.showIf(
-            <div>
+                  E.L.contains(
+                    reform.state.values.domainType,
+                    ["RightLimited", "LeftAndRightLimited"],
+                  ),
+                )}
+          </Row>
+          <Row _type=`flex className=Styles.rows>
+            <Col span=4>
               <Form.Field
                 field=FormConfig.UnitType
                 render={({handleChange, value}) =>
-                  <Antd.Form.Item label={"Zero Type" |> E.ste}>
+                  <Antd.Form.Item label={"Unit Type" |> E.ste}>
                     <Antd.Select value onChange={e => e |> handleChange}>
                       <Antd.Select.Option value="UnspecifiedDistribution">
                         {"Unspecified Distribution" |> E.ste}
@@ -215,12 +374,12 @@ let make = () => {
                   </Antd.Form.Item>
                 }
               />
-            </div>
+            </Col>
-            <div>
+            <Col span=4>
               <Form.Field
                 field=FormConfig.Zero
                 render={({handleChange, value}) =>
-                  <Antd.Form.Item label={"Zero" |> E.ste}>
+                  <Antd.Form.Item label={"Zero Point" |> E.ste}>
                     <Antd_DatePicker
                       value
                       onChange={e => {
@@ -231,48 +390,67 @@ let make = () => {
                   </Antd.Form.Item>
                 }
               />
-            </div>
+            </Col>
-            <div>
+            <Col span=4>
               <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}
+                        {"Days" |> E.ste}
                       </Antd.Select.Option>
                       <Antd.Select.Option value="hours">
-                        {"hours" |> E.ste}
+                        {"Hours" |> E.ste}
                       </Antd.Select.Option>
                       <Antd.Select.Option value="milliseconds">
-                        {"milliseconds" |> E.ste}
+                        {"Milliseconds" |> E.ste}
                       </Antd.Select.Option>
                       <Antd.Select.Option value="minutes">
-                        {"minutes" |> E.ste}
+                        {"Minutes" |> E.ste}
                       </Antd.Select.Option>
                       <Antd.Select.Option value="months">
-                        {"months" |> E.ste}
+                        {"Months" |> E.ste}
                       </Antd.Select.Option>
                       <Antd.Select.Option value="quarters">
-                        {"quarters" |> E.ste}
+                        {"Quarters" |> E.ste}
                       </Antd.Select.Option>
                       <Antd.Select.Option value="seconds">
-                        {"seconds" |> E.ste}
+                        {"Seconds" |> E.ste}
                       </Antd.Select.Option>
                       <Antd.Select.Option value="weeks">
-                        {"weeks" |> E.ste}
+                        {"Weeks" |> E.ste}
                       </Antd.Select.Option>
                       <Antd.Select.Option value="years">
-                        {"years" |> E.ste}
+                        {"Years" |> E.ste}
                       </Antd.Select.Option>
                     </Antd.Select>
                   </Antd.Form.Item>
                 }
               />
-            </div>
+            </Col>
-          </div>
+          </Row>
+          <Row _type=`flex className=Styles.rows>
+            <Col span=4>
+              <FieldNumber field=FormConfig.SampleCount label="Sample Count" />
+            </Col>
+            <Col span=4>
+              <FieldNumber
+                field=FormConfig.OutputXYPoints
+                label="Output XY-points"
+              />
+            </Col>
+            <Col span=4>
+              <FieldNumber field=FormConfig.TruncateTo label="Truncate To" />
+            </Col>
+          </Row>
+          <Antd.Button
+            _type=`primary icon=Antd.IconName.reload onClick=onRealod>
+            {"Update Distribution" |> E.ste}
+          </Antd.Button>
         </Antd.Form>
       </Form.Provider>
-    </div>
+    </Antd.Card>
+    <div className=Styles.spacer />
   </div>;
 };

src/utility/E.re

@@ -299,3 +299,4 @@ module JsArray = {
 };
 
 let ste = React.string;
+let showIf = (cond, comp) => cond ? comp : ReasonReact.null;