Edges can now be toggled on and off through the linkoverlay.

display/graph.js

@@ -2,6 +2,7 @@
 class Graph {
     constructor(dataUrl) {
         this.graph = null;
+        this.gData = null;
 
         this.highlightNodes = new Set();
         this.highlightLinks = new Set();
@@ -12,15 +13,17 @@ class Graph {
         this.firstTick = true;
         this.infooverlay = null;
 
+        this.edgeTypeVisibility = {};
+
         this.loadGraph(dataUrl);
 
     }
 
     async loadGraph(dataUrl) {
-        const gData = await fetch(dataUrl).then(res => res.json())
+        this.gData = await fetch(dataUrl).then(res => res.json())
         this.graph = ForceGraph3D({extraRenderers: [new THREE.CSS2DRenderer(), new THREE.CSS3DRenderer()]})
         (document.getElementById('3d-graph'))
-            .graphData(gData)
+            .graphData(this.gData)
             .nodeLabel('id')
             .nodeAutoColorBy('group')
             .nodeColor(node => this.getNodeColor(node))
@@ -46,7 +49,7 @@ class Graph {
     initializeModel() {
         if (this.firstTick) {
             this.mapEdgeColors();
-            this.updateLinks();
+            this.updateNodeData();
             this.updateNodeMap();
             this.addBackground();
 
@@ -56,6 +59,7 @@ class Graph {
             document.addEventListener("fullscreenchange", () => this.resize());
             window.addEventListener("resize", () => this.resize());
 
+            this.getLinkClasses().forEach(item => this.edgeTypeVisibility[item] = true);
             this.firstTick = false;
         }
     }
@@ -125,19 +129,64 @@ class Graph {
         );
     }
 
-    updateLinks() {
+    toggleLinkVisibility(type) {
+        if (this.edgeTypeVisibility[type]) {
+            this.hideLinkType(type);
+        } else {
+            this.showLinkType(type);
+        }
+    }
+
+    hideLinkType(type) {
+        this.edgeTypeVisibility[type] = false;
+        this.updateGraphData();
+        this.updateNodeData();
+        this.removeFloatingNodes();
+    }
+
+    showLinkType(type) {
+        this.edgeTypeVisibility[type] = true;
+        this.updateGraphData();
+        this.updateNodeData();
+        this.removeFloatingNodes();
+    }
+
+    removeFloatingNodes() {
+        const gData = this.graph.graphData();
+        const nodes = gData.nodes.filter(node => node.neighbors.length > 0);
+        const data = {
+            nodes: nodes,
+            links: gData.links
+        };
+        this.graph.graphData(data);
+    }
+
+    updateGraphData() {
+        const data = {
+            nodes: this.gData.nodes,
+            links: this.gData.links.filter(l => this.edgeTypeVisibility[l.type])
+        };
+        this.graph.graphData(data);
+    }
+
+    resetNodeData() {
+        const gData = this.graph.graphData();
+        for (const node of gData.nodes) {
+            node.neighbors = [];
+            node.links = [];
+        }
+    }
+
+    updateNodeData() {
         const gData = this.graph.graphData();
         // cross-link node objects
+        this.resetNodeData();
+
         gData.links.forEach(link => {
             const a = link.source;
             const b = link.target;
-            if (!a.neighbors) a.neighbors = [];
-            if (!b.neighbors) b.neighbors = [];
             a.neighbors.push(b);
             b.neighbors.push(a);
-
-            if (!a.links) a.links = [];
-            if (!b.links) b.links = [];
             a.links.push(link);
             b.links.push(link);
         });

display/linkoverlay.js

@@ -15,17 +15,22 @@ class LinkOverlay {
         const linkClasses = this.graph.getLinkClasses();
         const chars = Math.max.apply(Math, linkClasses.map(function (c) { return c.length; }));
 
-        for (let i=0; i<linkClasses.length; i++) {
+        for (const link of linkClasses) {
             const relation = document.createElement('div');
             relation.className = 'relation';
-            relation.innerHTML = "<p>" + linkClasses[i] + "</p>";
+            relation.edgeType = link;
+            relation.innerHTML = "<p>" + link + "</p>";
+            jQuery(relation).click((event) =>
+                this.graph.toggleLinkVisibility(event.currentTarget.edgeType)
+            );
             overlayNode.appendChild(relation);
 
             const colorStrip = document.createElement('div');
             colorStrip.className = 'rel-container';
-            colorStrip.style = "background-color: " + this.graph.edgeColors[linkClasses[i]] + "; width: " + 10 * chars + "px;";
+            colorStrip.style = "background-color: " + this.graph.edgeColors[link] + "; width: " + 10 * chars + "px;";
             relation.appendChild(colorStrip);
         }
     }
 
+
 }
\ No newline at end of file

kg-style.css

@@ -128,6 +128,9 @@
     text-transform: uppercase;
     margin-bottom: 6px;
     height: 17px;
+    z-index: 100;
+    cursor: pointer;
+    pointer-events: all;
 }
 
 .rel-container {