From fc68a8d0694fa9dfe5077fecf88d0a39220df7e9 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Fri, 24 Jun 2022 03:43:30 +0000
Subject: [PATCH 1/5] Remove observable boilerplate + refactors

---
 packages/components/package.json              |   2 -
 .../src/components/SquiggleChart.tsx          |  22 ++-
 .../src/components/SquiggleEditor.tsx         | 150 +++---------------
 .../src/components/SquigglePlayground.tsx     |  16 +-
 packages/components/src/index.ts              |  12 +-
 packages/components/src/lib/hooks.ts          |  23 +--
 .../src/stories/SquiggleEditor.stories.mdx    |   4 +-
 .../src/stories/SquigglePartial.stories.mdx   |   6 +-
 packages/website/docs/Discussions/Bugs.mdx    |   4 +-
 .../docs/Guides/DistributionCreation.mdx      |  64 ++++----
 packages/website/docs/Guides/Functions.mdx    |  58 +++----
 packages/website/docs/Guides/Language.mdx     |  12 +-
 yarn.lock                                     |   2 +-
 13 files changed, 120 insertions(+), 255 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index 7c64463c..bd86a257 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -38,7 +38,6 @@
     "@types/lodash": "^4.14.182",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
     "@types/styled-components": "^5.1.24",
     "@types/webpack": "^5.28.0",
     "cross-env": "^7.0.3",
@@ -47,7 +46,6 @@
     "postcss-import": "^14.1.0",
     "postcss-loader": "^7.0.0",
     "react": "^18.1.0",
-    "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "style-loader": "^3.3.1",
     "tailwindcss": "^3.1.3",
diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index f7bb7ace..3e712396 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -8,7 +8,6 @@ import {
   defaultBindings,
   defaultEnvironment,
 } from "@quri/squiggle-lang";
-import { FunctionChartSettings } from "./FunctionChart";
 import { useSquiggle } from "../lib/hooks";
 import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
 import { SquiggleItem } from "./SquiggleItem";
@@ -20,8 +19,12 @@ export interface SquiggleChartProps {
   sampleCount?: number;
   /** The amount of points returned to draw the distribution */
   environment?: environment;
-  /** If the result is a function, where the function starts, ends and the amount of stops */
-  chartSettings?: FunctionChartSettings;
+  /** If the result is a function, where the function domain starts */
+  diagramStart?: number;
+  /** If the result is a function, where the function domain ends */
+  diagramStop?: number;
+  /** If the result is a function, the amount of stops sampled */
+  diagramCount?: number;
   /** When the squiggle code gets reevaluated */
   onChange?(expr: squiggleExpression | undefined): void;
   /** CSS width of the element */
@@ -44,7 +47,6 @@ export interface SquiggleChartProps {
 }
 
 const defaultOnChange = () => {};
-const defaultChartSettings = { start: 0, stop: 10, count: 20 };
 
 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   squiggleString = "",
@@ -59,9 +61,11 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   showControls = false,
   logX = false,
   expY = false,
-  chartSettings = defaultChartSettings,
+  diagramStart = 0,
+  diagramStop = 10,
+  diagramCount = 100,
 }) => {
-  const { result } = useSquiggle({
+  const result = useSquiggle({
     code: squiggleString,
     bindings,
     environment,
@@ -80,6 +84,12 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     expY,
   };
 
+  let chartSettings = {
+    start: diagramStart,
+    stop: diagramStop,
+    count: diagramCount,
+  };
+
   return (
     <SquiggleItem
       expression={result.value}
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index cd51b7a0..3d0e0db5 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -1,18 +1,11 @@
 import React, { useState } from "react";
-import * as ReactDOM from "react-dom";
 import { CodeEditor } from "./CodeEditor";
-import {
-  squiggleExpression,
-  environment,
-  bindings,
-  jsImports,
-  defaultEnvironment,
-} from "@quri/squiggle-lang";
+import { environment, bindings, jsImports } from "@quri/squiggle-lang";
 import { defaultImports, defaultBindings } from "@quri/squiggle-lang";
 import { SquiggleContainer } from "./SquiggleContainer";
-import { useSquiggle, useSquigglePartial } from "../lib/hooks";
+import { SquiggleChart, SquiggleChartProps } from "./SquiggleChart";
+import { useSquigglePartial } from "../lib/hooks";
 import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
-import { SquiggleItem } from "./SquiggleItem";
 
 const WrappedCodeEditor: React.FC<{
   code: string;
@@ -29,111 +22,25 @@ const WrappedCodeEditor: React.FC<{
   </div>
 );
 
-export interface SquiggleEditorProps {
-  /** The input string for squiggle */
-  initialSquiggleString?: string;
-  /** The width of the element */
-  width?: number;
-  /** If the result is a function, where the function starts */
-  diagramStart?: number;
-  /** If the result is a function, where the function ends */
-  diagramStop?: number;
-  /** If the result is a function, how many points along the function it samples */
-  diagramCount?: number;
-  /** When the environment changes. Used again for notebook magic */
-  onChange?(expr: squiggleExpression | undefined): void;
-  /** Previous variable declarations */
-  bindings?: bindings;
-  /** If the output requires monte carlo sampling, the amount of samples */
-  environment?: environment;
-  /** JS Imports */
-  jsImports?: jsImports;
-  /** Whether to show detail about types of the returns, default false */
-  showTypes?: boolean;
-  /** Whether to give users access to graph controls */
-  showControls?: boolean;
-  /** Whether to show a summary table */
-  showSummary?: boolean;
-  /** Whether to log the x coordinate on distribution charts */
-  logX?: boolean;
-  /** Whether to exp the y coordinate on distribution charts */
-  expY?: boolean;
-}
+export type SquiggleEditorProps = SquiggleChartProps;
 
-export const SquiggleEditor: React.FC<SquiggleEditorProps> = ({
-  initialSquiggleString = "",
-  width,
-  diagramStart = 0,
-  diagramStop = 10,
-  diagramCount = 20,
-  onChange,
-  bindings = defaultBindings,
-  environment,
-  jsImports = defaultImports,
-  showTypes = false,
-  showControls = false,
-  showSummary = false,
-  logX = false,
-  expY = false,
-}: SquiggleEditorProps) => {
-  const [code, setCode] = useState(initialSquiggleString);
-  React.useEffect(
-    () => setCode(initialSquiggleString),
-    [initialSquiggleString]
-  );
-
-  const { result, observableRef } = useSquiggle({
-    code,
-    bindings,
-    environment,
-    jsImports,
-    onChange,
-  });
-
-  const chartSettings = {
-    start: diagramStart,
-    stop: diagramStop,
-    count: diagramCount,
-  };
-
-  const distributionPlotSettings = {
-    showControls,
-    showSummary,
-    logX,
-    expY,
-  };
+export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
+  const { squiggleString = "" } = props;
+  const [code, setCode] = useState(squiggleString);
+  React.useEffect(() => setCode(squiggleString), [squiggleString]);
 
+  let chartProps = { ...props, squiggleString: code };
   return (
-    <div ref={observableRef}>
-      <SquiggleContainer>
-        <WrappedCodeEditor code={code} setCode={setCode} />
-        {result.tag === "Ok" ? (
-          <SquiggleItem
-            expression={result.value}
-            width={width}
-            height={200}
-            distributionPlotSettings={distributionPlotSettings}
-            showTypes={showTypes}
-            chartSettings={chartSettings}
-            environment={environment ?? defaultEnvironment}
-          />
-        ) : (
-          <SquiggleErrorAlert error={result.value} />
-        )}
-      </SquiggleContainer>
-    </div>
+    <SquiggleContainer>
+      <WrappedCodeEditor code={code} setCode={setCode} />
+      <SquiggleChart {...chartProps} />
+    </SquiggleContainer>
   );
 };
 
-export function renderSquiggleEditorToDom(props: SquiggleEditorProps) {
-  const parent = document.createElement("div");
-  ReactDOM.render(<SquiggleEditor {...props} />, parent);
-  return parent;
-}
-
 export interface SquigglePartialProps {
   /** The input string for squiggle */
-  initialSquiggleString?: string;
+  squiggleString?: string;
   /** when the environment changes. Used again for notebook magic*/
   onChange?(expr: bindings | undefined): void;
   /** Previously declared variables */
@@ -145,19 +52,16 @@ export interface SquigglePartialProps {
 }
 
 export const SquigglePartial: React.FC<SquigglePartialProps> = ({
-  initialSquiggleString = "",
+  squiggleString = "",
   onChange,
   bindings = defaultBindings,
   environment,
   jsImports = defaultImports,
 }: SquigglePartialProps) => {
-  const [code, setCode] = useState(initialSquiggleString);
-  React.useEffect(
-    () => setCode(initialSquiggleString),
-    [initialSquiggleString]
-  );
+  const [code, setCode] = useState(squiggleString);
+  React.useEffect(() => setCode(squiggleString), [squiggleString]);
 
-  const { result, observableRef } = useSquigglePartial({
+  const result = useSquigglePartial({
     code,
     bindings,
     environment,
@@ -166,19 +70,9 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
   });
 
   return (
-    <div ref={observableRef}>
-      <SquiggleContainer>
-        <WrappedCodeEditor code={code} setCode={setCode} />
-        {result.tag !== "Ok" ? (
-          <SquiggleErrorAlert error={result.value} />
-        ) : null}
-      </SquiggleContainer>
-    </div>
+    <SquiggleContainer>
+      <WrappedCodeEditor code={code} setCode={setCode} />
+      {result.tag !== "Ok" ? <SquiggleErrorAlert error={result.value} /> : null}
+    </SquiggleContainer>
   );
 };
-
-export function renderSquigglePartialToDom(props: SquigglePartialProps) {
-  const parent = document.createElement("div");
-  ReactDOM.render(<SquigglePartial {...props} />, parent);
-  return parent;
-}
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index 2cd755b2..ce59b5a4 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -1,5 +1,4 @@
 import React, { FC, Fragment, useState, useEffect } from "react";
-import ReactDOM from "react-dom";
 import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
@@ -250,11 +249,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     onSettingsChange?.(vars);
   }, [vars, onSettingsChange]);
 
-  const chartSettings = {
-    start: Number(vars.diagramStart),
-    stop: Number(vars.diagramStop),
-    count: Number(vars.diagramCount),
-  };
   const env: environment = {
     sampleCount: Number(vars.sampleCount),
     xyPointLength: Number(vars.xyPointLength),
@@ -425,7 +419,9 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     <SquiggleChart
       squiggleString={code}
       environment={env}
-      chartSettings={chartSettings}
+      diagramStart={Number(vars.diagramStart)}
+      diagramStop={Number(vars.diagramStop)}
+      diagramCount={Number(vars.diagramCount)}
       height={vars.chartHeight}
       showTypes={vars.showTypes}
       showControls={vars.showControls}
@@ -494,9 +490,3 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     </SquiggleContainer>
   );
 };
-
-export function renderSquigglePlaygroundToDom(props: PlaygroundProps) {
-  const parent = document.createElement("div");
-  ReactDOM.render(<SquigglePlayground {...props} />, parent);
-  return parent;
-}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index de0b6dff..ce6e107c 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1,14 +1,6 @@
 export { SquiggleChart } from "./components/SquiggleChart";
-export {
-  SquiggleEditor,
-  SquigglePartial,
-  renderSquiggleEditorToDom,
-  renderSquigglePartialToDom,
-} from "./components/SquiggleEditor";
-export {
-  SquigglePlayground,
-  renderSquigglePlaygroundToDom,
-} from "./components/SquigglePlayground";
+export { SquiggleEditor, SquigglePartial } from "./components/SquiggleEditor";
+export { SquigglePlayground } from "./components/SquigglePlayground";
 export { SquiggleContainer } from "./components/SquiggleContainer";
 
 export { mergeBindings } from "@quri/squiggle-lang";
diff --git a/packages/components/src/lib/hooks.ts b/packages/components/src/lib/hooks.ts
index 42db01ce..03b8c69d 100644
--- a/packages/components/src/lib/hooks.ts
+++ b/packages/components/src/lib/hooks.ts
@@ -5,7 +5,7 @@ import {
   run,
   runPartial,
 } from "@quri/squiggle-lang";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo } from "react";
 
 type SquiggleArgs<T extends ReturnType<typeof run | typeof runPartial>> = {
   code: string;
@@ -19,37 +19,18 @@ const useSquiggleAny = <T extends ReturnType<typeof run | typeof runPartial>>(
   args: SquiggleArgs<T>,
   f: (...args: Parameters<typeof run>) => T
 ) => {
-  //  We're using observable, where div elements can have a `value` property:
-  // https://observablehq.com/@observablehq/introduction-to-views
-  //
-  //  This is here to get the 'viewof' part of:
-  //  viewof env = cell('normal(0,1)')
-  //  to work
-  const ref = useRef<
-    HTMLDivElement & { value?: Extract<T, { tag: "Ok" }>["value"] }
-  >(null);
   const result: T = useMemo<T>(
     () => f(args.code, args.bindings, args.environment, args.jsImports),
     [f, args.code, args.bindings, args.environment, args.jsImports]
   );
 
-  useEffect(() => {
-    if (!ref.current) return;
-    ref.current.value = result.tag === "Ok" ? result.value : undefined;
-
-    ref.current.dispatchEvent(new CustomEvent("input"));
-  }, [result]);
-
   const { onChange } = args;
 
   useEffect(() => {
     onChange?.(result.tag === "Ok" ? result.value : undefined);
   }, [result, onChange]);
 
-  return {
-    result, // squiggleExpression or externalBindings
-    observableRef: ref, // can be passed to outermost <div> if you want to use your component as an observablehq's view
-  };
+  return result;
 };
 
 export const useSquigglePartial = (
diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx
index 3ae37bb3..7e8f7e66 100644
--- a/packages/components/src/stories/SquiggleEditor.stories.mdx
+++ b/packages/components/src/stories/SquiggleEditor.stories.mdx
@@ -14,7 +14,7 @@ the distribution.
   <Story
     name="Normal"
     args={{
-      initialSquiggleString: "normal(5,2)",
+      squiggleString: "normal(5,2)",
     }}
   >
     {Template.bind({})}
@@ -27,7 +27,7 @@ You can also name variables like so:
   <Story
     name="Variables"
     args={{
-      initialSquiggleString: "x = 2\nnormal(x,2)",
+      squiggleString: "x = 2\nnormal(x,2)",
     }}
   >
     {Template.bind({})}
diff --git a/packages/components/src/stories/SquigglePartial.stories.mdx b/packages/components/src/stories/SquigglePartial.stories.mdx
index b4446402..c4f4814a 100644
--- a/packages/components/src/stories/SquigglePartial.stories.mdx
+++ b/packages/components/src/stories/SquigglePartial.stories.mdx
@@ -15,7 +15,7 @@ instead returns bindings that can be used by further Squiggle Editors.
   <Story
     name="Standalone"
     args={{
-      initialSquiggleString: "x = normal(5,2)",
+      squiggleString: "x = normal(5,2)",
     }}
   >
     {Template.bind({})}
@@ -36,12 +36,12 @@ instead returns bindings that can be used by further Squiggle Editors.
         <>
           <SquigglePartial
             {...props}
-            initialSquiggleString={props.initialPartialString}
+            squiggleString={props.initialPartialString}
             onChange={setBindings}
           />
           <SquiggleEditor
             {...props}
-            initialSquiggleString={props.initialEditorString}
+            squiggleString={props.initialEditorString}
             bindings={bindings}
           />
         </>
diff --git a/packages/website/docs/Discussions/Bugs.mdx b/packages/website/docs/Discussions/Bugs.mdx
index a39223a9..2c077eb0 100644
--- a/packages/website/docs/Discussions/Bugs.mdx
+++ b/packages/website/docs/Discussions/Bugs.mdx
@@ -16,7 +16,7 @@ If you take the pointwise mixture of two distributions with very different means
 In the following case, the mean of the mixture should be equal to the sum of the means of the parts. These are shown as the first two displayed variables. These variables diverge as the underlying distributions change.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = {value: normal(1,1), weight: 1}
+  squiggleString={`dist1 = {value: normal(1,1), weight: 1}
 dist2 = {value: normal(100000000000,1), weight: 1}
 totalWeight = dist1.weight + dist2.weight
 distMixture = mixture(dist1.value, dist2.value, [dist1.weight, dist2.weight])
@@ -30,7 +30,7 @@ separateMeansCombined = (mean(dist1.value) * (dist1.weight) +  mean(dist2.value)
 The means of sample set distributions can vary dramatically, especially as the numbers get high.
 
 <SquiggleEditor
-  initialSquiggleString={`symbolicDist = 5 to 50333333
+  squiggleString={`symbolicDist = 5 to 50333333
 sampleSetDist = toSampleSet(symbolicDist)
 [mean(symbolicDist), mean(sampleSetDist), symbolicDist, sampleSetDist]`}
 />
diff --git a/packages/website/docs/Guides/DistributionCreation.mdx b/packages/website/docs/Guides/DistributionCreation.mdx
index 5e84b47f..8ca22294 100644
--- a/packages/website/docs/Guides/DistributionCreation.mdx
+++ b/packages/website/docs/Guides/DistributionCreation.mdx
@@ -22,22 +22,22 @@ If both values are above zero, a `lognormal` distribution is used. If not, a `no
     When <code>5 to 10</code> is entered, both numbers are positive, so it
     generates a lognormal distribution with 5th and 95th percentiles at 5 and
     10.
-    <SquiggleEditor initialSquiggleString="5 to 10" />
+    <SquiggleEditor squiggleString="5 to 10" />
   </TabItem>
   <TabItem value="ex3" label="to(5,10)">
     <code>5 to 10</code> does the same thing as <code>to(5,10)</code>.
-    <SquiggleEditor initialSquiggleString="to(5,10)" />
+    <SquiggleEditor squiggleString="to(5,10)" />
   </TabItem>
   <TabItem value="ex2" label="-5 to 5">
     When <code>-5 to 5</code> is entered, there's negative values, so it
     generates a normal distribution. This has 5th and 95th percentiles at 5 and
     10.
-    <SquiggleEditor initialSquiggleString="-5 to -3" />
+    <SquiggleEditor squiggleString="-5 to -3" />
   </TabItem>
   <TabItem value="ex4" label="1 to 10000">
     It's very easy to generate distributions with very long tails. If this
     happens, you can click the "log x scale" box to view this using a log scale.
-    <SquiggleEditor initialSquiggleString="1 to 10000" />
+    <SquiggleEditor squiggleString="1 to 10000" />
   </TabItem>
 </Tabs>
 
@@ -76,16 +76,16 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
 
 <Tabs>
   <TabItem value="ex1" label="Simple" default>
-    <SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
+    <SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
   </TabItem>
   <TabItem value="ex2" label="With Weights">
-    <SquiggleEditor initialSquiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
+    <SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
   </TabItem>
   <TabItem value="ex3" label="With Continuous and Discrete Inputs">
-    <SquiggleEditor initialSquiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
+    <SquiggleEditor squiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
   </TabItem>
   <TabItem value="ex4" label="Array of Distributions Input">
-    <SquiggleEditor initialSquiggleString="mx([1 to 2, exponential(1)], [1,1])" />
+    <SquiggleEditor squiggleString="mx([1 to 2, exponential(1)], [1,1])" />
   </TabItem>
 </Tabs>
 
@@ -111,7 +111,7 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
     In this case, I have a 20% chance of spending 0 time with it. I might estimate my hours with,
   </p>
   <SquiggleEditor
-    initialSquiggleString={`hours_the_project_will_take = 5 to 20
+    squiggleString={`hours_the_project_will_take = 5 to 20
 chance_of_doing_anything = 0.8
 mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doing_anything])`}
   />
@@ -125,7 +125,7 @@ mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doin
   very wide, just in case they were dramatically off for some weird reason.
   </p>
 <SquiggleEditor
-  initialSquiggleString={`forecast = 3 to 30
+  squiggleString={`forecast = 3 to 30
 chance_completely_wrong = 0.05
 forecast_if_completely_wrong = -100 to 200
 mx(forecast, forecast_if_completely_wrong, [1-chance_completely_wrong, chance_completely_wrong])`}
@@ -141,10 +141,10 @@ Creates a [normal distribution](https://en.wikipedia.org/wiki/Normal_distributio
 
 <Tabs>
   <TabItem value="ex1" label="normal(5,1)" default>
-    <SquiggleEditor initialSquiggleString="normal(5, 1)" />
+    <SquiggleEditor squiggleString="normal(5, 1)" />
   </TabItem>
   <TabItem value="ex2" label="normal(100000000000, 100000000000)">
-    <SquiggleEditor initialSquiggleString="normal(100000000000, 100000000000)" />
+    <SquiggleEditor squiggleString="normal(100000000000, 100000000000)" />
   </TabItem>
 </Tabs>
 
@@ -165,7 +165,7 @@ Creates a [log-normal distribution](https://en.wikipedia.org/wiki/Log-normal_dis
 you take the log of our lognormal distribution. They can be difficult to directly reason about.
 Because of this complexity, we recommend typically using the <a href="#to">to</a> syntax instead of estimating `mu` and `sigma` directly.
 
-<SquiggleEditor initialSquiggleString="lognormal(0, 0.7)" />
+<SquiggleEditor squiggleString="lognormal(0, 0.7)" />
 
 ### Arguments
 
@@ -185,7 +185,7 @@ Because of this complexity, we recommend typically using the <a href="#to">to</a
     are identical:
   </p>
   <SquiggleEditor
-    initialSquiggleString={`normalMean = 10
+    squiggleString={`normalMean = 10
 normalStdDev = 2
 logOfLognormal = log(lognormal(normalMean, normalStdDev))
 [logOfLognormal, normal(normalMean, normalStdDev)]`}
@@ -198,7 +198,7 @@ logOfLognormal = log(lognormal(normalMean, normalStdDev))
 
 Creates a [uniform distribution](<https://en.wikipedia.org/wiki/Uniform_distribution_(continuous)>) with the given low and high values.
 
-<SquiggleEditor initialSquiggleString="uniform(3,7)" />
+<SquiggleEditor squiggleString="uniform(3,7)" />
 
 ### Arguments
 
@@ -236,19 +236,19 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi
 
 <Tabs>
   <TabItem value="ex1" label="pointMass(3)" default>
-    <SquiggleEditor initialSquiggleString="pointMass(3)" />
+    <SquiggleEditor squiggleString="pointMass(3)" />
   </TabItem>
   <TabItem value="ex3" label="mixture(1,3,5)">
-    <SquiggleEditor initialSquiggleString="mixture(1,3,5)" />
+    <SquiggleEditor squiggleString="mixture(1,3,5)" />
   </TabItem>
   <TabItem value="ex2" label="normal(5,2) * 6">
-    <SquiggleEditor initialSquiggleString="normal(5,2) * 6" />
+    <SquiggleEditor squiggleString="normal(5,2) * 6" />
   </TabItem>
   <TabItem value="ex4" label="dotAdd(normal(5,2), 6)">
-    <SquiggleEditor initialSquiggleString="dotAdd(normal(5,2), 6)" />
+    <SquiggleEditor squiggleString="dotAdd(normal(5,2), 6)" />
   </TabItem>
   <TabItem value="ex5" label="dotMultiply(normal(5,2), 6)">
-    <SquiggleEditor initialSquiggleString="dotMultiply(normal(5,2), 6)" />
+    <SquiggleEditor squiggleString="dotMultiply(normal(5,2), 6)" />
   </TabItem>
 </Tabs>
 
@@ -264,19 +264,19 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
 
 <Tabs>
   <TabItem value="ex1" label="beta(10, 20)" default>
-    <SquiggleEditor initialSquiggleString="beta(10,20)" />
+    <SquiggleEditor squiggleString="beta(10,20)" />
   </TabItem>
   <TabItem value="ex2" label="beta(1000, 1000)">
-    <SquiggleEditor initialSquiggleString="beta(1000, 2000)" />
+    <SquiggleEditor squiggleString="beta(1000, 2000)" />
   </TabItem>
   <TabItem value="ex3" label="beta(1, 10)">
-    <SquiggleEditor initialSquiggleString="beta(1, 10)" />
+    <SquiggleEditor squiggleString="beta(1, 10)" />
   </TabItem>
   <TabItem value="ex4" label="beta(10, 1)">
-    <SquiggleEditor initialSquiggleString="beta(10, 1)" />
+    <SquiggleEditor squiggleString="beta(10, 1)" />
   </TabItem>
   <TabItem value="ex5" label="beta(0.8, 0.8)">
-    <SquiggleEditor initialSquiggleString="beta(0.8, 0.8)" />
+    <SquiggleEditor squiggleString="beta(0.8, 0.8)" />
   </TabItem>
 </Tabs>
 
@@ -295,16 +295,16 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
     <summary>Examples</summary>
     <Tabs>
       <TabItem value="ex1" label="beta(0.3, 0.3)" default>
-        <SquiggleEditor initialSquiggleString="beta(0.3, 0.3)" />
+        <SquiggleEditor squiggleString="beta(0.3, 0.3)" />
       </TabItem>
       <TabItem value="ex2" label="beta(0.5, 0.5)">
-        <SquiggleEditor initialSquiggleString="beta(0.5, 0.5)" />
+        <SquiggleEditor squiggleString="beta(0.5, 0.5)" />
       </TabItem>
       <TabItem value="ex3" label="beta(0.8, 0.8)">
-        <SquiggleEditor initialSquiggleString="beta(.8,.8)" />
+        <SquiggleEditor squiggleString="beta(.8,.8)" />
       </TabItem>
       <TabItem value="ex4" label="beta(0.9, 0.9)">
-        <SquiggleEditor initialSquiggleString="beta(.9,.9)" />
+        <SquiggleEditor squiggleString="beta(.9,.9)" />
       </TabItem>
     </Tabs>
   </details>
@@ -316,7 +316,7 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
 
 Creates an [exponential distribution](https://en.wikipedia.org/wiki/Exponential_distribution) with the given rate.
 
-<SquiggleEditor initialSquiggleString="exponential(4)" />
+<SquiggleEditor squiggleString="exponential(4)" />
 
 ### Arguments
 
@@ -334,7 +334,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
 - `mode`: Number greater than `low`
 - `high`: Number greater than `mode`
 
-<SquiggleEditor initialSquiggleString="triangular(1, 2, 4)" />
+<SquiggleEditor squiggleString="triangular(1, 2, 4)" />
 
 ## FromSamples
 
@@ -342,7 +342,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
 
 Creates a sample set distribution using an array of samples.
 
-<SquiggleEditor initialSquiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
+<SquiggleEditor squiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
 
 ### Arguments
 
diff --git a/packages/website/docs/Guides/Functions.mdx b/packages/website/docs/Guides/Functions.mdx
index be579834..a58df345 100644
--- a/packages/website/docs/Guides/Functions.mdx
+++ b/packages/website/docs/Guides/Functions.mdx
@@ -16,7 +16,7 @@ the value of one random sample chosen from the first distribution and the value
 chosen from the second distribution.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 + dist2`}
 />
@@ -28,7 +28,7 @@ the distribution of the value of one random sample chosen from the first distrib
 the value of one random sample chosen from the second distribution.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 - dist2`}
 />
@@ -40,14 +40,14 @@ the value of one random sample chosen from the first distribution times the valu
 chosen from the second distribution.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 * dist2`}
 />
 
 We also provide concatenation of two distributions as a syntax sugar for `*`
 
-<SquiggleEditor initialSquiggleString="(0.1 to 1) triangular(1,2,3)" />
+<SquiggleEditor squiggleString="(0.1 to 1) triangular(1,2,3)" />
 
 ### Division
 
@@ -58,7 +58,7 @@ chosen from the second distribution. If the second distribution has some values
 tends to be particularly unstable.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 / dist2`}
 />
@@ -69,12 +69,12 @@ A projection over a contracted x-axis. The exponentiation operation represents t
 the exponentiation of the value of one random sample chosen from the first distribution to the power of
 the value one random sample chosen from the second distribution.
 
-<SquiggleEditor initialSquiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
+<SquiggleEditor squiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
 
 ### Taking the base `e` exponential
 
 <SquiggleEditor
-  initialSquiggleString={`dist = triangular(1,2,3)
+  squiggleString={`dist = triangular(1,2,3)
 exp(dist)`}
 />
 
@@ -83,19 +83,19 @@ exp(dist)`}
 A projection over a stretched x-axis.
 
 <SquiggleEditor
-  initialSquiggleString={`dist = triangular(1,2,3)
+  squiggleString={`dist = triangular(1,2,3)
 log(dist)`}
 />
 
 <SquiggleEditor
-  initialSquiggleString={`dist = beta(1,2)
+  squiggleString={`dist = beta(1,2)
 log10(dist)`}
 />
 
 Base `x`
 
 <SquiggleEditor
-  initialSquiggleString={`x = 2
+  squiggleString={`x = 2
 dist = beta(2,3)
 log(dist, x)`}
 />
@@ -114,7 +114,7 @@ For every point on the x-axis, operate the corresponding points in the y axis of
 TODO: this isn't in the new interpreter/parser yet.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .+ dist2`}
 />
@@ -124,7 +124,7 @@ dist1 .+ dist2`}
 TODO: this isn't in the new interpreter/parser yet.
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .- dist2`}
 />
@@ -132,7 +132,7 @@ dist1 .- dist2`}
 ### Pointwise multiplication
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .* dist2`}
 />
@@ -140,7 +140,7 @@ dist1 .* dist2`}
 ### Pointwise division
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = uniform(0,20)
+  squiggleString={`dist1 = uniform(0,20)
 dist2 = normal(10,8)
 dist1 ./ dist2`}
 />
@@ -148,7 +148,7 @@ dist1 ./ dist2`}
 ### Pointwise exponentiation
 
 <SquiggleEditor
-  initialSquiggleString={`dist1 = 1 to 10
+  squiggleString={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .^ dist2`}
 />
@@ -160,7 +160,7 @@ dist1 .^ dist2`}
 The `pdf(dist, x)` function returns the density of a distribution at the
 given point x.
 
-<SquiggleEditor initialSquiggleString="pdf(normal(0,1),0)" />
+<SquiggleEditor squiggleString="pdf(normal(0,1),0)" />
 
 #### Validity
 
@@ -172,7 +172,7 @@ given point x.
 The `cdf(dist, x)` gives the cumulative probability of the distribution
 or all values lower than x. It is the inverse of `quantile`.
 
-<SquiggleEditor initialSquiggleString="cdf(normal(0,1),0)" />
+<SquiggleEditor squiggleString="cdf(normal(0,1),0)" />
 
 #### Validity
 
@@ -185,7 +185,7 @@ The `quantile(dist, prob)` gives the value x or which the probability for all va
 lower than x is equal to prob. It is the inverse of `cdf`. In the literature, it
 is also known as the quantiles function.
 
-<SquiggleEditor initialSquiggleString="quantile(normal(0,1),0.5)" />
+<SquiggleEditor squiggleString="quantile(normal(0,1),0.5)" />
 
 #### Validity
 
@@ -196,29 +196,29 @@ is also known as the quantiles function.
 
 The `mean(distribution)` function gives the mean (expected value) of a distribution.
 
-<SquiggleEditor initialSquiggleString="mean(normal(5, 10))" />
+<SquiggleEditor squiggleString="mean(normal(5, 10))" />
 
 ### Sampling a distribution
 
 The `sample(distribution)` samples a given distribution.
 
-<SquiggleEditor initialSquiggleString="sample(normal(0, 10))" />
+<SquiggleEditor squiggleString="sample(normal(0, 10))" />
 
 ## Converting between distribution formats
 
 Recall the [three formats of distributions](https://develop--squiggle-documentation.netlify.app/docs/Discussions/Three-Types-Of-Distributions). We can force any distribution into `SampleSet` format
 
-<SquiggleEditor initialSquiggleString="toSampleSet(normal(5, 10))" />
+<SquiggleEditor squiggleString="toSampleSet(normal(5, 10))" />
 
 Or `PointSet` format
 
-<SquiggleEditor initialSquiggleString="toPointSet(normal(5, 10))" />
+<SquiggleEditor squiggleString="toPointSet(normal(5, 10))" />
 
 ### `toSampleSet` has two signatures
 
 Above, we saw the unary `toSampleSet`, which uses an internal hardcoded number of samples. If you'd like to provide the number of samples, it has a binary signature as well (floored)
 
-<SquiggleEditor initialSquiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
+<SquiggleEditor squiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
 
 #### Validity
 
@@ -230,13 +230,13 @@ Some distribution operations (like horizontal shift) return an unnormalized dist
 
 We provide a `normalize` function
 
-<SquiggleEditor initialSquiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
+<SquiggleEditor squiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
 
 #### Validity - Input to `normalize` must be a dist
 
 We provide a predicate `isNormalized`, for when we have simple control flow
 
-<SquiggleEditor initialSquiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
+<SquiggleEditor squiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
 
 #### Validity
 
@@ -246,7 +246,7 @@ We provide a predicate `isNormalized`, for when we have simple control flow
 
 You may like to debug by right clicking your browser and using the _inspect_ functionality on the webpage, and viewing the _console_ tab. Then, wrap your squiggle output with `inspect` to log an internal representation.
 
-<SquiggleEditor initialSquiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
+<SquiggleEditor squiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
 
 Save for a logging side effect, `inspect` does nothing to input and returns it.
 
@@ -254,12 +254,12 @@ Save for a logging side effect, `inspect` does nothing to input and returns it.
 
 You can cut off from the left
 
-<SquiggleEditor initialSquiggleString="truncateLeft(0.1 to 1, 0.5)" />
+<SquiggleEditor squiggleString="truncateLeft(0.1 to 1, 0.5)" />
 
 You can cut off from the right
 
-<SquiggleEditor initialSquiggleString="truncateRight(0.1 to 1, 0.5)" />
+<SquiggleEditor squiggleString="truncateRight(0.1 to 1, 0.5)" />
 
 You can cut off from both sides
 
-<SquiggleEditor initialSquiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
+<SquiggleEditor squiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
diff --git a/packages/website/docs/Guides/Language.mdx b/packages/website/docs/Guides/Language.mdx
index 4cfd9ea8..bdc58e41 100644
--- a/packages/website/docs/Guides/Language.mdx
+++ b/packages/website/docs/Guides/Language.mdx
@@ -9,22 +9,22 @@ import { SquiggleEditor } from "../../src/components/SquiggleEditor";
 
 ### Distributions
 
-<SquiggleEditor initialSquiggleString={`mixture(1 to 2, 3, [0.3, 0.7])`} />
+<SquiggleEditor squiggleString={`mixture(1 to 2, 3, [0.3, 0.7])`} />
 
 ### Numbers
 
-<SquiggleEditor initialSquiggleString="4.32" />
+<SquiggleEditor squiggleString="4.32" />
 
 ### Arrays
 
 <SquiggleEditor
-  initialSquiggleString={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
+  squiggleString={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
 />
 
 ### Records
 
 <SquiggleEditor
-  initialSquiggleString={`d = {dist: triangular(0, 1, 2), weight: 0.25}
+  squiggleString={`d = {dist: triangular(0, 1, 2), weight: 0.25}
 d.dist`}
 />
 
@@ -33,7 +33,7 @@ d.dist`}
 A statement assigns expressions to names. It looks like `<symbol> = <expression>`
 
 <SquiggleEditor
-  initialSquiggleString={`value_of_work = 10 to 70
+  squiggleString={`value_of_work = 10 to 70
 5 + value_of_work / 75`}
 />
 
@@ -42,7 +42,7 @@ A statement assigns expressions to names. It looks like `<symbol> = <expression>
 We can define functions
 
 <SquiggleEditor
-  initialSquiggleString={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
+  squiggleString={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
 nuno_estimate(t, m) = mixture(normal(-5, 1), lognormal(m, t / 1.25))
 ozzie_estimate(1) * nuno_estimate(1, 1)`}
 />
diff --git a/yarn.lock b/yarn.lock
index ae8a6f60..d7c13cbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4311,7 +4311,7 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@^18.0.0", "@types/react-dom@^18.0.5":
+"@types/react-dom@^18.0.0":
   version "18.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.5.tgz#330b2d472c22f796e5531446939eacef8378444a"
   integrity sha512-OWPWTUrY/NIrjsAPkAk1wW9LZeIjSvkXRhclsFO8CZcZGCOg2G0YZy4ft+rOyYxy8B7ui5iZzi9OkDebZ7/QSA==

From 06f86963d1fc370daf505b38166e615199ee28d5 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Fri, 24 Jun 2022 05:10:28 +0000
Subject: [PATCH 2/5] Update documentation for squiggleString

---
 packages/components/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/README.md b/packages/components/README.md
index a74ee32d..bc8d3123 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -20,7 +20,7 @@ Add to `App.js`:
 ```jsx
 import { SquiggleEditor } from "@quri/squiggle-components";
 <SquiggleEditor
-  initialSquiggleString="x = beta($alpha, 10); x + $shift"
+  squiggleString="x = beta($alpha, 10); x + $shift"
   jsImports={{ alpha: 3, shift: 20 }}
 />;
 ```

From 69aa8a8cc177477e322d483b584ff0de633a4f28 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Mon, 27 Jun 2022 07:07:09 +0000
Subject: [PATCH 3/5] Add controlled and uncontrolled versions of components

---
 .../src/components/SquiggleChart.tsx          |  6 +-
 .../src/components/SquiggleEditor.tsx         | 49 ++++++++++----
 .../src/components/SquigglePlayground.tsx     | 10 ++-
 .../src/stories/SquiggleChart.stories.mdx     | 27 ++++----
 .../src/stories/SquiggleEditor.stories.mdx    |  4 +-
 .../src/stories/SquigglePartial.stories.mdx   |  6 +-
 packages/website/docs/Discussions/Bugs.mdx    |  4 +-
 .../docs/Guides/DistributionCreation.mdx      | 64 +++++++++----------
 packages/website/docs/Guides/Functions.mdx    | 58 ++++++++---------
 packages/website/docs/Guides/Language.mdx     | 12 ++--
 packages/website/src/pages/playground.js      |  2 +-
 11 files changed, 131 insertions(+), 111 deletions(-)

diff --git a/packages/components/src/components/SquiggleChart.tsx b/packages/components/src/components/SquiggleChart.tsx
index 3e712396..9e352a62 100644
--- a/packages/components/src/components/SquiggleChart.tsx
+++ b/packages/components/src/components/SquiggleChart.tsx
@@ -14,7 +14,7 @@ import { SquiggleItem } from "./SquiggleItem";
 
 export interface SquiggleChartProps {
   /** The input string for squiggle */
-  squiggleString?: string;
+  code?: string;
   /** If the output requires monte carlo sampling, the amount of samples */
   sampleCount?: number;
   /** The amount of points returned to draw the distribution */
@@ -49,7 +49,7 @@ export interface SquiggleChartProps {
 const defaultOnChange = () => {};
 
 export const SquiggleChart: React.FC<SquiggleChartProps> = ({
-  squiggleString = "",
+  code = "",
   environment,
   onChange = defaultOnChange, // defaultOnChange must be constant, don't move its definition here
   height = 200,
@@ -66,7 +66,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
   diagramCount = 100,
 }) => {
   const result = useSquiggle({
-    code: squiggleString,
+    code,
     bindings,
     environment,
     jsImports,
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index 3d0e0db5..78aec513 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -22,27 +22,41 @@ const WrappedCodeEditor: React.FC<{
   </div>
 );
 
-export type SquiggleEditorProps = SquiggleChartProps;
+export type SquiggleEditorProps = SquiggleChartProps & {
+  defaultCode?: string;
+  onCodeChange?: (code: string) => void;
+};
 
 export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
-  const { squiggleString = "" } = props;
-  const [code, setCode] = useState(squiggleString);
-  React.useEffect(() => setCode(squiggleString), [squiggleString]);
+  let defaultCode = props.defaultCode ?? "";
+  const [uncontrolledCode, setCode] = useState(defaultCode);
+  let code = props.code ?? uncontrolledCode;
 
-  let chartProps = { ...props, squiggleString: code };
+  let chartProps = { ...props, code };
   return (
     <SquiggleContainer>
-      <WrappedCodeEditor code={code} setCode={setCode} />
+      <WrappedCodeEditor
+        code={code}
+        setCode={(code) => {
+          if (props.onCodeChange) props.onCodeChange(code);
+
+          if (props.code === undefined) setCode(code);
+        }}
+      />
       <SquiggleChart {...chartProps} />
     </SquiggleContainer>
   );
 };
 
 export interface SquigglePartialProps {
-  /** The input string for squiggle */
-  squiggleString?: string;
+  /** The text inside the input (controlled) */
+  code?: string;
+  /** The default text inside the input (unControlled) */
+  defaultCode?: string;
   /** when the environment changes. Used again for notebook magic*/
   onChange?(expr: bindings | undefined): void;
+  /** When the code changes */
+  onCodeChange?(code: string): void;
   /** Previously declared variables */
   bindings?: bindings;
   /** If the output requires monte carlo sampling, the amount of samples */
@@ -52,17 +66,19 @@ export interface SquigglePartialProps {
 }
 
 export const SquigglePartial: React.FC<SquigglePartialProps> = ({
-  squiggleString = "",
+  code,
+  defaultCode = "",
   onChange,
+  onCodeChange,
   bindings = defaultBindings,
   environment,
   jsImports = defaultImports,
 }: SquigglePartialProps) => {
-  const [code, setCode] = useState(squiggleString);
-  React.useEffect(() => setCode(squiggleString), [squiggleString]);
+  const [uncontrolledCode, setCode] = useState(defaultCode);
+  let codeProp = code ?? uncontrolledCode;
 
   const result = useSquigglePartial({
-    code,
+    code: codeProp,
     bindings,
     environment,
     jsImports,
@@ -71,7 +87,14 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
 
   return (
     <SquiggleContainer>
-      <WrappedCodeEditor code={code} setCode={setCode} />
+      <WrappedCodeEditor
+        code={codeProp}
+        setCode={(code) => {
+          if (onCodeChange) onCodeChange(code);
+
+          if (code === undefined) setCode(code);
+        }}
+      />
       {result.tag !== "Ok" ? <SquiggleErrorAlert error={result.value} /> : null}
     </SquiggleContainer>
   );
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index ce59b5a4..e96a1053 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -22,7 +22,7 @@ import { SquiggleContainer } from "./SquiggleContainer";
 
 interface PlaygroundProps {
   /** The initial squiggle string to put in the playground */
-  initialSquiggleString?: string;
+  defaultCode?: string;
   /** How many pixels high is the playground */
   height?: number;
   /** Whether to show the types of outputs in the playground */
@@ -204,7 +204,7 @@ function Checkbox<T>({
 }
 
 export const SquigglePlayground: FC<PlaygroundProps> = ({
-  initialSquiggleString = "",
+  defaultCode = "",
   height = 500,
   showTypes = false,
   showControls = false,
@@ -216,9 +216,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   onSettingsChange,
   showEditor = true,
 }) => {
-  const [uncontrolledCode, setUncontrolledCode] = useState(
-    initialSquiggleString
-  );
+  const [uncontrolledCode, setUncontrolledCode] = useState(defaultCode);
   const [importString, setImportString] = useState("{}");
   const [imports, setImports] = useState({});
   const [importsAreValid, setImportsAreValid] = useState(true);
@@ -417,7 +415,7 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
 
   const squiggleChart = (
     <SquiggleChart
-      squiggleString={code}
+      code={code}
       environment={env}
       diagramStart={Number(vars.diagramStart)}
       diagramStop={Number(vars.diagramStop)}
diff --git a/packages/components/src/stories/SquiggleChart.stories.mdx b/packages/components/src/stories/SquiggleChart.stories.mdx
index bce22c1c..2483c985 100644
--- a/packages/components/src/stories/SquiggleChart.stories.mdx
+++ b/packages/components/src/stories/SquiggleChart.stories.mdx
@@ -29,7 +29,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Continuous Symbolic"
     args={{
-      squiggleString: "normal(5,2)",
+      code: "normal(5,2)",
       width,
     }}
   >
@@ -43,7 +43,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Continuous Pointset"
     args={{
-      squiggleString: "toPointSet(normal(5,2))",
+      code: "toPointSet(normal(5,2))",
       width,
     }}
   >
@@ -57,7 +57,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Continuous SampleSet"
     args={{
-      squiggleString: "toSampleSet(normal(5,2), 1000)",
+      code: "toSampleSet(normal(5,2), 1000)",
       width,
     }}
   >
@@ -71,7 +71,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Discrete"
     args={{
-      squiggleString: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
+      code: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
       width,
     }}
   >
@@ -85,8 +85,7 @@ could be continuous, discrete or mixed.
   <Story
     name="Mixed"
     args={{
-      squiggleString:
-        "mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
+      code: "mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
       width,
     }}
   >
@@ -103,7 +102,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Constant"
     args={{
-      squiggleString: "500000000",
+      code: "500000000",
       width,
     }}
   >
@@ -117,7 +116,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Array"
     args={{
-      squiggleString: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
+      code: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
       width,
     }}
   >
@@ -131,7 +130,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Error"
     args={{
-      squiggleString: "f(x) = normal(",
+      code: "f(x) = normal(",
       width,
     }}
   >
@@ -145,7 +144,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Boolean"
     args={{
-      squiggleString: "3 == 3",
+      code: "3 == 3",
       width,
     }}
   >
@@ -159,7 +158,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Function to Distribution"
     args={{
-      squiggleString: "foo(t) = normal(t,2)*normal(5,3); foo",
+      code: "foo(t) = normal(t,2)*normal(5,3); foo",
       width,
     }}
   >
@@ -173,7 +172,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Function to Number"
     args={{
-      squiggleString: "foo(t) = t^2; foo",
+      code: "foo(t) = t^2; foo",
       width,
     }}
   >
@@ -187,7 +186,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Record"
     args={{
-      squiggleString: "{foo: 35 to 50, bar: [1,2,3]}",
+      code: "{foo: 35 to 50, bar: [1,2,3]}",
       width,
     }}
   >
@@ -201,7 +200,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="String"
     args={{
-      squiggleString: '"Lucky day!"',
+      code: '"Lucky day!"',
       width,
     }}
   >
diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx
index 7e8f7e66..e51e3e33 100644
--- a/packages/components/src/stories/SquiggleEditor.stories.mdx
+++ b/packages/components/src/stories/SquiggleEditor.stories.mdx
@@ -14,7 +14,7 @@ the distribution.
   <Story
     name="Normal"
     args={{
-      squiggleString: "normal(5,2)",
+      defaultCode: "normal(5,2)",
     }}
   >
     {Template.bind({})}
@@ -27,7 +27,7 @@ You can also name variables like so:
   <Story
     name="Variables"
     args={{
-      squiggleString: "x = 2\nnormal(x,2)",
+      defaultCode: "x = 2\nnormal(x,2)",
     }}
   >
     {Template.bind({})}
diff --git a/packages/components/src/stories/SquigglePartial.stories.mdx b/packages/components/src/stories/SquigglePartial.stories.mdx
index c4f4814a..3305586b 100644
--- a/packages/components/src/stories/SquigglePartial.stories.mdx
+++ b/packages/components/src/stories/SquigglePartial.stories.mdx
@@ -15,7 +15,7 @@ instead returns bindings that can be used by further Squiggle Editors.
   <Story
     name="Standalone"
     args={{
-      squiggleString: "x = normal(5,2)",
+      defaultCode: "x = normal(5,2)",
     }}
   >
     {Template.bind({})}
@@ -36,12 +36,12 @@ instead returns bindings that can be used by further Squiggle Editors.
         <>
           <SquigglePartial
             {...props}
-            squiggleString={props.initialPartialString}
+            defaultCode={props.initialPartialString}
             onChange={setBindings}
           />
           <SquiggleEditor
             {...props}
-            squiggleString={props.initialEditorString}
+            defaultCode={props.initialEditorString}
             bindings={bindings}
           />
         </>
diff --git a/packages/website/docs/Discussions/Bugs.mdx b/packages/website/docs/Discussions/Bugs.mdx
index 2c077eb0..db53a6f6 100644
--- a/packages/website/docs/Discussions/Bugs.mdx
+++ b/packages/website/docs/Discussions/Bugs.mdx
@@ -16,7 +16,7 @@ If you take the pointwise mixture of two distributions with very different means
 In the following case, the mean of the mixture should be equal to the sum of the means of the parts. These are shown as the first two displayed variables. These variables diverge as the underlying distributions change.
 
 <SquiggleEditor
-  squiggleString={`dist1 = {value: normal(1,1), weight: 1}
+  defaultCode={`dist1 = {value: normal(1,1), weight: 1}
 dist2 = {value: normal(100000000000,1), weight: 1}
 totalWeight = dist1.weight + dist2.weight
 distMixture = mixture(dist1.value, dist2.value, [dist1.weight, dist2.weight])
@@ -30,7 +30,7 @@ separateMeansCombined = (mean(dist1.value) * (dist1.weight) +  mean(dist2.value)
 The means of sample set distributions can vary dramatically, especially as the numbers get high.
 
 <SquiggleEditor
-  squiggleString={`symbolicDist = 5 to 50333333
+  defaultCode={`symbolicDist = 5 to 50333333
 sampleSetDist = toSampleSet(symbolicDist)
 [mean(symbolicDist), mean(sampleSetDist), symbolicDist, sampleSetDist]`}
 />
diff --git a/packages/website/docs/Guides/DistributionCreation.mdx b/packages/website/docs/Guides/DistributionCreation.mdx
index 8ca22294..7ef80d0a 100644
--- a/packages/website/docs/Guides/DistributionCreation.mdx
+++ b/packages/website/docs/Guides/DistributionCreation.mdx
@@ -22,22 +22,22 @@ If both values are above zero, a `lognormal` distribution is used. If not, a `no
     When <code>5 to 10</code> is entered, both numbers are positive, so it
     generates a lognormal distribution with 5th and 95th percentiles at 5 and
     10.
-    <SquiggleEditor squiggleString="5 to 10" />
+    <SquiggleEditor defaultCode="5 to 10" />
   </TabItem>
   <TabItem value="ex3" label="to(5,10)">
     <code>5 to 10</code> does the same thing as <code>to(5,10)</code>.
-    <SquiggleEditor squiggleString="to(5,10)" />
+    <SquiggleEditor defaultCode="to(5,10)" />
   </TabItem>
   <TabItem value="ex2" label="-5 to 5">
     When <code>-5 to 5</code> is entered, there's negative values, so it
     generates a normal distribution. This has 5th and 95th percentiles at 5 and
     10.
-    <SquiggleEditor squiggleString="-5 to -3" />
+    <SquiggleEditor defaultCode="-5 to -3" />
   </TabItem>
   <TabItem value="ex4" label="1 to 10000">
     It's very easy to generate distributions with very long tails. If this
     happens, you can click the "log x scale" box to view this using a log scale.
-    <SquiggleEditor squiggleString="1 to 10000" />
+    <SquiggleEditor defaultCode="1 to 10000" />
   </TabItem>
 </Tabs>
 
@@ -76,16 +76,16 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
 
 <Tabs>
   <TabItem value="ex1" label="Simple" default>
-    <SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10)" />
+    <SquiggleEditor defaultCode="mixture(1 to 2, 5 to 8, 9 to 10)" />
   </TabItem>
   <TabItem value="ex2" label="With Weights">
-    <SquiggleEditor squiggleString="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
+    <SquiggleEditor defaultCode="mixture(1 to 2, 5 to 8, 9 to 10, [0.1, 0.1, 0.8])" />
   </TabItem>
   <TabItem value="ex3" label="With Continuous and Discrete Inputs">
-    <SquiggleEditor squiggleString="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
+    <SquiggleEditor defaultCode="mixture(1 to 5, 8 to 10, 1, 3, 20)" />
   </TabItem>
   <TabItem value="ex4" label="Array of Distributions Input">
-    <SquiggleEditor squiggleString="mx([1 to 2, exponential(1)], [1,1])" />
+    <SquiggleEditor defaultCode="mx([1 to 2, exponential(1)], [1,1])" />
   </TabItem>
 </Tabs>
 
@@ -111,7 +111,7 @@ The `mixture` mixes combines multiple distributions to create a mixture. You can
     In this case, I have a 20% chance of spending 0 time with it. I might estimate my hours with,
   </p>
   <SquiggleEditor
-    squiggleString={`hours_the_project_will_take = 5 to 20
+    defaultCode={`hours_the_project_will_take = 5 to 20
 chance_of_doing_anything = 0.8
 mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doing_anything])`}
   />
@@ -125,7 +125,7 @@ mx(hours_the_project_will_take, 0, [chance_of_doing_anything, 1 - chance_of_doin
   very wide, just in case they were dramatically off for some weird reason.
   </p>
 <SquiggleEditor
-  squiggleString={`forecast = 3 to 30
+  defaultCode={`forecast = 3 to 30
 chance_completely_wrong = 0.05
 forecast_if_completely_wrong = -100 to 200
 mx(forecast, forecast_if_completely_wrong, [1-chance_completely_wrong, chance_completely_wrong])`}
@@ -141,10 +141,10 @@ Creates a [normal distribution](https://en.wikipedia.org/wiki/Normal_distributio
 
 <Tabs>
   <TabItem value="ex1" label="normal(5,1)" default>
-    <SquiggleEditor squiggleString="normal(5, 1)" />
+    <SquiggleEditor defaultCode="normal(5, 1)" />
   </TabItem>
   <TabItem value="ex2" label="normal(100000000000, 100000000000)">
-    <SquiggleEditor squiggleString="normal(100000000000, 100000000000)" />
+    <SquiggleEditor defaultCode="normal(100000000000, 100000000000)" />
   </TabItem>
 </Tabs>
 
@@ -165,7 +165,7 @@ Creates a [log-normal distribution](https://en.wikipedia.org/wiki/Log-normal_dis
 you take the log of our lognormal distribution. They can be difficult to directly reason about.
 Because of this complexity, we recommend typically using the <a href="#to">to</a> syntax instead of estimating `mu` and `sigma` directly.
 
-<SquiggleEditor squiggleString="lognormal(0, 0.7)" />
+<SquiggleEditor defaultCode="lognormal(0, 0.7)" />
 
 ### Arguments
 
@@ -185,7 +185,7 @@ Because of this complexity, we recommend typically using the <a href="#to">to</a
     are identical:
   </p>
   <SquiggleEditor
-    squiggleString={`normalMean = 10
+    defaultCode={`normalMean = 10
 normalStdDev = 2
 logOfLognormal = log(lognormal(normalMean, normalStdDev))
 [logOfLognormal, normal(normalMean, normalStdDev)]`}
@@ -198,7 +198,7 @@ logOfLognormal = log(lognormal(normalMean, normalStdDev))
 
 Creates a [uniform distribution](<https://en.wikipedia.org/wiki/Uniform_distribution_(continuous)>) with the given low and high values.
 
-<SquiggleEditor squiggleString="uniform(3,7)" />
+<SquiggleEditor defaultCode="uniform(3,7)" />
 
 ### Arguments
 
@@ -236,19 +236,19 @@ with values at 1 and 2. Therefore, this is the same as `mixture(pointMass(1),poi
 
 <Tabs>
   <TabItem value="ex1" label="pointMass(3)" default>
-    <SquiggleEditor squiggleString="pointMass(3)" />
+    <SquiggleEditor defaultCode="pointMass(3)" />
   </TabItem>
   <TabItem value="ex3" label="mixture(1,3,5)">
-    <SquiggleEditor squiggleString="mixture(1,3,5)" />
+    <SquiggleEditor defaultCode="mixture(1,3,5)" />
   </TabItem>
   <TabItem value="ex2" label="normal(5,2) * 6">
-    <SquiggleEditor squiggleString="normal(5,2) * 6" />
+    <SquiggleEditor defaultCode="normal(5,2) * 6" />
   </TabItem>
   <TabItem value="ex4" label="dotAdd(normal(5,2), 6)">
-    <SquiggleEditor squiggleString="dotAdd(normal(5,2), 6)" />
+    <SquiggleEditor defaultCode="dotAdd(normal(5,2), 6)" />
   </TabItem>
   <TabItem value="ex5" label="dotMultiply(normal(5,2), 6)">
-    <SquiggleEditor squiggleString="dotMultiply(normal(5,2), 6)" />
+    <SquiggleEditor defaultCode="dotMultiply(normal(5,2), 6)" />
   </TabItem>
 </Tabs>
 
@@ -264,19 +264,19 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
 
 <Tabs>
   <TabItem value="ex1" label="beta(10, 20)" default>
-    <SquiggleEditor squiggleString="beta(10,20)" />
+    <SquiggleEditor defaultCode="beta(10,20)" />
   </TabItem>
   <TabItem value="ex2" label="beta(1000, 1000)">
-    <SquiggleEditor squiggleString="beta(1000, 2000)" />
+    <SquiggleEditor defaultCode="beta(1000, 2000)" />
   </TabItem>
   <TabItem value="ex3" label="beta(1, 10)">
-    <SquiggleEditor squiggleString="beta(1, 10)" />
+    <SquiggleEditor defaultCode="beta(1, 10)" />
   </TabItem>
   <TabItem value="ex4" label="beta(10, 1)">
-    <SquiggleEditor squiggleString="beta(10, 1)" />
+    <SquiggleEditor defaultCode="beta(10, 1)" />
   </TabItem>
   <TabItem value="ex5" label="beta(0.8, 0.8)">
-    <SquiggleEditor squiggleString="beta(0.8, 0.8)" />
+    <SquiggleEditor defaultCode="beta(0.8, 0.8)" />
   </TabItem>
 </Tabs>
 
@@ -295,16 +295,16 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
     <summary>Examples</summary>
     <Tabs>
       <TabItem value="ex1" label="beta(0.3, 0.3)" default>
-        <SquiggleEditor squiggleString="beta(0.3, 0.3)" />
+        <SquiggleEditor defaultCode="beta(0.3, 0.3)" />
       </TabItem>
       <TabItem value="ex2" label="beta(0.5, 0.5)">
-        <SquiggleEditor squiggleString="beta(0.5, 0.5)" />
+        <SquiggleEditor defaultCode="beta(0.5, 0.5)" />
       </TabItem>
       <TabItem value="ex3" label="beta(0.8, 0.8)">
-        <SquiggleEditor squiggleString="beta(.8,.8)" />
+        <SquiggleEditor defaultCode="beta(.8,.8)" />
       </TabItem>
       <TabItem value="ex4" label="beta(0.9, 0.9)">
-        <SquiggleEditor squiggleString="beta(.9,.9)" />
+        <SquiggleEditor defaultCode="beta(.9,.9)" />
       </TabItem>
     </Tabs>
   </details>
@@ -316,7 +316,7 @@ Creates a [beta distribution](https://en.wikipedia.org/wiki/Beta_distribution) w
 
 Creates an [exponential distribution](https://en.wikipedia.org/wiki/Exponential_distribution) with the given rate.
 
-<SquiggleEditor squiggleString="exponential(4)" />
+<SquiggleEditor defaultCode="exponential(4)" />
 
 ### Arguments
 
@@ -334,7 +334,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
 - `mode`: Number greater than `low`
 - `high`: Number greater than `mode`
 
-<SquiggleEditor squiggleString="triangular(1, 2, 4)" />
+<SquiggleEditor defaultCode="triangular(1, 2, 4)" />
 
 ## FromSamples
 
@@ -342,7 +342,7 @@ Creates a [triangular distribution](https://en.wikipedia.org/wiki/Triangular_dis
 
 Creates a sample set distribution using an array of samples.
 
-<SquiggleEditor squiggleString="fromSamples([1,2,3,4,6,5,5,5])" />
+<SquiggleEditor defaultCode="fromSamples([1,2,3,4,6,5,5,5])" />
 
 ### Arguments
 
diff --git a/packages/website/docs/Guides/Functions.mdx b/packages/website/docs/Guides/Functions.mdx
index a58df345..a428ac7c 100644
--- a/packages/website/docs/Guides/Functions.mdx
+++ b/packages/website/docs/Guides/Functions.mdx
@@ -16,7 +16,7 @@ the value of one random sample chosen from the first distribution and the value
 chosen from the second distribution.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 + dist2`}
 />
@@ -28,7 +28,7 @@ the distribution of the value of one random sample chosen from the first distrib
 the value of one random sample chosen from the second distribution.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 - dist2`}
 />
@@ -40,14 +40,14 @@ the value of one random sample chosen from the first distribution times the valu
 chosen from the second distribution.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 * dist2`}
 />
 
 We also provide concatenation of two distributions as a syntax sugar for `*`
 
-<SquiggleEditor squiggleString="(0.1 to 1) triangular(1,2,3)" />
+<SquiggleEditor defaultCode="(0.1 to 1) triangular(1,2,3)" />
 
 ### Division
 
@@ -58,7 +58,7 @@ chosen from the second distribution. If the second distribution has some values
 tends to be particularly unstable.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 / dist2`}
 />
@@ -69,12 +69,12 @@ A projection over a contracted x-axis. The exponentiation operation represents t
 the exponentiation of the value of one random sample chosen from the first distribution to the power of
 the value one random sample chosen from the second distribution.
 
-<SquiggleEditor squiggleString={`(0.1 to 1) ^ beta(2, 3)`} />
+<SquiggleEditor defaultCode={`(0.1 to 1) ^ beta(2, 3)`} />
 
 ### Taking the base `e` exponential
 
 <SquiggleEditor
-  squiggleString={`dist = triangular(1,2,3)
+  defaultCode={`dist = triangular(1,2,3)
 exp(dist)`}
 />
 
@@ -83,19 +83,19 @@ exp(dist)`}
 A projection over a stretched x-axis.
 
 <SquiggleEditor
-  squiggleString={`dist = triangular(1,2,3)
+  defaultCode={`dist = triangular(1,2,3)
 log(dist)`}
 />
 
 <SquiggleEditor
-  squiggleString={`dist = beta(1,2)
+  defaultCode={`dist = beta(1,2)
 log10(dist)`}
 />
 
 Base `x`
 
 <SquiggleEditor
-  squiggleString={`x = 2
+  defaultCode={`x = 2
 dist = beta(2,3)
 log(dist, x)`}
 />
@@ -114,7 +114,7 @@ For every point on the x-axis, operate the corresponding points in the y axis of
 TODO: this isn't in the new interpreter/parser yet.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .+ dist2`}
 />
@@ -124,7 +124,7 @@ dist1 .+ dist2`}
 TODO: this isn't in the new interpreter/parser yet.
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .- dist2`}
 />
@@ -132,7 +132,7 @@ dist1 .- dist2`}
 ### Pointwise multiplication
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .* dist2`}
 />
@@ -140,7 +140,7 @@ dist1 .* dist2`}
 ### Pointwise division
 
 <SquiggleEditor
-  squiggleString={`dist1 = uniform(0,20)
+  defaultCode={`dist1 = uniform(0,20)
 dist2 = normal(10,8)
 dist1 ./ dist2`}
 />
@@ -148,7 +148,7 @@ dist1 ./ dist2`}
 ### Pointwise exponentiation
 
 <SquiggleEditor
-  squiggleString={`dist1 = 1 to 10
+  defaultCode={`dist1 = 1 to 10
 dist2 = triangular(1,2,3)
 dist1 .^ dist2`}
 />
@@ -160,7 +160,7 @@ dist1 .^ dist2`}
 The `pdf(dist, x)` function returns the density of a distribution at the
 given point x.
 
-<SquiggleEditor squiggleString="pdf(normal(0,1),0)" />
+<SquiggleEditor defaultCode="pdf(normal(0,1),0)" />
 
 #### Validity
 
@@ -172,7 +172,7 @@ given point x.
 The `cdf(dist, x)` gives the cumulative probability of the distribution
 or all values lower than x. It is the inverse of `quantile`.
 
-<SquiggleEditor squiggleString="cdf(normal(0,1),0)" />
+<SquiggleEditor defaultCode="cdf(normal(0,1),0)" />
 
 #### Validity
 
@@ -185,7 +185,7 @@ The `quantile(dist, prob)` gives the value x or which the probability for all va
 lower than x is equal to prob. It is the inverse of `cdf`. In the literature, it
 is also known as the quantiles function.
 
-<SquiggleEditor squiggleString="quantile(normal(0,1),0.5)" />
+<SquiggleEditor defaultCode="quantile(normal(0,1),0.5)" />
 
 #### Validity
 
@@ -196,29 +196,29 @@ is also known as the quantiles function.
 
 The `mean(distribution)` function gives the mean (expected value) of a distribution.
 
-<SquiggleEditor squiggleString="mean(normal(5, 10))" />
+<SquiggleEditor defaultCode="mean(normal(5, 10))" />
 
 ### Sampling a distribution
 
 The `sample(distribution)` samples a given distribution.
 
-<SquiggleEditor squiggleString="sample(normal(0, 10))" />
+<SquiggleEditor defaultCode="sample(normal(0, 10))" />
 
 ## Converting between distribution formats
 
 Recall the [three formats of distributions](https://develop--squiggle-documentation.netlify.app/docs/Discussions/Three-Types-Of-Distributions). We can force any distribution into `SampleSet` format
 
-<SquiggleEditor squiggleString="toSampleSet(normal(5, 10))" />
+<SquiggleEditor defaultCode="toSampleSet(normal(5, 10))" />
 
 Or `PointSet` format
 
-<SquiggleEditor squiggleString="toPointSet(normal(5, 10))" />
+<SquiggleEditor defaultCode="toPointSet(normal(5, 10))" />
 
 ### `toSampleSet` has two signatures
 
 Above, we saw the unary `toSampleSet`, which uses an internal hardcoded number of samples. If you'd like to provide the number of samples, it has a binary signature as well (floored)
 
-<SquiggleEditor squiggleString="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
+<SquiggleEditor defaultCode="[toSampleSet(0.1 to 1, 100.1), toSampleSet(0.1 to 1, 5000), toSampleSet(0.1 to 1, 20000)]" />
 
 #### Validity
 
@@ -230,13 +230,13 @@ Some distribution operations (like horizontal shift) return an unnormalized dist
 
 We provide a `normalize` function
 
-<SquiggleEditor squiggleString="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
+<SquiggleEditor defaultCode="normalize((0.1 to 1) + triangular(0.1, 1, 10))" />
 
 #### Validity - Input to `normalize` must be a dist
 
 We provide a predicate `isNormalized`, for when we have simple control flow
 
-<SquiggleEditor squiggleString="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
+<SquiggleEditor defaultCode="isNormalized((0.1 to 1) * triangular(0.1, 1, 10))" />
 
 #### Validity
 
@@ -246,7 +246,7 @@ We provide a predicate `isNormalized`, for when we have simple control flow
 
 You may like to debug by right clicking your browser and using the _inspect_ functionality on the webpage, and viewing the _console_ tab. Then, wrap your squiggle output with `inspect` to log an internal representation.
 
-<SquiggleEditor squiggleString="inspect(toSampleSet(0.1 to 1, 100))" />
+<SquiggleEditor defaultCode="inspect(toSampleSet(0.1 to 1, 100))" />
 
 Save for a logging side effect, `inspect` does nothing to input and returns it.
 
@@ -254,12 +254,12 @@ Save for a logging side effect, `inspect` does nothing to input and returns it.
 
 You can cut off from the left
 
-<SquiggleEditor squiggleString="truncateLeft(0.1 to 1, 0.5)" />
+<SquiggleEditor defaultCode="truncateLeft(0.1 to 1, 0.5)" />
 
 You can cut off from the right
 
-<SquiggleEditor squiggleString="truncateRight(0.1 to 1, 0.5)" />
+<SquiggleEditor defaultCode="truncateRight(0.1 to 1, 0.5)" />
 
 You can cut off from both sides
 
-<SquiggleEditor squiggleString="truncate(0.1 to 1, 0.5, 1.5)" />
+<SquiggleEditor defaultCode="truncate(0.1 to 1, 0.5, 1.5)" />
diff --git a/packages/website/docs/Guides/Language.mdx b/packages/website/docs/Guides/Language.mdx
index bdc58e41..2f26cdd6 100644
--- a/packages/website/docs/Guides/Language.mdx
+++ b/packages/website/docs/Guides/Language.mdx
@@ -9,22 +9,22 @@ import { SquiggleEditor } from "../../src/components/SquiggleEditor";
 
 ### Distributions
 
-<SquiggleEditor squiggleString={`mixture(1 to 2, 3, [0.3, 0.7])`} />
+<SquiggleEditor defaultCode={`mixture(1 to 2, 3, [0.3, 0.7])`} />
 
 ### Numbers
 
-<SquiggleEditor squiggleString="4.32" />
+<SquiggleEditor defaultCode="4.32" />
 
 ### Arrays
 
 <SquiggleEditor
-  squiggleString={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
+  defaultCode={`[beta(1,10), 4, isNormalized(toSampleSet(1 to 2))]`}
 />
 
 ### Records
 
 <SquiggleEditor
-  squiggleString={`d = {dist: triangular(0, 1, 2), weight: 0.25}
+  defaultCode={`d = {dist: triangular(0, 1, 2), weight: 0.25}
 d.dist`}
 />
 
@@ -33,7 +33,7 @@ d.dist`}
 A statement assigns expressions to names. It looks like `<symbol> = <expression>`
 
 <SquiggleEditor
-  squiggleString={`value_of_work = 10 to 70
+  defaultCode={`value_of_work = 10 to 70
 5 + value_of_work / 75`}
 />
 
@@ -42,7 +42,7 @@ A statement assigns expressions to names. It looks like `<symbol> = <expression>
 We can define functions
 
 <SquiggleEditor
-  squiggleString={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
+  defaultCode={`ozzie_estimate(t) = lognormal(t^(1.1), 0.5)
 nuno_estimate(t, m) = mixture(normal(-5, 1), lognormal(m, t / 1.25))
 ozzie_estimate(1) * nuno_estimate(1, 1)`}
 />
diff --git a/packages/website/src/pages/playground.js b/packages/website/src/pages/playground.js
index 48a2c90d..70904eba 100644
--- a/packages/website/src/pages/playground.js
+++ b/packages/website/src/pages/playground.js
@@ -37,7 +37,7 @@ function setHashData(data) {
 
 export default function PlaygroundPage() {
   const playgroundProps = {
-    initialSquiggleString: "normal(0,1)",
+    defaultCode: "normal(0,1)",
     height: 700,
     showTypes: true,
     ...getHashData(),

From c4d2ad922a3df2dbaf87675124fedd4e95721567 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Tue, 5 Jul 2022 17:32:02 +1000
Subject: [PATCH 4/5] Respond to PR comments

---
 packages/components/README.md                 |  4 +-
 .../src/components/SquiggleEditor.tsx         | 41 ++++++++-----------
 .../src/components/SquigglePlayground.tsx     | 19 ++++-----
 packages/components/src/lib/hooks.ts          | 22 +++++++++-
 .../src/stories/SquiggleEditor.stories.mdx    | 13 ++++++
 .../stories/SquigglePlayground.stories.mdx    |  2 +-
 6 files changed, 61 insertions(+), 40 deletions(-)

diff --git a/packages/components/README.md b/packages/components/README.md
index bc8d3123..63a98d34 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -20,7 +20,7 @@ Add to `App.js`:
 ```jsx
 import { SquiggleEditor } from "@quri/squiggle-components";
 <SquiggleEditor
-  squiggleString="x = beta($alpha, 10); x + $shift"
+  defaultCode="x = beta($alpha, 10); x + $shift"
   jsImports={{ alpha: 3, shift: 20 }}
 />;
 ```
@@ -50,7 +50,7 @@ export function DynamicSquiggleChart({ squiggleString }) {
   } else {
     return (
         <SquiggleChart
-          squiggleString={squiggleString}
+          defaultCode={squiggleString}
           width={445}
           height={200}
           showSummary={true}
diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index 78aec513..9ef2bea7 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React from "react";
 import { CodeEditor } from "./CodeEditor";
 import { environment, bindings, jsImports } from "@quri/squiggle-lang";
 import { defaultImports, defaultBindings } from "@quri/squiggle-lang";
 import { SquiggleContainer } from "./SquiggleContainer";
 import { SquiggleChart, SquiggleChartProps } from "./SquiggleChart";
-import { useSquigglePartial } from "../lib/hooks";
+import { useSquigglePartial, useMaybeControlledValue } from "../lib/hooks";
 import { SquiggleErrorAlert } from "./SquiggleErrorAlert";
 
 const WrappedCodeEditor: React.FC<{
@@ -28,21 +28,16 @@ export type SquiggleEditorProps = SquiggleChartProps & {
 };
 
 export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
-  let defaultCode = props.defaultCode ?? "";
-  const [uncontrolledCode, setCode] = useState(defaultCode);
-  let code = props.code ?? uncontrolledCode;
+  const [code, setCode] = useMaybeControlledValue({
+    value: props.code,
+    defaultValue: props.defaultCode,
+    onChange: props.onCodeChange,
+  });
 
   let chartProps = { ...props, code };
   return (
     <SquiggleContainer>
-      <WrappedCodeEditor
-        code={code}
-        setCode={(code) => {
-          if (props.onCodeChange) props.onCodeChange(code);
-
-          if (props.code === undefined) setCode(code);
-        }}
-      />
+      <WrappedCodeEditor code={code} setCode={setCode} />
       <SquiggleChart {...chartProps} />
     </SquiggleContainer>
   );
@@ -66,7 +61,7 @@ export interface SquigglePartialProps {
 }
 
 export const SquigglePartial: React.FC<SquigglePartialProps> = ({
-  code,
+  code: controlledCode,
   defaultCode = "",
   onChange,
   onCodeChange,
@@ -74,11 +69,14 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
   environment,
   jsImports = defaultImports,
 }: SquigglePartialProps) => {
-  const [uncontrolledCode, setCode] = useState(defaultCode);
-  let codeProp = code ?? uncontrolledCode;
+  const [code, setCode] = useMaybeControlledValue<string>({
+    value: controlledCode,
+    defaultValue: defaultCode,
+    onChange: onCodeChange,
+  });
 
   const result = useSquigglePartial({
-    code: codeProp,
+    code,
     bindings,
     environment,
     jsImports,
@@ -87,14 +85,7 @@ export const SquigglePartial: React.FC<SquigglePartialProps> = ({
 
   return (
     <SquiggleContainer>
-      <WrappedCodeEditor
-        code={codeProp}
-        setCode={(code) => {
-          if (onCodeChange) onCodeChange(code);
-
-          if (code === undefined) setCode(code);
-        }}
-      />
+      <WrappedCodeEditor code={code} setCode={setCode} />
       {result.tag !== "Ok" ? <SquiggleErrorAlert error={result.value} /> : null}
     </SquiggleContainer>
   );
diff --git a/packages/components/src/components/SquigglePlayground.tsx b/packages/components/src/components/SquigglePlayground.tsx
index e96a1053..4b01a344 100644
--- a/packages/components/src/components/SquigglePlayground.tsx
+++ b/packages/components/src/components/SquigglePlayground.tsx
@@ -1,6 +1,7 @@
 import React, { FC, Fragment, useState, useEffect } from "react";
 import { Path, useForm, UseFormRegister, useWatch } from "react-hook-form";
 import * as yup from "yup";
+import { useMaybeControlledValue } from "../lib/hooks";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Tab } from "@headlessui/react";
 import {
@@ -216,7 +217,11 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   onSettingsChange,
   showEditor = true,
 }) => {
-  const [uncontrolledCode, setUncontrolledCode] = useState(defaultCode);
+  const [code, setCode] = useMaybeControlledValue({
+    value: controlledCode,
+    defaultValue: defaultCode,
+    onChange: onCodeChange,
+  });
   const [importString, setImportString] = useState("{}");
   const [imports, setImports] = useState({});
   const [importsAreValid, setImportsAreValid] = useState(true);
@@ -261,8 +266,6 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
     }
   };
 
-  const code = controlledCode ?? uncontrolledCode;
-
   const samplingSettings = (
     <div className="space-y-6 p-3 max-w-xl">
       <div>
@@ -434,14 +437,8 @@ export const SquigglePlayground: FC<PlaygroundProps> = ({
   const firstTab = vars.showEditor ? (
     <div className="border border-slate-200">
       <CodeEditor
-        value={code}
-        onChange={(newCode) => {
-          if (controlledCode === undefined) {
-            // uncontrolled mode
-            setUncontrolledCode(newCode);
-          }
-          onCodeChange?.(newCode);
-        }}
+        value={code ?? ""}
+        onChange={setCode}
         oneLine={false}
         showGutter={true}
         height={height - 1}
diff --git a/packages/components/src/lib/hooks.ts b/packages/components/src/lib/hooks.ts
index 03b8c69d..b52c23be 100644
--- a/packages/components/src/lib/hooks.ts
+++ b/packages/components/src/lib/hooks.ts
@@ -5,7 +5,7 @@ import {
   run,
   runPartial,
 } from "@quri/squiggle-lang";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 type SquiggleArgs<T extends ReturnType<typeof run | typeof runPartial>> = {
   code: string;
@@ -42,3 +42,23 @@ export const useSquigglePartial = (
 export const useSquiggle = (args: SquiggleArgs<ReturnType<typeof run>>) => {
   return useSquiggleAny(args, run);
 };
+
+type ControlledValueArgs<T> = {
+  value?: T;
+  defaultValue: T;
+  onChange?: (x: T) => void;
+};
+export function useMaybeControlledValue<T>(
+  args: ControlledValueArgs<T>
+): [T, (x: T) => void] {
+  let [uncontrolledValue, setUncontrolledValue] = useState(args.defaultValue);
+  let value = args.value ?? uncontrolledValue;
+  let onChange = (newValue: T) => {
+    if (args.value === undefined) {
+      // uncontrolled mode
+      setUncontrolledValue(newValue);
+    }
+    args.onChange?.(newValue);
+  };
+  return [value, onChange];
+}
diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx
index e51e3e33..086614c6 100644
--- a/packages/components/src/stories/SquiggleEditor.stories.mdx
+++ b/packages/components/src/stories/SquiggleEditor.stories.mdx
@@ -21,6 +21,19 @@ the distribution.
   </Story>
 </Canvas>
 
+It's also possible to create a controlled version of the same component
+
+<Canvas>
+  <Story
+    name="Controlled"
+    args={{
+      code: "normal(5,2)",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
 You can also name variables like so:
 
 <Canvas>
diff --git a/packages/components/src/stories/SquigglePlayground.stories.mdx b/packages/components/src/stories/SquigglePlayground.stories.mdx
index eb39bbba..0c198f42 100644
--- a/packages/components/src/stories/SquigglePlayground.stories.mdx
+++ b/packages/components/src/stories/SquigglePlayground.stories.mdx
@@ -14,7 +14,7 @@ including sampling settings, in squiggle.
   <Story
     name="Normal"
     args={{
-      initialSquiggleString: "normal(5,2)",
+      defaultCode: "normal(5,2)",
       height: 800,
     }}
   >

From 2c2f299e466e889d81f952b0b4ad7f6112448cd5 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Tue, 5 Jul 2022 17:43:13 +1000
Subject: [PATCH 5/5] Fix build error

---
 packages/components/src/components/SquiggleEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/components/SquiggleEditor.tsx b/packages/components/src/components/SquiggleEditor.tsx
index 9ef2bea7..027eecb9 100644
--- a/packages/components/src/components/SquiggleEditor.tsx
+++ b/packages/components/src/components/SquiggleEditor.tsx
@@ -30,7 +30,7 @@ export type SquiggleEditorProps = SquiggleChartProps & {
 export const SquiggleEditor: React.FC<SquiggleEditorProps> = (props) => {
   const [code, setCode] = useMaybeControlledValue({
     value: props.code,
-    defaultValue: props.defaultCode,
+    defaultValue: props.defaultCode ?? "",
     onChange: props.onCodeChange,
   });