From 61a8beb3652d76cee9988cad82532b5bd10c7cd4 Mon Sep 17 00:00:00 2001
From: David Mosbach <david.mosbach@live.de>
Date: Sat, 27 May 2023 18:00:25 +0200
Subject: [PATCH] added currently available info to panel

---
 editor.css  | 19 ++++++++++++++-----
 editor.html |  1 +
 editor.js   | 29 +++++++++++++++++++++++++----
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/editor.css b/editor.css
index e859e2c..805f814 100644
--- a/editor.css
+++ b/editor.css
@@ -45,6 +45,7 @@ body {
   padding: 20px;
   border-radius: 20px;
   z-index:10;
+  overflow: hidden;
   display: none;
 }
 
@@ -52,14 +53,22 @@ body {
   width: 100%;
 }
 
-#sideheader h1 {
+#sideheader svg {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+
+#sideheading {
   text-align: center;
   font-size: 2em;
   font-style: normal;
 }
 
-#sideheader svg {
-  position: absolute;
-  top: 20px;
-  right: 20px;
+#sidecontent {
+  overflow-y: auto;
+  overflow-x: hidden;
+  text-align: justify;
+  hyphens: auto;
+  word-wrap: break-word;
 }
\ No newline at end of file
diff --git a/editor.html b/editor.html
index 6f510e5..e892785 100644
--- a/editor.html
+++ b/editor.html
@@ -34,6 +34,7 @@
           X
         </svg>
       </div>
+      <div id="sidecontent"></div>
       
     </div>
     <div id="graph"></div>
diff --git a/editor.js b/editor.js
index c41c97e..274fb61 100644
--- a/editor.js
+++ b/editor.js
@@ -154,6 +154,7 @@ const curvatureMinMax = 0.2; // Minimum/maximum curvature (1 +/- x) of overlappi
 
 var selection = null; // The currently selected node/edge.
 const sidePanel = document.getElementById('sidepanel');
+const sideContent = document.getElementById('sidecontent');
 
 const edgeColourDefault = '#999999ff';
 const edgeColourSelected = '#000000ff';
@@ -230,6 +231,24 @@ function computeCurvatures() {
 }
 
 
+function generatePanelContent(selection) {
+  var children = [];
+  var data = selection.stateData || selection.actionData
+  for (var key in data) {
+    if (key === 'viewerNames' || key === 'actorNames') continue;
+    var h = document.createElement('h2');
+    var heading = document.createTextNode(key.substring(0,1).toUpperCase() + key.substring(1));
+    h.appendChild(heading);
+    children.push(h);
+    var p = document.createElement('p');
+    var text = document.createTextNode(JSON.stringify(data[key]));
+    p.appendChild(text);
+    children.push(p);
+  }
+  return children;
+}
+
+
 /**
  * Marks the given item as selected.
  * @param {*} item The node or edge to select.
@@ -237,14 +256,16 @@ function computeCurvatures() {
 function select(item) {
   selection = selection === item ? null : item;
   if (selection === item) {
+    while (sideContent.firstChild)
+      sideContent.removeChild(sideContent.lastChild);
     sidePanel.style.display = 'block'
     document.getElementById('sideheading').innerHTML = item.name;
     var data = document.createElement('div');
-    var text = document.createTextNode(JSON.stringify(selection.stateData && selection.stateData || selection.actionData));
-    data.appendChild(text);
-    sidePanel.appendChild(data);
+    var content = generatePanelContent(selection);
+    content.forEach(c => data.appendChild(c));
+    sideContent.appendChild(data);
   } else {
-    sidePanel.style.display = 'none'
+    sidePanel.style.display = 'none';
   }
   console.log(item);
   // TODO