Merge pull request #460 from quantified-uncertainty/partial-storybook

Add partial functionality to storybook and update partial bindings async

packages/components/src/components/SquiggleEditor.tsx

@@ -164,15 +164,25 @@ 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);
+
+  let runSquiggleAndUpdateBindings = () => {
+    let squiggleResult = runPartial(
+      expression,
+      bindings,
+      samplingInputs,
+      jsImports
+    );
+    if (squiggleResult.tag == "Ok") {
+      if (onChange) onChange(squiggleResult.value);
+      setError(null);
+    } else {
+      setError(errorValueToString(squiggleResult.value));
+    }
+  };
+
+  React.useEffect(runSquiggleAndUpdateBindings, [expression]);
+
   return (
     <div>
       <Input>
@@ -184,13 +194,7 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
           height={20}
         />
       </Input>
-      {squiggleResult.tag == "Error" ? (
-        <ErrorBox heading="Error">
-          {errorValueToString(squiggleResult.value)}
-        </ErrorBox>
-      ) : (
-        <></>
-      )}
+      {error !== null ? <ErrorBox heading="Error">{error}</ErrorBox> : <></>}
     </div>
   );
 };

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";
+
+<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>