From e54f134770d3d8c51fb5ecdd305ce6283050cfc7 Mon Sep 17 00:00:00 2001
From: Sylvia Crowe <software@oneirocosm.com>
Date: Thu, 16 May 2024 13:42:49 -0700
Subject: [PATCH] feat: restore unmodified plot on cancel

---
 frontend/app/view/plotview.less |  1 +
 frontend/app/view/plotview.tsx  | 24 +++++++++++++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/app/view/plotview.less b/frontend/app/view/plotview.less
index 96801a3c8..3bcfd5423 100644
--- a/frontend/app/view/plotview.less
+++ b/frontend/app/view/plotview.less
@@ -14,5 +14,6 @@
         height: auto;
         background-color: var(--panel-bg-color);
         color: var(--main-text-color);
+        font: var(--fixed-font);
     }
 }
diff --git a/frontend/app/view/plotview.tsx b/frontend/app/view/plotview.tsx
index 06ad2ff5f..e6ea95ef7 100644
--- a/frontend/app/view/plotview.tsx
+++ b/frontend/app/view/plotview.tsx
@@ -31,7 +31,6 @@ function evalAsync(Plot: any, d3: any, funcText: string): Promise<unknown> {
 function PlotView() {
     const containerRef = React.useRef<HTMLInputElement>();
     const [plotDef, setPlotDef] = React.useState<string>();
-    const [tempDef, setTempDef] = React.useState<string>();
     const [savedDef, setSavedDef] = React.useState<string>();
     const [modalUp, setModalUp] = React.useState(false);
     /*
@@ -97,22 +96,33 @@ function PlotView() {
         };
     }, [plotDef]);
 
+    const handleOpen = React.useCallback(() => {
+        setSavedDef(plotDef);
+        setModalUp(true);
+    }, []);
+
+    const handleCancel = React.useCallback(() => {
+        setPlotDef(savedDef);
+        setModalUp(false);
+    }, []);
+
+    const handleSave = React.useCallback(() => {
+        setModalUp(false);
+    }, []);
+
     return (
         <div className="plot-view">
-            <Button onClick={() => setModalUp(true)}>Edit</Button>
+            <Button onClick={handleOpen}>Edit</Button>
             <div className="plot-window" ref={containerRef} />
             {modalUp && (
-                <WaveModal
-                    title="Plot Definition"
-                    onCancel={() => setModalUp(false)}
-                    onSubmit={() => setModalUp(false)}
-                >
+                <WaveModal title="Plot Definition" onCancel={handleCancel} onSubmit={handleSave} buttonLabel={"Save"}>
                     <textarea
                         className="plot-config"
                         rows={5}
                         onChange={(e) => setPlotDef(e.target.value)}
                         spellCheck={false}
                         defaultValue={plotDef}
+                        wrap={"off"}
                     />
                 </WaveModal>
             )}