Fix PR comments:

- change the onChange handler to return onChange rather than onBlur
- Change the vega component to a checkbox
- Create new IDs + check whether it works with multiple editors
- Multiple line squiggle editors (noticed this was an issue)
- Remove ace imports that are not used

packages/components/src/CodeEditor.tsx

@@ -1,10 +1,9 @@
+import _ from "lodash";
 import React, { FC } from "react";
 import AceEditor from "react-ace";
 
 import "ace-builds/src-noconflict/mode-golang";
 import "ace-builds/src-noconflict/theme-github";
-import "ace-builds/src-noconflict/ext-language_tools";
-import "ace-builds/src-noconflict/keybinding-vim";
 
 interface CodeEditorProps {
   value: string;
@@ -18,26 +17,30 @@ export let CodeEditor: FC<CodeEditorProps> = ({
   onChange,
   oneLine = false,
   width = 500,
-}: CodeEditorProps) => (
-  <AceEditor
-    value={value}
-    mode="golang"
-    theme="github"
-    width={width + "px"}
-    maxLines={oneLine ? 1 : 15}
-    minLines={oneLine ? 1 : 15}
-    showGutter={false}
-    highlightActiveLine={false}
-    showPrintMargin={false}
-    onChange={onChange}
-    name="UNIQUE_ID_OF_DIV"
-    editorProps={{
-      $blockScrolling: true,
-    }}
-    setOptions={{
-      enableBasicAutocompletion: false,
-      enableLiveAutocompletion: true,
-    }}
-  />
-);
+}: CodeEditorProps) => {
+  let lineCount = value.split("\n").length;
+  let id = _.uniqueId();
+  return (
+    <AceEditor
+      value={value}
+      mode="golang"
+      theme="github"
+      width={width + "px"}
+      minLines={oneLine ? lineCount : 15}
+      maxLines={oneLine ? lineCount : 15}
+      showGutter={false}
+      highlightActiveLine={false}
+      showPrintMargin={false}
+      onChange={onChange}
+      name={id}
+      editorProps={{
+        $blockScrolling: true,
+      }}
+      setOptions={{
+        enableBasicAutocompletion: false,
+        enableLiveAutocompletion: false,
+      }}
+    />
+  );
+};
 export default CodeEditor;

packages/components/src/SquiggleEditor.tsx

@@ -66,7 +66,7 @@ export let SquiggleEditor: React.FC<SquiggleEditorProps> = ({
   );
 };
 
-export function renderSquiggleEditor(props: SquiggleEditorProps) {
+export function renderSquiggleEditorToDom(props: SquiggleEditorProps) {
   let parent = document.createElement("div");
   ReactDOM.render(
     <SquiggleEditor

packages/components/src/SquigglePlayground.tsx

@@ -20,8 +20,8 @@ function FieldFloat(Props: FieldFloatProps) {
       <Input
         value={contents}
         className={Props.className ? Props.className : ""}
-        onChange={(e) => setContents(e.target.value)}
-        onBlur={() => {
+        onChange={(e) => {
+          setContents(e.target.value);
           let result = parseFloat(contents);
           if (_.isFinite(result)) {
             Props.onChange(result);
@@ -123,7 +123,7 @@ let SquigglePlayground: FC<Props> = (props) => {
   );
 };
 export default SquigglePlayground;
-export function renderSquigglePlayground(props: Props) {
+export function renderSquigglePlaygroundToDom(props: Props) {
   let parent = document.createElement("div");
   ReactDOM.render(<SquigglePlayground {...props} />, parent);
   return parent;

packages/components/src/index.ts

@@ -1,6 +1,6 @@
 export { SquiggleChart } from "./SquiggleChart";
-export { SquiggleEditor, renderSquiggleEditor } from "./SquiggleEditor";
+export { SquiggleEditor, renderSquiggleEditorToDom } from "./SquiggleEditor";
 import SquigglePlayground, {
-  renderSquigglePlayground,
+  renderSquigglePlaygroundToDom,
 } from "./SquigglePlayground";
-export { SquigglePlayground, renderSquigglePlayground };
+export { SquigglePlayground, renderSquigglePlaygroundToDom };

packages/components/src/spec-distributions.json

@@ -16,21 +16,19 @@
     {
       "name": "xscale",
       "description": "The transform of the x scale",
-      "value": 1.0,
+      "value": false,
       "bind": {
-        "input": "select",
-        "options": [0.1, 1],
-        "labels": ["log", "linear"]
+        "input": "checkbox",
+        "name": "log x scale"
       }
     },
     {
       "name": "yscale",
       "description": "The transform of the y scale",
-      "value": 1.0,
+      "value": false,
       "bind": {
-        "input": "select",
-        "options": [0.1, 1],
-        "labels": ["log", "linear"]
+        "input": "checkbox",
+        "name": "log y scale"
       }
     }
   ],
@@ -39,7 +37,7 @@
     {
       "name": "xscale",
       "type": "pow",
-      "exponent": { "signal": "xscale" },
+      "exponent": { "signal": "xscale ? 0.1 : 1" },
       "range": "width",
       "zero": false,
       "nice": false,
@@ -53,7 +51,7 @@
     {
       "name": "yscale",
       "type": "pow",
-      "exponent": { "signal": "yscale" },
+      "exponent": { "signal": "yscale ? 0.1 : 1" },
       "range": "height",
       "nice": true,
       "zero": true,

packages/components/src/stories/SquiggleEditor.stories.mdx

@@ -20,3 +20,16 @@ the distribution.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+You can also name variables like so:
+
+<Canvas>
+  <Story
+    name="Variables"
+    args={{
+      initialSquiggleString: "x = 2\nnormal(x,2)",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>