Feat/loop break node (#17268)

web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-iteration-finished.ts

@@ -19,6 +19,8 @@ export const useWorkflowNodeIterationFinished = () => {
     const {
       getNodes,
       setNodes,
+      edges,
+      setEdges,
     } = store.getState()
     const nodes = getNodes()
     setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
@@ -38,6 +40,18 @@ export const useWorkflowNodeIterationFinished = () => {
       currentNode.data._runningStatus = data.status
     })
     setNodes(newNodes)
+    const newEdges = produce(edges, (draft) => {
+      const incomeEdges = draft.filter((edge) => {
+        return edge.target === data.node_id
+      })
+      incomeEdges.forEach((edge) => {
+        edge.data = {
+          ...edge.data,
+          _targetRunningStatus: data.status as any,
+        }
+      })
+    })
+    setEdges(newEdges)
   }, [workflowStore, store])
 
   return {

web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-loop-finished.ts

@@ -3,7 +3,6 @@ import { useStoreApi } from 'reactflow'
 import produce from 'immer'
 import type { LoopFinishedResponse } from '@/types/workflow'
 import { useWorkflowStore } from '@/app/components/workflow/store'
-import { DEFAULT_LOOP_TIMES } from '@/app/components/workflow/constants'
 
 export const useWorkflowNodeLoopFinished = () => {
   const store = useStoreApi()
@@ -14,11 +13,12 @@ export const useWorkflowNodeLoopFinished = () => {
     const {
       workflowRunningData,
       setWorkflowRunningData,
-      setLoopTimes,
     } = workflowStore.getState()
     const {
       getNodes,
       setNodes,
+      edges,
+      setEdges,
     } = store.getState()
     const nodes = getNodes()
     setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
@@ -31,13 +31,24 @@ export const useWorkflowNodeLoopFinished = () => {
         }
       }
     }))
-    setLoopTimes(DEFAULT_LOOP_TIMES)
     const newNodes = produce(nodes, (draft) => {
       const currentNode = draft.find(node => node.id === data.node_id)!
 
       currentNode.data._runningStatus = data.status
     })
     setNodes(newNodes)
+    const newEdges = produce(edges, (draft) => {
+      const incomeEdges = draft.filter((edge) => {
+        return edge.target === data.node_id
+      })
+      incomeEdges.forEach((edge) => {
+        edge.data = {
+          ...edge.data,
+          _targetRunningStatus: data.status as any,
+        }
+      })
+    })
+    setEdges(newEdges)
   }, [workflowStore, store])
 
   return {

web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-loop-next.ts

@@ -2,18 +2,12 @@ import { useCallback } from 'react'
 import { useStoreApi } from 'reactflow'
 import produce from 'immer'
 import type { LoopNextResponse } from '@/types/workflow'
-import { useWorkflowStore } from '@/app/components/workflow/store'
+import { NodeRunningStatus } from '@/app/components/workflow/types'
 
 export const useWorkflowNodeLoopNext = () => {
   const store = useStoreApi()
-  const workflowStore = useWorkflowStore()
 
   const handleWorkflowNodeLoopNext = useCallback((params: LoopNextResponse) => {
-    const {
-      loopTimes,
-      setLoopTimes,
-    } = workflowStore.getState()
-
     const { data } = params
     const {
       getNodes,
@@ -23,11 +17,17 @@ export const useWorkflowNodeLoopNext = () => {
     const nodes = getNodes()
     const newNodes = produce(nodes, (draft) => {
       const currentNode = draft.find(node => node.id === data.node_id)!
-      currentNode.data._loopIndex = loopTimes
-      setLoopTimes(loopTimes + 1)
+      currentNode.data._loopIndex = data.index
+
+      draft.forEach((node) => {
+        if (node.parentId === data.node_id) {
+          node.data._waitingRun = true
+          node.data._runningStatus = NodeRunningStatus.Waiting
+        }
+      })
     })
     setNodes(newNodes)
-  }, [workflowStore, store])
+  }, [store])
 
   return {
     handleWorkflowNodeLoopNext,

web/app/components/workflow/hooks/use-workflow-run-event/use-workflow-node-loop-started.ts

@@ -7,7 +7,6 @@ import produce from 'immer'
 import { useWorkflowStore } from '@/app/components/workflow/store'
 import type { LoopStartedResponse } from '@/types/workflow'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
-import { DEFAULT_LOOP_TIMES } from '@/app/components/workflow/constants'
 
 export const useWorkflowNodeLoopStarted = () => {
   const store = useStoreApi()
@@ -25,7 +24,6 @@ export const useWorkflowNodeLoopStarted = () => {
     const {
       workflowRunningData,
       setWorkflowRunningData,
-      setLoopTimes,
     } = workflowStore.getState()
     const {
       getNodes,
@@ -41,7 +39,6 @@ export const useWorkflowNodeLoopStarted = () => {
         status: NodeRunningStatus.Running,
       })
     }))
-    setLoopTimes(DEFAULT_LOOP_TIMES)
 
     const {
       setViewport,