From 47b67a9efbab60657df787781d0cd7a3772dbe01 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Mon, 2 May 2022 19:58:24 +0000
Subject: [PATCH] Add Patrial storybook and update partial bindings async

---
 .../src/components/SquiggleEditor.tsx         | 44 +++++++++-------
 .../src/stories/SquigglePartial.stories.mdx   | 51 +++++++++++++++++++
 packages/squiggle-lang/src/js/index.ts        |  1 +
 3 files changed, 79 insertions(+), 17 deletions(-)
 create mode 100644 packages/components/src/stories/SquigglePartial.stories.mdx

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<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>
   );
 };
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";
+
+<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>
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,