From 1290d5639706ea7ad4e82221627046e31fad7ae6 Mon Sep 17 00:00:00 2001
From: Sylvia Crowe <software@oneirocosm.com>
Date: Tue, 14 May 2024 16:53:56 -0700
Subject: [PATCH] feat: allow user-supplied function to run plot

This allows user to customize their plot as desired. It does not allow
arbitrary data to be used yet.
---
 frontend/app/block/plotblock.less |  0
 frontend/app/block/plotblock.tsx  | 34 +++++++++++++++++++++++--------
 package.json                      |  3 ++-
 3 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 frontend/app/block/plotblock.less

diff --git a/frontend/app/block/plotblock.less b/frontend/app/block/plotblock.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/frontend/app/block/plotblock.tsx b/frontend/app/block/plotblock.tsx
index 4efdfd852..671ee5113 100644
--- a/frontend/app/block/plotblock.tsx
+++ b/frontend/app/block/plotblock.tsx
@@ -12,6 +12,7 @@ function PlotConfig() {
 
 function PlotBlock() {
     const containerRef = React.useRef<HTMLInputElement>();
+    const [plotDef, setPlotDef] = React.useState<string>();
     const [data, setData] = React.useState();
 
     React.useEffect(() => {
@@ -19,11 +20,9 @@ function PlotBlock() {
     }, []);
 
     React.useEffect(() => {
-        if (data === undefined) {
-            return;
-        }
         // replace start
-        const plot = Plot.plot({
+        /*
+        return Plot.plot({
             aspectRatio: 1,
             x: { label: "Age (years)" },
             y: {
@@ -45,18 +44,37 @@ function PlotBlock() {
                 Plot.ruleY([0]),
             ],
         });
+        */
         // replace end
-        containerRef.current.append(plot);
+        let plot;
+        let plotErr;
+        try {
+            console.log(plotDef);
+            plot = new Function("Plot", "data", plotDef)(Plot, data);
+        } catch (e) {
+            plotErr = e;
+            console.log("error: ", e);
+            return;
+        }
+        console.log(plot);
+
+        if (plot !== undefined) {
+            containerRef.current.append(plot);
+        } else {
+            // todo
+        }
 
         return () => {
-            plot.remove();
+            if (plot !== undefined) {
+                plot.remove();
+            }
         };
-    }, [data]);
+    }, [data, plotDef]);
 
     return (
         <div className="plot-block">
             <div className="plot-window" ref={containerRef} />
-            <PlotConfig />
+            <input type="text" className="plot-config" onChange={(e) => setPlotDef(e.target.value)} />
         </div>
     );
 }
diff --git a/package.json b/package.json
index c4a410a0c..caf31073b 100644
--- a/package.json
+++ b/package.json
@@ -31,5 +31,6 @@
     "remark-gfm": "^4.0.0",
     "rxjs": "^7.8.1",
     "uuid": "^9.0.1"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }