Open summary view for graph inputs and outputs

src/view-render.css

@@ -50,6 +50,14 @@
 .node-attribute path { fill: #fff; stroke-width: 0; stroke: #000; }
 .node-attribute:hover path { fill: #f6f6f6; }
 
+.graph-item-input path { fill: #eee; }
+.graph-item-input:hover { cursor: hand; }
+.graph-item-input:hover path { fill: #fff; }
+
+.graph-item-output path { fill: #eee; }
+.graph-item-output:hover { cursor: hand; }
+.graph-item-output:hover path { fill: #fff; }
+
 .edge-label text { font-family: 'Open Sans', --apple-system, "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 10px; }
 .edge-path { stroke: #000; stroke-width: 1px; fill: none; }
 

src/view-template.js

@@ -140,7 +140,7 @@ In domain <tt>{{{domain}}}</tt> since version <tt>{{{since_version}}}</tt> at su
 
 var summaryTemplate = `
 <style type='text/css'>
-.summary { font-family: 'Open Sans', --apple-system, "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 12px; line-height: 1.5; overflow: hidden; width: 500; margin: auto; }
+.summary { font-family: 'Open Sans', --apple-system, "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 12px; line-height: 1.5; overflow: hidden; margin: auto; }
 .summary h1 { font-family: 'Open Sans', --apple-system, "Helvetica Neue", Helvetica, Arial, sans-serf; font-weight: 600; font-size: 12px; margin: 0; color: #666; letter-spacing: 0.5px; padding: 10px 0px 0px 0px; margin: 20px 0px 0px 0px; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
 .summary .section { margin-top: 10px; margin-bottom: 10px; padding: 10px; overflow-y: auto; position: relative; border: 1px solid none; }
 .summary .section table code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 10px; background-color: rgba(27, 31, 35, 0.05); padding: 0.2em 0.4em; margin: 0; border-radius: 3px; background-color: #d6d6d6; }

src/view.js

@@ -378,7 +378,9 @@ class View {
             };
     
             var formatter = new NodeFormatter();
-            formatter.addItem(input.name, null, input.type, null);
+            formatter.addItem(input.name, [ 'graph-item-input' ], input.type, () => {
+                this.showSummary();
+            });
             g.setNode(nodeId++, { label: formatter.format(svgElement), class: 'graph-input' } ); 
         });
     
@@ -390,13 +392,15 @@ class View {
                 tuple = { from: null, to: [] };
                 edgeMap[outputId] = tuple;
             }
-            tuple.to.push({ 
+            tuple.to.push({
                 node: nodeId,
                 // name: valueInfo.name
             });
     
             var formatter = new NodeFormatter();
-            formatter.addItem(output.name, null, output.type, null);
+            formatter.addItem(output.name, [ 'graph-item-output' ], output.type, () => {
+                this.showSummary();
+            });
             g.setNode(nodeId++, { label: formatter.format(svgElement) } ); 
         });
     
@@ -488,7 +492,7 @@ class View {
         if (this._model) {
             var template = Handlebars.compile(summaryTemplate, 'utf-8');
             var data = template(this._model);
-            this._sidebar.open(data, 'Summary', '100%');
+            this._sidebar.open(data, 'Summary');
         }
     }