Works, the first step

This commit is contained in:
Roman Galochkin 2020-02-27 15:09:04 +03:00
parent 531df57242
commit c99a7c5085
6 changed files with 167 additions and 32 deletions

View File

@ -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>
}}

View 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>;
};

View File

@ -114,7 +114,7 @@ let make =
~minX=?,
~yMaxDiscreteDomainFactor=?,
~yMaxContinuousDomainFactor=?,
~onHover: float => unit,
~onHover: float => unit=_ => (),
~continuous=?,
~scale=?,
~showDistributionLines=false,

View File

@ -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();
}

View File

@ -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>
`;

View File

@ -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;
}