fix: make not connected edges be cleared when entering flow

[lucaseduoli]

This pull request includes updates to improve edge handling and node/edge selection logic in the flow management system. The changes ensure more precise behavior when interacting with nodes and edges and enhance the maintainability of the code.

Improvements to edge handling:

• src/frontend/src/utils/reactflowUtils.ts: Updated the cleanEdges function to handle cases where a selected_output is defined for a node. If selected_output is present, it finds the corresponding output; otherwise, it defaults to filtering outputs marked as selected, ensuring only one output is considered.

Updates to node/edge selection logic:

• src/frontend/src/stores/flowStore.ts: Modified the unselectAllNodesEdges function call to use newEdges instead of edges, ensuring the updated edge list is used during the unselection process.

Summary by CodeRabbit

• Bug Fixes
  • Improved default output selection in nodes to ensure an output is always selected if none is set.
  • Enhanced flow reset behavior to correctly unselect nodes and edges based on cleaned edge data.
  • Refined logic for determining selected outputs in node connections, prioritizing explicitly selected outputs and improving consistency.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The changes introduce a new effect in the GenericNode component to ensure an output is always selected by default. The cleanEdges utility is updated to prioritize selected_output when matching outputs, and the resetFlow method now uses cleaned edges for unselection logic.

Changes

File(s)	Change Summary
src/frontend/src/CustomNodes/GenericNode/index.tsx	Added a useEffect to auto-select an output if none is selected.
src/frontend/src/stores/flowStore.ts	Modified resetFlow to use cleaned edges (newEdges) in unselectAllNodesEdges instead of raw edges.
src/frontend/src/utils/reactflowUtils.ts	Updated cleanEdges to prioritize selected_output and refine output selection logic for generic nodes.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant GenericNode
    participant reactflowUtils

    User->>GenericNode: Render with data.node.outputs and data.selected_output
    GenericNode->>GenericNode: useEffect triggers on outputs/selected_output change
    alt No selected_output
        GenericNode->>GenericNode: handleSelectOutput(first selected output or null)
    end
    GenericNode->>reactflowUtils: cleanEdges called (e.g., during resetFlow)
    reactflowUtils->>reactflowUtils: Prioritize selected_output, else fallback to first selected output

Loading

Possibly related PRs

• fix: made clean edges clean after changing dropdown of output #8460: Refines output selection in GenericNode and further narrows output filtering in cleanEdges, directly building on the selection logic updated in this PR.

Suggested labels

size:XS, lgtm

Suggested reviewers

• deon-sanchez
• Cristhianzl

✨ Finishing Touches

🧪 Generate Unit Tests

• Create PR with Unit Tests
• Post Copyable Unit Tests in Comment
• Commit Unit Tests in branch fix/output_dropdown_persistence

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai auto-generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/frontend/src/CustomNodes/GenericNode/index.tsx (1)

328-333: Include handleSelectOutput in the dependency array.

While the logic is correct for auto-selecting outputs, the effect should include handleSelectOutput in its dependency array for completeness, even though it's memoized with useCallback.

  useEffect(() => {
    if (data?.selected_output) return;
    handleSelectOutput(
      data.node?.outputs?.find((output) => output.selected) || null,
    );
-  }, [data.node?.outputs, data?.selected_output]);
+  }, [data.node?.outputs, data?.selected_output, handleSelectOutput]);

This follows React's exhaustive-deps ESLint rule and makes the dependencies explicit, improving code maintainability.

src/frontend/src/utils/reactflowUtils.ts (1)

141-148: Review the fallback logic for output selection clarity.

The current fallback logic uses an unusual pattern: filtering selected outputs, taking only the first one with slice(0, 1), then calling .find() on the resulting single-element array. This could miss valid outputs if the first selected output doesn't match the required name but a later selected output does.

Consider this scenario:

• Node has outputs: [{name: "A", selected: true}, {name: "B", selected: true}]
• Required name is "B"
• Current logic: Gets first selected output "A", checks if name matches "B", returns undefined
• Result: Edge gets removed even though a valid selected output "B" exists

Consider these alternatives for better clarity:

Option 1: Find the selected output that matches the name

-        const output = sourceNode.data.selected_output
-          ? sourceNode.data.node!.outputs?.find(
-              (output) => output.name === sourceNode.data.selected_output,
-            )
-          : sourceNode.data
-              .node!.outputs?.filter((output) => output.selected)
-              .slice(0, 1)
-              .find((output) => output.name === name);
+        const output = sourceNode.data.selected_output
+          ? sourceNode.data.node!.outputs?.find(
+              (output) => output.name === sourceNode.data.selected_output,
+            )
+          : sourceNode.data.node!.outputs?.find(
+              (output) => output.selected && output.name === name
+            );

Option 2: If the intent is to use only the first selected output

-        const output = sourceNode.data.selected_output
-          ? sourceNode.data.node!.outputs?.find(
-              (output) => output.name === sourceNode.data.selected_output,
-            )
-          : sourceNode.data
-              .node!.outputs?.filter((output) => output.selected)
-              .slice(0, 1)
-              .find((output) => output.name === name);
+        const output = sourceNode.data.selected_output
+          ? sourceNode.data.node!.outputs?.find(
+              (output) => output.name === sourceNode.data.selected_output,
+            )
+          : (() => {
+              const firstSelected = sourceNode.data.node!.outputs?.find((output) => output.selected);
+              return firstSelected?.name === name ? firstSelected : undefined;
+            })();

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 043ba55 and 515c104.

📒 Files selected for processing (3)

• src/frontend/src/CustomNodes/GenericNode/index.tsx (1 hunks)
• src/frontend/src/stores/flowStore.ts (1 hunks)
• src/frontend/src/utils/reactflowUtils.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

`src/frontend/**/*.{ts,tsx,js,jsx}`: All React and TypeScript/JavaScript source files for the frontend must reside under src/frontend/ and use .ts, .tsx, .js, or .jsx extensions.

src/frontend/**/*.{ts,tsx,js,jsx}: All React and TypeScript/JavaScript source files for the frontend must reside under src/frontend/ and use .ts, .tsx, .js, or .jsx extensions.

• src/frontend/src/CustomNodes/GenericNode/index.tsx
• src/frontend/src/stores/flowStore.ts
• src/frontend/src/utils/reactflowUtils.ts

`src/frontend/src/stores/**/*`: Zustand state management stores must be placed under src/frontend/src/stores/.

src/frontend/src/stores/**/*: Zustand state management stores must be placed under src/frontend/src/stores/.

• src/frontend/src/stores/flowStore.ts

`src/frontend/src/utils/**/*`: Utility functions must be placed under src/frontend/src/utils/.

src/frontend/src/utils/**/*: Utility functions must be placed under src/frontend/src/utils/.

• src/frontend/src/utils/reactflowUtils.ts

🔇 Additional comments (1)

src/frontend/src/stores/flowStore.ts (1)

229-229: LGTM! Improved consistency by using cleaned edges.

This change ensures that unselectAllNodesEdges operates on the cleaned edges (newEdges) rather than the raw edges from flow data. This maintains consistency with the cleaned edges that are actually stored in the state, eliminating potential discrepancies between what gets unselected and what gets persisted.

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 043ba55 and 515c104.

📒 Files selected for processing (3)

• src/frontend/src/CustomNodes/GenericNode/index.tsx (1 hunks)
• src/frontend/src/stores/flowStore.ts (1 hunks)
• src/frontend/src/utils/reactflowUtils.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

`src/frontend/**/*.{ts,tsx,js,jsx}`: All React and TypeScript/JavaScript source files for the frontend must reside under src/frontend/ and use .ts, .tsx, .js, or .jsx extensions.

src/frontend/**/*.{ts,tsx,js,jsx}: All React and TypeScript/JavaScript source files for the frontend must reside under src/frontend/ and use .ts, .tsx, .js, or .jsx extensions.

• src/frontend/src/utils/reactflowUtils.ts
• src/frontend/src/CustomNodes/GenericNode/index.tsx
• src/frontend/src/stores/flowStore.ts

`src/frontend/src/utils/**/*`: Utility functions must be placed under src/frontend/src/utils/.

src/frontend/src/utils/**/*: Utility functions must be placed under src/frontend/src/utils/.

• src/frontend/src/utils/reactflowUtils.ts

`src/frontend/src/stores/**/*`: Zustand state management stores must be placed under src/frontend/src/stores/.

src/frontend/src/stores/**/*: Zustand state management stores must be placed under src/frontend/src/stores/.

• src/frontend/src/stores/flowStore.ts

🔇 Additional comments (1)

src/frontend/src/stores/flowStore.ts (1)

229-229: Good consistency improvement.

Using newEdges (the cleaned edges) instead of the original edges ensures that the unselection logic operates on the same edge data that will be used in the flow state. This maintains consistency throughout the reset process.

[Cristhianzl]

lgtm