Added ace code editor
This commit is contained in:
parent
c298c42d3f
commit
5d7ffdf2bc
|
@ -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",
|
||||
|
|
12
src/App.re
12
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>;
|
||||
</>;
|
||||
};
|
40
src/components/CodeEditor.js
Normal file
40
src/components/CodeEditor.js
Normal file
|
@ -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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
10
src/components/CodeEditor.re
Normal file
10
src/components/CodeEditor.re
Normal file
|
@ -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;
|
|
@ -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}>
|
||||
<Antd.Input.TextArea
|
||||
value
|
||||
spellcheck=false
|
||||
autosize=true
|
||||
onChange={BsReform.Helpers.handleChange(handleChange)}
|
||||
onBlur={_ => validate()}
|
||||
/>
|
||||
</Antd.Form.Item>
|
||||
<CodeEditor value onChange={r => handleChange(r)} />
|
||||
}
|
||||
/>;
|
||||
/>
|
||||
</>;
|
||||
};
|
||||
};
|
||||
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=Styles.spacer />
|
||||
demoDist
|
||||
<div className=Styles.spacer />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<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>
|
||||
<FieldFloat field=FormConfig.SampleCount label="Sample Count" />
|
||||
<Col span=12>
|
||||
<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>
|
||||
<FieldFloat field=FormConfig.KernelWidth label="Kernel Width" />
|
||||
<Col span=12>
|
||||
<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>;
|
||||
};
|
||||
|
|
|
@ -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},
|
||||
],
|
||||
};
|
|
@ -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
|
||||
};
|
||||
export { PercentilesChart };
|
||||
|
|
|
@ -1,13 +1,12 @@
|
|||
{
|
||||
"$schema": "https://vega.github.io/schema/vega/v5.json",
|
||||
"width": 900,
|
||||
"height": 200,
|
||||
"width": 500,
|
||||
"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"],
|
||||
"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"]
|
||||
"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"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -29,7 +70,7 @@
|
|||
"name": "xscale",
|
||||
"type": "linear",
|
||||
"nice": true,
|
||||
"domain": { "data": "facet", "field": "x"},
|
||||
"domain": { "data": "facet", "field": "x" },
|
||||
"range": "width"
|
||||
},
|
||||
{
|
||||
|
@ -37,8 +78,8 @@
|
|||
"type": "linear",
|
||||
"range": "height",
|
||||
"nice": true,
|
||||
"zero": true,
|
||||
"domain": { "data": "facet", "field": "p95" }
|
||||
"zero": false,
|
||||
"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,
|
||||
|
@ -165,5 +205,4 @@
|
|||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
|
|
26
yarn.lock
26
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"
|
||||
|
|
Loading…
Reference in New Issue
Block a user