[fix] Setting the nodeIndex causing sideffects so created a new lookup nodeLinkIndex

Author: dee077

src/js/netjsongraph.core.js

@@ -111,9 +111,19 @@ class NetJSONGraph {
             this.config.maxPointsFetched - 1,
             JSONData.nodes.length - this.config.maxPointsFetched,
           );
-          const nodeSet = new Set(JSONData.nodes.map((node) => node.id));
+          const nodeSet = new Set();
+          // Build a lookup map (this.nodeLinkIndex) for quick access to node or link data.
+          // Uses node IDs as keys for nodes and "source~target" as keys for links.
+          // This avoids repeated traversal when restoring state from URL fragments.
+          this.nodeLinkIndex = {};
+          JSONData.nodes.forEach((node) => {
+            nodeSet.add(node.id);
+            this.nodeLinkIndex[node.id] = node;
+          });
           JSONData.links = JSONData.links.filter((link) => {
             if (nodeSet.has(link.source) && nodeSet.has(link.target)) {
+              const key = `${link.source}~${link.target}`;
+              this.nodeLinkIndex[key] = link;
               return true;
             }
             if (!nodeSet.has(link.source)) {

src/js/netjsongraph.render.js

@@ -151,19 +151,10 @@ class NetJSONGraphRender {
       // Preserve original NetJSON node for sidebar use
       /* eslint-disable no-underscore-dangle */
       nodeResult._source = JSON.parse(JSON.stringify(node));
-      // Store each node's index in `this.indexedNode` for quick lookup,
-      // allowing direct access to the node via `this.data.nodes[index]` without traversing the array.
-      self.nodeIndex = self.nodeIndex || {};
-      self.nodeIndex[node.id] = index;
       return nodeResult;
     });
     const links = JSONData.links.map((link, index) => {
       const linkResult = JSON.parse(JSON.stringify(link));
-      // Similarly, create a lookup for links using "source-target" as the key,
-      // storing only the index for direct access via `this.data.links[index]`.
-      self.nodeIndex = self.nodeIndex || {};
-      const {source, target} = linkResult;
-      self.nodeIndex[`${source}~${target}`] = index;
 
       const {linkStyleConfig, linkEmphasisConfig} = self.utils.getLinkStyle(
         link,
@@ -300,10 +291,6 @@ class NetJSONGraphRender {
           });
         }
       }
-      // Store each node's index in `this.indexedNode` for quick lookup,
-      // allowing direct access to the node via `this.data.nodes[index]` without traversing the array.
-      self.nodeIndex = self.nodeIndex || {};
-      self.nodeIndex[node.id] = index;
     });
     links.forEach((link, index) => {
       if (!flatNodes[link.source]) {
@@ -332,11 +319,6 @@ class NetJSONGraphRender {
           link,
         });
       }
-      // Similarly, create a lookup for links using "source-target" as the key,
-      // storing only the index for direct access via `this.data.links[index]`.
-      self.nodeIndex = self.nodeIndex || {};
-      const {source, target} = link;
-      self.nodeIndex[`${source}~${target}`] = index;
     });
 
     nodesData = nodesData.concat(clusters);

src/js/netjsongraph.util.js

@@ -1253,35 +1253,28 @@ class NetJSONGraphUtil {
     }
     const fragments = this.parseUrlFragments();
     const {id} = self.config.bookmarkableActions;
-    let nodeId, index, nodeData;
+    let nodeId;
     if (self.config.render === self.utils.graphRender) {
       if (params.dataType === "node") {
         nodeId = params.data.id;
-        index = self.nodeIndex[nodeId];
-        nodeData = self.data.nodes[index];
       } else if (params.dataType === "edge") {
         const {source, target} = params.data;
         nodeId = `${source}~${target}`;
-        index = self.nodeIndex[source];
-        nodeData = self.data.links[index];
       }
     } else if (self.config.render === self.utils.mapRender) {
       if (params.seriesType === "scatter") {
         nodeId = params.data.node.id;
-        index = self.nodeIndex[nodeId];
-        nodeData = self.data.nodes[index];
       } else if (params.seriesType === "lines") {
         const {source, target} = params.data.link;
         nodeId = `${source}~${target}`;
-        index = self.nodeIndex[source];
-        nodeData = self.data.links[index];
       }
     }
     if (!fragments[id]) {
       fragments[id] = new URLSearchParams();
       fragments[id].set("id", id);
     }
     fragments[id].set("nodeId", nodeId);
+    const nodeData = self.nodeLinkIndex[nodeId];
     this.updateUrlFragments(fragments, nodeData);
   }
 
@@ -1303,13 +1296,11 @@ class NetJSONGraphUtil {
     const fragmentParams = fragments[id] && fragments[id].get ? fragments[id] : null;
     const nodeId =
       fragmentParams && fragmentParams.get ? fragmentParams.get("nodeId") : undefined;
-    if (!nodeId || !self.nodeIndex || !self.nodeIndex[nodeId] == null) {
+    if (!nodeId || !self.nodeLinkIndex || !self.nodeLinkIndex[nodeId] == null) {
       return;
     }
     const [source, target] = nodeId.split("~");
-    const index = self.nodeIndex[nodeId];
-    // If source && target both exists then the node is a link
-    const node = source && target ? self.data.links[index] : self.data.nodes[index];
+    const node = self.nodeLinkIndex[nodeId];
     const nodeType =
       self.config.graphConfig.series.type || self.config.mapOptions.nodeConfig.type;
     const {location, cluster} = node || {};

test/netjsongraph.util.test.js

@@ -217,9 +217,8 @@ describe("Test URL fragment utilities", () => {
         render: "graph",
         bookmarkableActions: {enabled: true, id: "basicUsage"},
       },
-      data: {nodes: [node]},
       utils: {...utils, graphRender: "graph", mapRender: "map"},
-      nodeIndex: {node1: 0},
+      nodeLinkIndex: {node1: node},
     };
     const params = {
       dataType: "node",
@@ -241,9 +240,8 @@ describe("Test URL fragment utilities", () => {
         render: "graph",
         bookmarkableActions: {enabled: true, id: "basicUsage"},
       },
-      data: {links: [link]},
       utils: {...utils, graphRender: "graph", mapRender: "map"},
-      nodeIndex: {"node1:node2": 0},
+      nodeLinkIndex: {"node1:node2": link},
     };
 
     const params = {
@@ -268,9 +266,8 @@ describe("Test URL fragment utilities", () => {
         render: "graph",
         bookmarkableActions: {enabled: true, id: "geo"},
       },
-      data: {nodes: [node1, node2]},
       utils: {...utils, graphRender: "graph", mapRender: "map"},
-      nodeIndex: {node1: 0, node2: 1},
+      nodeLinkIndex: {node1: node1, node2: node2},
     };
     const params = {
       dataType: "node",
@@ -313,8 +310,7 @@ describe("Test URL fragment utilities", () => {
         mapOptions: {nodeConfig: {type: "scatter"}, center: [0, 0]},
         onClickElement: mockOnClick,
       },
-      data: {nodes: [node]},
-      nodeIndex: {n1: 0},
+      nodeLinkIndex: {n1: node},
       leaflet: {setView: mockSetView, getZoom: () => 6},
       utils,
     };
@@ -343,8 +339,7 @@ describe("Test URL fragment utilities", () => {
         mapOptions: {nodeConfig: {type: "scatter"}, center: [10, 20]},
         onClickElement: mockOnClick,
       },
-      data: {links: [link]},
-      nodeIndex: {"n1~n2": 0},
+      nodeLinkIndex: {"n1~n2": link},
       leaflet: {setView: mockSetView, getZoom: () => 6},
       utils,
     };