From 47abb5038452c7060abb1a9d4edf6864760cd951 Mon Sep 17 00:00:00 2001
From: Matthias Konitzny <konitzny@ibr.cs.tu-bs.de>
Date: Thu, 17 Jun 2021 13:25:53 +0200
Subject: [PATCH] The info area now can also contain node descriptions.

---
 datasets/aud1.json |  4 ++--
 graph.js           | 20 +++++++++++++++++---
 kg-style.css       | 15 +++++++++------
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/datasets/aud1.json b/datasets/aud1.json
index 0909f9a..21d1d7a 100644
--- a/datasets/aud1.json
+++ b/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",
diff --git a/graph.js b/graph.js
index 417ebf5..3c89a72 100644
--- a/graph.js
+++ b/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');
 }
 
diff --git a/kg-style.css b/kg-style.css
index 0f0584b..a5891b2 100644
--- a/kg-style.css
+++ b/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;*/
-- 
GitLab