quantified.uncertainty/squiggle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added ace code editor

Browse Source
This commit is contained in:
Ozzie Gooen 2020-08-10 14:40:40 +01:00
parent c298c42d3f
commit 5d7ffdf2bc
9 changed files with 361 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

22
src/App.re
View File

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

123
src/components/DistBuilder.re
View File

@ -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>
}
/>;
<>
<Form.Field
field
render={({handleChange, error, value, validate}) =>
<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,53 +340,57 @@ bar",
setReloader(_ => reloader + 1);
};
<div className=Styles.parent>
<div className=Styles.spacer />
demoDist
<div className=Styles.spacer />
<Antd.Card
title={"Distribution Form" |> R.ste}
extra={
<Antd.Button
icon=Antd.IconName.reload
shape=`circle
onClick=onReload
/>
}>
<Form.Provider value=reform>
<Antd.Form onSubmit>
<Row _type=`flex className=Styles.rows>
<Col span=24>
<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>
<Col span=4>
<FieldFloat
field=FormConfig.OutputXYPoints
label="Output XY-points"
/>
</Col>
<Col span=4>
<FieldFloat
field=FormConfig.DownsampleTo
label="Downsample To"
/>
</Col>
<Col span=4>
<FieldFloat field=FormConfig.KernelWidth label="Kernel Width" />
</Col>
</Row>
<div className="grid grid-cols-2 gap-4">
<div>
<Antd.Card
title={"Distribution Form" |> R.ste}
extra={
<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 />
icon=Antd.IconName.reload
shape=`circle
onClick=onReload
/>
}>
<Form.Provider value=reform>
<Antd.Form onSubmit>
<Row _type=`flex className=Styles.rows>
<Col span=24>
<FieldText
field=FormConfig.GuesstimatorString
label="Program"
/>
</Col>
</Row>
<Row _type=`flex className=Styles.rows>
<Col span=12>
<FieldFloat
field=FormConfig.SampleCount
label="Sample Count"
/>
</Col>
<Col span=12>
<FieldFloat
field=FormConfig.OutputXYPoints
label="Output XY-points"
/>
</Col>
<Col span=12>
<FieldFloat
field=FormConfig.DownsampleTo
label="Downsample To"
/>
</Col>
<Col span=12>
<FieldFloat
field=FormConfig.KernelWidth
label="Kernel Width"
/>
</Col>
</Row>
</Antd.Form>
</Form.Provider>
</Antd.Card>
</div>
<div> demoDist </div>
</div>;
};

2
src/components/charts/DistPlusPlotReducer.re
View File

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

17
src/components/charts/DistributionPlot/PercentilesChart.js
View File

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

365
src/components/charts/DistributionPlot/spec-percentiles.json
View File

@ -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 }
}
}
]
}
},
{
"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" }
}
}
}
]
}

26
yarn.lock
View File

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