Add Patrial storybook and update partial bindings async

packages/components/src/components/SquiggleEditor.tsx

@@ -164,33 +164,43 @@ export let SquigglePartial: React.FC<SquigglePartialProps> = ({
     xyPointLength: outputXYPoints,
   };
   let [expression, setExpression] = React.useState(initialSquiggleString);
+  let [error, setError] = React.useState<string | null>(null);
+
+  // Runs squiggle and updates state/calls props apprropriately
+  let runSquiggle = (newExpression: string) => {
     let squiggleResult = runPartial(
-    expression,
+      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>
   );
 };

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>

packages/squiggle-lang/src/js/index.ts

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