fix search node

Author: Anchel123

app/components/code-graph.tsx

@@ -15,6 +15,7 @@ import dynamic from 'next/dynamic';
 import { Position } from "./graphView";
 import { prepareArg } from '../utils';
 import { NodeObject, ForceGraphMethods } from "react-force-graph-2d";
+import { handleZoomToFit } from "@/lib/utils";
 
 const GraphView = dynamic(() => import('./graphView'));
 
@@ -68,6 +69,7 @@ export function CodeGraph({
     const [cooldownTicks, setCooldownTicks] = useState<number | undefined>(0)
     const [cooldownTime, setCooldownTime] = useState<number>(0)
     const containerRef = useRef<HTMLDivElement>(null);
+    const [zoomedNodes, setZoomedNodes] = useState<Node[]>([]);
 
     useEffect(() => {
         setData({ ...graph.Elements })
@@ -167,17 +169,17 @@ export function CodeGraph({
     }
 
     const deleteNeighbors = (nodes: Node[]) => {
-        
+
         if (nodes.length === 0) return;
-        
+
         const expandedNodes: Node[] = []
-        
+
         graph.Elements = {
             nodes: graph.Elements.nodes.filter(node => {
                 if (!node.collapsed) return true
-                
+
                 const isTarget = graph.Elements.links.some(link => link.target.id === node.id && nodes.some(n => n.id === link.source.id));
-                
+
                 if (!isTarget) return true
 
                 const deleted = graph.NodesMap.delete(Number(node.id))
@@ -190,7 +192,7 @@ export function CodeGraph({
             }),
             links: graph.Elements.links
         }
-        
+
         deleteNeighbors(expandedNodes)
 
         graph.removeLinks()
@@ -239,12 +241,12 @@ export function CodeGraph({
                 }
                 graph.visibleLinks(true, [chartNode!.id])
                 setData({ ...graph.Elements })
+                setZoomedNodes([node])
+                return
             }
-          
+
+            handleZoomToFit(chartRef, 4, (n: NodeObject<Node>) => n.id === node.id)
             setSearchNode(chartNode)
-            setTimeout(() => {
-                chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => n.id === chartNode!.id);
-            }, 0)
         }
     }
 
@@ -307,7 +309,9 @@ export function CodeGraph({
                                             graph={graph}
                                             onValueChange={(node) => setSearchNode(node)}
                                             icon={<Search />}
-                                            handleSubmit={handleSearchSubmit}
+                                            handleSubmit={(node) => {
+                                                handleSearchSubmit(node)
+                                            }}
                                             node={searchNode}
                                         />
                                         <Labels categories={graph.Categories} onClick={onCategoryClick} />
@@ -421,6 +425,8 @@ export function CodeGraph({
                                     setCooldownTicks={setCooldownTicks}
                                     cooldownTime={cooldownTime}
                                     setCooldownTime={setCooldownTime}
+                                    setZoomedNodes={setZoomedNodes}
+                                    zoomedNodes={zoomedNodes}
                                 />
                             </div>
                             : <div className="flex flex-col items-center justify-center h-full text-gray-400">

app/components/graphView.tsx

@@ -1,8 +1,9 @@
 
-import ForceGraph2D, { ForceGraphMethods } from 'react-force-graph-2d';
+import ForceGraph2D, { ForceGraphMethods, NodeObject } from 'react-force-graph-2d';
 import { Graph, GraphData, Link, Node } from './model';
 import { Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from 'react';
 import { Path } from '../page';
+import { handleZoomToFit } from '@/lib/utils';
 
 export interface Position {
     x: number,
@@ -30,6 +31,8 @@ interface Props {
     setCooldownTicks: Dispatch<SetStateAction<number | undefined>>
     cooldownTime: number | undefined
     setCooldownTime: Dispatch<SetStateAction<number>>
+    setZoomedNodes: Dispatch<SetStateAction<Node[]>>
+    zoomedNodes: Node[]
 }
 
 const PATH_COLOR = "#ffde21"
@@ -56,7 +59,9 @@ export default function GraphView({
     cooldownTicks,
     cooldownTime,
     setCooldownTicks,
-    setCooldownTime
+    setCooldownTime,
+    zoomedNodes,
+    setZoomedNodes
 }: Props) {
 
     const parentRef = useRef<HTMLDivElement>(null)
@@ -295,6 +300,8 @@ export default function GraphView({
                 onEngineStop={() => {
                     setCooldownTicks(0)
                     setCooldownTime(0)
+                    handleZoomToFit(chartRef, zoomedNodes.length === 1 ? 4 : 1, (n: NodeObject<Node>) => zoomedNodes.some(node => node.id === n.id))
+                    setZoomedNodes([])
                 }}
                 cooldownTicks={cooldownTicks}
                 cooldownTime={cooldownTime}

lib/utils.ts

@@ -1,6 +1,74 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
+import { ForceGraphMethods, NodeObject } from "react-force-graph-2d"
+import { Link, Node } from "@/app/components/model"
+import { MutableRefObject } from "react"
+
+export type PathData = {
+  nodes: any[]
+  links: any[]
+}
+
+export type PathNode = {
+  id?: number
+  name?: string
+}
+
+export type Path = {
+  start?: PathNode,
+  end?: PathNode
+}
+
+export enum MessageTypes {
+  Query,
+  Response,
+  Path,
+  PathResponse,
+  Pending,
+  Text,
+}
+
+export interface Message {
+  type: MessageTypes;
+  text?: string;
+  paths?: { nodes: any[], links: any[] }[];
+  graphName?: string;
+}
+
+export type GraphRef = MutableRefObject<ForceGraphMethods<Node, Link> | undefined>
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function handleZoomToFit(chartRef: GraphRef, paddingMultiplier = 1, filter?: (node: NodeObject<Node>) => boolean) {
+  const chart = chartRef.current
+  if (chart) {
+    // Find the currently visible canvas by checking display property
+    const canvases = document.querySelectorAll('.force-graph-container canvas') as NodeListOf<HTMLCanvasElement>;
+    const container = Array.from(canvases).find(canvas => {
+      const container = canvas.parentElement;
+      
+      if (!container) return false;
+
+      // Check if element is actually in viewport
+      const rect = container.getBoundingClientRect();
+      const isInViewport = rect.width > 0 &&
+        rect.height > 0 &&
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= window.innerHeight &&
+        rect.right <= window.innerWidth;
+
+      return isInViewport;
+    })?.parentElement;
+
+    if (!container) return;
+
+    // Calculate padding as 10% of the smallest canvas dimension
+    const minDimension = Math.min(container.clientWidth, container.clientHeight);
+    const padding = minDimension * 0.1 * paddingMultiplier;
+
+    chart.zoomToFit(1000, padding, filter);
+  }
+}