Remove observable boilerplate + refactors
This commit is contained in:
Sam Nolan
parent
c17e4196f1
commit
fc68a8d069
|
|
@ -38,7 +38,6 @@
|
|||
"@types/lodash": "^4.14.182",
|
||||
"@types/node": "^18.0.0",
|
||||
"@types/react": "^18.0.9",
|
||||
"@types/react-dom": "^18.0.5",
|
||||
"@types/styled-components": "^5.1.24",
|
||||
"@types/webpack": "^5.28.0",
|
||||
"cross-env": "^7.0.3",
|
||||
|
|
@ -47,7 +46,6 @@
|
|||
"postcss-import": "^14.1.0",
|
||||
"postcss-loader": "^7.0.0",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "^5.0.1",
|
||||
"style-loader": "^3.3.1",
|
||||
"tailwindcss": "^3.1.3",
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ import {
|
|||
defaultBindings,
|
||||
defaultEnvironment,
|
||||
} from "@quri/squiggle-lang";
|
||||
import { FunctionChartSettings } from "./FunctionChart";
|
||||
import { useSquiggle } from "../lib/hooks";
|
||||
import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
|
||||
import { SquiggleItem } from "./SquiggleItem";
|
||||
|
|
@ -20,8 +19,12 @@ export interface SquiggleChartProps {
|
|||
sampleCount?: number;
|
||||
/** The amount of points returned to draw the distribution */
|
||||
environment?: environment;
|
||||
/** If the result is a function, where the function starts, ends and the amount of stops */
|
||||
chartSettings?: FunctionChartSettings;
|
||||
/** If the result is a function, where the function domain starts */
|
||||
diagramStart?: number;
|
||||
/** If the result is a function, where the function domain ends */
|
||||
diagramStop?: number;
|
||||
/** If the result is a function, the amount of stops sampled */
|
||||
diagramCount?: number;
|
||||
/** When the squiggle code gets reevaluated */
|
||||
onChange?(expr: squiggleExpression | undefined): void;
|
||||
/** CSS width of the element */
|
||||
|
|
@ -44,7 +47,6 @@ export interface SquiggleChartProps {
|
|||
}
|
||||
|
||||
const defaultOnChange = () => {};
|
||||
const defaultChartSettings = { start: 0, stop: 10, count: 20 };
|
||||
|
||||
export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||
squiggleString = "",
|
||||
|
|
@ -59,9 +61,11 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
showControls = false,
|
||||
logX = false,
|
||||
expY = false,
|
||||
chartSettings = defaultChartSettings,
|
||||
diagramStart = 0,
|
||||
diagramStop = 10,
|
||||
diagramCount = 100,
|
||||
}) => {
|
||||
const { result } = useSquiggle({
|
||||
const result = useSquiggle({
|
||||
code: squiggleString,
|
||||
bindings,
|
||||
environment,
|
||||
|
|
@ -80,6 +84,12 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
expY,
|
||||
};
|
||||
|
||||
let chartSettings = {
|
||||
start: diagramStart,
|
||||
stop: diagramStop,
|
||||
count: diagramCount,
|
||||
};
|
||||
|
||||
return (
|
||||
<SquiggleItem
|
||||
expression={result.value}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,11 @@
|
|||
import React, { useState } from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
import { CodeEditor } from "./CodeEditor";
|
||||
import {
|
||||
squiggleExpression,
|
||||
environment,
|
||||
bindings,
|
||||
jsImports,
|
||||
defaultEnvironment,
|
||||
} from "@quri/squiggle-lang";
|
||||
import { environment, bindings, jsImports } from "@quri/squiggle-lang";
|
||||
import { defaultImports, defaultBindings } from "@quri/squiggle-lang";
|
||||
import { SquiggleContainer } from "./SquiggleContainer";
|
||||
import { useSquiggle, useSquigglePartial } from "../lib/hooks";
|
||||
import { SquiggleChart, SquiggleChartProps } from "./SquiggleChart";
|
||||
import { useSquigglePartial } from "../lib/hooks";
|
||||
import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
|
||||
import { SquiggleItem } from "./SquiggleItem";
|
||||
|
||||
const WrappedCodeEditor: React.FC<{
|
||||
code: string;
|
||||
|
|
@ -29,111 +22,25 @@ const WrappedCodeEditor: React.FC<{
|
|||
</div>
|
||||
);
|
||||
|
||||
export interface SquiggleEditorProps {
|
||||
/** The input string for squiggle */
|
||||
initialSquiggleString?: string;
|
||||
/** The width of the element */
|
||||
width?: 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;
|
||||
/** When the environment changes. Used again for notebook magic */
|
||||
onChange?(expr: squiggleExpression | undefined): void;
|
||||
/** Previous variable declarations */
|
||||
bindings?: bindings;
|
||||
/** If the output requires monte carlo sampling, the amount of samples */
|
||||
environment?: environment;
|
||||
/** JS Imports */
|
||||
jsImports?: jsImports;
|
||||
/** Whether to show detail about types of the returns, default false */
|
||||
showTypes?: boolean;
|
||||
/** Whether to give users access to graph controls */
|
||||
showControls?: boolean;
|
||||
/** Whether to show a summary table */
|
||||
showSummary?: boolean;
|
||||
/** Whether to log the x coordinate on distribution charts */
|
||||
logX?: boolean;
|
||||
/** Whether to exp the y coordinate on distribution charts */
|
||||
expY?: boolean;
|
||||
}
|
||||
export type SquiggleEditorProps = SquiggleChartProps;
|
||||
|
||||
export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
|
||||
initialSquiggleString = "",
|
||||
width,
|
||||
diagramStart = 0,
|
||||
diagramStop = 10,
|
||||
diagramCount = 20,
|
||||
onChange,
|
||||
bindings = defaultBindings,
|
||||
environment,
|
||||
jsImports = defaultImports,
|
||||
showTypes = false,
|
||||
showControls = false,
|
||||
showSummary = false,
|
||||
logX = false,
|
||||
expY = false,
|
||||
}: SquiggleEditorProps) => {
|
||||
const [code, setCode] = useState(initialSquiggleString);
|
||||
React.useEffect(
|
||||
() => setCode(initialSquiggleString),
|
||||
[initialSquiggleString]
|
||||
);
|
||||
|
||||
const { result, observableRef } = useSquiggle({
|
||||
code,
|
||||
bindings,
|
||||
environment,
|
||||
jsImports,
|
||||
onChange,
|
||||
});
|
||||
|
||||
const chartSettings = {
|
||||
start: diagramStart,
|
||||
stop: diagramStop,
|
||||
count: diagramCount,
|
||||
};
|
||||
|
||||
const distributionPlotSettings = {
|
||||
showControls,
|
||||
showSummary,
|
||||
logX,
|
||||
expY,
|
||||
};
|
||||
export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
|
||||
const { squiggleString = "" } = props;
|
||||
const [code, setCode] = useState(squiggleString);
|
||||
React.useEffect(() => setCode(squiggleString), [squiggleString]);
|
||||
|
||||
let chartProps = { ...props, squiggleString: code };
|
||||
return (
|
||||
<div ref={observableRef}>
|
||||
<SquiggleContainer>
|
||||
<WrappedCodeEditor code={code} setCode={setCode} />
|
||||
{result.tag === "Ok" ? (
|
||||
<SquiggleItem
|
||||
expression={result.value}
|
||||
width={width}
|
||||
height={200}
|
||||
distributionPlotSettings={distributionPlotSettings}
|
||||
showTypes={showTypes}
|
||||
chartSettings={chartSettings}
|
||||
environment={environment ?? defaultEnvironment}
|
||||
/>
|
||||
) : (
|
||||
<SquiggleErrorAlert error={result.value} />
|
||||
)}
|
||||
</SquiggleContainer>
|
||||
</div>
|
||||
<SquiggleContainer>
|
||||
<WrappedCodeEditor code={code} setCode={setCode} />
|
||||
<SquiggleChart {...chartProps} />
|
||||
</SquiggleContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export function renderSquiggleEditorToDom(props: SquiggleEditorProps) {
|
||||
const parent = document.createElement("div");
|
||||
ReactDOM.render(<SquiggleEditor {...props} />, parent);
|
||||
return parent;
|
||||
}
|
||||
|
||||
export interface SquigglePartialProps {
|
||||
/** The input string for squiggle */
|
||||
initialSquiggleString?: string;
|
||||
squiggleString?: string;
|
||||
/** when the environment changes. Used again for notebook magic*/
|
||||
onChange?(expr: bindings | undefined): void;
|
||||
/** Previously declared variables */
|
||||
|
|
@ -145,19 +52,16 @@ export interface SquigglePartialProps {
|
|||
}
|
||||
|
||||
export const SquigglePartial: React.FC<SquigglePartialProps> = ({
|
||||
initialSquiggleString = "",
|
||||
squiggleString = "",
|
||||
onChange,
|
||||
bindings = defaultBindings,
|
||||
environment,
|
||||
jsImports = defaultImports,
|
||||
}: SquigglePartialProps) => {
|
||||
const [code, setCode] = useState(initialSquiggleString);
|
||||
React.useEffect(
|
||||
() => setCode(initialSquiggleString),
|
||||
[initialSquiggleString]
|
||||
);
|
||||
const [code, setCode] = useState(squiggleString);
|
||||
React.useEffect(() => setCode(squiggleString), [squiggleString]);
|
||||
|
||||
const { result, observableRef } = useSquigglePartial({
|
||||
const result = useSquigglePartial({
|
||||
code,
|
||||
bindings,
|
||||
environment,
|
||||
|
|
@ -166,19 +70,9 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
|
|||
});
|
||||
|
||||
return (
|
||||
<div ref={observableRef}>
|
||||
<SquiggleContainer>
|
||||
<WrappedCodeEditor code={code} setCode={setCode} />
|
||||
{result.tag !== "Ok" ? (
|
||||
<SquiggleErrorAlert error={result.value} />
|
||||
) : null}
|
||||
</SquiggleContainer>
|
||||
</div>
|
||||
<SquiggleContainer>
|
||||
<WrappedCodeEditor code={code} setCode={setCode} />
|
||||
{result.tag !== "Ok" ? <SquiggleErrorAlert error={result.value} /> : null}
|
||||
</SquiggleContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export function renderSquigglePartialToDom(props: SquigglePartialProps) {
|
||||
const parent = document.createElement("div");
|
||||
ReactDOM.render(<SquigglePartial {...props} />, parent);
|
||||
return parent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { FC, Fragment, useState, useEffect } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form";
|
||||
import * as yup from "yup";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
|
|
@ -250,11 +249,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
onSettingsChange?.(vars);
|
||||
}, [vars, onSettingsChange]);
|
||||
|
||||
const chartSettings = {
|
||||
start: Number(vars.diagramStart),
|
||||
stop: Number(vars.diagramStop),
|
||||
count: Number(vars.diagramCount),
|
||||
};
|
||||
const env: environment = {
|
||||
sampleCount: Number(vars.sampleCount),
|
||||
xyPointLength: Number(vars.xyPointLength),
|
||||
|
|
@ -425,7 +419,9 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
<SquiggleChart
|
||||
squiggleString={code}
|
||||
environment={env}
|
||||
chartSettings={chartSettings}
|
||||
diagramStart={Number(vars.diagramStart)}
|
||||
diagramStop={Number(vars.diagramStop)}
|
||||
diagramCount={Number(vars.diagramCount)}
|
||||
height={vars.chartHeight}
|
||||
showTypes={vars.showTypes}
|
||||
showControls={vars.showControls}
|
||||
|
|
@ -494,9 +490,3 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
</SquiggleContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export function renderSquigglePlaygroundToDom(props: PlaygroundProps) {
|
||||
const parent = document.createElement("div");
|
||||
ReactDOM.render(<SquigglePlayground {...props} />, parent);
|
||||
return parent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,6 @@
|
|||
export { SquiggleChart } from "./components/SquiggleChart";
|
||||
export {
|
||||
SquiggleEditor,
|
||||
SquigglePartial,
|
||||
renderSquiggleEditorToDom,
|
||||
renderSquigglePartialToDom,
|
||||
} from "./components/SquiggleEditor";
|
||||
export {
|
||||
SquigglePlayground,
|
||||
renderSquigglePlaygroundToDom,
|
||||
} from "./components/SquigglePlayground";
|
||||
export { SquiggleEditor, SquigglePartial } from "./components/SquiggleEditor";
|
||||
export { SquigglePlayground } from "./components/SquigglePlayground";
|
||||
export { SquiggleContainer } from "./components/SquiggleContainer";
|
||||
|
||||
export { mergeBindings } from "@quri/squiggle-lang";
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {
|
|||
run,
|
||||
runPartial,
|
||||
} from "@quri/squiggle-lang";
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import { useEffect, useMemo } from "react";
|
||||
|
||||
type SquiggleArgs<T extends ReturnType<typeof run | typeof runPartial>> = {
|
||||
code: string;
|
||||
|
|
@ -19,37 +19,18 @@ const useSquiggleAny = <T extends ReturnType<typeof run | typeof runPartial>>(
|
|||
args: SquiggleArgs<T>,
|
||||
f: (...args: Parameters<typeof run>) => T
|
||||
) => {
|
||||
// We're using observable, where div elements can have a `value` property:
|
||||
// https://observablehq.com/@observablehq/introduction-to-views
|
||||
//
|
||||
// This is here to get the 'viewof' part of:
|
||||
// viewof env = cell('normal(0,1)')
|
||||
// to work
|
||||
const ref = useRef<
|
||||
HTMLDivElement & { value?: Extract<T, { tag: "Ok" }>["value"] }
|
||||
>(null);
|
||||
const result: T = useMemo<T>(
|
||||
() => f(args.code, args.bindings, args.environment, args.jsImports),
|
||||
[f, args.code, args.bindings, args.environment, args.jsImports]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
ref.current.value = result.tag === "Ok" ? result.value : undefined;
|
||||
|
||||
ref.current.dispatchEvent(new CustomEvent("input"));
|
||||
}, [result]);
|
||||
|
||||
const { onChange } = args;
|
||||
|
||||
useEffect(() => {
|
||||
onChange?.(result.tag === "Ok" ? result.value : undefined);
|
||||
}, [result, onChange]);
|
||||
|
||||
return {
|
||||
result, // squiggleExpression or externalBindings
|
||||
observableRef: ref, // can be passed to outermost <div> if you want to use your component as an observablehq's view
|
||||
};
|
||||
return result;
|
||||
};
|
||||
|
||||
export const useSquigglePartial = (
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ the distribution.
|
|||
<Story
|
||||
name="Normal"
|
||||
args={{
|
||||
initialSquiggleString: "normal(5,2)",
|
||||
squiggleString: "normal(5,2)",
|
||||
}}
|
||||
>
|
||||
{Template.bind({})}
|
||||
|
|
@ -27,7 +27,7 @@ You can also name variables like so:
|
|||
<Story
|
||||
name="Variables"
|
||||
args={{
|
||||
initialSquiggleString: "x = 2\nnormal(x,2)",
|
||||
squiggleString: "x = 2\nnormal(x,2)",
|
||||
}}
|
||||
>
|
||||
{Template.bind({})}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ instead returns bindings that can be used by further Squiggle Editors.
|
|||
<Story
|
||||
name="Standalone"
|
||||
args={{
|
||||
initialSquiggleString: "x = normal(5,2)",
|
||||
squiggleString: "x = normal(5,2)",
|
||||
}}
|
||||
>
|
||||
{Template.bind({})}
|
||||
|
|
@ -36,12 +36,12 @@ instead returns bindings that can be used by further Squiggle Editors.
|
|||
<>
|
||||
<SquigglePartial
|
||||
{...props}
|
||||
initialSquiggleString={props.initialPartialString}
|
||||
squiggleString={props.initialPartialString}
|
||||
onChange={setBindings}
|
||||
/>
|
||||
<SquiggleEditor
|
||||
{...props}
|
||||
initialSquiggleString={props.initialEditorString}
|
||||
squiggleString={props.initialEditorString}
|
||||
bindings={bindings}
|
||||
/>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ If you take the pointwise mixture of two distributions with very different means
|
|||
In the following case, the mean of the mixture should be equal to the sum of the means of the parts. These are shown as the first two displayed variables. These variables diverge as the underlying distributions change.
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist1 = {value: normal(1,1), weight: 1}
|
||||
squiggleString={`dist1 = {value: normal(1,1), weight: 1}
|
||||
dist2 = {value: normal(100000000000,1), weight: 1}
|
||||
totalWeight = dist1.weight + dist2.weight
|
||||
distMixture = mixture(dist1.value, dist2.value, [dist1.weight, dist2.weight])
|
||||
|
|
@ -30,7 +30,7 @@ separateMeansCombined = (mean(dist1.value) * (dist1.weight) + mean(dist2.value)
|
|||
The means of sample set distributions can vary dramatically, especially as the numbers get high.
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`symbolicDist = 5 to 50333333
|
||||
squiggleString={`symbolicDist = 5 to 50333333
|
||||
sampleSetDist = toSampleSet(symbolicDist)
|
||||
[mean(symbolicDist), mean(sampleSetDist), symbolicDist, sampleSetDist]`}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -22,22 +22,22 @@ If both values are above zero, a `lognormal` distribution is used. If not, a `no
|
|||
When <code>5 to 10</code> is entered, both numbers are positive, so it
|
||||
generates a lognormal distribution with 5th and 95th percentiles at 5 and
|
||||
10.
|
||||
<SquiggleEditor initialSquiggleString="5 to 10" />
|
||||
<SquiggleEditor squiggleString="5 to 10" />
|
||||
</TabItem>
|
||||
<TabItem value="ex3" label="to(5,10)">
|
||||
<code>5 to 10</code> does the same thing as <code>to(5,10)</code>.
|
||||
<SquiggleEditor initialSquiggleString="to(5,10)" />
|
||||
<SquiggleEditor squiggleString="to(5,10)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="-5 to 5">
|
||||
When <code>-5 to 5</code> is entered, there's negative values, so it
|
||||
generates a normal distribution. This has 5th and 95th percentiles at 5 and
|
||||
10.
|
||||
<SquiggleEditor initialSquiggleString="-5 to -3" />
|
||||
<SquiggleEditor squiggleString="-5 to -3" />
|
||||
</TabItem>
|
||||
<TabItem value="ex4" label="1 to 10000">
|
||||
It's very easy to generate distributions with very long tails. If this
|
||||
happens, you can click the "log x scale" box to view this using a log scale.
|
||||
<SquiggleEditor initialSquiggleString="1 to 10000" />
|
||||
<SquiggleEditor squiggleString="1 to 10000" />
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
|
@ -76,16 +76,16 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
|
|||
|
||||
<Tabs>
|
||||
<TabItem value="ex1" label="Simple" default>
|
||||
<SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
|
||||
<SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="With Weights">
|
||||
<SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
|
||||
<SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
|
||||
</TabItem>
|
||||
<TabItem value="ex3" label="With Continuous and Discrete Inputs">
|
||||
<SquiggleEditor initialSquiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
|
||||
<SquiggleEditor squiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex4" label="Array of Distributions Input">
|
||||
<SquiggleEditor initialSquiggleString="mx([1 to 2, exponential(1)], [1,1])" />
|
||||
<SquiggleEditor squiggleString="mx([1 to 2, exponential(1)], [1,1])" />
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
|
@ -111,7 +111,7 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
|
|||
In this case, I have a 20% chance of spending 0 time with it. I might estimate my hours with,
|
||||
</p>
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`hours_the_project_will_take = 5 to 20
|
||||
squiggleString={`hours_the_project_will_take = 5 to 20
|
||||
chance_of_doing_anything = 0.8
|
||||
mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doing_anything])`}
|
||||
/>
|
||||
|
|
@ -125,7 +125,7 @@ mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doin
|
|||
very wide, just in case they were dramatically off for some weird reason.
|
||||
</p>
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`forecast = 3 to 30
|
||||
squiggleString={`forecast = 3 to 30
|
||||
chance_completely_wrong = 0.05
|
||||
forecast_if_completely_wrong = -100 to 200
|
||||
mx(forecast, forecast_if_completely_wrong, [1-chance_completely_wrong, chance_completely_wrong])`}
|
||||
|
|
@ -141,10 +141,10 @@ Creates a [normal distribution](https://en.wikipedia.org/wiki/Normal_distributio
|
|||
|
||||
<Tabs>
|
||||
<TabItem value="ex1" label="normal(5,1)" default>
|
||||
<SquiggleEditor initialSquiggleString="normal(5, 1)" />
|
||||
<SquiggleEditor squiggleString="normal(5, 1)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="normal(100000000000, 100000000000)">
|
||||
<SquiggleEditor initialSquiggleString="normal(100000000000, 100000000000)" />
|
||||
<SquiggleEditor squiggleString="normal(100000000000, 100000000000)" />
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
|
@ -165,7 +165,7 @@ Creates a [log-normal distribution](https://en.wikipedia.org/wiki/Log-normal_dis
|
|||
you take the log of our lognormal distribution. They can be difficult to directly reason about.
|
||||
Because of this complexity, we recommend typically using the <a href="#to">to</a> syntax instead of estimating `mu` and `sigma` directly.
|
||||
|
||||
<SquiggleEditor initialSquiggleString="lognormal(0, 0.7)" />
|
||||
<SquiggleEditor squiggleString="lognormal(0, 0.7)" />
|
||||
|
||||
### Arguments
|
||||
|
||||
|
|
@ -185,7 +185,7 @@ Because of this complexity, we recommend typically using the <a href="#to">to</a
|
|||
are identical:
|
||||
</p>
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`normalMean = 10
|
||||
squiggleString={`normalMean = 10
|
||||
normalStdDev = 2
|
||||
logOfLognormal = log(lognormal(normalMean, normalStdDev))
|
||||
[logOfLognormal, normal(normalMean, normalStdDev)]`}
|
||||
|
|
@ -198,7 +198,7 @@ logOfLognormal = log(lognormal(normalMean, normalStdDev))
|
|||
|
||||
Creates a [uniform distribution](<https://en.wikipedia.org/wiki/Uniform_distribution_(continuous)>) with the given low and high values.
|
||||
|
||||
<SquiggleEditor initialSquiggleString="uniform(3,7)" />
|
||||
<SquiggleEditor squiggleString="uniform(3,7)" />
|
||||
|
||||
### Arguments
|
||||
|
||||
|
|
@ -236,19 +236,19 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi
|
|||
|
||||
<Tabs>
|
||||
<TabItem value="ex1" label="pointMass(3)" default>
|
||||
<SquiggleEditor initialSquiggleString="pointMass(3)" />
|
||||
<SquiggleEditor squiggleString="pointMass(3)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex3" label="mixture(1,3,5)">
|
||||
<SquiggleEditor initialSquiggleString="mixture(1,3,5)" />
|
||||
<SquiggleEditor squiggleString="mixture(1,3,5)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="normal(5,2) * 6">
|
||||
<SquiggleEditor initialSquiggleString="normal(5,2) * 6" />
|
||||
<SquiggleEditor squiggleString="normal(5,2) * 6" />
|
||||
</TabItem>
|
||||
<TabItem value="ex4" label="dotAdd(normal(5,2), 6)">
|
||||
<SquiggleEditor initialSquiggleString="dotAdd(normal(5,2), 6)" />
|
||||
<SquiggleEditor squiggleString="dotAdd(normal(5,2), 6)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex5" label="dotMultiply(normal(5,2), 6)">
|
||||
<SquiggleEditor initialSquiggleString="dotMultiply(normal(5,2), 6)" />
|
||||
<SquiggleEditor squiggleString="dotMultiply(normal(5,2), 6)" />
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
|
@ -264,19 +264,19 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
|
|||
|
||||
<Tabs>
|
||||
<TabItem value="ex1" label="beta(10, 20)" default>
|
||||
<SquiggleEditor initialSquiggleString="beta(10,20)" />
|
||||
<SquiggleEditor squiggleString="beta(10,20)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="beta(1000, 1000)">
|
||||
<SquiggleEditor initialSquiggleString="beta(1000, 2000)" />
|
||||
<SquiggleEditor squiggleString="beta(1000, 2000)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex3" label="beta(1, 10)">
|
||||
<SquiggleEditor initialSquiggleString="beta(1, 10)" />
|
||||
<SquiggleEditor squiggleString="beta(1, 10)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex4" label="beta(10, 1)">
|
||||
<SquiggleEditor initialSquiggleString="beta(10, 1)" />
|
||||
<SquiggleEditor squiggleString="beta(10, 1)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex5" label="beta(0.8, 0.8)">
|
||||
<SquiggleEditor initialSquiggleString="beta(0.8, 0.8)" />
|
||||
<SquiggleEditor squiggleString="beta(0.8, 0.8)" />
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
|
|
@ -295,16 +295,16 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
|
|||
<summary>Examples</summary>
|
||||
<Tabs>
|
||||
<TabItem value="ex1" label="beta(0.3, 0.3)" default>
|
||||
<SquiggleEditor initialSquiggleString="beta(0.3, 0.3)" />
|
||||
<SquiggleEditor squiggleString="beta(0.3, 0.3)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="beta(0.5, 0.5)">
|
||||
<SquiggleEditor initialSquiggleString="beta(0.5, 0.5)" />
|
||||
<SquiggleEditor squiggleString="beta(0.5, 0.5)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex3" label="beta(0.8, 0.8)">
|
||||
<SquiggleEditor initialSquiggleString="beta(.8,.8)" />
|
||||
<SquiggleEditor squiggleString="beta(.8,.8)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex4" label="beta(0.9, 0.9)">
|
||||
<SquiggleEditor initialSquiggleString="beta(.9,.9)" />
|
||||
<SquiggleEditor squiggleString="beta(.9,.9)" />
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
</details>
|
||||
|
|
@ -316,7 +316,7 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
|
|||
|
||||
Creates an [exponential distribution](https://en.wikipedia.org/wiki/Exponential_distribution) with the given rate.
|
||||
|
||||
<SquiggleEditor initialSquiggleString="exponential(4)" />
|
||||
<SquiggleEditor squiggleString="exponential(4)" />
|
||||
|
||||
### Arguments
|
||||
|
||||
|
|
@ -334,7 +334,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
|
|||
- `mode`: Number greater than `low`
|
||||
- `high`: Number greater than `mode`
|
||||
|
||||
<SquiggleEditor initialSquiggleString="triangular(1, 2, 4)" />
|
||||
<SquiggleEditor squiggleString="triangular(1, 2, 4)" />
|
||||
|
||||
## FromSamples
|
||||
|
||||
|
|
@ -342,7 +342,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
|
|||
|
||||
Creates a sample set distribution using an array of samples.
|
||||
|
||||
<SquiggleEditor initialSquiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
|
||||
<SquiggleEditor squiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
|
||||
|
||||
### Arguments
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ the value of one random sample chosen from the first distribution and the value
|
|||
chosen from the second distribution.
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist1 = 1 to 10
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 + dist2`}
|
||||
/>
|
||||
|
|
@ -28,7 +28,7 @@ the distribution of the value of one random sample chosen from the first distrib
|
|||
the value of one random sample chosen from the second distribution.
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist1 = 1 to 10
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 - dist2`}
|
||||
/>
|
||||
|
|
@ -40,14 +40,14 @@ the value of one random sample chosen from the first distribution times the valu
|
|||
chosen from the second distribution.
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist1 = 1 to 10
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 * dist2`}
|
||||
/>
|
||||
|
||||
We also provide concatenation of two distributions as a syntax sugar for `*`
|
||||
|
||||
<SquiggleEditor initialSquiggleString="(0.1 to 1) triangular(1,2,3)" />
|
||||
<SquiggleEditor squiggleString="(0.1 to 1) triangular(1,2,3)" />
|
||||
|
||||
### Division
|
||||
|
||||
|
|
@ -58,7 +58,7 @@ chosen from the second distribution. If the second distribution has some values
|
|||
tends to be particularly unstable.
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist1 = 1 to 10
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 / dist2`}
|
||||
/>
|
||||
|
|
@ -69,12 +69,12 @@ A projection over a contracted x-axis. The exponentiation operation represents t
|
|||
the exponentiation of the value of one random sample chosen from the first distribution to the power of
|
||||
the value one random sample chosen from the second distribution.
|
||||
|
||||
<SquiggleEditor initialSquiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
|
||||
<SquiggleEditor squiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
|
||||
|
||||
### Taking the base `e` exponential
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist = triangular(1,2,3)
|
||||
squiggleString={`dist = triangular(1,2,3)
|
||||
exp(dist)`}
|
||||
/>
|
||||
|
||||
|
|
@ -83,19 +83,19 @@ exp(dist)`}
|
|||
A projection over a stretched x-axis.
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist = triangular(1,2,3)
|
||||
squiggleString={`dist = triangular(1,2,3)
|
||||
log(dist)`}
|
||||
/>
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist = beta(1,2)
|
||||
squiggleString={`dist = beta(1,2)
|
||||
log10(dist)`}
|
||||
/>
|
||||
|
||||
Base `x`
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`x = 2
|
||||
squiggleString={`x = 2
|
||||
dist = beta(2,3)
|
||||
log(dist, x)`}
|
||||
/>
|
||||
|
|
@ -114,7 +114,7 @@ For every point on the x-axis, operate the corresponding points in the y axis of
|
|||
TODO: this isn't in the new interpreter/parser yet.
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist1 = 1 to 10
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 .+ dist2`}
|
||||
/>
|
||||
|
|
@ -124,7 +124,7 @@ dist1 .+ dist2`}
|
|||
TODO: this isn't in the new interpreter/parser yet.
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist1 = 1 to 10
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 .- dist2`}
|
||||
/>
|
||||
|
|
@ -132,7 +132,7 @@ dist1 .- dist2`}
|
|||
### Pointwise multiplication
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist1 = 1 to 10
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 .* dist2`}
|
||||
/>
|
||||
|
|
@ -140,7 +140,7 @@ dist1 .* dist2`}
|
|||
### Pointwise division
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist1 = uniform(0,20)
|
||||
squiggleString={`dist1 = uniform(0,20)
|
||||
dist2 = normal(10,8)
|
||||
dist1 ./ dist2`}
|
||||
/>
|
||||
|
|
@ -148,7 +148,7 @@ dist1 ./ dist2`}
|
|||
### Pointwise exponentiation
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`dist1 = 1 to 10
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 .^ dist2`}
|
||||
/>
|
||||
|
|
@ -160,7 +160,7 @@ dist1 .^ dist2`}
|
|||
The `pdf(dist, x)` function returns the density of a distribution at the
|
||||
given point x.
|
||||
|
||||
<SquiggleEditor initialSquiggleString="pdf(normal(0,1),0)" />
|
||||
<SquiggleEditor squiggleString="pdf(normal(0,1),0)" />
|
||||
|
||||
#### Validity
|
||||
|
||||
|
|
@ -172,7 +172,7 @@ given point x.
|
|||
The `cdf(dist, x)` gives the cumulative probability of the distribution
|
||||
or all values lower than x. It is the inverse of `quantile`.
|
||||
|
||||
<SquiggleEditor initialSquiggleString="cdf(normal(0,1),0)" />
|
||||
<SquiggleEditor squiggleString="cdf(normal(0,1),0)" />
|
||||
|
||||
#### Validity
|
||||
|
||||
|
|
@ -185,7 +185,7 @@ The `quantile(dist, prob)` gives the value x or which the probability for all va
|
|||
lower than x is equal to prob. It is the inverse of `cdf`. In the literature, it
|
||||
is also known as the quantiles function.
|
||||
|
||||
<SquiggleEditor initialSquiggleString="quantile(normal(0,1),0.5)" />
|
||||
<SquiggleEditor squiggleString="quantile(normal(0,1),0.5)" />
|
||||
|
||||
#### Validity
|
||||
|
||||
|
|
@ -196,29 +196,29 @@ is also known as the quantiles function.
|
|||
|
||||
The `mean(distribution)` function gives the mean (expected value) of a distribution.
|
||||
|
||||
<SquiggleEditor initialSquiggleString="mean(normal(5, 10))" />
|
||||
<SquiggleEditor squiggleString="mean(normal(5, 10))" />
|
||||
|
||||
### Sampling a distribution
|
||||
|
||||
The `sample(distribution)` samples a given distribution.
|
||||
|
||||
<SquiggleEditor initialSquiggleString="sample(normal(0, 10))" />
|
||||
<SquiggleEditor squiggleString="sample(normal(0, 10))" />
|
||||
|
||||
## Converting between distribution formats
|
||||
|
||||
Recall the [three formats of distributions](https://develop--squiggle-documentation.netlify.app/docs/Discussions/Three-Types-Of-Distributions). We can force any distribution into `SampleSet` format
|
||||
|
||||
<SquiggleEditor initialSquiggleString="toSampleSet(normal(5, 10))" />
|
||||
<SquiggleEditor squiggleString="toSampleSet(normal(5, 10))" />
|
||||
|
||||
Or `PointSet` format
|
||||
|
||||
<SquiggleEditor initialSquiggleString="toPointSet(normal(5, 10))" />
|
||||
<SquiggleEditor squiggleString="toPointSet(normal(5, 10))" />
|
||||
|
||||
### `toSampleSet` has two signatures
|
||||
|
||||
Above, we saw the unary `toSampleSet`, which uses an internal hardcoded number of samples. If you'd like to provide the number of samples, it has a binary signature as well (floored)
|
||||
|
||||
<SquiggleEditor initialSquiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
|
||||
<SquiggleEditor squiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
|
||||
|
||||
#### Validity
|
||||
|
||||
|
|
@ -230,13 +230,13 @@ Some distribution operations (like horizontal shift) return an unnormalized dist
|
|||
|
||||
We provide a `normalize` function
|
||||
|
||||
<SquiggleEditor initialSquiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
|
||||
<SquiggleEditor squiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
|
||||
|
||||
#### Validity - Input to `normalize` must be a dist
|
||||
|
||||
We provide a predicate `isNormalized`, for when we have simple control flow
|
||||
|
||||
<SquiggleEditor initialSquiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
|
||||
<SquiggleEditor squiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
|
||||
|
||||
#### Validity
|
||||
|
||||
|
|
@ -246,7 +246,7 @@ We provide a predicate `isNormalized`, for when we have simple control flow
|
|||
|
||||
You may like to debug by right clicking your browser and using the _inspect_ functionality on the webpage, and viewing the _console_ tab. Then, wrap your squiggle output with `inspect` to log an internal representation.
|
||||
|
||||
<SquiggleEditor initialSquiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
|
||||
<SquiggleEditor squiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
|
||||
|
||||
Save for a logging side effect, `inspect` does nothing to input and returns it.
|
||||
|
||||
|
|
@ -254,12 +254,12 @@ Save for a logging side effect, `inspect` does nothing to input and returns it.
|
|||
|
||||
You can cut off from the left
|
||||
|
||||
<SquiggleEditor initialSquiggleString="truncateLeft(0.1 to 1, 0.5)" />
|
||||
<SquiggleEditor squiggleString="truncateLeft(0.1 to 1, 0.5)" />
|
||||
|
||||
You can cut off from the right
|
||||
|
||||
<SquiggleEditor initialSquiggleString="truncateRight(0.1 to 1, 0.5)" />
|
||||
<SquiggleEditor squiggleString="truncateRight(0.1 to 1, 0.5)" />
|
||||
|
||||
You can cut off from both sides
|
||||
|
||||
<SquiggleEditor initialSquiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
|
||||
<SquiggleEditor squiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
|
||||
|
|
|
|||
|
|
@ -9,22 +9,22 @@ import { SquiggleEditor } from "../../src/components/SquiggleEditor";
|
|||
|
||||
### Distributions
|
||||
|
||||
<SquiggleEditor initialSquiggleString={`mixture(1 to 2, 3, [0.3, 0.7])`} />
|
||||
<SquiggleEditor squiggleString={`mixture(1 to 2, 3, [0.3, 0.7])`} />
|
||||
|
||||
### Numbers
|
||||
|
||||
<SquiggleEditor initialSquiggleString="4.32" />
|
||||
<SquiggleEditor squiggleString="4.32" />
|
||||
|
||||
### Arrays
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
|
||||
squiggleString={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
|
||||
/>
|
||||
|
||||
### Records
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`d = {dist: triangular(0, 1, 2), weight: 0.25}
|
||||
squiggleString={`d = {dist: triangular(0, 1, 2), weight: 0.25}
|
||||
d.dist`}
|
||||
/>
|
||||
|
||||
|
|
@ -33,7 +33,7 @@ d.dist`}
|
|||
A statement assigns expressions to names. It looks like `<symbol> = <expression>`
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`value_of_work = 10 to 70
|
||||
squiggleString={`value_of_work = 10 to 70
|
||||
5 + value_of_work / 75`}
|
||||
/>
|
||||
|
||||
|
|
@ -42,7 +42,7 @@ A statement assigns expressions to names. It looks like `<symbol> = <expression>
|
|||
We can define functions
|
||||
|
||||
<SquiggleEditor
|
||||
initialSquiggleString={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
|
||||
squiggleString={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
|
||||
nuno_estimate(t, m) = mixture(normal(-5, 1), lognormal(m, t / 1.25))
|
||||
ozzie_estimate(1) * nuno_estimate(1, 1)`}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -4311,7 +4311,7 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
|
||||
integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
|
||||
|
||||
"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.5":
|
||||
"@types/react-dom@^18.0.0":
|
||||
version "18.0.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a"
|
||||
integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user