From 95585fb43d89d4e39ee853dc08faa155b618740f Mon Sep 17 00:00:00 2001 From: Roman Galochkin Date: Thu, 27 Feb 2020 09:21:47 +0300 Subject: [PATCH 1/6] Makes use Antd components --- src/components/DistBuilder.re | 211 ++++++++++++++++++---------------- 1 file changed, 115 insertions(+), 96 deletions(-) diff --git a/src/components/DistBuilder.re b/src/components/DistBuilder.re index fc5d891d..6a3e60a1 100644 --- a/src/components/DistBuilder.re +++ b/src/components/DistBuilder.re @@ -1,4 +1,5 @@ open BsReform; +open Antd.Grid; module FormConfig = [%lenses type state = { @@ -40,10 +41,20 @@ module FieldString = { module Styles = { open Css; - let row = - style([display(`flex), selector("div > div", [flex(`num(1.))])]); + 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))], + ), + ]); let form = style([backgroundColor(hex("eee")), padding(em(1.))]); - let spacer = style([marginTop(em(3.))]); + let dist = style([padding(em(1.))]); + let spacer = style([marginTop(em(1.))]); }; module FieldFloat = { @@ -64,6 +75,26 @@ module FieldFloat = { }; }; +module DemoDist = { + [@react.component] + let make = (~guesstimatorString, ~domain, ~unit) => { + E.ste}> +
+
+
+ {DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ()) + |> DistPlusIngredients.toDistPlus( + ~sampleCount=10000, + ~outputXYPoints=2000, + ~truncateTo=Some(1000), + ) + |> E.O.React.fmapOrNull(distPlus => )} +
+
+ ; + }; +}; + [@react.component] let make = () => { let reform = @@ -134,29 +165,36 @@ let make = () => { let guesstimatorString = reform.state.values.guesstimatorString; + let demoDist = + React.useMemo1( + () => {}, + [| + reform.state.values.guesstimatorString, + reform.state.values.domainType, + reform.state.values.xPoint, + reform.state.values.xPoint2, + reform.state.values.xPoint2, + reform.state.values.excludingProbabilityMass, + reform.state.values.excludingProbabilityMass2, + reform.state.values.unitType, + reform.state.values.zero |> E.M.format(E.M.format_standard), + reform.state.values.unit, + |], + ); +
-
-
- {DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ()) - |> DistPlusIngredients.toDistPlus( - ~sampleCount=10000, - ~outputXYPoints=2000, - ~truncateTo=Some(1000), - ) - |> E.O.React.fmapOrNull(distPlus => )} -
-
+ demoDist
-
+ E.ste}> -
-
+ + @@ -178,28 +216,36 @@ let make = () => { } /> -
-
- -
-
- -
-
- -
-
- -
-
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + @@ -215,64 +261,37 @@ let make = () => { } /> -
-
- - E.ste}> - { - e |> handleChange; - _ => (); - }} - /> - - } - /> -
-
- - E.ste}> - e |> handleChange}> - - {"days" |> E.ste} - - - {"hours" |> E.ste} - - - {"milliseconds" |> E.ste} - - - {"minutes" |> E.ste} - - - {"months" |> E.ste} - - - {"quarters" |> E.ste} - - - {"seconds" |> E.ste} - - - {"weeks" |> E.ste} - - - {"years" |> E.ste} - - - - } - /> -
-
+ + + + + + E.ste}> + { + e |> handleChange; + _ => (); + }} + /> + + } + /> + + + + + + + + -
+
; }; From 1742a38724df1cd0fa3d5fefe9986f58612a4168 Mon Sep 17 00:00:00 2001 From: Roman Galochkin Date: Thu, 27 Feb 2020 10:00:03 +0300 Subject: [PATCH 2/6] Adds inputs --- src/components/DistBuilder.re | 270 +++++++++++++++++++++------------- 1 file changed, 167 insertions(+), 103 deletions(-) diff --git a/src/components/DistBuilder.re b/src/components/DistBuilder.re index 6a3e60a1..02c674cb 100644 --- a/src/components/DistBuilder.re +++ b/src/components/DistBuilder.re @@ -6,14 +6,18 @@ module FormConfig = [%lenses 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, } ]; @@ -39,6 +43,48 @@ module FieldString = { }; }; +module FieldNumber = { + [@react.component] + let make = (~field, ~label) => { + + E.ste}> + { + e |> handleChange; + (); + }} + onBlur={_ => validate()} + /> + + } + />; + }; +}; + +module FieldFloat = { + [@react.component] + let make = (~field, ~label) => { + + E.ste}> + { + e |> handleChange; + (); + }} + onBlur={_ => validate()} + /> + + } + />; + }; +}; + module Styles = { open Css; let rows = @@ -51,42 +97,38 @@ module Styles = { ">.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.))])]); let form = style([backgroundColor(hex("eee")), padding(em(1.))]); let dist = style([padding(em(1.))]); let spacer = style([marginTop(em(1.))]); }; -module FieldFloat = { - [@react.component] - let make = (~field, ~label) => { - - E.ste}> - validate()} - /> - - } - />; - }; -}; - module DemoDist = { [@react.component] - let make = (~guesstimatorString, ~domain, ~unit) => { + let make = + ( + ~guesstimatorString, + ~domain, + ~unit, + ~sampleCount, + ~outputXYPoints, + ~truncateTo, + ) => { E.ste}>
{DistPlusIngredients.make(~guesstimatorString, ~domain, ~unit, ()) |> DistPlusIngredients.toDistPlus( - ~sampleCount=10000, - ~outputXYPoints=2000, - ~truncateTo=Some(1000), + ~sampleCount, + ~outputXYPoints, + ~truncateTo, ) |> E.O.React.fmapOrNull(distPlus => )}
@@ -105,13 +147,16 @@ let make = () => { ~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", + 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, }, (), ); @@ -126,27 +171,25 @@ 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, - excludingProbabilityMass: - reform.state.values.excludingProbabilityMass |> float_of_string, + xPoint: reform.state.values.xPoint, + excludingProbabilityMass: reform.state.values.excludingProbabilityMass, }) | "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") @@ -164,36 +207,55 @@ 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; let demoDist = React.useMemo1( - () => {}, + () => { + + }, [| reform.state.values.guesstimatorString, reform.state.values.domainType, - reform.state.values.xPoint, - reform.state.values.xPoint2, - reform.state.values.xPoint2, - reform.state.values.excludingProbabilityMass, - reform.state.values.excludingProbabilityMass2, + 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, |], ); -
+
demoDist
E.ste}> - - + + + + + + { } /> - - - - - - - - - + + - - - - - - - - - + + + + + + + + - + { } /> - - - - - E.ste}> - { - e |> handleChange; - _ => (); - }} - /> - - } - /> - - - - - + + + E.ste}> + { + e |> handleChange; + _ => (); + }} + /> + + } + /> + + + + + + + + + + + + + + - +
; }; From 1af461a7d3962b8b6b25b1782f60e342a9225006 Mon Sep 17 00:00:00 2001 From: Roman Galochkin Date: Thu, 27 Feb 2020 10:17:10 +0300 Subject: [PATCH 3/6] Adds reload buttons --- src/components/DistBuilder.re | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/DistBuilder.re b/src/components/DistBuilder.re index 02c674cb..78f6fd79 100644 --- a/src/components/DistBuilder.re +++ b/src/components/DistBuilder.re @@ -103,7 +103,10 @@ module Styles = { ), ]); let parent = - style([selector(".ant-input-number", [width(`percent(100.))])]); + 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.))]); @@ -139,6 +142,7 @@ module DemoDist = { [@react.component] let make = () => { + let (reloader, setRealoader) = React.useState(() => 1); let reform = Form.use( ~validationStrategy=OnDemand, @@ -237,14 +241,27 @@ let make = () => { 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); + }; +
demoDist
- E.ste}> + E.ste} + extra={ + + }> @@ -353,6 +370,10 @@ let make = () => { + + {"Update Distribution" |> E.ste} + From de882523bb9cb9b9621e6a23e5de45f9981d3d50 Mon Sep 17 00:00:00 2001 From: Roman Galochkin Date: Thu, 27 Feb 2020 10:43:37 +0300 Subject: [PATCH 4/6] Hides inputs --- src/components/DistBuilder.re | 123 +++++++++++++++++++++++++++------- src/utility/E.re | 1 + 2 files changed, 99 insertions(+), 25 deletions(-) diff --git a/src/components/DistBuilder.re b/src/components/DistBuilder.re index 78f6fd79..3f82b176 100644 --- a/src/components/DistBuilder.re +++ b/src/components/DistBuilder.re @@ -66,7 +66,7 @@ module FieldNumber = { module FieldFloat = { [@react.component] - let make = (~field, ~label) => { + let make = (~field, ~label, ~className=Css.style([])) => { @@ -78,6 +78,7 @@ module FieldFloat = { (); }} onBlur={_ => validate()} + className /> } @@ -110,6 +111,20 @@ module Styles = { 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 = { @@ -150,7 +165,7 @@ let make = () => { ~onSubmit=({state}) => {None}, ~initialState={ guesstimatorString: "mm(5 to 20, floor(normal(20,2)), [.5, .5])", - domainType: "Complete", + domainType: "LeftLimited", xPoint: 50.0, xPoint2: 60.0, excludingProbabilityMass2: 0.5, @@ -296,31 +311,57 @@ let make = () => { } /> - - - - - - - - - - - - + {<> + + + + + + + + |> E.showIf( + E.L.contains( + reform.state.values.domainType, + ["LeftLimited", "RightLimited", "LeftAndRightLimited"], + ), + )} + {<> + + + + + + + + |> E.showIf( + E.L.contains( + reform.state.values.domainType, + ["LeftAndRightLimited"], + ), + )} - E.ste}> + E.ste}> e |> handleChange}> {"Unspecified Distribution" |> E.ste} @@ -337,7 +378,7 @@ let make = () => { - E.ste}> + E.ste}> { @@ -350,9 +391,41 @@ let make = () => { /> - + E.ste}> + e |> handleChange}> + + {"Days" |> E.ste} + + + {"Hours" |> E.ste} + + + {"Milliseconds" |> E.ste} + + + {"Minutes" |> E.ste} + + + {"Months" |> E.ste} + + + {"Quarters" |> E.ste} + + + {"Seconds" |> E.ste} + + + {"Weeks" |> E.ste} + + + {"Years" |> E.ste} + + + + } /> diff --git a/src/utility/E.re b/src/utility/E.re index 9be83a65..2e0ba052 100644 --- 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; From 4b0d9d6409e69b2f4268d1a82a17f51ccf536dfd Mon Sep 17 00:00:00 2001 From: Roman Galochkin Date: Thu, 27 Feb 2020 11:04:54 +0300 Subject: [PATCH 5/6] Hides inputs --- src/components/DistBuilder.re | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DistBuilder.re b/src/components/DistBuilder.re index 3f82b176..d8c7b280 100644 --- a/src/components/DistBuilder.re +++ b/src/components/DistBuilder.re @@ -280,7 +280,7 @@ let make = () => { - + Date: Thu, 27 Feb 2020 11:50:46 +0300 Subject: [PATCH 6/6] Adds right color annotation --- src/components/DistBuilder.re | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/DistBuilder.re b/src/components/DistBuilder.re index d8c7b280..3ccedc35 100644 --- a/src/components/DistBuilder.re +++ b/src/components/DistBuilder.re @@ -195,8 +195,9 @@ let make = () => { }) | "RightLimited" => RightLimited({ - xPoint: reform.state.values.xPoint, - excludingProbabilityMass: reform.state.values.excludingProbabilityMass, + xPoint: reform.state.values.xPoint2, + excludingProbabilityMass: + reform.state.values.excludingProbabilityMass2, }) | "LeftAndRightLimited" => LeftAndRightLimited( @@ -315,14 +316,14 @@ let make = () => { @@ -330,21 +331,21 @@ let make = () => { |> E.showIf( E.L.contains( reform.state.values.domainType, - ["LeftLimited", "RightLimited", "LeftAndRightLimited"], + ["LeftLimited", "LeftAndRightLimited"], ), )} {<> @@ -352,7 +353,7 @@ let make = () => { |> E.showIf( E.L.contains( reform.state.values.domainType, - ["LeftAndRightLimited"], + ["RightLimited", "LeftAndRightLimited"], ), )}