Fix model sidebar subgraph selector

source/view-sidebar.js

@@ -417,17 +417,18 @@ sidebar.SelectView = class {
     constructor(host, values, selected) {
         this._host = host;
         this._elements = [];
+        this._values = values;
 
         const selectElement = this._host.document.createElement('select');
         selectElement.setAttribute('class', 'sidebar-view-item-select');
         selectElement.addEventListener('change', (e) => {
-            this._raise('change', e.target.value);
+            this._raise('change', this._values[e.target.selectedIndex]);
         });
         this._elements.push(selectElement);
 
         for (const value of values) {
             const optionElement = this._host.document.createElement('option');
-            optionElement.innerText = value;
+            optionElement.innerText = value.name || '';
             if (value == selected) {
                 optionElement.setAttribute('selected', 'selected');
             }
@@ -864,8 +865,7 @@ sidebar.ModelSidebar = class {
 
         const graphs = Array.isArray(model.graphs) ? model.graphs : [];
         if (graphs.length > 1) {
-            const name = graph && graph.name ? graph.name : '';
-            const graphSelector = new sidebar.SelectView(this._host, model.graphs.map((g) => g.name), name);
+            const graphSelector = new sidebar.SelectView(this._host, model.graphs, graph);
             graphSelector.on('change', (sender, data) => {
                 this._raise('update-active-graph', data);
             });

source/view.js

@@ -438,21 +438,18 @@ view.View = class {
         });
     }
 
-    _updateActiveGraph(name) {
+    _updateActiveGraph(graph) {
         this._sidebar.close();
         if (this._model) {
             const model = this._model;
-            const graph = model.graphs.filter(graph => name === graph.name).shift();
-            if (graph) {
-                this.show('welcome spinner');
-                this._timeout(200).then(() => {
-                    return this._updateGraph(model, [ graph ]).catch((error) => {
-                        if (error) {
-                            this.error(error, 'Graph update failed.', 'welcome');
-                        }
-                    });
+            this.show('welcome spinner');
+            this._timeout(200).then(() => {
+                return this._updateGraph(model, [ graph ]).catch((error) => {
+                    if (error) {
+                        this.error(error, 'Graph update failed.', 'welcome');
+                    }
                 });
-            }
+            });
         }
     }
 
@@ -844,8 +841,8 @@ view.View = class {
         if (this._model) {
             try {
                 const modelSidebar = new sidebar.ModelSidebar(this._host, this._model, this.activeGraph);
-                modelSidebar.on('update-active-graph', (sender, name) => {
-                    this._updateActiveGraph(name);
+                modelSidebar.on('update-active-graph', (sender, graph) => {
+                    this._updateActiveGraph(graph);
                 });
                 const content = modelSidebar.render();
                 this._sidebar.open(content, 'Model Properties');
@@ -944,21 +941,21 @@ view.Graph = class extends grapher.Graph {
 
     createNode(node) {
         const value = new view.Node(this, node);
-        value.name = this._nodeKey++;
+        value.name = (this._nodeKey++).toString();
         this.setNode(value);
         return value;
     }
 
     createInput(input) {
         const value = new view.Input(this, input);
-        value.name = this._nodeKey++;
+        value.name = (this._nodeKey++).toString();
         this.setNode(value);
         return value;
     }
 
     createOutput(output) {
         const value = new view.Output(this, output);
-        value.name = this._nodeKey++;
+        value.name = (this._nodeKey++).toString();
         this.setNode(value);
         return value;
     }