Node images are now also shown in the info area.

graph.js

@@ -119,18 +119,30 @@ function createInfoOverlay() {
     //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);
 
+    const topArea = document.createElement('div');
+    topArea.className = 'detail-view-top-area';
+    overlayNode.appendChild(topArea);
+
+    const nodeImage = document.createElement('img');
+    nodeImage.id = 'infoOverlayImage';
+    nodeImage.src = plugin_path + 'datasets/images/default.jpg';
+    nodeImage.className = 'detail-view-image';
+    topArea.appendChild(nodeImage);
+
+    const headline = document.createElement('h2');
+    headline.id = 'infoOverlayHeadline';
+    headline.innerText = 'Default Text';
+    headline.className = 'detail-view-headline'
+    topArea.appendChild(headline)
+
+
+
     jQuery('#infoOverlayCloseButton').click(function () {
         jQuery('#infoOverlay').slideUp('fast');
     });
@@ -207,6 +219,12 @@ function handleNodeClick(node) {
 
 function updateInfoOverlay(node) {
     jQuery('#infoOverlayHeadline').text(node.name);
+    if ('image' in node) {
+        jQuery('#infoOverlayImage').attr('src', plugin_path + 'datasets/images/' + node.image);
+    } else {
+        jQuery('#infoOverlayImage').attr('src', plugin_path + 'datasets/images/default.jpg');
+    }
+
     jQuery('#infoOverlay').slideDown('fast');
 }
 

kg-style.css

@@ -2,15 +2,7 @@
     display: flex;
 }
 
-.node-image {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    overflow: hidden;
-    border-radius: 50%;
-    display: inline;
-    margin: 0 auto;
-}
+
 
 
 .node-label {
@@ -21,7 +13,7 @@
     padding: 1px 4px;
     border-radius: 4px;
     background-color: rgba(0,0,0,0.7);
-    user-select: none;
+    /*user-select: none;*/
     z-index: 1;
 }
 
@@ -47,9 +39,28 @@
     z-index: 20;
 }
 
+.detail-view-image {
+    width: 100px;
+    height: 100px;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    border-radius: 50%;
+    display: inline;
+    margin-top: 10px;
+    margin-bottom: 20px;
+}
+
+.detail-view-top-area {
+    position: relative;
+    width: 100%;
+    overflow: auto;
+    text-align: center;
+}
+
 .detail-view-headline {
     font-weight: bold;
-    text-align: center;
+    /*text-align: center;*/
     font-family: CuratorRegular,Helvetica Neue,Helvetica,Arial,sans-serif;
     word-wrap: break-word;
     hyphens: auto;