348 lines
10 KiB
ReasonML
348 lines
10 KiB
ReasonML
open BsReform;
|
|
open Antd.Grid;
|
|
|
|
module FormConfig = [%lenses
|
|
type state = {
|
|
squiggleString: string,
|
|
sampleCount: string,
|
|
outputXYPoints: string,
|
|
downsampleTo: string,
|
|
kernelWidth: string,
|
|
diagramStart: string,
|
|
diagramStop: string,
|
|
diagramCount: string,
|
|
}
|
|
];
|
|
|
|
type options = {
|
|
sampleCount: int,
|
|
outputXYPoints: int,
|
|
downsampleTo: option(int),
|
|
kernelWidth: option(float),
|
|
diagramStart: float,
|
|
diagramStop: float,
|
|
diagramCount: int,
|
|
};
|
|
|
|
module Form = ReForm.Make(FormConfig);
|
|
|
|
let schema = Form.Validation.Schema([||]);
|
|
|
|
module FieldText = {
|
|
[@react.component]
|
|
let make = (~field, ~label) => {
|
|
<>
|
|
<Form.Field
|
|
field
|
|
render={({handleChange, error, value, validate}) =>
|
|
<CodeEditor value onChange={r => handleChange(r)} />
|
|
}
|
|
/>
|
|
</>;
|
|
};
|
|
};
|
|
module FieldString = {
|
|
[@react.component]
|
|
let make = (~field, ~label) => {
|
|
<Form.Field
|
|
field
|
|
render={({handleChange, error, value, validate}) =>
|
|
<Antd.Form.Item label={label |> R.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 |> R.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"))],
|
|
),
|
|
]);
|
|
};
|
|
|
|
module DemoDist = {
|
|
[@react.component]
|
|
let make = (~squiggleString:string, ~options) => {
|
|
<Antd.Card title={"Distribution" |> R.ste}>
|
|
<div>
|
|
{switch (options) {
|
|
| Some(options) =>
|
|
let inputs1 =
|
|
ProgramEvaluator.Inputs.make(
|
|
~samplingInputs={
|
|
sampleCount: Some(options.sampleCount),
|
|
outputXYPoints: Some(options.outputXYPoints),
|
|
kernelWidth: options.kernelWidth,
|
|
shapeLength:
|
|
Some(options.downsampleTo |> E.O.default(1000)),
|
|
},
|
|
~squiggleString,
|
|
~environment=
|
|
[|
|
|
("K", `SymbolicDist(`Float(1000.0))),
|
|
("M", `SymbolicDist(`Float(1000000.0))),
|
|
("B", `SymbolicDist(`Float(1000000000.0))),
|
|
("T", `SymbolicDist(`Float(1000000000000.0))),
|
|
|]
|
|
->Belt.Map.String.fromArray,
|
|
(),
|
|
);
|
|
|
|
let response1 = ProgramEvaluator.evaluateProgram(inputs1);
|
|
switch (response1) {
|
|
| Ok(`DistPlus(distPlus1)) =>
|
|
<DistPlusPlot distPlus={DistPlus.T.normalize(distPlus1)} />
|
|
| Ok(`Float(f)) =>
|
|
<ForetoldComponents.NumberShower number=f precision=3 />
|
|
| Ok(`Function((f, a), env)) =>
|
|
// Problem: When it gets the function, it doesn't save state about previous commands
|
|
let foo: ProgramEvaluator.Inputs.inputs = {
|
|
squiggleString,
|
|
samplingInputs: inputs1.samplingInputs,
|
|
environment: env,
|
|
};
|
|
let results =
|
|
E.A.Floats.range(options.diagramStart, options.diagramStop, options.diagramCount)
|
|
|> E.A.fmap(r =>
|
|
ProgramEvaluator.evaluateFunction(
|
|
foo,
|
|
(f, a),
|
|
[|`SymbolicDist(`Float(r))|],
|
|
)
|
|
|> E.R.bind(_, a =>
|
|
switch (a) {
|
|
| `DistPlus(d) => Ok((r, DistPlus.T.normalize(d)))
|
|
| n =>
|
|
Js.log2("Error here", n);
|
|
Error("wrong type");
|
|
}
|
|
)
|
|
)
|
|
|> E.A.R.firstErrorOrOpen;
|
|
switch (results) {
|
|
| Ok(dists) => <PercentilesChart dists />
|
|
| Error(r) => r |> R.ste
|
|
};
|
|
| Error(r) => r |> R.ste
|
|
};
|
|
| _ =>
|
|
"Nothing to show. Try to change the distribution description."
|
|
|> R.ste
|
|
}}
|
|
</div>
|
|
</Antd.Card>;
|
|
};
|
|
};
|
|
|
|
[@react.component]
|
|
let make = () => {
|
|
let (reloader, setReloader) = React.useState(() => 1);
|
|
let reform =
|
|
Form.use(
|
|
~validationStrategy=OnDemand,
|
|
~schema,
|
|
~onSubmit=({state}) => {None},
|
|
~initialState={
|
|
//squiggleString: "mm(normal(-10, 2), uniform(18, 25), lognormal({mean: 10, stdev: 8}), triangular(31,40,50))",
|
|
squiggleString: "mm(normal(5,2), normal(10,2))",
|
|
sampleCount: "1000",
|
|
outputXYPoints: "1000",
|
|
downsampleTo: "",
|
|
kernelWidth: "",
|
|
diagramStart: "0",
|
|
diagramStop: "10",
|
|
diagramCount: "20",
|
|
},
|
|
(),
|
|
);
|
|
|
|
let onSubmit = e => {
|
|
e->ReactEvent.Synthetic.preventDefault;
|
|
reform.submit();
|
|
};
|
|
|
|
let squiggleString = reform.state.values.squiggleString;
|
|
let sampleCount = reform.state.values.sampleCount |> Js.Float.fromString;
|
|
let outputXYPoints =
|
|
reform.state.values.outputXYPoints |> Js.Float.fromString;
|
|
let downsampleTo = reform.state.values.downsampleTo |> Js.Float.fromString;
|
|
let kernelWidth = reform.state.values.kernelWidth |> Js.Float.fromString;
|
|
let diagramStart = reform.state.values.diagramStart |> Js.Float.fromString;
|
|
let diagramStop = reform.state.values.diagramStop |> Js.Float.fromString;
|
|
let diagramCount = reform.state.values.diagramCount |> Js.Float.fromString;
|
|
|
|
let options =
|
|
switch (sampleCount, outputXYPoints, downsampleTo) {
|
|
| (_, _, _)
|
|
when
|
|
!Js.Float.isNaN(sampleCount)
|
|
&& !Js.Float.isNaN(outputXYPoints)
|
|
&& !Js.Float.isNaN(downsampleTo)
|
|
&& sampleCount > 10.
|
|
&& outputXYPoints > 10. =>
|
|
Some({
|
|
sampleCount: sampleCount |> int_of_float,
|
|
outputXYPoints: outputXYPoints |> int_of_float,
|
|
downsampleTo:
|
|
int_of_float(downsampleTo) > 0
|
|
? Some(int_of_float(downsampleTo)) : None,
|
|
kernelWidth: kernelWidth == 0.0 ? None : Some(kernelWidth),
|
|
diagramStart: diagramStart,
|
|
diagramStop: diagramStop,
|
|
diagramCount: diagramCount |> int_of_float,
|
|
})
|
|
| _ => None
|
|
};
|
|
|
|
let demoDist =
|
|
React.useMemo1(
|
|
() => <DemoDist squiggleString options />,
|
|
[|
|
|
reform.state.values.squiggleString,
|
|
reform.state.values.sampleCount,
|
|
reform.state.values.outputXYPoints,
|
|
reform.state.values.downsampleTo,
|
|
reform.state.values.kernelWidth,
|
|
reform.state.values.diagramStart,
|
|
reform.state.values.diagramStop,
|
|
reform.state.values.diagramCount,
|
|
reloader |> string_of_int,
|
|
|],
|
|
);
|
|
|
|
let onReload = _ => {
|
|
setReloader(_ => reloader + 1);
|
|
};
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Antd.Card
|
|
title={"Distribution Form" |> R.ste}
|
|
extra={
|
|
<Antd.Button
|
|
icon=Antd.IconName.reload
|
|
shape=`circle
|
|
onClick=onReload
|
|
/>
|
|
}>
|
|
<Form.Provider value=reform>
|
|
<Antd.Form onSubmit>
|
|
<Row _type=`flex className=Styles.rows>
|
|
<Col span=24>
|
|
<FieldText
|
|
field=FormConfig.SquiggleString
|
|
label="Program"
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
<Row _type=`flex className=Styles.rows>
|
|
<Col span=12>
|
|
<FieldFloat
|
|
field=FormConfig.SampleCount
|
|
label="Sample Count"
|
|
/>
|
|
</Col>
|
|
<Col span=12>
|
|
<FieldFloat
|
|
field=FormConfig.OutputXYPoints
|
|
label="Output XY-points"
|
|
/>
|
|
</Col>
|
|
<Col span=12>
|
|
<FieldFloat
|
|
field=FormConfig.DownsampleTo
|
|
label="Downsample To"
|
|
/>
|
|
</Col>
|
|
<Col span=12>
|
|
<FieldFloat
|
|
field=FormConfig.KernelWidth
|
|
label="Kernel Width"
|
|
/>
|
|
</Col>
|
|
<Col span=12>
|
|
<FieldFloat
|
|
field=FormConfig.DiagramStart
|
|
label="Diagram Start"
|
|
/>
|
|
</Col>
|
|
<Col span=12>
|
|
<FieldFloat
|
|
field=FormConfig.DiagramStop
|
|
label="Diagram Stop"
|
|
/>
|
|
</Col>
|
|
<Col span=12>
|
|
<FieldFloat
|
|
field=FormConfig.DiagramCount
|
|
label="Diagram Count"
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</Antd.Form>
|
|
</Form.Provider>
|
|
</Antd.Card>
|
|
</div>
|
|
<div> demoDist </div>
|
|
</div>;
|
|
};
|