Merge pull request #53 from QURIresearch/notebook

Add squiggle notebooks
This commit is contained in:
Ozzie Gooen 2022-03-24 11:10:12 -04:00 committed by GitHub
commit 3449c93bcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 608 additions and 57449 deletions

View File

@ -0,0 +1,5 @@
dist
build
node_modules
storybook-static
.storybook

View File

@ -0,0 +1 @@
{}

File diff suppressed because it is too large Load Diff

View File

@ -1,6 +1,6 @@
{
"name": "@quri/squiggle-components",
"version": "0.1.5",
"version": "0.1.6",
"dependencies": {
"@quri/squiggle-lang": "0.2.2",
"@testing-library/jest-dom": "^5.16.2",
@ -69,10 +69,12 @@
"@storybook/preset-create-react-app": "^4.0.0",
"@storybook/react": "^6.4.18",
"@types/webpack": "^5.28.0",
"prettier": "^2.6.0",
"react-codejar": "^1.1.2",
"ts-loader": "^9.2.8",
"webpack": "^5.70.0",
"webpack-cli": "^4.9.2"
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
},
"resolutions": {
"@types/react": "17.0.39"

View File

@ -5,10 +5,7 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Squiggle components"
/>
<meta name="description" content="Squiggle components" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<title>Squiggle Components</title>
</head>

View File

@ -1,86 +1,96 @@
import * as React from 'react';
import * as _ from 'lodash';
import type { Spec } from 'vega';
import { run } from '@squiggle/lang';
import type { DistPlus, SamplingInputs } from '@squiggle/lang';
import { createClassFromSpec } from 'react-vega';
import * as chartSpecification from './spec-distributions.json'
import * as percentilesSpec from './spec-pertentiles.json'
import * as React from "react";
import _ from "lodash";
import type { Spec } from "vega";
import { run } from "@quri/squiggle-lang";
import type {
DistPlus,
SamplingInputs,
exportEnv,
exportDistribution,
} from "@quri/squiggle-lang";
import { createClassFromSpec } from "react-vega";
import * as chartSpecification from "./spec-distributions.json";
import * as percentilesSpec from "./spec-pertentiles.json";
let SquiggleVegaChart = createClassFromSpec({'spec': chartSpecification as Spec});
let SquiggleVegaChart = createClassFromSpec({
spec: chartSpecification as Spec,
});
let SquigglePercentilesChart = createClassFromSpec({'spec': percentilesSpec as Spec});
let SquigglePercentilesChart = createClassFromSpec({
spec: percentilesSpec as Spec,
});
export interface SquiggleChartProps {
/** The input string for squiggle */
squiggleString : string,
squiggleString: string;
/** If the output requires monte carlo sampling, the amount of samples */
sampleCount? : number,
sampleCount?: number;
/** The amount of points returned to draw the distribution */
outputXYPoints? : number,
kernelWidth? : number,
pointDistLength? : number,
outputXYPoints?: number;
kernelWidth?: number;
pointDistLength?: number;
/** If the result is a function, where the function starts */
diagramStart? : number,
diagramStart?: number;
/** If the result is a function, where the function ends */
diagramStop? : number,
diagramStop?: number;
/** If the result is a function, how many points along the function it samples */
diagramCount? : number
diagramCount?: number;
/** variables declared before this expression */
environment?: exportEnv;
/** When the environment changes */
onEnvChange?(env: exportEnv): void;
}
export const SquiggleChart : React.FC<SquiggleChartProps> = props => {
let samplingInputs : SamplingInputs = {
sampleCount : props.sampleCount,
outputXYPoints : props.outputXYPoints,
kernelWidth : props.kernelWidth,
pointDistLength : props.pointDistLength
}
export const SquiggleChart: React.FC<SquiggleChartProps> = (props) => {
let samplingInputs: SamplingInputs = {
sampleCount: props.sampleCount,
outputXYPoints: props.outputXYPoints,
kernelWidth: props.kernelWidth,
pointDistLength: props.pointDistLength,
};
let result = run(props.squiggleString, samplingInputs);
console.log(result)
let result = run(props.squiggleString, samplingInputs, props.environment);
if (result.tag === "Ok") {
let chartResults = result.value.map(chartResult => {
console.log(chartResult)
if(chartResult["NAME"] === "Float"){
let environment = result.value.environment;
let exports = result.value.exports;
if (props.onEnvChange) props.onEnvChange(environment);
let chartResults = exports.map((chartResult: exportDistribution) => {
if (chartResult["NAME"] === "Float") {
return <MakeNumberShower precision={3} number={chartResult["VAL"]} />;
}
else if(chartResult["NAME"] === "DistPlus"){
} else if (chartResult["NAME"] === "DistPlus") {
let shape = chartResult.VAL.pointSetDist;
if(shape.tag === "Continuous"){
if (shape.tag === "Continuous") {
let xyShape = shape.value.xyShape;
let totalY = xyShape.ys.reduce((a, b) => a + b);
let total = 0;
let cdf = xyShape.ys.map(y => {
let cdf = xyShape.ys.map((y) => {
total += y;
return total / totalY;
})
let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y ]) => ({cdf: (c * 100).toFixed(2) + "%", x: x, y: y}));
});
let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y]) => ({
cdf: (c * 100).toFixed(2) + "%",
x: x,
y: y,
}));
return (
<SquiggleVegaChart
data={{"con": values}}
/>
);
}
else if(shape.tag === "Discrete"){
return <SquiggleVegaChart data={{ con: values }} />;
} else if (shape.tag === "Discrete") {
let xyShape = shape.value.xyShape;
let totalY = xyShape.ys.reduce((a, b) => a + b);
let total = 0;
let cdf = xyShape.ys.map(y => {
let cdf = xyShape.ys.map((y) => {
total += y;
return total / totalY;
})
let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x,y]) => ({cdf: (c * 100).toFixed(2) + "%", x: x, y: y}));
});
let values = _.zip(cdf, xyShape.xs, xyShape.ys).map(([c, x, y]) => ({
cdf: (c * 100).toFixed(2) + "%",
x: x,
y: y,
}));
return (
<SquiggleVegaChart
data={{"dis": values}}
/>
);
}
else if(shape.tag === "Mixed"){
return <SquiggleVegaChart data={{ dis: values }} />;
} else if (shape.tag === "Mixed") {
let discreteShape = shape.value.discrete.xyShape;
let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
@ -89,141 +99,150 @@ export const SquiggleChart : React.FC<SquiggleChartProps> = props => {
let continuousPoints = _.zip(continuousShape.xs, continuousShape.ys);
interface labeledPoint {
x: number,
y: number,
type: "discrete" | "continuous"
};
x: number;
y: number;
type: "discrete" | "continuous";
}
let markedDisPoints : labeledPoint[] = discretePoints.map(([x,y]) => ({x: x, y: y, type: "discrete"}))
let markedConPoints : labeledPoint[] = continuousPoints.map(([x,y]) => ({x: x, y: y, type: "continuous"}))
let markedDisPoints: labeledPoint[] = discretePoints.map(
([x, y]) => ({ x: x, y: y, type: "discrete" })
);
let markedConPoints: labeledPoint[] = continuousPoints.map(
([x, y]) => ({ x: x, y: y, type: "continuous" })
);
let sortedPoints = _.sortBy(markedDisPoints.concat(markedConPoints), 'x')
let sortedPoints = _.sortBy(
markedDisPoints.concat(markedConPoints),
"x"
);
let totalContinuous = 1 - totalDiscrete;
let totalY = continuousShape.ys.reduce((a:number, b:number) => a + b);
let totalY = continuousShape.ys.reduce(
(a: number, b: number) => a + b
);
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") {
total += point.y / totalY * totalContinuous;
} else if (point.type == "continuous") {
total += (point.y / totalY) * totalContinuous;
return total;
}
});
interface cdfLabeledPoint {
cdf: string,
x: number,
y: number,
type: "discrete" | "continuous"
cdf: string;
x: number;
y: number;
type: "discrete" | "continuous";
}
let cdfLabeledPoint : cdfLabeledPoint[] = _.zipWith(cdf, sortedPoints, (c: number, point: labeledPoint) => ({...point, cdf: (c * 100).toFixed(2) + "%"}))
let continuousValues = cdfLabeledPoint.filter(x => x.type == "continuous")
let discreteValues = cdfLabeledPoint.filter(x => x.type == "discrete")
let cdfLabeledPoint: cdfLabeledPoint[] = _.zipWith(
cdf,
sortedPoints,
(c: number, point: labeledPoint) => ({
...point,
cdf: (c * 100).toFixed(2) + "%",
})
);
let continuousValues = cdfLabeledPoint.filter(
(x) => x.type == "continuous"
);
let discreteValues = cdfLabeledPoint.filter(
(x) => x.type == "discrete"
);
return (
<SquiggleVegaChart
data={{"con": continuousValues, "dis": discreteValues}}
data={{ con: continuousValues, dis: discreteValues }}
/>
);
}
}
else if(chartResult.NAME === "Function"){
} else if (chartResult.NAME === "Function") {
// We are looking at a function. In this case, we draw a Percentiles chart
let start = props.diagramStart ? props.diagramStart : 0
let stop = props.diagramStop ? props.diagramStop : 10
let count = props.diagramCount ? props.diagramCount : 0.1
let step = (stop - start)/ count
let data = _.range(start, stop, step).map(x => {
if(chartResult.NAME=="Function"){
let start = props.diagramStart ? props.diagramStart : 0;
let stop = props.diagramStop ? props.diagramStop : 10;
let count = props.diagramCount ? props.diagramCount : 0.1;
let step = (stop - start) / count;
let data = _.range(start, stop, step).map((x) => {
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
]
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,
];
let percentiles = getPercentiles(percentileArray, result.value);
return {
"x": x,
"p1": percentiles[0],
"p5": percentiles[1],
"p10": percentiles[2],
"p20": percentiles[3],
"p30": percentiles[4],
"p40": percentiles[5],
"p50": percentiles[6],
"p60": percentiles[7],
"p70": percentiles[8],
"p80": percentiles[9],
"p90": percentiles[10],
"p95": percentiles[11],
"p99": percentiles[12]
x: x,
p1: percentiles[0],
p5: percentiles[1],
p10: percentiles[2],
p20: percentiles[3],
p30: percentiles[4],
p40: percentiles[5],
p50: percentiles[6],
p60: percentiles[7],
p70: percentiles[8],
p80: percentiles[9],
p90: percentiles[10],
p95: percentiles[11],
p99: percentiles[12],
};
}
}
}
return 0;
})
return <SquigglePercentilesChart data={{"facet": data}} />
});
return <SquigglePercentilesChart data={{ facet: data }} />;
}
})
});
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>)
return <p>{"Error parsing Squiggle: " + result.value}</p>;
}
return (<p>{"Invalid Response"}</p>)
return <p>{"Invalid Response"}</p>;
};
function getPercentiles(percentiles:number[], t : DistPlus) {
if(t.pointSetDist.tag == "Discrete") {
function getPercentiles(percentiles: number[], t: DistPlus) {
if (t.pointSetDist.tag == "Discrete") {
let total = 0;
let maxX = _.max(t.pointSetDist.value.xyShape.xs)
let bounds = percentiles.map(_ => maxX);
_.zipWith(t.pointSetDist.value.xyShape.xs,t.pointSetDist.value.xyShape.ys, (x,y) => {
total += y
let maxX = _.max(t.pointSetDist.value.xyShape.xs);
let bounds = percentiles.map((_) => maxX);
_.zipWith(
t.pointSetDist.value.xyShape.xs,
t.pointSetDist.value.xyShape.ys,
(x, y) => {
total += y;
percentiles.forEach((v, i) => {
if(total > v && bounds[i] == maxX){
bounds[i] = x
if (total > v && bounds[i] == maxX) {
bounds[i] = x;
}
})
});
return bounds;
}
else if(t.pointSetDist.tag == "Continuous"){
);
return bounds;
} 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)
let bounds = percentiles.map(_ => maxX);
_.zipWith(t.pointSetDist.value.xyShape.xs,t.pointSetDist.value.xyShape.ys, (x,y) => {
let maxX = _.max(t.pointSetDist.value.xyShape.xs);
let totalY = _.sum(t.pointSetDist.value.xyShape.ys);
let bounds = percentiles.map((_) => maxX);
_.zipWith(
t.pointSetDist.value.xyShape.xs,
t.pointSetDist.value.xyShape.ys,
(x, y) => {
total += y / totalY;
percentiles.forEach((v, i) => {
if(total > v && bounds[i] == maxX){
bounds[i] = x
if (total > v && bounds[i] == maxX) {
bounds[i] = x;
}
})
});
return bounds;
}
else if(t.pointSetDist.tag == "Mixed"){
);
return bounds;
} else if (t.pointSetDist.tag == "Mixed") {
let discreteShape = t.pointSetDist.value.discrete.xyShape;
let totalDiscrete = discreteShape.ys.reduce((a, b) => a + b);
@ -232,80 +251,87 @@ function getPercentiles(percentiles:number[], t : DistPlus) {
let continuousPoints = _.zip(continuousShape.xs, continuousShape.ys);
interface labeledPoint {
x: number,
y: number,
type: "discrete" | "continuous"
};
x: number;
y: number;
type: "discrete" | "continuous";
}
let markedDisPoints : labeledPoint[] = discretePoints.map(([x,y]) => ({x: x, y: y, type: "discrete"}))
let markedConPoints : labeledPoint[] = continuousPoints.map(([x,y]) => ({x: x, y: y, type: "continuous"}))
let markedDisPoints: labeledPoint[] = discretePoints.map(([x, y]) => ({
x: x,
y: y,
type: "discrete",
}));
let markedConPoints: labeledPoint[] = continuousPoints.map(([x, y]) => ({
x: x,
y: y,
type: "continuous",
}));
let sortedPoints = _.sortBy(markedDisPoints.concat(markedConPoints), 'x')
let sortedPoints = _.sortBy(markedDisPoints.concat(markedConPoints), "x");
let totalContinuous = 1 - totalDiscrete;
let totalY = continuousShape.ys.reduce((a:number, b:number) => a + b);
let totalY = continuousShape.ys.reduce((a: number, b: number) => a + b);
let total = 0;
let maxX = _.max(sortedPoints.map(x => x.x));
let bounds = percentiles.map(_ => maxX);
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") {
total += (point.y / totalY) * totalContinuous;
}
else if (point.type == "continuous") {
total += point.y / totalY * totalContinuous;
}
percentiles.forEach((v,i) => {
if(total > v && bounds[i] == maxX){
percentiles.forEach((v, i) => {
if (total > v && bounds[i] == maxX) {
bounds[i] = total;
}
})
});
return total;
});
return bounds;
}
}
function MakeNumberShower(props: {number: number, precision :number}){
function MakeNumberShower(props: { number: number; precision: number }) {
let numberWithPresentation = numberShow(props.number, props.precision);
return (
<span>
{numberWithPresentation.value}
{numberWithPresentation.symbol}
{numberWithPresentation.power ?
{numberWithPresentation.power ? (
<span>
{'\u00b710'}
<span style={{fontSize: "0.6em", verticalAlign: "super"}}>
{"\u00b710"}
<span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
{numberWithPresentation.power}
</span>
</span>
: <></>}
) : (
<></>
)}
</span>
);
}
const orderOfMagnitudeNum = (n:number) => {
const orderOfMagnitudeNum = (n: number) => {
return Math.pow(10, n);
};
// 105 -> 3
const orderOfMagnitude = (n:number) => {
const orderOfMagnitude = (n: number) => {
return Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
};
function withXSigFigs(number:number, sigFigs:number) {
function withXSigFigs(number: number, sigFigs: number) {
const withPrecision = number.toPrecision(sigFigs);
const formatted = Number(withPrecision);
return `${formatted}`;
}
class NumberShower {
number: number
precision: number
number: number;
precision: number;
constructor(number:number, precision = 2) {
constructor(number: number, precision = 2) {
this.number = number;
this.precision = precision;
}
@ -314,9 +340,9 @@ class NumberShower {
const number = Math.abs(this.number);
const response = this.evaluate(number);
if (this.number < 0) {
response.value = '-' + response.value;
response.value = "-" + response.value;
}
return response
return response;
}
metricSystem(number: number, order: number) {
@ -327,7 +353,7 @@ class NumberShower {
evaluate(number: number) {
if (number === 0) {
return { value: this.metricSystem(0, 0) }
return { value: this.metricSystem(0, 0) };
}
const order = orderOfMagnitude(number);
@ -336,13 +362,13 @@ class NumberShower {
} else if (order < 4) {
return { value: this.metricSystem(number, 0) };
} else if (order < 6) {
return { value: this.metricSystem(number, 3), symbol: 'K' };
return { value: this.metricSystem(number, 3), symbol: "K" };
} else if (order < 9) {
return { value: this.metricSystem(number, 6), symbol: 'M' };
return { value: this.metricSystem(number, 6), symbol: "M" };
} else if (order < 12) {
return { value: this.metricSystem(number, 9), symbol: 'B' };
return { value: this.metricSystem(number, 9), symbol: "B" };
} else if (order < 15) {
return { value: this.metricSystem(number, 12), symbol: 'T' };
return { value: this.metricSystem(number, 12), symbol: "T" };
} else {
return { value: this.metricSystem(number, order), power: order };
}

View File

@ -0,0 +1,120 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SquiggleChart } from "./SquiggleChart";
import { ReactCodeJar } from "react-codejar";
import type { exportEnv } from "@quri/squiggle-lang";
export interface SquiggleEditorProps {
/** The input string for squiggle */
initialSquiggleString?: string;
/** If the output requires monte carlo sampling, the amount of samples */
sampleCount?: number;
/** The amount of points returned to draw the distribution */
outputXYPoints?: number;
kernelWidth?: number;
pointDistLength?: number;
/** If the result is a function, where the function starts */
diagramStart?: number;
/** If the result is a function, where the function ends */
diagramStop?: number;
/** If the result is a function, how many points along the function it samples */
diagramCount?: number;
/** The environment, other variables that were already declared */
environment?: exportEnv;
/** when the environment changes. Used again for notebook magic*/
onEnvChange?(env: exportEnv): void;
}
const highlight = (editor: HTMLInputElement) => {
let code = editor.textContent;
code = code.replace(/\((\w+?)(\b)/g, '(<font color="#8a2be2">$1</font>$2');
editor.innerHTML = code;
};
interface SquiggleEditorState {
expression: string;
env: exportEnv;
}
export class SquiggleEditor extends React.Component<
SquiggleEditorProps,
SquiggleEditorState
> {
constructor(props: SquiggleEditorProps) {
super(props);
let code = props.initialSquiggleString ? props.initialSquiggleString : "";
this.state = { expression: code, env: props.environment };
}
render() {
let { expression, env } = this.state;
let props = this.props;
return (
<div>
<ReactCodeJar
code={expression}
onUpdate={(e) => {
this.setState({ expression: e });
}}
style={{
borderRadius: "6px",
width: "530px",
border: "1px solid grey",
fontFamily: "'Source Code Pro', monospace",
fontSize: "14px",
fontWeight: "400",
letterSpacing: "normal",
lineHeight: "20px",
padding: "10px",
tabSize: "4",
}}
highlight={highlight}
lineNumbers={false}
/>
<SquiggleChart
squiggleString={expression}
sampleCount={props.sampleCount}
outputXYPoints={props.outputXYPoints}
kernelWidth={props.kernelWidth}
pointDistLength={props.pointDistLength}
diagramStart={props.diagramStart}
diagramStop={props.diagramStop}
diagramCount={props.diagramCount}
environment={env}
onEnvChange={props.onEnvChange}
/>
</div>
);
}
}
export function renderSquiggleEditor(props: SquiggleEditorProps) {
let parent = document.createElement("div");
ReactDOM.render(
<SquiggleEditor
{...props}
onEnvChange={(env) => {
// Typescript complains on two levels here.
// - Div elements don't have a value property
// - Even if it did (like it was an input element), it would have to
// be a string
//
// Which are reasonable in most web contexts.
//
// However we're using observable, neither of those things have to be
// true there. div elements can contain the value property, and can have
// the value be any datatype they wish.
//
// This is here to get the 'viewof' part of:
// viewof env = cell('normal(0,1)')
// to work
// @ts-ignore
parent.value = env;
parent.dispatchEvent(new CustomEvent("input"));
if (props.onEnvChange) props.onEnvChange(env);
}}
/>,
parent
);
return parent;
}

View File

@ -1 +1,2 @@
export { SquiggleChart } from './SquiggleChart';
export { SquiggleChart } from "./SquiggleChart";
export { SquiggleEditor, renderSquiggleEditor } from "./SquiggleEditor";

View File

@ -4,14 +4,14 @@
"width": 500,
"height": 200,
"padding": 5,
"data": [{"name": "con"}, {"name": "dis"}],
"data": [{ "name": "con" }, { "name": "dis" }],
"signals": [
{
"name": "mousex",
"description": "x position of mouse",
"update": "0",
"on": [{"events": "mousemove", "update": "1-x()/width"}]
"on": [{ "events": "mousemove", "update": "1-x()/width" }]
},
{
"name": "xscale",
@ -35,86 +35,88 @@
}
],
"scales": [{
"scales": [
{
"name": "xscale",
"type": "pow",
"exponent": {"signal": "xscale"},
"exponent": { "signal": "xscale" },
"range": "width",
"zero": false,
"nice": false,
"domain": {
"fields": [
{ "data": "con", "field": "x"},
{ "data": "dis", "field": "x"}
{ "data": "con", "field": "x" },
{ "data": "dis", "field": "x" }
]
}
}, {
},
{
"name": "yscale",
"type": "pow",
"exponent": {"signal": "yscale"},
"exponent": { "signal": "yscale" },
"range": "height",
"nice": true,
"zero": true,
"domain": {
"fields": [
{ "data": "con", "field": "y"},
{ "data": "dis", "field": "y"}
{ "data": "con", "field": "y" },
{ "data": "dis", "field": "y" }
]
}
}
],
"axes": [
{"orient": "bottom", "scale": "xscale", "tickCount": 20},
{"orient": "left", "scale": "yscale"}
{ "orient": "bottom", "scale": "xscale", "tickCount": 20 },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "area",
"from": {"data": "con"},
"from": { "data": "con" },
"encode": {
"enter": {
"tooltip": {"signal": "datum.cdf"}
"tooltip": { "signal": "datum.cdf" }
},
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"},
"y2": {"scale": "yscale", "value": 0},
"x": { "scale": "xscale", "field": "x" },
"y": { "scale": "yscale", "field": "y" },
"y2": { "scale": "yscale", "value": 0 },
"fill": {
"signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'steelblue'}, {offset: clamp(mousex, 0, 1), color: 'blue'}, {offset: 1.0, color: 'blue'} ] }"
},
"interpolate": {"value": "monotone"},
"fillOpacity": {"value": 1}
"interpolate": { "value": "monotone" },
"fillOpacity": { "value": 1 }
}
}
},
{
"type": "rect",
"from": {"data": "dis"},
"from": { "data": "dis" },
"encode": {
"enter": {
"y2": {"scale": "yscale", "value": 0},
"width": {"value": 1}
"y2": { "scale": "yscale", "value": 0 },
"width": { "value": 1 }
},
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"}
"x": { "scale": "xscale", "field": "x" },
"y": { "scale": "yscale", "field": "y" }
}
}
},
{
"type": "symbol",
"from": {"data": "dis"},
"from": { "data": "dis" },
"encode": {
"enter": {
"shape": {"value": "circle"},
"width": {"value": 5},
"tooltip": {"signal": "datum.y"}
"shape": { "value": "circle" },
"width": { "value": 5 },
"tooltip": { "signal": "datum.y" }
},
"update": {
"x": {"scale": "xscale", "field": "x"},
"y": {"scale": "yscale", "field": "y"}
"x": { "scale": "xscale", "field": "x" },
"y": { "scale": "yscale", "field": "y" }
}
}
}

View File

@ -1,4 +1,4 @@
import { Meta } from '@storybook/addon-docs';
import { Meta } from "@storybook/addon-docs";
<Meta title="Squiggle/Introduction" />

View File

@ -1,9 +1,9 @@
import { SquiggleChart } from '../SquiggleChart'
import { Canvas, Meta, Story, Props } from '@storybook/addon-docs';
import { SquiggleChart } from "../SquiggleChart";
import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
<Meta title="Squiggle/SquiggleChart" component={ SquiggleChart } />
<Meta title="Squiggle/SquiggleChart" component={SquiggleChart} />
export const Template = SquiggleChart
export const Template = SquiggleChart;
# Squiggle Chart
@ -19,53 +19,62 @@ could be continuous, discrete or mixed.
## Distributions
An example of a normal distribution is:
<Canvas>
<Story
name="Normal"
args={{
squiggleString: "normal(5,2)"
}}>
squiggleString: "normal(5,2)",
}}
>
{Template.bind({})}
</Story>
</Canvas>
An example of a Discrete distribution is:
<Canvas>
<Story
name="Discrete"
args={{
squiggleString: "mm(0, 1, [0.5, 0.5])"
}}>
squiggleString: "mm(0, 1, [0.5, 0.5])",
}}
>
{Template.bind({})}
</Story>
</Canvas>
An example of a Mixed distribution is:
<Canvas>
<Story
name="Mixed"
args={{
squiggleString: "mm(0, 5 to 10, [0.5, 0.5])"
}}>
squiggleString: "mm(0, 5 to 10, [0.5, 0.5])",
}}
>
{Template.bind({})}
</Story>
</Canvas>
## Constants
A constant is a simple number as a result. This has special formatting rules
to allow large and small numbers being printed cleanly.
<Canvas>
<Story
name="Constant"
args={{
squiggleString: "500000 * 5000000"
}}>
squiggleString: "500000 * 5000000",
}}
>
{Template.bind({})}
</Story>
</Canvas>
## Functions
Finally, a function can be returned, and this shows how the distribution changes
over the axis between x = 0 and 10.
@ -73,8 +82,9 @@ over the axis between x = 0 and 10.
<Story
name="Function"
args={{
squiggleString: "f(x) = normal(x,x)\nf"
}}>
squiggleString: "f(x) = normal(x,x)\nf",
}}
>
{Template.bind({})}
</Story>
</Canvas>

View File

@ -1,26 +1,34 @@
const path = require('path');
const path = require("path");
module.exports = {
mode: 'production',
entry: './src/index.ts',
mode: "production",
devtool: "source-map",
entry: "./src/index.ts",
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
use: "ts-loader",
exclude: /node_modules/,
},
],
},
resolve: {
extensions: ['.js', '.tsx', '.ts'],
extensions: [".js", ".tsx", ".ts"],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
library: {
name: 'squiggle_components',
type: 'umd',
name: "squiggle_components",
type: "umd",
},
},
devServer: {
static: {
directory: path.join(__dirname, "public"),
},
compress: true,
port: 9000,
},
};

View File

@ -1,19 +1,34 @@
import { run } from '../src/js/index';
describe("A simple result", () => {
let testRun = (x: string) => {
let result = run(x)
if(result.tag == 'Ok'){
return { tag: 'Ok', value: result.value.exports }
}
else {
return result
}
}
describe("Simple calculations and results", () => {
test("mean(normal(5,2))", () => {
expect(run("mean(normal(5,2))")).toEqual({ tag: 'Ok', value: [ { NAME: 'Float', VAL: 5 } ] })
expect(testRun("mean(normal(5,2))")).toEqual({ tag: 'Ok', value: [ { NAME: 'Float', VAL: 5 } ] })
})
test("10+10", () => {
let foo = run("10 + 10")
let foo = testRun("10 + 10")
expect(foo).toEqual({ tag: 'Ok', value: [ { NAME: 'Float', VAL: 20 } ] })
})
})
describe("Log function", () => {
test("log(1) = 0", () => {
let foo = run("log(1)")
let foo = testRun("log(1)")
expect(foo).toEqual({ tag: 'Ok', value: [ { NAME: 'Float', VAL: 0} ]})
})
})
describe("Multimodal too many weights error", () => {
test("mm(0,0,[0,0,0])", () => {
let foo = run("mm(0,0,[0,0,0])")
let foo = testRun("mm(0,0,[0,0,0])")
expect(foo).toEqual({ "tag": "Error", "value": "Function multimodal error: Too many weights provided" })
})
});

View File

@ -1,6 +1,6 @@
import {runAll} from '../rescript/ProgramEvaluator.gen';
import type { Inputs_SamplingInputs_t as SamplingInputs } from '../rescript/ProgramEvaluator.gen';
export type { SamplingInputs }
import type { Inputs_SamplingInputs_t as SamplingInputs,exportEnv, exportType, exportDistribution} from '../rescript/ProgramEvaluator.gen';
export type { SamplingInputs , exportEnv, exportDistribution }
export type {t as DistPlus} from '../rescript/pointSetDist/DistPlus.gen';
export let defaultSamplingInputs : SamplingInputs = {
@ -9,7 +9,9 @@ export let defaultSamplingInputs : SamplingInputs = {
pointDistLength : 1000
}
export function run(squiggleString : string, samplingInputs? : SamplingInputs) {
export function run(squiggleString : string, samplingInputs? : SamplingInputs, environment?: exportEnv) : { tag: "Ok"; value: exportType }
| { tag: "Error"; value: string } {
let si : SamplingInputs = samplingInputs ? samplingInputs : defaultSamplingInputs
return runAll(squiggleString, si)
let env : exportEnv = environment ? environment : []
return runAll(squiggleString, si, env)
}

View File

@ -36,12 +36,20 @@ module Inputs = {
}
}
type exportType = [
type exportDistribution = [
| #DistPlus(DistPlus.t)
| #Float(float)
| #Function((float) => Belt.Result.t<DistPlus.t,string>)
]
type exportEnv = array<(string, ASTTypes.node)>
type exportType = {
environment : exportEnv,
exports: array<exportDistribution>
}
module Internals = {
let addVariable = (
{samplingInputs, squiggleString, environment}: Inputs.inputs,
@ -71,40 +79,17 @@ module Internals = {
let runNode = (inputs, node) =>
AST.toLeaf(makeInputs(inputs), inputs.environment, node)
let runProgram = (inputs: Inputs.inputs, p: ASTTypes.program) => {
let ins = ref(inputs)
p
|> E.A.fmap(x =>
switch x {
| #Assignment(name, node) =>
ins := addVariable(ins.contents, name, node)
None
| #Expression(node) =>
Some(runNode(ins.contents, node) |> E.R.fmap(r => (ins.contents.environment, r)))
}
)
|> E.A.O.concatSomes
|> E.A.R.firstErrorOrOpen
}
let inputsToLeaf = (inputs: Inputs.inputs) =>
Parser.fromString(inputs.squiggleString) |> E.R.bind(_, g => runProgram(inputs, g))
let outputToDistPlus = (inputs: Inputs.inputs, pointSetDist: PointSetTypes.pointSetDist) =>
DistPlus.make(~pointSetDist, ~squiggleString=Some(inputs.squiggleString), ())
}
let renderIfNeeded = (inputs: Inputs.inputs, node: ASTTypes.node): result<
let renderIfNeeded = (inputs: Inputs.inputs, node: ASTTypes.node): result<
ASTTypes.node,
string,
> =>
> =>
node |> (
x =>
switch x {
| #Normalize(_) as n
| #SymbolicDist(_) as n =>
#Render(n)
|> Internals.runNode(inputs)
|> runNode(inputs)
|> (
x =>
switch x {
@ -118,7 +103,10 @@ let renderIfNeeded = (inputs: Inputs.inputs, node: ASTTypes.node): result<
}
)
let rec returnDist = (functionInfo : (array<string>, ASTTypes.node),
let outputToDistPlus = (inputs: Inputs.inputs, pointSetDist: PointSetTypes.pointSetDist) =>
DistPlus.make(~pointSetDist, ~squiggleString=Some(inputs.squiggleString), ())
let rec returnDist = (functionInfo : (array<string>, ASTTypes.node),
inputs : Inputs.inputs,
env : ASTTypes.environment) => {
(input : float) => {
@ -136,70 +124,80 @@ let rec returnDist = (functionInfo : (array<string>, ASTTypes.node),
}
)
}
}
// TODO: Consider using ExpressionTypes.ExpressionTree.getFloat or similar in this function
and coersionToExportedTypes = (
}
// TODO: Consider using ExpressionTypes.ExpressionTree.getFloat or similar in this function
and coersionToExportedTypes = (
inputs,
env: ASTTypes.environment,
node: ASTTypes.node,
): result<exportType, string> =>
node
ex: ASTTypes.node,
): result<exportDistribution, string> =>
ex
|> renderIfNeeded(inputs)
|> E.R.bind(_, x =>
switch x {
| #RenderedDist(Discrete({xyShape: {xs: [x], ys: [1.0]}})) => Ok(#Float(x))
| #SymbolicDist(#Float(x)) => Ok(#Float(x))
| #RenderedDist(n) => Ok(#DistPlus(Internals.outputToDistPlus(inputs, n)))
| #RenderedDist(n) => Ok(#DistPlus(outputToDistPlus(inputs, n)))
| #Function(n) => Ok(#Function(returnDist(n, inputs, env)))
| n => Error("Didn't output a rendered distribution. Format:" ++ AST.toString(n))
}
)
and evaluateFunction = (
and evaluateFunction = (
inputs: Inputs.inputs,
fn: (array<string>, ASTTypes.node),
fnInputs,
) => {
) => {
let output = AST.runFunction(
Internals.makeInputs(inputs),
makeInputs(inputs),
inputs.environment,
fnInputs,
fn,
)
output |> E.R.bind(_, coersionToExportedTypes(inputs, inputs.environment))
}
let runProgram = (inputs: Inputs.inputs, p: ASTTypes.program) => {
let ins = ref(inputs)
p
|> E.A.fmap(x =>
switch x {
| #Assignment(name, node) =>
ins := addVariable(ins.contents, name, node)
None
| #Expression(node) =>
Some(runNode(ins.contents, node))
}
)
|> E.A.O.concatSomes
|> E.A.R.firstErrorOrOpen
|> E.R.bind(_, d =>
d
|> E.A.fmap(x => coersionToExportedTypes(inputs, ins.contents.environment, x))
|> E.A.R.firstErrorOrOpen
)
|> E.R.fmap(ex =>
{
environment: Belt.Map.String.toArray(ins.contents.environment),
exports: ex
}
)
}
let inputsToLeaf = (inputs: Inputs.inputs) =>
Parser.fromString(inputs.squiggleString) |> E.R.bind(_, g => runProgram(inputs, g))
}
let rec mapM = (f, xs) =>
switch xs {
| [] => Ok([])
| arr =>
switch f(arr[0]) {
| Error(err) => Error(err)
| Ok(val) =>
switch mapM(f, Belt.Array.sliceToEnd(arr, 1)) {
| Error(err) => Error(err)
| Ok(restList) => Ok(Belt.Array.concat([val], restList))
}
}
}
let evaluateProgram = (inputs: Inputs.inputs) =>
inputs
|> Internals.inputsToLeaf
|> E.R.bind(_, xs => mapM(((a, b)) => coersionToExportedTypes(inputs, a, b), xs))
@genType
let runAll = (squiggleString: string, samplingInputs: Inputs.SamplingInputs.t) => {
let runAll : (string, Inputs.SamplingInputs.t, exportEnv) => result<exportType,string> =
(squiggleString, samplingInputs, environment) => {
let inputs = Inputs.make(
~samplingInputs,
~squiggleString,
~environment=[]->Belt.Map.String.fromArray,
~environment=Belt.Map.String.fromArray(environment),
(),
)
let response1 = evaluateProgram(inputs);
response1
Internals.inputsToLeaf(inputs)
}

View File

@ -1,3 +1,4 @@
@genType
type rec hash = array<(string, node)>
and node = [
| #SymbolicDist(SymbolicDistTypes.symbolicDist)

View File

@ -31,6 +31,7 @@ type triangular = {
high: float,
}
@genType
type symbolicDist = [
| #Normal(normal)
| #Beta(beta)

View File

@ -1,5 +1,6 @@
// This file has no dependencies. It's used outside of the interpreter, but the interpreter depends on it.
@genType
type algebraicOperation = [
| #Add
| #Multiply
@ -7,6 +8,7 @@ type algebraicOperation = [
| #Divide
| #Exponentiate
]
@genType
type pointwiseOperation = [#Add | #Multiply | #Exponentiate]
type scaleOperation = [#Multiply | #Exponentiate | #Log]
type distToFloatOperation = [

View File

@ -14370,6 +14370,11 @@ prepend-http@^2.0.0:
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
prettier@^2.6.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.0.tgz#12f8f504c4d8ddb76475f441337542fa799207d4"
integrity sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A==
pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
version "5.6.0"
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@ -18696,7 +18701,7 @@ webpack-dev-middleware@^5.3.1:
range-parser "^1.2.1"
schema-utils "^4.0.0"
webpack-dev-server@^4.6.0, webpack-dev-server@^4.7.1:
webpack-dev-server@^4.6.0, webpack-dev-server@^4.7.1, webpack-dev-server@^4.7.4:
version "4.7.4"
resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.7.4.tgz#d0ef7da78224578384e795ac228d8efb63d5f945"
integrity sha512-nfdsb02Zi2qzkNmgtZjkrMOcXnYZ6FLKcQwpxT7MvmHKc+oTtDsBju8j+NMyAygZ9GW1jMEUpy3itHtqgEhe1A==