From 1016db160ed1d35ad7b5b378705e95b200967ea3 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Mon, 26 Aug 2024 16:09:22 +0800
Subject: [PATCH] feat: parallel hover

---
 .../workflow/hooks/use-nodes-interactions.ts     | 16 ++++++++++++++++
 .../nodes/_base/components/node-handle.tsx       |  7 +++----
 web/app/components/workflow/nodes/_base/node.tsx | 10 ++++++++++
 web/app/components/workflow/types.ts             |  1 +
 web/i18n/en-US/workflow.ts                       |  1 +
 web/i18n/zh-Hans/workflow.ts                     |  1 +
 6 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/web/app/components/workflow/hooks/use-nodes-interactions.ts b/web/app/components/workflow/hooks/use-nodes-interactions.ts
index 45f98bdcd3..b910072ffd 100644
--- a/web/app/components/workflow/hooks/use-nodes-interactions.ts
+++ b/web/app/components/workflow/hooks/use-nodes-interactions.ts
@@ -12,6 +12,7 @@ import type {
 } from 'reactflow'
 import {
   getConnectedEdges,
+  getIncomers,
   getOutgoers,
   useReactFlow,
   useStoreApi,
@@ -207,6 +208,20 @@ export const useNodesInteractions = () => {
       })
     })
     setEdges(newEdges)
+    const incomesNodes = getIncomers(node, nodes, edges)
+    if (incomesNodes.length) {
+      const incomesNodesOutgoersId = incomesNodes.map(incomeNode => getOutgoers(incomeNode, nodes, edges)).flat().map(outgoer => outgoer.id)
+
+      if (incomesNodesOutgoersId.length > 1) {
+        const newNodes = produce(nodes, (draft) => {
+          draft.forEach((n) => {
+            if (incomesNodesOutgoersId.includes(n.id))
+              n.data._inParallelHovering = true
+          })
+        })
+        setNodes(newNodes)
+      }
+    }
   }, [store, workflowStore, getNodesReadOnly])
 
   const handleNodeLeave = useCallback<NodeMouseHandler>((_, node) => {
@@ -229,6 +244,7 @@ export const useNodesInteractions = () => {
     const newNodes = produce(getNodes(), (draft) => {
       draft.forEach((node) => {
         node.data._isEntering = false
+        node.data._inParallelHovering = false
       })
     })
     setNodes(newNodes)
diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 56870f79d6..50734b7eec 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -125,9 +125,8 @@ export const NodeSourceHandle = memo(({
   }, [])
   const handleHandleClick = useCallback((e: MouseEvent) => {
     e.stopPropagation()
-    if (!connected)
-      setOpen(v => !v)
-  }, [connected])
+    setOpen(v => !v)
+  }, [])
   const handleSelect = useCallback((type: BlockEnum, toolDefaultValue?: ToolDefaultValue) => {
     handleNodeAdd(
       {
@@ -163,7 +162,7 @@ export const NodeSourceHandle = memo(({
         onClick={handleHandleClick}
       >
         {
-          !connected && isConnectable && !getNodesReadOnly() && (
+          isConnectable && !getNodesReadOnly() && (
             <BlockSelector
               open={open}
               onOpenChange={handleOpenChange}
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 0b45c80888..bd5921c735 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@@ -14,6 +14,7 @@ import {
   RiErrorWarningLine,
   RiLoader2Line,
 } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
 import type { NodeProps } from '../../types'
 import {
   BlockEnum,
@@ -43,6 +44,7 @@ const BaseNode: FC<BaseNodeProps> = ({
   data,
   children,
 }) => {
+  const { t } = useTranslation()
   const nodeRef = useRef<HTMLDivElement>(null)
   const { nodesReadOnly } = useNodesReadOnly()
   const { handleNodeIterationChildSizeChange } = useNodeIterationInteractions()
@@ -80,6 +82,7 @@ const BaseNode: FC<BaseNodeProps> = ({
       className={cn(
         'flex border-[2px] rounded-2xl',
         showSelectedBorder ? 'border-components-option-card-option-selected-border' : 'border-transparent',
+        !showSelectedBorder && data._inParallelHovering && 'border-workflow-block-border-highlight',
       )}
       ref={nodeRef}
       style={{
@@ -100,6 +103,13 @@ const BaseNode: FC<BaseNodeProps> = ({
           data._isBundled && '!shadow-lg',
         )}
       >
+        {
+          data._inParallelHovering && (
+            <div className='absolute left-2 -top-2.5 top system-2xs-medium-uppercase text-text-tertiary z-10'>
+              {t('workflow.common.parallelRun')}
+            </div>
+          )
+        }
         {
           data._showAddVariablePopup && (
             <AddVariablePopupWithPosition
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index 034376fed5..c53a09e0b6 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -54,6 +54,7 @@ export type CommonNodeType<T = {}> = {
   _holdAddVariablePopup?: boolean
   _iterationLength?: number
   _iterationIndex?: number
+  _inParallelHovering?: boolean
   isIterationStart?: boolean
   isInIteration?: boolean
   iteration_id?: string
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index e0613a110f..990f54d7c1 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/web/i18n/en-US/workflow.ts
@@ -77,6 +77,7 @@ const translation = {
     overwriteAndImport: 'Overwrite and Import',
     importFailure: 'Import failure',
     importSuccess: 'Import success',
+    parallelRun: 'Parallel Run',
   },
   env: {
     envPanelTitle: 'Environment Variables',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index f57eb40bb0..fd068b4e89 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -77,6 +77,7 @@ const translation = {
     overwriteAndImport: '覆盖并导入',
     importFailure: '导入失败',
     importSuccess: '导入成功',
+    parallelRun: '并行运行',
   },
   env: {
     envPanelTitle: '环境变量',