Fix workflow performance

[ZeroZ-lab]

Important

1. Make sure you have read our contribution guidelines
2. Ensure there is an associated issue and you have been assigned to it
3. 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

大量节点性能问题 (1).yml

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
• I've updated the documentation accordingly.
• I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

[ZeroZ-lab]

/gemini review

[ZeroZ-lab]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces significant performance optimizations for the workflow component, which is great for handling large workflows. The use of viewport-based virtualization, throttling interactions with requestAnimationFrame, and optimizing CSS during drag operations are all excellent strategies. The implementation is well-executed, with careful handling of state and side effects. I have one suggestion in web/app/components/workflow/index.tsx to further optimize the new virtualization logic by refining the dependencies of a useEffect, which should prevent some unnecessary recalculations.

[gemini-code-assist]

Code Review

This pull request introduces significant performance improvements to the workflow component, primarily through viewport-based virtualization of nodes and edges, and by throttling expensive drag and mouse-move operations using requestAnimationFrame. The changes are well-structured and address performance from multiple angles, including CSS optimizations to reduce repaint costs during dragging. However, there is a critical issue in the implementation of multi-node dragging where the relative positions of selected nodes are not maintained, causing them to scatter. I've provided detailed comments on this issue in use-nodes-interactions.ts.

[ZeroZ-lab]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces significant performance optimizations for the workflow component, primarily through viewport-based virtualization, interaction throttling with requestAnimationFrame, and reducing repaint costs during drag operations. The changes are well-structured and use effective patterns for improving performance in a complex React application. My review includes two main points: one for improving code quality by removing a redundant check, and another to fix a high-severity issue where a memoization optimization was likely ineffective due toการเปรียบเทียบการอ้างอิงออบเจ็กต์ที่ไม่ถูกต้อง