Update model and node properties title

src/view-node.css

@@ -7,6 +7,7 @@
     padding-bottom: 0.3em;
     margin-top: 0;
     margin-bottom: 16px;
+    color: #333;
     user-select: none; 
     -webkit-user-select: none; 
     -moz-user-select: none;
@@ -21,6 +22,7 @@
     margin-bottom: 16px;
     border-bottom: 1px solid #eaecef;
     display: block;
+    color: #333;
     user-select: none; 
     -webkit-user-select: none; 
     -moz-user-select: none;

src/view-template.js

@@ -98,7 +98,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; margin: auto; }
-.summary h1 { font-family: inherit; font-weight: 600; font-size: 12px; margin: 0; color: #666; letter-spacing: 0.5px; padding: 10px 0px 0px 0px; margin: 10px 0px 0px 0px; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
+.summary h1 { font-family: inherit; font-weight: 600; font-size: 12px; margin: 0; color: #333; letter-spacing: 0.5px; padding: 10px 0px 0px 0px; margin: 10px 0px 0px 0px; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
 .summary .section { color: #777; margin-top: 10px; margin-bottom: 10px; padding: 10px; overflow-y: auto; position: relative; border: 1px solid none; border-radius: 10px; border: 1px solid #ccc; }
 .summary .section .property { margin: 2px 0 2px 0; overflow: hidden; width: 100% !important; }
 .summary .section .property .name { float: left; clear: left; width: 80px; min-width: 80px; font-weight: 600; }
@@ -110,7 +110,6 @@ var summaryTemplate = `
 
 <div class='summary'>
 
-<h1>MODEL PROPERTIES</h1>
 <div class='section'>
 {{#properties}}
 <div class='property'>

src/view.js

@@ -12,7 +12,7 @@ class View {
         var navigationButton = document.getElementById('navigation-button');
         if (navigationButton) {
             navigationButton.addEventListener('click', (e) => {
-                this.showSummary();
+                this.showModelProperties();
             });
         }
     }
@@ -207,7 +207,7 @@ class View {
         graph.nodes.forEach((node) => {
             var formatter = new NodeFormatter();
     
-            function addOperator(viewService, formatter, node) {
+            function addOperator(view, formatter, node) {
                 if (node) {
                     var styles = [ 'node-item-operator' ];
                     var category = node.category;
@@ -215,7 +215,7 @@ class View {
                         styles.push('node-item-operator-' + category.toLowerCase());
                     }
                     formatter.addItem(node.primitive ? node.primitive : node.operator, styles, node.name, () => { 
-                        viewService.showNode(node);
+                        view.showNodeProperties(node);
                     });
                 }
             }
@@ -279,12 +279,12 @@ class View {
     
             if (hiddenInputs) {
                 formatter.addItem('...', [ 'node-item-input' ], '', () => {
-                    this.showNode(node);
+                    this.showNodeProperties(node);
                 });    
             }
             if (hiddenInitializers) {
                 formatter.addItem('...', [ 'node-item-constant' ], '', () => {
-                    this.showNode(node);
+                    this.showNodeProperties(node);
                 });    
             }
     
@@ -310,7 +310,7 @@ class View {
             var attributes = node.attributes; 
             if (attributes && !primitive) {
                 formatter.setAttributeHandler(() => { 
-                    this.showNode(node);
+                    this.showNodeProperties(node);
                 });
                 attributes.forEach((attribute) => {
                     if (attribute.visible) {
@@ -380,7 +380,7 @@ class View {
     
             var formatter = new NodeFormatter();
             formatter.addItem(input.name, [ 'graph-item-input' ], input.type, () => {
-                this.showSummary();
+                this.showModelProperties();
             });
             g.setNode(nodeId++, { label: formatter.format(svgElement), class: 'graph-input' } ); 
         });
@@ -400,7 +400,7 @@ class View {
     
             var formatter = new NodeFormatter();
             formatter.addItem(output.name, [ 'graph-item-output' ], output.type, () => {
-                this.showSummary();
+                this.showProperties();
             });
             g.setNode(nodeId++, { label: formatter.format(svgElement) } ); 
         });
@@ -489,21 +489,21 @@ class View {
         }, 2);
     }
 
-    showSummary() {
+    showModelProperties() {
         if (this._model) {
             var template = Handlebars.compile(summaryTemplate, 'utf-8');
             var data = template(this._model);
-            this._sidebar.open(data, 'Summary');
+            this._sidebar.open(data, 'Model Properties');
         }
     }
     
-    showNode(node) {
+    showNodeProperties(node) {
         if (node) {
             var documentationHandler = () => {
                 this.showDocumentation(node);
             };
             var view = new NodeView(node, documentationHandler);
-            this._sidebar.open(view.elements, 'Node');
+            this._sidebar.open(view.elements, 'Node Properties');
         }
     }