Added test dataset

Added WIP version of bottom overlay.

datasets/aud1.json

+{
+  "nodes": [
+    {
+      "id":  "id1",
+      "name": "Algorithmen und Datenstrukturen 1"
+    },
+    {
+      "id":  "id2",
+      "name": "Graphen"
+    },
+
+    {
+      "id":  "id3",
+      "name": "Suche in Graphen"
+    },
+    {
+      "id":  "id4",
+      "name": "Dynamische Datenstrukturen"
+    },
+    {
+      "id":  "id5",
+      "name": "Graphendefinition"
+
+    },
+    {
+      "id":  "id6",
+      "name": "Eulertouren"
+
+    },
+    {
+      "id":  "id7",
+      "name": "Wege in Graphen"
+    },
+    {
+      "id":  "id8",
+      "name": "Vorlesung 2"
+
+    },
+    {
+      "id":  "id9",
+      "name": "Vorlesung 3"
+
+    },
+    {
+      "id":  "id10",
+      "name": "Wege in Graphen"
+
+    },
+    {
+      "id":  "id11",
+      "name": "Bedingungen für Eulertouren"
+
+    },
+    {
+      "id":  "id12",
+      "name": "Vorlesung 4"
+
+    }
+  ],
+  "links": [
+    {
+      "source":  "id1",
+      "target": "id2",
+      "type": "Thema"
+    },
+    {
+      "source":  "id1",
+      "target": "id3",
+      "type": "Thema"
+    },
+    {
+      "source":  "id1",
+      "target": "id4",
+      "type": "Thema"
+    },
+    {
+      "source":  "id2",
+      "target": "id5",
+      "type": "Thema"
+    },
+    {
+      "source":  "id2",
+      "target": "id6",
+      "type": "Thema"
+    },
+    {
+      "source":  "id2",
+      "target": "id7",
+      "type": "Thema"
+    },
+    {
+      "source":  "id2",
+      "target": "id8",
+      "type": "Vorlesung"
+    },
+    {
+      "source":  "id2",
+      "target": "id9",
+      "type": "Vorlesung"
+    },
+    {
+      "source":  "id2",
+      "target": "id10",
+      "type": "Thema"
+    },
+    {
+      "source":  "id8",
+      "target": "id5",
+      "type": "Inhalt"
+    },
+    {
+      "source":  "id8",
+      "target": "id6",
+      "type": "Inhalt"
+    },
+    {
+      "source":  "id2",
+      "target": "id6",
+      "type": "Thema"
+    },
+    {
+      "source":  "id9",
+      "target": "id10",
+      "type": "Inhalt"
+    },
+    {
+      "source":  "id5",
+      "target": "id6",
+      "type": "Voraussetzung"
+    },
+    {
+      "source":  "id6",
+      "target": "id11",
+      "type": "Voraussetzung"
+    },
+    {
+      "source":  "id2",
+      "target": "id12",
+      "type": "Voraussetzung"
+    }
+  ]
+}
\ No newline at end of file

graph.js

 const highlightNodes = new Set();
 const highlightLinks = new Set();
-let firstHover = true;
 let hoverNode = null;
+let Graph = null;
+let firstTick = true;
+
+loadGraph();
+
+async function loadGraph() {
+    const dataUrl = plugin_path + 'datasets/aud1.json'
+    const gData = await fetch(dataUrl).then(res => res.json())
+    Graph = ForceGraph3D()
+    (document.getElementById('3d-graph'))
+        .graphData(gData)
+        .nodeLabel('id')
+        .nodeAutoColorBy('group')
+        .nodeColor(node => highlightNodes.has(node) ? node === hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : 'rgba(0,255,255,0.6)')
+        .linkWidth(link => highlightLinks.has(link) ? 4 : 1)
+        .onNodeClick(focusOnNode)
+        .onNodeHover(nodeHover)
+        .onLinkHover(linkHover)
+        .onEngineTick(loadComponents);
+}
+
 
-const Graph = ForceGraph3D()
-(document.getElementById('3d-graph'))
-    .jsonUrl(plugin_path + 'datasets/miserables.json')
-    .nodeLabel('id')
-    .nodeAutoColorBy('group')
-    .nodeColor(node => highlightNodes.has(node) ? node === hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : 'rgba(0,255,255,0.6)')
-    .linkWidth(link => highlightLinks.has(link) ? 4 : 1)
-    .onNodeClick(focusOnNode)
-    .onNodeHover(nodeHover)
-    .onLinkHover(linkHover);
+function loadComponents() {
+    if (firstTick) {
+        updateLinks();
+        add_background();
+        drawOverlay();
+        firstTick = false;
+    }
+}
 
-add_background()
-drawOverlay()
+
+function getLinkClasses() {
+    const linkClasses = [];
+    Graph.graphData().links.forEach(link => linkClasses.push(link.type));
+    return [... new Set(linkClasses)];
+}
 
 function drawOverlay() {
     const domNode = document.getElementById('3d-graph');
     const sceneNode = domNode.firstChild.firstChild.firstChild
     const overlayNode = document.createElement('div');
     overlayNode.className = 'kg-overlay';
-    overlayNode.innerText = 'Hello there!';
-    //sceneNode.appendChild(overlayNode);
+    //overlayNode.innerText = 'Hello there!';
     sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2])
+
+    const colorPallette = ['rgb(104, 169, 77)', 'rgb(102, 75, 154)', 'rgb(41, 171, 226)', 'rgb(224, 133, 35)',
+        'rgb(214, 207, 126)', 'rgb(239, 65, 35)', 'rgb(255, 255, 255)'];
+    const linkClasses = getLinkClasses();
+
+    for (let i=0; i<linkClasses.length; i++) {
+        const relation = document.createElement('div');
+        relation.className = 'relation';
+        relation.innerHTML = "<p>" + linkClasses[i] + "</p>";
+        overlayNode.appendChild(relation)
+
+        const colorStrip = document.createElement('div');
+        colorStrip.className = 'rel-container';
+        colorStrip.style = "background-color: " + colorPallette[i] + ";"
+        relation.appendChild(colorStrip)
+    }
+
+    //sceneNode.appendChild(overlayNode);
+
 }
 
 
@@ -43,7 +83,7 @@ function add_background() {
 
 
 function updateLinks() {
-    gData = Graph.graphData();
+    const gData = Graph.graphData()
     // cross-link node objects
     gData.links.forEach(link => {
         const a = link.source;
@@ -79,10 +119,6 @@ function nodeHover(node) {
 
     // no state change
     if ((!node && !highlightNodes.size) || (node && hoverNode === node)) return;
-    if (firstHover) {
-        updateLinks();
-        firstHover = false;
-    }
 
     highlightNodes.clear();
     highlightLinks.clear();

kg-style.css

@@ -4,22 +4,33 @@
 
 .kg-overlay {
     position: absolute;
-    bottom: 5px;
+    bottom: 0;
     pointer-events: none;
-    width: 100%;
+    width: 350px;
+    padding-left: 10px;
     text-align: center;
-    left: 0;
-    display: inline-block;
+    left: 0px;
+    display: block;
     background-color: rgba(0,0,0,.6);
     padding: 5px;
 }
 
-.renderer_label {
-    /*position: absolute;*/
-    bottom: 5px;
-    width: 100%;
-    /*color: white;*/
-    /*z-index: 10;*/
-    /*display: block;*/
-    text-align: center;
+.relation {
+    display: inline-block;
+    padding-right: 1px;
+    color: #fff;
+    font-size: 13px;
+    line-height: 20px;
+    font-family: CuratorRegular,Helvetica Neue,Helvetica,Arial,sans-serif;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+    width: 24%;
+    float: none;
+    height: 17px;
+}
+
+.rel-container {
+    display: block;
+    height: 2px;
+    width: 78px;
 }
\ No newline at end of file