move the `add node` button to the index page

static/index.js

@@ -246,6 +246,22 @@ host.BrowserHost = class {
             });
         });
 
+        const addNodeButton = this.document.getElementById('add-node');
+        addNodeButton.addEventListener('click', () => {
+            // this._view._graph.resetGraph();
+            // this._view._updateGraph();
+            var addNodeDropDown = this.document.getElementById('add-node-dropdown');
+            var selected_val = addNodeDropDown.options[addNodeDropDown.selectedIndex].value
+            var add_op_domain = selected_val.split(':')[0]
+            var add_op_type = selected_val.split(':')[1]
+            // console.log(selected_val)
+            this._view._graph.add_node(add_op_domain, add_op_type)
+            this._view._updateGraph();
+        })
+
+
+
+
         this.document.getElementById('version').innerText = this.version;
 
         if (this._meta.file) {

static/view-sidebar.js

@@ -218,11 +218,11 @@ sidebar.NodeSidebar = class {
             }
         }
 
-        this.add_separator(this._elements, 'sidebar-view-separator');
-        this._addHeader('Add children node');
-        this._addDropdownSelector('AddChildrenNode');
-        this.add_span()
-        this._addButton('Add Node');
+        // this.add_separator(this._elements, 'sidebar-view-separator');
+        // this._addHeader('Add children node');
+        // this._addDropdownSelector('AddChildrenNode');
+        // this.add_span()
+        // this._addButton('Add Node');
 
     }
 
@@ -344,14 +344,9 @@ sidebar.NodeSidebar = class {
             });
         }
 
-        if (title === 'Add Node') {
-            buttonElement.addEventListener('click', () => {
-                // console.log(this.add_op_type)
-                this._host._view._graph.add_node(this.add_op_domain, this.add_op_type)
-            });
-        }
     }
 
+    // deprecated
     _addDropdownSelector(title) {
         if (title === 'AddChildrenNode') {
             const selectorElement = this._host.document.createElement('SELECT');

static/view.js

@@ -467,6 +467,8 @@ view.View = class {
         if (model && graphs) {
             this._model = model;
             this._graphs = graphs;
+            
+            this.UpdateAddNodeDropDown();
         }
         this.lastViewGraph = this._graph; 
 
@@ -843,6 +845,18 @@ view.View = class {
             this._sidebar.push(documentationSidebar.render(), title);
         }
     }
+
+    UpdateAddNodeDropDown() {
+        // update dropdown supported node lost
+        var addNodeDropdown = this._host.document.getElementById('add-node-dropdown');
+        for (const node of this._model.supported_nodes) {
+            // node: [domain, op]
+            var option = new Option(node[1], node[0] + ':' + node[1]);
+            // console.log(option)
+            addNodeDropdown.appendChild(option);
+        }
+        
+    }
 };
 
 view.Graph = class extends grapher.Graph {
@@ -1110,7 +1124,6 @@ view.Graph = class extends grapher.Graph {
             this.view._graphs[0].make_custom_add_node(node_info)
         }
         // console.log(this.view._graphs[0].nodes)
-        this.view._updateGraph()
     }
 
 

templates/index.html

@@ -83,6 +83,25 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
     top: 90px;
 }
 .graph-op-button-download:active {  background: #e7e7e7; }
+.graph-op-button-addNode {
+    cursor: pointer;
+    background-color: white;
+    border: 1px solid grey;
+    border-radius: 3px;
+    color: black;
+    font-family:"Oliviar Sans Light";
+    font-size: 16px;
+    position:absolute;
+    left: 2px;
+    top: 120px;
+}
+.graph-op-button-addNode:active {  background: #e7e7e7; }
+.graph-op-add-node-dropdown {
+
+    position:absolute;
+    left: 2px;
+    top: 150px;
+}
 .icon .border { stroke: #fff; }
 .icon .stroke { stroke: #808080; }
 .icon:hover .stroke { stroke: #000000; }
@@ -252,6 +271,9 @@ button { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI"
     <button id="preview-graph" class="graph-op-button-preview">Preview</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>
+    <select id="add-node-dropdown" class="graph-op-add-node-dropdown">
+    </select>
 
     <button id="back-button" class="toolbar-back-button" title="Back">
         &#x276E;