From e7aa2f5139713ed64490c1043e30b4b5ead54148 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Thu, 18 Jun 2026 12:54:44 +0800
Subject: [PATCH 1/5] feat: enhance NodesPopover and NodeToolbar with new input
 fields and tooltips for improved user interaction; update i18n for new button
 labels

---
 .../src/components/elements/NodeToolbar.vue   | 69 ++++++++++++++-----
 .../src/components/elements/NodesPopover.vue  | 11 +++
 .../dag/src/composables/useCanvasOperation.ts | 18 ++---
 .../src/composables/useFetchConnections.ts    | 29 ++++++--
 packages/i18n/src/locale/lang/en.js           |  2 +
 packages/i18n/src/locale/lang/zh-CN.js        |  2 +
 packages/i18n/src/locale/lang/zh-TW.js        |  2 +
 7 files changed, 104 insertions(+), 29 deletions(-)

diff --git a/packages/dag/src/components/elements/NodeToolbar.vue b/packages/dag/src/components/elements/NodeToolbar.vue
index 810c3a90b..f8668a558 100644
--- a/packages/dag/src/components/elements/NodeToolbar.vue
+++ b/packages/dag/src/components/elements/NodeToolbar.vue
@@ -25,22 +25,59 @@ const handleToggleDisable = () => {
       class="node-toolbar-actions rounded-lg p-0.5 cursor-pointer"
       style="--btn-space: 2px"
     >
-      <el-button text size="xs" @click.stop="handlePreview?.(node.id)">
-        <template #icon>
-          <i-lucide-play />
-        </template>
-      </el-button>
-      <el-button text size="xs" @click.stop="handleToggleDisable">
-        <template #icon>
-          <i-lucide-power-off v-if="node.disabled" />
-          <i-lucide-power v-else />
-        </template>
-      </el-button>
-      <el-button text type="danger" size="xs" @click="handleDelete">
-        <template #icon>
-          <i-lucide-trash-2 />
-        </template>
-      </el-button>
+      <el-tooltip
+        effect="light"
+        placement="top"
+        :show-arrow="false"
+        :show-after="300"
+        :hide-after="0"
+        :enterable="false"
+        :offset="4"
+        :content="$t('public_button_preview')"
+      >
+        <el-button text size="xs" @click.stop="handlePreview?.(node.id)">
+          <template #icon>
+            <i-lucide-play />
+          </template>
+        </el-button>
+      </el-tooltip>
+      <el-tooltip
+        effect="light"
+        placement="top"
+        :show-arrow="false"
+        :show-after="300"
+        :hide-after="0"
+        :enterable="false"
+        :offset="4"
+        :content="
+          node.disabled
+            ? $t('public_button_enable')
+            : $t('public_button_disable')
+        "
+      >
+        <el-button text size="xs" @click.stop="handleToggleDisable">
+          <template #icon>
+            <i-lucide-power-off v-if="node.disabled" />
+            <i-lucide-power v-else />
+          </template>
+        </el-button>
+      </el-tooltip>
+      <el-tooltip
+        effect="light"
+        placement="top"
+        :show-arrow="false"
+        :show-after="300"
+        :hide-after="0"
+        :enterable="false"
+        :offset="4"
+        :content="$t('public_button_delete')"
+      >
+        <el-button text type="danger" size="xs" @click="handleDelete">
+          <template #icon>
+            <i-lucide-trash-2 />
+          </template>
+        </el-button>
+      </el-tooltip>
     </div>
   </div>
 </template>
diff --git a/packages/dag/src/components/elements/NodesPopover.vue b/packages/dag/src/components/elements/NodesPopover.vue
index b0d4fc304..73f5dccd0 100644
--- a/packages/dag/src/components/elements/NodesPopover.vue
+++ b/packages/dag/src/components/elements/NodesPopover.vue
@@ -582,6 +582,17 @@ defineExpose({
               <el-icon><i-lucide-search /></el-icon>
             </template>
           </el-input>
+          <el-input
+            v-else-if="currentConnection"
+            v-model="tableState.query"
+            :placeholder="$t('packages_form_table_rename_index_sousuobiaoming')"
+            clearable
+            @input="runFetchTables"
+          >
+            <template #prefix>
+              <el-icon><i-lucide-search /></el-icon>
+            </template>
+          </el-input>
           <el-input
             v-else
             v-model="tableSearchQuery"
diff --git a/packages/dag/src/composables/useCanvasOperation.ts b/packages/dag/src/composables/useCanvasOperation.ts
index 300fcc756..1b49d6fde 100644
--- a/packages/dag/src/composables/useCanvasOperation.ts
+++ b/packages/dag/src/composables/useCanvasOperation.ts
@@ -27,6 +27,7 @@ import {
 } from '@tap/form/src/shared/validate'
 import { useI18n } from '@tap/i18n'
 import { setPageTitle, uuid } from '@tap/shared'
+import { useVueFlow } from '@vue-flow/core'
 import { cloneDeep, isEmpty } from 'lodash-es'
 import {
   computed,
@@ -60,7 +61,7 @@ import { useFormScope } from './useFormScope'
 
 export function useCanvasOperation() {
   const X_OFFSET = 100
-  const NODE_WIDTH = 242
+  const NODE_WIDTH = 244
   const instance = getCurrentInstance()
   const $ws = (instance?.proxy as any).$ws
   const dataflowStore = useDataflowStore()
@@ -84,6 +85,7 @@ export function useCanvasOperation() {
   const formScope = useFormScope({
     canvasRef,
   })
+  const { findNode, getOutgoers } = useVueFlow()
 
   const buttonShowMap = reactive({
     View: true,
@@ -448,15 +450,15 @@ export function useCanvasOperation() {
     const outputs = node?.$outputs || []
     if (!outputs.length) return
 
+    const canvasNode = findNode(node.id)
     const movedNodeIds = new Set<string>()
-    const offset =
-      (node?.dimensions?.width || node?.width || NODE_WIDTH) + X_OFFSET
+    const offset = (canvasNode?.dimensions?.width || NODE_WIDTH) + X_OFFSET
 
-    const hasMultiInputOutput = outputs.some((outputId: string) =>
-      dataflowStore
+    const hasMultiInputOutput = outputs.some((outputId: string) => {
+      return dataflowStore
         .getAfterNodesInSameBranch(outputId)
-        .some((outputNode: any) => (outputNode?.$inputs?.length || 0) > 1),
-    )
+        .some((outputNode: any) => (outputNode?.$inputs?.length || 0) > 1)
+    })
 
     if (hasMultiInputOutput) {
       node.$inputs?.forEach((inputId: string) => {
@@ -512,8 +514,8 @@ export function useCanvasOperation() {
       historyStore.startRecordingUndo()
     }
 
-    connectAdjacentNodes(node.id, { trackHistory })
     moveDownstreamNodesForward(node, { trackHistory })
+    connectAdjacentNodes(node.id, { trackHistory })
     deleteConnectionsByNodeId(node.id, { trackHistory, trackBulk: false })
 
     dataflowStore.deleteNode(node)
diff --git a/packages/dag/src/composables/useFetchConnections.ts b/packages/dag/src/composables/useFetchConnections.ts
index 5f9984f11..65a975667 100644
--- a/packages/dag/src/composables/useFetchConnections.ts
+++ b/packages/dag/src/composables/useFetchConnections.ts
@@ -31,6 +31,8 @@ export function useFetchConnections() {
   const currentConnectionId = ref('')
   const currentConnection = shallowRef(null)
   const connectionWhere = shallowRef({})
+  let fetchConnectionsAbortController: AbortController | null = null
+  let fetchTablesAbortController: AbortController | null = null
   const tableState = reactive({
     query: '',
     currentPage: 1,
@@ -50,6 +52,9 @@ export function useFetchConnections() {
   )
 
   const handleFetchConnections = async () => {
+    fetchConnectionsAbortController?.abort()
+    fetchConnectionsAbortController = new AbortController()
+
     connectionsLoading.value = true
     const params = {
       page: connectionsCurrentPage.value,
@@ -68,7 +73,9 @@ export function useFetchConnections() {
       params.where.name = { like: query, options: 'i' }
     }
 
-    const data = await fetchConnections(params).finally(() => {
+    const data = await fetchConnections(params, {
+      signal: fetchConnectionsAbortController.signal,
+    }).finally(() => {
       connectionsLoading.value = false
     })
 
@@ -108,7 +115,8 @@ export function useFetchConnections() {
   const runFetchMoreConnections = async (direction: ScrollbarDirection) => {
     if (
       direction !== 'bottom' ||
-      connectionsCurrentPage.value >= connectionsTotalPage.value
+      connectionsCurrentPage.value >= connectionsTotalPage.value ||
+      connectionsLoading.value
     )
       return
 
@@ -152,9 +160,14 @@ export function useFetchConnections() {
       params.fields.source = !sourceId
     }
 
+    fetchTablesAbortController?.abort()
+    fetchTablesAbortController = new AbortController()
+
     tableState.loading = true
 
-    const data = await fetchMetadataInstances(params).finally(() => {
+    const data = await fetchMetadataInstances(params, {
+      signal: fetchTablesAbortController.signal,
+    }).finally(() => {
       tableState.loading = false
     })
 
@@ -181,16 +194,22 @@ export function useFetchConnections() {
       }))
   }
 
-  const runFetchTables = debounce(async () => {
+  const _fetchTablesDebounced = debounce(async () => {
     tableState.currentPage = 1
     const items = await handleFetchTables()
     tables.value = items
   }, 200)
 
+  const runFetchTables = () => {
+    fetchTablesAbortController?.abort()
+    _fetchTablesDebounced()
+  }
+
   const runFetchMoreTables = async (direction: ScrollbarDirection) => {
     if (
       direction !== 'bottom' ||
-      tableState.currentPage >= tableTotalPage.value
+      tableState.currentPage >= tableTotalPage.value ||
+      tableState.loading
     )
       return
 
diff --git a/packages/i18n/src/locale/lang/en.js b/packages/i18n/src/locale/lang/en.js
index e20abc0fb..f3e445853 100644
--- a/packages/i18n/src/locale/lang/en.js
+++ b/packages/i18n/src/locale/lang/en.js
@@ -116,6 +116,8 @@ export default {
   public_button_duplicate: 'Duplicate',
   public_button_details: 'Details',
   public_button_preview: 'Preview',
+  public_button_enable: 'Enable',
+  public_button_disable: 'Disable',
   public_button_reload: 'Reload',
   public_button_restart: 'Restart',
   public_button_start: 'Start',
diff --git a/packages/i18n/src/locale/lang/zh-CN.js b/packages/i18n/src/locale/lang/zh-CN.js
index e06f414ea..3724c13da 100644
--- a/packages/i18n/src/locale/lang/zh-CN.js
+++ b/packages/i18n/src/locale/lang/zh-CN.js
@@ -116,6 +116,8 @@ export default {
   public_button_duplicate: '复制',
   public_button_details: '详情',
   public_button_preview: '预览',
+  public_button_enable: '启用',
+  public_button_disable: '禁用',
   public_button_reload: '重新加载',
   public_button_restart: '重启',
   public_button_start: '启动',
diff --git a/packages/i18n/src/locale/lang/zh-TW.js b/packages/i18n/src/locale/lang/zh-TW.js
index 52380ee21..941ad524b 100644
--- a/packages/i18n/src/locale/lang/zh-TW.js
+++ b/packages/i18n/src/locale/lang/zh-TW.js
@@ -116,6 +116,8 @@ export default {
   public_button_duplicate: '複製',
   public_button_details: '詳情',
   public_button_preview: '預覽',
+  public_button_enable: '啟用',
+  public_button_disable: '停用',
   public_button_reload: '重新加載',
   public_button_restart: '重啟',
   public_button_start: '啟動',

From a4c71a2cdc8d40622d63c323bc33bfe8daeaf66e Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Thu, 18 Jun 2026 18:38:19 +0800
Subject: [PATCH 2/5] chore: update @vue-flow/core and @vue-flow/background
 dependencies to version 1.48.2 in pnpm-lock.yaml and package.json for
 improved compatibility

---
 packages/dag/package.json |  2 +-
 pnpm-lock.yaml            | 27 ++++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/dag/package.json b/packages/dag/package.json
index df98790a3..84a07bfbc 100644
--- a/packages/dag/package.json
+++ b/packages/dag/package.json
@@ -27,7 +27,7 @@
     "@tap/i18n": "workspace:*",
     "@tap/shared": "workspace:*",
     "@vue-flow/background": "^1.3.2",
-    "@vue-flow/core": "^1.47.0",
+    "@vue-flow/core": "^1.48.2",
     "@vueuse/core": "catalog:",
     "axios": "catalog:",
     "core-js": "catalog:",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d94b34d30..a46f88d41 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -924,10 +924,10 @@ importers:
         version: link:../shared
       '@vue-flow/background':
         specifier: ^1.3.2
-        version: 1.3.2(@vue-flow/core@1.47.0(vue@3.5.25(typescript@5.8.3)))(vue@3.5.25(typescript@5.8.3))
+        version: 1.3.2(@vue-flow/core@1.48.2(vue@3.5.25(typescript@5.8.3)))(vue@3.5.25(typescript@5.8.3))
       '@vue-flow/core':
-        specifier: ^1.47.0
-        version: 1.47.0(vue@3.5.25(typescript@5.8.3))
+        specifier: ^1.48.2
+        version: 1.48.2(vue@3.5.25(typescript@5.8.3))
       '@vueuse/core':
         specifier: 'catalog:'
         version: 14.0.0(vue@3.5.25(typescript@5.8.3))
@@ -2635,6 +2635,11 @@ packages:
     peerDependencies:
       vue: ^3.3.0
 
+  '@vue-flow/core@1.48.2':
+    resolution: {integrity: sha512-raxhgKWE+G/mcEvXJjGFUDYW9rAI3GOtiHR3ZkNpwBWuIaCC1EYiBmKGwJOoNzVFgwO7COgErnK7i08i287AFA==}
+    peerDependencies:
+      vue: ^3.3.0
+
   '@vue/babel-helper-vue-transform-on@2.0.1':
     resolution: {integrity: sha512-uZ66EaFbnnZSYqYEyplWvn46GhZ1KuYSThdT68p+am7MgBNbQ3hphTL9L+xSIsWkdktwhPYLwPgVWqo96jDdRA==}
 
@@ -7785,6 +7790,11 @@ snapshots:
       '@vue-flow/core': 1.47.0(vue@3.5.25(typescript@5.8.3))
       vue: 3.5.25(typescript@5.8.3)
 
+  '@vue-flow/background@1.3.2(@vue-flow/core@1.48.2(vue@3.5.25(typescript@5.8.3)))(vue@3.5.25(typescript@5.8.3))':
+    dependencies:
+      '@vue-flow/core': 1.48.2(vue@3.5.25(typescript@5.8.3))
+      vue: 3.5.25(typescript@5.8.3)
+
   '@vue-flow/core@1.47.0(vue@3.5.25(typescript@5.8.3))':
     dependencies:
       '@vueuse/core': 10.11.1(vue@3.5.25(typescript@5.8.3))
@@ -7796,6 +7806,17 @@ snapshots:
     transitivePeerDependencies:
       - '@vue/composition-api'
 
+  '@vue-flow/core@1.48.2(vue@3.5.25(typescript@5.8.3))':
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.5.25(typescript@5.8.3))
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.5.25(typescript@5.8.3)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   '@vue/babel-helper-vue-transform-on@2.0.1': {}
 
   '@vue/babel-plugin-jsx@2.0.1(@babel/core@7.28.5)':

From c3ce3a04034b0fae84efa74d5ea6636e1d7ba49a Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Fri, 19 Jun 2026 08:56:09 +0800
Subject: [PATCH 3/5] refactor(CanvasNode.vue): replace v-if with v-show for
 source and target handles, and add connectable prop for improved performance
 and rendering

---
 packages/dag/src/components/elements/CanvasNode.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/dag/src/components/elements/CanvasNode.vue b/packages/dag/src/components/elements/CanvasNode.vue
index dba7a9be4..e51122c2a 100644
--- a/packages/dag/src/components/elements/CanvasNode.vue
+++ b/packages/dag/src/components/elements/CanvasNode.vue
@@ -110,13 +110,15 @@ const canBeTarget = computed(() => {
 
       <template #extra>
         <NodeSourceHandle
-          v-if="canBeSource"
+          v-show="canBeSource"
+          :connectable="canBeSource"
           v-bind="$attrs"
           :node="props.data"
           class="canvas-node-handle z-1"
         />
         <NodeTargetHandle
-          v-if="canBeTarget"
+          v-show="canBeTarget"
+          :connectable="canBeTarget"
           v-bind="$attrs"
           :node="props.data"
           class="canvas-node-handle z-1"

From 3431c9c99cdf947c13e09f1f7457f35eea820944 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Mon, 22 Jun 2026 11:05:25 +0800
Subject: [PATCH 4/5] feat(Canvas): implement right panel width observation and
 enhance fit view functionality; add locate selected node feature in
 EditorView with corresponding styles and translations

---
 packages/assets/styles/utilities.scss         |  10 +-
 packages/dag/src/Canvas.vue                   |  93 ++++++++++---
 packages/dag/src/EditorView.vue               |  29 +++++
 .../dag/src/composables/useCanvasOperation.ts |   8 +-
 packages/dag/src/composables/useLayout.ts     | 122 ++++++++++++++----
 packages/dag/src/composables/useNodeFocus.ts  |  30 +++--
 packages/dag/src/locale/lang/en.js            |   1 +
 packages/dag/src/locale/lang/zh-CN.js         |   1 +
 packages/dag/src/locale/lang/zh-TW.js         |   1 +
 9 files changed, 238 insertions(+), 57 deletions(-)

diff --git a/packages/assets/styles/utilities.scss b/packages/assets/styles/utilities.scss
index ee896bb9f..9df39b2f7 100644
--- a/packages/assets/styles/utilities.scss
+++ b/packages/assets/styles/utilities.scss
@@ -389,7 +389,7 @@
 }
 
 .shadow-lg {
-  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
+  box-shadow: rgba(16, 24, 40, 0.03) 0px 4px 6px -2px, rgba(16, 24, 40, 0.08) 0px 12px 16px -4px !important;
 }
 
 .shadow-canvas {
@@ -734,8 +734,8 @@
   height: 1.25rem !important;
 }
 
-.h-5 {
-  height: 1.25rem !important;
+.h-6 {
+  height: 1.5rem !important;
 }
 
 .h-7 {
@@ -12816,6 +12816,10 @@
   background-color: var(--primary-hover-light);
 }
 
+.hover\:color-primary:hover {
+  color: var(--color-primary)
+}
+
 .break-all {
   word-break: break-all;
 }
diff --git a/packages/dag/src/Canvas.vue b/packages/dag/src/Canvas.vue
index 71b16aff4..d657c7df4 100644
--- a/packages/dag/src/Canvas.vue
+++ b/packages/dag/src/Canvas.vue
@@ -74,7 +74,6 @@ const dag = inject('dag')
 const nodesPanelExpanded = inject<Ref<boolean>>('nodesPanelExpanded', ref(true))
 const needsFitView = inject<Ref<boolean>>('needsFitView', ref(true))
 // Bottom bar dynamic positioning
-const RIGHT_PANEL_WIDTH = 600
 const PANEL_MARGIN = 12
 
 // Observe actual width of the left panel slot content
@@ -126,9 +125,33 @@ function observeBottomBar() {
   bottomBarResizeObserver.observe(bottomBarRef.value)
 }
 
+// Observe actual width of the right panel
+const rightPanelRef =
+  useTemplateRef<InstanceType<typeof RightPanel>>('rightPanel')
+const rightPanelWidth = ref(0)
+let rightPanelResizeObserver: ResizeObserver | null = null
+
+function observeRightPanel() {
+  const el = rightPanelRef.value?.$el as HTMLElement | undefined
+  if (!el) return
+  rightPanelResizeObserver?.disconnect()
+  rightPanelResizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      rightPanelWidth.value = entry.contentRect.width
+    }
+  })
+  rightPanelResizeObserver.observe(el)
+}
+
+const rightPanelExpanded = computed(() => {
+  return dataflowStore.selectedNode || dataflowStore.showSettings
+})
+
 const { layout, fitViewWithOffset } = useLayout({
   nodesPanelExpanded,
   nodesPanelWidth: leftPanelWidth,
+  rightPanelExpanded,
+  rightPanelWidth,
   bottomPanelHeight: bottomBarHeight,
 })
 
@@ -232,6 +255,9 @@ onMounted(() => {
     }
   }
 
+  // Start observing the right panel width
+  observeRightPanel()
+
   // Start observing the bottom bar height
   observeBottomBar()
 
@@ -247,6 +273,7 @@ onUnmounted(() => {
   dataflowStore.unregisterVueFlowUpdateCallback()
   leftPanelResizeObserver?.disconnect()
   leftPanelMutationObserver?.disconnect()
+  rightPanelResizeObserver?.disconnect()
   bottomBarResizeObserver?.disconnect()
 })
 
@@ -256,8 +283,8 @@ const bottomBarStyle = computed(() => {
       ? `${leftPanelWidth.value + 20}px`
       : `${PANEL_MARGIN}px`
   const right =
-    dataflowStore.selectedNode || dataflowStore.showSettings
-      ? `${RIGHT_PANEL_WIDTH + 20}px`
+    rightPanelWidth.value > 0
+      ? `${rightPanelWidth.value + 20}px`
       : `${PANEL_MARGIN}px`
   return { left, right }
 })
@@ -630,10 +657,47 @@ function clearTextSelection() {
   window.getSelection()?.removeAllRanges()
 }
 
+/**
+ * Returns true if any visible node is entirely outside the current viewport.
+ * Uses the full container width (right panel excluded – it's closing after deselect).
+ */
+function hasNodesOutsideView(): boolean {
+  const visibleNodes = getNodes.value.filter((n) => !n.hidden)
+  if (!visibleNodes.length) return false
+
+  const container = document.querySelector('#node-canvas') as HTMLElement | null
+  if (!container) return false
+
+  const { x: vx, y: vy, zoom } = viewport.value
+  const cw = container.clientWidth
+  const ch = container.clientHeight
+  const leftOffset = nodesPanelExpanded.value ? leftPanelWidth.value : 0
+  const bottomOffset = Math.max(0, bottomBarHeight.value - 44)
+
+  return visibleNodes.some((node) => {
+    const w = node.dimensions?.width ?? 150
+    const h = node.dimensions?.height ?? 50
+    const sl = node.position.x * zoom + vx
+    const st = node.position.y * zoom + vy
+    const sr = sl + w * zoom
+    const sb = st + h * zoom
+    // Trigger if node is not fully contained within the visible area
+    return sl < leftOffset || sr > cw || st < 0 || sb > ch - bottomOffset
+  })
+}
+
 function onPaneClick(event: MouseEvent) {
+  const readyFit = rightPanelExpanded.value
   const pos = screenToFlowCoordinate({ x: event.clientX, y: event.clientY })
   dataflowStore.lastClickPosition = [pos.x, pos.y]
   dataflowStore.selectNode(null)
+
+  if (readyFit && hasNodesOutsideView()) {
+    fitViewWithOffset({
+      duration: 300,
+      maxZoom: 1,
+    })
+  }
 }
 
 function onSelectionEnd(event: MouseEvent) {
@@ -707,14 +771,6 @@ function handleLayoutGraph() {
   })
 }
 
-// const hasInit = ref(false)
-// function onInitialized() {
-//   if (hasInit.value) return
-//   console.log('fitViewWithOffset', bottomBarHeight.value)
-//   fitViewWithOffset({ duration: 0, maxZoom: 1 })
-//   hasInit.value = true
-// }
-
 provide('popoverTarget', popoverTarget)
 provide('showPopover', showPopover)
 provide('popoverTargetKey', popoverTargetKey)
@@ -724,6 +780,7 @@ provide('onCreateConnection', onCreateConnection)
 provide('onDeleteConnection', onDeleteConnection)
 provide('onMoveNodePosition', onMoveNodePosition)
 provide('handleDisableNode', handleDisableNode)
+provide('fitViewWithOffset', fitViewWithOffset)
 
 // Expose helper-line updaters so that NodesPanel drag can show guide lines
 provide(
@@ -751,11 +808,10 @@ provide('clearDragHelperLines', () => {
 function locateNode(nodeId: string) {
   const node = vueFlow.findNode(nodeId)
   if (!node) return
-  vueFlow.fitView({
+  fitViewWithOffset({
     nodes: [nodeId],
     duration: 300,
-    maxZoom: 1,
-    padding: 0.5,
+    maxZoom: viewport.value.zoom,
   })
 }
 
@@ -766,11 +822,10 @@ function ensureNodesVisible(nodeIds: string[]) {
   if (!nodeIds.length) return
   const existingIds = nodeIds.filter((id) => vueFlow.findNode(id))
   if (!existingIds.length) return
-  vueFlow.fitView({
+  fitViewWithOffset({
     nodes: existingIds,
-    duration: 200,
-    maxZoom: viewport.value.zoom, // 不放大，保持当前缩放
-    padding: 0.2,
+    duration: 300,
+    maxZoom: viewport.value.zoom,
   })
 }
 
@@ -818,7 +873,7 @@ defineExpose({
       </slot>
     </div>
 
-    <RightPanel />
+    <RightPanel ref="rightPanel" />
 
     <!-- Empty state overlay -->
     <Transition name="empty-state">
diff --git a/packages/dag/src/EditorView.vue b/packages/dag/src/EditorView.vue
index 675093bf0..67dd7ec67 100644
--- a/packages/dag/src/EditorView.vue
+++ b/packages/dag/src/EditorView.vue
@@ -484,6 +484,11 @@ async function checkMaterializedView() {
   }, 120)
 }
 
+function locateSelectedNode() {
+  const node = dataflowStore.selectedNode as any
+  if (node?.id) canvasRef.value?.locateNode(node.id)
+}
+
 provide('dag', dag)
 provide('nodesPanelExpanded', nodesPanelExpanded)
 provide('buttonShowMap', buttonShowMap)
@@ -554,6 +559,17 @@ provide('isSyncTask', isSyncTask)
     </div>
     <div class="w-100 h-0 position-absolute header z-10 flex align-center px-3">
       <div class="flex-1" />
+
+      <Transition name="locate-node-fade">
+        <div
+          v-if="dataflowStore.selectedNode"
+          class="position-absolute start-50 top-50 translate-middle flex h-6 text-xs cursor-pointer items-center justify-center rounded-lg px-3 shadow-lg hover:color-primary bg-overlay fw-sub font-color-light"
+          @click="locateSelectedNode"
+        >
+          {{ $t('packages_dag_locate_selected_node') }}
+        </div>
+      </Transition>
+
       <TaskOperations
         v-if="dataflow.id"
         ref="taskOperationsRef"
@@ -607,6 +623,19 @@ provide('isSyncTask', isSyncTask)
 .header {
   top: 28px;
 }
+
+.locate-node-fade-enter-active,
+.locate-node-fade-leave-active {
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.locate-node-fade-enter-from,
+.locate-node-fade-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-4px);
+}
 :deep(.btn-shadow) {
   box-shadow:
     rgba(0, 0, 0, 0) 0px 0px 0px 0px,
diff --git a/packages/dag/src/composables/useCanvasOperation.ts b/packages/dag/src/composables/useCanvasOperation.ts
index 1b49d6fde..61a71f009 100644
--- a/packages/dag/src/composables/useCanvasOperation.ts
+++ b/packages/dag/src/composables/useCanvasOperation.ts
@@ -85,7 +85,7 @@ export function useCanvasOperation() {
   const formScope = useFormScope({
     canvasRef,
   })
-  const { findNode, getOutgoers } = useVueFlow()
+  const { findNode, getOutgoers, viewport } = useVueFlow()
 
   const buttonShowMap = reactive({
     View: true,
@@ -374,6 +374,12 @@ export function useCanvasOperation() {
 
   const onClickNode = (node: any) => {
     dataflowStore.selectNode(node.data)
+    // canvasRef.value.fitViewWithOffset({
+    //   nodes: [node.data.id],
+    //   duration: 300,
+    //   maxZoom: viewport.value.zoom,
+    //   padding: 0.2,
+    // })
   }
 
   const deleteConnectionsByNodeId = (
diff --git a/packages/dag/src/composables/useLayout.ts b/packages/dag/src/composables/useLayout.ts
index de821f3ea..c34247c2e 100644
--- a/packages/dag/src/composables/useLayout.ts
+++ b/packages/dag/src/composables/useLayout.ts
@@ -12,11 +12,61 @@ import { ref, unref, type Ref } from 'vue'
 
 export type LayoutDirection = 'LR' | 'TB' | 'RL' | 'BT'
 
-export interface FitViewWithOffsetOptions {
-  duration?: number
-  minZoom?: number
-  maxZoom?: number
-  padding?: number
+// Same shape as FitViewParams – re-exported for callers that want explicit typing
+export type FitViewWithOffsetOptions = FitViewParams
+
+type PaddingScalar = string | number | undefined
+
+/** Parse a single padding value to pixels. Numbers are treated as px; '48px' → 48; '10%' is not supported here. */
+function parsePaddingPx(val: PaddingScalar): number {
+  if (val === undefined) return 0
+  if (typeof val === 'number') return val
+  if (val.endsWith('px')) return Number.parseFloat(val)
+  return 0
+}
+
+/**
+ * Resolve FitViewParams['padding'] into:
+ *  - `ratio`  – fractional padding passed to getTransformForBounds (when padding is a plain number / %-string)
+ *  - pixel insets for each side (when padding is an object or px-string)
+ */
+function resolvePadding(padding: FitViewParams['padding']): {
+  ratio: number
+  top: number
+  right: number
+  bottom: number
+  left: number
+} {
+  if (padding === undefined) {
+    return { ratio: 0.1, top: 0, right: 0, bottom: 0, left: 0 }
+  }
+  if (typeof padding === 'number') {
+    return { ratio: padding, top: 0, right: 0, bottom: 0, left: 0 }
+  }
+  if (typeof padding === 'string') {
+    if (padding.endsWith('%')) {
+      return {
+        ratio: Number.parseFloat(padding) / 100,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+      }
+    }
+    // px string – apply uniformly as pixel insets
+    const px = parsePaddingPx(padding)
+    return { ratio: 0, top: px, right: px, bottom: px, left: px }
+  }
+  // Object form: { top?, right?, bottom?, left?, x?, y? }
+  const xPx = parsePaddingPx((padding as any).x)
+  const yPx = parsePaddingPx((padding as any).y)
+  return {
+    ratio: 0,
+    top: parsePaddingPx((padding as any).top) || yPx,
+    right: parsePaddingPx((padding as any).right) || xPx,
+    bottom: parsePaddingPx((padding as any).bottom) || yPx,
+    left: parsePaddingPx((padding as any).left) || xPx,
+  }
 }
 
 /**
@@ -26,6 +76,8 @@ export interface FitViewWithOffsetOptions {
 export function useLayout(options?: {
   nodesPanelExpanded?: Ref<boolean>
   nodesPanelWidth?: Ref<number> | number
+  rightPanelExpanded?: Ref<boolean>
+  rightPanelWidth?: Ref<number> | number
   bottomPanelHeight?: Ref<number> | number
   canvasSelector?: string
 }) {
@@ -33,6 +85,8 @@ export function useLayout(options?: {
 
   const nodesPanelExpanded = options?.nodesPanelExpanded
   const nodesPanelWidth = options?.nodesPanelWidth ?? 260
+  const rightPanelExpanded = options?.rightPanelExpanded
+  const rightPanelWidth = options?.rightPanelWidth ?? 0
   const bottomPanelHeight = options?.bottomPanelHeight ?? 0
   const canvasSelector = options?.canvasSelector ?? '#node-canvas'
 
@@ -91,38 +145,62 @@ export function useLayout(options?: {
   }
 
   /**
-   * Fit view with panel offset - avoids left NodesPanel overlap
+   * Fit view with panel offset - avoids left/right panel overlap.
+   * Supports the same options as VueFlow's fitView: nodes, includeHiddenNodes, padding, minZoom, maxZoom, duration.
    */
   function fitViewWithOffset(opts: FitViewParams = {}) {
-    const { duration = 200, minZoom = 0.1, maxZoom = 10, padding = 0.1 } = opts
+    const {
+      duration = 200,
+      minZoom = 0.1,
+      maxZoom = 10,
+      nodes: nodeIds,
+      includeHiddenNodes = false,
+    } = opts
 
     // Get canvas container dimensions
     const container = document.querySelector(canvasSelector)
     if (!container) {
-      fitView({ duration, padding })
+      fitView(opts)
       return
     }
 
     const containerWidth = container.clientWidth
     const containerHeight = container.clientHeight
 
-    // Calculate offsets for panels
+    // Calculate panel offsets
     const leftOffset = nodesPanelExpanded?.value ? unref(nodesPanelWidth) : 0
-    const bottomOffset = unref(bottomPanelHeight) - 44 // 减去 bar 的高度
+    const rightOffset = rightPanelExpanded.value ? unref(rightPanelWidth) : 0
+    const bottomOffset = unref(bottomPanelHeight) - 44 // 减去 toolbar 的高度
+
+    // Resolve padding into ratio + per-side pixel insets
+    const {
+      ratio,
+      top: padTop,
+      right: padRight,
+      bottom: padBottom,
+      left: padLeft,
+    } = resolvePadding(opts.padding)
+
+    // Filter nodes: optionally by ID list and visibility
+    let graphNodes = getNodes.value
+    if (nodeIds?.length) {
+      const idSet = new Set(nodeIds)
+      graphNodes = graphNodes.filter((n) => idSet.has(n.id))
+    }
+    if (!includeHiddenNodes) {
+      graphNodes = graphNodes.filter((n) => !n.hidden)
+    }
 
-    // Get bounds of all nodes using VueFlow's internal GraphNodes
-    const graphNodes = getNodes.value
     if (graphNodes.length === 0) {
-      fitView({ duration, padding })
+      fitView(opts)
       return
     }
 
-    // Calculate viewport for the adjusted container area
-    // Subtract left panel width from available width, bottom panel height from available height
-    const availableWidth = containerWidth - leftOffset
-    const availableHeight = containerHeight - bottomOffset
+    // Available viewport area after subtracting panels and pixel padding
+    const availableWidth =
+      containerWidth - leftOffset - rightOffset - padLeft - padRight
+    const availableHeight = containerHeight - bottomOffset - padTop - padBottom
 
-    // Use VueFlow's utility functions
     const bounds = getRectOfNodes(graphNodes)
     const newViewport = getTransformForBounds(
       bounds,
@@ -130,14 +208,14 @@ export function useLayout(options?: {
       availableHeight,
       minZoom,
       maxZoom,
-      padding,
+      ratio,
     )
 
-    // Offset the x position to account for the left panel
+    // Shift origin to account for left panel + left pixel padding (and top pixel padding)
     setViewport(
       {
-        x: newViewport.x + leftOffset,
-        y: newViewport.y,
+        x: newViewport.x + leftOffset + padLeft,
+        y: newViewport.y + padTop,
         zoom: newViewport.zoom,
       },
       { duration },
diff --git a/packages/dag/src/composables/useNodeFocus.ts b/packages/dag/src/composables/useNodeFocus.ts
index bdfeb0645..602d9c710 100644
--- a/packages/dag/src/composables/useNodeFocus.ts
+++ b/packages/dag/src/composables/useNodeFocus.ts
@@ -1,5 +1,5 @@
 import { useVueFlow } from '@vue-flow/core'
-import { watch } from 'vue'
+import { inject, nextTick, watch } from 'vue'
 import { useDataflowStore } from '../stores/dataflow.store'
 
 /**
@@ -18,6 +18,8 @@ export function useNodeFocus() {
     viewport,
   } = useVueFlow()
 
+  const fitViewWithOffset = inject('fitViewWithOffset')!
+
   const dataflowStore = useDataflowStore()
 
   /**
@@ -34,12 +36,15 @@ export function useNodeFocus() {
     if (graphNode && graphNode.dimensions?.width > 0) {
       removeSelectedNodes(getNodes.value)
       addSelectedNodes([graphNode])
-      fitView({
-        nodes: [nodeId],
-        duration: 200,
-        maxZoom: viewport.value.zoom,
-        padding: 0.2,
+      nextTick(() => {
+        fitViewWithOffset({
+          nodes: [nodeId],
+          duration: 200,
+          maxZoom: viewport.value.zoom,
+          padding: 0.2,
+        })
       })
+
       return
     }
 
@@ -54,11 +59,13 @@ export function useNodeFocus() {
             removeSelectedNodes(getNodes.value)
             addSelectedNodes([node])
           }
-          fitView({
-            nodes: [nodeId],
-            duration: 200,
-            maxZoom: viewport.value.zoom,
-            padding: 0.2,
+          nextTick(() => {
+            fitViewWithOffset({
+              nodes: [nodeId],
+              duration: 200,
+              maxZoom: viewport.value.zoom,
+              padding: 0.2,
+            })
           })
         }
       },
@@ -68,4 +75,3 @@ export function useNodeFocus() {
 
   return { focusNode }
 }
-
diff --git a/packages/dag/src/locale/lang/en.js b/packages/dag/src/locale/lang/en.js
index ba7f7b5ab..69da39b94 100644
--- a/packages/dag/src/locale/lang/en.js
+++ b/packages/dag/src/locale/lang/en.js
@@ -1268,4 +1268,5 @@ export default {
   packages_dag_data_capture_event_time: 'Event Time',
   packages_dag_data_capture_event_id: 'Event ID',
   packages_dag_data_capture_original_data: 'Original Data',
+  packages_dag_locate_selected_node: 'Locate Selected Node',
 }
diff --git a/packages/dag/src/locale/lang/zh-CN.js b/packages/dag/src/locale/lang/zh-CN.js
index e2ac33460..b2015b16a 100644
--- a/packages/dag/src/locale/lang/zh-CN.js
+++ b/packages/dag/src/locale/lang/zh-CN.js
@@ -1113,4 +1113,5 @@ export default {
   packages_dag_data_capture_event_time: '事件时间',
   packages_dag_data_capture_event_id: '事件ID',
   packages_dag_data_capture_original_data: '原始数据',
+  packages_dag_locate_selected_node: '滚动至选中节点',
 }
diff --git a/packages/dag/src/locale/lang/zh-TW.js b/packages/dag/src/locale/lang/zh-TW.js
index 6a2148270..89472c8b1 100644
--- a/packages/dag/src/locale/lang/zh-TW.js
+++ b/packages/dag/src/locale/lang/zh-TW.js
@@ -1080,4 +1080,5 @@ export default {
   packages_dag_data_capture_event_time: '事件時間',
   packages_dag_data_capture_event_id: '事件ID',
   packages_dag_data_capture_original_data: '原始數據',
+  packages_dag_locate_selected_node: '捲動至選取節點',
 }

From 806b945cb7c75c1654d4b1e6421b9a69f545648c Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Mon, 22 Jun 2026 11:27:39 +0800
Subject: [PATCH 5/5] feat(NodesPopover): implement immediate hiding of popper
 to prevent position drift during DOM updates

---
 .../src/components/elements/NodesPopover.vue  | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/packages/dag/src/components/elements/NodesPopover.vue b/packages/dag/src/components/elements/NodesPopover.vue
index 73f5dccd0..c1474efde 100644
--- a/packages/dag/src/components/elements/NodesPopover.vue
+++ b/packages/dag/src/components/elements/NodesPopover.vue
@@ -195,9 +195,27 @@ const handleMouseDown = (event: MouseEvent) => {
   }
 }
 
+/**
+ * 立即隐藏 popper（同步设置 visibility:hidden），再设 show=false。
+ * 目的：防止图结构变化（如删除连线）导致 Popper.js 在 DOM 移除前重算位置产生漂移。
+ */
+function hideImmediately() {
+  const popperEl = popoverRef.value?.popperRef?.contentRef as
+    | HTMLElement
+    | undefined
+  if (popperEl) popperEl.style.visibility = 'hidden'
+  show.value = false
+}
+
 // 监听 show 的变化，添加或移除事件监听器
 watch(show, (newValue) => {
   if (newValue) {
+    // 清除 hideImmediately 留下的 visibility 覆盖
+    const popperEl = popoverRef.value?.popperRef?.contentRef as
+      | HTMLElement
+      | undefined
+    if (popperEl) popperEl.style.visibility = ''
+
     // 使用 mousedown 而不是 click
     document.addEventListener('mousedown', handleMouseDown, true)
 
@@ -441,9 +459,8 @@ const onClickConnection = (item: any) => {
     handleSelectConnection(item)
   } else {
     const node = makeNode(item!)
+    hideImmediately()
     handleAddNode(node)
-
-    show.value = false
   }
 }
 
@@ -464,15 +481,13 @@ const onClickTable = async (item: any) => {
   }
 
   const node = makeNode(connection!, item.name)
+  hideImmediately()
   handleAddNode(node)
-
-  show.value = false
 }
 
 const onClickProcessor = (item: any) => {
+  hideImmediately()
   handleAddNode(makeProcessorNode(item))
-
-  show.value = false
 }
 
 defineExpose({