tweak: Add debouncing for squiggle editor/playground

The lack of it was getting pretty annoying

packages/components/src/components/SquiggleEditor.tsx

@@ -57,18 +57,32 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
   showControls = false,
   showSummary = false,
 }: SquiggleEditorProps) => {
-  const [expression, setExpression] = React.useState(initialSquiggleString);
+  const [editorExpression, setEditorExpression] = React.useState(
+    initialSquiggleString
+  );
+  const [intoSquiggleExpression, setIntoSquiggleExpression] = React.useState(
+    initialSquiggleString
+  );
+  const [intoSquiggleTimeout, setIntoSquiggleTimeout] = React.useState(null);
   const chartSettings = {
     start: diagramStart,
     stop: diagramStop,
     count: diagramCount,
   };
+  const setEditorExpressionAndFeedIntoSquiggleWithDebouncing = (value) => {
+    setEditorExpression(value);
+    clearTimeout(intoSquiggleTimeout);
+    const newTimeout = setTimeout(() => {
+      setIntoSquiggleExpression(value);
+    }, 500);
+    setIntoSquiggleTimeout(newTimeout);
+  };
   return (
     <div>
       <div className="border border-grey-200 p-2 m-4">
         <CodeEditor
-          value={expression}
+          value={editorExpression}
-          onChange={setExpression}
+          onChange={setEditorExpressionAndFeedIntoSquiggleWithDebouncing}
           oneLine={true}
           showGutter={false}
           height={20}
@@ -77,7 +91,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
       <SquiggleChart
         width={width}
         environment={environment}
-        squiggleString={expression}
+        squiggleString={intoSquiggleExpression}
         chartSettings={chartSettings}
         onChange={onChange}
         bindings={bindings}

packages/components/src/components/SquigglePlayground.tsx

@@ -200,7 +200,13 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
   showControls = false,
   showSummary = false,
 }) => {
-  const [squiggleString, setSquiggleString] = useState(initialSquiggleString);
+  const [editorExpression, setEditorExpression] = React.useState(
+    initialSquiggleString
+  );
+  const [intoSquiggleExpression, setIntoSquiggleExpression] = React.useState(
+    initialSquiggleString
+  );
+  const [intoSquiggleTimeout, setIntoSquiggleTimeout] = React.useState(null);
   const [importString, setImportString] = useState("{}");
   const [imports, setImports] = useState({});
   const [importsAreValid, setImportsAreValid] = useState(true);
@@ -232,6 +238,14 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
     sampleCount: Number(vars.sampleCount),
     xyPointLength: Number(vars.xyPointLength),
   };
+  const setEditorExpressionAndFeedIntoSquiggleWithDebouncing = (value) => {
+    setEditorExpression(value);
+    clearTimeout(intoSquiggleTimeout);
+    const newTimeout = setTimeout(() => {
+      setIntoSquiggleExpression(value);
+    }, 500);
+    setIntoSquiggleTimeout(newTimeout);
+  };
   const getChangeJson = (r: string) => {
     setImportString(r);
     try {
@@ -393,8 +407,10 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
             <Tab.Panel>
               <div className="border border-slate-200">
                 <CodeEditor
-                  value={squiggleString}
+                  value={editorExpression}
-                  onChange={setSquiggleString}
+                  onChange={
+                    setEditorExpressionAndFeedIntoSquiggleWithDebouncing
+                  }
                   oneLine={false}
                   showGutter={true}
                   height={height - 1}
@@ -410,7 +426,7 @@ const SquigglePlayground: FC<PlaygroundProps> = ({
         <div className="w-1/2 p-2 pl-4">
           <div style={{ maxHeight: height }}>
             <SquiggleChart
-              squiggleString={squiggleString}
+              squiggleString={intoSquiggleExpression}
               environment={env}
               chartSettings={chartSettings}
               height={vars.chartHeight}