From 125f6097e9c177f3dcd5689ab8605cc694f93658 Mon Sep 17 00:00:00 2001
From: Sam Nolan <samnolan555@gmail.com>
Date: Fri, 18 Mar 2022 14:29:40 +1100
Subject: [PATCH] Add Squiggle Editor

---
 packages/components/src/SquiggleChart.tsx     |  8 +--
 packages/components/src/SquiggleEditor.tsx    | 71 +++++++++++++++++++
 packages/components/src/index.ts              |  1 +
 .../src/stories/SquiggleEditor.stories.mdx    | 26 +++++++
 4 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/src/SquiggleEditor.tsx
 create mode 100644 packages/components/src/stories/SquiggleEditor.stories.mdx

diff --git a/packages/components/src/SquiggleChart.tsx b/packages/components/src/SquiggleChart.tsx
index 277e55c5..7f95dd70 100644
--- a/packages/components/src/SquiggleChart.tsx
+++ b/packages/components/src/SquiggleChart.tsx
@@ -1,8 +1,8 @@
 import * as React  from 'react';
-import * as _ from 'lodash';
+import _ from 'lodash';
 import type { Spec } from 'vega';
-import { run } from '@squiggle/lang';
-import type { DistPlus, SamplingInputs } from '@squiggle/lang';
+import { run } from '@quri/squiggle-lang';
+import type { DistPlus, SamplingInputs } from '@quri/squiggle-lang';
 import { createClassFromSpec } from 'react-vega';
 import * as chartSpecification from './spec-distributions.json'
 import * as percentilesSpec from './spec-pertentiles.json'
@@ -39,10 +39,8 @@ export const SquiggleChart : React.FC<SquiggleChartProps> = props => {
  
 
   let result = run(props.squiggleString, samplingInputs);
-  console.log(result)
   if (result.tag === "Ok") {
     let chartResults = result.value.map(chartResult => {
-      console.log(chartResult)
       if(chartResult["NAME"] === "Float"){
         return <MakeNumberShower precision={3} number={chartResult["VAL"]} />;
       }
diff --git a/packages/components/src/SquiggleEditor.tsx b/packages/components/src/SquiggleEditor.tsx
new file mode 100644
index 00000000..6bd6e42c
--- /dev/null
+++ b/packages/components/src/SquiggleEditor.tsx
@@ -0,0 +1,71 @@
+import * as React  from 'react';
+import * as ReactDOM  from 'react-dom';
+import { SquiggleChart } from './SquiggleChart'
+import { ReactCodeJar } from "react-codejar";
+
+
+export interface SquiggleEditorProps {
+  /** The input string for squiggle */
+  initialSquiggleString : string,
+  
+  /** If the output requires monte carlo sampling, the amount of samples */
+  sampleCount? : number,
+  /** The amount of points returned to draw the distribution */
+  outputXYPoints? : number,
+  kernelWidth? : number,
+  pointDistLength? : 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
+}
+
+const highlight = (editor: HTMLInputElement) => {
+  let code = editor.textContent;
+  code = code.replace(/\((\w+?)(\b)/g, '(<font color="#8a2be2">$1</font>$2');
+  editor.innerHTML = code;
+};
+
+export const SquiggleEditor : React.FC<SquiggleEditorProps> = props => {
+  let [expression, setExpression] = React.useState(props.initialSquiggleString)
+  return (
+   <div>
+    <ReactCodeJar 
+      code={expression} 
+      onUpdate={setExpression}
+      style={{
+    borderRadius: "6px",
+    width: "530px",
+    border: "1px solid grey",
+    fontFamily: "'Source Code Pro', monospace",
+    fontSize: "14px",
+    fontWeight: "400",
+    letterSpacing: "normal",
+    lineHeight: "20px",
+    padding: "10px",
+    tabSize: "4"
+}}
+      highlight={highlight}
+      lineNumbers={false}
+      /> 
+    <SquiggleChart 
+      squiggleString={expression}
+      sampleCount={props.sampleCount}
+      outputXYPoints={props.outputXYPoints}
+      kernelWidth={props.kernelWidth}
+      pointDistLength={props.pointDistLength}
+      diagramStart={props.diagramStart}
+      diagramStop={props.diagramStop}
+      diagramCount={props.diagramCount}
+      />
+  </div>
+  )
+}
+
+export function renderSquiggleEditor(props : SquiggleEditorProps) {
+  let parent = document.createElement("div")
+  ReactDOM.render(<SquiggleEditor {...props} /> , parent)
+  return parent
+}
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 5c7c48df..16ded094 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -1 +1,2 @@
 export { SquiggleChart } from './SquiggleChart';
+export { SquiggleEditor, renderSquiggleEditor } from './SquiggleEditor';
diff --git a/packages/components/src/stories/SquiggleEditor.stories.mdx b/packages/components/src/stories/SquiggleEditor.stories.mdx
new file mode 100644
index 00000000..35e129b3
--- /dev/null
+++ b/packages/components/src/stories/SquiggleEditor.stories.mdx
@@ -0,0 +1,26 @@
+import { SquiggleEditor } from '../SquiggleEditor'
+import { Canvas, Meta, Story, Props } from '@storybook/addon-docs';
+
+<Meta title="Squiggle/SquiggleEditor" component={ SquiggleEditor } />
+
+export const Template = SquiggleEditor
+
+# Squiggle Editor
+
+A Squiggle editor is simply a squiggle chart with a text editor rendered before
+it that allows the user to change the expression that is getting rendered.
+
+## Usage
+
+An example of a normal distribution is:
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      initialSquiggleString: "normal(5,2)"
+    }}> 
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Props of={SquiggleEditor} />