diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index 3e712396..9e352a62 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -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 = ({ - 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 = ({ diagramCount = 100, }) => { const result = useSquiggle({ - code: squiggleString, + code, bindings, environment, jsImports, diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index 3d0e0db5..78aec513 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -22,27 +22,41 @@ const WrappedCodeEditor: React.FC<{ ); -export type SquiggleEditorProps = SquiggleChartProps; +export type SquiggleEditorProps = SquiggleChartProps & { + defaultCode?: string; + onCodeChange?: (code: string) => void; +}; export const SquiggleEditor: React.FC = (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 ( - + { + if (props.onCodeChange) props.onCodeChange(code); + + if (props.code === undefined) setCode(code); + }} + /> ); }; 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 = ({ - 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 = ({ return ( - + { + if (onCodeChange) onCodeChange(code); + + if (code === undefined) setCode(code); + }} + /> {result.tag !== "Ok" ? : null} ); diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index ce59b5a4..e96a1053 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -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({ } export const SquigglePlayground: FC = ({ - initialSquiggleString = "", + defaultCode = "", height = 500, showTypes = false, showControls = false, @@ -216,9 +216,7 @@ export const SquigglePlayground: FC = ({ 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 = ({ const squiggleChart = ( @@ -43,7 +43,7 @@ could be continuous, discrete or mixed. @@ -57,7 +57,7 @@ could be continuous, discrete or mixed. @@ -71,7 +71,7 @@ could be continuous, discrete or mixed. @@ -85,8 +85,7 @@ could be continuous, discrete or mixed. @@ -103,7 +102,7 @@ to allow large and small numbers being printed cleanly. @@ -117,7 +116,7 @@ to allow large and small numbers being printed cleanly. @@ -131,7 +130,7 @@ to allow large and small numbers being printed cleanly. @@ -145,7 +144,7 @@ to allow large and small numbers being printed cleanly. @@ -159,7 +158,7 @@ to allow large and small numbers being printed cleanly. @@ -173,7 +172,7 @@ to allow large and small numbers being printed cleanly. @@ -187,7 +186,7 @@ to allow large and small numbers being printed cleanly. @@ -201,7 +200,7 @@ to allow large and small numbers being printed cleanly. diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx index 7e8f7e66..e51e3e33 100644 --- a/packages/components/src/stories/SquiggleEditor.stories.mdx +++ b/packages/components/src/stories/SquiggleEditor.stories.mdx @@ -14,7 +14,7 @@ the distribution. {Template.bind({})} @@ -27,7 +27,7 @@ You can also name variables like so: {Template.bind({})} diff --git a/packages/components/src/stories/SquigglePartial.stories.mdx b/packages/components/src/stories/SquigglePartial.stories.mdx index c4f4814a..3305586b 100644 --- a/packages/components/src/stories/SquigglePartial.stories.mdx +++ b/packages/components/src/stories/SquigglePartial.stories.mdx @@ -15,7 +15,7 @@ instead returns bindings that can be used by further Squiggle Editors. {Template.bind({})} @@ -36,12 +36,12 @@ instead returns bindings that can be used by further Squiggle Editors. <> diff --git a/packages/website/docs/Discussions/Bugs.mdx b/packages/website/docs/Discussions/Bugs.mdx index 2c077eb0..db53a6f6 100644 --- a/packages/website/docs/Discussions/Bugs.mdx +++ b/packages/website/docs/Discussions/Bugs.mdx @@ -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. diff --git a/packages/website/docs/Guides/DistributionCreation.mdx b/packages/website/docs/Guides/DistributionCreation.mdx index 8ca22294..7ef80d0a 100644 --- a/packages/website/docs/Guides/DistributionCreation.mdx +++ b/packages/website/docs/Guides/DistributionCreation.mdx @@ -22,22 +22,22 @@ If both values are above zero, a `lognormal` distribution is used. If not, a `no When 5 to 10 is entered, both numbers are positive, so it generates a lognormal distribution with 5th and 95th percentiles at 5 and 10. - + 5 to 10 does the same thing as to(5,10). - + When -5 to 5 is entered, there's negative values, so it generates a normal distribution. This has 5th and 95th percentiles at 5 and 10. - + 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. - + @@ -76,16 +76,16 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can - + - + - + - + @@ -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,

@@ -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.

- + - + @@ -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 to syntax instead of estimating `mu` and `sigma` directly. - + ### Arguments @@ -185,7 +185,7 @@ Because of this complexity, we recommend typically using the to ) with the given low and high values. - + ### Arguments @@ -236,19 +236,19 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi - + - + - + - + - + @@ -264,19 +264,19 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w - + - + - + - + - + @@ -295,16 +295,16 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w Examples - + - + - + - + @@ -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. - + ### 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` - + ## 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. - + ### Arguments diff --git a/packages/website/docs/Guides/Functions.mdx b/packages/website/docs/Guides/Functions.mdx index a58df345..a428ac7c 100644 --- a/packages/website/docs/Guides/Functions.mdx +++ b/packages/website/docs/Guides/Functions.mdx @@ -16,7 +16,7 @@ the value of one random sample chosen from the first distribution and the value chosen from the second distribution. @@ -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. @@ -40,14 +40,14 @@ the value of one random sample chosen from the first distribution times the valu chosen from the second distribution. We also provide concatenation of two distributions as a syntax sugar for `*` - + ### Division @@ -58,7 +58,7 @@ chosen from the second distribution. If the second distribution has some values tends to be particularly unstable. @@ -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. - + ### Taking the base `e` exponential @@ -83,19 +83,19 @@ exp(dist)`} A projection over a stretched x-axis. Base `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. @@ -124,7 +124,7 @@ dist1 .+ dist2`} TODO: this isn't in the new interpreter/parser yet. @@ -132,7 +132,7 @@ dist1 .- dist2`} ### Pointwise multiplication @@ -140,7 +140,7 @@ dist1 .* dist2`} ### Pointwise division @@ -148,7 +148,7 @@ dist1 ./ dist2`} ### Pointwise exponentiation @@ -160,7 +160,7 @@ dist1 .^ dist2`} The `pdf(dist, x)` function returns the density of a distribution at the given point x. - + #### 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`. - + #### 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. - + #### Validity @@ -196,29 +196,29 @@ is also known as the quantiles function. The `mean(distribution)` function gives the mean (expected value) of a distribution. - + ### Sampling a distribution The `sample(distribution)` samples a given distribution. - + ## 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 - + Or `PointSet` format - + ### `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) - + #### Validity @@ -230,13 +230,13 @@ Some distribution operations (like horizontal shift) return an unnormalized dist We provide a `normalize` function - + #### Validity - Input to `normalize` must be a dist We provide a predicate `isNormalized`, for when we have simple control flow - + #### 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. - + 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 - + You can cut off from the right - + You can cut off from both sides - + diff --git a/packages/website/docs/Guides/Language.mdx b/packages/website/docs/Guides/Language.mdx index bdc58e41..2f26cdd6 100644 --- a/packages/website/docs/Guides/Language.mdx +++ b/packages/website/docs/Guides/Language.mdx @@ -9,22 +9,22 @@ import { SquiggleEditor } from "../../src/components/SquiggleEditor"; ### Distributions - + ### Numbers - + ### Arrays ### Records @@ -33,7 +33,7 @@ d.dist`} A statement assigns expressions to names. It looks like ` = ` @@ -42,7 +42,7 @@ A statement assigns expressions to names. It looks like ` = We can define functions diff --git a/packages/website/src/pages/playground.js b/packages/website/src/pages/playground.js index 48a2c90d..70904eba 100644 --- a/packages/website/src/pages/playground.js +++ b/packages/website/src/pages/playground.js @@ -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(),