Added a detail view which is automatically opened on node click and fed with...

Added a detail view which is automatically opened on node click and fed with information based on the clicked node.

graph.js

@@ -20,12 +20,12 @@ async function loadGraph() {
         .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)
+        .onNodeClick(handleNodeClick)
         .onNodeHover(nodeHover)
         .onLinkHover(linkHover)
         .linkColor(linkColor)
         .linkOpacity(0.8)
-        .onEngineTick(loadComponents);
+        .onEngineTick(loadComponents).width(800);
 }
 
 
@@ -34,7 +34,8 @@ function loadComponents() {
         mapEdgeColors();
         updateLinks();
         add_background();
-        drawOverlay();
+        createLinkOverlay();
+        createInfoOverlay();
         firstTick = false;
     }
 }
@@ -53,11 +54,45 @@ function getLinkClasses() {
     return [... new Set(linkClasses)];
 }
 
-function drawOverlay() {
+function getCanvasDivNode() {
     const domNode = document.getElementById('3d-graph');
-    const sceneNode = domNode.firstChild.firstChild.firstChild
+    return domNode.firstChild.firstChild.firstChild;
+}
+
+
+function createInfoOverlay() {
+    const sceneNode = getCanvasDivNode();
+    const overlayNode = document.createElement('div');
+    overlayNode.id = 'infoOverlay'
+    overlayNode.className = 'detail-view';
+    //overlayNode.innerText = 'Hello there!';
+    sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2]);
+
+    const headline = document.createElement('h2');
+    headline.id = 'infoOverlayHeadline';
+    headline.innerText = 'Default Text';
+    headline.className = 'detail-view-headline'
+    overlayNode.appendChild(headline)
+
+    const close = document.createElement('div');
+    close.innerHTML = '<p>&#10006;</p>';
+    close.id = 'infoOverlayCloseButton';
+    close.className = 'close-button'
+    overlayNode.appendChild(close);
+
+    jQuery('#infoOverlayCloseButton').click(function () {
+        jQuery('#infoOverlay').slideUp('fast');
+    });
+
+    //sceneNode.appendChild(overlayNode);
+
+}
+
+
+function createLinkOverlay() {
+    const sceneNode = getCanvasDivNode();
     const overlayNode = document.createElement('div');
-    overlayNode.className = 'kg-overlay';
+    overlayNode.className = 'link-overlay';
     //overlayNode.innerText = 'Hello there!';
     sceneNode.insertBefore(overlayNode, sceneNode.childNodes[2])
 
@@ -75,9 +110,6 @@ function drawOverlay() {
         colorStrip.style = "background-color: " + edgeColors[linkClasses[i]] + "; width: " + 10 * chars + "px;";
         relation.appendChild(colorStrip);
     }
-
-    //sceneNode.appendChild(overlayNode);
-
 }
 
 
@@ -115,6 +147,19 @@ function updateLinks() {
 }
 
 
+
+function handleNodeClick(node) {
+    focusOnNode(node);
+    updateInfoOverlay(node);
+}
+
+
+function updateInfoOverlay(node) {
+    jQuery('#infoOverlayHeadline').text(node.name);
+    jQuery('#infoOverlay').slideDown('fast');
+}
+
+
 function focusOnNode(node) {
     // Aim at node from outside it
     const distance = 250;

kg-style.css

@@ -2,17 +2,47 @@
     display: flex;
 }
 
-.kg-overlay {
+.close-button {
+    pointer-events: all;
+    z-index: 99;
+    cursor: pointer;
+    right: 10px;
+    top: 5px;
+    position: absolute;
+    font-size: 20px;
+}
+
+
+.detail-view {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 250px;
+    height: 100%;
+    background-color: whitesmoke;
+    padding: 10px;
+}
+
+.detail-view-headline {
+    font-weight: bold;
+    text-align: center;
+    font-family: CuratorRegular,Helvetica Neue,Helvetica,Arial,sans-serif;
+    word-wrap: break-word;
+    hyphens: auto;
+    font-size: 2.0vw;
+}
+
+
+.link-overlay {
     position: absolute;
     bottom: 0;
     pointer-events: none;
     width: 350px;
     max-width: 400px;
-    padding-left: 10px;
+    padding: 10px;
     left: 0px;
     display: block;
     background-color: rgba(0,0,0,.6);
-    padding: 5px;
 }
 
 .relation {