dify
dify copied to clipboard
Published
15 hours ago
•
langgenius
langgenius
Fix workflow performance
[!IMPORTANT]
- Make sure you have read our contribution guidelines
- Ensure there is an associated issue and you have been assigned to it
- Use the correct syntax to link this PR:
Fixes #<issue number>.
Summary
fix #27586
• Key Changes
- Added viewport-based virtualization in web/app/components/workflow/index.tsx: limit the initial node batch, track visible IDs with a buffered viewport window, and update visibility via hidden flags for both nodes and edges as the user pans, zooms, or drags.
- Reworked drag interactions in use-nodes-interactions.ts: throttle position updates with requestAnimationFrame, accumulate multiple pending nodes, honor loop/iteration constraints, and dispatch helpline alignment only when movement occurs.
- Introduced a dedicated dragging state (workflow-dragging) in style.css to remove shadows/backdrop filters while dragging, reducing repaint cost and improving responsiveness.
- Ensured drag-stop logic always clears horizontal/vertical helplines on no-op drags, while preserving history syncing for real moves.
- Updated use-helpline.ts to skip hidden nodes so alignment guides only consider currently visible elements, avoiding snap-to artifacts caused by virtualized nodes.
Problem Solved
- Heavy workflows now render smoothly and avoid hidden-node snap glitches.
- Dragging multiple nodes stays performant, alignment guides behave predictably, and helplines no longer linger after simple clicks.
Reference
- https://reactflow.dev/learn/advanced-use/performance
- Guide to Optimize React Flow Project Performance https://www.synergycodes.com/blog/guide-to-optimize-react-flow-project-performance
- Tuning Edge Animations ReactFlow Optimal Performance https://liambx.com/blog/tuning-edge-animations-reactflow-optimal-performance
Screenshots
| Before | After |
|---|---|
Checklist
- [ ] This change requires a documentation update, included: Dify Document
- [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
- [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
- [x] I've updated the documentation accordingly.
- [x] I ran
dev/reformat(backend) andcd web && npx lint-staged(frontend) to appease the lint gods
