run by single

web/app/components/workflow/hooks.ts

@@ -206,7 +206,7 @@ export const useWorkflow = () => {
       data: NodeInitialData[nodeType],
       position: {
         x: currentNode.position.x + 304,
-        y: 0,
+        y: currentNode.position.y,
       },
       selected: true,
     }

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

@@ -9,7 +9,6 @@ import {
 import type { NodeProps } from 'reactflow'
 import BlockIcon from '../../block-icon'
 import { useWorkflow } from '../../hooks'
-import NodeControl from './components/node-control'
 
 type BaseNodeProps = {
   children: ReactElement
@@ -32,7 +31,6 @@ const BaseNode: FC<BaseNodeProps> = ({
       `}
       onClick={() => handleSelectNode(id)}
     >
-      <NodeControl />
       <div className='flex items-center px-3 pt-3 pb-2'>
         <BlockIcon
           className='shrink-0 mr-2'

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

@@ -10,6 +10,7 @@ import {
 import type { Node } from '../../types'
 import BlockIcon from '../../block-icon'
 import { useWorkflow } from '../../hooks'
+import { canRunBySingle } from '../../utils'
 import NextStep from './components/next-step'
 import PanelOperator from './components/panel-operator'
 import {
@@ -20,6 +21,8 @@ import {
   XClose,
 } from '@/app/components/base/icons/src/vender/line/general'
 import { GitBranch01 } from '@/app/components/base/icons/src/vender/line/development'
+import { Play } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
+import TooltipPlus from '@/app/components/base/tooltip-plus'
 
 type BasePanelProps = {
   children: ReactElement
@@ -43,7 +46,7 @@ const BasePanel: FC<BasePanelProps> = ({
 
   return (
     <div className='mr-2 w-[420px] h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl overflow-y-auto'>
-      <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5'>
+      <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5 z-10'>
         <div className='flex items-center px-4 pt-4 pb-1'>
           <BlockIcon
             className='shrink-0 mr-1'
@@ -55,6 +58,17 @@ const BasePanel: FC<BasePanelProps> = ({
             onChange={handleTitleChange}
           />
           <div className='shrink-0 flex items-center text-gray-500'>
+            {
+              canRunBySingle(data.type) && (
+                <TooltipPlus
+                  popupContent='Run this step'
+                >
+                  <div className='flex items-center justify-center mr-1 w-6 h-6 rounded-md hover:bg-black/5 cursor-pointer'>
+                    <Play className='w-4 h-4 text-gray-500' />
+                  </div>
+                </TooltipPlus>
+              )
+            }
             <PanelOperator nodeId={id} />
             <div className='mx-3 w-[1px] h-3.5 bg-gray-200' />
             <div

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

@@ -2,6 +2,7 @@ import { memo } from 'react'
 import type { NodeProps } from 'reactflow'
 import type { Node } from '../types'
 import { BlockEnum } from '../types'
+import { canRunBySingle } from '../utils'
 import {
   NodeComponentMap,
   PanelComponentMap,
@@ -12,6 +13,7 @@ import {
   NodeSourceHandle,
   NodeTargetHandle,
 } from './_base/components/node-handle'
+import NodeControl from './_base/components/node-control'
 
 const CustomNode = memo((props: NodeProps) => {
   const nodeData = props.data
@@ -40,6 +42,13 @@ const CustomNode = memo((props: NodeProps) => {
           />
         )
       }
+      {
+        nodeData.hovering
+        && canRunBySingle(nodeData.type)
+        && (
+          <NodeControl />
+        )
+      }
     </>
   )
 })

web/app/components/workflow/style.css

 .react-flow__node {
-  transition: transform 0.2s ease-in-out;
+  transition: transform 0.1s ease-in-out;
 }
\ No newline at end of file

web/app/components/workflow/utils.ts

@@ -125,7 +125,7 @@ export const getLayoutByDagre = (nodes: Node[], edges: Edge[]) => {
   dagreGraph.setGraph({
     rankdir: 'LR',
     align: 'UL',
-    nodesep: 40,
+    nodesep: 64,
     ranksep: 64,
   })
   nodes.forEach((node) => {
@@ -142,3 +142,14 @@ export const getLayoutByDagre = (nodes: Node[], edges: Edge[]) => {
 
   return dagreGraph
 }
+
+export const canRunBySingle = (nodeType: BlockEnum) => {
+  return nodeType === BlockEnum.LLM
+    || nodeType === BlockEnum.KnowledgeRetrieval
+    || nodeType === BlockEnum.IfElse
+    || nodeType === BlockEnum.Code
+    || nodeType === BlockEnum.TemplateTransform
+    || nodeType === BlockEnum.QuestionClassifier
+    || nodeType === BlockEnum.HttpRequest
+    || nodeType === BlockEnum.Tool
+}