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

Form
2020-02-27 09:44:59 +00:00 · 2020-02-27 09:44:59 +00:00 · fc7b7cc070
commit fc7b7cc070
parent 6c6f1e151c 22a9646bf1
2 changed files with 267 additions and 88 deletions
--- a/src/components/DistBuilder.re
+++ b/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,
-    xPoint2: string,
-    excludingProbabilityMass: string,
-    excludingProbabilityMass2: string,
+    xPoint: float,
+    xPoint2: float,
+    excludingProbabilityMass: float,
+    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 = {
-  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 = {
+module FieldNumber = {
  [@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",
-        xPoint: "50.0",
-        xPoint2: "60.0",
-        excludingProbabilityMass2: "0.5",
-        excludingProbabilityMass: "0.3",
+        domainType: "LeftLimited",
+        xPoint: 50.0,
+        xPoint2: 60.0,
+        excludingProbabilityMass2: 0.5,
+        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,
-        excludingProbabilityMass:
-          reform.state.values.excludingProbabilityMass |> float_of_string,
+        xPoint: reform.state.values.xPoint,
+        excludingProbabilityMass: reform.state.values.excludingProbabilityMass,
      })
    | "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>
-      <div>
-        {DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ())
-         |> DistPlusIngredients.toDistPlus(
-              ~sampleCount=10000,
-              ~outputXYPoints=2000,
-              ~truncateTo=Some(1000),
-            )
-         |> E.O.React.fmapOrNull(distPlus => <DistPlusPlot distPlus />)}
-      </div>
-    </div>
+    demoDist
    <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>
-            <div>
+            </Col>
+          </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>
-            <div>
-              <FieldString field=FormConfig.XPoint label="X-point" />
-            </div>
-            <div>
-              <FieldString
+            </Col>
+            {<>
+               <Col span=4>
+                 <FieldFloat
+                   field=FormConfig.XPoint
+                   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>
-            <div>
-              <FieldString field=FormConfig.XPoint2 label="X-point (2)" />
-            </div>
-            <div>
-              <FieldString
+               </Col>
+             </>
+             |> E.showIf(
+                  E.L.contains(
+                    reform.state.values.domainType,
+                    ["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>
-          </div>
-          <div className=Styles.row>
-            <div>
+               </Col>
+             </>
+             |> E.showIf(
+                  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>
-            <div>
+            </Col>
+            <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>
-            <div>
+            </Col>
+            <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>
-          </div>
+            </Col>
+          </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>;
 };
--- a/src/utility/E.re
+++ b/src/utility/E.re
@ -299,3 +299,4 @@ module JsArray = {
 };

 let ste = React.string;
+let showIf = (cond, comp) => cond ? comp : ReasonReact.null;