From f91b1e5a9f613f4a155ecac011494efad74a5364 Mon Sep 17 00:00:00 2001
From: FilsonTyler <tyler.filson@ufl.edu>
Date: Fri, 25 Jul 2025 19:24:16 -0400
Subject: [PATCH] things

---
 package-lock.json                             |  7 +-
 .../editor/views/GraphView/stores/useGraph.ts | 17 +++++
 src/features/modals/NodeModal/index.tsx       | 73 +++++++++++++++----
 3 files changed, 79 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 332e2bf29b9..cbe1240218d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4891,9 +4891,10 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz",
-      "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
diff --git a/src/features/editor/views/GraphView/stores/useGraph.ts b/src/features/editor/views/GraphView/stores/useGraph.ts
index 7f56fb1a061..99c4e2f457f 100644
--- a/src/features/editor/views/GraphView/stores/useGraph.ts
+++ b/src/features/editor/views/GraphView/stores/useGraph.ts
@@ -62,6 +62,7 @@ interface GraphActions {
   centerView: () => void;
   clearGraph: () => void;
   setZoomFactor: (zoomFactor: number) => void;
+  updateNode: (id: string, newData: any) => void;
 }
 
 const useGraph = create<Graph & GraphActions>((set, get) => ({
@@ -233,6 +234,22 @@ const useGraph = create<Graph & GraphActions>((set, get) => ({
   },
   toggleFullscreen: fullscreen => set({ fullscreen }),
   setViewPort: viewPort => set({ viewPort }),
+  
+  // Function to update a node's data
+  updateNode: (id: string, newData: any) => {
+  const nodes = get().nodes.map(node =>
+    node.id === id
+      ? { ...node, text: newData }
+      : node
+  );
+  const currentSelectedNode = get().selectedNode;
+  const selectedNode =
+    currentSelectedNode && currentSelectedNode.id === id
+      ? { ...currentSelectedNode, text: newData }
+      : currentSelectedNode;
+
+  set({ nodes, selectedNode });
+},
 }));
 
 export default useGraph;
diff --git a/src/features/modals/NodeModal/index.tsx b/src/features/modals/NodeModal/index.tsx
index 49a263a421b..8407f95f164 100644
--- a/src/features/modals/NodeModal/index.tsx
+++ b/src/features/modals/NodeModal/index.tsx
@@ -1,22 +1,38 @@
-import React from "react";
+import React, { useState } from "react";
 import type { ModalProps } from "@mantine/core";
-import { Modal, Stack, Text, ScrollArea } from "@mantine/core";
+import { Modal, Stack, Text, ScrollArea, Button, Textarea } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
 import useGraph from "../../editor/views/GraphView/stores/useGraph";
+import { Group } from "@mantine/core";
 
 const dataToString = (data: any) => {
-  const text = Array.isArray(data) ? Object.fromEntries(data) : data;
-  const replacer = (_: string, v: string) => {
-    if (typeof v === "string") return v.replaceAll('"', "");
-    return v;
-  };
-
-  return JSON.stringify(text, replacer, 2);
+  return JSON.stringify(data, null, 2);
 };
 
 export const NodeModal = ({ opened, onClose }: ModalProps) => {
-  const nodeData = useGraph(state => dataToString(state.selectedNode?.text));
-  const path = useGraph(state => state.selectedNode?.path || "");
+  const selectedNode = useGraph(state => state.selectedNode);
+  const nodeData = dataToString(selectedNode?.text);
+  const path = selectedNode?.path || "";
+
+  const [editMode, setEditMode] = useState(false);
+  const [editedData, setEditedData] = useState(nodeData);
+
+  // Optional: update editedData when nodeData changes
+  React.useEffect(() => {
+    setEditedData(nodeData);
+  }, [nodeData]);
+
+  // You may want to implement a save function that updates the node in your store
+  const saveEdit = () => {
+  if (!selectedNode) return;
+  try {
+    const parsed = JSON.parse(editedData);
+    useGraph.getState().updateNode(selectedNode.id, parsed);
+    setEditMode(false);
+  } catch (err) {
+    alert("Invalid JSON format.");
+  }
+};
 
   return (
     <Modal title="Node Content" size="auto" opened={opened} onClose={onClose} centered>
@@ -25,9 +41,36 @@ export const NodeModal = ({ opened, onClose }: ModalProps) => {
           <Text fz="xs" fw={500}>
             Content
           </Text>
-          <ScrollArea.Autosize mah={250} maw={600}>
-            <CodeHighlight code={nodeData} miw={350} maw={600} language="json" withCopyButton />
-          </ScrollArea.Autosize>
+          {editMode ? (
+            <>
+              <Textarea
+                value={editedData}
+                onChange={e => setEditedData(e.currentTarget.value)}
+                minRows={8}
+                autosize
+                maw={600}
+                miw={350}
+                styles={{ input: { fontFamily: "monospace" } }}
+              />
+              <Group gap="xs">
+  <Button size="xs" onClick={saveEdit} color="green">
+    Save
+  </Button>
+  <Button size="xs" variant="light" onClick={() => setEditMode(false)}>
+    Cancel
+  </Button>
+</Group>
+            </>
+          ) : (
+            <>
+              <ScrollArea.Autosize mah={250} maw={600}>
+                <CodeHighlight code={nodeData} miw={350} maw={600} language="json" withCopyButton />
+              </ScrollArea.Autosize>
+              <Button size="xs" mt="xs" onClick={() => setEditMode(true)}>
+                Edit
+              </Button>
+            </>
+          )}
         </Stack>
         <Text fz="xs" fw={500}>
           JSON Path
@@ -46,4 +89,4 @@ export const NodeModal = ({ opened, onClose }: ModalProps) => {
       </Stack>
     </Modal>
   );
-};
+};
\ No newline at end of file