diff --git a/package.json b/package.json index 3ad539cd..d8ecfa08 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ "dependencies": { "@foretold/components": "0.0.6", "@glennsl/bs-json": "^5.0.2", + "ace-builds": "^1.4.12", "antd": "3.17.0", "autoprefixer": "9.7.4", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", @@ -51,6 +52,7 @@ "postcss-cli": "7.1.0", "rationale": "0.2.0", "react": "^16.8.0", + "react-ace": "^9.1.2", "react-dom": "^16.8.0", "react-use": "^13.27.0", "react-vega": "^7.4.1", diff --git a/src/App.re b/src/App.re index 7439e6b6..1744d9b8 100644 --- a/src/App.re +++ b/src/App.re @@ -73,6 +73,9 @@ module Menu = { }; }; +let fixedLength = r => +
r
; + [@react.component] let make = () => { let url = ReasonReactRouter.useUrl(); @@ -85,17 +88,20 @@ let make = () => { | _ => NotFound }; -
+ <> {switch (routing) { | Model(id) => - switch (Models.getById(id)) { - | Some(model) => - | None =>
{"Page is not found" |> R.ste}
- } + ( + switch (Models.getById(id)) { + | Some(model) => + | None =>
{"Page is not found" |> R.ste}
+ } + ) + |> fixedLength | DistBuilder => | Home => - | _ =>
{"Page is not found" |> R.ste}
+ | _ => fixedLength({"Page is not found" |> R.ste}) }} -
; -}; \ No newline at end of file + ; +}; diff --git a/src/components/CodeEditor.js b/src/components/CodeEditor.js new file mode 100644 index 00000000..5d0a8ba5 --- /dev/null +++ b/src/components/CodeEditor.js @@ -0,0 +1,40 @@ +import React from "react"; +import AceEditor from "react-ace"; + +import "ace-builds/src-noconflict/mode-golang"; +import "ace-builds/src-noconflict/theme-github"; +import "ace-builds/src-noconflict/ext-language_tools"; + +function onChange(newValue) { + console.log("change", newValue); +} + +export class CodeEditor extends React.Component { + constructor(props) { + super(props); + } + render() { + return ( + + ); + } +} diff --git a/src/components/CodeEditor.re b/src/components/CodeEditor.re new file mode 100644 index 00000000..3762eaaa --- /dev/null +++ b/src/components/CodeEditor.re @@ -0,0 +1,10 @@ +[@bs.module "./CodeEditor.js"] +external codeEditor: ReasonReact.reactClass = "CodeEditor"; + +[@react.component] +let make = (~value="", ~onChange=(_:string) => (), ~children=ReasonReact.null) => + ReasonReact.wrapJsForReason(~reactClass=codeEditor, ~props={ + "value": value, + "onChange": onChange + }, children) + |> ReasonReact.element; diff --git a/src/components/DistBuilder.re b/src/components/DistBuilder.re index 2e0a911c..717efcf0 100644 --- a/src/components/DistBuilder.re +++ b/src/components/DistBuilder.re @@ -36,20 +36,14 @@ let schema = Form.Validation.Schema([||]); module FieldText = { [@react.component] let make = (~field, ~label) => { - - R.ste}> - validate()} - /> - - } - />; + <> + + handleChange(r)} /> + } + /> + ; }; }; module FieldString = { @@ -134,7 +128,6 @@ module DemoDist = { [@react.component] let make = (~guesstimatorString, ~domain, ~unit, ~options) => { R.ste}> -
{switch (domain, unit, options) { | (Some(domain), Some(unit), Some(options)) => @@ -187,7 +180,7 @@ module DemoDist = { ) |> E.R.bind(_, a => switch (a) { - | `DistPlus(d) => Ok((r, d)) + | `DistPlus(d) => Ok((r, DistPlus.T.normalize(d))) | _ => Error("") } ) @@ -347,53 +340,57 @@ bar", setReloader(_ => reloader + 1); }; -
-
- demoDist -
- R.ste} - extra={ - - }> - - - - - - - - - - - - - - - - - - - - - +
+
+ R.ste} + extra={ - {"Update Distribution" |> R.ste} - - - - -
+ icon=Antd.IconName.reload + shape=`circle + onClick=onReload + /> + }> + + + + + + + + + + + + + + + + + + + + + + + + +
+
demoDist
; }; diff --git a/src/components/charts/DistPlusPlotReducer.re b/src/components/charts/DistPlusPlotReducer.re index 27277189..6ec96864 100644 --- a/src/components/charts/DistPlusPlotReducer.re +++ b/src/components/charts/DistPlusPlotReducer.re @@ -106,6 +106,6 @@ let init = { showParams: false, showPercentiles: false, distributions: [ - {yLog: false, xLog: false, isCumulative: false, height: 1}, + {yLog: false, xLog: false, isCumulative: false, height: 4}, ], }; \ No newline at end of file diff --git a/src/components/charts/DistributionPlot/PercentilesChart.js b/src/components/charts/DistributionPlot/PercentilesChart.js index fd13e256..38661c8b 100644 --- a/src/components/charts/DistributionPlot/PercentilesChart.js +++ b/src/components/charts/DistributionPlot/PercentilesChart.js @@ -1,15 +1,10 @@ -import * as _ from 'lodash'; -import React from 'react'; -import * as vega from 'vega'; -import { - createClassFromSpec -} from "react-vega"; -import spec from './spec-percentiles'; +import * as _ from "lodash"; +import { createClassFromSpec } from "react-vega"; +import spec from "./spec-percentiles"; const PercentilesChart = createClassFromSpec({ - spec + spec, + style: "width: 100%", }); -export { - PercentilesChart -}; \ No newline at end of file +export { PercentilesChart }; diff --git a/src/components/charts/DistributionPlot/spec-percentiles.json b/src/components/charts/DistributionPlot/spec-percentiles.json index f243a2fa..234c7e48 100644 --- a/src/components/charts/DistributionPlot/spec-percentiles.json +++ b/src/components/charts/DistributionPlot/spec-percentiles.json @@ -1,169 +1,208 @@ { - "$schema": "https://vega.github.io/schema/vega/v5.json", - "width": 900, - "height": 200, - "padding": 5, - "data": [ - { - "name": "facet", - "values": [ - ], - "format": { "type": "json", "parse": { "timestamp": "date" } } - }, - { - "name": "table", - "source": "facet", - "transform": [ - { - "type": "aggregate", - "groupby": ["x"], - "ops": ["mean","mean","mean","mean","mean", "mean","mean","mean","mean","mean","mean","mean","mean"], - "fields": ["p1", "p5", "p10", "p20", "p30", "p40", "p50", "p60", "p70", "p80", "p90", "p95", "p99"], - "as": ["p1", "p5", "p10", "p20", "p30", "p40", "p50", "p60", "p70", "p80", "p90", "p95", "p99"] - } - ] - } - ], - "scales": [ - { - "name": "xscale", - "type": "linear", - "nice": true, - "domain": { "data": "facet", "field": "x"}, - "range": "width" - }, - { - "name": "yscale", - "type": "linear", - "range": "height", - "nice": true, - "zero": true, - "domain": { "data": "facet", "field": "p95" } - } - ], - "axes": [ - { - "orient": "bottom", - "scale": "xscale", - "grid": false, - "title": "X Value", - "encode": { - "grid": { "enter": { "stroke": { "value": "#ccc" } } }, - "ticks": { "enter": { "stroke": { "value": "#ccc" } } } + "$schema": "https://vega.github.io/schema/vega/v5.json", + "width": 500, + "height": 400, + "padding": 5, + "data": [ + { + "name": "facet", + "values": [], + "format": { "type": "json", "parse": { "timestamp": "date" } } + }, + { + "name": "table", + "source": "facet", + "transform": [ + { + "type": "aggregate", + "groupby": ["x"], + "ops": [ + "mean", + "mean", + "mean", + "mean", + "mean", + "mean", + "mean", + "mean", + "mean", + "mean", + "mean", + "mean", + "mean" + ], + "fields": [ + "p1", + "p5", + "p10", + "p20", + "p30", + "p40", + "p50", + "p60", + "p70", + "p80", + "p90", + "p95", + "p99" + ], + "as": [ + "p1", + "p5", + "p10", + "p20", + "p30", + "p40", + "p50", + "p60", + "p70", + "p80", + "p90", + "p95", + "p99" + ] } - }, - { - "orient": "left", - "scale": "yscale", - "title": "Values and Percentiles", - "grid": false, - "domain": false, - "tickSize": 2, - "encode": { - "grid": { "enter": { "stroke": { "value": "#ccc" } } }, - "ticks": { "enter": { "stroke": { "value": "#ccc" } } } + ] + } + ], + "scales": [ + { + "name": "xscale", + "type": "linear", + "nice": true, + "domain": { "data": "facet", "field": "x" }, + "range": "width" + }, + { + "name": "yscale", + "type": "linear", + "range": "height", + "nice": true, + "zero": false, + "domain": { "data": "facet", "field": "p99" } + } + ], + "axes": [ + { + "orient": "bottom", + "scale": "xscale", + "grid": false, + "tickSize": 2, + "encode": { + "grid": { "enter": { "stroke": { "value": "#ccc" } } }, + "ticks": { "enter": { "stroke": { "value": "#ccc" } } } + } + }, + { + "orient": "left", + "scale": "yscale", + "grid": false, + "domain": false, + "tickSize": 2, + "encode": { + "grid": { "enter": { "stroke": { "value": "#ccc" } } }, + "ticks": { "enter": { "stroke": { "value": "#ccc" } } } + } + } + ], + "marks": [ + { + "type": "area", + "from": { "data": "table" }, + "encode": { + "enter": { "fill": { "value": "#4C78A8" } }, + "update": { + "interpolate": { "value": "monotone" }, + "x": { "scale": "xscale", "field": "x" }, + "y": { "scale": "yscale", "field": "p1" }, + "y2": { "scale": "yscale", "field": "p99" }, + "opacity": { "value": 0.05 } } } - ], - "marks": [ - { - "type": "area", - "from": { "data": "table" }, - "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, - "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p1" }, - "y2": { "scale": "yscale", "field": "p99" }, - "opacity": { "value": 0.05 } - } - } - }, - { - "type": "area", - "from": { "data": "table" }, - "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, - "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p5" }, - "y2": { "scale": "yscale", "field": "p95" }, - "opacity": { "value": 0.1 } - } - } - }, - { - "type": "area", - "from": { "data": "table" }, - "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, - "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p10" }, - "y2": { "scale": "yscale", "field": "p90" }, - "opacity": { "value": 0.15 } - } - } - }, - { - "type": "area", - "from": { "data": "table" }, - "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, - "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p20" }, - "y2": { "scale": "yscale", "field": "p80" }, - "opacity": { "value": 0.2 } - } - } - }, - { - "type": "area", - "from": { "data": "table" }, - "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, - "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p30" }, - "y2": { "scale": "yscale", "field": "p70" }, - "opacity": { "value": 0.2 } - } - } - }, - { - "type": "area", - "from": { "data": "table" }, - "encode": { - "enter": { "fill": { "value": "#4C78A8" } }, - "update": { - "interpolate": { "value": "monotone" }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p40" }, - "y2": { "scale": "yscale", "field": "p60" }, - "opacity": { "value": 0.2 } - } - } - }, - { - "type": "line", - "from": { "data": "table" }, - "encode": { - "update": { - "interpolate": { "value": "monotone" }, - "stroke": { "value": "#4C78A8" }, - "strokeWidth": { "value": 2 }, - "opacity": { "value": 0.8 }, - "x": { "scale": "xscale", "field": "x" }, - "y": { "scale": "yscale", "field": "p50" } - } + }, + { + "type": "area", + "from": { "data": "table" }, + "encode": { + "enter": { "fill": { "value": "#4C78A8" } }, + "update": { + "interpolate": { "value": "monotone" }, + "x": { "scale": "xscale", "field": "x" }, + "y": { "scale": "yscale", "field": "p5" }, + "y2": { "scale": "yscale", "field": "p95" }, + "opacity": { "value": 0.1 } } } - ] - } - \ No newline at end of file + }, + { + "type": "area", + "from": { "data": "table" }, + "encode": { + "enter": { "fill": { "value": "#4C78A8" } }, + "update": { + "interpolate": { "value": "monotone" }, + "x": { "scale": "xscale", "field": "x" }, + "y": { "scale": "yscale", "field": "p10" }, + "y2": { "scale": "yscale", "field": "p90" }, + "opacity": { "value": 0.15 } + } + } + }, + { + "type": "area", + "from": { "data": "table" }, + "encode": { + "enter": { "fill": { "value": "#4C78A8" } }, + "update": { + "interpolate": { "value": "monotone" }, + "x": { "scale": "xscale", "field": "x" }, + "y": { "scale": "yscale", "field": "p20" }, + "y2": { "scale": "yscale", "field": "p80" }, + "opacity": { "value": 0.2 } + } + } + }, + { + "type": "area", + "from": { "data": "table" }, + "encode": { + "enter": { "fill": { "value": "#4C78A8" } }, + "update": { + "interpolate": { "value": "monotone" }, + "x": { "scale": "xscale", "field": "x" }, + "y": { "scale": "yscale", "field": "p30" }, + "y2": { "scale": "yscale", "field": "p70" }, + "opacity": { "value": 0.2 } + } + } + }, + { + "type": "area", + "from": { "data": "table" }, + "encode": { + "enter": { "fill": { "value": "#4C78A8" } }, + "update": { + "interpolate": { "value": "monotone" }, + "x": { "scale": "xscale", "field": "x" }, + "y": { "scale": "yscale", "field": "p40" }, + "y2": { "scale": "yscale", "field": "p60" }, + "opacity": { "value": 0.2 } + } + } + }, + { + "type": "line", + "from": { "data": "table" }, + "encode": { + "update": { + "interpolate": { "value": "monotone" }, + "stroke": { "value": "#4C78A8" }, + "strokeWidth": { "value": 2 }, + "opacity": { "value": 0.8 }, + "x": { "scale": "xscale", "field": "x" }, + "y": { "scale": "yscale", "field": "p50" } + } + } + } + ] +} diff --git a/yarn.lock b/yarn.lock index 14609a5c..fc3ef9e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1620,6 +1620,11 @@ abbrev@1: resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q== +ace-builds@^1.4.12, ace-builds@^1.4.6: + version "1.4.12" + resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.12.tgz#888efa386e36f4345f40b5233fcc4fe4c588fae7" + integrity sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg== + acorn-globals@^4.3.0, acorn-globals@^4.3.2: version "4.3.4" resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7" @@ -3805,6 +3810,11 @@ detective@^5.2.0: defined "^1.0.0" minimist "^1.1.1" +diff-match-patch@^1.0.4: + version "1.0.5" + resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37" + integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw== + diff-sequences@^25.2.6: version "25.2.6" resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd" @@ -6123,6 +6133,11 @@ lodash.debounce@^4.0.0, lodash.debounce@^4.0.8: resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= +lodash.get@^4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99" + integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk= + lodash.isequal@^4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0" @@ -8367,6 +8382,17 @@ re-classnames@^4.0.0: resolved "https://registry.yarnpkg.com/re-classnames/-/re-classnames-4.1.0.tgz#a13e1d66d84518f55e78435579bc303f7dba55e1" integrity sha512-3gWpk6R5AP3H2r+k+6rcEygcrSJ6wRbvEpPcW55USHhSCMNdHMRs9iD02mZ3+urKQygys+AjZMQXrZ6HDBA2IQ== +react-ace@^9.1.2: + version "9.1.2" + resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-9.1.2.tgz#4a3ad8dbd07f84fd99c26d9ec697ea3b2ef0a963" + integrity sha512-rzsPiGZ2/d4dmlxg0+Zo15igCnagao+TIUJCGV8RGLBr8xpKFpq5sxnTLvsE3pWPoFbMbQAXYJiZTMWEkNpRtg== + dependencies: + ace-builds "^1.4.6" + diff-match-patch "^1.0.4" + lodash.get "^4.4.2" + lodash.isequal "^4.5.0" + prop-types "^15.7.2" + react-apollo@^2.5.8: version "2.5.8" resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-2.5.8.tgz#c7a593b027efeefdd8399885e0ac6bec3b32623c"