feat(agentflow): wire functionality to edit nodes by j-sanaa · Pull Request #5786 · FlowiseAI/Flowise

j-sanaa · 2026-02-19T17:11:18Z

Double click on a node to open node edit dialog
New icon added in node toolbar for edit
persist values on closing the node editor dialog

Screen.Recording.2026-02-20.at.10.44.41.AM.mov

gemini-code-assist · 2026-02-19T17:11:52Z

Summary of Changes

Hello @j-sanaa, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a significant new feature allowing users to edit the properties of individual nodes within the Agentflow canvas. This is achieved through a new EditNodeDialog that can be triggered by double-clicking a node or by clicking a newly added edit icon in the node's toolbar. The changes include comprehensive updates to the application's state management to handle the dialog's lifecycle and data persistence, alongside a refactoring of how node input changes are processed. Additionally, the development environment for the examples has been updated with a Vite proxy to facilitate API interactions.

Highlights

Node Editing Functionality: Introduced the ability to edit nodes via a dedicated dialog, accessible through a double-click on a node or a new edit icon in the node toolbar.
Centralized State Management: Implemented new state properties (editingNodeId, editDialogProps) and actions (OPEN_EDIT_DIALOG, CLOSE_EDIT_DIALOG) within the AgentflowContext to manage the node editing dialog's state.
Improved Node Input Handling: Refactored NodeInputHandler to use a callback for data changes, promoting a more controlled and predictable state update mechanism.
Development Environment Enhancements: Configured a Vite proxy for /api calls in the example application, streamlining API interactions during development.

Changelog

packages/agentflow/examples/src/config.ts
- Updated the default apiBaseUrl to an empty string, preparing for proxy usage.
packages/agentflow/examples/vite.config.ts
- Added a proxy configuration for /api to http://localhost:3000 in the Vite development server.
packages/agentflow/src/Agentflow.tsx
- Integrated the EditNodeDialog component.
- Added useEffect hooks to synchronize ReactFlow's local node/edge states with the global context.
packages/agentflow/src/atoms/NodeInputHandler.tsx
- Modified the handleDataChange callback to pass inputParam and newValue directly, removing direct data mutation.
packages/agentflow/src/core/types/index.ts
- Extended AgentflowState with editingNodeId and editDialogProps.
- Added OPEN_EDIT_DIALOG and CLOSE_EDIT_DIALOG actions.
packages/agentflow/src/features/canvas/components/NodeToolbarActions.tsx
- Added an 'Edit' icon button to the node toolbar, which triggers the node editor dialog.
packages/agentflow/src/features/canvas/containers/AgentFlowNode.tsx
- Implemented double-click functionality on nodes to open the node editor dialog.
- Integrated the useOpenNodeEditor hook.
packages/agentflow/src/features/canvas/hooks/index.ts
- Exported the new useOpenNodeEditor hook.
packages/agentflow/src/features/canvas/hooks/useOpenNodeEditor.ts
- Added a new hook useOpenNodeEditor to centralize the logic for preparing and opening the node editing dialog.
packages/agentflow/src/infrastructure/store/AgentflowContext.tsx
- Introduced openEditDialog and closeEditDialog functions to the context, providing methods to control the node editor dialog.
packages/agentflow/src/infrastructure/store/agentflowReducer.test.ts
- Added new test cases for the OPEN_EDIT_DIALOG and CLOSE_EDIT_DIALOG actions.
- Updated the initial state for testing to include new dialog-related fields.
packages/agentflow/src/infrastructure/store/agentflowReducer.ts
- Implemented the reducer logic for OPEN_EDIT_DIALOG and CLOSE_EDIT_DIALOG actions, managing the state of the node editing dialog.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

The pull request introduces node editing functionality, including a new dialog and toolbar actions. The implementation is functional but contains a critical issue in Agentflow.tsx where a circular update loop is created between local and global states. There are also several unused variables and minor cleanup opportunities in the new hooks and components.

packages/agentflow/src/Agentflow.tsx

gemini-code-assist · 2026-02-19T17:13:55Z

packages/agentflow/src/features/canvas/containers/AgentFlowNode.tsx

+    const { openEditDialog } = useAgentflowContext()
+    const { availableNodes } = useFlowNodes()
    const ref = useRef<HTMLDivElement>(null)


The variables openEditDialog and availableNodes are destructured from their respective hooks but are not used within this component. They should be removed to keep the component clean.

Suggested change

const { openEditDialog } = useAgentflowContext()

const { availableNodes } = useFlowNodes()

const ref = useRef<HTMLDivElement>(null)

const ref = useRef<HTMLDivElement>(null)

packages/agentflow/src/features/canvas/hooks/useOpenNodeEditor.ts

…nse api/v1/nodes

j-sanaa · 2026-02-20T18:55:54Z

/gemini review

gemini-code-assist

Code Review

The pull request successfully implements the node editing functionality, including the UI triggers (double-click and toolbar icon) and the underlying state management. The refactoring of inputs to inputValues correctly distinguishes between parameter definitions and user-provided data. However, there are some concerns regarding state management practices, specifically direct prop mutation in the StickyNote component and the brittle synchronization logic in the main Agentflow component. Addressing these will improve the stability and maintainability of the application.

packages/agentflow/src/Agentflow.tsx

packages/agentflow/src/features/canvas/hooks/useOpenNodeEditor.ts

packages/agentflow/src/features/node-editor/EditNodeDialog.tsx

gemini-code-assist

Code Review

This pull request successfully implements the node editing functionality, including a new edit dialog, a toolbar button, and double-click support. The refactoring of inputs to inputValues to separate input definitions from their values is a great improvement for code clarity. I've identified a few areas for improvement: a complex state synchronization logic in Agentflow.tsx that could be simplified, a direct state mutation in StickyNote.tsx, and a potential UI flicker in the EditNodeDialog due to a removed cleanup function. Addressing these points will improve the robustness and maintainability of the new feature.

I am having trouble creating individual review comments. Click here to see my feedback.

packages/agentflow/src/Agentflow.tsx (78-119)

The current implementation for synchronizing state between React Flow's internal state (useNodesState, useEdgesState) and the AgentflowContext is quite complex. Using refs (syncingToContext, syncingFromContext) and setTimeout to prevent circular updates can be brittle and hard to maintain. A more robust and standard approach with React Flow is to use a single source of truth. The AgentflowContext should be the single source of truth for nodes and edges. The AgentflowCanvas component can then consume this state directly without needing its own local state via useNodesState/useEdgesState. Changes from React Flow (like node drags) can be dispatched to the context reducer using the onNodesChange and onEdgesChange callbacks combined with applyNodeChanges and applyEdgeChanges helpers from React Flow. This would eliminate the need for the complex two-way sync logic and make the state management more predictable.

packages/agentflow/src/features/canvas/containers/StickyNote.tsx (60-64)

The onChange handler directly mutates the data.inputValues property of the data prop. This is an anti-pattern in React and can lead to unpredictable rendering. Instead, you should treat props as immutable and use a state update function to propagate changes. You can use the updateNodeData function from useAgentflowContext to correctly update the node's data in the central store. You'll need to import useAgentflowContext and get updateNodeData from it.

                        onChange={(e) => {
                            if (inputParam) {
                                updateNodeData(data.id, {
                                    inputValues: {
                                        ...data.inputValues,
                                        [inputParam.name]: e.target.value
                                    }
                                })
                            }
                        }}

packages/agentflow/src/features/node-editor/EditNodeDialog.tsx (68-71)

This cleanup function was useful for resetting the dialog's state. Its removal could lead to a UI flicker where old data is briefly shown when opening the dialog for a new node. I'd recommend keeping this cleanup logic to ensure the dialog always starts with a fresh state. You might also consider resetting nodeName here for completeness.

packages/agentflow/src/features/canvas/hooks/useOpenNodeEditor.ts

j-sanaa added 6 commits February 17, 2026 11:02

WIP: wiring editnode

4f24021

Merge branch 'main' into feat/wire-editNodeDialog

bc15cab

End to end flow

ee6a8f3

Fixed comments

b68da4c

test case added for agent flow reducer

7e55632

Merge branch 'main' into feat/wire-editNodeDialog

e0cb369

j-sanaa requested review from VaidikFlow, jocelynlin-wd, muratkaratekeli and tianwei-liu February 19, 2026 17:11

gemini-code-assist bot reviewed Feb 19, 2026

View reviewed changes

j-sanaa removed request for VaidikFlow, jocelynlin-wd, muratkaratekeli and tianwei-liu February 19, 2026 17:22

j-sanaa added 10 commits February 19, 2026 10:12

Merge remote-tracking branch 'origin/main' into feat/wire-editNodeDialog

a8e616e

FIxed changes after syncing with main

324efbd

Changes to uodate interface NodeData to be in line with restapi respo…

f8a350f

…nse api/v1/nodes

Fixed es-lint errors

e4a179f

Merge remote-tracking branch 'origin/main' into feat/wire-editNodeDialog

3a66914

Clean code

2ed9e52

Fix for making failed testcase

c04f49f

eslint error fixed

59614ba

fix test coverage

6f9f043

Revert config.ts and vite.config.ts to main

7673465

j-sanaa marked this pull request as ready for review February 20, 2026 17:17

j-sanaa requested review from jocelynlin-wd, muratkaratekeli and tianwei-liu February 20, 2026 17:24

j-sanaa requested a review from VaidikFlow February 20, 2026 17:24

j-sanaa marked this pull request as draft February 20, 2026 18:55

gemini-code-assist bot reviewed Feb 20, 2026

View reviewed changes

Fix gemini comments

8a139c4

FlowiseAI deleted a comment from gemini-code-assist bot Feb 20, 2026

j-sanaa marked this pull request as ready for review February 20, 2026 20:03

jocelynlin-wd approved these changes Feb 21, 2026

View reviewed changes

packages/agentflow/src/features/canvas/hooks/useOpenNodeEditor.ts Outdated Show resolved Hide resolved

j-sanaa added 2 commits February 20, 2026 17:03

Update imports to use alias

c02fdb1

fix alias

21ef0ed

j-sanaa merged commit d09387b into main Feb 21, 2026
7 checks passed

j-sanaa deleted the feat/wire-editNodeDialog branch February 24, 2026 00:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(agentflow): wire functionality to edit nodes#5786

feat(agentflow): wire functionality to edit nodes#5786
j-sanaa merged 19 commits intomainfrom
feat/wire-editNodeDialog

j-sanaa commented Feb 19, 2026 •

edited

Loading

Uh oh!

gemini-code-assist bot commented Feb 19, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

gemini-code-assist bot Feb 19, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

j-sanaa commented Feb 20, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

j-sanaa commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Feb 19, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

gemini-code-assist bot Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

j-sanaa commented Feb 20, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

packages/agentflow/src/Agentflow.tsx (78-119)

packages/agentflow/src/features/canvas/containers/StickyNote.tsx (60-64)

packages/agentflow/src/features/node-editor/EditNodeDialog.tsx (68-71)

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

j-sanaa commented Feb 19, 2026 •

edited

Loading