The info area now can also contain node descriptions.

datasets/aud1.json

@@ -25,8 +25,8 @@
     {
       "id":  "id6",
       "name": "Eulertouren",
-      "image": "eulertouren.png"
-
+      "image": "eulertouren.png",
+      "description": "Ein Eulerkreis ist in der Graphentheorie ein Zyklus, der alle Kanten eines Graphen genau einmal enthält. Ein offener Eulerzug (auch Eulerpfad oder Eulerweg) ist gegeben, wenn Start- und Endknoten nicht gleich sein müssen, wenn also statt eines Zyklus lediglich eine Kantenfolge verlangt wird, welche jede Kante des Graphen genau einmal enthält. Ein bekanntes Beispiel ist das Haus vom Nikolaus."
     },
     {
       "id":  "id7",

graph.js

@@ -122,7 +122,7 @@ function createInfoOverlay() {
     const close = document.createElement('div');
     close.innerHTML = '<p>&#10006;</p>';
     close.id = 'infoOverlayCloseButton';
-    close.className = 'close-button'
+    close.className = 'close-button';
     overlayNode.appendChild(close);
 
     const topArea = document.createElement('div');
@@ -138,9 +138,17 @@ function createInfoOverlay() {
     const headline = document.createElement('h2');
     headline.id = 'infoOverlayHeadline';
     headline.innerText = 'Default Text';
-    headline.className = 'detail-view-headline'
-    topArea.appendChild(headline)
+    headline.className = 'detail-view-headline';
+    topArea.appendChild(headline);
 
+    const textArea = document.createElement('div');
+    textArea.className = 'detail-view-text-area';
+    overlayNode.appendChild(textArea);
+
+    const description = document.createElement('p');
+    description.id = 'infoOverlayDescription';
+    description.innerText = 'Default Text';
+    textArea.appendChild(description);
 
 
     jQuery('#infoOverlayCloseButton').click(function () {
@@ -225,6 +233,12 @@ function updateInfoOverlay(node) {
         jQuery('#infoOverlayImage').attr('src', plugin_path + 'datasets/images/default.jpg');
     }
 
+    if ('description' in node) {
+        jQuery('#infoOverlayDescription').text(node.description);
+    } else {
+        jQuery('#infoOverlayDescription').text('Default Text');
+    }
+
     jQuery('#infoOverlay').slideDown('fast');
 }
 

kg-style.css

@@ -2,9 +2,6 @@
     display: flex;
 }
 
-
-
-
 .node-label {
     font-size: 14px;
     color: white;
@@ -13,7 +10,7 @@
     padding: 1px 4px;
     border-radius: 4px;
     background-color: rgba(0,0,0,0.7);
-    /*user-select: none;*/
+    user-select: none;
     z-index: 1;
 }
 
@@ -40,8 +37,8 @@
 }
 
 .detail-view-image {
-    width: 100px;
-    height: 100px;
+    width: 125px;
+    height: 125px;
     top: 0;
     left: 0;
     overflow: hidden;
@@ -58,6 +55,12 @@
     text-align: center;
 }
 
+.detail-view-text-area {
+    display: block;
+    padding-left: 25px;
+    padding-right: 25px;
+}
+
 .detail-view-headline {
     font-weight: bold;
     /*text-align: center;*/