From ede6d0b873643bd3363b3a76041b68b761016eed Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Mon, 14 Jun 2021 18:19:56 +0200
Subject: [PATCH] Added test dataset Added WIP version of bottom overlay.
---
datasets/aud1.json | 142 +++++++++++++++++++++++++++++++++++++++++++++
graph.js | 76 +++++++++++++++++-------
kg-style.css | 35 +++++++----
3 files changed, 221 insertions(+), 32 deletions(-)
create mode 100644 datasets/aud1.json
diff --git a/datasets/aud1.json b/datasets/aud1.json
new file mode 100644
index 0000000..0afcb96
--- /dev/null
+++ b/datasets/aud1.json
@@ -0,0 +1,142 @@
+{
+ "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
diff --git a/graph.js b/graph.js
index 4ae6931..aa20974 100644
--- a/graph.js
+++ b/graph.js
@@ -1,30 +1,70 @@
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();
diff --git a/kg-style.css b/kg-style.css
index 41ad255..39eeb42 100644
--- a/kg-style.css
+++ b/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
--
GitLab