single run

web/app/components/workflow/hooks.ts

@@ -18,7 +18,6 @@ import {
 import type {
   BlockEnum,
   Node,
-  SelectedNode,
 } from './types'
 import { NODES_INITIAL_DATA } from './constants'
 import { getLayoutByDagre } from './utils'
@@ -258,7 +257,7 @@ export const useWorkflow = () => {
     setEdges(newEdges)
   }, [store])
 
-  const handleNodeDataUpdate = useCallback(({ id, data }: SelectedNode) => {
+  const handleNodeDataUpdate = useCallback(({ id, data }: { id: string; data: Record<string, any> }) => {
     const {
       getNodes,
       setNodes,

web/app/components/workflow/nodes/_base/components/node-control.tsx

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
+import { useWorkflow } from '../../../hooks'
 import {
   DotsHorizontal,
   Loading02,
@@ -11,10 +12,14 @@ import {
 
 type NodeControlProps = {
   isRunning?: boolean
+  nodeId: string
 }
 const NodeControl: FC<NodeControlProps> = ({
   isRunning,
+  nodeId,
 }) => {
+  const { handleNodeDataUpdate } = useWorkflow()
+
   return (
     <div className='absolute right-0 -top-7 flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'>
       {
@@ -25,7 +30,15 @@ const NodeControl: FC<NodeControlProps> = ({
           </div>
         )
       }
-      <div className='flex items-center justify-center w-5 h-5 cursor-pointer'>
+      <div
+        className='flex items-center justify-center w-5 h-5 cursor-pointer'
+        onClick={() => {
+          handleNodeDataUpdate({
+            id: nodeId,
+            data: { _isSingleRun: !isRunning },
+          })
+        }}
+      >
         {
           isRunning
             ? <Stop className='w-3 h-3' />

web/app/components/workflow/nodes/_base/node.tsx

@@ -6,7 +6,7 @@ import {
   cloneElement,
   memo,
 } from 'react'
-import type { NodeProps } from 'reactflow'
+import type { NodeProps } from '../../types'
 import BlockIcon from '../../block-icon'
 
 type BaseNodeProps = {

web/app/components/workflow/nodes/_base/panel.tsx

@@ -6,7 +6,6 @@ import {
   cloneElement,
   memo,
   useCallback,
-  useState,
 } from 'react'
 import { type Node } from '../../types'
 import { BlockEnum } from '../../types'
@@ -39,7 +38,6 @@ const BasePanel: FC<BasePanelProps> = ({
     handleNodeSelect,
     handleNodeDataUpdate,
   } = useWorkflow()
-  const [controlSingleRun, setControlSingleRun] = useState(0)
   const handleTitleChange = useCallback((title: string) => {
     handleNodeDataUpdate({ id, data: { ...data, title } })
   }, [handleNodeDataUpdate, id, data])
@@ -68,7 +66,7 @@ const BasePanel: FC<BasePanelProps> = ({
                 >
                   <div
                     className='flex items-center justify-center mr-1 w-6 h-6 rounded-md hover:bg-black/5 cursor-pointer'
-                    onClick={() => !controlSingleRun && setControlSingleRun(Date.now())}
+                    onClick={() => handleNodeDataUpdate({ id, data: { _isSingleRun: true } })}
                   >
                     <Play className='w-4 h-4 text-gray-500' />
                   </div>
@@ -93,7 +91,7 @@ const BasePanel: FC<BasePanelProps> = ({
         </div>
       </div>
       <div className='py-2'>
-        {cloneElement(children, { id, data, controlSingleRun, setControlSingleRun })}
+        {cloneElement(children, { id, data })}
       </div>
       {
         data.type !== BlockEnum.End && (

web/app/components/workflow/nodes/index.tsx

@@ -16,6 +16,7 @@ import {
 import NodeControl from './_base/components/node-control'
 
 const CustomNode = memo((props: NodeProps) => {
+  const nodeId = props.id
   const nodeData = props.data
   const NodeComponent = NodeComponentMap[nodeData.type]
 
@@ -43,10 +44,13 @@ const CustomNode = memo((props: NodeProps) => {
         )
       }
       {
-        nodeData.hovering
+        nodeData._selected
         && canRunBySingle(nodeData.type)
         && (
-          <NodeControl />
+          <NodeControl
+            nodeId={nodeId}
+            isRunning={nodeData._isSingleRun}
+          />
         )
       }
     </>

web/app/components/workflow/types.ts

@@ -27,6 +27,7 @@ export type CommonNodeType<T = {}> = {
   _selected?: boolean
   _hovering?: boolean
   _targetBranches?: Branch[]
+  _isSingleRun?: boolean
   title: string
   desc: string
   type: BlockEnum
@@ -39,12 +40,10 @@ export type CommonEdgeType = {
 
 export type Node = ReactFlowNode<CommonNodeType>
 export type SelectedNode = Pick<Node, 'id' | 'data'>
-export type NodeProps<T> = { id: string; data: CommonNodeType<T> }
+export type NodeProps<T = unknown> = { id: string; data: CommonNodeType<T> }
 export type NodePanelProps<T> = {
   id: string
   data: CommonNodeType<T>
-  controlSingleRun: boolean
-  setControlSingleRun: (value: boolean) => void
 }
 export type Edge = ReactFlowEdge<CommonEdgeType>