styling of side panel & search results

editor.css

@@ -145,7 +145,7 @@ body {
 #search-result-list {
   overflow-y: auto;
   overflow-x: hidden;
-  /* padding: 15px; */
+  font-family: 'OpenSans';
 }
 
 #search-result-list > * {
@@ -263,6 +263,10 @@ body {
   position: absolute;
   top: 10px;
   left: 20px;
+  cursor: default;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 #sidecontentedge, #sidecontentnode {
@@ -278,9 +282,11 @@ body {
 #sideheading {
   font-family: 'OpenSans';
   text-align: center;
-  font-size: 2em;
+  font-size: 1.75em;
   font-style: normal;
   margin-top: 40px;
+  padding-left: 20px;
+  padding-right: 20px;
 }
 
 #sidecontent {
@@ -298,6 +304,10 @@ body {
   word-wrap: break-word;
 }
 
+#sidecontent h2 {
+  font-size: 1.25em;
+}
+
 #sidebuttons, #filebuttons {
   position: absolute;
   bottom: 20px;

editor.html

@@ -128,7 +128,7 @@
       <div class="menuitem" onclick="openSearchMenu(this)">
         <div id="search-container">
           <input id="search-input" type="text" placeholder="Search" onclick="showSearchResults()" oninput="search(this.value)">
-          <span class="search-button">
+          <span class="search-button" onclick="searchInput.focus()">
             <svg id="search-icon" class="search-icon-lightmode" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
               <circle cx="11" cy="7" r="6" stroke-width="2" fill="none" />
               <polyline points="6,12 2,16" style="fill:none;stroke-width:2" stroke-linecap="round" />

editor.js

@@ -148,7 +148,7 @@ function focusSelection() {
 
 function openSearchMenu(menuitem) {
   if (selectedMenuItem === menuitem) return;
-  var val = document.getElementById('search-input').value;
+  var val = searchInput.value;
   if (val === '' || val === null)
     while (searchResultList.firstChild)
       searchResultList.removeChild(searchResultList.lastChild);
@@ -170,12 +170,12 @@ function search(text) {
     searchResultList.removeChild(searchResultList.lastChild);
   var searchStates = soStates.checked;
   var searchActions = soEdges.checked
-  var stateResults  = searchStates  ? nodeIndex.search(text, searchActions ? 5 : 10)   : null;
+  var stateResults  = searchStates  ? nodeIndex.search(text, searchActions ? 5 : 10)  : null;
   var actionResults = searchActions ? actionIndex.search(text, searchStates ? 5 : 10) : null;
 
   function defineFocus(div, target) {
     div.onclick = (_ =>  {
-      document.getElementById('search-input').value = null;
+      searchInput.value = null;
       closeMenuItem();
       select(target);
       focusSelection();
@@ -293,6 +293,9 @@ function defineOnClick(item, url, title) {
     .then(response => response.json())
     .then(data => {
       closeFileDisplay();
+      searchInput.value = null;
+      while (searchResultList.firstChild)
+        searchResultList.removeChild(searchResultList.lastChild);
       for (var key in data) 
         workflow[key] = data[key];
       nodeIndex   = new FlexSearch.Index({tokenize: 'forward'});
@@ -406,6 +409,7 @@ const contextMenuSt = document.getElementById('ctmenust'); //Click on state
 const contextMenuEd = document.getElementById('ctmenued'); //Click on edge
 //Search
 const searchContainer  = document.getElementById('search-container');
+const searchInput      = document.getElementById('search-input');
 const searchResults    = document.getElementById('search-results');
 const searchResultList = document.getElementById('search-result-list');
 const searchOptions    = document.getElementById('search-options')
@@ -440,7 +444,10 @@ function select(item) {
         sideInfoEdge.style.display = 'none';
         sideInfoNode.style.display = 'block';
       }
-      sideHeading.innerHTML = item.name;
+      var heading = item.name;
+      if (heading.length > 90) heading = heading.substring(0, 88) + '...';
+      sideHeading.innerHTML = heading;
+      sideHeading.setAttribute('title', item.name);
       var data = document.createElement('div');
       var content = generatePanelContent(selection);
       content.forEach(c => data.appendChild(c));

keyboard.js

@@ -8,12 +8,12 @@ document.addEventListener('keydown', e => {
     closeFileDisplay();
     deselect();
     rightSelection = null;
-    document.getElementById('search-input').blur();
+    searchInput.blur();
   } else if (!e.ctrlKey) return;
   switch (e.key) {
     case 'f':
       e.preventDefault();
-      document.getElementById('search-input').focus();
+      searchInput.focus();
       openSearchMenu(searchContainer.parentElement);
       break;
     case 'o':