Optimized node access via node ids.

display/graph.js

@@ -7,6 +7,7 @@ class Graph {
         this.highlightLinks = new Set();
         this.hoverNode = null;
         this.edgeColors = {};
+        this.idToNode = {};
 
         this.firstTick = true;
         this.infooverlay = null;
@@ -46,6 +47,7 @@ class Graph {
         if (this.firstTick) {
             this.mapEdgeColors();
             this.updateLinks();
+            this.updateNodeMap();
             this.addBackground();
 
             // Catch resize events
@@ -107,6 +109,10 @@ class Graph {
     }
 
     focusOnNode(node) {
+        if (typeof node == "string") {
+            node = this.idToNode[node];
+        }
+
         // Aim at node from outside it
         const distance = 250;
         const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
@@ -118,18 +124,8 @@ class Graph {
         );
     }
 
-    focusOnNodeId(id) {
-        const gData = this.graph.graphData();
-
-        gData.nodes.forEach(node => {
-            if (node.id === id) {
-                this.onNodeClick(node);
-            }
-        })
-    }
-
     updateLinks() {
-        const gData = this.graph.graphData()
+        const gData = this.graph.graphData();
         // cross-link node objects
         gData.links.forEach(link => {
             const a = link.source;
@@ -155,6 +151,13 @@ class Graph {
             .linkDirectionalParticles(this.graph.linkDirectionalParticles());
     }
 
+    updateNodeMap() {
+        const gData = this.graph.graphData();
+        gData.nodes.forEach(node => {
+            this.idToNode[node.id] = node;
+        })
+    }
+
     resize() {
         if(document.fullscreenElement == getCanvasDivNode()) {
             this.graph.height(screen.height);

display/infooverlay.js

@@ -149,7 +149,7 @@ class InfoOverlay {
                     //linkButton.appendChild(linkTitle);
                     linkButton.appendChild(linkImage);
 
-                    linkButton.addEventListener('click', function (){focusOnNodeId(nodeID)});
+                    jQuery(linkButton).on('click', () => this.graph.focusOnNode(nodeID));
                     tabcontent[i].appendChild(linkButton);
                 }
             });

knowledge-space.php

@@ -11,8 +11,8 @@ function ks_add_graph(): string
 {
     $graph = '<script src="//unpkg.com/3d-force-graph"></script>';
     $three = '<script src="//unpkg.com/three@0.130.0"></script>';
-    $renderer = '<script src="//unpkg.com/three/examples/js/renderers/CSS2DRenderer.js"></script>';
-    $renderer2 = '<script src="//unpkg.com/three/examples/js/renderers/CSS3DRenderer.js"></script>';
+    $renderer = '<script src="//unpkg.com/three@0.130.0/examples/js/renderers/CSS2DRenderer.js"></script>';
+    $renderer2 = '<script src="//unpkg.com/three@0.130.0/examples/js/renderers/CSS3DRenderer.js"></script>';
     $div = '<div id="3d-graph"></div>';
     $plugin_dir = plugin_dir_url(__FILE__);
     //$dataset = $plugin_dir.'datasets/miserables.json';