Added ace code editor

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",

src/App.re

@@ -73,6 +73,9 @@ module Menu = {
   };
 };
 
+let fixedLength = r =>
+  <div className="w-full max-w-screen-xl mx-auto px-6"> r </div>;
+
 [@react.component]
 let make = () => {
   let url = ReasonReactRouter.useUrl();
@@ -85,17 +88,20 @@ let make = () => {
     | _ => NotFound
     };
 
-  <div className="w-full max-w-screen-xl mx-auto px-6">
+  <>
     <Menu />
     {switch (routing) {
      | Model(id) =>
+       (
          switch (Models.getById(id)) {
          | Some(model) => <FormBuilder.ModelForm model key=id />
          | None => <div> {"Page is not found" |> R.ste} </div>
          }
+       )
+       |> fixedLength
      | DistBuilder => <DistBuilder />
      | Home => <Home />
-     | _ => <div> {"Page is not found" |> R.ste} </div>
+     | _ => fixedLength({"Page is not found" |> R.ste})
      }}
-  </div>;
+  </>;
 };

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 (
+      <AceEditor
+        value={this.props.value}
+        mode="golang"
+        height="400px"
+        width="100%"
+        theme="github"
+        showGutter={false}
+        highlightActiveLine={false}
+        showPrintMargin={false}
+        onChange={this.props.onChange}
+        name="UNIQUE_ID_OF_DIV"
+        editorProps={{
+          $blockScrolling: true,
+        }}
+        setOptions={{
+          enableBasicAutocompletion: false,
+          enableLiveAutocompletion: false,
+          enableSnippets: true,
+        }}
+      />
+    );
+  }
+}

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;

src/components/DistBuilder.re

@@ -36,20 +36,14 @@ let schema = Form.Validation.Schema([||]);
 module FieldText = {
   [@react.component]
   let make = (~field, ~label) => {
+    <>
       <Form.Field
         field
         render={({handleChange, error, value, validate}) =>
-        <Antd.Form.Item label={label |> R.ste}>
+          <CodeEditor value onChange={r => handleChange(r)} />
-          <Antd.Input.TextArea
-            value
-            spellcheck=false
-            autosize=true
-            onChange={BsReform.Helpers.handleChange(handleChange)}
-            onBlur={_ => validate()}
-          />
-        </Antd.Form.Item>
         }
-    />;
+      />
+    </>;
   };
 };
 module FieldString = {
@@ -134,7 +128,6 @@ module DemoDist = {
   [@react.component]
   let make = (~guesstimatorString, ~domain, ~unit, ~options) => {
     <Antd.Card title={"Distribution" |> R.ste}>
-      <div className=Styles.spacer />
       <div>
         {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,10 +340,8 @@ bar",
     setReloader(_ => reloader + 1);
   };
 
-  <div className=Styles.parent>
+  <div className="grid grid-cols-2 gap-4">
-    <div className=Styles.spacer />
+    <div>
-    demoDist
-    <div className=Styles.spacer />
       <Antd.Card
         title={"Distribution Form" |> R.ste}
         extra={
@@ -364,36 +355,42 @@ bar",
           <Antd.Form onSubmit>
             <Row _type=`flex className=Styles.rows>
               <Col span=24>
-              <FieldText field=FormConfig.GuesstimatorString label="Program" />
+                <FieldText
+                  field=FormConfig.GuesstimatorString
+                  label="Program"
+                />
               </Col>
             </Row>
             <Row _type=`flex className=Styles.rows>
-            <Col span=4>
+              <Col span=12>
-              <FieldFloat field=FormConfig.SampleCount label="Sample Count" />
+                <FieldFloat
+                  field=FormConfig.SampleCount
+                  label="Sample Count"
+                />
               </Col>
-            <Col span=4>
+              <Col span=12>
                 <FieldFloat
                   field=FormConfig.OutputXYPoints
                   label="Output XY-points"
                 />
               </Col>
-            <Col span=4>
+              <Col span=12>
                 <FieldFloat
                   field=FormConfig.DownsampleTo
                   label="Downsample To"
                 />
               </Col>
-            <Col span=4>
+              <Col span=12>
-              <FieldFloat field=FormConfig.KernelWidth label="Kernel Width" />
+                <FieldFloat
+                  field=FormConfig.KernelWidth
+                  label="Kernel Width"
+                />
               </Col>
             </Row>
-          <Antd.Button
-            _type=`primary icon=Antd.IconName.reload onClick=onReload>
-            {"Update Distribution" |> R.ste}
-          </Antd.Button>
           </Antd.Form>
         </Form.Provider>
       </Antd.Card>
-    <div className=Styles.spacer />
+    </div>
+    <div> demoDist </div>
   </div>;
 };

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},
   ],
 };

src/components/charts/DistributionPlot/PercentilesChart.js

@@ -1,15 +1,10 @@
-import * as _ from 'lodash';
+import * as _ from "lodash";
-import React from 'react';
+import { createClassFromSpec } from "react-vega";
-import * as vega from 'vega';
+import spec from "./spec-percentiles";
-import {
-    createClassFromSpec
-} from "react-vega";
-import spec from './spec-percentiles';
 
 const PercentilesChart = createClassFromSpec({
-    spec
+  spec,
+  style: "width: 100%",
 });
 
-export {
+export { PercentilesChart };
-    PercentilesChart
-};

src/components/charts/DistributionPlot/spec-percentiles.json

@@ -1,13 +1,12 @@
 {
   "$schema": "https://vega.github.io/schema/vega/v5.json",
-    "width": 900,
+  "width": 500,
-    "height": 200,
+  "height": 400,
   "padding": 5,
   "data": [
     {
       "name": "facet",
-        "values": [
+      "values": [],
-        ],
       "format": { "type": "json", "parse": { "timestamp": "date" } }
     },
     {
@@ -17,9 +16,51 @@
         {
           "type": "aggregate",
           "groupby": ["x"],
-            "ops": ["mean","mean","mean","mean","mean", "mean","mean","mean","mean","mean","mean","mean","mean"],
+          "ops": [
-            "fields": ["p1", "p5", "p10", "p20", "p30", "p40", "p50", "p60", "p70", "p80", "p90", "p95", "p99"],
+            "mean",
-            "as": ["p1", "p5", "p10", "p20", "p30", "p40", "p50", "p60", "p70", "p80", "p90", "p95", "p99"]
+            "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"
+          ]
         }
       ]
     }
@@ -37,8 +78,8 @@
       "type": "linear",
       "range": "height",
       "nice": true,
-        "zero": true,
+      "zero": false,
-        "domain": { "data": "facet", "field": "p95" }
+      "domain": { "data": "facet", "field": "p99" }
     }
   ],
   "axes": [
@@ -46,7 +87,7 @@
       "orient": "bottom",
       "scale": "xscale",
       "grid": false,
-        "title": "X Value",
+      "tickSize": 2,
       "encode": {
         "grid": { "enter": { "stroke": { "value": "#ccc" } } },
         "ticks": { "enter": { "stroke": { "value": "#ccc" } } }
@@ -55,7 +96,6 @@
     {
       "orient": "left",
       "scale": "yscale",
-        "title": "Values and Percentiles",
       "grid": false,
       "domain": false,
       "tickSize": 2,
@@ -166,4 +206,3 @@
     }
   ]
 }
-  

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"