feat(workflow): add node position indicator and prevent event propagation

Add node position indicator to workflow run panel when not in publish mode. Also prevent event propagation when clicking the position indicator to avoid unintended panel toggling.

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

@@ -36,7 +36,8 @@ const NodePosition = ({
     >
       <div
         className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
-        onClick={() => {
+        onClick={(e) => {
+          e.stopPropagation()
           setViewport({
             x: (clientWidth - 400 - nodeWidth * zoom) / 2 - nodePosition.x * zoom,
             y: (clientHeight - nodeHeight * zoom) / 2 - nodePosition.y * zoom,

web/app/components/workflow/run/node.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import type { FC } from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import {
   RiAlertFill,
   RiArrowRightSLine,
@@ -30,6 +30,9 @@ import ErrorHandleTip from '@/app/components/workflow/nodes/_base/components/err
 import { hasRetryNode } from '@/app/components/workflow/utils'
 import { useDocLink } from '@/context/i18n'
 import Tooltip from '@/app/components/base/tooltip'
+import NodePosition from '@/app/components/workflow/nodes/_base/components/node-position'
+import type { XYPosition } from 'reactflow'
+import { WorkflowHistoryStoreContext } from '@/app/components/workflow/workflow-history-store'
 
 type Props = {
   className?: string
@@ -60,6 +63,24 @@ const NodePanel: FC<Props> = ({
   notShowIterationNav,
   notShowLoopNav,
 }) => {
+  const { store } = useContext(WorkflowHistoryStoreContext)
+  let inPublishMode = true
+  let hasNode = false
+  let nodePosition: XYPosition = { x: 0, y: 0 }
+  let nodeWidth = 0
+  let nodeHeight = 0
+
+  if (store) {
+    inPublishMode = false
+    const nodes = store.getState().nodes
+    const currentNodeIndex = nodes.findIndex(node => node.id === nodeInfo.node_id)
+    const currentNode = nodes[currentNodeIndex]
+    nodePosition = currentNode?.position ?? { x: -1, y: -1 }
+    nodeWidth = currentNode?.width ?? -1
+    nodeHeight = currentNode?.height ?? -1
+    hasNode = !!currentNode
+  }
+
   const [collapseState, doSetCollapseState] = useState<boolean>(true)
   const setCollapseState = useCallback((state: boolean) => {
     if (hideProcessDetail)
@@ -161,6 +182,11 @@ const NodePanel: FC<Props> = ({
               <RiLoader2Line className='h-3.5 w-3.5 animate-spin' />
             </div>
           )}
+          {!inPublishMode && (
+            <div className='ml-1' style={{ pointerEvents: hasNode ? 'auto' : 'none', opacity: hasNode ? 1 : 0.5 }}>
+              <NodePosition nodePosition={nodePosition} nodeWidth={nodeWidth} nodeHeight={nodeHeight}></NodePosition>
+            </div>
+          )}
         </div>
         {!collapseState && !hideProcessDetail && (
           <div className='px-1 pb-1'>