diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx index 2b6cbf96..2bb5c2ac 100644 --- a/packages/components/src/components/SquiggleEditor.tsx +++ b/packages/components/src/components/SquiggleEditor.tsx @@ -164,33 +164,43 @@ export let SquigglePartial: React.FC = ({ xyPointLength: outputXYPoints, }; let [expression, setExpression] = React.useState(initialSquiggleString); - let squiggleResult = runPartial( - expression, - bindings, - samplingInputs, - jsImports - ); - if (squiggleResult.tag == "Ok") { - if (onChange) onChange(squiggleResult.value); - } + let [error, setError] = React.useState(null); + + // Runs squiggle and updates state/calls props apprropriately + let runSquiggle = (newExpression: string) => { + let squiggleResult = runPartial( + newExpression, + bindings, + samplingInputs, + jsImports + ); + if (squiggleResult.tag == "Ok") { + if (onChange) onChange(squiggleResult.value); + setError(null); + } else { + setError(errorValueToString(squiggleResult.value)); + } + }; + + // Run this once on mount, so that the next cells can get relevent values + React.useEffect(() => runSquiggle(expression), []); + return (
{ + // When the code changes, rerun squiggle and inform next cells + setExpression(x); + runSquiggle(x); + }} oneLine={true} showGutter={false} height={20} /> - {squiggleResult.tag == "Error" ? ( - - {errorValueToString(squiggleResult.value)} - - ) : ( - <> - )} + {error !== null ? {error} : <>}
); }; diff --git a/packages/components/src/stories/SquigglePartial.stories.mdx b/packages/components/src/stories/SquigglePartial.stories.mdx new file mode 100644 index 00000000..b4446402 --- /dev/null +++ b/packages/components/src/stories/SquigglePartial.stories.mdx @@ -0,0 +1,51 @@ +import { SquigglePartial, SquiggleEditor } from "../components/SquiggleEditor"; +import { useState } from "react"; +import { Canvas, Meta, Story, Props } from "@storybook/addon-docs"; + + + +export const Template = (props) => ; + +# Squiggle Partial + +A Squiggle Partial is an editor that does not return a graph to the user, but +instead returns bindings that can be used by further Squiggle Editors. + + + + {Template.bind({})} + + + + + + {(props) => { + let [bindings, setBindings] = useState({}); + return ( + <> + + + + ); + }} + + diff --git a/packages/squiggle-lang/src/js/index.ts b/packages/squiggle-lang/src/js/index.ts index ce4d9428..0b521079 100644 --- a/packages/squiggle-lang/src/js/index.ts +++ b/packages/squiggle-lang/src/js/index.ts @@ -11,6 +11,7 @@ export { makeSampleSetDist, errorValueToString, distributionErrorToString, + distributionError, } from "../rescript/TypescriptInterface.gen"; export type { samplingParams,