From fc68a8d0694fa9dfe5077fecf88d0a39220df7e9 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Fri, 24 Jun 2022 03:43:30 +0000 Subject: [PATCH 01/19] Remove observable boilerplate + refactors --- packages/components/package.json | 2 - .../src/components/SquiggleChart.tsx | 22 ++- .../src/components/SquiggleEditor.tsx | 150 +++--------------- .../src/components/SquigglePlayground.tsx | 16 +- packages/components/src/index.ts | 12 +- packages/components/src/lib/hooks.ts | 23 +-- .../src/stories/SquiggleEditor.stories.mdx | 4 +- .../src/stories/SquigglePartial.stories.mdx | 6 +- packages/website/docs/Discussions/Bugs.mdx | 4 +- .../docs/Guides/DistributionCreation.mdx | 64 ++++---- packages/website/docs/Guides/Functions.mdx | 58 +++---- packages/website/docs/Guides/Language.mdx | 12 +- yarn.lock | 2 +- 13 files changed, 120 insertions(+), 255 deletions(-) diff --git a/packages/components/package.json b/packages/components/package.json index 7c64463c..bd86a257 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -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", diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index f7bb7ace..3e712396 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -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 = ({ squiggleString = "", @@ -59,9 +61,11 @@ export const SquiggleChart: React.FC = ({ 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 = ({ expY, }; + let chartSettings = { + start: diagramStart, + stop: diagramStop, + count: diagramCount, + }; + return ( ); -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 = ({ - 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 = (props) => { + const { squiggleString = "" } = props; + const [code, setCode] = useState(squiggleString); + React.useEffect(() => setCode(squiggleString), [squiggleString]); + let chartProps = { ...props, squiggleString: code }; return ( -
- - - {result.tag === "Ok" ? ( - - ) : ( - - )} - -
+ + + + ); }; -export function renderSquiggleEditorToDom(props: SquiggleEditorProps) { - const parent = document.createElement("div"); - ReactDOM.render(, 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 = ({ - 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 = ({ }); return ( -
- - - {result.tag !== "Ok" ? ( - - ) : null} - -
+ + + {result.tag !== "Ok" ? : null} + ); }; - -export function renderSquigglePartialToDom(props: SquigglePartialProps) { - const parent = document.createElement("div"); - ReactDOM.render(, parent); - return parent; -} diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index 2cd755b2..ce59b5a4 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -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 = ({ 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 = ({ = ({ ); }; - -export function renderSquigglePlaygroundToDom(props: PlaygroundProps) { - const parent = document.createElement("div"); - ReactDOM.render(, parent); - return parent; -} diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index de0b6dff..ce6e107c 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -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"; diff --git a/packages/components/src/lib/hooks.ts b/packages/components/src/lib/hooks.ts index 42db01ce..03b8c69d 100644 --- a/packages/components/src/lib/hooks.ts +++ b/packages/components/src/lib/hooks.ts @@ -5,7 +5,7 @@ import { run, runPartial, } from "@quri/squiggle-lang"; -import { useEffect, useMemo, useRef } from "react"; +import { useEffect, useMemo } from "react"; type SquiggleArgs> = { code: string; @@ -19,37 +19,18 @@ const useSquiggleAny = >( args: SquiggleArgs, f: (...args: Parameters) => 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["value"] } - >(null); const result: T = useMemo( () => 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
if you want to use your component as an observablehq's view - }; + return result; }; export const useSquigglePartial = ( diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx index 3ae37bb3..7e8f7e66 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 b4446402..c4f4814a 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 a39223a9..2c077eb0 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 5e84b47f..8ca22294 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 be579834..a58df345 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 4cfd9ea8..bdc58e41 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/yarn.lock b/yarn.lock index ae8a6f60..d7c13cbf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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== From 06f86963d1fc370daf505b38166e615199ee28d5 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Fri, 24 Jun 2022 05:10:28 +0000 Subject: [PATCH 02/19] Update documentation for squiggleString --- packages/components/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/README.md b/packages/components/README.md index a74ee32d..bc8d3123 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -20,7 +20,7 @@ Add to `App.js`: ```jsx import { SquiggleEditor } from "@quri/squiggle-components"; ; ``` From 69aa8a8cc177477e322d483b584ff0de633a4f28 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Mon, 27 Jun 2022 07:07:09 +0000 Subject: [PATCH 03/19] Add controlled and uncontrolled versions of components --- .../src/components/SquiggleChart.tsx | 6 +- .../src/components/SquiggleEditor.tsx | 49 ++++++++++---- .../src/components/SquigglePlayground.tsx | 10 ++- .../src/stories/SquiggleChart.stories.mdx | 27 ++++---- .../src/stories/SquiggleEditor.stories.mdx | 4 +- .../src/stories/SquigglePartial.stories.mdx | 6 +- packages/website/docs/Discussions/Bugs.mdx | 4 +- .../docs/Guides/DistributionCreation.mdx | 64 +++++++++---------- packages/website/docs/Guides/Functions.mdx | 58 ++++++++--------- packages/website/docs/Guides/Language.mdx | 12 ++-- packages/website/src/pages/playground.js | 2 +- 11 files changed, 131 insertions(+), 111 deletions(-) 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(), From 043205eca86994117a7779a178ee46eabcf89614 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 27 Jun 2022 14:23:31 +0000 Subject: [PATCH 04/19] :arrow_up: Bump vscode-languageserver from 7.0.0 to 8.0.1 Bumps [vscode-languageserver](https://github.com/Microsoft/vscode-languageserver-node/tree/HEAD/server) from 7.0.0 to 8.0.1. - [Release notes](https://github.com/Microsoft/vscode-languageserver-node/releases) - [Commits](https://github.com/Microsoft/vscode-languageserver-node/commits/release/client/8.0.1/server) --- updated-dependencies: - dependency-name: vscode-languageserver dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] --- packages/vscode-ext/package.json | 2 +- yarn.lock | 28 +++++----------------------- 2 files changed, 6 insertions(+), 24 deletions(-) diff --git a/packages/vscode-ext/package.json b/packages/vscode-ext/package.json index effdb398..d340cbcd 100644 --- a/packages/vscode-ext/package.json +++ b/packages/vscode-ext/package.json @@ -149,7 +149,7 @@ }, "dependencies": { "vscode-languageclient": "^8.0.1", - "vscode-languageserver": "^7.0.0", + "vscode-languageserver": "^8.0.1", "vscode-languageserver-textdocument": "^1.0.5", "@quri/squiggle-lang": "^0.2.11" } diff --git a/yarn.lock b/yarn.lock index ebeba49e..91d3fcec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17904,11 +17904,6 @@ vsce-yarn-patch@^1.66.2: yauzl "^2.3.1" yazl "^2.2.2" -vscode-jsonrpc@6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-6.0.0.tgz#108bdb09b4400705176b957ceca9e0880e9b6d4e" - integrity sha512-wnJA4BnEjOSyFMvjZdpiOwhSq9uDoK8e/kpRJDTaMYzwlkrhG1fwDIZI94CLsLzlCK5cIbMMtFlJlfR57Lavmg== - vscode-jsonrpc@8.0.1: version "8.0.1" resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-8.0.1.tgz#f30b0625ebafa0fb3bc53e934ca47b706445e57e" @@ -17923,14 +17918,6 @@ vscode-languageclient@^8.0.1: semver "^7.3.5" vscode-languageserver-protocol "3.17.1" -vscode-languageserver-protocol@3.16.0: - version "3.16.0" - resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.16.0.tgz#34135b61a9091db972188a07d337406a3cdbe821" - integrity sha512-sdeUoAawceQdgIfTI+sdcwkiK2KU+2cbEYA0agzM2uqaUy2UpnnGHtWTHVEtS0ES4zHU0eMFRGN+oQgDxlD66A== - dependencies: - vscode-jsonrpc "6.0.0" - vscode-languageserver-types "3.16.0" - vscode-languageserver-protocol@3.17.1: version "3.17.1" resolved "https://registry.yarnpkg.com/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.1.tgz#e801762c304f740208b6c804a0cf21f2c87509ed" @@ -17944,22 +17931,17 @@ vscode-languageserver-textdocument@^1.0.5: resolved "https://registry.yarnpkg.com/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.5.tgz#838769940ece626176ec5d5a2aa2d0aa69f5095c" integrity sha512-1ah7zyQjKBudnMiHbZmxz5bYNM9KKZYz+5VQLj+yr8l+9w3g+WAhCkUkWbhMEdC5u0ub4Ndiye/fDyS8ghIKQg== -vscode-languageserver-types@3.16.0: - version "3.16.0" - resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.16.0.tgz#ecf393fc121ec6974b2da3efb3155644c514e247" - integrity sha512-k8luDIWJWyenLc5ToFQQMaSrqCHiLwyKPHKPQZ5zz21vM+vIVUSvsRpcbiECH4WR88K2XZqc4ScRcZ7nk/jbeA== - vscode-languageserver-types@3.17.1: version "3.17.1" resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.17.1.tgz#c2d87fa7784f8cac389deb3ff1e2d9a7bef07e16" integrity sha512-K3HqVRPElLZVVPtMeKlsyL9aK0GxGQpvtAUTfX4k7+iJ4mc1M+JM+zQwkgGy2LzY0f0IAafe8MKqIkJrxfGGjQ== -vscode-languageserver@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-7.0.0.tgz#49b068c87cfcca93a356969d20f5d9bdd501c6b0" - integrity sha512-60HTx5ID+fLRcgdHfmz0LDZAXYEV68fzwG0JWwEPBode9NuMYTIxuYXPg4ngO8i8+Ou0lM7y6GzaYWbiDL0drw== +vscode-languageserver@^8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/vscode-languageserver/-/vscode-languageserver-8.0.1.tgz#56bd7a01f5c88af075a77f1d220edcb30fc4bdc7" + integrity sha512-sn7SjBwWm3OlmLtgg7jbM0wBULppyL60rj8K5HF0ny/MzN+GzPBX1kCvYdybhl7UW63V5V5tRVnyB8iwC73lSQ== dependencies: - vscode-languageserver-protocol "3.16.0" + vscode-languageserver-protocol "3.17.1" vscode-uri@^3.0.3: version "3.0.3" From 14189fd8484cae8d6484f7d46755a090a6c19ab9 Mon Sep 17 00:00:00 2001 From: Quinn Dougherty Date: Mon, 27 Jun 2022 14:31:35 -0400 Subject: [PATCH 05/19] #497 (no tests or examples) --- .../Distributions/SymbolicDist/SymbolicDist.res | 13 +++++++++++++ .../FunctionRegistry/FunctionRegistry_Library.res | 8 ++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res index f33fc450..762e5fd5 100644 --- a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res +++ b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res @@ -124,6 +124,19 @@ module Beta = { let sample = (t: t) => Jstat.Beta.sample(t.alpha, t.beta) let mean = (t: t) => Ok(Jstat.Beta.mean(t.alpha, t.beta)) let toString = ({alpha, beta}: t) => j`Beta($alpha,$beta)` + + let fromMeanAndSampleSize = (mean, sampleSize) => { + // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_sample_size + let alpha = mean *. sampleSize + let beta = (1.0 -. mean) *. sampleSize + alpha->make(beta) + } + + let fromMeanAndStdev = (mean, stdev) => { + let var = stdev *. stdev + let sampleSize = mean *. (1.0 -. mean) /. var + mean->fromMeanAndSampleSize(sampleSize) + } } module Lognormal = { diff --git a/packages/squiggle-lang/src/rescript/FunctionRegistry/FunctionRegistry_Library.res b/packages/squiggle-lang/src/rescript/FunctionRegistry/FunctionRegistry_Library.res index 56315860..a37b8dc4 100644 --- a/packages/squiggle-lang/src/rescript/FunctionRegistry/FunctionRegistry_Library.res +++ b/packages/squiggle-lang/src/rescript/FunctionRegistry/FunctionRegistry_Library.res @@ -117,8 +117,12 @@ lognormal({mean: 5, stdev: 2})`, ), Function.make( ~name="Beta", - ~examples=`beta(20, 25)`, - ~definitions=[TwoArgDist.make("beta", twoArgs(SymbolicDist.Beta.make))], + ~examples=`beta(20, 25) +beta({mean: 0.39, stdev: 0.1})`, + ~definitions=[ + TwoArgDist.make("beta", twoArgs(SymbolicDist.Beta.make)), + TwoArgDist.makeRecordMeanStdev("beta", twoArgs(SymbolicDist.Beta.fromMeanAndStdev)), + ], (), ), Function.make( From 54cd6365241e63671189a70c5cdbe8cb40e1bb77 Mon Sep 17 00:00:00 2001 From: Quinn Dougherty Date: Mon, 27 Jun 2022 14:37:12 -0400 Subject: [PATCH 06/19] added comment for more direct wikipedia citation --- .../src/rescript/Distributions/SymbolicDist/SymbolicDist.res | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res index 762e5fd5..61470d08 100644 --- a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res +++ b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res @@ -133,6 +133,7 @@ module Beta = { } let fromMeanAndStdev = (mean, stdev) => { + // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_variance let var = stdev *. stdev let sampleSize = mean *. (1.0 -. mean) /. var mean->fromMeanAndSampleSize(sampleSize) From 9dcac8dd481b3099cf2fe0b73705248c8e74f5b2 Mon Sep 17 00:00:00 2001 From: Quinn Dougherty Date: Thu, 30 Jun 2022 12:20:50 -0400 Subject: [PATCH 07/19] fixed \`-1\` I had forgotten; added basic mean tests --- .../__tests__/Distributions/Symbolic_test.res | 17 +++++++++++++++++ .../Distributions/SymbolicDist/SymbolicDist.res | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/squiggle-lang/__tests__/Distributions/Symbolic_test.res b/packages/squiggle-lang/__tests__/Distributions/Symbolic_test.res index 6ee9ffc8..152b580d 100644 --- a/packages/squiggle-lang/__tests__/Distributions/Symbolic_test.res +++ b/packages/squiggle-lang/__tests__/Distributions/Symbolic_test.res @@ -77,6 +77,23 @@ describe("(Symbolic) mean", () => { meanValue->unpackFloat->expect->ExpectJs.toBeFalsy }) + testAll( + "of beta distributions from mean and standard dev", + list{(0.39, 0.1), (0.08, 0.1), (0.8, 0.3)}, + tup => { + let (mean, stdev) = tup + let betaDistribution = SymbolicDist.Beta.fromMeanAndStdev(mean, stdev) + let meanValue = + betaDistribution->E.R2.fmap(d => + run(FromDist(ToFloat(#Mean), d->DistributionTypes.Symbolic)) + ) + switch meanValue { + | Ok(value) => value->unpackFloat->expect->toBeCloseTo(mean) + | Error(err) => err->expect->toBe("shouldn't happen") + } + }, + ) + testAll( "of lognormal distributions", list{(2.0, 4.0), (1e-7, 1e-2), (-1e6, 10.0), (1e3, -1e2), (-1e8, -1e4), (1e2, 1e-5)}, diff --git a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res index 61470d08..0b192b5f 100644 --- a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res +++ b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res @@ -135,7 +135,7 @@ module Beta = { let fromMeanAndStdev = (mean, stdev) => { // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_variance let var = stdev *. stdev - let sampleSize = mean *. (1.0 -. mean) /. var + let sampleSize = mean *. (1.0 -. mean) /. var -. 1.0 mean->fromMeanAndSampleSize(sampleSize) } } From e0289ed23fea20006e5b89f8914f7a2a97efdc58 Mon Sep 17 00:00:00 2001 From: Quinn Dougherty Date: Thu, 30 Jun 2022 12:29:09 -0400 Subject: [PATCH 08/19] documented addition to `beta` api --- packages/website/docs/Api/DistGeneric.mdx | 2 ++ packages/website/docs/Guides/DistributionCreation.mdx | 7 +++++++ 2 files changed, 9 insertions(+) diff --git a/packages/website/docs/Api/DistGeneric.mdx b/packages/website/docs/Api/DistGeneric.mdx index e49eec1c..42f464df 100644 --- a/packages/website/docs/Api/DistGeneric.mdx +++ b/packages/website/docs/Api/DistGeneric.mdx @@ -70,12 +70,14 @@ uniform(10, 12); ``` beta: (distribution|number, distribution|number) => distribution +beta: (dict<{mean: distribution|number, stdev: distribution|number}>) => distribution ``` **Examples** ```javascript beta(20, 25); +beta({ mean: 0.39, stdev: 0.1 }); ``` ### cauchy diff --git a/packages/website/docs/Guides/DistributionCreation.mdx b/packages/website/docs/Guides/DistributionCreation.mdx index 5e84b47f..1ad69960 100644 --- a/packages/website/docs/Guides/DistributionCreation.mdx +++ b/packages/website/docs/Guides/DistributionCreation.mdx @@ -259,6 +259,7 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi ## Beta `beta(alpha:number, beta:number)` +`beta({mean: number, stdev: number})` Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) with the given `alpha` and `beta` values. For a good summary of the beta distribution, see [this explanation](https://stats.stackexchange.com/a/47782) on Stack Overflow. @@ -278,6 +279,12 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w + + + ### Arguments From 5b41019c04d4b5137af7776bc21b84e784635371 Mon Sep 17 00:00:00 2001 From: Quinn Dougherty Date: Thu, 30 Jun 2022 14:38:59 -0400 Subject: [PATCH 09/19] hotfix: relative path --- packages/website/docs/Introduction.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/docs/Introduction.md b/packages/website/docs/Introduction.md index 35ff63b6..e04157c2 100644 --- a/packages/website/docs/Introduction.md +++ b/packages/website/docs/Introduction.md @@ -10,7 +10,7 @@ Squiggle is an _estimation language_, and a syntax for _calculating and expressi - [Gallery](./Discussions/Gallery) - [Squiggle playground](/playground) - [Language basics](./Guides/Language) -- [Squiggle functions source of truth](./docs/Guides/Functions) +- [Squiggle functions source of truth](./Guides/Functions) - [Known bugs](./Discussions/Bugs) - [Original lesswrong sequence](https://www.lesswrong.com/s/rDe8QE5NvXcZYzgZ3) - [Author your squiggle models as Observable notebooks](https://observablehq.com/@hazelfire/squiggle) From 7a419742ad5f91afd07ff6a7deb828ad8c50632a Mon Sep 17 00:00:00 2001 From: Quinn Dougherty Date: Mon, 4 Jul 2022 09:57:00 -0400 Subject: [PATCH 10/19] moved error message sooner for invalid mean and stdev --- .../Distributions/SymbolicDist/SymbolicDist.res | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res index 0b192b5f..e7471ffa 100644 --- a/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res +++ b/packages/squiggle-lang/src/rescript/Distributions/SymbolicDist/SymbolicDist.res @@ -129,14 +129,18 @@ module Beta = { // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_sample_size let alpha = mean *. sampleSize let beta = (1.0 -. mean) *. sampleSize - alpha->make(beta) + make(alpha, beta) } let fromMeanAndStdev = (mean, stdev) => { // https://en.wikipedia.org/wiki/Beta_distribution#Mean_and_variance - let var = stdev *. stdev - let sampleSize = mean *. (1.0 -. mean) /. var -. 1.0 - mean->fromMeanAndSampleSize(sampleSize) + if !(0.0 < stdev && stdev <= 0.5) || !(0.0 <= mean && mean <= 1.0) { + "Beta mean must be in [0,1] and stdev must be in (1,0.5]"->Error + } else { + let var = stdev *. stdev + let sampleSize = mean *. (1.0 -. mean) /. var -. 1.0 + fromMeanAndSampleSize(mean, sampleSize) + } } } From c4d2ad922a3df2dbaf87675124fedd4e95721567 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Tue, 5 Jul 2022 17:32:02 +1000 Subject: [PATCH 11/19] Respond to PR comments --- packages/components/README.md | 4 +- .../src/components/SquiggleEditor.tsx | 41 ++++++++----------- .../src/components/SquigglePlayground.tsx | 19 ++++----- packages/components/src/lib/hooks.ts | 22 +++++++++- .../src/stories/SquiggleEditor.stories.mdx | 13 ++++++ .../stories/SquigglePlayground.stories.mdx | 2 +- 6 files changed, 61 insertions(+), 40 deletions(-) diff --git a/packages/components/README.md b/packages/components/README.md index bc8d3123..63a98d34 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -20,7 +20,7 @@ Add to `App.js`: ```jsx import { SquiggleEditor } from "@quri/squiggle-components"; ; ``` @@ -50,7 +50,7 @@ export function DynamicSquiggleChart({ squiggleString }) { } else { return ( = (props) => { - let defaultCode = props.defaultCode ?? ""; - const [uncontrolledCode, setCode] = useState(defaultCode); - let code = props.code ?? uncontrolledCode; + const [code, setCode] = useMaybeControlledValue({ + value: props.code, + defaultValue: props.defaultCode, + onChange: props.onCodeChange, + }); let chartProps = { ...props, code }; return ( - { - if (props.onCodeChange) props.onCodeChange(code); - - if (props.code === undefined) setCode(code); - }} - /> + ); @@ -66,7 +61,7 @@ export interface SquigglePartialProps { } export const SquigglePartial: React.FC = ({ - code, + code: controlledCode, defaultCode = "", onChange, onCodeChange, @@ -74,11 +69,14 @@ export const SquigglePartial: React.FC = ({ environment, jsImports = defaultImports, }: SquigglePartialProps) => { - const [uncontrolledCode, setCode] = useState(defaultCode); - let codeProp = code ?? uncontrolledCode; + const [code, setCode] = useMaybeControlledValue({ + value: controlledCode, + defaultValue: defaultCode, + onChange: onCodeChange, + }); const result = useSquigglePartial({ - code: codeProp, + code, bindings, environment, jsImports, @@ -87,14 +85,7 @@ 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 e96a1053..4b01a344 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -1,6 +1,7 @@ import React, { FC, Fragment, useState, useEffect } from "react"; import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form"; import * as yup from "yup"; +import { useMaybeControlledValue } from "../lib/hooks"; import { yupResolver } from "@hookform/resolvers/yup"; import { Tab } from "@headlessui/react"; import { @@ -216,7 +217,11 @@ export const SquigglePlayground: FC = ({ onSettingsChange, showEditor = true, }) => { - const [uncontrolledCode, setUncontrolledCode] = useState(defaultCode); + const [code, setCode] = useMaybeControlledValue({ + value: controlledCode, + defaultValue: defaultCode, + onChange: onCodeChange, + }); const [importString, setImportString] = useState("{}"); const [imports, setImports] = useState({}); const [importsAreValid, setImportsAreValid] = useState(true); @@ -261,8 +266,6 @@ export const SquigglePlayground: FC = ({ } }; - const code = controlledCode ?? uncontrolledCode; - const samplingSettings = (
@@ -434,14 +437,8 @@ export const SquigglePlayground: FC = ({ const firstTab = vars.showEditor ? (
{ - if (controlledCode === undefined) { - // uncontrolled mode - setUncontrolledCode(newCode); - } - onCodeChange?.(newCode); - }} + value={code ?? ""} + onChange={setCode} oneLine={false} showGutter={true} height={height - 1} diff --git a/packages/components/src/lib/hooks.ts b/packages/components/src/lib/hooks.ts index 03b8c69d..b52c23be 100644 --- a/packages/components/src/lib/hooks.ts +++ b/packages/components/src/lib/hooks.ts @@ -5,7 +5,7 @@ import { run, runPartial, } from "@quri/squiggle-lang"; -import { useEffect, useMemo } from "react"; +import { useEffect, useMemo, useState } from "react"; type SquiggleArgs> = { code: string; @@ -42,3 +42,23 @@ export const useSquigglePartial = ( export const useSquiggle = (args: SquiggleArgs>) => { return useSquiggleAny(args, run); }; + +type ControlledValueArgs = { + value?: T; + defaultValue: T; + onChange?: (x: T) => void; +}; +export function useMaybeControlledValue( + args: ControlledValueArgs +): [T, (x: T) => void] { + let [uncontrolledValue, setUncontrolledValue] = useState(args.defaultValue); + let value = args.value ?? uncontrolledValue; + let onChange = (newValue: T) => { + if (args.value === undefined) { + // uncontrolled mode + setUncontrolledValue(newValue); + } + args.onChange?.(newValue); + }; + return [value, onChange]; +} diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx index e51e3e33..086614c6 100644 --- a/packages/components/src/stories/SquiggleEditor.stories.mdx +++ b/packages/components/src/stories/SquiggleEditor.stories.mdx @@ -21,6 +21,19 @@ the distribution. +It's also possible to create a controlled version of the same component + + + + {Template.bind({})} + + + You can also name variables like so: diff --git a/packages/components/src/stories/SquigglePlayground.stories.mdx b/packages/components/src/stories/SquigglePlayground.stories.mdx index eb39bbba..0c198f42 100644 --- a/packages/components/src/stories/SquigglePlayground.stories.mdx +++ b/packages/components/src/stories/SquigglePlayground.stories.mdx @@ -14,7 +14,7 @@ including sampling settings, in squiggle. From 2c2f299e466e889d81f952b0b4ad7f6112448cd5 Mon Sep 17 00:00:00 2001 From: Sam Nolan Date: Tue, 5 Jul 2022 17:43:13 +1000 Subject: [PATCH 12/19] Fix build error --- packages/components/src/components/SquiggleEditor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index 9ef2bea7..027eecb9 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -30,7 +30,7 @@ export type SquiggleEditorProps = SquiggleChartProps & { export const SquiggleEditor: React.FC = (props) => { const [code, setCode] = useMaybeControlledValue({ value: props.code, - defaultValue: props.defaultCode, + defaultValue: props.defaultCode ?? "", onChange: props.onCodeChange, }); From 9208330038470997328a4c6b3363eb487bf496d5 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sun, 26 Jun 2022 21:15:09 +0300 Subject: [PATCH 13/19] playground: manual play mode --- .../src/components/SquiggleChart.tsx | 104 +++++++++-------- .../src/components/SquigglePlayground.tsx | 109 +++++++++++++++--- .../components/src/components/ui/Toggle.tsx | 34 ++++++ 3 files changed, 180 insertions(+), 67 deletions(-) create mode 100644 packages/components/src/components/ui/Toggle.tsx diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx index 9e352a62..bfb69a4e 100644 --- a/packages/components/src/components/SquiggleChart.tsx +++ b/packages/components/src/components/SquiggleChart.tsx @@ -48,57 +48,59 @@ export interface SquiggleChartProps { const defaultOnChange = () => {}; -export const SquiggleChart: React.FC = ({ - code = "", - environment, - onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here - height = 200, - bindings = defaultBindings, - jsImports = defaultImports, - showSummary = false, - width, - showTypes = false, - showControls = false, - logX = false, - expY = false, - diagramStart = 0, - diagramStop = 10, - diagramCount = 100, -}) => { - const result = useSquiggle({ - code, - bindings, +export const SquiggleChart: React.FC = React.memo( + ({ + code = "", environment, - jsImports, - onChange, - }); + onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here + height = 200, + bindings = defaultBindings, + jsImports = defaultImports, + showSummary = false, + width, + showTypes = false, + showControls = false, + logX = false, + expY = false, + diagramStart = 0, + diagramStop = 10, + diagramCount = 100, + }) => { + const result = useSquiggle({ + code, + bindings, + environment, + jsImports, + onChange, + }); - if (result.tag !== "Ok") { - return ; + if (result.tag !== "Ok") { + return ; + } + + let distributionPlotSettings = { + showControls, + showSummary, + logX, + expY, + }; + + let chartSettings = { + start: diagramStart, + stop: diagramStop, + count: diagramCount, + }; + + return ( + + ); } - - let distributionPlotSettings = { - showControls, - showSummary, - logX, - expY, - }; - - let chartSettings = { - start: diagramStart, - stop: diagramStop, - count: diagramCount, - }; - - return ( - - ); -}; +); diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index 4b01a344..74f48455 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -1,4 +1,4 @@ -import React, { FC, Fragment, useState, useEffect } from "react"; +import React, { FC, Fragment, useState, useEffect, useMemo } from "react"; import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form"; import * as yup from "yup"; import { useMaybeControlledValue } from "../lib/hooks"; @@ -6,10 +6,14 @@ import { yupResolver } from "@hookform/resolvers/yup"; import { Tab } from "@headlessui/react"; import { ChartSquareBarIcon, + CheckCircleIcon, CodeIcon, CogIcon, CurrencyDollarIcon, EyeIcon, + PauseIcon, + PlayIcon, + RefreshIcon, } from "@heroicons/react/solid"; import clsx from "clsx"; @@ -20,6 +24,7 @@ import { CodeEditor } from "./CodeEditor"; import { JsonEditor } from "./JsonEditor"; import { ErrorAlert, SuccessAlert } from "./Alert"; import { SquiggleContainer } from "./SquiggleContainer"; +import { Toggle } from "./ui/Toggle"; interface PlaygroundProps { /** The initial squiggle string to put in the playground */ @@ -110,7 +115,7 @@ type StyledTabProps = { const StyledTab: React.FC = ({ name, icon: Icon }) => { return ( - + {({ selected }) => ( + )} + +
+ ); +}; + export const SquigglePlayground: FC = ({ defaultCode = "", height = 500, @@ -225,7 +277,14 @@ export const SquigglePlayground: FC = ({ const [importString, setImportString] = useState("{}"); const [imports, setImports] = useState({}); const [importsAreValid, setImportsAreValid] = useState(true); - const { register, control } = useForm({ + + const [renderedCode, setRenderedCode] = useState(""); // used only if autoplay is false + + const { + register, + control, + setValue: setFormValue, + } = useForm({ resolver: yupResolver(schema), defaultValues: { sampleCount: 1000, @@ -242,6 +301,7 @@ export const SquigglePlayground: FC = ({ diagramStart: 0, diagramStop: 10, diagramCount: 20, + autoplay: true, }, }); const vars = useWatch({ @@ -252,10 +312,14 @@ export const SquigglePlayground: FC = ({ onSettingsChange?.(vars); }, [vars, onSettingsChange]); - const env: environment = { - sampleCount: Number(vars.sampleCount), - xyPointLength: Number(vars.xyPointLength), - }; + const env: environment = useMemo( + () => ({ + sampleCount: Number(vars.sampleCount), + xyPointLength: Number(vars.xyPointLength), + }), + [vars.sampleCount, vars.xyPointLength] + ); + const getChangeJson = (r: string) => { setImportString(r); try { @@ -418,7 +482,7 @@ export const SquigglePlayground: FC = ({ const squiggleChart = ( = ({
- - + + + + + + + { + setRenderedCode(code); + }} + onAutoplayChange={(newValue) => { + if (!newValue) setRenderedCode(code); + setFormValue("autoplay", newValue); + }} /> - - - - +
{vars.showEditor ? withEditor : withoutEditor}
diff --git a/packages/components/src/components/ui/Toggle.tsx b/packages/components/src/components/ui/Toggle.tsx new file mode 100644 index 00000000..1b96db77 --- /dev/null +++ b/packages/components/src/components/ui/Toggle.tsx @@ -0,0 +1,34 @@ +import clsx from "clsx"; +import React from "react"; + +type IconType = (props: React.ComponentProps<"svg">) => JSX.Element; + +type Props = { + status: boolean; + onChange: (status: boolean) => void; + texts: [string, string]; + icons: [IconType, IconType]; +}; + +export const Toggle: React.FC = ({ + texts: [onText, offText], + icons: [OnIcon, OffIcon], + status, + onChange, +}) => { + const CurrentIcon = status ? OnIcon : OffIcon; + return ( + + ); +}; From 4fe30107a4f953f3be4b8d8f8f266af8b3996365 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sun, 26 Jun 2022 21:30:24 +0300 Subject: [PATCH 14/19] submit editor on cmd+enter --- packages/components/src/components/CodeEditor.tsx | 15 ++++++++++++++- .../src/components/SquigglePlayground.tsx | 10 +++++++--- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/CodeEditor.tsx b/packages/components/src/components/CodeEditor.tsx index c869b2ea..15802131 100644 --- a/packages/components/src/components/CodeEditor.tsx +++ b/packages/components/src/components/CodeEditor.tsx @@ -1,5 +1,5 @@ import _ from "lodash"; -import React, { FC, useMemo } from "react"; +import React, { FC, useMemo, useRef } from "react"; import AceEditor from "react-ace"; import "ace-builds/src-noconflict/mode-golang"; @@ -8,6 +8,7 @@ import "ace-builds/src-noconflict/theme-github"; interface CodeEditorProps { value: string; onChange: (value: string) => void; + onSubmit?: () => void; oneLine?: boolean; width?: number; height: number; @@ -17,6 +18,7 @@ interface CodeEditorProps { export const CodeEditor: FC = ({ value, onChange, + onSubmit, oneLine = false, showGutter = false, height, @@ -24,6 +26,10 @@ export const CodeEditor: FC = ({ const lineCount = value.split("\n").length; const id = useMemo(() => _.uniqueId(), []); + // this is necessary because AceEditor binds commands on mount, see https://github.com/securingsincity/react-ace/issues/684 + const onSubmitRef = useRef(null); + onSubmitRef.current = onSubmit; + return ( = ({ enableBasicAutocompletion: false, enableLiveAutocompletion: false, }} + commands={[ + { + name: "submit", + bindKey: { mac: "Cmd-Enter", win: "Ctrl-Enter" }, + exec: () => onSubmitRef.current?.(), + }, + ]} /> ); }; diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index 74f48455..06b3fd3d 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -330,6 +330,11 @@ export const SquigglePlayground: FC = ({ } }; + const manualPlay = () => { + if (vars.autoplay) return; // should we allow reruns even in autoplay mode? + setRenderedCode(code); // TODO - force play even if code hasn't changed + }; + const samplingSettings = (
@@ -503,6 +508,7 @@ export const SquigglePlayground: FC = ({ = ({ { - setRenderedCode(code); - }} + onPlay={manualPlay} onAutoplayChange={(newValue) => { if (!newValue) setRenderedCode(code); setFormValue("autoplay", newValue); From 87bb752c925fd00367251ae1096897e4cd1ea682 Mon Sep 17 00:00:00 2001 From: Vyacheslav Matyukhin Date: Sun, 26 Jun 2022 23:30:32 +0300 Subject: [PATCH 15/19] extract ui components from playground; show spinner on keyboard-initiated plays --- .../src/components/SquigglePlayground.tsx | 576 ++++++++---------- .../components/src/components/ui/Checkbox.tsx | 24 + .../src/components/ui/StyledTab.tsx | 60 ++ 3 files changed, 349 insertions(+), 311 deletions(-) create mode 100644 packages/components/src/components/ui/Checkbox.tsx create mode 100644 packages/components/src/components/ui/StyledTab.tsx diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx index 06b3fd3d..c5104508 100644 --- a/packages/components/src/components/SquigglePlayground.tsx +++ b/packages/components/src/components/SquigglePlayground.tsx @@ -1,9 +1,8 @@ -import React, { FC, Fragment, useState, useEffect, useMemo } from "react"; +import React, { FC, useState, useEffect, useMemo } from "react"; import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form"; import * as yup from "yup"; import { useMaybeControlledValue } from "../lib/hooks"; import { yupResolver } from "@hookform/resolvers/yup"; -import { Tab } from "@headlessui/react"; import { ChartSquareBarIcon, CheckCircleIcon, @@ -25,6 +24,8 @@ import { JsonEditor } from "./JsonEditor"; import { ErrorAlert, SuccessAlert } from "./Alert"; import { SquiggleContainer } from "./SquiggleContainer"; import { Toggle } from "./ui/Toggle"; +import { Checkbox } from "./ui/Checkbox"; +import { StyledTab } from "./ui/StyledTab"; interface PlaygroundProps { /** The initial squiggle string to put in the playground */ @@ -49,104 +50,46 @@ interface PlaygroundProps { showEditor?: boolean; } -const schema = yup - .object() - .shape({ - sampleCount: yup - .number() - .required() - .positive() - .integer() - .default(1000) - .min(10) - .max(1000000), - xyPointLength: yup - .number() - .required() - .positive() - .integer() - .default(1000) - .min(10) - .max(10000), - chartHeight: yup.number().required().positive().integer().default(350), - leftSizePercent: yup - .number() - .required() - .positive() - .integer() - .min(10) - .max(100) - .default(50), - showTypes: yup.boolean(), - showControls: yup.boolean(), - showSummary: yup.boolean(), - showEditor: yup.boolean(), - logX: yup.boolean(), - expY: yup.boolean(), - showSettingsPage: yup.boolean().default(false), - diagramStart: yup - .number() - .required() - .positive() - .integer() - .default(0) - .min(0), - diagramStop: yup - .number() - .required() - .positive() - .integer() - .default(10) - .min(0), - diagramCount: yup - .number() - .required() - .positive() - .integer() - .default(20) - .min(2), - }) - .required(); +const schema = yup.object({}).shape({ + sampleCount: yup + .number() + .required() + .positive() + .integer() + .default(1000) + .min(10) + .max(1000000), + xyPointLength: yup + .number() + .required() + .positive() + .integer() + .default(1000) + .min(10) + .max(10000), + chartHeight: yup.number().required().positive().integer().default(350), + leftSizePercent: yup + .number() + .required() + .positive() + .integer() + .min(10) + .max(100) + .default(50), + showTypes: yup.boolean().required(), + showControls: yup.boolean().required(), + showSummary: yup.boolean().required(), + showEditor: yup.boolean().required(), + logX: yup.boolean().required(), + expY: yup.boolean().required(), + showSettingsPage: yup.boolean().default(false), + diagramStart: yup.number().required().positive().integer().default(0).min(0), + diagramStop: yup.number().required().positive().integer().default(10).min(0), + diagramCount: yup.number().required().positive().integer().default(20).min(2), + autoplay: yup.boolean().required(), +}); -type StyledTabProps = { - name: string; - icon: (props: React.ComponentProps<"svg">) => JSX.Element; -}; - -const StyledTab: React.FC = ({ name, icon: Icon }) => { - return ( - - {({ selected }) => ( - - )} - - ); -}; +type FormFields = yup.InferType; const HeadedSection: FC<{ title: string; children: React.ReactNode }> = ({ title, @@ -187,50 +130,189 @@ function InputItem({ ); } -function Checkbox({ - name, - label, +const SamplingSettings: React.FC<{ register: UseFormRegister }> = ({ register, -}: { - name: Path; - label: string; - register: UseFormRegister; -}) { - return ( -