quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Makes use Antd components

Browse Source
This commit is contained in:
Roman Galochkin 2020-02-27 09:21:47 +03:00
parent 6c6f1e151c
commit 95585fb43d
1 changed files with 115 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
src/components/DistBuilder.re
View File

@ -1,4 +1,5 @@
open BsReform; open BsReform;
open Antd.Grid;
module FormConfig = [%lenses module FormConfig = [%lenses
type state = { type state = {
@ -40,10 +41,20 @@ module FieldString = {
module Styles = { module Styles = {
open Css; open Css;
let row = let rows =
style([display(`flex), selector("div > div", [flex(`num(1.))])]); 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 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 = { module FieldFloat = {
@ -64,6 +75,26 @@ module FieldFloat = {
}; };
}; };
module DemoDist = {
[@react.component]
let make = (~guesstimatorString, ~domain, ~unit) => {
<Antd.Card title={"Distribution" |> E.ste}>
<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>
</Antd.Card>;
};
};
[@react.component] [@react.component]
let make = () => { let make = () => {
let reform = let reform =
@ -134,29 +165,36 @@ let make = () => {
let guesstimatorString = reform.state.values.guesstimatorString; let guesstimatorString = reform.state.values.guesstimatorString;
let demoDist =
React.useMemo1(
() => {<DemoDist guesstimatorString domain unit />},
[|
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,
|],
);
<div> <div>
<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}>
<Form.Provider value=reform> <Form.Provider value=reform>
<Antd.Form onSubmit> <Antd.Form onSubmit>
<FieldString <FieldString
field=FormConfig.GuesstimatorString field=FormConfig.GuesstimatorString
label="Guesstimator String" label="Guesstimator String"
/> />
<div className=Styles.row> <Row _type=`flex>
<div> <Col span=4>
<Form.Field <Form.Field
field=FormConfig.DomainType field=FormConfig.DomainType
render={({handleChange, value}) => render={({handleChange, value}) =>
@ -178,28 +216,36 @@ let make = () => {
</Antd.Form.Item> </Antd.Form.Item>
} }
/> />
</div> </Col>
<div> <Col span=10>
<FieldString field=FormConfig.XPoint label="X-point" /> <Row _type=`flex className=Styles.rows>
</div> <Col span=12>
<div> <FieldString field=FormConfig.XPoint label="X-point" />
<FieldString </Col>
field=FormConfig.ExcludingProbabilityMass <Col span=12>
label="Excluding Probability Mass" <FieldString
/> field=FormConfig.ExcludingProbabilityMass
</div> label="Excluding Probability Mass"
<div> />
<FieldString field=FormConfig.XPoint2 label="X-point (2)" /> </Col>
</div> </Row>
<div> </Col>
<FieldString <Col span=10>
field=FormConfig.ExcludingProbabilityMass2 <Row _type=`flex className=Styles.rows>
label="Excluding Probability Mass (2)" <Col span=12>
/> <FieldString field=FormConfig.XPoint2 label="X-point (2)" />
</div> </Col>
</div> <Col span=12>
<div className=Styles.row> <FieldString
<div> field=FormConfig.ExcludingProbabilityMass2
label="Excluding Probability Mass (2)"
/>
</Col>
</Row>
</Col>
</Row>
<Row _type=`flex>
<Col span=4>
<Form.Field <Form.Field
field=FormConfig.UnitType field=FormConfig.UnitType
render={({handleChange, value}) => render={({handleChange, value}) =>
@ -215,64 +261,37 @@ let make = () => {
</Antd.Form.Item> </Antd.Form.Item>
} }
/> />
</div> </Col>
<div> <Col span=10>
<Form.Field <Row _type=`flex className=Styles.rows>
field=FormConfig.Zero <Col span=12>
render={({handleChange, value}) => <Form.Field
<Antd.Form.Item label={"Zero" |> E.ste}> field=FormConfig.Zero
<Antd_DatePicker render={({handleChange, value}) =>
value <Antd.Form.Item label={"Zero" |> E.ste}>
onChange={e => { <Antd_DatePicker
e |> handleChange; value
_ => (); onChange={e => {
}} e |> handleChange;
/> _ => ();
</Antd.Form.Item> }}
} />
/> </Antd.Form.Item>
</div> }
<div> />
<Form.Field </Col>
field=FormConfig.Unit <Col span=12>
render={({handleChange, value}) => <FieldString
<Antd.Form.Item label={"Unit" |> E.ste}> field=FormConfig.ExcludingProbabilityMass
<Antd.Select value onChange={e => e |> handleChange}> label="Excluding Probability Mass"
<Antd.Select.Option value="days"> />
{"days" |> E.ste} </Col>
</Antd.Select.Option> </Row>
<Antd.Select.Option value="hours"> </Col>
{"hours" |> E.ste} <Col span=10 />
</Antd.Select.Option> </Row>
<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>
}
/>
</div>
</div>
</Antd.Form> </Antd.Form>
</Form.Provider> </Form.Provider>
</div> </Antd.Card>
</div>; </div>;
}; };