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/*" "packages/*"
], ],
"resolutions": { "resolutions": {
"@types/react": "17.0.39" "@types/react": "^17.0.43"
}, },
"packageManager": "yarn@1.22.17" "packageManager": "yarn@1.22.17"
} }

4
packages/components/README.md
View File

@ -1,14 +1,18 @@
# Squiggle Components # 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/). 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 # Build for development
We assume that you had run `yarn` at monorepo level, installing dependencies. We assume that you had run `yarn` at monorepo level, installing dependencies.
You need to _prepare_ by building and bundling `squiggle-lang` You need to _prepare_ by building and bundling `squiggle-lang`
```sh ```sh
cd ../squiggle-lang cd ../squiggle-lang
yarn build yarn build
``` ```
If you've otherwise done this recently you can skip those. If you've otherwise done this recently you can skip those.
Run a development server Run a development server

3
packages/components/package.json
View File

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

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

@ -7,18 +7,18 @@ import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/keybinding-vim"; import "ace-builds/src-noconflict/keybinding-vim";
interface CodeEditorProps { interface CodeEditorProps {
value : string, value: string;
onChange : (value: string) => void, onChange: (value: string) => void;
oneLine : boolean, oneLine: boolean;
width?: number width?: number;
} }
export let CodeEditor : FC<CodeEditorProps> = (props) => export let CodeEditor: FC<CodeEditorProps> = (props) => (
<AceEditor <AceEditor
value={props.value} value={props.value}
mode="golang" mode="golang"
theme="github" theme="github"
width={props.width ? props.width + 'px' : '500px'} width={props.width ? props.width + "px" : "500px"}
height={props.oneLine ? "1.2em" : "500px"} height={props.oneLine ? "1.2em" : "500px"}
showGutter={false} showGutter={false}
highlightActiveLine={false} highlightActiveLine={false}
@ -34,4 +34,5 @@ export let CodeEditor : FC<CodeEditorProps> = (props) =>
enableSnippets: true, enableSnippets: true,
}} }}
/> />
export default CodeEditor );
export default CodeEditor;

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

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

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

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

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

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

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

2
packages/components/tsconfig.json
View File

@ -19,7 +19,7 @@
"files": ["src/spec-distributions.json", "src/spec-percentiles.json"], "files": ["src/spec-distributions.json", "src/spec-percentiles.json"],
"target": "ES6", "target": "ES6",
"include": ["src/**/*", "src/*"], "include": ["src/**/*", "src/*"],
"exclude": ["node_modules", "**/*.spec.ts"], "exclude": ["node_modules", "**/*.spec.ts", "webpack.config.js"],
"references": [ "references": [
{ {
"path": "../squiggle-lang" "path": "../squiggle-lang"

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

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

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

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

833
yarn.lock
View File

File diff suppressed because it is too large Load Diff