Fix: Prevent graph re-render on node click, Adjust: Optimize node spacing for better visual clarity

Author: elainefan331

src/modules/universe/NeuroJsonGraph.tsx

@@ -44,30 +44,10 @@ export const DATA_TYPE_COLORS: Record<string, [number, number, number]> = {
 const NeuroJsonGraph: React.FC<{
   registry: Database[];
   onNodeClick?: (node: NodeObject) => void;
-}> = ({ registry, onNodeClick }) => {
+}> = React.memo(({ registry, onNodeClick }) => {
   const navigate = useNavigate();
   const graphRef = useRef<HTMLDivElement>(null);
 
-  // Define the datatype to color mapping
-  //   const DATA_TYPE_COLORS: Record<string, [number, number, number]> = {
-  //     // mri: [79, 51, 130], // deep purple
-  //     mri: [160, 138, 233], // soft laender
-  //     anat: [160, 138, 233],
-  //     // fmri: [10, 81, 20], // dark green
-  //     fmri: [152, 202, 32], // bright lime green
-  //     func: [152, 202, 32],
-
-  //     pet: [0, 105, 192], // deep blue
-  //     meg: [156, 57, 0], // dark reddish-brown
-  //     eeg: [134, 31, 55], // dark red-pink
-  //     ieeg: [18, 109, 62], // forest green
-  //     beh: [12, 93, 210], // bright blue
-  //     fmap: [255, 255, 59], // vivid yellow
-  //     dwi: [200, 9, 12], // deep red
-  //     fnirs: [255, 193, 7], // golden yellow
-  //     phenotype: [255, 87, 34], // vibrant orange-red
-  //   };
-
   // Function to blend colors based on datatypes
   const blendColors = (datatypes: string[]): string => {
     if (datatypes.length === 0) return "rgb(255,255,255)"; // Default white
@@ -199,7 +179,7 @@ const NeuroJsonGraph: React.FC<{
       .graphData(graphData)
       .nodeRelSize(1)
       .nodeColor((node) => (node as NodeObject).color)
-      .linkWidth(2)
+      .linkWidth(1)
       .backgroundColor("rgba(0,0,0,0)")
       .nodeLabel("name")
       .onNodeHover((node) => {
@@ -265,6 +245,8 @@ const NeuroJsonGraph: React.FC<{
         return group;
       });
 
+    Graph.d3Force("link")?.distance(100);
+
     // Initialize CSS2DRenderer for 2D labels
     const labelRenderer = new CSS2DRenderer();
     labelRenderer.setSize(window.innerWidth, window.innerHeight);
@@ -310,6 +292,6 @@ const NeuroJsonGraph: React.FC<{
       }}
     />
   );
-};
+});
 
 export default NeuroJsonGraph;

src/pages/Home.tsx

@@ -15,7 +15,7 @@ import { useAppDispatch } from "hooks/useAppDispatch";
 import { useAppSelector } from "hooks/useAppSelector";
 import NeuroJsonGraph from "modules/universe/NeuroJsonGraph";
 import { NodeObject } from "modules/universe/NeuroJsonGraph";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { fetchRegistry } from "redux/neurojson/neurojson.action";
 import { NeurojsonSelector } from "redux/neurojson/neurojson.selector";
@@ -36,41 +36,50 @@ const Home: React.FC = () => {
   }, [dispatch]);
 
   // Handle node click: Set selected node and open panel
-  const handleNodeClick = (node: NodeObject) => {
+  // const handleNodeClick = (node: NodeObject) => {
+  //   setSelectedNode(node);
+  //   setPanelOpen(true);
+  // };
+  const handleNodeClick = useCallback((node: NodeObject) => {
     setSelectedNode(node);
     setPanelOpen(true);
-  };
-
-  // const filteredRegistry = registry
-  //   ? registry.filter((node) =>
-  //       node.name.toLowerCase().includes(filterKeyword.toLowerCase())
-  //     )
-  //   : [];
+  }, []);
 
   // filter logic
-  const filteredRegistry = registry
-    ? registry.filter((node) => {
-        const matchKeyword = node.name
-          .toLowerCase()
-          .includes(filterKeyword.toLowerCase());
-        const matchModalities =
-          selectedModalities.length === 0 ||
-          // selectedModalities.some((modality) =>
-          //   node.datatype.includes(modality)
-          // );
-          selectedModalities.some((modality) =>
-            Array.isArray(node.datatype)
-              ? node.datatype.includes(modality)
-              : node.datatype === modality
-          );
+  // const filteredRegistry = registry
+  //   ? registry.filter((node) => {
+  //       const matchKeyword = node.name
+  //         .toLowerCase()
+  //         .includes(filterKeyword.toLowerCase());
+  //       const matchModalities =
+  //         selectedModalities.length === 0 ||
+  //         selectedModalities.some((modality) =>
+  //           Array.isArray(node.datatype)
+  //             ? node.datatype.includes(modality)
+  //             : node.datatype === modality
+  //         );
 
-        return matchKeyword && matchModalities;
-      })
-    : [];
+  //       return matchKeyword && matchModalities;
+  //     })
+  //   : [];
 
-  // const handleModalitiesFilter = (modalities: string[]) => {
-  //   setSelectedModalities(modalities);
-  // };
+  const filteredRegistry = useMemo(() => {
+    return registry
+      ? registry.filter((node) => {
+          const matchKeyword = node.name
+            .toLowerCase()
+            .includes(filterKeyword.toLowerCase());
+          const matchModalities =
+            selectedModalities.length === 0 ||
+            selectedModalities.some((modality) =>
+              Array.isArray(node.datatype)
+                ? node.datatype.includes(modality)
+                : node.datatype === modality
+            );
+          return matchKeyword && matchModalities;
+        })
+      : [];
+  }, [registry, filterKeyword, selectedModalities]);
 
   return (
     <Container