added currently available info to panel

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 {
+#sidecontent {
-  position: absolute;
+  overflow-y: auto;
-  top: 20px;
+  overflow-x: hidden;
-  right: 20px;
+  text-align: justify;
+  hyphens: auto;
+  word-wrap: break-word;
 }

editor.html

@@ -34,6 +34,7 @@
           X
         </svg>
       </div>
+      <div id="sidecontent"></div>
       
     </div>
     <div id="graph"></div>

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));
+    var content = generatePanelContent(selection);
-    data.appendChild(text);
+    content.forEach(c => data.appendChild(c));
-    sidePanel.appendChild(data);
+    sideContent.appendChild(data);
   } else {
-    sidePanel.style.display = 'none'
+    sidePanel.style.display = 'none';
   }
   console.log(item);
   // TODO