Switch to use ES6 () => {} syntax

src/netron.py

@@ -52,7 +52,7 @@ class MyHTTPRequestHandler(BaseHTTPRequestHandler):
                 status_code = 200
             elif pathname == '/data':
                 buffer = self.data.data
-                headers['Content-Type'] = 'text/plain'
+                headers['Content-Type'] = 'application/octet-stream'
                 headers['Content-Length'] = len(buffer)
                 status_code = 200
             else:

src/view-browser.js

@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 
 var hostService = new BrowserHostService();
 
@@ -26,23 +27,22 @@ BrowserHostService.prototype.request = function(file, callback) {
 };
 
 BrowserHostService.prototype.initialize = function(callback) {
-    var self = this;
     this.callback = callback;
 
     updateView('spinner');
     
     var request = new XMLHttpRequest();
     request.responseType = 'arraybuffer';
-    request.onload = function () {
+    request.onload = () => {
         if (request.status == 200) {
-            self.callback(null, new Uint8Array(request.response), document.title);
+            this.callback(null, new Uint8Array(request.response), document.title);
         }
         else {
-            self.callback(request.status, null);
+            this.callback(request.status, null);
         }
     };
-    request.onerror = function () {
-        self.callback(request.status, null);
+    request.onerror = () => {
+        this.callback(request.status, null);
     };
     request.open('GET', '/data', true);
     request.send();

src/view-electron.js

@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 
 var electron = require('electron');
 var fs = require('fs');
@@ -23,12 +24,12 @@ ElectronHostService.prototype.showError = function(message) {
 
 ElectronHostService.prototype.request = function(file, callback) {
     var pathname = path.join(__dirname, file);
-    fs.exists(pathname, function(exists) {
+    fs.exists(pathname, (exists) => {
         if (!exists) {
             callback('File not found.', null);
         }
         else {
-            fs.readFile(pathname, function(err, data) {
+            fs.readFile(pathname, (err, data) => {
                 if (err) {
                     callback(err, null);
                 }
@@ -41,23 +42,22 @@ ElectronHostService.prototype.request = function(file, callback) {
 };
 
 ElectronHostService.prototype.initialize = function(callback) {
-    var self = this;
-    self.callback = callback;
+    this.callback = callback;
 
     updateView('welcome');
     
-    electron.ipcRenderer.on('open-file', function(event, data) {
+    electron.ipcRenderer.on('open-file', (event, data) => {
         var file = data.file;
         if (file) {
             updateView('spinner');
-            self.openBuffer(file);
+            this.openBuffer(file);
         }
     });
 
     var openFileButton = document.getElementById('open-file-button');
     if (openFileButton) {
         openFileButton.style.opacity = 1;
-        openFileButton.addEventListener('click', function(e) {
+        openFileButton.addEventListener('click', (e) => {
             openFileButton.style.opacity = 0;
             electron.ipcRenderer.send('open-file-dialog', {});
         });
@@ -73,42 +73,41 @@ ElectronHostService.prototype.initialize = function(callback) {
         e.preventDefault();
         var files = e.dataTransfer.files;
         for (var i = 0; i < files.length; i++) {
-            self.openFile(files[i].path, i == 0);
+            this.openFile(files[i].path, i == 0);
         }
         return false;
     });
 };
 
 ElectronHostService.prototype.openBuffer = function(file) {
-    var self = this;
-    fs.exists(file, function(exists) {
+    fs.exists(file, (exists) => {
         if (!exists) {
-            self.callback('File not found.', null, null);
+            this.callback('File not found.', null, null);
         }
         else {
-            fs.stat(file, function(err, stats) {
+            fs.stat(file, (err, stats) => {
                 if (err) {
-                    self.callback(err, null, null);
+                    this.callback(err, null, null);
                 }
                 else {
                     var size = stats.size;
                     var buffer = new Uint8Array(size);
-                    fs.open(file, 'r', function(err, fd) {
+                    fs.open(file, 'r', (err, fd) => {
                         if (err) {
-                            self.callback(err, null, null);
+                            this.callback(err, null, null);
                         }
                         else {
-                            fs.read(fd, buffer, 0, size, 0, function(err, bytesRead, buffer) {
+                            fs.read(fd, buffer, 0, size, 0, (err, bytesRead, buffer) => {
                                 if (err) {
-                                    self.callback(err, null, null);
+                                    this.callback(err, null, null);
                                 }
                                 else {
                                     fs.close(fd, function(err) {
                                         if (err) {
-                                            self.callback(err, null);
+                                            this.callback(err, null);
                                         }
                                         else {
-                                            self.callback(null, buffer, path.basename(file));
+                                            this.callback(null, buffer, path.basename(file));
                                         }
                                     });
                                 }

src/view-onnx.js

@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 
 var onnx = protobuf.roots.onnx.onnx;
 
@@ -73,47 +74,43 @@ OnnxModel.prototype.getGraphs = function() {
 };
 
 OnnxModel.prototype.getGraphInputs = function(graph) {
-    var self = this;
     var initializerMap = {};
-    graph.initializer.forEach(function (tensor) {
+    graph.initializer.forEach((tensor) => {
         initializerMap[tensor.name] = true;
     });
     var results = [];
-    for (var i = 0; i < graph.input.length; i++) {
-        var valueInfo = graph.input[i];
+    graph.input.forEach((valueInfo, index) => {
         if (!initializerMap[valueInfo.name]) {
             results.push({
                 id: valueInfo.name,
                 name: valueInfo.name,
-                type: self.formatType(valueInfo.type)
+                type: this.formatType(valueInfo.type)
             });
         }
-    }
+    });
     return results;
 };
 
 OnnxModel.prototype.getGraphOutputs = function(graph) {
-    var self = this;
-    return graph.output.map(function (valueInfo) {
+    return graph.output.map((valueInfo) => {
         return {
             id: valueInfo.name,
             name: valueInfo.name,
-            type: self.formatType(valueInfo.type)
+            type: this.formatType(valueInfo.type)
         };
     });
 };
 
 OnnxModel.prototype.getGraphInitializers = function(graph) {
-    var self = this;
     var results = [];
-    graph.initializer.forEach(function (tensor) {
-        var result = self.formatTensor(tensor);
+    graph.initializer.forEach((tensor) => {
+        var result = this.formatTensor(tensor);
         result.id = tensor.name;
         results.push(result);
     });
-/*    graph.node.forEach(function (node) {
+/*    graph.node.forEach((node) => {
         if (node.opType == 'Constant') {
-            node.attribute.forEach(function (attribute) {
+            node.attribute.forEach((attribute) => {
                 if (attribute.name == 'value') {
                     result[node.output[0]] = attribute.value;
                 }
@@ -137,12 +134,11 @@ OnnxModel.prototype.getNodeOperatorDocumentation = function(graph, node) {
 };
 
 OnnxModel.prototype.getNodeInputs = function(graph, node) {
-    var self = this;
     var results = [];
-    node.input.forEach(function (input, index) {
+    node.input.forEach((input, index) => {
         results.push({
             'id': input,
-            'name': self.operatorMetadata.getInputName(node.opType, index),
+            'name': this.operatorMetadata.getInputName(node.opType, index),
             'type': ""
         });
     });
@@ -150,12 +146,11 @@ OnnxModel.prototype.getNodeInputs = function(graph, node) {
 };
 
 OnnxModel.prototype.getNodeOutputs = function(graph, node) {
-    var self = this;
     var results = [];
-    node.output.forEach(function (output, index) {
+    node.output.forEach((output, index) => {
         results.push({
             id: output,
-            name: self.operatorMetadata.getOutputName(node.opType, index),
+            name: this.operatorMetadata.getOutputName(node.opType, index),
             type: ""
         });
     });
@@ -186,19 +181,17 @@ OnnxModel.prototype.formatNodeProperties = function(node) {
 };
 
 OnnxModel.prototype.formatNodeAttributes = function(node) {
-    var self = this;
     var result = null;
     if (node.attribute && node.attribute.length > 0) {
         result = [];
-        node.attribute.forEach(function (attribute) { 
-            result.push(self.formatNodeAttribute(attribute));
+        node.attribute.forEach((attribute) => { 
+            result.push(this.formatNodeAttribute(attribute));
         });
     }
     return result;
 };
 
 OnnxModel.prototype.formatNodeAttribute = function(attribute) {
-
     var type = "";
     if (attribute.hasOwnProperty('type')) { 
         type = this.formatElementType(attribute.type);
@@ -219,7 +212,7 @@ OnnxModel.prototype.formatNodeAttribute = function(attribute) {
             if (attribute.ints.length > 65536) {
                 return "Too large to render.";
             }
-            return attribute.ints.map(function(v) { return v.toString(); }).join(', '); 
+            return attribute.ints.map((v) => { return v.toString(); }).join(', '); 
         };
     }
     else if (attribute.floats && attribute.floats.length > 0) {
@@ -235,7 +228,7 @@ OnnxModel.prototype.formatNodeAttribute = function(attribute) {
             if (attribute.strings.length > 65536) {
                 return "Too large to render.";
             }
-            return attribute.strings.map(function(s) {
+            return attribute.strings.map((s) => {
                 if (s.filter(c => c <= 32 && c >= 128).length == 0) {
                     return '"' + String.fromCharCode.apply(null, s) + '"';
                 }
@@ -379,9 +372,7 @@ OnnxTensorFormatter.prototype.toString = function() {
     }
 
     var size = 1;
-    this.tensor.dims.forEach(function (dimSize) {
-        size *= dimSize;
-    });
+    this.tensor.dims.forEach((dimSize) => { size *= dimSize; });
     if (size > 65536) {
         return 'Tensor is too large to display.';
     }
@@ -514,21 +505,20 @@ OnnxTensorFormatter.prototype.read = function(dimension) {
 };
 
 function OnnxOperatorMetadata(hostService) {
-    var self = this;
-    self.map = {};
-    hostService.request('/onnx-operator.json', function(err, data) {
+    this.map = {};
+    hostService.request('/onnx-operator.json', (err, data) => {
         if (err != null) {
             // TODO error
         }
         else {
             var items = JSON.parse(data);
             if (items) {
-                items.forEach(function (item) {
+                items.forEach((item) => {
                     if (item.name && item.schema)
                     {
                         var name = item.name;
                         var schema = item.schema;
-                        self.map[name] = schema;
+                        this.map[name] = schema;
                     }
                 });
             }
@@ -594,7 +584,7 @@ OnnxOperatorMetadata.prototype.getOperatorDocumentation = function(operator) {
                 if (line.length == 0 || input.length == 0) {
                     if (lines.length > 0) {
                         if (code) {
-                            lines = lines.map(function (text) { return text.substring(2); });
+                            lines = lines.map((text) => { return text.substring(2); });
                             output.push('<pre>' + lines.join('') + '</pre>');
                         }
                         else {
@@ -620,9 +610,9 @@ OnnxOperatorMetadata.prototype.getOperatorDocumentation = function(operator) {
             schema.outputs_range = formatRange(schema.min_output) + ' - ' + formatRange(schema.max_output);
         }
         if (schema.type_constraints) {
-            schema.type_constraints.forEach(function (item) {
+            schema.type_constraints.forEach((item) => {
                 if (item.allowed_type_strs) {
-                    item.allowed_type_strs_display = item.allowed_type_strs.map(function (type) { return type; }).join(', ');
+                    item.allowed_type_strs_display = item.allowed_type_strs.map((type) => { return type; }).join(', ');
                 }
             });
         }

src/view-render.js

@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 
 function NodeFormatter(context) {
     this.items = [];
@@ -39,16 +40,15 @@ NodeFormatter.prototype.setAttributeHandler = function(handler) {
 };
 
 NodeFormatter.prototype.format = function(context) {
-    var self = this;
     var root = context.append('g');
-    var hasProperties = self.properties && self.properties.length > 0;
-    var hasAttributes = self.attributes && self.attributes.length > 0;
+    var hasProperties = this.properties && this.properties.length > 0;
+    var hasAttributes = this.attributes && this.attributes.length > 0;
     var x = 0;
     var y = 0;
     var maxWidth = 0;
     var itemHeight = 0;
     var itemBoxes = [];
-    self.items.forEach(function (item, index) {
+    this.items.forEach((item, index) => {
         var yPadding = 4;
         var xPadding = 7;
         var group = root.append('g').classed('node-item', true);
@@ -97,13 +97,13 @@ NodeFormatter.prototype.format = function(context) {
     var propertiesPath = null;
     if (hasProperties) {
         var group = root.append('g').classed('node-property', true);
-        if (self.propertyHandler) {
-            group.on('click', self.propertyHandler);
+        if (this.propertyHandler) {
+            group.on('click', this.propertyHandler);
         }
         propertiesPath = group.append('path');
         group.attr('transform', 'translate(' + x + ',' + y + ')');
         propertiesHeight += 4;
-        self.properties.forEach(function (property) {
+        this.properties.forEach((property) => {
             var yPadding = 1;
             var xPadding = 4;
             var text = group.append('text').attr('xml:space', 'preserve');
@@ -128,13 +128,13 @@ NodeFormatter.prototype.format = function(context) {
     if (hasAttributes)
     {
         var group = root.append('g').classed('node-attribute', true);
-        if (self.attributeHandler) {
-            group.on('click', self.attributeHandler);
+        if (this.attributeHandler) {
+            group.on('click', this.attributeHandler);
         }
         attributesPath = group.append('path');
         group.attr('transform', 'translate(' + x + ',' + y + ')');
         attributesHeight += hasProperties ? 1 : 4;
-        self.attributes.forEach(function (attribute) {
+        this.attributes.forEach((attribute) => {
             var yPadding = 1;
             var xPadding = 4;
             var text = group.append('text').attr('xml:space', 'preserve');
@@ -156,33 +156,33 @@ NodeFormatter.prototype.format = function(context) {
     }
 
     if (maxWidth > itemWidth) {
-        var d = (maxWidth - itemWidth) / self.items.length;
-        itemBoxes.forEach(function (itemBox, index) {
+        var d = (maxWidth - itemWidth) / this.items.length;
+        itemBoxes.forEach((itemBox, index) => {
             itemBox.x = itemBox.x + (index * d);
             itemBox.width = itemBox.width + d;
             itemBox.tx = itemBox.tx + (0.5 * d);
         });
     }
 
-    itemBoxes.forEach(function(itemBox, index) {
+    itemBoxes.forEach((itemBox, index) => {
         itemBox.group.attr('transform', 'translate(' + itemBox.x + ',' + itemBox.y + ')');        
         var r1 = index == 0;
         var r2 = index == itemBoxes.length - 1;
         var r3 = !hasAttributes && !hasProperties && r2;
         var r4 = !hasAttributes && !hasProperties && r1;
-        itemBox.path.attr('d', self.roundedRect(0, 0, itemBox.width, itemBox.height, r1, r2, r3, r4));
+        itemBox.path.attr('d', this.roundedRect(0, 0, itemBox.width, itemBox.height, r1, r2, r3, r4));
         itemBox.text.attr('x', itemBox.tx).attr('y', itemBox.ty);
     });
 
     if (hasProperties) {
-        propertiesPath.attr('d', self.roundedRect(0, 0, maxWidth, propertiesHeight, false, false, !hasAttributes, !hasAttributes));
+        propertiesPath.attr('d', this.roundedRect(0, 0, maxWidth, propertiesHeight, false, false, !hasAttributes, !hasAttributes));
     }
 
     if (hasAttributes) {
-        attributesPath.attr('d', self.roundedRect(0, 0, maxWidth, attributesHeight, false, false, true, true));
+        attributesPath.attr('d', this.roundedRect(0, 0, maxWidth, attributesHeight, false, false, true, true));
     }
 
-    itemBoxes.forEach(function(itemBox, index) {
+    itemBoxes.forEach((itemBox, index) => {
         if (index != 0) {
             root.append('line').classed('node', true).attr('x1', itemBox.x).attr('y1', 0).attr('x2', itemBox.x).attr('y2', itemHeight);
         }
@@ -190,7 +190,7 @@ NodeFormatter.prototype.format = function(context) {
     if (hasAttributes || hasProperties) {
         root.append('line').classed('node', true).attr('x1', 0).attr('y1', itemHeight).attr('x2', maxWidth).attr('y2', itemHeight);
     }
-    root.append('path').classed('node', true).attr('d', self.roundedRect(0, 0, maxWidth, itemHeight + propertiesHeight + attributesHeight, true, true, true, true));
+    root.append('path').classed('node', true).attr('d', this.roundedRect(0, 0, maxWidth, itemHeight + propertiesHeight + attributesHeight, true, true, true, true));
 
     context.html("");
     return root;

src/view-template.js

@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 
 var itemsTemplate = `
 <style type='text/css'>

src/view-tf.js

@@ -103,6 +103,10 @@ TensorFlowModel.prototype.getNodeOperator = function(node) {
 };
 
 TensorFlowModel.prototype.getNodeOperatorDocumentation = function(graph, node) {
+    var graphMetadata = this.getGraphMetadata(graph);
+    if (graphMetadata) {
+        return graphMetadata.getOperatorDocumentation(node.op);       
+    }
     return null;
 };
 
@@ -151,13 +155,15 @@ TensorFlowModel.prototype.formatNodeAttributes = function(node) {
     var result = [];
     if (node.attr) {
         Object.keys(node.attr).forEach(function (name) {
-            var value = node.attr[name];
-            result.push({ 
-                'name': name,
-                'type': '',
-                'value': function() { return '...'; }, 
-                'value_short': function() { return '...'; }
-            });
+            if (name != '_output_shapes') {
+                var value = node.attr[name];
+                result.push({ 
+                    'name': name,
+                    'type': '',
+                    'value': function() { return '...'; }, 
+                    'value_short': function() { return '...'; }
+                });    
+            }
         });
     }
     return result;
@@ -174,7 +180,7 @@ TensorFlowModel.prototype.formatTensor = function(tensor) {
     result.type = this.formatTensorType(tensor);
     result.value = function() {
         return '?';
-    }
+    };
     return result;
 };
 
@@ -182,14 +188,15 @@ function TensorFlowGraphMetadata(metaInfoDef) {
     var self = this;
     self.schemaMap = {};
     metaInfoDef.strippedOpList.op.forEach(function (opDef) {
-        var schema = {};
-        schema.inputs = [];
-        schema.outputs = [];
+        var schema = { inputs: [], outputs: [], attributes: [] };
         opDef.inputArg.forEach(function (inputArg) {
-            schema.inputs.push({ name: inputArg.name });
+            schema.inputs.push({ name: inputArg.name, typeStr: inputArg.typeAttr });
         });
         opDef.outputArg.forEach(function (outputArg) {
-            schema.outputs.push({ name: outputArg.name });
+            schema.outputs.push({ name: outputArg.name, typeStr: outputArg.typeAttr });
+        });
+        opDef.attr.forEach(function (attr) {
+            schema.attributes.push({ name: attr.name, type: attr.type });
         });
         self.schemaMap[opDef.name] = schema;
     });
@@ -228,3 +235,12 @@ TensorFlowGraphMetadata.prototype.getOutputName = function(operator, index) {
     }
     return '(' + index.toString() + ')';
 };
+
+TensorFlowGraphMetadata.prototype.getOperatorDocumentation = function(operator) {
+    var schema = this.schemaMap[operator];
+    if (schema) {
+        var template = Handlebars.compile(operatorTemplate, 'utf-8');
+        return template(schema);
+    }
+    return null;
+};

src/view-tflite.js

@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 
 // Experimental
 
@@ -198,7 +199,6 @@ TensorFlowLiteModel.prototype.formatNodeProperties = function(node) {
 };
 
 TensorFlowLiteModel.prototype.formatNodeAttributes = function(node) {
-    var self = this;
     var results = [];
     var operatorName = this.getNodeOperator(node);
     var optionsTypeName = 'tflite.' + operatorName + 'Options';
@@ -207,21 +207,21 @@ TensorFlowLiteModel.prototype.formatNodeAttributes = function(node) {
         var options = eval('new ' + optionsTypeName + '()');
         node.builtinOptions(options);
         var attributeNames = [];
-        Object.keys(options.__proto__).forEach(function (attributeName) {
+        Object.keys(Object.getPrototypeOf(options)).forEach(function (attributeName) {
             if (attributeName != '__init') {
                 attributeNames.push(attributeName);
             }
         });
-        attributeNames.forEach(function (attributeName) {
+        attributeNames.forEach((attributeName) => {
             if (options[attributeName] && typeof options[attributeName] == 'function') {
                 var value = options[attributeName]();
-                value = self.formatAttributeValue(value, attributeName, optionsTypeName);
+                value = this.formatAttributeValue(value, attributeName, optionsTypeName);
                 if (value != null) {
                     results.push({
                         name: attributeName,
                         type: '',
-                        value: function() { return value; }, 
-                        value_short: function() { return value; }
+                        value: () => { return value; }, 
+                        value_short: () => { return value; }
                     });
                 }
             }

src/view.js

@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 
 debugger;
 // electron.remote.getCurrentWindow().webContents.openDevTools();
@@ -10,7 +11,7 @@ document.body.scroll = 'no';
 
 var navigationButton = document.getElementById('navigation-button');
 if (navigationButton) {
-    navigationButton.addEventListener('click', function(e) {
+    navigationButton.addEventListener('click', (e) => {
         showModelSummary(modelService.getActiveModel());
     });
 }
@@ -310,7 +311,7 @@ function showTensor(model, tensor) {
         var view = { 'items': [ tensor ] };
         var template = Handlebars.compile(itemsTemplate, 'utf-8');
         var data = template(view);
-        sidebar.open(data, 'Initializer');
+        sidebar.open(data, 'Tensor');
     }
 }
 
@@ -333,17 +334,16 @@ function showNodeAttributes(model, node) {
 }
 
 function Sidebar() {
-    var self = this;
-    this.closeSidebarHandler = function (e) {
-        self.close();
+    this.closeSidebarHandler = (e) => {
+        this.close();
     };
-    this.closeSidebarKeyDownHandler = function (e) {
+    this.closeSidebarKeyDownHandler = (e) => {
         if (e.keyCode == 27) {
             e.preventDefault();
-            self.close();
+            this.close();
         }
     };
-    this.resizeSidebarHandler = function (e) {
+    this.resizeSidebarHandler = (e) => {
         var contentElement = document.getElementById('sidebar-content');
         if (contentElement) {
             contentElement.style.height = window.innerHeight - 60;