feat: Get working prototype

Only required figuring out the bindings!

components/dynamicSquiggleChart.js

@@ -30,23 +30,26 @@ export function DynamicSquiggleChart({ element, stopShowing }) {
     let usefulElement = {
       name: element.id,
       squiggleString: element.fn,
-      formula: element.formula
+      binding: element.binding || null
     };
+    console.log(element.binding)
+    // alert(usefulElement.squiggleString)
     return (
       <div className="">
         <h3 className="text-2xl font-bold mb-5">{usefulElement.name}</h3>
         <textarea
-          value={JSON.stringify(usefulElement, null, 4)}
+          value={usefulElement.squiggleString}
           //onChange={handleChange}
           disabled={true}
-          rows={JSON.stringify(usefulElement, null, 4).split("\n").length}
+          rows={5} // could compute from usefulElement.squiggleString
-          cols={37}
+          cols={30}
-          className="text-left text-gray-600 bg-white rounded text-normal p-6  border-0 shadow outline-none focus:outline-none focus:ring mb-4"
+          className="text-left text-gray-600 bg-white rounded text-normal p-8 m-8 border-0 shadow outline-none focus:outline-none focus:ring"
         />
         <SquiggleChart
-          squiggleString={element.squiggleString}
+          squiggleString={usefulElement.squiggleString}
           width={500}
           height={200}
+          bindings={usefulElement.binding}
           showSummary={true}
           showTypes={true}
         />

components/dynamicSquiggleChartPartial.js

@@ -1,75 +0,0 @@
-import React from "react";
-// import { SquiggleChart } from "@quri/squiggle-components";
-
-import dynamic from "next/dynamic";
-
-const SquiggleChart = dynamic(
-  () => import("@quri/squiggle-components").then((mod) => mod.SquiggleChart),
-  {
-    loading: () => <p>Loading...</p>,
-    ssr: false,
-  }
-);
-/*
-const SquiggleChart = dynamic(
-  () => import("@quri/squiggle-components").then((mod) => mod.SquiggleChart),
-  {
-    suspense: true,
-    ssr: false,
-  }
-);
-*/
-
-const effectButtonStyle =
-  "bg-transparent m-2 hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5";
-
-export function DynamicSquiggleChart({ element, stopShowing }) {
-  if (element == null) {
-    return "";
-  } else {
-    let usefulElement = {
-      name: element.id,
-      squiggleString: element.fn,
-      formula: element.formula
-    };
-    return (
-      <div className="">
-        <h3 className="text-2xl font-bold mb-5">{usefulElement.name}</h3>
-        <textarea
-          value={JSON.stringify(usefulElement, null, 4)}
-          //onChange={handleChange}
-          disabled={true}
-          rows={JSON.stringify(usefulElement, null, 4).split("\n").length}
-          cols={37}
-          className="text-left text-gray-600 bg-white rounded text-normal p-6  border-0 shadow outline-none focus:outline-none focus:ring mb-4"
-        />
-        <SquiggleChart
-          squiggleString={element.squiggleString}
-          width={500}
-          height={200}
-          showSummary={true}
-          showTypes={true}
-        />
-        {/*
-            SquiggleChart props:
-            squiggleString?: string;
-            sampleCount?: number;
-            environment?: environment;
-            chartSettings?: FunctionChartSettings;
-            onChange?(expr: squiggleExpression): void;
-            width?: number;
-            height?: number;
-            bindings?: bindings;
-            jsImports?: jsImports;
-            showSummary?: boolean;
-            showTypes?: boolean;
-            showControls?: boolean;
-        */}
-
-        <button className={effectButtonStyle} onClick={() => stopShowing()}>
-          Hide chart
-        </button>
-      </div>
-    );
-  }
-}

components/graph/createGraph.js

@@ -101,7 +101,8 @@ ${parentName}`;
         tag: 'Ok',
         id: parentName,
         value: parentValue.value,
-        fn: fn
+        fn: fn,
+        binding: parentBinding
     })
 
     nodes.push(resultNode)
@@ -125,13 +126,10 @@ export function createGraph() {
                     hours: `4 to 12`,
                     efficiency: `0.1 to 10`,
                 },
-                fn: `
+                fn: `hours * efficiency`,
-                hours * efficiency
-                `,
             },
         },
-        fn: `
+        fn: `x = 1 to 10
-        x = 1 to 10
 r = productivity * (1 to 10) * x
 mean(r)`,
     };
@@ -158,100 +156,3 @@ export function createGraph() {
     // Then the rest should be doable without all that much work.
     // Some duplication of efforts, but I don't really care:
 }
-
-export function createGraph0() {
-    let nodeElements = [
-        {
-            data: {
-                id: "Total utility",
-                squiggleString: "1 to 1000",
-                formula: "now + soon + later"
-            }
-        },
-        {
-            data: {
-                id: "now",
-                squiggleString: "1 to 2",
-                formula: "subjective estimation"
-            },
-        },
-        {
-            data: {
-                id: "soon",
-                squiggleString: "10 to 200",
-                formula: "subjective estimation"
-            },
-        },
-        {
-            data: {
-                id: "later",
-                squiggleString: "1 to 500",
-                formula: "subjective estimation"
-            },
-        },
-        {
-            data: {
-                id: "discount rate",
-                squiggleString: "0.001 to 0.03",
-                formula: "subjective estimation"
-            },
-        },
-        {
-            data: {
-                id: "return rate",
-                squiggleString: "1 to 2"
-            }
-        },
-    ]
-    let edgeElements = [
-        {
-            data: {
-                id: "link-1",
-                source: "now",
-                target: "Total utility",
-            },
-        },
-        {
-            data: {
-                id: "link-2",
-                source: "soon",
-                target: "Total utility",
-            },
-        },
-        {
-            data: {
-                id: "link-3",
-                source: "later",
-                target: "Total utility",
-            },
-        },
-        {
-            data: {
-                id: "link-4",
-                source: "discount rate",
-                target: "later",
-            },
-        },
-        {
-            data: {
-                id: "link-5",
-                source: "return rate",
-                target: "later",
-            }
-        },
-    ]
-
-    // 
-
-    let squiggleInJs = ({
-
-        displayName: "Total utility",
-        varName: "utility",
-        inputs: {
-
-        },
-        fn: ``
-    })
-    //
-    return { nodeElements, edgeElements }
-}