From a620f991c3aae367d1944539f5fccf76d271dc39 Mon Sep 17 00:00:00 2001
From: VinaySatrasala <satrasalavinaykumar.01@gmail.com>
Date: Wed, 30 Jul 2025 02:16:09 +0530
Subject: [PATCH] Fix canvas resize issues in graph visualization

Signed-off-by: VinaySatrasala <satrasalavinaykumar.01@gmail.com>
---
 .../src/app/(graph)/GraphVisualization.tsx    | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/cognee-frontend/src/app/(graph)/GraphVisualization.tsx b/cognee-frontend/src/app/(graph)/GraphVisualization.tsx
index 0255a27fa..67d6458f8 100644
--- a/cognee-frontend/src/app/(graph)/GraphVisualization.tsx
+++ b/cognee-frontend/src/app/(graph)/GraphVisualization.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { MutableRefObject, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { MutableRefObject, useEffect, useImperativeHandle, useRef, useState, useCallback } from "react";
 import { forceCollide, forceManyBody } from "d3-force-3d";
 import ForceGraph, { ForceGraphMethods, GraphData, LinkObject, NodeObject } from "react-force-graph-2d";
 import { GraphControlsAPI } from "./GraphControls";
@@ -22,6 +22,45 @@ export default function GraphVisualization({ ref, data, graphControls }: GraphVi
   const nodeSize = 15;
   // const addNodeDistanceFromSourceNode = 15;
 
+  // State for tracking container dimensions
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Handle resize
+  const handleResize = useCallback(() => {
+    if (containerRef.current) {
+      const { clientWidth, clientHeight } = containerRef.current;
+      setDimensions({ width: clientWidth, height: clientHeight });
+
+      // Trigger graph refresh after resize
+      if (graphRef.current) {
+        // Small delay to ensure DOM has updated
+        setTimeout(() => {
+          graphRef.current?.zoomToFit(1000,50);
+        }, 100);
+      }
+    }
+  }, []);
+
+  // Set up resize observer
+  useEffect(() => {
+    // Initial size calculation
+    handleResize();
+
+    // ResizeObserver 
+    const resizeObserver = new ResizeObserver(() => {
+      handleResize();
+    });
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [handleResize]);
+
   const handleNodeClick = (node: NodeObject) => {
     graphControls.current?.setSelectedNode(node);
     // ref.current?.d3ReheatSimulation()
@@ -174,10 +213,12 @@ export default function GraphVisualization({ ref, data, graphControls }: GraphVi
   }));
 
   return (
-    <div className="w-full h-full" id="graph-container">
+    <div ref={containerRef} className="w-full h-full" id="graph-container">
       {(data && typeof window !== "undefined") ? (
         <ForceGraph
           ref={graphRef}
+          width={dimensions.width}
+          height={dimensions.height}
           dagMode={graphShape as unknown as undefined}
           dagLevelDistance={300}
           onDagError={handleDagError}
@@ -201,6 +242,8 @@ export default function GraphVisualization({ ref, data, graphControls }: GraphVi
       ) : (
         <ForceGraph
           ref={graphRef}
+          width={dimensions.width}
+          height={dimensions.height}
           dagMode={graphShape as unknown as undefined}
           dagLevelDistance={100}
           graphData={{