Added editing option to nodes #502

JustinSui624 · 2025-07-29T03:20:47Z

Added an "edit" button to each node when in graph view.

Testbr

Copilot

Pull Request Overview

Adds an edit capability to view and modify node content, including UI updates and supporting store logic, plus initial Cypress setup and tests.

Introduces in-modal edit mode with Save/Cancel to update JSON via path resolution.
Extends graph store with setSelectedNodeText to refresh node text after save.
Adds Cypress config and an e2e test; minor UI updates in Tree/Graph views and sample JSON changes.

Reviewed Changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
src/store/useFile.ts	Updates the default JSON sample content to a simpler object-based example.
src/features/modals/NodeModal/index.tsx	Adds edit mode (Textarea), save/cancel logic, path handling, and updates store with changes.
src/features/editor/views/TreeView/Value.tsx	Adds Popover with an Edit action in Tree view.
src/features/editor/views/GraphView/stores/useGraph.ts	Adds setSelectedNodeText to update node text in state.
src/features/editor/views/GraphView/CustomNode/index.tsx	Wraps node content in a to aid testing.
src/features/editor/views/GraphView/CustomNode/TextNode.tsx	Minor layout change; introduces unused imports/state related to future editing.
package.json	Adds Cypress scripts and dev dependency.
cypress.config.ts	Adds Cypress config for E2E and component testing.
cypress/support/*	Adds Cypress support files and component mount helpers.
cypress/e2e/node_modal_edit_button.cy.js	Adds an E2E test to find nodes with editable modals and count Edit/Save/Cancel.
cypress/fixtures/example.json	Adds a sample fixture.

Comments suppressed due to low confidence (1)

cypress/e2e/node_modal_edit_button.cy.js:1

Avoid using hashed or generated class names to close the modal; they are unstable across builds. Use a semantic selector like cy.get('button[aria-label="Close"]').click() or a data-testid on the close button.

describe('NodeModal Edit Button Visibility', () => {

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-16T16:50:41Z

src/features/modals/NodeModal/index.tsx

+    React.useEffect(() => {
+        console.log("useEffect triggered - selectedNode changed:", selectedNode);
+        if (selectedNode?.text !== undefined) {
+            const textString = dataToString(selectedNode.text);


editedText is initialized with dataToString(...), which strips quotes from string values, producing invalid JSON. Parsing editedText with JSON.parse will fail for common cases (e.g., string properties). Initialize and reset editedText with JSON.stringify(selectedNode.text, null, 2) instead, and reserve dataToString only for read-only display.

Suggested change

const textString = dataToString(selectedNode.text);

const textString = JSON.stringify(selectedNode.text, null, 2);

Copilot · 2025-10-16T16:50:41Z

src/features/modals/NodeModal/index.tsx

 import useGraph from "../../editor/views/GraphView/stores/useGraph";
+import useFile from "../../../store/useFile";
+import useJson from "../../../store/useJson";



editedText is initialized with dataToString(...), which strips quotes from string values, producing invalid JSON. Parsing editedText with JSON.parse will fail for common cases (e.g., string properties). Initialize and reset editedText with JSON.stringify(selectedNode.text, null, 2) instead, and reserve dataToString only for read-only display.

Copilot · 2025-10-16T16:50:42Z

src/features/modals/NodeModal/index.tsx

+
+        } catch (e) {
+            console.error("JSON parse error:", e);
+            alert("Invalid JSON format: ");


The error message lacks context and omits the actual parse error. Include the exception message so users know what to fix, e.g., alert(Invalid JSON: ${e instanceof Error ? e.message : String(e)}).

Suggested change

alert("Invalid JSON format: ");

alert(`Invalid JSON: ${e instanceof Error ? e.message : String(e)}`);

Copilot · 2025-10-16T16:50:42Z

src/features/modals/NodeModal/index.tsx

+    console.log("NodeModal render - selectedNode:", selectedNode);
+    console.log("NodeModal render - editMode:", editMode);
+    console.log("NodeModal render - opened:", opened);
+


Excessive console logging throughout the component will add noisy output and impact performance in production. Consider removing these logs or guard them under a development flag.

Copilot · 2025-10-16T16:50:42Z

src/features/editor/views/GraphView/CustomNode/TextNode.tsx

+import { Popover, Button } from "@mantine/core";
+import { useState } from "react";


Popover, Button, and useState are imported but not used. Remove unused imports to avoid lint errors and keep the file clean.

Suggested change

import { Popover, Button } from "@mantine/core";

import { useState } from "react";

Copilot · 2025-10-16T16:50:43Z

src/features/editor/views/GraphView/CustomNode/TextNode.tsx

 const Node = ({ node, x, y, hasCollapse = false }: CustomNodeProps) => {
+  const [popoverOpened, setPopoverOpened] = React.useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editValue, setEditValue] = useState(node.text as string);


These state variables are declared but never used. Remove them until the edit UI is implemented in this component.

Suggested change

const [editValue, setEditValue] = useState(node.text as string);

Copilot · 2025-10-16T16:50:43Z

src/features/editor/views/TreeView/Value.tsx

+        <span
+          style={{
+            color: getValueColor({
+              theme,
+              $value: valueAsString,
+            }),
+            cursor: "pointer",
+          }}
+          onClick={() => setOpened((o) => !o)}
+        >
+          <TextRenderer>{JSON.stringify(value)}</TextRenderer>
+        </span>


Clickable span lacks keyboard accessibility and proper semantics. Use a button (or add role='button' and onKeyDown handlers for Enter/Space) so keyboard users can activate it.

Suggested change

<span

style={{

color: getValueColor({

theme,

$value: valueAsString,

}),

cursor: "pointer",

}}

onClick={() => setOpened((o) => !o)}

>

<TextRenderer>{JSON.stringify(value)}</TextRenderer>

</span>

<button

type="button"

style={{

color: getValueColor({

theme,

$value: valueAsString,

}),

cursor: "pointer",

background: "none",

border: "none",

padding: 0,

font: "inherit",

}}

onClick={() => setOpened((o) => !o)}

>

<TextRenderer>{JSON.stringify(value)}</TextRenderer>

</button>

Copilot · 2025-10-16T16:50:43Z

cypress/e2e/node_modal_edit_button.cy.js

+          cy.contains('button', 'Cancel').click();
+          cy.get('.m_b5489c3c > .mantine-focus-auto').click();
+          return false; // Stop after first editable node
+        } else {
+          cy.get('.m_b5489c3c > .mantine-focus-auto').click();
+        }


Returning false inside a nested then() does not break out of cy.get(...).each(...). The loop will continue. Add a guard at the beginning of the each callback (e.g., if (editCount > 0) return false;) or restructure the test to find the first matching node before interacting.

Copilot · 2025-10-16T16:50:43Z

cypress/e2e/node_modal_edit_button.cy.js

+  });
+
+  it('finds nodes with editable modals and counts Edit, Save, Cancel buttons', () => {
+    cy.get('g[id^="ref-"][id*="node"] rect', { timeout: 5000 }).each(($rect, index, $list) => {


Selector relies on internal SVG id patterns and is brittle. Prefer the explicit test hook added in code (e.g., [data-testid='open-node-modal']) to make the test stable and intention-revealing.

Suggested change

cy.get('g[id^="ref-"][id*="node"] rect', { timeout: 5000 }).each(($rect, index, $list) => {

cy.get('[data-testid="node-rect"]', { timeout: 5000 }).each(($rect, index, $list) => {

TallTed · 2025-10-17T16:25:55Z

src/features/modals/NodeModal/index.tsx

-const jsonPathToString = (path?: NodeData["path"]) => {
-  if (!path || path.length === 0) return "$";
-  return `$["${path.join('"]["')}"]`;
+    // If after filtering we have no keys, replace the root


Better English.

Suggested change

// If after filtering we have no keys, replace the root

// If we have no keys after filtering, replace the root

ramfam101 and others added 30 commits July 10, 2025 12:02

Update useFile.ts

fa79b34

fix

d427aaa

newt

dc60cb1

testing

b4fa96b

Merge pull request AykutSarac#2 from ramfam101/testbr

755112d

Testbr

small changes

28ebd82

updates

97b0c85

update

71b6b74

Update node_modal_edit_button.cy.js

9a94676

first try

fda2be5

second try

b6587aa

third try

499f592

small change to check

de893c0

4th try

dd49a47

5th try

f393c15

6th try

7c0dc68

7th try

5935732

8th try

9bda158

9th try

559c50e

debugging

d8323b5

undo errors

f2db159

debugging

19106a9

trial and error

7e3b870

again

1651879

again

04960f2

again

e58a2fd

again

10cad0a

again

5913e94

again

8c660e8

brick by brick

0c83e09

JustinSui624 added 15 commits July 28, 2025 22:15

i stg

c51f14b

...

ce76203

ok

d4adb12

.

e397610

.

91ea5d9

.

9d82f67

.

5c9f39e

.

8d340e0

plz

2d760e6

.

1280e78

.

edc6702

Done!

b966235

more changes

b599725

Now Done!

90d9e55

ok now done

f0182f3

AykutSarac added the open to review Please share your insights about this issue/PR label Oct 16, 2025

AykutSarac requested a review from Copilot October 16, 2025 16:48

Copilot AI reviewed Oct 16, 2025

View reviewed changes

TallTed reviewed Oct 17, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Added editing option to nodes #502

Added editing option to nodes #502

Uh oh!

JustinSui624 commented Jul 29, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

Copilot AI Oct 16, 2025

Uh oh!

TallTed Oct 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

	const textString = dataToString(selectedNode.text);
	const textString = JSON.stringify(selectedNode.text, null, 2);

	alert("Invalid JSON format: ");
	alert(`Invalid JSON: ${e instanceof Error ? e.message : String(e)}`);

		import { Popover, Button } from "@mantine/core";
		import { useState } from "react";

	cy.get('g[id^="ref-"][id*="node"] rect', { timeout: 5000 }).each(($rect, index, $list) => {
	cy.get('[data-testid="node-rect"]', { timeout: 5000 }).each(($rect, index, $list) => {

	// If after filtering we have no keys, replace the root
	// If we have no keys after filtering, replace the root

Added editing option to nodes #502

Are you sure you want to change the base?

Added editing option to nodes #502

Uh oh!

Conversation

JustinSui624 commented Jul 29, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 16, 2025

Choose a reason for hiding this comment

Uh oh!

TallTed Oct 17, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants