resize the graph components

Author: mustafasoylu

package-lock.json

@@ -13,6 +13,7 @@
     "@chakra-ui/react": "^2.10.3",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@react-hook/resize-observer": "^2.0.2",
     "framer-motion": "^11.11.9",
     "rdflib": "^2.2.35",
     "react": "^18.3.1",

package.json

@@ -1,19 +1,31 @@
+// Content.tsx
 import { Box } from "@chakra-ui/react";
-import Graph from "./Graph.tsx";
-import Selections from "./Selections.tsx";
-import { useState } from "react";
+import Graph from "./Graph";
+import Selections from "./Selections";
+import { useState, useRef } from "react";
+import useResizeObserver from "@react-hook/resize-observer"; // Import the hook directly
 import { GraphData } from "react-force-graph-3d";
 
 const Content = () => {
   const [graphData, setGraphData] = useState<GraphData>({ nodes: [], links: [] });
+  const boxRef = useRef<HTMLDivElement | null>(null); // Create a ref for the Box
+  const [size, setSize] = useState({ width: 0, height: 0 }); // Initialize size state
+
+  // Use useResizeObserver to monitor size changes
+  useResizeObserver(boxRef, (entry) => {
+    if (entry) {
+      const { width, height } = entry.contentRect; // Get the new width and height
+      setSize({ width, height }); // Update the size state
+    }
+  });
 
   return (
     <Box width="100%" height="100%">
       <Box mb={{ base: 8, md: 2 }}>
         <Selections setGraphData={setGraphData} />
       </Box>
-      <Box width="100%" height="60vh" overflow="hidden">
-        <Graph graphData={graphData} />
+      <Box ref={boxRef} width="100%" height="60vh" overflow="hidden">
+        <Graph graphData={graphData} width={size.width} height={size.height} />
       </Box>
     </Box>
   );

src/components/Content.tsx

@@ -1,12 +1,15 @@
+// Graph.tsx
 import React from "react";
 import ForceGraph3D, { GraphData, NodeObject, LinkObject } from "react-force-graph-3d";
 import * as THREE from "three";
 
 interface GraphProps {
   graphData: GraphData;
+  width: number;
+  height: number;
 }
 
-const Graph: React.FC<GraphProps> = ({ graphData }: GraphProps) => {
+const Graph: React.FC<GraphProps> = ({ graphData, width, height }) => {
   const getGroupColor = (group: string) => {
     const colors: { [key: string]: string } = {
       person: "red",
@@ -19,14 +22,16 @@ const Graph: React.FC<GraphProps> = ({ graphData }: GraphProps) => {
       service: "cyan",
       "": "gray", // Default group
     };
-    return colors[group] || "gray"; // Default to 3 if group not found
+    return colors[group] || "gray"; // Default to gray if group not found
   };
 
   const getNodeById = (id: string) => graphData.nodes.find((node: NodeObject) => node.id === id);
 
   return (
     <ForceGraph3D
       graphData={graphData}
+      width={width}
+      height={height}
       nodeAutoColorBy={(d) => getGroupColor(d.group || "")}
       linkAutoColorBy={(d) => {
         const sourceNode =
@@ -40,11 +45,8 @@ const Graph: React.FC<GraphProps> = ({ graphData }: GraphProps) => {
       linkDirectionalArrowRelPos={1}
       linkCurvature={0.2}
       nodeThreeObject={({ group }) => {
-        // Use box geometry for nodes with empty group, otherwise use spheres
         const geometry =
-          group === ""
-            ? new THREE.BoxGeometry(8, 8, 8) // Box for nodes with empty group
-            : new THREE.SphereGeometry(5); // Sphere for other nodes
+          group === "" ? new THREE.BoxGeometry(8, 8, 8) : new THREE.SphereGeometry(5);
 
         const material = new THREE.MeshStandardMaterial({
           color: getGroupColor(group),