When a workflow is previewed in the studio, the number of iterations is not displayed on the iteration node, and the canvas cannot be dragged during the preview.

Self Checks

[X] This is only for bug report, if you would like to ask a question, please head to Discussions.
[X] I have searched for existing issues search for existing issues, including closed ones.
[X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[X] [FOR CHINESE USERS] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
[X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.7.0

Cloud or Self Hosted

Self Hosted (Docker)

Steps to reproduce

Due to information security reasons, I can not provide pictures, but I can describe the phenomenon I encountered in detail. I created an iterative workflow similar to the one provided in the official manual(https://docs.dify.ai/v/zh-hans/guides/workflow/node/iteration). When previewing the workflow, I found that when I switched the browser tab during the iteration, and then switched to the dify debugging interface, the iteration number was not displayed on the iteration node. And I also found that the program preview running process, I can not drag the canvas, the interface is stuck, I can not freely drag the canvas to observe the nodes I want to see, until the preview run after the canvas can be dragged.

✔️ Expected Behavior

When the preview is running, the iteration count of the iteration node is always displayed, regardless of whether I switch the interface or drag the canvas, and I can freely drag the canvas to view the node content I want to see.

❌ Actual Behavior

I created an iterative workflow similar to the one provided in the official manual. When previewing the workflow, I found that when I switched the browser tab during the iteration, and then switched to the dify debugging interface, the iteration number was not displayed on the iteration node.And I also found that the program preview running process, I can not drag the canvas, the interface is stuck, I can not freely drag the canvas to observe the nodes I want to see, until the preview run after the canvas can be dragged.

The issues you're encountering with the iteration count not displaying and the inability to drag the canvas during workflow preview are known and have been addressed in the following ways:

Iteration Count Not Displayed: The iteration count is displayed on the iteration node using the following code snippet:
```
<div className='leading-[18px] text-[13px] font-medium text-gray-700'>
 {t('workflow.nodes.iteration.iteration', { count: nodeInfo.metadata?.iterator_length || nodeInfo.details?.length })}
</div>
```
This code uses the t function from useTranslation to get the localized string for the iteration count, and it displays the count using either nodeInfo.metadata?.iterator_length or nodeInfo.details?.length ^[1]^[2].
Canvas Drag Functionality: The canvas drag functionality during the workflow preview is implemented using the panOnDrag property of the ReactFlow component. This property is set based on the controlMode and workflowReadOnly states. Specifically, the canvas can be dragged when the controlMode is set to ControlMode.Hand and workflowReadOnly is false.
```
<ReactFlow
 ...
 panOnDrag={controlMode === ControlMode.Hand && !workflowReadOnly}
 ...
>
```
Additionally, the handleNodeDragStop function ensures that the workflow draft is synchronized and the state is saved to history when a node drag event stops:
```
const handleNodeDragStop = useCallback<NodeDragHandler>((_, node) => {
 const { setHelpLineHorizontal, setHelpLineVertical } = workflowStore.getState();

 if (getNodesReadOnly()) return;

 const { x, y } = dragNodeStartPosition.current;
 if (!(x === node.position.x && y === node.position.y)) {
   setHelpLineHorizontal();
   setHelpLineVertical();
   handleSyncWorkflowDraft();

   if (x !== 0 && y !== 0) {
     saveStateToHistory(WorkflowHistoryEvent.NodeDragStop);
   }
 }
}, [workflowStore, getNodesReadOnly, saveStateToHistory, handleSyncWorkflowDraft]);
```
This ensures that the canvas drag functionality is enabled only when the control mode is set to "Hand" and the workflow is not in read-only mode, while also handling node interactions effectively ^[3]^[4].
Performance Issues: There are known performance issues with the canvas drag functionality during workflow previews, particularly with the onNodeDrag and onNodeDragStop event handlers. These handlers are invoked frequently during drag operations, which can impact performance, especially with complex workflows or a large number of nodes ^[3].

Page Visibility Change: The visibilitychange event listener ensures that the workflow draft is synchronized when the page visibility changes. If the document becomes hidden, it triggers syncWorkflowDraftWhenPageClose. If the document becomes visible again, it refreshes the workflow draft after a short delay.

const handleSyncWorkflowDraftWhenPageClose = useCallback(() => {
 if (document.visibilityState === 'hidden')
   syncWorkflowDraftWhenPageClose()
 else if (document.visibilityState === 'visible')
   setTimeout(() => handleRefreshWorkflowDraft(), 500)
}, [syncWorkflowDraftWhenPageClose, handleRefreshWorkflowDraft])

useEffect(() => {
 document.addEventListener('visibilitychange', handleSyncWorkflowDraftWhenPageClose)

 return () => {
   document.removeEventListener('visibilitychange', handleSyncWorkflowDraftWhenPageClose)
 }
}, [handleSyncWorkflowDraftWhenPageClose])

This ensures that the workflow draft is kept up-to-date even when switching between pages ^[3].

Addressing these points should help in resolving the issues you're facing with the iteration count display and canvas drag functionality during workflow previews.

To continue talking to Dosu, mention @dosu.

langgenius / dify