Add Properties button

src/view-browser.html

@@ -19,14 +19,15 @@
     <img id='logo' class='center' src='logo.svg' width='124' height='124'>
     <button id='open-file-button' class='center' style='top: 200px; width: 150px; display: none;'>Open ONNX Model...</button>
     <!-- Preload fonts to workaround Chrome SVG layout issue -->
-    <div style='font-family: "Open Sans"; font-size: 10px; font-weight: normal; color: #e6e6e6'>.</div>
-    <div style='font-family: "Open Sans"; font-size: 10px; font-weight: 600; color: #e6e6e6'>.</div>
-    <div style='font-family: "Open Sans"; font-size: 10px; font-weight: bold; color: #e6e6e6'>.</div>
+    <div style='font-weight: normal; color: #e6e6e6'>.</div>
+    <div style='font-weight: 600; color: #e6e6e6'>.</div>
+    <div style='font-weight: bold; color: #e6e6e6'>.</div>
 </div>
 <div id='clock' class='background' style='display: none;'>
     <img class='center' src='logo.svg' width='124' height='124'>
 </div>
 <svg id='graph' class='graph' preserveAspectRatio='xMidYMid meet'></svg>
+<button id='properties-button' style='position: absolute; top: 10px; left: 10px; display: none;'>Properties</button> 
 <div id='sidebar' class='sidebar'>
     <h1 id='sidebar-title' class='sidebar-title'></h1>
     <a href='javascript:void(0)' id='sidebar-closebutton' class='sidebar-closebutton'>&times;</a>

src/view-browser.js

@@ -3,29 +3,17 @@ var hostService = new BrowserHostService();
 
 function BrowserHostService()
 {
-    var openFileButton = document.getElementById('open-file-button');
-    if (openFileButton) {
-        openFileButton.style.display = 'none';
-    }
-
-    /*
-    const contextMenu = new electron.remote.Menu();
-    contextMenu.append(new electron.remote.MenuItem({
-        label: 'Properties...', 
-        click: function() { showProperties(); }
-    }));
-    
-    window.addEventListener('contextmenu', function(e) {
-        e.preventDefault();
-        if (contextMenu) {
-            contextMenu.popup(electron.remote.getCurrentWindow(), { async: true });
-        }
-    }, false);
-    */
-
     var self = this;
 
     window.addEventListener('load', function(e) {
+
+        var propertiesButton = document.getElementById('properties-button');
+        if (propertiesButton) {
+            propertiesButton.addEventListener('click', function(e) {
+                showModelProperties();
+            });
+        }
+    
         updateView('clock');
         var request = new XMLHttpRequest();
         request.responseType = 'arraybuffer';
@@ -35,35 +23,21 @@ function BrowserHostService()
         request.onerror = function () {
             self.callback(request.status, null);
         }
-        request.open("GET", "model");
+        request.open('GET', 'model');
         request.send();
     });
 }
 
-BrowserHostService.prototype.openFile = function(file, drop) {
-    /*
-    var data = {};
-    data['file'] = file;
-    if (drop) {
-        data['window'] = electron.remote.getCurrentWindow().id;
-    } 
-    electron.ipcRenderer.send('open-file', data);
-    */
-}
-
 BrowserHostService.prototype.showError = function(message) {
     alert(message);
 }
 
 BrowserHostService.prototype.getResource = function(file, callback) {
-
     var request = new XMLHttpRequest();
-    request.onreadystatechange = function() {
-        if (this.readyState == 4 && this.status == 200) {
-            callback(null, this.responseText);
-        }
+    request.onload = function() {
+        callback(null, this.responseText);
     }
-    request.open("GET", file, true);
+    request.open('GET', file, true);
     request.send();
 
     // TODO error
@@ -72,43 +46,3 @@ BrowserHostService.prototype.getResource = function(file, callback) {
 BrowserHostService.prototype.registerCallback = function(callback) {
     this.callback = callback;
 }
-
-BrowserHostService.prototype.openBuffer = function(file) {
-    /*
-    fs.exists(file, function(exists) {
-        if (exists) {
-            fs.stat(file, function(err, stats) {
-                if (err) {
-                    callback(err, null);
-                }
-                else {
-                    var size = stats.size;
-                    var buffer = new Uint8Array(size);
-                    fs.open(file, 'r', function(err, fd) {
-                        if (err) {
-                            callback(err, null);
-                        }
-                        else {
-                            fs.read(fd, buffer, 0, size, 0, function(err, bytesRead, buffer) {
-                                if (err) {
-                                    callback(err, null);
-                                }
-                                else {
-                                    fs.close(fd, function(err) {
-                                        if (err) {
-                                            callback(err, null);
-                                        }
-                                        else {
-                                            callback(null, buffer);
-                                        }
-                                    });
-                                }
-                            });
-                        }
-                    });
-                }
-            });
-        }
-    });
-    */
-}

src/view-electron.html

@@ -19,14 +19,15 @@
     <img id='logo' class='center' src='logo.svg' width='124' height='124'>
     <button id='open-file-button' class='center' style='top: 200px; width: 150px'>Open ONNX Model...</button>
     <!-- Preload fonts to workaround Chrome SVG layout issue -->
-    <div style='font-family: "Open Sans"; font-size: 10px; font-weight: normal; color: #e6e6e6'>.</div>
-    <div style='font-family: "Open Sans"; font-size: 10px; font-weight: 600; color: #e6e6e6'>.</div>
-    <div style='font-family: "Open Sans"; font-size: 10px; font-weight: bold; color: #e6e6e6'>.</div>
+    <div style='font-weight: normal; color: #e6e6e6'>.</div>
+    <div style='font-weight: 600; color: #e6e6e6'>.</div>
+    <div style='font-weight: bold; color: #e6e6e6'>.</div>
 </div>
 <div id='clock' class='background' style='display: none;'>
     <img class='center' src='clock.svg' width='124' height='124'>
 </div>
 <svg id='graph' class='graph' preserveAspectRatio='xMidYMid meet'></svg>
+<button id='properties-button' style='position: absolute; top: 10px; left: 10px; display: none;'>Properties</button> 
 <div id='sidebar' class='sidebar'>
     <h1 id='sidebar-title' class='sidebar-title'></h1>
     <a href='javascript:void(0)' id='sidebar-closebutton' class='sidebar-closebutton'>&times;</a>

src/view-electron.js

@@ -18,13 +18,21 @@ function ElectronHostService()
     });
 
     window.addEventListener('load', function(e) {
+
         var openFileButton = document.getElementById('open-file-button');
         if (openFileButton) {
-            openFileButton.style.display = 'block';
             openFileButton.addEventListener('click', function(e) {
                 electron.ipcRenderer.send('open-file-dialog', {});
             });
         }
+
+        var propertiesButton = document.getElementById('properties-button');
+        if (propertiesButton) {
+            propertiesButton.addEventListener('click', function(e) {
+                showModelProperties();
+            });
+        }
+
         document.addEventListener('dragover', function(e) {
             e.preventDefault();
         });
@@ -40,19 +48,6 @@ function ElectronHostService()
             return false;
         });
     });
-
-    const contextMenu = new electron.remote.Menu();
-    contextMenu.append(new electron.remote.MenuItem({
-        label: 'Properties...', 
-        click: function() { showModelProperties(); }
-    }));
-    
-    window.addEventListener('contextmenu', function(e) {
-        e.preventDefault();
-        if (contextMenu) {
-            contextMenu.popup(electron.remote.getCurrentWindow(), { async: true });
-        }
-    }, false);
 }
 
 ElectronHostService.prototype.openFile = function(file, drop) {

src/view.css

@@ -21,11 +21,9 @@ body {
 }
 
 button {
-    font-family: "Open Sans";
+    font-family: 'Open Sans', --apple-system, "Helvetica Neue", Helvetica, Arial, sans-serf;
     font-size: 12px;
     font-weight: 600;
-    color: #999;
-    background-color: #e6e6e6;
     line-height: 1.25;
     text-align: center;
     vertical-align: middle;
@@ -34,12 +32,9 @@ button {
     height: 30px;
     margin: 0;
     border-radius: 6px;
-    border: 1px solid #aaa;
 }
 
 button:hover {
-    background-color: #aaa;
-    color: #e6e6e6;
     cursor: hand;
 }
 
@@ -48,6 +43,30 @@ button:focus
     outline: 0;
 }
 
+button {
+    color: #aaa;
+    background-color: #fff;
+    border: 1px solid #aaa;
+    transition: 0.2s;
+}
+
+button:hover { 
+    color: #fff;
+    background-color: #aaa;
+    transition: 0.2s;
+}
+
+.background button {
+    color: #999;
+    background-color: #e6e6e6;
+    border: 1px solid #aaa;
+}
+
+.background button:hover { 
+    color: #e6e6e6;
+    background-color: #aaa;
+}
+
 .sidebar {
     font-family: 'Open Sans', --apple-system, "Helvetica Neue", Helvetica, Arial, sans-serf;
     font-size: 12px;

src/view.js

@@ -28,24 +28,27 @@ function updateView(page) {
 
     var welcomeElement = document.getElementById('welcome');
     var clockElement = document.getElementById('clock');
+    var propertiesElement = document.getElementById('properties-button');
 
     if (page == 'welcome') {
         welcomeElement.style.display = 'block';
         clockElement.style.display = 'none';
         document.body.style.cursor = 'default';
-        
+        propertiesElement.style.display = 'none';
     }
 
     if (page == 'clock') {
         welcomeElement.style.display = 'none';
         clockElement.style.display = 'block';
         document.body.style.cursor = 'wait';
+        propertiesElement.style.display = 'none';
     }
 
     if (page == 'graph') {
         welcomeElement.style.display = 'none';
         clockElement.style.display = 'none';
         document.body.style.cursor = 'default';
+        propertiesElement.style.display = 'block';
     }
 }
 
@@ -276,7 +279,7 @@ function formatType(type) {
 function showDocumentation(operator) {
     var documentation = modelService.getOperatorService().getOperatorDocumentation(operator);
     if (documentation) {
-        openSidebar(documentation, 'Documentation');
+        sidebar.open(documentation, 'Documentation');
     }
 }
 
@@ -285,15 +288,18 @@ function showModelProperties() {
     if (view) {
         var template = Handlebars.compile(modelPropertiesTemplate, 'utf-8');
         var data = template(view);
-        openSidebar(data, 'Model Properties');
+        sidebar.open(data, 'Model Properties');
     }
 }
 
 function showInitializer(initializer) {
-    var view = { 'items': [ modelService.formatTensor(initializer) ] };
-    var template = Handlebars.compile(itemsTemplate, 'utf-8');
-    var data = template(view);
-    openSidebar(data, 'Initializer');
+    var initializer = modelService.formatTensor(initializer);
+    if (initializer) {
+        var view = { 'items': [ initializer ] };
+        var template = Handlebars.compile(itemsTemplate, 'utf-8');
+        var data = template(view);
+        sidebar.open(data, 'Initializer');
+    }
 }
 
 function showNodeProperties(node) {
@@ -301,7 +307,7 @@ function showNodeProperties(node) {
     if (properties) {
         var template = Handlebars.compile(itemsTemplate, 'utf-8');
         var data = template({ 'items': properties });
-        openSidebar(data, 'Node Properties');
+        sidebar.open(data, 'Node Properties');
     }
 }
 
@@ -310,23 +316,33 @@ function showNodeAttributes(node) {
     if (attributes) {
         var template = Handlebars.compile(itemsTemplate, 'utf-8');
         var data = template({ 'items': attributes });
-        openSidebar(data, 'Node Attributes');
+        sidebar.open(data, 'Node Attributes');
     }
 }
 
-var closeSidebarHandler = closeSidebar;
-var closeSidebarKeyDownHandler = closeSidebarKeyDown; 
+function Sidebar() {
+    var self = this;
+    this.closeSidebarHandler = function (e) {
+        self.close();
+    };
+    this.closeSidebarKeyDownHandler = function (e) {
+        if (e.keyCode == 27) {
+            e.preventDefault()
+            self.close();
+        }
+    }
+}
 
-function openSidebar(content, title) {
+Sidebar.prototype.open = function(content, title) {
     var sidebarElement = document.getElementById('sidebar');
     var titleElement = document.getElementById('sidebar-title');
     var contentElement = document.getElementById('sidebar-content');
     var closeButtonElement = document.getElementById('sidebar-closebutton');
     if (sidebarElement && contentElement && closeButtonElement && titleElement) {
         titleElement.innerHTML = title ? title.toUpperCase() : '';
-        closeButtonElement.addEventListener('click', closeSidebarHandler);
+        closeButtonElement.addEventListener('click', this.closeSidebarHandler);
         closeButtonElement.style.color = '#818181';
-        document.addEventListener('keydown', closeSidebarKeyDownHandler);
+        document.addEventListener('keydown', this.closeSidebarKeyDownHandler);
         contentElement.style.height = window.innerHeight - 60;
         sidebarElement.style.height = window.innerHeight;
         contentElement.innerHTML = content
@@ -335,21 +351,16 @@ function openSidebar(content, title) {
     }
 }
 
-function closeSidebarKeyDown(e) {
-    if (e.keyCode == 27) {
-        e.preventDefault()
-        closeSidebar();
-    }
-}
-
-function closeSidebar() {
+Sidebar.prototype.close = function() {
     var sidebarElement = document.getElementById('sidebar');
     var contentElement = document.getElementById('sidebar-content');
     var closeButtonElement = document.getElementById('sidebar-closebutton');
     if (sidebarElement && contentElement && closeButtonElement) {
-        closeButtonElement.removeEventListener('click', closeSidebarHandler);
+        closeButtonElement.removeEventListener('click', this.closeSidebarHandler);
         closeButtonElement.style.color = '#f8f8f8';
-        document.removeEventListener('keydown', closeSidebarKeyDownHandler);
+        document.removeEventListener('keydown', this.closeSidebarKeyDownHandler);
         sidebarElement.style.width = '0';
     }
 }
+
+var sidebar = new Sidebar();