496 lines
16 KiB
ReasonML
496 lines
16 KiB
ReasonML
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,
|
|
//
|
|
unitType: string, // UnspecifiedDistribution, TimeDistribution(zero, unit)
|
|
zero: MomentRe.Moment.t,
|
|
unit: string,
|
|
//
|
|
sampleCount: string,
|
|
outputXYPoints: string,
|
|
truncateTo: string,
|
|
kernelWidth: string,
|
|
}
|
|
];
|
|
|
|
type options = {
|
|
sampleCount: int,
|
|
outputXYPoints: int,
|
|
truncateTo: option(int),
|
|
kernelWidth: option(float),
|
|
};
|
|
|
|
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 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.Input
|
|
value
|
|
onChange={BsReform.Helpers.handleChange(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"))],
|
|
),
|
|
]);
|
|
};
|
|
|
|
type inputs = {
|
|
samplingInputs: RenderTypes.ShapeRenderer.Sampling.inputs,
|
|
guesstimatorString: string,
|
|
length: int,
|
|
shouldTruncateSampledDistribution: int,
|
|
};
|
|
|
|
module DemoDist = {
|
|
[@react.component]
|
|
let make = (~guesstimatorString, ~domain, ~unit, ~options) => {
|
|
<Antd.Card title={"Distribution" |> E.ste}>
|
|
<div className=Styles.spacer />
|
|
<div>
|
|
{switch (domain, unit, options) {
|
|
| (Some(domain), Some(unit), Some(options)) =>
|
|
let distPlusIngredients =
|
|
DistPlusIngredients.make(
|
|
~guesstimatorString,
|
|
~domain,
|
|
~unit,
|
|
(),
|
|
);
|
|
let inputs =
|
|
RenderTypes.DistPlusRenderer.make(
|
|
~samplingInputs={
|
|
sampleCount: Some(options.sampleCount),
|
|
outputXYPoints: Some(options.outputXYPoints),
|
|
kernelWidth: options.kernelWidth,
|
|
},
|
|
~distPlusIngredients,
|
|
(),
|
|
);
|
|
let distPlus = DistPlusIngredients.toDistPlus(inputs);
|
|
switch (distPlus) {
|
|
| Some(distPlus) => <DistPlusPlot distPlus />
|
|
| _ =>
|
|
"Correct Guesstimator string input to show a distribution."
|
|
|> E.ste
|
|
};
|
|
| _ =>
|
|
"Nothing to show. Try to change the distribution description."
|
|
|> E.ste
|
|
}}
|
|
</div>
|
|
</Antd.Card>;
|
|
};
|
|
};
|
|
|
|
[@react.component]
|
|
let make = () => {
|
|
let (reloader, setRealoader) = React.useState(() => 1);
|
|
let reform =
|
|
Form.use(
|
|
~validationStrategy=OnDemand,
|
|
~schema,
|
|
~onSubmit=({state}) => {None},
|
|
~initialState={
|
|
guesstimatorString: "40 to 8000",
|
|
domainType: "Complete",
|
|
xPoint: "50.0",
|
|
xPoint2: "60.0",
|
|
excludingProbabilityMass2: "0.5",
|
|
excludingProbabilityMass: "0.3",
|
|
unitType: "UnspecifiedDistribution",
|
|
zero: MomentRe.momentNow(),
|
|
unit: "days",
|
|
sampleCount: "30000",
|
|
outputXYPoints: "10000",
|
|
truncateTo: "1000",
|
|
kernelWidth: "5",
|
|
},
|
|
(),
|
|
);
|
|
|
|
let onSubmit = e => {
|
|
e->ReactEvent.Synthetic.preventDefault;
|
|
reform.submit();
|
|
};
|
|
|
|
let xPoint = reform.state.values.xPoint |> Js.Float.fromString;
|
|
let xPoint2 = reform.state.values.xPoint2 |> Js.Float.fromString;
|
|
let excludingProbabilityMass =
|
|
reform.state.values.excludingProbabilityMass |> Js.Float.fromString;
|
|
let excludingProbabilityMass2 =
|
|
reform.state.values.excludingProbabilityMass2 |> Js.Float.fromString;
|
|
|
|
let zero = reform.state.values.zero;
|
|
let unit = reform.state.values.unit;
|
|
|
|
let domainType = reform.state.values.domainType;
|
|
let unitType = reform.state.values.unitType;
|
|
|
|
let guesstimatorString = reform.state.values.guesstimatorString;
|
|
let sampleCount = reform.state.values.sampleCount |> Js.Float.fromString;
|
|
let outputXYPoints =
|
|
reform.state.values.outputXYPoints |> Js.Float.fromString;
|
|
let truncateTo = reform.state.values.truncateTo |> Js.Float.fromString;
|
|
let kernelWidth = reform.state.values.kernelWidth |> Js.Float.fromString;
|
|
|
|
let domain =
|
|
switch (domainType) {
|
|
| "Complete" => Some(DistTypes.Complete)
|
|
| "LeftLimited"
|
|
when
|
|
!Js.Float.isNaN(xPoint)
|
|
&& !Js.Float.isNaN(excludingProbabilityMass) =>
|
|
Some(LeftLimited({xPoint, excludingProbabilityMass}))
|
|
| "RightLimited"
|
|
when
|
|
!Js.Float.isNaN(xPoint2)
|
|
&& !Js.Float.isNaN(excludingProbabilityMass2) =>
|
|
Some(RightLimited({xPoint, excludingProbabilityMass}))
|
|
| "LeftAndRightLimited"
|
|
when
|
|
!Js.Float.isNaN(xPoint)
|
|
&& !Js.Float.isNaN(excludingProbabilityMass)
|
|
&& !Js.Float.isNaN(xPoint2)
|
|
&& !Js.Float.isNaN(excludingProbabilityMass2) =>
|
|
Some(
|
|
LeftAndRightLimited(
|
|
{xPoint, excludingProbabilityMass},
|
|
{xPoint, excludingProbabilityMass},
|
|
),
|
|
)
|
|
| _ => None
|
|
};
|
|
|
|
let unit =
|
|
switch (unitType) {
|
|
| "UnspecifiedDistribution" => Some(DistTypes.UnspecifiedDistribution)
|
|
| "TimeDistribution" =>
|
|
Some(
|
|
TimeDistribution({zero, unit: unit |> TimeTypes.TimeUnit.ofString}),
|
|
)
|
|
| _ => None
|
|
};
|
|
|
|
let options =
|
|
switch (sampleCount, outputXYPoints, truncateTo) {
|
|
| (_, _, _)
|
|
when
|
|
!Js.Float.isNaN(sampleCount)
|
|
&& !Js.Float.isNaN(outputXYPoints)
|
|
&& !Js.Float.isNaN(truncateTo)
|
|
&& sampleCount > 10.
|
|
&& outputXYPoints > 10. =>
|
|
Some({
|
|
sampleCount: sampleCount |> int_of_float,
|
|
outputXYPoints: outputXYPoints |> int_of_float,
|
|
truncateTo:
|
|
int_of_float(truncateTo) > 0
|
|
? Some(int_of_float(truncateTo)) : None,
|
|
kernelWidth: kernelWidth == 0.0 ? None : Some(kernelWidth),
|
|
})
|
|
| _ => None
|
|
};
|
|
|
|
let demoDist =
|
|
React.useMemo1(
|
|
() => <DemoDist guesstimatorString domain unit options />,
|
|
[|
|
|
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,
|
|
reform.state.values.sampleCount,
|
|
reform.state.values.outputXYPoints,
|
|
reform.state.values.truncateTo,
|
|
reform.state.values.kernelWidth,
|
|
reloader |> string_of_int,
|
|
|],
|
|
);
|
|
|
|
let onRealod = _ => {
|
|
setRealoader(_ => reloader + 1);
|
|
};
|
|
|
|
<div className=Styles.parent>
|
|
<div className=Styles.spacer />
|
|
demoDist
|
|
<div className=Styles.spacer />
|
|
<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"
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
<Row _type=`flex className=Styles.rows>
|
|
<Col span=4>
|
|
<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>
|
|
}
|
|
/>
|
|
</Col>
|
|
{<>
|
|
<Col span=4>
|
|
<FieldFloat
|
|
field=FormConfig.XPoint
|
|
label="Left X-point"
|
|
className=Styles.groupA
|
|
/>
|
|
</Col>
|
|
<Col span=4>
|
|
<FieldFloat
|
|
field=FormConfig.ExcludingProbabilityMass
|
|
label="Left Excluding Probability Mass"
|
|
className=Styles.groupA
|
|
/>
|
|
</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="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
|
|
field=FormConfig.UnitType
|
|
render={({handleChange, value}) =>
|
|
<Antd.Form.Item label={"Unit 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>
|
|
}
|
|
/>
|
|
</Col>
|
|
{<>
|
|
<Col span=4>
|
|
<Form.Field
|
|
field=FormConfig.Zero
|
|
render={({handleChange, value}) =>
|
|
<Antd.Form.Item label={"Zero Point" |> E.ste}>
|
|
<Antd_DatePicker
|
|
value
|
|
onChange={e => {
|
|
e |> handleChange;
|
|
_ => ();
|
|
}}
|
|
/>
|
|
</Antd.Form.Item>
|
|
}
|
|
/>
|
|
</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}
|
|
</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>
|
|
}
|
|
/>
|
|
</Col>
|
|
</>
|
|
|> E.showIf(
|
|
E.L.contains(
|
|
reform.state.values.unitType,
|
|
["TimeDistribution"],
|
|
),
|
|
)}
|
|
</Row>
|
|
<Row _type=`flex className=Styles.rows>
|
|
<Col span=4>
|
|
<FieldFloat field=FormConfig.SampleCount label="Sample Count" />
|
|
</Col>
|
|
<Col span=4>
|
|
<FieldFloat
|
|
field=FormConfig.OutputXYPoints
|
|
label="Output XY-points"
|
|
/>
|
|
</Col>
|
|
<Col span=4>
|
|
<FieldFloat field=FormConfig.TruncateTo label="Truncate To" />
|
|
</Col>
|
|
<Col span=4>
|
|
<FieldFloat field=FormConfig.KernelWidth label="Kernel Width" />
|
|
</Col>
|
|
</Row>
|
|
<Antd.Button
|
|
_type=`primary icon=Antd.IconName.reload onClick=onRealod>
|
|
{"Update Distribution" |> E.ste}
|
|
</Antd.Button>
|
|
</Antd.Form>
|
|
</Form.Provider>
|
|
</Antd.Card>
|
|
<div className=Styles.spacer />
|
|
</div>;
|
|
}; |