From b8d88023a5f7890b97d577a0f3709c381dcdaec2 Mon Sep 17 00:00:00 2001
From: mengdehong <mdh2018534846@gmail.com>
Date: Tue, 24 Mar 2026 20:30:56 +0800
Subject: [PATCH] fix(dashboard): optimize pan/zoom interaction performance

- Widen transition to [box-shadow,outline,opacity,filter] to exclude
  transform (the pan/zoom culprit) while preserving ring animations
  (Tailwind v4 outline) and diff-fade opacity/filter transitions
- Replace inline boxShadow with Tailwind shadow-[] utility so
  .node-glow/.diff-*-glow CSS classes compose correctly
- Disable nodesDraggable, nodesConnectable, edgesFocusable,
  edgesReconnectable, elementsSelectable for read-only visualization
---
 .../packages/dashboard/src/components/CustomNode.tsx         | 3 +--
 .../packages/dashboard/src/components/GraphView.tsx          | 5 +++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx b/understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx
index 295f71a..111d7a7 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx
@@ -80,8 +80,7 @@ function CustomNodeComponent({
 
   return (
     <div
-      className={`relative rounded-lg bg-elevated border border-border-subtle ${extraClass} min-w-[180px] max-w-[220px] overflow-hidden transition-all duration-200 cursor-pointer`}
-      style={{ boxShadow: '0 2px 8px rgba(0,0,0,0.3)' }}
+      className={`relative rounded-lg bg-elevated border border-border-subtle ${extraClass} min-w-[180px] max-w-[220px] overflow-hidden transition-[box-shadow,outline,opacity,filter] duration-200 cursor-pointer shadow-[0_2px_8px_rgba(0,0,0,0.3)]`}
       onClick={() => data.onNodeClick?.(id)}
     >
       {/* Left color bar */}
diff --git a/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx b/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx
index 3c30f19..b1d6fe3 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx
@@ -444,6 +444,11 @@ function GraphViewInner() {
         onNodeClick={onNodeClick}
         onPaneClick={onPaneClick}
         nodeTypes={nodeTypes}
+        nodesDraggable={false}
+        nodesConnectable={false}
+        edgesFocusable={false}
+        edgesReconnectable={false}
+        elementsSelectable={false}
         fitView
         fitViewOptions={{ minZoom: 0.01, padding: 0.1 }}
         minZoom={0.01}