Works, the first step
This commit is contained in:
parent
531df57242
commit
c99a7c5085
|
@ -1,6 +1,7 @@
|
|||
type route =
|
||||
| Model(string)
|
||||
| DistBuilder
|
||||
| DistBuilder2
|
||||
| Home
|
||||
| NotFound;
|
||||
|
||||
|
@ -8,6 +9,7 @@ let routeToPath = route =>
|
|||
switch (route) {
|
||||
| Model(modelId) => "/m/" ++ modelId
|
||||
| DistBuilder => "/dist-builder"
|
||||
| DistBuilder2 => "/dist-builder2"
|
||||
| Home => "/"
|
||||
| _ => "/"
|
||||
};
|
||||
|
@ -76,6 +78,9 @@ module Menu = {
|
|||
<Item href={routeToPath(DistBuilder)} key="dist-builder">
|
||||
{"Dist Builder" |> E.ste}
|
||||
</Item>
|
||||
<Item href={routeToPath(DistBuilder2)} key="dist-builder">
|
||||
{"Dist Builder 2" |> E.ste}
|
||||
</Item>
|
||||
</div>;
|
||||
};
|
||||
};
|
||||
|
@ -88,6 +93,7 @@ let make = () => {
|
|||
switch (url.path) {
|
||||
| ["m", modelId] => Model(modelId)
|
||||
| ["dist-builder"] => DistBuilder
|
||||
| ["dist-builder2"] => DistBuilder2
|
||||
| [] => Home
|
||||
| _ => NotFound
|
||||
};
|
||||
|
@ -101,6 +107,7 @@ let make = () => {
|
|||
| None => <div> {"Page is not found" |> E.ste} </div>
|
||||
}
|
||||
| DistBuilder => <DistBuilder />
|
||||
| DistBuilder2 => <DistBuilder2 />
|
||||
| Home => <div> {"Welcome" |> E.ste} </div>
|
||||
| _ => <div> {"Page is not found" |> E.ste} </div>
|
||||
}}
|
||||
|
|
149
src/components/DistBuilder2.re
Normal file
149
src/components/DistBuilder2.re
Normal file
|
@ -0,0 +1,149 @@
|
|||
open BsReform;
|
||||
open Antd.Grid;
|
||||
|
||||
type shape = (array(float), array(float));
|
||||
|
||||
[@bs.module "./editor/main.js"]
|
||||
external getPdfFromUserInput: string => shape = "get_pdf_from_user_input";
|
||||
|
||||
module FormConfig = [%lenses type state = {guesstimatorString: string}];
|
||||
|
||||
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 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: string) => {
|
||||
let (ys, xs) = getPdfFromUserInput("normal(1, 1) / normal(10, 1)");
|
||||
let continuous: DistTypes.xyShape = {xs, ys};
|
||||
<Antd.Card title={"Distribution" |> E.ste}>
|
||||
<div className=Styles.spacer />
|
||||
<DistributionPlot height=400 continuous />
|
||||
</Antd.Card>;
|
||||
};
|
||||
};
|
||||
|
||||
[@react.component]
|
||||
let make = () => {
|
||||
let (reloader, setRealoader) = React.useState(() => 1);
|
||||
let reform =
|
||||
Form.use(
|
||||
~validationStrategy=OnDemand,
|
||||
~schema,
|
||||
~onSubmit=({state}) => {None},
|
||||
~initialState={guesstimatorString: "normal(1, 1) / normal(10, 1)"},
|
||||
(),
|
||||
);
|
||||
|
||||
let onSubmit = e => {
|
||||
e->ReactEvent.Synthetic.preventDefault;
|
||||
reform.submit();
|
||||
};
|
||||
|
||||
let demoDist =
|
||||
React.useMemo1(
|
||||
() => {
|
||||
<DemoDist
|
||||
guesstimatorString={reform.state.values.guesstimatorString}
|
||||
/>
|
||||
},
|
||||
[|reform.state.values.guesstimatorString|],
|
||||
);
|
||||
|
||||
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>
|
||||
<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>;
|
||||
};
|
|
@ -114,7 +114,7 @@ let make =
|
|||
~minX=?,
|
||||
~yMaxDiscreteDomainFactor=?,
|
||||
~yMaxContinuousDomainFactor=?,
|
||||
~onHover: float => unit,
|
||||
~onHover: float => unit=_ => (),
|
||||
~continuous=?,
|
||||
~scale=?,
|
||||
~showDistributionLines=false,
|
||||
|
|
|
@ -82,9 +82,11 @@ class BaseDistributionBinned {
|
|||
let args_str = args.toString() + ")";
|
||||
let substr = this.name + ".pdf(x, " + args_str;
|
||||
let compiled = math.compile(substr);
|
||||
|
||||
function pdf_func(x) {
|
||||
return compiled.evaluate({ x: x });
|
||||
}
|
||||
|
||||
let mc_compiled = math.compile(this.name + ".sample(" + args_str);
|
||||
let kv_pairs = this.param_names.map((val, idx) => [val, args[idx]]);
|
||||
let params = Object.fromEntries(new Map(kv_pairs));
|
||||
|
@ -97,12 +99,14 @@ class NormalDistributionBinned extends BaseDistributionBinned {
|
|||
this.name = "normal";
|
||||
this.param_names = ["mean", "std"];
|
||||
}
|
||||
|
||||
get_bounds() {
|
||||
return [
|
||||
this.params.mean - 4 * this.params.std,
|
||||
this.params.mean + 4 * this.params.std
|
||||
];
|
||||
}
|
||||
|
||||
bin() {
|
||||
return this._adabin(this.params.std);
|
||||
}
|
||||
|
@ -114,9 +118,11 @@ class UniformDistributionBinned extends BaseDistributionBinned {
|
|||
this.param_names = ["start_point", "end_point"];
|
||||
this.num_bins = 200;
|
||||
}
|
||||
|
||||
get_bounds() {
|
||||
return [this.params.start_point, this.params.end_point];
|
||||
}
|
||||
|
||||
bin() {
|
||||
let divider_pts = evenly_spaced_grid(
|
||||
this.params.start_point,
|
||||
|
@ -152,6 +158,7 @@ class LogNormalDistributionBinned extends BaseDistributionBinned {
|
|||
}
|
||||
return largest_buffer[n - 1];
|
||||
}
|
||||
|
||||
get_bounds() {
|
||||
let samples = Array(this.n_bounds_samples)
|
||||
.fill(0)
|
||||
|
@ -161,6 +168,7 @@ class LogNormalDistributionBinned extends BaseDistributionBinned {
|
|||
this._nth_largest(samples, this.n_largest_bound_sample)
|
||||
];
|
||||
}
|
||||
|
||||
bin() {
|
||||
return this._adabin();
|
||||
}
|
||||
|
|
|
@ -1,31 +0,0 @@
|
|||
import "./styles.css";
|
||||
const embed = require("vega-embed").embed;
|
||||
const get_pdf_from_user_input = require("./main.js").get_pdf_from_user_input;
|
||||
|
||||
let [y, x] = get_pdf_from_user_input("normal(1, 1) / normal(10, 1)");
|
||||
|
||||
let pdf = x.map((val, idx) => ({ x: val, pdf: y[idx] }));
|
||||
|
||||
let spec = {
|
||||
data: {
|
||||
values: pdf
|
||||
},
|
||||
mark: { type: "area", line: true },
|
||||
encoding: {
|
||||
x: { field: "x", type: "quantitative" },
|
||||
y: {
|
||||
field: "pdf",
|
||||
type: "quantitative",
|
||||
scale: { domain: [0, 3 * Math.max(...y)] }
|
||||
}
|
||||
},
|
||||
width: 500
|
||||
};
|
||||
|
||||
embed("#viz", spec);
|
||||
|
||||
console.log(y.reduce((a, b) => a + b));
|
||||
|
||||
document.getElementById("app").innerHTML = `
|
||||
<div id="viz"></div>
|
||||
`;
|
|
@ -267,11 +267,13 @@ function get_grid_transform(distr_string) {
|
|||
arg_strings.push("x_" + i.toString());
|
||||
}
|
||||
let compiled = math.compile(distr_string);
|
||||
|
||||
function grid_transform(x) {
|
||||
let kv_pairs = arg_strings.map((val, idx) => [val, x[idx]]);
|
||||
let args_obj = Object.fromEntries(new Map(kv_pairs));
|
||||
return compiled.evaluate(args_obj);
|
||||
}
|
||||
|
||||
return grid_transform;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user