From 114efd931354fb658b0184629954c8cbfa370abd Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Thu, 29 Jul 2021 17:16:08 +0200
Subject: [PATCH] Optimized node access via node ids.
---
display/graph.js | 25 ++++++++++++++-----------
display/infooverlay.js | 2 +-
knowledge-space.php | 4 ++--
3 files changed, 17 insertions(+), 14 deletions(-)
diff --git a/display/graph.js b/display/graph.js
index 9fffa3c..0c14467 100644
--- a/display/graph.js
+++ b/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);
diff --git a/display/infooverlay.js b/display/infooverlay.js
index 1003e20..edb8c9a 100644
--- a/display/infooverlay.js
+++ b/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);
}
});
diff --git a/knowledge-space.php b/knowledge-space.php
index f2f4c07..63b8a2e 100644
--- a/knowledge-space.php
+++ b/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';
--
GitLab