Update node sizing: replace fixed sizes with dataset-based dynamic scaling

Author: elainefan331

src/modules/universe/NeuroJsonGraph.tsx

@@ -77,7 +77,8 @@ const NeuroJsonGraph: React.FC<{
   //     if (size > 3) return { color: Colors.primary.main, size: 7 };
   //     return { color: Colors.primary.light, size: 5 };
   //   };
-  // Custom random number generator (same as `mulberry32`)
+
+  // Custom random number generator
   const mulberry32 = (a: number) => {
     return function () {
       let t = (a += 0x6d2b79f5);
@@ -87,17 +88,7 @@ const NeuroJsonGraph: React.FC<{
     };
   };
 
-  const rngfun = mulberry32(0x123456789); // Seeded random function
-
-  //   // Shuffle nodes
-  //   const nodenum = registry.length;
-  //   const randnode = [...Array(nodenum).keys()];
-
-  // Fisher-Yates Shuffle
-  //   for (let i = 0; i < nodenum; i++) {
-  //     const j = Math.floor(rngfun() * (i + 1));
-  //     [randnode[i], randnode[j]] = [randnode[j], randnode[i]];
-  //   }
+  const rngfun = mulberry32(0x123456789);
 
   useEffect(() => {
     // Ensure registry and graphRef are properly initialized
@@ -115,7 +106,7 @@ const NeuroJsonGraph: React.FC<{
       (db, index) => {
         const colorStr = blendColors(db.datatype); // Get color in "rgb(R,G,B)" format
 
-        // **Extract RGB values from the string**
+        // Extract RGB values from the string
         const match = colorStr.match(/\d+/g); // Get numbers from "rgb(R,G,B)"
         if (!match) return { brightness: 255, index }; // Default to white if extraction fails
 
@@ -126,24 +117,18 @@ const NeuroJsonGraph: React.FC<{
       }
     );
 
-    // **2️⃣ Sort nodes by brightness (dark → bright)**
+    // Sort nodes by brightness
     colorlist.sort((a, b) => a.brightness - b.brightness);
 
-    // // **3️⃣ Create shuffled node list using Fisher-Yates algorithm**
-    // const nodenum = registry.length;
-    // const randnode = colorlist.map((item) => item.index); // Get sorted indices
-
-    // for (let i = 0; i < nodenum; i++) {
-    //   const j = Math.floor(rngfun() * (i + 1));
-    //   [randnode[i], randnode[j]] = [randnode[j], randnode[i]];
-    // }
-
     // Prepare graph data
     const graphData = {
       nodes: registry.map((db) => {
         // const { color, size } = size2colorAndSize(db.datasets);
         const color = blendColors(db.datatype);
-        const size = db.datasets > 32 ? 10 : db.datasets > 3 ? 7 : 5;
+        // const size = db.datasets > 32 ? 10 : db.datasets > 3 ? 7 : 5;
+
+        let size = db.datasets > 100 ? Math.log(db.datasets) : db.datasets / 5;
+        size = Math.max(size, 2);
 
         return {
           id: db.id,
@@ -160,61 +145,20 @@ const NeuroJsonGraph: React.FC<{
       }),
 
       links: registry.flatMap((db, index) => {
-        // const color = blendColors(db.datatype);
-        // return registry
-        //   .filter(
-        //     (otherDb) =>
-        //       db.id !== otherDb.id &&
-        //       db.datatype.some((type) => otherDb.datatype.includes(type))
-        //   )
-        //   .map((otherDB) => ({
-        //     source: db.id,
-        //     target: otherDB.id,
-        //     color: Colors.lightGray,
-        //     visible: true,
-        //   }));
-
-        // const connections = [];
-        // const nextIndex = (index + 1) % registry.length;
-        // // const { color } = size2colorAndSize(db.datasets);
-        // const color = blendColors(db.datatype);
-        // connections.push({
-        //   source: db.id,
-        //   target: registry[nextIndex].id,
-        //   color: color,
-        //   visible: true,
-        // });
-        // return connections;
-
-        // use original website logic
         const coloridx = index;
         const i = colorlist[coloridx].index; // Get shuffled node index
         const node = registry[i]; // Get actual node
 
         // Determine number of connections (proportional to dataset size)
         const conn = 1 + Math.round(rngfun() * Math.max(1, node.datasets / 20));
-        // const numConnections = 4;
+
         const connections: {
           source: string;
           target: string;
           color: string;
           visible: boolean;
         }[] = [];
 
-        // for (let j = -conn; j <= conn; j++) {
-        //   if (j === 0) continue; // Skip linking to itself
-        //   if (coloridx + j >= nodenum) break; // Prevent out-of-bounds errors
-
-        //   const targetNode = registry[randnode[Math.max(0, coloridx + j)]]; // Pick a nearby node from shuffled list
-
-        //   connections.push({
-        //     source: node.id,
-        //     target: targetNode.id,
-        //     color: blendColors(node.datatype), // Match node's color
-        //     visible: true, // Make links visible
-        //   });
-        // }
-
         for (let j = 1; j <= conn; j++) {
           if (index + j >= registry.length) break; // Prevent out-of-bounds errors
 
@@ -238,7 +182,7 @@ const NeuroJsonGraph: React.FC<{
       .graphData(graphData)
       .nodeRelSize(2)
       .nodeColor((node) => (node as NodeObject).color)
-      .linkWidth(0.5)
+      .linkWidth(1)
       .backgroundColor("rgba(0,0,0,0)")
       .nodeLabel("name")
       .onNodeHover((node) => {