fix: ensure running edges re-render by using immutable edge updates

[ZhangTomLiang]

What does this PR do? Fixes the delayed animation update on running edges. Refactors edge state updates to use immutable objects, ensuring React Flow re-renders correctly.

Why is this needed? Previously, edge animation states were updated by mutating existing edge objects. Since React Flow performs shallow comparison on edge references, these mutations did not trigger a re-render immediately. As a result, the running animation appeared with noticeable delay. This PR ensures that edges are updated immutably, allowing React Flow to detect changes instantly and apply the animation state correctly.

How to test? Start the application and trigger a node execution that should set edges to running state. Observe the connecting edges: the animation should appear immediately without requiring zoom or canvas interaction. Stop the execution and confirm that animations stop and styles revert as expected.

Summary by CodeRabbit

• Refactor
  • Improved internal edge animation handling with enhanced code maintainability and stability through better data handling patterns.

[coderabbitai[bot]]

Walkthrough

This PR refactors the updateEdgesRunningByNodes function to eliminate in-place mutations by constructing and returning new edge objects. It introduces a stopNodeId and a shouldRun condition that factors in edge data presence, membership in provided IDs, and exclusion from the stop node, while maintaining equivalent behavior.

Changes

Cohort / File(s)	Summary
Immutable Edge Updates Refactoring src/frontend/src/stores/flowStore.ts	Refactored updateEdgesRunningByNodes to avoid in-place mutations. Introduces stopNodeId derived from state and computes shouldRun condition combining edge data presence, ID membership, and stop node exclusion. Sets edge.animated and edge.className based on shouldRun value.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Single-file refactoring with a consistent immutability pattern applied throughout
• Logic remains functionally equivalent; focus should be on verifying the immutable update pattern correctness
• Verify that stopNodeId derivation and shouldRun condition logic maintain the original behavior

Possibly related PRs

• langflow-ai/langflow#9867: Also modifies updateEdgesRunningByNodes with stopNodeId tracking and edge running state logic; this PR complements it with immutable update refactoring.

Suggested labels

enhancement, lgtm

Suggested reviewers

• lucaseduoli
• elkakas314

Pre-merge checks and finishing touches

[!IMPORTANT]

Pre-merge checks failed

Please resolve all errors before merging. Addressing warnings is optional.

❌ Failed checks (1 error, 1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Test Coverage For New Implementations	❌ Error	PR modifies flowStore.ts to refactor updateEdgesRunningByNodes function with immutable edge updates, but no corresponding test files were added or found in the stores directory.	Add test coverage for updateEdgesRunningByNodes function to verify edge animation updates work correctly and prevent regressions from the immutable update refactoring.
Test Quality And Coverage	⚠️ Warning	PR refactors updateEdgesRunningByNodes to use immutable updates instead of in-place mutations, but contains no automated unit tests validating this behavior change or the immutability guarantees.	Add unit tests verifying immutable edge object creation, correct animation state updates, and stop node identification logic to validate the refactoring works as intended.
Excessive Mock Usage Warning	❓ Inconclusive	Unable to locate test files in the repository to assess mock usage in flowStore component changes.	Provide access to test files related to flowStore.ts or confirm test file locations and framework to enable proper assessment.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: refactoring edge updates to be immutable to fix re-rendering issues with running animations.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Test File Naming And Structure	✅ Passed	PR refactors updateEdgesRunningByNodes function in flowStore.ts without adding, modifying, or removing test files.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}