Add controlled and uncontrolled versions of components
This commit is contained in:
Sam Nolan
parent
ac7ecd9bdc
commit
69aa8a8cc1
|
|
@ -14,7 +14,7 @@ import { SquiggleItem } from "./SquiggleItem";
|
|||
|
||||
export interface SquiggleChartProps {
|
||||
/** The input string for squiggle */
|
||||
squiggleString?: string;
|
||||
code?: string;
|
||||
/** If the output requires monte carlo sampling, the amount of samples */
|
||||
sampleCount?: number;
|
||||
/** The amount of points returned to draw the distribution */
|
||||
|
|
@ -49,7 +49,7 @@ export interface SquiggleChartProps {
|
|||
const defaultOnChange = () => {};
|
||||
|
||||
export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
||||
squiggleString = "",
|
||||
code = "",
|
||||
environment,
|
||||
onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
|
||||
height = 200,
|
||||
|
|
@ -66,7 +66,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
|
|||
diagramCount = 100,
|
||||
}) => {
|
||||
const result = useSquiggle({
|
||||
code: squiggleString,
|
||||
code,
|
||||
bindings,
|
||||
environment,
|
||||
jsImports,
|
||||
|
|
|
|||
|
|
@ -22,27 +22,41 @@ const WrappedCodeEditor: React.FC<{
|
|||
</div>
|
||||
);
|
||||
|
||||
export type SquiggleEditorProps = SquiggleChartProps;
|
||||
export type SquiggleEditorProps = SquiggleChartProps & {
|
||||
defaultCode?: string;
|
||||
onCodeChange?: (code: string) => void;
|
||||
};
|
||||
|
||||
export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
|
||||
const { squiggleString = "" } = props;
|
||||
const [code, setCode] = useState(squiggleString);
|
||||
React.useEffect(() => setCode(squiggleString), [squiggleString]);
|
||||
let defaultCode = props.defaultCode ?? "";
|
||||
const [uncontrolledCode, setCode] = useState(defaultCode);
|
||||
let code = props.code ?? uncontrolledCode;
|
||||
|
||||
let chartProps = { ...props, squiggleString: code };
|
||||
let chartProps = { ...props, code };
|
||||
return (
|
||||
<SquiggleContainer>
|
||||
<WrappedCodeEditor code={code} setCode={setCode} />
|
||||
<WrappedCodeEditor
|
||||
code={code}
|
||||
setCode={(code) => {
|
||||
if (props.onCodeChange) props.onCodeChange(code);
|
||||
|
||||
if (props.code === undefined) setCode(code);
|
||||
}}
|
||||
/>
|
||||
<SquiggleChart {...chartProps} />
|
||||
</SquiggleContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export interface SquigglePartialProps {
|
||||
/** The input string for squiggle */
|
||||
squiggleString?: string;
|
||||
/** The text inside the input (controlled) */
|
||||
code?: string;
|
||||
/** The default text inside the input (unControlled) */
|
||||
defaultCode?: string;
|
||||
/** when the environment changes. Used again for notebook magic*/
|
||||
onChange?(expr: bindings | undefined): void;
|
||||
/** When the code changes */
|
||||
onCodeChange?(code: string): void;
|
||||
/** Previously declared variables */
|
||||
bindings?: bindings;
|
||||
/** If the output requires monte carlo sampling, the amount of samples */
|
||||
|
|
@ -52,17 +66,19 @@ export interface SquigglePartialProps {
|
|||
}
|
||||
|
||||
export const SquigglePartial: React.FC<SquigglePartialProps> = ({
|
||||
squiggleString = "",
|
||||
code,
|
||||
defaultCode = "",
|
||||
onChange,
|
||||
onCodeChange,
|
||||
bindings = defaultBindings,
|
||||
environment,
|
||||
jsImports = defaultImports,
|
||||
}: SquigglePartialProps) => {
|
||||
const [code, setCode] = useState(squiggleString);
|
||||
React.useEffect(() => setCode(squiggleString), [squiggleString]);
|
||||
const [uncontrolledCode, setCode] = useState(defaultCode);
|
||||
let codeProp = code ?? uncontrolledCode;
|
||||
|
||||
const result = useSquigglePartial({
|
||||
code,
|
||||
code: codeProp,
|
||||
bindings,
|
||||
environment,
|
||||
jsImports,
|
||||
|
|
@ -71,7 +87,14 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
|
|||
|
||||
return (
|
||||
<SquiggleContainer>
|
||||
<WrappedCodeEditor code={code} setCode={setCode} />
|
||||
<WrappedCodeEditor
|
||||
code={codeProp}
|
||||
setCode={(code) => {
|
||||
if (onCodeChange) onCodeChange(code);
|
||||
|
||||
if (code === undefined) setCode(code);
|
||||
}}
|
||||
/>
|
||||
{result.tag !== "Ok" ? <SquiggleErrorAlert error={result.value} /> : null}
|
||||
</SquiggleContainer>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import { SquiggleContainer } from "./SquiggleContainer";
|
|||
|
||||
interface PlaygroundProps {
|
||||
/** The initial squiggle string to put in the playground */
|
||||
initialSquiggleString?: string;
|
||||
defaultCode?: string;
|
||||
/** How many pixels high is the playground */
|
||||
height?: number;
|
||||
/** Whether to show the types of outputs in the playground */
|
||||
|
|
@ -204,7 +204,7 @@ function Checkbox<T>({
|
|||
}
|
||||
|
||||
export const SquigglePlayground: FC<PlaygroundProps> = ({
|
||||
initialSquiggleString = "",
|
||||
defaultCode = "",
|
||||
height = 500,
|
||||
showTypes = false,
|
||||
showControls = false,
|
||||
|
|
@ -216,9 +216,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
onSettingsChange,
|
||||
showEditor = true,
|
||||
}) => {
|
||||
const [uncontrolledCode, setUncontrolledCode] = useState(
|
||||
initialSquiggleString
|
||||
);
|
||||
const [uncontrolledCode, setUncontrolledCode] = useState(defaultCode);
|
||||
const [importString, setImportString] = useState("{}");
|
||||
const [imports, setImports] = useState({});
|
||||
const [importsAreValid, setImportsAreValid] = useState(true);
|
||||
|
|
@ -417,7 +415,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
|
|||
|
||||
const squiggleChart = (
|
||||
<SquiggleChart
|
||||
squiggleString={code}
|
||||
code={code}
|
||||
environment={env}
|
||||
diagramStart={Number(vars.diagramStart)}
|
||||
diagramStop={Number(vars.diagramStop)}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ could be continuous, discrete or mixed.
|
|||
<Story
|
||||
name="Continuous Symbolic"
|
||||
args={{
|
||||
squiggleString: "normal(5,2)",
|
||||
code: "normal(5,2)",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -43,7 +43,7 @@ could be continuous, discrete or mixed.
|
|||
<Story
|
||||
name="Continuous Pointset"
|
||||
args={{
|
||||
squiggleString: "toPointSet(normal(5,2))",
|
||||
code: "toPointSet(normal(5,2))",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -57,7 +57,7 @@ could be continuous, discrete or mixed.
|
|||
<Story
|
||||
name="Continuous SampleSet"
|
||||
args={{
|
||||
squiggleString: "toSampleSet(normal(5,2), 1000)",
|
||||
code: "toSampleSet(normal(5,2), 1000)",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -71,7 +71,7 @@ could be continuous, discrete or mixed.
|
|||
<Story
|
||||
name="Discrete"
|
||||
args={{
|
||||
squiggleString: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
|
||||
code: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -85,8 +85,7 @@ could be continuous, discrete or mixed.
|
|||
<Story
|
||||
name="Mixed"
|
||||
args={{
|
||||
squiggleString:
|
||||
"mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
|
||||
code: "mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -103,7 +102,7 @@ to allow large and small numbers being printed cleanly.
|
|||
<Story
|
||||
name="Constant"
|
||||
args={{
|
||||
squiggleString: "500000000",
|
||||
code: "500000000",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -117,7 +116,7 @@ to allow large and small numbers being printed cleanly.
|
|||
<Story
|
||||
name="Array"
|
||||
args={{
|
||||
squiggleString: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
|
||||
code: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -131,7 +130,7 @@ to allow large and small numbers being printed cleanly.
|
|||
<Story
|
||||
name="Error"
|
||||
args={{
|
||||
squiggleString: "f(x) = normal(",
|
||||
code: "f(x) = normal(",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -145,7 +144,7 @@ to allow large and small numbers being printed cleanly.
|
|||
<Story
|
||||
name="Boolean"
|
||||
args={{
|
||||
squiggleString: "3 == 3",
|
||||
code: "3 == 3",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -159,7 +158,7 @@ to allow large and small numbers being printed cleanly.
|
|||
<Story
|
||||
name="Function to Distribution"
|
||||
args={{
|
||||
squiggleString: "foo(t) = normal(t,2)*normal(5,3); foo",
|
||||
code: "foo(t) = normal(t,2)*normal(5,3); foo",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -173,7 +172,7 @@ to allow large and small numbers being printed cleanly.
|
|||
<Story
|
||||
name="Function to Number"
|
||||
args={{
|
||||
squiggleString: "foo(t) = t^2; foo",
|
||||
code: "foo(t) = t^2; foo",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -187,7 +186,7 @@ to allow large and small numbers being printed cleanly.
|
|||
<Story
|
||||
name="Record"
|
||||
args={{
|
||||
squiggleString: "{foo: 35 to 50, bar: [1,2,3]}",
|
||||
code: "{foo: 35 to 50, bar: [1,2,3]}",
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
@ -201,7 +200,7 @@ to allow large and small numbers being printed cleanly.
|
|||
<Story
|
||||
name="String"
|
||||
args={{
|
||||
squiggleString: '"Lucky day!"',
|
||||
code: '"Lucky day!"',
|
||||
width,
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ the distribution.
|
|||
<Story
|
||||
name="Normal"
|
||||
args={{
|
||||
squiggleString: "normal(5,2)",
|
||||
defaultCode: "normal(5,2)",
|
||||
}}
|
||||
>
|
||||
{Template.bind({})}
|
||||
|
|
@ -27,7 +27,7 @@ You can also name variables like so:
|
|||
<Story
|
||||
name="Variables"
|
||||
args={{
|
||||
squiggleString: "x = 2\nnormal(x,2)",
|
||||
defaultCode: "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={{
|
||||
squiggleString: "x = normal(5,2)",
|
||||
defaultCode: "x = normal(5,2)",
|
||||
}}
|
||||
>
|
||||
{Template.bind({})}
|
||||
|
|
@ -36,12 +36,12 @@ instead returns bindings that can be used by further Squiggle Editors.
|
|||
<>
|
||||
<SquigglePartial
|
||||
{...props}
|
||||
squiggleString={props.initialPartialString}
|
||||
defaultCode={props.initialPartialString}
|
||||
onChange={setBindings}
|
||||
/>
|
||||
<SquiggleEditor
|
||||
{...props}
|
||||
squiggleString={props.initialEditorString}
|
||||
defaultCode={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
|
||||
squiggleString={`dist1 = {value: normal(1,1), weight: 1}
|
||||
defaultCode={`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
|
||||
squiggleString={`symbolicDist = 5 to 50333333
|
||||
defaultCode={`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 squiggleString="5 to 10" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="to(5,10)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="-5 to -3" />
|
||||
<SquiggleEditor defaultCode="-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 squiggleString="1 to 10000" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
|
||||
<SquiggleEditor defaultCode="mixture(1 to 2, 5 to 8, 9 to 10)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="With Weights">
|
||||
<SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
|
||||
<SquiggleEditor defaultCode="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex4" label="Array of Distributions Input">
|
||||
<SquiggleEditor squiggleString="mx([1 to 2, exponential(1)], [1,1])" />
|
||||
<SquiggleEditor defaultCode="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
|
||||
squiggleString={`hours_the_project_will_take = 5 to 20
|
||||
defaultCode={`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
|
||||
squiggleString={`forecast = 3 to 30
|
||||
defaultCode={`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 squiggleString="normal(5, 1)" />
|
||||
<SquiggleEditor defaultCode="normal(5, 1)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="normal(100000000000, 100000000000)">
|
||||
<SquiggleEditor squiggleString="normal(100000000000, 100000000000)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="lognormal(0, 0.7)" />
|
||||
<SquiggleEditor defaultCode="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
|
||||
squiggleString={`normalMean = 10
|
||||
defaultCode={`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 squiggleString="uniform(3,7)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="pointMass(3)" />
|
||||
<SquiggleEditor defaultCode="pointMass(3)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex3" label="mixture(1,3,5)">
|
||||
<SquiggleEditor squiggleString="mixture(1,3,5)" />
|
||||
<SquiggleEditor defaultCode="mixture(1,3,5)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="normal(5,2) * 6">
|
||||
<SquiggleEditor squiggleString="normal(5,2) * 6" />
|
||||
<SquiggleEditor defaultCode="normal(5,2) * 6" />
|
||||
</TabItem>
|
||||
<TabItem value="ex4" label="dotAdd(normal(5,2), 6)">
|
||||
<SquiggleEditor squiggleString="dotAdd(normal(5,2), 6)" />
|
||||
<SquiggleEditor defaultCode="dotAdd(normal(5,2), 6)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex5" label="dotMultiply(normal(5,2), 6)">
|
||||
<SquiggleEditor squiggleString="dotMultiply(normal(5,2), 6)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="beta(10,20)" />
|
||||
<SquiggleEditor defaultCode="beta(10,20)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="beta(1000, 1000)">
|
||||
<SquiggleEditor squiggleString="beta(1000, 2000)" />
|
||||
<SquiggleEditor defaultCode="beta(1000, 2000)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex3" label="beta(1, 10)">
|
||||
<SquiggleEditor squiggleString="beta(1, 10)" />
|
||||
<SquiggleEditor defaultCode="beta(1, 10)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex4" label="beta(10, 1)">
|
||||
<SquiggleEditor squiggleString="beta(10, 1)" />
|
||||
<SquiggleEditor defaultCode="beta(10, 1)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex5" label="beta(0.8, 0.8)">
|
||||
<SquiggleEditor squiggleString="beta(0.8, 0.8)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="beta(0.3, 0.3)" />
|
||||
<SquiggleEditor defaultCode="beta(0.3, 0.3)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex2" label="beta(0.5, 0.5)">
|
||||
<SquiggleEditor squiggleString="beta(0.5, 0.5)" />
|
||||
<SquiggleEditor defaultCode="beta(0.5, 0.5)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex3" label="beta(0.8, 0.8)">
|
||||
<SquiggleEditor squiggleString="beta(.8,.8)" />
|
||||
<SquiggleEditor defaultCode="beta(.8,.8)" />
|
||||
</TabItem>
|
||||
<TabItem value="ex4" label="beta(0.9, 0.9)">
|
||||
<SquiggleEditor squiggleString="beta(.9,.9)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="exponential(4)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="triangular(1, 2, 4)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
|
||||
<SquiggleEditor defaultCode="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
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
defaultCode={`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
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
defaultCode={`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
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
defaultCode={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 * dist2`}
|
||||
/>
|
||||
|
||||
We also provide concatenation of two distributions as a syntax sugar for `*`
|
||||
|
||||
<SquiggleEditor squiggleString="(0.1 to 1) triangular(1,2,3)" />
|
||||
<SquiggleEditor defaultCode="(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
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
defaultCode={`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 squiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
|
||||
<SquiggleEditor defaultCode={`(0.1 to 1) ^ beta(2, 3)`} />
|
||||
|
||||
### Taking the base `e` exponential
|
||||
|
||||
<SquiggleEditor
|
||||
squiggleString={`dist = triangular(1,2,3)
|
||||
defaultCode={`dist = triangular(1,2,3)
|
||||
exp(dist)`}
|
||||
/>
|
||||
|
||||
|
|
@ -83,19 +83,19 @@ exp(dist)`}
|
|||
A projection over a stretched x-axis.
|
||||
|
||||
<SquiggleEditor
|
||||
squiggleString={`dist = triangular(1,2,3)
|
||||
defaultCode={`dist = triangular(1,2,3)
|
||||
log(dist)`}
|
||||
/>
|
||||
|
||||
<SquiggleEditor
|
||||
squiggleString={`dist = beta(1,2)
|
||||
defaultCode={`dist = beta(1,2)
|
||||
log10(dist)`}
|
||||
/>
|
||||
|
||||
Base `x`
|
||||
|
||||
<SquiggleEditor
|
||||
squiggleString={`x = 2
|
||||
defaultCode={`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
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
defaultCode={`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
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
defaultCode={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 .- dist2`}
|
||||
/>
|
||||
|
|
@ -132,7 +132,7 @@ dist1 .- dist2`}
|
|||
### Pointwise multiplication
|
||||
|
||||
<SquiggleEditor
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
defaultCode={`dist1 = 1 to 10
|
||||
dist2 = triangular(1,2,3)
|
||||
dist1 .* dist2`}
|
||||
/>
|
||||
|
|
@ -140,7 +140,7 @@ dist1 .* dist2`}
|
|||
### Pointwise division
|
||||
|
||||
<SquiggleEditor
|
||||
squiggleString={`dist1 = uniform(0,20)
|
||||
defaultCode={`dist1 = uniform(0,20)
|
||||
dist2 = normal(10,8)
|
||||
dist1 ./ dist2`}
|
||||
/>
|
||||
|
|
@ -148,7 +148,7 @@ dist1 ./ dist2`}
|
|||
### Pointwise exponentiation
|
||||
|
||||
<SquiggleEditor
|
||||
squiggleString={`dist1 = 1 to 10
|
||||
defaultCode={`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 squiggleString="pdf(normal(0,1),0)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="cdf(normal(0,1),0)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="quantile(normal(0,1),0.5)" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="mean(normal(5, 10))" />
|
||||
<SquiggleEditor defaultCode="mean(normal(5, 10))" />
|
||||
|
||||
### Sampling a distribution
|
||||
|
||||
The `sample(distribution)` samples a given distribution.
|
||||
|
||||
<SquiggleEditor squiggleString="sample(normal(0, 10))" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="toSampleSet(normal(5, 10))" />
|
||||
<SquiggleEditor defaultCode="toSampleSet(normal(5, 10))" />
|
||||
|
||||
Or `PointSet` format
|
||||
|
||||
<SquiggleEditor squiggleString="toPointSet(normal(5, 10))" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
|
||||
<SquiggleEditor defaultCode="[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 squiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
|
||||
<SquiggleEditor defaultCode="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 squiggleString="truncateLeft(0.1 to 1, 0.5)" />
|
||||
<SquiggleEditor defaultCode="truncateLeft(0.1 to 1, 0.5)" />
|
||||
|
||||
You can cut off from the right
|
||||
|
||||
<SquiggleEditor squiggleString="truncateRight(0.1 to 1, 0.5)" />
|
||||
<SquiggleEditor defaultCode="truncateRight(0.1 to 1, 0.5)" />
|
||||
|
||||
You can cut off from both sides
|
||||
|
||||
<SquiggleEditor squiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
|
||||
<SquiggleEditor defaultCode="truncate(0.1 to 1, 0.5, 1.5)" />
|
||||
|
|
|
|||
|
|
@ -9,22 +9,22 @@ import { SquiggleEditor } from "../../src/components/SquiggleEditor";
|
|||
|
||||
### Distributions
|
||||
|
||||
<SquiggleEditor squiggleString={`mixture(1 to 2, 3, [0.3, 0.7])`} />
|
||||
<SquiggleEditor defaultCode={`mixture(1 to 2, 3, [0.3, 0.7])`} />
|
||||
|
||||
### Numbers
|
||||
|
||||
<SquiggleEditor squiggleString="4.32" />
|
||||
<SquiggleEditor defaultCode="4.32" />
|
||||
|
||||
### Arrays
|
||||
|
||||
<SquiggleEditor
|
||||
squiggleString={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
|
||||
defaultCode={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
|
||||
/>
|
||||
|
||||
### Records
|
||||
|
||||
<SquiggleEditor
|
||||
squiggleString={`d = {dist: triangular(0, 1, 2), weight: 0.25}
|
||||
defaultCode={`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
|
||||
squiggleString={`value_of_work = 10 to 70
|
||||
defaultCode={`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
|
||||
squiggleString={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
|
||||
defaultCode={`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)`}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ function setHashData(data) {
|
|||
|
||||
export default function PlaygroundPage() {
|
||||
const playgroundProps = {
|
||||
initialSquiggleString: "normal(0,1)",
|
||||
defaultCode: "normal(0,1)",
|
||||
height: 700,
|
||||
showTypes: true,
|
||||
...getHashData(),
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user