add `Enter` button for deleting node; change the index button name from `Preview` to `Refresh`

static/index.js

@@ -201,8 +201,8 @@ host.BrowserHost = class {
             click: () => this._about()
         });
 
-        const previewButton = this.document.getElementById('preview-graph');
+        const refreshButton = this.document.getElementById('refresh-graph');
-        previewButton.addEventListener('click', () => {
+        refreshButton.addEventListener('click', () => {
             this._view._updateGraph();
         })
 

static/view-sidebar.css

@@ -5,6 +5,8 @@
 .sidebar-closebutton:hover { color: #242424; }
 .sidebar-content { padding-left: 20px; padding-right: 20px; margin-bottom: 20px; overflow-y: auto; height: calc(100vh - 60px); }
 
+.sidebar-view-button-bold {font-weight: bold;}
+
 .sidebar-view-title { font-weight: bold; font-size: 11px; line-height: 1.25; border-bottom: 1px solid #ececec; padding-bottom: 0.3em; margin-top: 0; margin-bottom: 16px; color: #333; user-select: none; -webkit-user-select: none; -moz-user-select: none; cursor: default; }
 .sidebar-view-title-button { display: inline-block; color: #888; text-align: center; vertical-align: middle; font-weight: bold; width: 12px; height: 12px; font-size: 10px; line-height: 12px; border-radius: 50%; transform: translateY(-1px); padding: 1px; background: transparent; border: 1px solid #aaa; text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
 .sidebar-view-title-button:hover { color: #333; border: 1px solid #333; }

static/view-sidebar.js

@@ -207,6 +207,8 @@ sidebar.NodeSidebar = class {
         this._addButton('Delete Single Node');
         this.add_span()
         this._addButton('Recover Node');
+        this.add_separator(this._elements, 'sidebar-view-separator')
+        this._addButton('Enter');
         
         // deprecated
         // this.add_separator(this._elements, 'sidebar-view-separator');
@@ -330,6 +332,7 @@ sidebar.NodeSidebar = class {
     _addButton(title) {
         const buttonElement = this._host.document.createElement('button');
         buttonElement.className = 'sidebar-view-button';
+        if (title == "Enter") {buttonElement.className = "sidebar-view-button-bold"}
         buttonElement.innerText = title;
         this._elements.push(buttonElement);
         
@@ -348,6 +351,11 @@ sidebar.NodeSidebar = class {
                 this._host._view._graph.reset_node(this._modelNodeName)
             });
         }
+        if (title === 'Enter') {
+            buttonElement.addEventListener('click', () => {
+                this._host._view._updateGraph()
+            });
+        }
 
     }
 

templates/index.html

@@ -43,7 +43,7 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
 .toolbar-back-button:hover { background: #000000; border-color: #000000; }
 .toolbar-name-button { float: left; background: rgba(255, 255, 255, 0.95); border-top-right-radius: 6px; border-bottom-right-radius: 6px; border: 1px solid #777; color: #777; border-left: 1px; border-left-color: #ffffff; margin: 2px 0 2px 0; padding: 0 12px 0 6px; cursor: pointer; width: auto; height: 20px; font-size: 11px; line-height: 0; transition: 0.1s; }
 .toolbar-name-button:hover { color: #000000; }
-.graph-op-button-preview {
+.graph-op-button-refresh {
     cursor: pointer;
     background-color: white;
     border: 1px solid grey;
@@ -55,7 +55,7 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
     left: 2px;
     top: 30px;
 }
-.graph-op-button-preview:active {  background: #e7e7e7; }
+.graph-op-button-refresh:active {  background: #e7e7e7; }
 .graph-op-button-reset {
     cursor: pointer;
     background-color: white;
@@ -267,7 +267,7 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
         </svg>
     </button>
 
-    <button id="preview-graph" class="graph-op-button-preview">Preview</button>
+    <button id="refresh-graph" class="graph-op-button-refresh">Refresh</button>
     <button id="reset-graph" class="graph-op-button-reset">Reset</button>
     <button id="download-graph" class="graph-op-button-download">Download</button>
     <button id="add-node" class="graph-op-button-addNode">Add node</button>