Add Patrial storybook and update partial bindings async

This commit is contained in:
Sam Nolan 2022-05-02 19:58:24 +00:00
parent 0c49fe4049
commit 47b67a9efb
3 changed files with 79 additions and 17 deletions

View File

@ -164,33 +164,43 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
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<string | null>(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 (
<div>
<Input>
<CodeEditor
value={expression}
onChange={setExpression}
onChange={(x) => {
// When the code changes, rerun squiggle and inform next cells
setExpression(x);
runSquiggle(x);
}}
oneLine={true}
showGutter={false}
height={20}
/>
</Input>
{squiggleResult.tag == "Error" ? (
<ErrorBox heading="Error">
{errorValueToString(squiggleResult.value)}
</ErrorBox>
) : (
<></>
)}
{error !== null ? <ErrorBox heading="Error">{error}</ErrorBox> : <></>}
</div>
);
};

View File

@ -0,0 +1,51 @@
import { SquigglePartial, SquiggleEditor } from "../components/SquiggleEditor";
import { useState } from "react";
import { Canvas, Meta, Story, Props } from "@storybook/addon-docs";
<Meta title="Squiggle/SquigglePartial" component={SquigglePartial} />
export const Template = (props) => <SquigglePartial {...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.
<Canvas>
<Story
name="Standalone"
args={{
initialSquiggleString: "x = normal(5,2)",
}}
>
{Template.bind({})}
</Story>
</Canvas>
<Canvas>
<Story
name="With Editor"
args={{
initialPartialString: "x = normal(5,2)",
initialEditorString: "x",
}}
>
{(props) => {
let [bindings, setBindings] = useState({});
return (
<>
<SquigglePartial
{...props}
initialSquiggleString={props.initialPartialString}
onChange={setBindings}
/>
<SquiggleEditor
{...props}
initialSquiggleString={props.initialEditorString}
bindings={bindings}
/>
</>
);
}}
</Story>
</Canvas>

View File

@ -11,6 +11,7 @@ export {
makeSampleSetDist,
errorValueToString,
distributionErrorToString,
distributionError,
} from "../rescript/TypescriptInterface.gen";
export type {
samplingParams,