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

Format and fix build error

Browse Source
This commit is contained in:
Sam Nolan 2022-04-04 16:58:05 +10:00
parent de1c1d4e7e
commit 097baadb04
12 changed files with 570 additions and 546 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -8,7 +8,7 @@
"packages/*"
],
"resolutions": {
"@types/react": "17.0.39"
"@types/react": "^17.0.43"
},
"packageManager": "yarn@1.22.17"
}

14
packages/components/README.md
View File

@ -1,25 +1,29 @@
# Squiggle Components
This package contains all the components for squiggle. These can be used either as a library or hosted as a [storybook](https://storybook.js.org/).
# Build for development
We assume that you had run `yarn` at monorepo level, installing dependencies.
You need to _prepare_ by building and bundling `squiggle-lang`
``` sh
We assume that you had run `yarn` at monorepo level, installing dependencies.
You need to _prepare_ by building and bundling `squiggle-lang`
```sh
cd ../squiggle-lang
yarn build
```
If you've otherwise done this recently you can skip those.
Run a development server
``` sh
```sh
yarn start
```
And build artefacts for production,
``` sh
```sh
yarn bundle # builds components library
yarn build # builds storybook app
```

3
packages/components/package.json
View File

@ -9,7 +9,6 @@
"@types/jest": "^27.4.0",
"@types/lodash": "^4.14.178",
"@types/node": "^17.0.16",
"@types/react": "^17.0.43",
"@types/react-dom": "^17.0.14",
"antd": "^4.19.3",
"cross-env": "^7.0.3",
@ -29,7 +28,7 @@
},
"scripts": {
"start": "cross-env REACT_APP_FAST_REFRESH=false && start-storybook -p 6006 -s public",
"build": "build-storybook -s public",
"build": "tsc -b && build-storybook -s public",
"bundle": "webpack",
"all": "yarn bundle && yarn build"
},

55
packages/components/src/CodeEditor.tsx
View File

@ -1,4 +1,4 @@
import React, {FC} from "react";
import React, { FC } from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-golang";
@ -7,31 +7,32 @@ import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/keybinding-vim";
interface CodeEditorProps {
value : string,
onChange : (value: string) => void,
oneLine : boolean,
width?: number
value: string;
onChange: (value: string) => void;
oneLine: boolean;
width?: number;
}
export let CodeEditor : FC<CodeEditorProps> = (props) =>
<AceEditor
value={props.value}
mode="golang"
theme="github"
width={props.width ? props.width + 'px' : '500px'}
height={props.oneLine ? "1.2em" : "500px"}
showGutter={false}
highlightActiveLine={false}
showPrintMargin={false}
onChange={props.onChange}
name="UNIQUE_ID_OF_DIV"
editorProps={{
$blockScrolling: true,
}}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: true,
enableSnippets: true,
}}
/>
export default CodeEditor
export let CodeEditor: FC<CodeEditorProps> = (props) => (
<AceEditor
value={props.value}
mode="golang"
theme="github"
width={props.width ? props.width + "px" : "500px"}
height={props.oneLine ? "1.2em" : "500px"}
showGutter={false}
highlightActiveLine={false}
showPrintMargin={false}
onChange={props.onChange}
name="UNIQUE_ID_OF_DIV"
editorProps={{
$blockScrolling: true,
}}
setOptions={{
enableBasicAutocompletion: false,
enableLiveAutocompletion: true,
enableSnippets: true,
}}
/>
);
export default CodeEditor;

53
packages/components/src/SquiggleChart.tsx
View File

@ -13,11 +13,11 @@ import * as chartSpecification from "./spec-distributions.json";
import * as percentilesSpec from "./spec-percentiles.json";
let SquiggleVegaChart = createClassFromSpec({
spec: chartSpecification as Spec
spec: chartSpecification as Spec,
});
let SquigglePercentilesChart = createClassFromSpec({
spec: percentilesSpec as Spec
spec: percentilesSpec as Spec,
});
export interface SquiggleChartProps {
@ -76,8 +76,13 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
y: y,
}));
console.log(values.length)
return <SquiggleVegaChart width={props.width ? props.width : 500} data={{ con: values }} actions={false}/>;
return (
<SquiggleVegaChart
width={props.width ? props.width : 500}
data={{ con: values }}
actions={false}
/>
);
} else if (shape.tag === "Discrete") {
let xyShape = shape.value.xyShape;
let totalY = xyShape.ys.reduce((a, b) => a + b);
@ -92,7 +97,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
y: y,
}));
return <SquiggleVegaChart data={{ dis: values }} actions={false}/>;
return <SquiggleVegaChart data={{ dis: values }} actions={false} />;
} else if (shape.tag === "Mixed") {
let discreteShape = shape.value.discrete.xyShape;
let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
@ -126,10 +131,10 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
let total = 0;
let cdf = sortedPoints.map((point: labeledPoint) => {
if (point.type == "discrete") {
if (point.type === "discrete") {
total += point.y;
return total;
} else if (point.type == "continuous") {
} else if (point.type === "continuous") {
total += (point.y / totalY) * totalContinuous;
return total;
}
@ -150,10 +155,10 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
})
);
let continuousValues = cdfLabeledPoint.filter(
(x) => x.type == "continuous"
(x) => x.type === "continuous"
);
let discreteValues = cdfLabeledPoint.filter(
(x) => x.type == "discrete"
(x) => x.type === "discrete"
);
return (
@ -170,9 +175,9 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
let count = props.diagramCount ? props.diagramCount : 20;
let step = (stop - start) / count;
let data = _.range(start, stop, step).map((x) => {
if (chartResult.NAME == "Function") {
if (chartResult.NAME === "Function") {
let result = chartResult.VAL(x);
if (result.tag == "Ok") {
if (result.tag === "Ok") {
let percentileArray = [
0.01, 0.05, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.95,
0.99,
@ -199,14 +204,16 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
return null;
}
});
return <SquigglePercentilesChart
data={{ facet: data.filter(x => x !== null) }}
return (
<SquigglePercentilesChart
data={{ facet: data.filter((x) => x !== null) }}
actions={false}
/>;
/>
);
}
});
return <>{chartResults}</>;
} else if (result.tag == "Error") {
} else if (result.tag === "Error") {
// At this point, we came across an error. What was our error?
return <p>{"Error parsing Squiggle: " + result.value}</p>;
}
@ -214,7 +221,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
};
function getPercentiles(percentiles: number[], t: DistPlus) {
if (t.pointSetDist.tag == "Discrete") {
if (t.pointSetDist.tag === "Discrete") {
let total = 0;
let maxX = _.max(t.pointSetDist.value.xyShape.xs);
let bounds = percentiles.map((_) => maxX);
@ -224,14 +231,14 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
(x, y) => {
total += y;
percentiles.forEach((v, i) => {
if (total > v && bounds[i] == maxX) {
if (total > v && bounds[i] === maxX) {
bounds[i] = x;
}
});
}
);
return bounds;
} else if (t.pointSetDist.tag == "Continuous") {
} else if (t.pointSetDist.tag === "Continuous") {
let total = 0;
let maxX = _.max(t.pointSetDist.value.xyShape.xs);
let totalY = _.sum(t.pointSetDist.value.xyShape.ys);
@ -242,14 +249,14 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
(x, y) => {
total += y / totalY;
percentiles.forEach((v, i) => {
if (total > v && bounds[i] == maxX) {
if (total > v && bounds[i] === maxX) {
bounds[i] = x;
}
});
}
);
return bounds;
} else if (t.pointSetDist.tag == "Mixed") {
} else if (t.pointSetDist.tag === "Mixed") {
let discreteShape = t.pointSetDist.value.discrete.xyShape;
let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
@ -283,13 +290,13 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
let maxX = _.max(sortedPoints.map((x) => x.x));
let bounds = percentiles.map((_) => maxX);
sortedPoints.map((point: labeledPoint) => {
if (point.type == "discrete") {
if (point.type === "discrete") {
total += point.y;
} else if (point.type == "continuous") {
} else if (point.type === "continuous") {
total += (point.y / totalY) * totalContinuous;
}
percentiles.forEach((v, i) => {
if (total > v && bounds[i] == maxX) {
if (total > v && bounds[i] === maxX) {
bounds[i] = total;
}
});

141
packages/components/src/SquigglePlayground.tsx
View File

@ -1,47 +1,51 @@
import React, { FC, useState } from "react"
import ReactDOM from "react-dom"
import { SquiggleChart } from "./SquiggleChart"
import CodeEditor from "./CodeEditor"
import { Form, Input, Card, Row, Col } from "antd"
import 'antd/dist/antd.css';
import React, { FC, useState } from "react";
import ReactDOM from "react-dom";
import { SquiggleChart } from "./SquiggleChart";
import CodeEditor from "./CodeEditor";
import { Form, Input, Card, Row, Col } from "antd";
import "antd/dist/antd.css";
interface FieldFloatProps {
label : string,
className? : string,
value : number,
onChange : (value: number) => void,
label: string;
className?: string;
value: number;
onChange: (value: number) => void;
}
function FieldFloat(Props: FieldFloatProps) {
let [contents, setContents] = useState(Props.value + "");
return <Form.Item label={Props.label}>
<Input
value={contents}
className={Props.className ? Props.className : ""}
onChange={(e) => setContents(e.target.value)}
onBlur={(_) => {
let result = parseFloat(contents);
if(result != NaN) {
Props.onChange(result)
}
}}
return (
<Form.Item label={Props.label}>
<Input
value={contents}
className={Props.className ? Props.className : ""}
onChange={(e) => setContents(e.target.value)}
onBlur={(_) => {
let result = parseFloat(contents);
if (result != NaN) {
Props.onChange(result);
}
}}
/>
</Form.Item>
</Form.Item>
);
}
interface Props {
initialSquiggleString : string
initialSquiggleString: string;
}
let SquigglePlayground : FC<Props> = (props) => {
let [squiggleString, setSquiggleString] = useState(props.initialSquiggleString)
let [sampleCount, setSampleCount] = useState(1000)
let [outputXYPoints, setOutputXYPoints] = useState(1000)
let [pointDistLength, setPointDistLength] = useState(1000)
let [diagramStart, setDiagramStart] = useState(0)
let [diagramStop, setDiagramStop] = useState(10)
let [diagramCount, setDiagramCount] = useState(20)
var demoDist =
let SquigglePlayground: FC<Props> = (props) => {
let [squiggleString, setSquiggleString] = useState(
props.initialSquiggleString
);
let [sampleCount, setSampleCount] = useState(1000);
let [outputXYPoints, setOutputXYPoints] = useState(1000);
let [pointDistLength, setPointDistLength] = useState(1000);
let [diagramStart, setDiagramStart] = useState(0);
let [diagramStop, setDiagramStop] = useState(10);
let [diagramCount, setDiagramCount] = useState(20);
var demoDist = (
<SquiggleChart
squiggleString={squiggleString}
sampleCount={sampleCount}
@ -50,75 +54,76 @@ let SquigglePlayground : FC<Props> = (props) => {
diagramStop={diagramStop}
diagramCount={diagramCount}
pointDistLength={pointDistLength}
/>
/>
);
return (
<Row>
<Col span={12}>
<Card
title="Distribution Form">
<Card title="Distribution Form">
<Form>
<Row gutter={16}>
<Col span={24}>
<CodeEditor value={squiggleString} onChange={setSquiggleString} oneLine={false}/> </Col>
<Col span={24}>
<CodeEditor
value={squiggleString}
onChange={setSquiggleString}
oneLine={false}
/>{" "}
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<FieldFloat
value={sampleCount}
<Col span={12}>
<FieldFloat
value={sampleCount}
label="Sample Count"
onChange={setSampleCount}
/> </Col>
/>{" "}
</Col>
<Col span={12}>
<FieldFloat
value={outputXYPoints}
onChange={setOutputXYPoints}
label="Output XY-points" />
label="Output XY-points"
/>
</Col>
<Col span={12}>
<FieldFloat
value={pointDistLength}
onChange={setPointDistLength}
label="Downsample To"
/>
<FieldFloat
value={pointDistLength}
onChange={setPointDistLength}
label="Downsample To"
/>
</Col>
<Col span={12}>
<FieldFloat
<FieldFloat
value={diagramStart}
onChange={setDiagramStart}
label="Diagram Start"
/>
/>
</Col>
<Col span={12}>
<FieldFloat
<Col span={12}>
<FieldFloat
value={diagramStop}
onChange={setDiagramStop}
label="Diagram Stop"
/> </Col>
/>{" "}
</Col>
<Col span={12}>
<FieldFloat
<FieldFloat
value={diagramCount}
onChange={setDiagramCount}
label="Diagram Count"
/>
label="Diagram Count"
/>
</Col>
</Row>
</Form>
</Card>
</Col>
<Col span={12} >
{demoDist}
</Col>
<Col span={12}>{demoDist}</Col>
</Row>
)
}
export default SquigglePlayground;
export function renderSquigglePlayground(props : Props){
let parent = document.createElement("div");
ReactDOM.render(
<SquigglePlayground
{...props}
/>,
parent
);
};
export default SquigglePlayground;
export function renderSquigglePlayground(props: Props) {
let parent = document.createElement("div");
ReactDOM.render(<SquigglePlayground {...props} />, parent);
return parent;
}

4
packages/components/src/index.ts
View File

@ -1,4 +1,6 @@
export { SquiggleChart } from "./SquiggleChart";
export { SquiggleEditor, renderSquiggleEditor } from "./SquiggleEditor";
import SquigglePlayground, { renderSquigglePlayground } from './SquigglePlayground';
import SquigglePlayground, {
renderSquigglePlayground,
} from "./SquigglePlayground";
export { SquigglePlayground, renderSquigglePlayground };

4
packages/components/src/spec-distributions.json
View File

@ -66,9 +66,7 @@
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale", "tickCount": 20 }
],
"axes": [{ "orient": "bottom", "scale": "xscale", "tickCount": 20 }],
"marks": [
{

4
packages/components/tsconfig.json
View File

@ -16,10 +16,10 @@
"declaration": true,
"sourceMap": true
},
"files": ["src/spec-distributions.json","src/spec-percentiles.json"],
"files": ["src/spec-distributions.json", "src/spec-percentiles.json"],
"target": "ES6",
"include": ["src/**/*", "src/*"],
"exclude": ["node_modules", "**/*.spec.ts"],
"exclude": ["node_modules", "**/*.spec.ts", "webpack.config.js"],
"references": [
{
"path": "../squiggle-lang"

2
packages/components/webpack.config.js
View File

@ -21,7 +21,7 @@ module.exports = {
resolve: {
extensions: [".js", ".tsx", ".ts"],
alias: {
"@quri/squiggle-lang": path.resolve(__dirname, '../squiggle-lang/src/js')
"@quri/squiggle-lang": path.resolve(__dirname, "../squiggle-lang/src/js"),
},
},
output: {

1
packages/squiggle-lang/package.json
View File

@ -29,7 +29,6 @@
"devDependencies": {
"@glennsl/rescript-jest": "^0.9.0",
"@types/jest": "^27.4.0",
"@types/webpack": "^5.28.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"docsify": "^4.12.2",
"gentype": "^4.3.0",

833
yarn.lock
View File

File diff suppressed because it is too large Load Diff