Make FIND sidebar more durable

source/index.html

@@ -232,14 +232,15 @@
 .sidebar-find-query { width: 100vw; background: none; font-family: inherit; font-size: 13px; padding: 8px 8px 8px 8px; border: 0; outline: 0; }
 .sidebar-find-toggle { margin-left: auto; margin-right: 2px; width: 16px; height: 16px; cursor: pointer; }
 .sidebar-find-toggle input[type="checkbox"] { display: none; }
-.sidebar-find-toggle input[type="checkbox"]:not(:checked) + svg { fill: #ccc; stroke: #ccc; }
-.sidebar-find-toggle input[type="checkbox"]:checked + svg { fill: #555; stroke: #555; }
-.sidebar-find-toggle-icon { stroke: #555; fill: #555; width: 16px; height: 16px; }
+.sidebar-find-toggle input[type="checkbox"]:not(:checked) + img { /* #ccc */ filter: invert(89%) sepia(2%) saturate(1448%) hue-rotate(193deg) brightness(122%) contrast(60%); }
+.sidebar-find-toggle input[type="checkbox"]:checked + img { /* #555 */ filter: invert(33%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(94%) contrast(86%); }
 .sidebar-find-content { flex-grow: 1; padding: 0px 20px 20px 20px; padding-right: 20px; overflow-y: auto; list-style-type: none; overflow-y: auto; margin: 0; }
-.sidebar-find-content li { color: #666; height: 22px; padding: 0 12px 0 12px; outline: 0; white-space: nowrap; border-radius: 3px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
+.sidebar-find-content li { color: #666; height: 22px; padding: 0 12px 0 12px; outline: 0; white-space: nowrap; border-radius: 3px; user-select: none; -webkit-user-select: none; -moz-user-select: none; display: flex; align-items: center; }
 .sidebar-find-content li:hover { background: #e5e5e5; color: #000; }
-.sidebar-find-content li>span { font-size: 13px; line-height: 22px; padding-left: 2px; pointer-events: none; }
-.sidebar-find-content-icon { stroke: #555; fill: #555; float: left; width: 16px; height: 16px; margin: 3px; }
+.sidebar-find-content-icon {
+      /* #555 */ filter: invert(28%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(100%) contrast(75%);
+      float: left; width: 16px; height: 16px; margin: 3px; contain: strict; pointer-events: none;
+ }
 .sidebar-documentation { flex-grow: 1; padding: 0px 20px 20px 20px; overflow-y: auto; font-size: 13px; line-height: 1.5; margin: 0; }
 .sidebar-documentation h1 { font-weight: bold; font-size: 13px; line-height: 1.25; border-bottom: 1px solid #e8e8e8; padding-bottom: 0.3em; margin-top: 0; margin-bottom: 16px; }
 .sidebar-documentation h2 { font-weight: bold; font-size: 13px; line-height: 1.25; margin-top: 20px; margin-bottom: 16px; text-transform: uppercase; border: 0; }
@@ -273,11 +274,11 @@
     .sidebar-documentation code { background-color: #1e1e1e; }
     .sidebar-documentation pre { background-color: #1e1e1e; }
     .sidebar-find-search { background: #383838; color: #dfdfdf; border-color: #424242; }
-    .sidebar-find-toggle input[type="checkbox"]:not(:checked) + svg { fill: #555; stroke: #555; }
-    .sidebar-find-toggle input[type="checkbox"]:checked + svg { fill: #aaa; stroke: #aaa; }
+    .sidebar-find-toggle input[type="checkbox"]:not(:checked) + img { /* #555 */ filter: invert(33%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(94%) contrast(86%); }
+    .sidebar-find-toggle input[type="checkbox"]:checked + img { /* #aaa */ filter: invert(72%) sepia(0%) saturate(17%) hue-rotate(142deg) brightness(94%) contrast(92%); }
     .sidebar-find-content li { color: #aaaaaa; }
     .sidebar-find-content li:hover { background: #383838; color: #dfdfdf; }
-    .sidebar-find-content-icon { stroke: #888888; fill: #888888; }
+    .sidebar-find-content-icon { /* #888 */ filter: invert(51%) sepia(71%) saturate(0%) hue-rotate(166deg) brightness(92%) contrast(90%); }
     .sidebar-item-value-expander { color: #888; }
     .sidebar-item-value-expander:hover { color: #e5e5e5; }
     .sidebar-item-value-button { color: #888; }
@@ -298,28 +299,9 @@
     <h1 id="sidebar-title" class="sidebar-title"></h1>
     <a id="sidebar-closebutton" class="sidebar-closebutton" href="javascript:void(0)" draggable="false">&times;</a>
     <div id="sidebar-content" class="sidebar-content"></div>
-    <svg width="0" height="0" display="none">
-        <defs>
-            <symbol id="sidebar-icon-node" viewBox="0 0 20 20">
-                <circle cx="10" cy="10" r="6" stroke-width="2" fill="none"/>
-            </symbol>
-            <symbol id="sidebar-icon-connection" viewBox="0 0 20 20">
-                <line x1="4" y1="10" x2="15" y2="10" stroke-width="2" />
-                <polyline points="11,6 15,10 11,14" stroke-width="2" />
-            </symbol>
-            <symbol id="sidebar-icon-weight" viewBox="0 0 20 20">
-                <circle cx="5" cy="5" r="1" />
-                <circle cx="10" cy="5" r="1" />
-                <circle cx="15" cy="5" r="1" />
-                <circle cx="5" cy="10" r="1" />
-                <circle cx="10" cy="10" r="1" />
-                <circle cx="15" cy="10" r="1" />
-                <circle cx="5" cy="15" r="1" />
-                <circle cx="10" cy="15" r="1" />
-                <circle cx="15" cy="15" r="1" />
-          </symbol>
-        </defs>
-    </svg>
+    <div style="display:none">
+        <ol id="sidebar-find-content-template"><li><img class="sidebar-find-content-icon" src="data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='10' cy='10' r='6' stroke-width='2.0' fill='none' style='stroke:black;'/></svg>">  </li><li><img class="sidebar-find-content-icon" src="data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' style='stroke:black;'><line x1='4' y1='10' x2='12' y2='10' stroke-width='2' /><polyline points='11,6 15,10 11,14' stroke-width='2' /></svg>">  </li><li><img class="sidebar-find-content-icon" src="data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='5' cy='5' r='1.4' /><circle cx='10' cy='5' r='1.4' /><circle cx='15' cy='5' r='1.4' /><circle cx='5' cy='10' r='1.4' /><circle cx='10' cy='10' r='1.4' /><circle cx='15' cy='10' r='1.4' /><circle cx='5' cy='15' r='1.4' /><circle cx='10' cy='15' r='1.4' /><circle cx='15' cy='15' r='1.4' /></svg>">  </li></ol>
+    </div>
 </div>
 <div id="toolbar" class="toolbar">
     <button id="sidebar-button" class="toolbar-button" title="Model Properties">

source/python.js

@@ -3614,6 +3614,7 @@ python.Execution = class {
                 }
             }
         });
+        this.registerFunction('builtins.exec');
         this.registerFunction('builtins.issubclass', (obj, type) => {
             const name = `${type.__module__}.${type.__name__}`;
             if (obj.__module__ && obj.__name__) {

source/view.js

@@ -14,6 +14,7 @@ import * as zip from './zip.js';
 const view = {};
 const markdown = {};
 const metrics = {};
+let weightIcon = null;
 
 view.View = class {
 
@@ -216,6 +217,7 @@ view.View = class {
                     execute: async () => await this._host.execute('about')
                 });
             }
+            weightIcon = this._host.document.getElementsByClassName('sidebar-find-content-icon')[2];
             await this._host.start();
         } catch (error) {
             this.error(error, null, null);
@@ -279,7 +281,7 @@ view.View = class {
     }
 
     find() {
-        if (this._graph) {
+        if (this._graph && this._sidebar.peek() instanceof view.FindSidebar !== true) {
             this._graph.select(null);
             const sidebar = new view.FindSidebar(this, this.activeGraph, this.activeSignature);
             sidebar.on('state-changed', (sender, state) => {
@@ -667,25 +669,24 @@ view.View = class {
         }
         this.exception(error, false);
         const knowns = [
-            { name: '', message: /^Invalid value identifier/, url: 'https://github.com/lutzroeder/netron/issues/540' },
-            { name: '', message: /^Cannot read property/, url: 'https://github.com/lutzroeder/netron/issues/647' },
-            { name: 'Error', message: /^EPERM: operation not permitted/, url: 'https://github.com/lutzroeder/netron/issues/551' },
-            { name: 'Error', message: /^EACCES: permission denied/, url: 'https://github.com/lutzroeder/netron/issues/504' },
-            { name: 'RangeError', message: /^Offset is outside the bounds of the DataView/, url: 'https://github.com/lutzroeder/netron/issues/563' },
-            { name: 'RangeError', message: /^Invalid string length/, url: 'https://github.com/lutzroeder/netron/issues/648' },
-            { name: 'Python Error', message: /^Unknown function/, url: 'https://github.com/lutzroeder/netron/issues/546' },
-            { name: 'Error loading model.', message: /^Unsupported file content/, url: 'https://github.com/lutzroeder/netron/issues/550' },
-            { name: 'Error loading model.', message: /^Unsupported Protocol Buffers content/, url: 'https://github.com/lutzroeder/netron/issues/593' },
-            { name: 'Error loading model.', message: /^Unsupported Protocol Buffers text content/, url: 'https://github.com/lutzroeder/netron/issues/594' },
-            { name: 'Error loading model.', message: /^Unsupported JSON content/, url: 'https://github.com/lutzroeder/netron/issues/595' },
-            { name: 'Error loading PyTorch model.', message: /^File does not contain root module or state dictionary/, url: 'https://github.com/lutzroeder/netron/issues/543' },
-            { name: 'Error loading PyTorch model.', message: /^Module does not contain modules/, url: 'https://github.com/lutzroeder/netron/issues/544' },
+            { message: /^Invalid value identifier/, url: 'https://github.com/lutzroeder/netron/issues/540' },
+            { message: /^Cannot read property/, url: 'https://github.com/lutzroeder/netron/issues/647' },
+            { message: /^Duplicate value /, url: 'https://github.com/lutzroeder/netron/issues/1364' },
+            { message: /^EPERM: operation not permitted/, url: 'https://github.com/lutzroeder/netron/issues/551' },
+            { message: /^EACCES: permission denied/, url: 'https://github.com/lutzroeder/netron/issues/504' },
+            { message: /^Offset is outside the bounds of the DataView/, url: 'https://github.com/lutzroeder/netron/issues/563' },
+            { message: /^Invalid string length/, url: 'https://github.com/lutzroeder/netron/issues/648' },
+            { message: /^Unknown function /, url: 'https://github.com/lutzroeder/netron/issues/546' },
+            { message: /^Unsupported file content/, url: 'https://github.com/lutzroeder/netron/issues/550' },
+            { message: /^Unsupported Protocol Buffers content/, url: 'https://github.com/lutzroeder/netron/issues/593' },
+            { message: /^Unsupported Protocol Buffers text content/, url: 'https://github.com/lutzroeder/netron/issues/594' },
+            { message: /^Unsupported JSON content/, url: 'https://github.com/lutzroeder/netron/issues/595' },
             { name: 'Error loading PyTorch model.', message: /^Unknown type name/, url: 'https://github.com/lutzroeder/netron/issues/969' },
             { name: 'Error loading ONNX model.', message: /^File format is not onnx\.ModelProto \(Unexpected end of file\)\./, url: 'https://github.com/lutzroeder/netron/issues/1155' },
             { name: 'Error loading ONNX model.', message: /^File format is not onnx\.ModelProto \(Cannot read properties of undefined \(reading 'ModelProto'\)\)\./, url: 'https://github.com/lutzroeder/netron/issues/1156' },
             { name: 'Error loading ONNX model.', message: /^File format is not onnx\.ModelProto/, url: 'https://github.com/lutzroeder/netron/issues/549' }
         ];
-        const known = knowns.find((known) => (known.name.length === 0 || known.name === error.name) && error.message.match(known.message));
+        const known = knowns.find((known) => (!known.name || known.name === error.name) && error.message.match(known.message));
         const url = known && known.url ? known.url : null;
         const message = error.message;
         name = name || error.name;
@@ -2477,6 +2478,10 @@ view.Sidebar = class {
         this._update(this._stack.concat(entry));
     }
 
+    peek() {
+        return this._stack.length > 0 ? this._stack[this._stack.length - 1].content : null;
+    }
+
     _render(content) {
         try {
             content.render();
@@ -3051,7 +3056,9 @@ view.ValueView = class extends view.Expander {
                 const element = this.createElement('div', 'sidebar-item-value-button');
                 element.classList.add('sidebar-item-value-button-tool');
                 element.setAttribute('title', 'Show Tensor');
-                element.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-weight"></use></svg>`;
+                if (weightIcon) {
+                    element.appendChild(weightIcon.cloneNode(true));
+                }
                 element.addEventListener('pointerenter', () => this.emit('focus', this._value));
                 element.addEventListener('pointerleave', () => this.emit('blur', this._value));
                 element.style.cursor = 'pointer';
@@ -3202,7 +3209,9 @@ view.TensorView = class extends view.Expander {
             this.enable();
             this._button = this.createElement('div', 'sidebar-item-value-button');
             this._button.setAttribute('style', 'float: left;');
-            this._button.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-weight"></use></svg>`;
+            if (weightIcon) {
+                this._button.appendChild(weightIcon.cloneNode(true));
+            }
             this._button.addEventListener('click', () => this.toggle());
             this.control(this._button);
             const line = this.createElement('div', 'sidebar-item-value-line');
@@ -3735,6 +3744,12 @@ view.FindSidebar = class extends view.Control {
             connection: { hide: 'Hide Connections', show: 'Show Connections' },
             weight: { hide: 'Hide Weights', show: 'Show Weights' }
         };
+        const tpl = this._host.document.getElementById('sidebar-find-content-template');
+        this._lis = {
+            node: tpl.childNodes[0],
+            connection: tpl.childNodes[1],
+            weight: tpl.childNodes[2],
+        };
     }
 
     on(event, callback) {
@@ -3890,11 +3905,9 @@ view.FindSidebar = class extends view.Control {
     }
 
     _add(value, content, icon) {
-        const element = this.createElement('li');
-        element.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-${icon}"></use></svg>`;
-        const text = this.createElement('span');
-        text.innerText = content;
-        element.appendChild(text);
+        const element = this._lis[icon].cloneNode(true);
+        element.firstChild.id = '';
+        element.lastChild.nodeValue = content;
         this._table.set(element, value);
         this._content.appendChild(element);
     }
@@ -3967,7 +3980,6 @@ view.FindSidebar = class extends view.Control {
         });
         for (const [name, toggle] of Object.entries(this._toggles)) {
             toggle.element = this.createElement('label', 'sidebar-find-toggle');
-            toggle.element.innerHTML = `<svg class='sidebar-find-toggle-icon'><use href="#sidebar-icon-${name}"></use></svg>`;
             toggle.element.setAttribute('title', this._state[name] ? toggle.hide : toggle.show);
             toggle.checkbox = this.createElement('input');
             toggle.checkbox.setAttribute('type', 'checkbox');
@@ -3980,7 +3992,11 @@ view.FindSidebar = class extends view.Control {
                 this.emit('state-changed', this._state);
                 this._update();
             });
-            toggle.element.insertBefore(toggle.checkbox, toggle.element.firstChild);
+            toggle.element.appendChild(toggle.checkbox);
+            const icon = this._lis[name].firstChild.cloneNode(true);
+            icon.id = '';
+            toggle.element.appendChild(icon);
+            icon.style.margin = '0px';
             this._search.appendChild(toggle.element);
         }
         this._content.addEventListener('click', (e) => {
@@ -4006,6 +4022,7 @@ view.FindSidebar = class extends view.Control {
     }
 
     deactivate() {
+        this._search.remove();
         this._reset();
     }
 

test/models.json

@@ -5333,7 +5333,7 @@
     "target":   "iv3_pertensor.pt",
     "source":   "https://github.com/lutzroeder/netron/files/5212009/iv3_pertensor.zip[iv3_pertensor.pt]",
     "format":   "TorchScript v1.5",
-    "link":     "https://github.com/lutzroeder/netron/issues/546"
+    "link":     "https://github.com/lutzroeder/netron/issues/842"
   },
   {
     "type":     "pytorch",
@@ -5922,7 +5922,7 @@
     "target":   "resnet50_pertensor.pt",
     "source":   "https://github.com/lutzroeder/netron/files/5212006/resnet50_pertensor.zip[resnet50_pertensor.pt]",
     "format":   "TorchScript v1.5",
-    "link":     "https://github.com/lutzroeder/netron/issues/546"
+    "link":     "https://github.com/lutzroeder/netron/issues/842"
   },
   {
     "type":     "pytorch",
@@ -6173,7 +6173,7 @@
     "source":   "https://github.com/lutzroeder/netron/files/5238524/test.8bit.pth.zip[test.8bit.pth]",
     "format":   "TorchScript v1.6",
     "assert":   "model.graphs[0].nodes[8].type.name == 'conv1d_prepack'",
-    "link":     "https://github.com/lutzroeder/netron/issues/546"
+    "link":     "https://github.com/lutzroeder/netron/issues/842"
   },
   {
     "type":     "pytorch",
@@ -6203,7 +6203,7 @@
     "target":   "traced_fft.pt",
     "source":   "https://github.com/lutzroeder/netron/files/5172197/traced_fft.zip[traced_fft.pt]",
     "format":   "TorchScript v1.3",
-    "link":     "https://github.com/lutzroeder/netron/issues/546"
+    "link":     "https://github.com/lutzroeder/netron/issues/842"
   },
   {
     "type":     "pytorch",