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

Form
This commit is contained in:
Ozzie Gooen 2020-02-27 09:44:59 +00:00 committed by GitHub
commit fc7b7cc070
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 267 additions and 88 deletions

View File

@ -1,18 +1,23 @@
open BsReform; open BsReform;
open Antd.Grid;
module FormConfig = [%lenses module FormConfig = [%lenses
type state = { type state = {
guesstimatorString: string, guesstimatorString: string,
// //
domainType: string, // Complete, LeftLimited(...), RightLimited(...), LeftAndRightLimited(..., ...) 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) unitType: string, // UnspecifiedDistribution, TimeDistribution(zero, unit)
zero: MomentRe.Moment.t, zero: MomentRe.Moment.t,
unit: string, 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] [@react.component]
let make = (~field, ~label) => { let make = (~field, ~label) => {
<Form.Field <Form.Field
field field
render={({handleChange, error, value, validate}) => render={({handleChange, error, value, validate}) =>
<Antd.Form.Item label={label |> E.ste}> <Antd.Form.Item label={label |> E.ste}>
<Antd.Input <Antd.InputNumber
value value
onChange={BsReform.Helpers.handleChange(handleChange)} onChange={e => {
e |> handleChange;
();
}}
onBlur={_ => validate()} onBlur={_ => validate()}
/> />
</Antd.Form.Item> </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] [@react.component]
let make = () => { let make = () => {
let (reloader, setRealoader) = React.useState(() => 1);
let reform = let reform =
Form.use( Form.use(
~validationStrategy=OnDemand, ~validationStrategy=OnDemand,
@ -73,14 +165,17 @@ let make = () => {
~onSubmit=({state}) => {None}, ~onSubmit=({state}) => {None},
~initialState={ ~initialState={
guesstimatorString: "mm(5 to 20, floor(normal(20,2)), [.5, .5])", 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", unitType: "UnspecifiedDistribution",
zero: MomentRe.momentNow(), zero: MomentRe.momentNow(),
unit: "days", unit: "days",
sampleCount: 10000,
outputXYPoints: 2000,
truncateTo: 1000,
}, },
(), (),
); );
@ -95,27 +190,26 @@ let make = () => {
| "Complete" => DistTypes.Complete | "Complete" => DistTypes.Complete
| "LeftLimited" => | "LeftLimited" =>
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" =>
RightLimited({ RightLimited({
xPoint: reform.state.values.xPoint |> float_of_string, xPoint: reform.state.values.xPoint2,
excludingProbabilityMass: excludingProbabilityMass:
reform.state.values.excludingProbabilityMass |> float_of_string, reform.state.values.excludingProbabilityMass2,
}) })
| "LeftAndRightLimited" => | "LeftAndRightLimited" =>
LeftAndRightLimited( LeftAndRightLimited(
{ {
xPoint: reform.state.values.xPoint |> float_of_string, xPoint: reform.state.values.xPoint,
excludingProbabilityMass: 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: excludingProbabilityMass:
reform.state.values.excludingProbabilityMass2 |> float_of_string, reform.state.values.excludingProbabilityMass2,
}, },
) )
| _ => Js.Exn.raiseError("domain is unknown") | _ => Js.Exn.raiseError("domain is unknown")
@ -133,30 +227,69 @@ let make = () => {
}; };
let guesstimatorString = reform.state.values.guesstimatorString; 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 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.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> <Form.Provider value=reform>
<Antd.Form onSubmit> <Antd.Form onSubmit>
<FieldString <Row _type=`flex className=Styles.rows>
field=FormConfig.GuesstimatorString <Col span=12>
label="Guesstimator String" <FieldString
/> field=FormConfig.GuesstimatorString
<div className=Styles.row> label="Guesstimator String"
<div> />
</Col>
</Row>
<Row _type=`flex className=Styles.rows>
<Col span=4>
<Form.Field <Form.Field
field=FormConfig.DomainType field=FormConfig.DomainType
render={({handleChange, value}) => render={({handleChange, value}) =>
@ -178,32 +311,58 @@ let make = () => {
</Antd.Form.Item> </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"
field=FormConfig.ExcludingProbabilityMass className=Styles.groupA
label="Excluding Probability Mass" />
/> </Col>
</div> <Col span=4>
<div> <FieldFloat
<FieldString field=FormConfig.XPoint2 label="X-point (2)" /> field=FormConfig.ExcludingProbabilityMass
</div> label="Left Excluding Probability Mass"
<div> className=Styles.groupA
<FieldString />
field=FormConfig.ExcludingProbabilityMass2 </Col>
label="Excluding Probability Mass (2)" </>
/> |> E.showIf(
</div> E.L.contains(
</div> reform.state.values.domainType,
<div className=Styles.row> ["LeftLimited", "LeftAndRightLimited"],
<div> ),
)}
{<>
<Col span=4>
<FieldFloat
field=FormConfig.XPoint2
label="Right X-point"
className=Styles.groupB
/>
</Col>
<Col span=4>
<FieldFloat
field=FormConfig.ExcludingProbabilityMass2
label="Right Excluding Probability Mass"
className=Styles.groupB
/>
</Col>
</>
|> E.showIf(
E.L.contains(
reform.state.values.domainType,
["RightLimited", "LeftAndRightLimited"],
),
)}
</Row>
<Row _type=`flex className=Styles.rows>
<Col span=4>
<Form.Field <Form.Field
field=FormConfig.UnitType field=FormConfig.UnitType
render={({handleChange, value}) => 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 value onChange={e => e |> handleChange}>
<Antd.Select.Option value="UnspecifiedDistribution"> <Antd.Select.Option value="UnspecifiedDistribution">
{"Unspecified Distribution" |> E.ste} {"Unspecified Distribution" |> E.ste}
@ -215,12 +374,12 @@ let make = () => {
</Antd.Form.Item> </Antd.Form.Item>
} }
/> />
</div> </Col>
<div> <Col span=4>
<Form.Field <Form.Field
field=FormConfig.Zero field=FormConfig.Zero
render={({handleChange, value}) => render={({handleChange, value}) =>
<Antd.Form.Item label={"Zero" |> E.ste}> <Antd.Form.Item label={"Zero Point" |> E.ste}>
<Antd_DatePicker <Antd_DatePicker
value value
onChange={e => { onChange={e => {
@ -231,48 +390,67 @@ let make = () => {
</Antd.Form.Item> </Antd.Form.Item>
} }
/> />
</div> </Col>
<div> <Col span=4>
<Form.Field <Form.Field
field=FormConfig.Unit field=FormConfig.Unit
render={({handleChange, value}) => render={({handleChange, value}) =>
<Antd.Form.Item label={"Unit" |> E.ste}> <Antd.Form.Item label={"Unit" |> E.ste}>
<Antd.Select value onChange={e => e |> handleChange}> <Antd.Select value onChange={e => e |> handleChange}>
<Antd.Select.Option value="days"> <Antd.Select.Option value="days">
{"days" |> E.ste} {"Days" |> E.ste}
</Antd.Select.Option> </Antd.Select.Option>
<Antd.Select.Option value="hours"> <Antd.Select.Option value="hours">
{"hours" |> E.ste} {"Hours" |> E.ste}
</Antd.Select.Option> </Antd.Select.Option>
<Antd.Select.Option value="milliseconds"> <Antd.Select.Option value="milliseconds">
{"milliseconds" |> E.ste} {"Milliseconds" |> E.ste}
</Antd.Select.Option> </Antd.Select.Option>
<Antd.Select.Option value="minutes"> <Antd.Select.Option value="minutes">
{"minutes" |> E.ste} {"Minutes" |> E.ste}
</Antd.Select.Option> </Antd.Select.Option>
<Antd.Select.Option value="months"> <Antd.Select.Option value="months">
{"months" |> E.ste} {"Months" |> E.ste}
</Antd.Select.Option> </Antd.Select.Option>
<Antd.Select.Option value="quarters"> <Antd.Select.Option value="quarters">
{"quarters" |> E.ste} {"Quarters" |> E.ste}
</Antd.Select.Option> </Antd.Select.Option>
<Antd.Select.Option value="seconds"> <Antd.Select.Option value="seconds">
{"seconds" |> E.ste} {"Seconds" |> E.ste}
</Antd.Select.Option> </Antd.Select.Option>
<Antd.Select.Option value="weeks"> <Antd.Select.Option value="weeks">
{"weeks" |> E.ste} {"Weeks" |> E.ste}
</Antd.Select.Option> </Antd.Select.Option>
<Antd.Select.Option value="years"> <Antd.Select.Option value="years">
{"years" |> E.ste} {"Years" |> E.ste}
</Antd.Select.Option> </Antd.Select.Option>
</Antd.Select> </Antd.Select>
</Antd.Form.Item> </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> </Antd.Form>
</Form.Provider> </Form.Provider>
</div> </Antd.Card>
<div className=Styles.spacer />
</div>; </div>;
}; };

View File

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