fix(sidebar): enhance node selection to show details for single nodes

Signed-off-by: Maystern <12112910@mail.sustech.edu.cn>

Author: Maystern

graph-ui/src/components/GraphTab.tsx

@@ -262,12 +262,35 @@ export function GraphTab({ project }: GraphTabProps) {
       if (!filteredData || !path || nodeIds.size === 0) {
         setHighlightedIds(null);
         setSelectedPath(null);
+        setSelectedNode(null);
         setCameraTarget(null);
         return;
       }
       setSelectedPath(path);
-      setHighlightedIds(nodeIds);
-      setCameraTarget(computeCameraTarget(filteredData.nodes, nodeIds));
+
+      /* Single node picked from the sidebar → also show the detail panel
+       * on the right and highlight its direct connections, matching the
+       * behaviour of clicking a node in the 3D scene. */
+      if (nodeIds.size === 1) {
+        const nodeId = [...nodeIds][0];
+        const node = filteredData.nodes.find((n) => n.id === nodeId) ?? null;
+        setSelectedNode(node);
+
+        const connectedIds = new Set<number>([nodeId]);
+        for (const edge of filteredData.edges) {
+          if (edge.source === nodeId) connectedIds.add(edge.target);
+          if (edge.target === nodeId) connectedIds.add(edge.source);
+        }
+        setHighlightedIds(connectedIds);
+        setCameraTarget(
+          computeCameraTarget(filteredData.nodes, connectedIds),
+        );
+      } else {
+        /* Directory with multiple nodes → don't show a detail panel. */
+        setSelectedNode(null);
+        setHighlightedIds(nodeIds);
+        setCameraTarget(computeCameraTarget(filteredData.nodes, nodeIds));
+      }
     },
     [filteredData],
   );

graph-ui/src/components/Sidebar.tsx

@@ -5,7 +5,7 @@ import { useUiMessages } from "../lib/i18n";
 
 interface SidebarProps {
   nodes: GraphNode[];
-  onSelectPath: (path: string, nodeIds: Set<number>) => void;
+  onSelectPath: (path: string, nodeIds: Set<number>, node?: GraphNode) => void;
   selectedPath: string | null;
 }
 
@@ -61,7 +61,7 @@ function flattenSingleChild(dir: DirNode): DirNode {
 
 function TreeItem({ dir, depth, onSelect, selectedPath }: {
   dir: DirNode; depth: number;
-  onSelect: (path: string, ids: Set<number>) => void;
+  onSelect: (path: string, ids: Set<number>, node?: GraphNode) => void;
   selectedPath: string | null;
 }) {
   const [expanded, setExpanded] = useState(false);
@@ -72,7 +72,7 @@ function TreeItem({ dir, depth, onSelect, selectedPath }: {
   return (
     <div>
       <button
-        onClick={() => { setExpanded(!expanded); onSelect(dir.fullPath, dir.nodeIds); }}
+        onClick={() => { setExpanded(!expanded); onSelect(dir.fullPath, dir.nodeIds, undefined); }}
         className={`flex items-center gap-1.5 w-full text-left px-3 py-[5px] text-[12px] transition-colors ${
           isSelected ? "bg-primary/10 text-primary" : "text-foreground/60 hover:text-foreground/80 hover:bg-white/[0.03]"
         }`}
@@ -90,7 +90,7 @@ function TreeItem({ dir, depth, onSelect, selectedPath }: {
           {sortedNodes.map((gn) => (
             <button
               key={gn.id}
-              onClick={() => onSelect(dir.fullPath + "/" + gn.name, new Set([gn.id]))}
+              onClick={() => onSelect(dir.fullPath + "/" + gn.name, new Set([gn.id]), gn)}
               className="flex items-center gap-1.5 w-full text-left px-3 py-[3px] text-[11px] text-foreground/40 hover:text-foreground/60 hover:bg-white/[0.02] transition-colors"
               style={{ paddingLeft: `${(depth+1) * 16 + 12}px` }}
             >
@@ -148,7 +148,7 @@ export function Sidebar({ nodes, onSelectPath, selectedPath }: SidebarProps) {
               filtered.map((n) => (
                 <button
                   key={n.id}
-                  onClick={() => onSelectPath(n.file_path ?? "", new Set([n.id]))}
+                  onClick={() => onSelectPath(n.file_path ?? "", new Set([n.id]), n)}
                   className="flex items-center gap-2 w-full text-left px-4 py-1.5 text-[11px] hover:bg-white/[0.03] transition-colors"
                 >
                   <span className="w-[5px] h-[5px] rounded-full shrink-0" style={{ backgroundColor: n.color }} />