From 4b5992bcc121c784a90e053445ec3faa7e69b09a Mon Sep 17 00:00:00 2001
From: briannavo <briannavo2016@gmail.com>
Date: Sun, 16 Nov 2025 13:05:46 -0500
Subject: [PATCH] added edit feature to nodes, with save/cancel ability

---
 src/features/modals/NodeEditModal/index.tsx | 210 ++++++++++++++++++
 src/features/modals/NodeModal/index.tsx     | 225 +++++++++++++++++---
 2 files changed, 410 insertions(+), 25 deletions(-)
 create mode 100644 src/features/modals/NodeEditModal/index.tsx

diff --git a/src/features/modals/NodeEditModal/index.tsx b/src/features/modals/NodeEditModal/index.tsx
new file mode 100644
index 00000000000..96e5d0ddabe
--- /dev/null
+++ b/src/features/modals/NodeEditModal/index.tsx
@@ -0,0 +1,210 @@
+import React from "react";
+import type { ModalProps } from "@mantine/core";
+import { Modal, Stack, Text, Flex, CloseButton, Button, Group, TextInput, Textarea } from "@mantine/core";
+import { toast } from "react-hot-toast";
+import type { NodeData } from "../../../types/graph";
+import useGraph from "../../editor/views/GraphView/stores/useGraph";
+import useJson from "../../../store/useJson";
+import useFile from "../../../store/useFile";
+
+export const NodeEditModal = ({ opened, onClose }: ModalProps) => {
+  const nodeData = useGraph(state => state.selectedNode);
+  const setJson = useJson(state => state.setJson);
+  const setContents = useFile(state => state.setContents);
+  const currentJson = useJson(state => state.json);
+  
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editValues, setEditValues] = React.useState<Record<string, any>>({});
+  const [originalValues, setOriginalValues] = React.useState<Record<string, any>>({});
+
+  React.useEffect(() => {
+    if (opened && nodeData) {
+      const values: Record<string, any> = {};
+      nodeData.text.forEach(row => {
+        if (row.type !== "array" && row.type !== "object" && row.key) {
+          values[row.key] = row.value;
+        }
+      });
+      setEditValues(values);
+      setOriginalValues(JSON.parse(JSON.stringify(values)));
+    }
+  }, [opened, nodeData]);
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditValues(JSON.parse(JSON.stringify(originalValues)));
+  };
+
+  const handleSave = () => {
+    try {
+      const jsonObj = JSON.parse(currentJson);
+      const path = nodeData?.path;
+
+      if (!path) {
+        toast.error("Cannot edit root node");
+        return;
+      }
+
+      // Navigate through the path to find the target object
+      let current = jsonObj;
+      for (let i = 0; i < path.length; i++) {
+        if (i === path.length - 1) {
+          // At the last segment - update the properties
+          if (typeof current === "object" && current !== null) {
+            Object.entries(editValues).forEach(([key, value]) => {
+              current[key] = value;
+            });
+          }
+        } else {
+          current = current[path[i]];
+        }
+      }
+
+      // Update the stores
+      const updatedJson = JSON.stringify(jsonObj, null, 2);
+      setJson(updatedJson);
+      setContents({ contents: updatedJson, hasChanges: true, skipUpdate: false });
+
+      setIsEditing(false);
+      setOriginalValues(JSON.parse(JSON.stringify(editValues)));
+      toast.success("Node updated successfully");
+    } catch (error) {
+      console.error("Error saving changes:", error);
+      toast.error("Failed to save changes");
+    }
+  };
+
+  const handleValueChange = (key: string, value: string) => {
+    try {
+      // Try to parse as JSON if it looks like JSON
+      let parsedValue: any = value;
+      if (value === "true") parsedValue = true;
+      else if (value === "false") parsedValue = false;
+      else if (value === "null") parsedValue = null;
+      else if (!isNaN(Number(value)) && value !== "") parsedValue = Number(value);
+      
+      setEditValues(prev => ({
+        ...prev,
+        [key]: parsedValue,
+      }));
+    } catch {
+      setEditValues(prev => ({
+        ...prev,
+        [key]: value,
+      }));
+    }
+  };
+
+  return (
+    <Modal
+      size="auto"
+      opened={opened}
+      onClose={onClose}
+      centered
+      withCloseButton={false}
+      title={isEditing ? "Edit Node" : "Node Details"}
+    >
+      <Stack pb="sm" gap="md">
+        <Flex justify="space-between" align="center">
+          <Text fz="sm" fw={500}>
+            {isEditing ? "Edit the node values below:" : "View or edit node information:"}
+          </Text>
+          <CloseButton onClick={onClose} />
+        </Flex>
+
+        {!isEditing && nodeData && (
+          <Stack gap="sm">
+            {nodeData.text.map((row, index) => {
+              if (row.type === "object") {
+                return (
+                  <div key={index}>
+                    <Text fz="xs" c="dimmed">
+                      {row.key}
+                    </Text>
+                    <Text fz="sm" fw={500}>
+                      {`{${row.childrenCount ?? 0} keys}`}
+                    </Text>
+                  </div>
+                );
+              }
+              if (row.type === "array") {
+                return (
+                  <div key={index}>
+                    <Text fz="xs" c="dimmed">
+                      {row.key}
+                    </Text>
+                    <Text fz="sm" fw={500}>
+                      {`[${row.childrenCount ?? 0} items]`}
+                    </Text>
+                  </div>
+                );
+              }
+              return (
+                <div key={index}>
+                  <Text fz="xs" c="dimmed">
+                    {row.key}
+                  </Text>
+                  <Text fz="sm" fw={500}>
+                    {String(row.value)}
+                  </Text>
+                </div>
+              );
+            })}
+          </Stack>
+        )}
+
+        {isEditing && (
+          <Stack gap="sm">
+            {Object.entries(editValues).map(([key, value]) => (
+              <div key={key}>
+                <Text fz="xs" fw={500} mb="4">
+                  {key}
+                </Text>
+                {typeof value === "string" && value.length > 100 ? (
+                  <Textarea
+                    value={String(value)}
+                    onChange={e => handleValueChange(key, e.currentTarget.value)}
+                    placeholder="Enter value"
+                    minRows={3}
+                  />
+                ) : (
+                  <TextInput
+                    value={String(value)}
+                    onChange={e => handleValueChange(key, e.currentTarget.value)}
+                    placeholder="Enter value"
+                  />
+                )}
+              </div>
+            ))}
+          </Stack>
+        )}
+
+        <Group justify="flex-end" mt="md">
+          {!isEditing ? (
+            <>
+              <Button variant="default" onClick={onClose}>
+                Close
+              </Button>
+              <Button onClick={handleEdit}>
+                Edit
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button variant="default" onClick={handleCancel}>
+                Cancel
+              </Button>
+              <Button onClick={handleSave} color="green">
+                Save
+              </Button>
+            </>
+          )}
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};
diff --git a/src/features/modals/NodeModal/index.tsx b/src/features/modals/NodeModal/index.tsx
index caba85febac..d4ab9871280 100644
--- a/src/features/modals/NodeModal/index.tsx
+++ b/src/features/modals/NodeModal/index.tsx
@@ -1,9 +1,13 @@
 import React from "react";
 import type { ModalProps } from "@mantine/core";
-import { Modal, Stack, Text, ScrollArea, Flex, CloseButton } from "@mantine/core";
+import { Modal, Stack, Text, ScrollArea, Flex, CloseButton, Button, Group, TextInput, Textarea } from "@mantine/core";
 import { CodeHighlight } from "@mantine/code-highlight";
+import { toast } from "react-hot-toast";
 import type { NodeData } from "../../../types/graph";
 import useGraph from "../../editor/views/GraphView/stores/useGraph";
+import { useModal } from "../../../store/useModal";
+import useJson from "../../../store/useJson";
+import useFile from "../../../store/useFile";
 
 // return object from json removing array and object fields
 const normalizeNodeData = (nodeRows: NodeData["text"]) => {
@@ -28,6 +32,121 @@ const jsonPathToString = (path?: NodeData["path"]) => {
 
 export const NodeModal = ({ opened, onClose }: ModalProps) => {
   const nodeData = useGraph(state => state.selectedNode);
+  const setSelectedNode = useGraph(state => state.setSelectedNode);
+  const setJson = useJson(state => state.setJson);
+  const setContents = useFile(state => state.setContents);
+  const currentJson = useJson(state => state.json);
+  const setGraph = useGraph(state => state.setGraph);
+  
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editValues, setEditValues] = React.useState<Record<string, any>>({});
+  const [originalValues, setOriginalValues] = React.useState<Record<string, any>>({});
+
+  React.useEffect(() => {
+    if (opened && nodeData) {
+      const values: Record<string, any> = {};
+      nodeData.text.forEach(row => {
+        if (row.type !== "array" && row.type !== "object" && row.key) {
+          values[row.key] = row.value;
+        }
+      });
+      setEditValues(values);
+      setOriginalValues(JSON.parse(JSON.stringify(values)));
+      setIsEditing(false);
+    }
+  }, [opened, nodeData]);
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditValues(JSON.parse(JSON.stringify(originalValues)));
+  };
+
+  const handleSave = () => {
+    try {
+      const jsonObj = JSON.parse(currentJson);
+      const path = nodeData?.path;
+
+      if (!path || path.length === 0) {
+        toast.error("Cannot edit root node");
+        return;
+      }
+
+      // Navigate through the path to find the target object
+      let current = jsonObj;
+      
+      // Navigate to the target object
+      for (let i = 0; i < path.length; i++) {
+        current = current[path[i]];
+      }
+
+      // Now 'current' is the object we want to update
+      // Update all the properties
+      if (typeof current === "object" && current !== null) {
+        Object.entries(editValues).forEach(([key, value]) => {
+          current[key] = value;
+        });
+      }
+
+      // Update the stores
+      const updatedJson = JSON.stringify(jsonObj, null, 2);
+      setJson(updatedJson);
+      setContents({ contents: updatedJson, hasChanges: true, skipUpdate: false });
+      
+      // Refresh the graph to reflect changes
+      setTimeout(() => {
+        setGraph(updatedJson);
+        
+        // Update the selected node to show new values in modal
+        if (nodeData && typeof current === "object" && current !== null) {
+          const updatedNodeData: NodeData = {
+            ...nodeData,
+            text: nodeData.text.map(row => {
+              if (row.type !== "array" && row.type !== "object" && row.key) {
+                return {
+                  ...row,
+                  value: editValues[row.key] ?? row.value,
+                };
+              }
+              return row;
+            }),
+          };
+          setSelectedNode(updatedNodeData);
+        }
+      }, 100);
+
+      setIsEditing(false);
+      setOriginalValues(JSON.parse(JSON.stringify(editValues)));
+      toast.success("Node updated successfully");
+    } catch (error) {
+      console.error("Error saving changes:", error);
+      toast.error("Failed to save changes");
+    }
+  };
+
+  const handleValueChange = (key: string, value: string) => {
+    try {
+      // Try to parse as JSON if it looks like JSON
+      let parsedValue: any = value;
+      if (value === "true") parsedValue = true;
+      else if (value === "false") parsedValue = false;
+      else if (value === "null") parsedValue = null;
+      else if (!isNaN(Number(value)) && value !== "") parsedValue = Number(value);
+      
+      setEditValues(prev => ({
+        ...prev,
+        [key]: parsedValue,
+      }));
+    } catch {
+      setEditValues(prev => ({
+        ...prev,
+        [key]: value,
+      }));
+    }
+  };
 
   return (
     <Modal size="auto" opened={opened} onClose={onClose} centered withCloseButton={false}>
@@ -35,34 +154,90 @@ export const NodeModal = ({ opened, onClose }: ModalProps) => {
         <Stack gap="xs">
           <Flex justify="space-between" align="center">
             <Text fz="xs" fw={500}>
-              Content
+              {isEditing ? "Edit Node" : "Content"}
             </Text>
             <CloseButton onClick={onClose} />
           </Flex>
-          <ScrollArea.Autosize mah={250} maw={600}>
-            <CodeHighlight
-              code={normalizeNodeData(nodeData?.text ?? [])}
-              miw={350}
-              maw={600}
-              language="json"
-              withCopyButton
-            />
-          </ScrollArea.Autosize>
+          
+          {!isEditing && nodeData && (
+            <ScrollArea.Autosize mah={250} maw={600}>
+              <CodeHighlight
+                code={normalizeNodeData(nodeData?.text ?? [])}
+                miw={350}
+                maw={600}
+                language="json"
+                withCopyButton
+              />
+            </ScrollArea.Autosize>
+          )}
+
+          {isEditing && (
+            <Stack gap="sm">
+              {Object.entries(editValues).map(([key, value]) => (
+                <div key={key}>
+                  <Text fz="xs" fw={500} mb="4">
+                    {key}
+                  </Text>
+                  {typeof value === "string" && value.length > 100 ? (
+                    <Textarea
+                      value={String(value)}
+                      onChange={e => handleValueChange(key, e.currentTarget.value)}
+                      placeholder="Enter value"
+                      minRows={3}
+                    />
+                  ) : (
+                    <TextInput
+                      value={String(value)}
+                      onChange={e => handleValueChange(key, e.currentTarget.value)}
+                      placeholder="Enter value"
+                    />
+                  )}
+                </div>
+              ))}
+            </Stack>
+          )}
         </Stack>
-        <Text fz="xs" fw={500}>
-          JSON Path
-        </Text>
-        <ScrollArea.Autosize maw={600}>
-          <CodeHighlight
-            code={jsonPathToString(nodeData?.path)}
-            miw={350}
-            mah={250}
-            language="json"
-            copyLabel="Copy to clipboard"
-            copiedLabel="Copied to clipboard"
-            withCopyButton
-          />
-        </ScrollArea.Autosize>
+
+        {!isEditing && (
+          <>
+            <Text fz="xs" fw={500}>
+              JSON Path
+            </Text>
+            <ScrollArea.Autosize maw={600}>
+              <CodeHighlight
+                code={jsonPathToString(nodeData?.path)}
+                miw={350}
+                mah={250}
+                language="json"
+                copyLabel="Copy to clipboard"
+                copiedLabel="Copied to clipboard"
+                withCopyButton
+              />
+            </ScrollArea.Autosize>
+          </>
+        )}
+
+        <Group justify="flex-end" mt="md">
+          {!isEditing ? (
+            <>
+              <Button variant="default" onClick={onClose}>
+                Close
+              </Button>
+              <Button onClick={handleEdit}>
+                Edit
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button variant="default" onClick={handleCancel}>
+                Cancel
+              </Button>
+              <Button onClick={handleSave} color="green">
+                Save
+              </Button>
+            </>
+          )}
+        </Group>
       </Stack>
     </Modal>
   );