diff --git a/.ahub/sam/exclude.txt b/.ahub/sam/exclude.txt
index 048afb7e..07f85c91 100644
--- a/.ahub/sam/exclude.txt
+++ b/.ahub/sam/exclude.txt
@@ -1,3 +1,4 @@
 # External code
 /ONE-vscode/media/CircleGraph/external
 /ONE-vscode/media/CircleEditor/external
+/ONE-vscode/media/external/
diff --git a/media/CircleEditor/external/ORIGIN b/media/CircleEditor/external/ORIGIN
deleted file mode 100644
index 1cd9403b..00000000
--- a/media/CircleEditor/external/ORIGIN
+++ /dev/null
@@ -1,3 +0,0 @@
-repo: https://github.com/lutzroeder/netron.git
-commit: ae449ff55642636e6a1eef092eda34ffcba1c684
-tag: v5.7.4
diff --git a/media/CircleEditor/index.html b/media/CircleEditor/index.html
index 1dbe9ebc..a0912c1d 100644
--- a/media/CircleEditor/index.html
+++ b/media/CircleEditor/index.html
@@ -66,13 +66,14 @@
 <script type="text/javascript" src="%type.js%" nonce="%nonce%"></script>
 <script type="text/javascript" src="%view-grapher.js%" nonce="%nonce%"></script>
 <script type="text/javascript" src="%view-sidebar.js%" nonce="%nonce%"></script>
+<script type="text/javascript" src="%modified.view-sidebar.js%" nonce="%nonce%"></script>
 <script type="text/javascript" src="%view.js%" nonce="%nonce%"></script>
+<script type="text/javascript" src="%modified.view.js%" nonce="%nonce%"></script>
 <script type="text/javascript" src="%index.js%" nonce="%nonce%"></script>
+<script type="text/javascript" src="%modified.index.js%" nonce="%nonce%"></script>
 <script type="text/javascript" src="%circle-schema.js%" nonce="%nonce%"></script>
 <script type="text/javascript" src="%circle.js%" nonce="%nonce%"></script>
 <script type="text/javascript" nonce="%nonce%">
-// TODO find better way to set initial view mode
-var __viewMode = '%viewMode%';
 </script>
 <style>
 html { touch-action: none; overflow: hidden; width: 100%; height: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; }
diff --git a/media/CircleEditor/index.js b/media/CircleEditor/index.js
index e77aa578..77e8d065 100644
--- a/media/CircleEditor/index.js
+++ b/media/CircleEditor/index.js
@@ -40,18 +40,9 @@
 // This file referenced
 // https://github.com/lutzroeder/netron/blob/ae449ff55642636e6a1eef092eda34ffcba1c684/source/index.js
 
-/* eslint "no-global-assign": ["error", {"exceptions": [ "TextDecoder", "TextEncoder",
- * "URLSearchParams" ] } ] */
-/* global view */
-
-var host = {};
-
 const vscode = acquireVsCodeApi();
 
-const viewMode = {
-    viewer: 0,
-    selector: 1,
-};
+var originalHost = JSON.parse(JSON.stringify(host));
 
 host.BrowserHost = class {
     constructor() {
@@ -79,15 +70,6 @@ host.BrowserHost = class {
         this._modelData = [];
         this._modelPath = '';
 
-        // backends
-        this._backends = [];
-
-        // default mode of viewer
-        this._mode = viewMode.viewer;
-        if (__viewMode === 'selector') {
-            this._mode = viewMode.selector;
-        }
-
         this._viewingSubgraph = 0;
         this._viewingNode = null;
     }
@@ -134,21 +116,6 @@ host.BrowserHost = class {
                 case 'loadmodel':
                     this._msgLoadModel(message);
                     break;
-                case 'selection':
-                    this._msgSelection(message);
-                    break;
-                case 'colorTheme':
-                    this._msgColorTheme(message);
-                    break;
-                case 'partition':
-                    this._msgPartition(message);
-                    break;
-                case 'backendColor':
-                    this._msgBackendColor(message);
-                    break;
-                case 'reload':
-                    this._msgReload(message);
-                    break;
                 case 'setCustomOpAttrT':
                     this._msgSetCustomOpAttrT(message);
                     break;
@@ -160,17 +127,15 @@ host.BrowserHost = class {
             'zoom', params.has('zoom') ? params.get('zoom') : this._environment.get('zoom'));
 
         this._menu = new host.Dropdown(this, 'menu-button', 'menu-dropdown');
-        if (this._mode === viewMode.viewer) {
-            this._menu.add({
-                label: 'Properties...',
-                accelerator: 'CmdOrCtrl+Enter',
-                click: () => this._view.showModelProperties()
-            });
-            this._menu.add({});
-            this._menu.add(
-                {label: 'Find...', accelerator: 'CmdOrCtrl+F', click: () => this._view.find()});
-            this._menu.add({});
-        }
+        this._menu.add({
+            label: 'Properties...',
+            accelerator: 'CmdOrCtrl+Enter',
+            click: () => this._view.showModelProperties()
+        });
+        this._menu.add({});
+        this._menu.add(
+            {label: 'Find...', accelerator: 'CmdOrCtrl+F', click: () => this._view.find()});
+        this._menu.add({});
         this._menu.add({
             label: () => this._view.options.attributes ? 'Hide Attributes' : 'Show Attributes',
             accelerator: 'CmdOrCtrl+D',
@@ -325,17 +290,6 @@ host.BrowserHost = class {
         }
     }
 
-    /**
-     * @brief called from view.js for handle view events
-     */
-    onView(event) {
-        if (event === 'selection') {
-            // there was a selection change and view requested to apply this
-            let v = this._view.getSelection();
-            vscode.postMessage({command: 'selection', names: v.names, tensors: v.tensors});
-        }
-    }
-
     _request(url, headers, encoding, timeout) {
         return new Promise((resolve, reject) => {
             if (url.startsWith('vscode-webview://')) {
@@ -453,9 +407,6 @@ host.BrowserHost = class {
                 return this._view.open(context).then((model) => {
                     this._view.show(null);
                     this.document.title = files[0].name;
-
-                    // notify owner that load has finished
-                    vscode.postMessage({command: 'finishload'});
                     return model;
                 });
             })
@@ -494,55 +445,6 @@ host.BrowserHost = class {
         }
     }
 
-    _msgSelection(message) {
-        this._view.setSelection(message);
-    }
-
-    _msgColorTheme(_message) {
-        this._view.updateThemeColor();
-        this._view.applyThemeColor();
-    }
-
-    _msgPartition(message) {
-        this._view.setPartition(message);
-    }
-
-    _msgBackendColor(message) {
-        const backends = message.backends;
-
-        // build name of backends
-        backends.forEach((item) => {
-            if (!item.theme || item.theme === '') {
-                this._backends.push(item.name);
-            }
-        });
-
-        // build style for graph nodes
-        let styleBackend = '';
-        backends.forEach((item) => {
-            const name = item.name.toLowerCase();
-            const styleNode = `.node-item-backend-${name} path { fill: ${item.color}; }\n`;
-
-            if (item.theme && item.theme !== '') {
-                const styleBody = `.${item.theme} `;
-                styleBackend = styleBackend + styleBody + styleNode;
-            } else {
-                styleBackend = styleBackend + styleNode;
-            }
-        });
-        let style = this._document.createElement('style');
-        style.innerHTML = styleBackend;
-        this._document.head.appendChild(style);
-    }
-
-    _msgReload(_message) {
-        this._modelData = [];
-
-        this._view.reset();
-        this._view.show('welcome spinner');
-        vscode.postMessage({command: 'loadmodel', offset: '0'});
-    }
-
     _msgSetCustomOpAttrT(message) {
         const data = message.data;
         const graphs = this._view._model._graphs;
@@ -558,158 +460,7 @@ host.BrowserHost = class {
     }
 };
 
-host.Dropdown = class {
-    constructor(host, button, dropdown) {
-        this._host = host;
-        this._dropdown = this._host.document.getElementById(dropdown);
-        this._button = this._host.document.getElementById(button);
-        this._items = [];
-        this._apple = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
-        this._acceleratorMap = {};
-        this._host.window.addEventListener('keydown', (e) => {
-            let code = e.keyCode;
-            code |= ((e.ctrlKey && !this._apple) || (e.metaKey && this._apple)) ? 0x0400 : 0;
-            code |= e.altKey ? 0x0200 : 0;
-            code |= e.shiftKey ? 0x0100 : 0;
-            if (code === 0x001b) {  // Escape
-                this.close();
-                return;
-            }
-            const item = this._acceleratorMap[code.toString()];
-            if (item) {
-                item.click();
-                e.preventDefault();
-            }
-        });
-        this._host.document.body.addEventListener('click', (e) => {
-            if (!this._button.contains(e.target)) {
-                this.close();
-            }
-        });
-    }
-
-    add(item) {
-        const accelerator = item.accelerator;
-        if (accelerator) {
-            let cmdOrCtrl = false;
-            let alt = false;
-            let shift = false;
-            let key = '';
-            for (const part of item.accelerator.split('+')) {
-                switch (part) {
-                    case 'CmdOrCtrl':
-                        cmdOrCtrl = true;
-                        break;
-                    case 'Alt':
-                        alt = true;
-                        break;
-                    case 'Shift':
-                        shift = true;
-                        break;
-                    default:
-                        key = part;
-                        break;
-                }
-            }
-            if (key !== '') {
-                item.accelerator = {};
-                item.accelerator.text = '';
-                if (this._apple) {
-                    item.accelerator.text += alt ? '&#x2325;' : '';
-                    item.accelerator.text += shift ? '&#x21e7;' : '';
-                    item.accelerator.text += cmdOrCtrl ? '&#x2318;' : '';
-                    /* eslint-disable */
-                    const keyTable = {
-                        'Enter': '&#x23ce;',
-                        'Up': '&#x2191;',
-                        'Down': '&#x2193;',
-                        'Backspace': '&#x232B;'
-                    };
-                    /* eslint-enable */
-                    item.accelerator.text += keyTable[key] ? keyTable[key] : key;
-                } else {
-                    const list = [];
-                    if (cmdOrCtrl) {
-                        list.push('Ctrl');
-                    }
-                    if (alt) {
-                        list.push('Alt');
-                    }
-                    if (shift) {
-                        list.push('Shift');
-                    }
-                    list.push(key);
-                    item.accelerator.text = list.join('+');
-                }
-                let code = 0;
-                switch (key) {
-                    case 'Backspace':
-                        code = 0x08;
-                        break;
-                    case 'Enter':
-                        code = 0x0D;
-                        break;
-                    case 'Up':
-                        code = 0x26;
-                        break;
-                    case 'Down':
-                        code = 0x28;
-                        break;
-                    default:
-                        code = key.charCodeAt(0);
-                        break;
-                }
-                code |= cmdOrCtrl ? 0x0400 : 0;
-                code |= alt ? 0x0200 : 0;
-                code |= shift ? 0x0100 : 0;
-                this._acceleratorMap[code.toString()] = item;
-            }
-        }
-        this._items.push(item);
-    }
-
-    toggle() {
-        if (this._dropdown.style.display === 'block') {
-            this.close();
-            return;
-        }
-
-        while (this._dropdown.lastChild) {
-            this._dropdown.removeChild(this._dropdown.lastChild);
-        }
-
-        for (const item of this._items) {
-            if (Object.keys(item).length > 0) {
-                const button = this._host.document.createElement('button');
-                button.innerText = (typeof item.label === 'function') ? item.label() : item.label;
-                button.addEventListener('click', () => {
-                    this.close();
-                    setTimeout(() => {
-                        item.click();
-                    }, 10);
-                });
-                this._dropdown.appendChild(button);
-                if (item.accelerator) {
-                    const accelerator = this._host.document.createElement('span');
-                    accelerator.style.float = 'right';
-                    accelerator.innerHTML = item.accelerator.text;
-                    button.appendChild(accelerator);
-                }
-            } else {
-                const separator = this._host.document.createElement('div');
-                separator.setAttribute('class', 'separator');
-                this._dropdown.appendChild(separator);
-            }
-        }
-
-        this._dropdown.style.display = 'block';
-    }
-
-    close() {
-        this._dropdown.style.display = 'none';
-    }
-};
-
+// NOTE : Not changed but needed because it is removed by modified BrowserHost
 host.BrowserHost.BinaryStream = class {
     constructor(buffer) {
         this._buffer = buffer;
@@ -766,6 +517,7 @@ host.BrowserHost.BinaryStream = class {
     }
 };
 
+// NOTE : Not changed but needed because it is removed by modified BrowserHost
 host.BrowserHost.BrowserFileContext = class {
     constructor(host, file, blobs) {
         this._host = host;
@@ -844,6 +596,7 @@ host.BrowserHost.BrowserFileContext = class {
     }
 };
 
+// NOTE : Not changed but needed because it is removed by modified BrowserHost
 host.BrowserHost.BrowserContext = class {
     constructor(host, url, identifier, stream) {
         this._host = host;
@@ -882,239 +635,7 @@ host.BrowserHost.BrowserContext = class {
     }
 };
 
-if (typeof TextDecoder === 'undefined') {
-    // eslint-disable-next-line
-    TextDecoder = function TextDecoder(encoding) {
-        this._encoding = encoding;
-    };
-    TextDecoder.prototype.decode = function decode(buffer) {
-        let result = '';
-        const length = buffer.length;
-        let i = 0;
-        switch (this._encoding) {
-            case 'utf-8':
-                while (i < length) {
-                    const c = buffer[i++];
-                    switch (c >> 4) {
-                        case 0:
-                        case 1:
-                        case 2:
-                        case 3:
-                        case 4:
-                        case 5:
-                        case 6:
-                        case 7: {
-                            result += String.fromCharCode(c);
-                            break;
-                        }
-                        case 12:
-                        case 13: {
-                            const c2 = buffer[i++];
-                            result += String.fromCharCode(((c & 0x1F) << 6) | (c2 & 0x3F));
-                            break;
-                        }
-                        case 14: {
-                            const c2 = buffer[i++];
-                            const c3 = buffer[i++];
-                            result += String.fromCharCode(
-                                ((c & 0x0F) << 12) | ((c2 & 0x3F) << 6) | ((c3 & 0x3F) << 0));
-                            break;
-                        }
-                        case 15: {
-                            const c2 = buffer[i++];
-                            const c3 = buffer[i++];
-                            const c4 = buffer[i++];
-                            result += String.fromCodePoint(
-                                ((c & 0x07) << 18) | ((c2 & 0x3F) << 12) | ((c3 & 0x3F) << 6) |
-                                (c4 & 0x3F));
-                            break;
-                        }
-                        default: {
-                            break;
-                        }
-                    }
-                }
-                break;
-            case 'ascii':
-                while (i < length) {
-                    result += String.fromCharCode(buffer[i++]);
-                }
-                break;
-            default:
-                break;
-        }
-        return result;
-    };
-}
-
-if (typeof TextEncoder === 'undefined') {
-    // eslint-disable-next-line
-    TextEncoder = function TextEncoder() {};
-    TextEncoder.prototype.encode = function encode(str) {
-        'use strict';
-        const length = str.length;
-        let resPos = -1;
-        const resArr =
-            typeof Uint8Array === 'undefined' ? new Array(length * 2) : new Uint8Array(length * 3);
-        for (let point = 0, nextcode = 0, i = 0; i !== length;) {
-            point = str.charCodeAt(i);
-            i += 1;
-            if (point >= 0xD800 && point <= 0xDBFF) {
-                if (i === length) {
-                    resArr[resPos += 1] = 0xef;
-                    resArr[resPos += 1] = 0xbf;
-                    resArr[resPos += 1] = 0xbd;
-                    break;
-                }
-                nextcode = str.charCodeAt(i);
-                if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) {
-                    point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000;
-                    i += 1;
-                    if (point > 0xffff) {
-                        resArr[resPos += 1] = (0x1e << 3) | (point >>> 18);
-                        resArr[resPos += 1] = (0x2 << 6) | ((point >>> 12) & 0x3f);
-                        resArr[resPos += 1] = (0x2 << 6) | ((point >>> 6) & 0x3f);
-                        resArr[resPos += 1] = (0x2 << 6) | (point & 0x3f);
-                        continue;
-                    }
-                } else {
-                    resArr[resPos += 1] = 0xef;
-                    resArr[resPos += 1] = 0xbf;
-                    resArr[resPos += 1] = 0xbd;
-                    continue;
-                }
-            }
-            if (point <= 0x007f) {
-                resArr[resPos += 1] = (0x0 << 7) | point;
-            } else if (point <= 0x07ff) {
-                resArr[resPos += 1] = (0x6 << 5) | (point >>> 6);
-                resArr[resPos += 1] = (0x2 << 6) | (point & 0x3f);
-            } else {
-                resArr[resPos += 1] = (0xe << 4) | (point >>> 12);
-                resArr[resPos += 1] = (0x2 << 6) | ((point >>> 6) & 0x3f);
-                resArr[resPos += 1] = (0x2 << 6) | (point & 0x3f);
-            }
-        }
-        if (typeof Uint8Array !== 'undefined') {
-            return new Uint8Array(resArr.buffer.slice(0, resPos + 1));
-        } else {
-            return resArr.length === resPos + 1 ? resArr : resArr.slice(0, resPos + 1);
-        }
-    };
-    TextEncoder.prototype.toString = function() {
-        return '[object TextEncoder]';
-    };
-    try {
-        Object.defineProperty(TextEncoder.prototype, 'encoding', {
-            get: function() {
-                if (Object.prototype.isPrototypeOf.call(TextEncoder.prototype, this)) {
-                    return 'utf-8';
-                } else {
-                    throw new TypeError('Illegal invocation');
-                }
-            }
-        });
-    } catch (e) {
-        TextEncoder.prototype.encoding = 'utf-8';
-    }
-    if (typeof Symbol !== 'undefined') {
-        TextEncoder.prototype[Symbol.toStringTag] = 'TextEncoder';
-    }
-}
-
-if (typeof URLSearchParams === 'undefined') {
-    // eslint-disable-next-line
-    URLSearchParams = function URLSearchParams(search) {
-        const decode = (str) => {
-            return str.replace(/[ +]/g, '%20').replace(/(%[a-f0-9]{2})+/ig, (match) => {
-                return decodeURIComponent(match);
-            });
-        };
-        this._dict = {};
-        if (typeof search === 'string') {
-            search = search.indexOf('?') === 0 ? search.substring(1) : search;
-            const properties = search.split('&');
-            for (const property of properties) {
-                const index = property.indexOf('=');
-                const name = (index > -1) ? decode(property.substring(0, index)) : decode(property);
-                const value = (index > -1) ? decode(property.substring(index + 1)) : '';
-                if (!Object.prototype.hasOwnProperty.call(this._dict, name)) {
-                    this._dict[name] = [];
-                }
-                this._dict[name].push(value);
-            }
-        }
-    };
-    URLSearchParams.prototype.get = function(name) {
-        return Object.prototype.hasOwnProperty.call(this._dict, name) ? this._dict[name][0] : null;
-    };
-}
-
-if (!HTMLCanvasElement.prototype.toBlob) {
-    HTMLCanvasElement.prototype.toBlob = function(callback, type, quality) {
-        const canvas = this;
-        setTimeout(function() {
-            const data = atob(canvas.toDataURL(type, quality).split(',')[1]);
-            const length = data.length;
-            const buffer = new Uint8Array(length);
-            for (let i = 0; i < length; i++) {
-                buffer[i] = data.charCodeAt(i);
-            }
-            callback(new Blob([buffer], {type: type || 'image/png'}));
-        });
-    };
-}
-
-if (!('scrollBehavior' in window.document.documentElement.style)) {
-    // eslint-disable-next-line
-    const __scrollTo__ = Element.prototype.scrollTo;
-    Element.prototype.scrollTo = function(options) {
-        if (options === undefined) {
-            return;
-        }
-        if (options === null || typeof options !== 'object' || options.behavior === undefined ||
-            arguments[0].behavior === 'auto' || options.behavior === 'instant') {
-            if (__scrollTo__) {
-                __scrollTo__.apply(this, arguments);
-            }
-            return;
-        }
-        const now = () => {
-            return window.performance && window.performance.now ? window.performance.now() :
-                                                                  Date.now();
-        };
-        const ease = (k) => {
-            return 0.5 * (1 - Math.cos(Math.PI * k));
-        };
-        const step = (context) => {
-            const value = ease(Math.min((now() - context.startTime) / 468, 1));
-            const x = context.startX + (context.x - context.startX) * value;
-            const y = context.startY + (context.y - context.startY) * value;
-            context.element.scrollLeft = x;
-            context.element.scrollTop = y;
-            if (x !== context.x || y !== context.y) {
-                window.requestAnimationFrame(step.bind(window, context));
-            }
-        };
-        const context = {
-            element: this,
-            x: typeof options.left === 'undefined' ? this.scrollLeft : ~~options.left,
-            y: typeof options.top === 'undefined' ? this.scrollTop : ~~options.top,
-            startX: this.scrollLeft,
-            startY: this.scrollTop,
-            startTime: now()
-        };
-        step(context);
-    };
-}
-
-window.addEventListener('load', () => {
-    window.__view__ = new view.View(new host.BrowserHost());
-    vscode.postMessage({command: 'pageloaded'});
-});
-
 // disable context menu
-// TODO set backend with context menu?
 window.addEventListener('contextmenu', (e) => {
     e.stopImmediatePropagation();
 }, true);
diff --git a/media/CircleEditor/view-sidebar.js b/media/CircleEditor/view-sidebar.js
index 6afdfd98..efbde783 100644
--- a/media/CircleEditor/view-sidebar.js
+++ b/media/CircleEditor/view-sidebar.js
@@ -13,35 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/*
- * MIT License
- *
- * Copyright (c) Lutz Roeder
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-// This file referenced
-// https://github.com/lutzroeder/netron/blob/ae449ff55642636e6a1eef092eda34ffcba1c684/source/view-sidebar.js
-
-var sidebar = sidebar || {};
-var base = base || require('./external/base');
 
 sidebar.Sidebar = class {
     constructor(host, id) {
@@ -279,6 +250,7 @@ sidebar.NodeSidebar = class {
     }
 };
 
+// NOTE : New class for Circle Editor
 sidebar.EditAttributesView = class {
     constructor(host, node, isCustom) {
         this._host = host;
@@ -302,10 +274,8 @@ sidebar.EditAttributesView = class {
             return (au < bu) ? -1 : (au > bu) ? 1 : 0;
         });
         this._addHeader('Attributes');
-        let index = 0;
-        for (const attribute of sortedAttributes) {
-            this._addAttribute(attribute.name, attribute, index);
-            index++;
+        for (let idx = 0; idx < sortedAttributes.length; idx++) {
+            this._addAttribute(sortedAttributes[idx].name, sortedAttributes[idx], idx);
         }
         if (isCustom === true) {
             const addAttribute = this._host.document.createElement('div');
@@ -349,10 +319,18 @@ sidebar.EditAttributesView = class {
             this._editObject._attribute[key.name] = key.value;
             this._editObject._attribute[key.name + '_type'] = key.type;
         }
-        keys.push('attribute');
-        this._editObject._attribute['attribute'] = 'value';
-        this._editObject._attribute['attribute_type'] = 'string';
-        this._editObject._attribute.keys = keys;
+
+        for (let i = 1; true; i++) {
+            if (!keys.includes('NewAttribute' + i.toString())) {
+                const key = 'NewAttribute' + i.toString();
+                keys.push(key);
+
+                this._editObject._attribute[key] = 'Write a new value for this attribute';
+                this._editObject._attribute[key + '_type'] = 'string';
+                this._editObject._attribute.keys = keys;
+                break;
+            }
+        }
 
         vscode.postMessage({
             command: 'edit',
@@ -366,6 +344,7 @@ sidebar.EditAttributesView = class {
     }
 };
 
+// NOTE : New class for Circle Editor
 sidebar.EditInputsView = class {
     constructor(host, inputs, isCustom, node) {
         this._host = host;
@@ -418,6 +397,7 @@ sidebar.EditInputsView = class {
     }
 };
 
+// NOTE : New class for Circle Editor
 sidebar.EditOutputsView = class {
     constructor(host, outputs, isCustom, node) {
         this._host = host;
@@ -506,48 +486,6 @@ sidebar.NameValueView = class {
     }
 };
 
-sidebar.SelectView = class {
-    constructor(host, values, selected) {
-        this._host = host;
-        this._elements = [];
-        this._values = values;
-
-        const selectElement = this._host.document.createElement('select');
-        selectElement.setAttribute('class', 'sidebar-view-item-select');
-        selectElement.addEventListener('change', (e) => {
-            this._raise('change', this._values[e.target.selectedIndex]);
-        });
-        this._elements.push(selectElement);
-
-        for (const value of values) {
-            const optionElement = this._host.document.createElement('option');
-            optionElement.innerText = value.name || '';
-            if (value === selected) {
-                optionElement.setAttribute('selected', 'selected');
-            }
-            selectElement.appendChild(optionElement);
-        }
-    }
-
-    render() {
-        return this._elements;
-    }
-
-    on(event, callback) {
-        this._events = this._events || {};
-        this._events[event] = this._events[event] || [];
-        this._events[event].push(callback);
-    }
-
-    _raise(event, data) {
-        if (this._events && this._events[event]) {
-            for (const callback of this._events[event]) {
-                callback(this, data);
-            }
-        }
-    }
-};
-
 sidebar.ValueTextView = class {
     constructor(host, value, action, node, isCustom) {
         this._host = host;
@@ -665,109 +603,116 @@ sidebar.ValueTextView = class {
     toggle() {}
 };
 
-class NodeAttributeView {
+NodeAttributeView = class {
     constructor(host, attribute, isCustom, index, node) {
         this._host = host;
         this._attribute = attribute;
-        this._element = this._host.document.createElement('div');
-        this._element.className = 'sidebar-view-item-value';
         this._isCustom = isCustom;
-        this._attributeName = '';
         this._index = index;
         this._node = node;
-        this._line;
-        this._select;
+
+        this._element = this._host.document.createElement('div');
+        this._element.className = 'sidebar-view-item-value';
+
+        this._save = this._host.document.createElement('div');
+        this._save.className = 'sidebar-view-item-value-save codicon codicon-save';
+        this._save.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.save();
+        });
+
+        this._cancel = this._host.document.createElement('div');
+        this._cancel.className = 'sidebar-view-item-value-cancel codicon codicon-discard';
+        this._cancel.addEventListener('click', () => {
+            this.cancel();
+        });
+
+        this._remove = this._host.document.createElement('div');
+        this._remove.className = 'sidebar-view-item-value-remove codicon codicon-trash';
+        this._remove.addEventListener('click', () => {
+            this.remove();
+        });
+
+        this._expander = this._host.document.createElement('div');
+        this._expander.className =
+            'sidebar-view-item-value-expander codicon codicon-chevron-down';
+        this._expander.addEventListener('click', () => {
+            this.toggle();
+        });
+
+        this._edit = this._host.document.createElement('div');
+        this._edit.className = 'sidebar-view-item-value-expander codicon codicon-edit';
+        this._edit.addEventListener('click', () => {
+            this.edit();
+        });
+
+        this._typeLine = this._host.document.createElement('div');
+        this._typeLine.className = 'sidebar-view-item-value-line-border';
+
+        this._valueLine = this._host.document.createElement('div');
+        this._valueLine.className = 'sidebar-view-item-value-line';
+
+        this._valueEditLine = null;
+        if (optionValues[this._attribute.type]) {
+            this._valueEditLine = this._host.document.createElement('select');
+            for (const optionValue of optionValues[this._attribute.type]) {
+                const elemValue = this._host.document.createElement('option');
+                elemValue.setAttribute('value', optionValue);
+                elemValue.innerText = optionValue;
+                this._valueEditLine.appendChild(elemValue);
+            }
+            this._valueEditLine.className = 'sidebar-view-item-value-line-select';
+        } else {
+            this._valueEditLine = this._host.document.createElement('input');
+            this._valueEditLine.setAttribute('type', 'text');
+            this._valueEditLine.className = 'sidebar-view-item-value-line-input';
+        }
+
+        this._typeEditLine = this._host.document.createElement('div');
+        this._typeEditLine.className = 'sidebar-view-item-value-line-border';
+        this._typeEditLine.innerHTML = 'type: ';
+        const elemTypes = this._host.document.createElement('select');
+        elemTypes.className = 'sidebar-view-item-value-line-type-select';
+        for (const ctype of customType) {
+            const elemType = this._host.document.createElement('option');
+            elemType.setAttribute('value', ctype);
+            elemType.innerText = ctype.toLowerCase();
+            elemTypes.appendChild(elemType);
+        }
+        this._typeEditLine.appendChild(elemTypes);
 
         this._editObject = {
-            name: '',
+            name: isCustom ? 'custom' : node.type.name,
             _attribute: {},
             _nodeIdx: parseInt(this._node.location),
             _subgraphIdx: this._node._subgraphIdx
         };
 
-        if (isCustom) {
-            this._editObject.name = 'custom';
-        } else {
-            this._editObject.name = node.type.name;
-        }
-
         this.show();
     }
 
     show() {
-        const type = this._attribute.type;
-        const value = this._attribute._value;
-        if (type) {
-            this._expander = this._host.document.createElement('div');
-            this._edit = this._host.document.createElement('div');
-            this._expander.className =
-                'sidebar-view-item-value-expander codicon codicon-chevron-down';
-            this._edit.className = 'sidebar-view-item-value-expander codicon codicon-edit';
-            this._expander.addEventListener('click', () => {
-                this.toggle();
-            });
-            this._edit.addEventListener('click', () => {
-                this.edit();
-            });
-            this._element.appendChild(this._expander);
-            this._element.appendChild(this._edit);
-        } else {
-            this._edit = this._host.document.createElement('div');
-            this._edit.className = 'sidebar-view-item-value-edit codicon codicon-edit';
-            this._edit.addEventListener('click', () => {
-                this.edit();
-            });
-            this._element.appendChild(this._edit);
-        }
+        this._loadAttrToElem();
 
-        let content = new sidebar.Formatter(value, type).toString();
-        if (content) {
-            content = content.length > 1000 ? content.substring(0, 1000) + '\u2026' : content;
-            content = content.split('<').join('&lt;').split('>').join('&gt;');
+        while (this._element.childElementCount > 0) {
+            this._element.removeChild(this._element.lastChild);
         }
-        const line = this._host.document.createElement('div');
-        line.className = 'sidebar-view-item-value-line';
-        line.innerHTML = content ? content : '&nbsp;';
-        this._element.appendChild(line);
+
+        this._expander.className =
+        'sidebar-view-item-value-expander codicon codicon-chevron-down';
+        this._element.appendChild(this._expander);
+        this._element.appendChild(this._edit);
+        this._element.appendChild(this._valueLine);
     }
 
     toggle() {
+        this._loadAttrToElem();
+
         if (this._expander.className ===
             'sidebar-view-item-value-expander codicon codicon-chevron-down') {
             this._expander.className =
                 'sidebar-view-item-value-expander codicon codicon-chevron-up';
-
-            const typeLine = this._host.document.createElement('div');
-            typeLine.className = 'sidebar-view-item-value-line-border';
-            const type = this._attribute.type;
-            const value = this._attribute.value;
-            if (type === 'tensor' && value && value.type) {
-                typeLine.innerHTML = 'type: ' +
-                    '<code><b>' + value.type.toString() + '</b></code>';
-                this._element.appendChild(typeLine);
-            } else {
-                typeLine.innerHTML = 'type: ' +
-                    '<code><b>' + this._attribute.type + '</b></code>';
-                this._element.appendChild(typeLine);
-            }
-
-            const description = this._attribute.description;
-            if (description) {
-                const descriptionLine = this._host.document.createElement('div');
-                descriptionLine.className = 'sidebar-view-item-value-line-border';
-                descriptionLine.innerHTML = description;
-                this._element.appendChild(descriptionLine);
-            }
-
-            if (this._attribute.type === 'tensor' && value) {
-                const state = value.state;
-                const valueLine = this._host.document.createElement('div');
-                valueLine.className = 'sidebar-view-item-value-line-border';
-                const contentLine = this._host.document.createElement('pre');
-                contentLine.innerHTML = state || value.toString();
-                valueLine.appendChild(contentLine);
-                this._element.appendChild(valueLine);
-            }
+            this._element.appendChild(this._typeLine);
         } else {
             this._expander.className =
                 'sidebar-view-item-value-expander codicon codicon-chevron-down';
@@ -778,150 +723,47 @@ class NodeAttributeView {
     }
 
     edit() {
-        while (this._element.childElementCount) {
+        while (this._element.childElementCount > 0) {
             this._element.removeChild(this._element.lastChild);
         }
-        const type = this._attribute.type;
-
-        if (this._isCustom === true) {
-            const input = this._host.document.getElementById('attribute' + this._index);
-            input.disabled = false;
-            this._attributeName = input.value;
-        }
 
-        this._save = this._host.document.createElement('div');
-        this._cancel = this._host.document.createElement('div');
-        this._remove = this._host.document.createElement('div');
-        this._save.className = 'sidebar-view-item-value-save codicon codicon-save';
-        this._cancel.className = 'sidebar-view-item-value-cancel codicon codicon-discard';
-        this._remove.className = 'sidebar-view-item-value-remove codicon codicon-trash';
-        this._save.addEventListener('click', (e) => {
-            e.preventDefault();
-            this.save();
-        });
-        this._cancel.addEventListener('click', () => {
-            this.cancel();
-        });
-        this._remove.addEventListener('click', () => {
-            this.remove();
-        });
-        if (this._isCustom === true) {
+        if (this._isCustom) {
+            const elemAttrName = this._host.document.getElementById('attribute' + this._index);
+            elemAttrName.disabled = false;
             this._element.appendChild(this._remove);
-        }
-        this._element.appendChild(this._cancel);
-        this._element.appendChild(this._save);
-
-        const value = this._attribute.value;
-
-        let content = new sidebar.Formatter(value, type).toString();
-        if (content) {
-            content = content.length > 1000 ? content.substring(0, 1000) + '\u2026' : content;
-            content = content.split('<').join('&lt;').split('>').join('&gt;');
-        }
-        let line;
-        if (optionValues[type]) {
-            line = this._host.document.createElement('select');
-            for (const options of optionValues[type]) {
-                const option = this._host.document.createElement('option');
-                option.setAttribute('value', options);
-                option.innerText = options;
-                if (options.toLowerCase() === content.toLowerCase()) {
-                    option.setAttribute('selected', 'selected');
-                }
-                line.appendChild(option);
-            }
-            line.setAttribute('name', type);
-            line.className = 'sidebar-view-item-value-line-select';
-        } else {
-            line = this._host.document.createElement('input');
-            line.setAttribute('type', 'text');
-            line.className = 'sidebar-view-item-value-line-input';
-            line.setAttribute('value', content ? content : '&nbsp;');
-        }
-        this._line = line;
-        this._element.appendChild(line);
-
-        if (type) {
-            const typeLine = this._host.document.createElement('div');
-            typeLine.className = 'sidebar-view-item-value-line-border';
-            if (!this._isCustom) {
-                if (type === 'tensor' && value && value.type) {
-                    typeLine.innerHTML = 'type: ' +
-                        '<code><b>' + value.type.toString() + '</b></code>';
-                    this._element.appendChild(typeLine);
+            this._element.appendChild(this._cancel);
+            this._element.appendChild(this._save);
+            this._element.appendChild(this._valueEditLine);
+            const types = this._typeEditLine.children[0];
+            for (let i = 0; i < types.length; i++) {
+                if (types[i].value.toLowerCase() === this._attribute.type) {
+                    types[i].setAttribute('selected', 'selected');
                 } else {
-                    typeLine.innerHTML = 'type: ' +
-                        '<code><b>' + type + '</b></code>';
-                    this._element.appendChild(typeLine);
+                    types[i].removeAttribute('selected');
                 }
-            } else {
-                typeLine.innerHTML = 'type: ';
-                this._select = this._host.document.createElement('select');
-                this._select.className = 'sidebar-view-item-value-line-type-select';
-                for (const type of customType) {
-                    const option = this._host.document.createElement('option');
-                    option.setAttribute('value', type);
-                    option.innerText = type.toLowerCase();
-                    if (type.toLowerCase() === type) {
-                        option.setAttribute('selected', 'selected');
-                    }
-                    this._select.appendChild(option);
-                }
-                typeLine.appendChild(this._select);
-                this._element.appendChild(typeLine);
-            }
-
-            const description = this._attribute.description;
-            if (description) {
-                const descriptionLine = this._host.document.createElement('div');
-                descriptionLine.className = 'sidebar-view-item-value-line-border';
-                descriptionLine.innerHTML = description;
-                this._element.appendChild(descriptionLine);
             }
-        }
-
-        if (type === 'tensor' && value) {
-            const state = value.state;
-            const valueLine = this._host.document.createElement('div');
-            valueLine.className = 'sidebar-view-item-value-line-border';
-            const contentLine = this._host.document.createElement('pre');
-            contentLine.innerHTML = state || value.toString();
-            valueLine.appendChild(contentLine);
-            this._element.appendChild(valueLine);
+            this._element.appendChild(this._typeEditLine);
+        } else {
+            this._element.appendChild(this._cancel);
+            this._element.appendChild(this._save);
+            this._element.appendChild(this._valueEditLine);
+            this._element.appendChild(this._typeLine);
         }
     }
 
     save() {
-        if (this._attribute._type === 'int32') {
-            if (this._line.value - 0 > 2147483648) {
-                vscode.postMessage({command: 'alert', text: 'Can\'t exceed 2,147,483,648'});
-                return;
-            }
+        const verifyResult = this._verifyAttr();
+        if (verifyResult !== '') {
+            vscode.postMessage({command: 'alert', text: verifyResult});
+            return;
         }
 
         if (this._isCustom === true) {
-            const input = this._host.document.getElementById('attribute' + this._index);
-            if (this._select.value === 'int') {
-                if (this._line.value - 0 > 2147483648) {
-                    vscode.postMessage({command: 'alert', text: 'Can\'t exceed 2,147,483,648'});
-                    return;
-                }
-            }
-            input.disabled = true;
-            this._attribute._name = input.value;
-            this._attribute._type = this._select.value;
-            this._attribute._value = this._line.value;
-        }
-
-        while (this._element.childElementCount) {
-            this._element.removeChild(this._element.lastChild);
-        }
-
-        if (!this._isCustom) {
-            this._editObject._attribute.name = this._attribute.name;
-            this._editObject._attribute._value = this._line.value;
-            this._editObject._attribute._type = this._attribute.type;
-        } else {
+            const elemAttrName = this._host.document.getElementById('attribute' + this._index);
+            elemAttrName.disabled = true;
+            this._attribute._name = elemAttrName.value;
+            this._attribute._type = this._typeEditLine.children[0].value;
+            this._attribute._value = this._valueEditLine.value;
             this._editObject._attribute.name = this._node.type.name;
             const keys = [];
             for (const key of this._node.attributes) {
@@ -930,8 +772,14 @@ class NodeAttributeView {
                 this._editObject._attribute[key.name + '_type'] = key.type;
             }
             this._editObject._attribute.keys = keys;
+        } else {
+            this._editObject._attribute.name = this._attribute.name;
+            this._editObject._attribute._value = this._valueEditLine.value;
+            this._editObject._attribute._type = this._attribute.type;
         }
 
+        this._loadAttrToElem();
+
         vscode.postMessage({
             command: 'edit',
             type: 'attribute',
@@ -940,23 +788,22 @@ class NodeAttributeView {
     }
 
     cancel() {
-        if (this._isCustom === true) {
-            const input = this._host.document.getElementById('attribute' + this._index);
-            input.disabled = true;
-            input.value = this._attributeName;
-        }
-        while (this._element.childElementCount) {
+        while (this._element.childElementCount > 0) {
             this._element.removeChild(this._element.lastChild);
         }
 
+        const elemAttrName = this._host.document.getElementById('attribute' + this._index);
+        elemAttrName.disabled = true;
+        elemAttrName.value = this._attribute.name;
+
         this.show();
     }
 
     remove() {
-        const input = this._host.document.getElementById('attribute' + this._index);
-        const box = input.parentElement.parentElement.parentElement;
-        const element = input.parentElement.parentElement;
-        box.removeChild(element);
+        const elemAttrName = this._host.document.getElementById('attribute' + this._index);
+        const elemAttribute = elemAttrName.parentElement.parentElement;
+        const elemAttributes = elemAttribute.parentElement;
+        elemAttributes.removeChild(elemAttribute);
         for (const i in this._node._attributes) {
             if (this._node._attributes[i].name === this._attribute.name) {
                 this._node._attributes.splice(i, 1);
@@ -997,6 +844,76 @@ class NodeAttributeView {
             }
         }
     }
+
+    _loadAttrToElem() {
+        this._typeLine.innerHTML = 'type: ' + '<code><b>' + this._attribute.type + '</b></code>';
+
+        const types = this._typeEditLine.children[0];
+        for (let i = 0; i < types.length; i++) {
+                types[i].removeAttribute('selected');
+        }
+        for (let i = 0; i < types.length; i++) {
+            if (types[i].value.toLowerCase() === this._attribute.type) {
+                types[i].setAttribute('selected', 'selected');
+            }
+        }
+
+        let content = new sidebar.Formatter(this._attribute.value, this._attribute.type).toString();
+        if (content) {
+            content = content.length > 1000 ? content.substring(0, 1000) + '\u2026' : content;
+            content = content.split('<').join('&lt;').split('>').join('&gt;');
+        }
+
+        this._valueLine.innerHTML = content ? content : '&nbsp;';
+        if (optionValues[this._attribute.type]) {
+            const values = this._valueEditLine.children;
+            for (let i = 0; i < values.length; i++) {
+                values[i].removeAttribute('selected');
+            }
+            for (let i = 0; i < values.length; i++) {
+                if (content.toLowerCase() === values[i].value.toLowerCase()) {
+                    values[i].setAttribute('selected', 'selected');
+                }
+            }
+            this._valueEditLine.setAttribute('name', this._attribute.type);
+        } else {
+            this._valueEditLine.setAttribute('value', content ? content : '&nbsp;');
+        }
+    }
+
+    _verifyAttr() {
+        const type = this._isCustom ? this._typeEditLine.children[0].value : this._attribute._type;
+        const value = this._valueEditLine.value;
+
+        switch (type) {
+            case 'int32':
+                if (isNaN(value - 0)) {
+                    return value + ' is not a number';
+                }
+                if (value > 2147483648) {
+                    return 'Can\'t exceed 2,147,483,648';
+                }
+                break;
+            case 'int':
+            case 'int64':
+                if (isNaN(value - 0)) {
+                    return value + ' is not a number';
+                }
+                if (value > 9223372036854775807n) {
+                    return 'Can\'t exceed 9,223,372,036,854,775,807';
+                }
+                break;
+            case 'boolean':
+                if(value !== 'true' && value !== 'false') {
+                    return value + ' is not true/false';
+                }
+                break;
+            default:
+                break;
+        }
+
+        return '';
+    }
 }
 
 sidebar.ParameterView = class {
@@ -1228,7 +1145,7 @@ sidebar.ArgumentView = class {
     }
 
     edit() {
-        while (this._element.childElementCount) {
+        while (this._element.childElementCount > 0) {
             this._element.removeChild(this._element.lastChild);
         }
 
@@ -1462,7 +1379,7 @@ sidebar.ArgumentView = class {
             input.disabled = true;
         }
 
-        while (this._element.childElementCount) {
+        while (this._element.childElementCount > 0) {
             this._element.removeChild(this._element.lastChild);
         }
         const initializer = this._argument.initializer;
@@ -1866,1539 +1783,3 @@ sidebar.ModelSidebar = class {
         }
     }
 };
-
-sidebar.DocumentationSidebar = class {
-    constructor(host, metadata) {
-        this._host = host;
-        this._metadata = metadata;
-    }
-
-    render() {
-        if (!this._elements) {
-            this._elements = [];
-
-            const type = sidebar.DocumentationSidebar.formatDocumentation(this._metadata);
-
-            const element = this._host.document.createElement('div');
-            element.setAttribute('class', 'sidebar-view-documentation');
-
-            this._append(element, 'h1', type.name);
-
-            if (type.summary) {
-                this._append(element, 'p', type.summary);
-            }
-
-            if (type.description) {
-                this._append(element, 'p', type.description);
-            }
-
-            if (Array.isArray(type.attributes) && type.attributes.length > 0) {
-                this._append(element, 'h2', 'Attributes');
-                const attributes = this._append(element, 'dl');
-                for (const attribute of type.attributes) {
-                    this._append(
-                        attributes, 'dt',
-                        attribute.name +
-                            (attribute.type ? ': <tt>' + attribute.type + '</tt>' : ''));
-                    this._append(attributes, 'dd', attribute.description);
-                }
-                element.appendChild(attributes);
-            }
-
-            if (Array.isArray(type.inputs) && type.inputs.length > 0) {
-                this._append(
-                    element, 'h2',
-                    'Inputs' + (type.inputs_range ? ' (' + type.inputs_range + ')' : ''));
-                const inputs = this._append(element, 'dl');
-                for (const input of type.inputs) {
-                    this._append(
-                        inputs, 'dt',
-                        input.name + (input.type ? ': <tt>' + input.type + '</tt>' : '') +
-                            (input.option ? ' (' + input.option + ')' : ''));
-                    this._append(inputs, 'dd', input.description);
-                }
-            }
-
-            if (Array.isArray(type.outputs) && type.outputs.length > 0) {
-                this._append(
-                    element, 'h2',
-                    'Outputs' + (type.outputs_range ? ' (' + type.outputs_range + ')' : ''));
-                const outputs = this._append(element, 'dl');
-                for (const output of type.outputs) {
-                    this._append(
-                        outputs, 'dt',
-                        output.name + (output.type ? ': <tt>' + output.type + '</tt>' : '') +
-                            (output.option ? ' (' + output.option + ')' : ''));
-                    this._append(outputs, 'dd', output.description);
-                }
-            }
-
-            if (Array.isArray(type.type_constraints) && type.type_constraints.length > 0) {
-                this._append(element, 'h2', 'Type Constraints');
-                const typeConstraints = this._append(element, 'dl');
-                for (const typeConstraint of type.type_constraints) {
-                    this._append(
-                        typeConstraints, 'dt',
-                        typeConstraint.type_param_str + ': ' +
-                            typeConstraint.allowed_type_strs.map((item) => '<tt>' + item + '</tt>')
-                                .join(', '));
-                    this._append(typeConstraints, 'dd', typeConstraint.description);
-                }
-            }
-
-            if (Array.isArray(type.examples) && type.examples.length > 0) {
-                this._append(element, 'h2', 'Examples');
-                for (const example of type.examples) {
-                    this._append(element, 'h3', example.summary);
-                    this._append(element, 'pre', example.code);
-                }
-            }
-
-            if (Array.isArray(type.references) && type.references.length > 0) {
-                this._append(element, 'h2', 'References');
-                const references = this._append(element, 'ul');
-                for (const reference of type.references) {
-                    this._append(references, 'li', reference.description);
-                }
-            }
-
-            if (type.domain && type.version && type.support_level) {
-                this._append(element, 'h2', 'Support');
-                this._append(
-                    element, 'dl',
-                    'In domain <tt>' + type.domain + '</tt> since version <tt>' + type.version +
-                        '</tt> at support level <tt>' + type.support_level + '</tt>.');
-            }
-
-            if (!this._host.type !== 'Electron') {
-                element.addEventListener('click', (e) => {
-                    if (e.target && e.target.href) {
-                        const link = e.target.href;
-                        if (link.startsWith('http://') || link.startsWith('https://')) {
-                            e.preventDefault();
-                            this._raise('navigate', {link: link});
-                        }
-                    }
-                });
-            }
-
-            this._elements = [element];
-
-            const separator = this._host.document.createElement('div');
-            separator.className = 'sidebar-view-separator';
-            this._elements.push(separator);
-        }
-        return this._elements;
-    }
-
-    on(event, callback) {
-        this._events = this._events || {};
-        this._events[event] = this._events[event] || [];
-        this._events[event].push(callback);
-    }
-
-    _raise(event, data) {
-        if (this._events && this._events[event]) {
-            for (const callback of this._events[event]) {
-                callback(this, data);
-            }
-        }
-    }
-
-    _append(parent, type, content) {
-        const element = this._host.document.createElement(type);
-        if (content) {
-            element.innerHTML = content;
-        }
-        parent.appendChild(element);
-        return element;
-    }
-
-    static formatDocumentation(source) {
-        if (source) {
-            const generator = new markdown.Generator();
-            const target = {};
-            if (source.name !== undefined) {
-                target.name = source.name;
-            }
-            if (source.module !== undefined) {
-                target.module = source.module;
-            }
-            if (source.category !== undefined) {
-                target.category = source.category;
-            }
-            if (source.summary !== undefined) {
-                target.summary = generator.html(source.summary);
-            }
-            if (source.description !== undefined) {
-                target.description = generator.html(source.description);
-            }
-            if (Array.isArray(source.attributes)) {
-                target.attributes = source.attributes.map((source) => {
-                    const target = {};
-                    target.name = source.name;
-                    if (source.type !== undefined) {
-                        target.type = source.type;
-                    }
-                    if (source.option !== undefined) {
-                        target.option = source.option;
-                    }
-                    if (source.optional !== undefined) {
-                        target.optional = source.optional;
-                    }
-                    if (source.required !== undefined) {
-                        target.required = source.required;
-                    }
-                    if (source.minimum !== undefined) {
-                        target.minimum = source.minimum;
-                    }
-                    if (source.src !== undefined) {
-                        target.src = source.src;
-                    }
-                    if (source.src_type !== undefined) {
-                        target.src_type = source.src_type;
-                    }
-                    if (source.description !== undefined) {
-                        target.description = generator.html(source.description);
-                    }
-                    if (source.default !== undefined) {
-                        target.default = source.default;
-                    }
-                    if (source.visible !== undefined) {
-                        target.visible = source.visible;
-                    }
-                    return target;
-                });
-            }
-            if (Array.isArray(source.inputs)) {
-                target.inputs = source.inputs.map((source) => {
-                    const target = {};
-                    target.name = source.name;
-                    if (source.type !== undefined) {
-                        target.type = source.type;
-                    }
-                    if (source.description !== undefined) {
-                        target.description = generator.html(source.description);
-                    }
-                    if (source.default !== undefined) {
-                        target.default = source.default;
-                    }
-                    if (source.src !== undefined) {
-                        target.src = source.src;
-                    }
-                    if (source.list !== undefined) {
-                        target.list = source.list;
-                    }
-                    if (source.isRef !== undefined) {
-                        target.isRef = source.isRef;
-                    }
-                    if (source.typeAttr !== undefined) {
-                        target.typeAttr = source.typeAttr;
-                    }
-                    if (source.numberAttr !== undefined) {
-                        target.numberAttr = source.numberAttr;
-                    }
-                    if (source.typeListAttr !== undefined) {
-                        target.typeListAttr = source.typeListAttr;
-                    }
-                    if (source.option !== undefined) {
-                        target.option = source.option;
-                    }
-                    if (source.optional !== undefined) {
-                        target.optional = source.optional;
-                    }
-                    if (source.visible !== undefined) {
-                        target.visible = source.visible;
-                    }
-                    return target;
-                });
-            }
-            if (Array.isArray(source.outputs)) {
-                target.outputs = source.outputs.map((source) => {
-                    const target = {};
-                    target.name = source.name;
-                    if (source.type) {
-                        target.type = source.type;
-                    }
-                    if (source.description !== undefined) {
-                        target.description = generator.html(source.description);
-                    }
-                    if (source.list !== undefined) {
-                        target.list = source.list;
-                    }
-                    if (source.typeAttr !== undefined) {
-                        target.typeAttr = source.typeAttr;
-                    }
-                    if (source.typeListAttr !== undefined) {
-                        target.typeListAttr = source.typeAttr;
-                    }
-                    if (source.numberAttr !== undefined) {
-                        target.numberAttr = source.numberAttr;
-                    }
-                    if (source.isRef !== undefined) {
-                        target.isRef = source.isRef;
-                    }
-                    if (source.option !== undefined) {
-                        target.option = source.option;
-                    }
-                    return target;
-                });
-            }
-            if (Array.isArray(source.references)) {
-                target.references = source.references.map((source) => {
-                    if (source) {
-                        target.description = generator.html(source.description);
-                    }
-                    return target;
-                });
-            }
-            if (source.version !== undefined) {
-                target.version = source.version;
-            }
-            if (source.operator !== undefined) {
-                target.operator = source.operator;
-            }
-            if (source.identifier !== undefined) {
-                target.identifier = source.identifier;
-            }
-            if (source.package !== undefined) {
-                target.package = source.package;
-            }
-            if (source.support_level !== undefined) {
-                target.support_level = source.support_level;
-            }
-            if (source.min_input !== undefined) {
-                target.min_input = source.min_input;
-            }
-            if (source.max_input !== undefined) {
-                target.max_input = source.max_input;
-            }
-            if (source.min_output !== undefined) {
-                target.min_output = source.min_output;
-            }
-            if (source.max_input !== undefined) {
-                target.max_output = source.max_output;
-            }
-            if (source.inputs_range !== undefined) {
-                target.inputs_range = source.inputs_range;
-            }
-            if (source.outputs_range !== undefined) {
-                target.outputs_range = source.outputs_range;
-            }
-            if (source.examples !== undefined) {
-                target.examples = source.examples;
-            }
-            if (source.constants !== undefined) {
-                target.constants = source.constants;
-            }
-            if (source.type_constraints !== undefined) {
-                target.type_constraints = source.type_constraints;
-            }
-            return target;
-        }
-        return '';
-    }
-};
-
-sidebar.FindSidebar = class {
-    constructor(host, element, graph) {
-        this._host = host;
-        this._graphElement = element;
-        this._graph = graph;
-        this._contentElement = this._host.document.createElement('div');
-        this._contentElement.setAttribute('class', 'sidebar-view-find');
-        this._searchElement = this._host.document.createElement('input');
-        this._searchElement.setAttribute('id', 'search');
-        this._searchElement.setAttribute('type', 'text');
-        this._searchElement.setAttribute('spellcheck', 'false');
-        this._searchElement.setAttribute('placeholder', 'Search...');
-        this._searchElement.setAttribute('style', 'width: 100%');
-        this._searchElement.addEventListener('input', (e) => {
-            this.update(e.target.value);
-            this._raise('search-text-changed', e.target.value);
-        });
-        this._resultElement = this._host.document.createElement('ol');
-        this._resultElement.addEventListener('click', (e) => {
-            this.select(e);
-        });
-        this._contentElement.appendChild(this._searchElement);
-        this._contentElement.appendChild(this._resultElement);
-    }
-
-    on(event, callback) {
-        this._events = this._events || {};
-        this._events[event] = this._events[event] || [];
-        this._events[event].push(callback);
-    }
-
-    _raise(event, data) {
-        if (this._events && this._events[event]) {
-            for (const callback of this._events[event]) {
-                callback(this, data);
-            }
-        }
-    }
-
-    select(e) {
-        const selection = [];
-        const id = e.target.id;
-
-        const nodesElement = this._graphElement.getElementById('nodes');
-        let nodeElement = nodesElement.firstChild;
-        while (nodeElement) {
-            if (nodeElement.id === id) {
-                selection.push(nodeElement);
-            }
-            nodeElement = nodeElement.nextSibling;
-        }
-
-        const edgePathsElement = this._graphElement.getElementById('edge-paths');
-        let edgePathElement = edgePathsElement.firstChild;
-        while (edgePathElement) {
-            if (edgePathElement.id === id) {
-                selection.push(edgePathElement);
-            }
-            edgePathElement = edgePathElement.nextSibling;
-        }
-
-        let initializerElement = this._graphElement.getElementById(id);
-        if (initializerElement) {
-            while (initializerElement.parentElement) {
-                initializerElement = initializerElement.parentElement;
-                if (initializerElement.id && initializerElement.id.startsWith('node-')) {
-                    selection.push(initializerElement);
-                    break;
-                }
-            }
-        }
-
-        if (selection.length > 0) {
-            this._raise('select', selection);
-        }
-    }
-
-    focus(searchText) {
-        this._searchElement.focus();
-        this._searchElement.value = '';
-        this._searchElement.value = searchText;
-        this.update(searchText);
-    }
-
-    update(searchText) {
-        while (this._resultElement.lastChild) {
-            this._resultElement.removeChild(this._resultElement.lastChild);
-        }
-
-        let terms = null;
-        let callback = null;
-        const unquote = searchText.match(new RegExp(/^'(.*)'|"(.*)"$/));
-        if (unquote) {
-            const term = unquote[1] || unquote[2];
-            terms = [term];
-            callback = (name) => {
-                return term === name;
-            };
-        } else {
-            terms = searchText.trim()
-                        .toLowerCase()
-                        .split(' ')
-                        .map((term) => term.trim())
-                        .filter((term) => term.length > 0);
-            callback = (name) => {
-                return terms.every((term) => name.toLowerCase().indexOf(term) !== -1);
-            };
-        }
-
-        const nodes = new Set();
-        const edges = new Set();
-
-        for (const node of this._graph.nodes.values()) {
-            const label = node.label;
-            const initializers = [];
-            if (label.class === 'graph-node' || label.class === 'graph-input') {
-                for (const input of label.inputs) {
-                    for (const argument of input.arguments) {
-                        if (argument.name && !edges.has(argument.name)) {
-                            const match = (argument, term) => {
-                                if (argument.name &&
-                                    argument.name.toLowerCase().indexOf(term) !== -1) {
-                                    return true;
-                                }
-                                if (argument.type) {
-                                    if (argument.type.dataType &&
-                                        term === argument.type.dataType.toLowerCase()) {
-                                        return true;
-                                    }
-                                    if (argument.type.shape) {
-                                        if (term === argument.type.shape.toString().toLowerCase()) {
-                                            return true;
-                                        }
-                                        if (argument.type.shape &&
-                                            Array.isArray(argument.type.shape.dimensions)) {
-                                            const dimensions = argument.type.shape.dimensions.map(
-                                                (dimension) => (
-                                                    dimension ? dimension.toString().toLowerCase() :
-                                                                ''));
-                                            if (term === dimensions.join(',')) {
-                                                return true;
-                                            }
-                                            if (dimensions.some(
-                                                    (dimension) => term === dimension)) {
-                                                return true;
-                                            }
-                                        }
-                                    }
-                                }
-                                return false;
-                            };
-                            if (terms.every((term) => match(argument, term))) {
-                                if (!argument.initializer) {
-                                    const inputItem = this._host.document.createElement('li');
-                                    inputItem.innerText = '\u2192 ' +
-                                        argument.name.split('\n').shift();  // custom argument id
-                                    inputItem.id = 'edge-' + argument.name;
-                                    this._resultElement.appendChild(inputItem);
-                                    edges.add(argument.name);
-                                } else {
-                                    initializers.push(argument);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-            if (label.class === 'graph-node') {
-                const name = label.value.name;
-                const type = label.value.type.name;
-                if (!nodes.has(label.id) &&
-                    ((name && callback(name)) || (type && callback(type)))) {
-                    const nameItem = this._host.document.createElement('li');
-                    nameItem.innerText = '\u25A2 ' + (name || '[' + type + ']');
-                    nameItem.id = label.id;
-                    this._resultElement.appendChild(nameItem);
-                    nodes.add(label.id);
-                }
-            }
-            for (const argument of initializers) {
-                if (argument.name) {
-                    const initializeItem = this._host.document.createElement('li');
-                    initializeItem.innerText =
-                        '\u25A0 ' + argument.name.split('\n').shift();  // custom argument id
-                    initializeItem.id = 'initializer-' + argument.name;
-                    this._resultElement.appendChild(initializeItem);
-                }
-            }
-        }
-
-        for (const node of this._graph.nodes.values()) {
-            const label = node.label;
-            if (label.class === 'graph-node' || label.class === 'graph-output') {
-                for (const output of label.outputs) {
-                    for (const argument of output.arguments) {
-                        if (argument.name && !edges.has(argument.name) &&
-                            terms.every(
-                                (term) => argument.name.toLowerCase().indexOf(term) !== -1)) {
-                            const outputItem = this._host.document.createElement('li');
-                            outputItem.innerText = '\u2192 ' +
-                                argument.name.split('\n').shift();  // custom argument id
-                            outputItem.id = 'edge-' + argument.name;
-                            this._resultElement.appendChild(outputItem);
-                            edges.add(argument.name);
-                        }
-                    }
-                }
-            }
-        }
-
-        this._resultElement.style.display =
-            this._resultElement.childNodes.length !== 0 ? 'block' : 'none';
-    }
-
-    get content() {
-        return this._contentElement;
-    }
-};
-
-sidebar.Formatter = class {
-    constructor(value, type, quote) {
-        this._value = value;
-        this._type = type;
-        this._quote = quote;
-        this._values = new Set();
-    }
-
-    toString() {
-        return this._format(this._value, this._type, this._quote);
-    }
-
-    _format(value, type, quote) {
-        if (typeof value === 'function') {
-            return value();
-        }
-        if (value && (value instanceof base.Int64 || value instanceof base.Uint64)) {
-            return value.toString();
-        }
-        if (Number.isNaN(value)) {
-            return 'NaN';
-        }
-        switch (type) {
-            case 'shape':
-                return value ? value.toString() : '(null)';
-            case 'shape[]':
-                if (value && !Array.isArray(value)) {
-                    throw new Error('Invalid shape \'' + JSON.stringify(value) + '\'.');
-                }
-                return value ? value.map((item) => item.toString()).join(', ') : '(null)';
-            case 'graph':
-                return value ? value.name : '(null)';
-            case 'graph[]':
-                return value ? value.map((graph) => graph.name).join(', ') : '(null)';
-            case 'tensor':
-                if (value && value.type && value.type.shape && value.type.shape.dimensions &&
-                    value.type.shape.dimensions.length === 0) {
-                    return value.toString();
-                }
-                return '[...]';
-            case 'function':
-                return value.type.name;
-            case 'function[]':
-                return value ? value.map((item) => item.type.name).join(', ') : '(null)';
-            default:
-                break;
-        }
-        if (typeof value === 'string' && (!type || type !== 'string')) {
-            return quote ? '"' + value + '"' : value;
-        }
-        if (Array.isArray(value)) {
-            if (value.length === 0) {
-                return quote ? '[]' : '';
-            }
-            let ellipsis = false;
-            if (value.length > 1000) {
-                value = value.slice(0, 1000);
-                ellipsis = true;
-            }
-            const itemType =
-                type && type.endsWith('[]') ? type.substring(0, type.length - 2) : null;
-            const array = value.map((item) => {
-                if (item && (item instanceof base.Int64 || item instanceof base.Uint64)) {
-                    return item.toString();
-                }
-                if (Number.isNaN(item)) {
-                    return 'NaN';
-                }
-                const quote = !itemType || itemType === 'string';
-                return this._format(item, itemType, quote);
-            });
-            if (ellipsis) {
-                array.push('\u2026');
-            }
-            return quote ? ['[', array.join(', '), ']'].join(' ') : array.join(', ');
-        }
-        if (value === null) {
-            return quote ? 'null' : '';
-        }
-        if (value === undefined) {
-            return 'undefined';
-        }
-        if (value !== Object(value)) {
-            return value.toString();
-        }
-        if (this._values.has(value)) {
-            return '\u2026';
-        }
-        this._values.add(value);
-        const list = [];
-        const entries = Object.entries(value).filter(
-            (entry) => !entry[0].startsWith('__') && !entry[0].endsWith('__'));
-        if (entries.length === 1) {
-            list.push(this._format(entries[0][1], null, true));
-        } else {
-            for (const entry of entries) {
-                list.push(entry[0] + ': ' + this._format(entry[1], null, true));
-            }
-        }
-        let objectType = value.__type__;
-        if (!objectType && value.constructor.name && value.constructor.name !== 'Object') {
-            objectType = value.constructor.name;
-        }
-        if (objectType) {
-            return objectType + (list.length === 0 ? '()' : ['(', list.join(', '), ')'].join(''));
-        }
-        switch (list.length) {
-            case 0:
-                return quote ? '()' : '';
-            case 1:
-                return list[0];
-            default:
-                return quote ? ['(', list.join(', '), ')'].join(' ') : list.join(', ');
-        }
-    }
-};
-
-const markdown = {};
-
-markdown.Generator = class {
-    constructor() {
-        this._newlineRegExp = /^\n+/;
-        this._codeRegExp = /^( {4}[^\n]+\n*)+/;
-        this._fencesRegExp =
-            /^ {0,3}(`{3,}(?=[^`\n]*\n)|~{3,})([^\n]*)\n(?:|([\s\S]*?)\n)(?: {0,3}\1[~`]* *(?:\n+|$)|$)/;
-        this._hrRegExp = /^ {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)/;
-        this._headingRegExp = /^ {0,3}(#{1,6}) +([^\n]*?)(?: +#+)? *(?:\n+|$)/;
-        this._blockquoteRegExp =
-            /^( {0,3}> ?(([^\n]+(?:\n(?! {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--))[^\n]+)*)|[^\n]*)(?:\n|$))+/;
-        this._listRegExp =
-            /^( {0,3})((?:[*+-]|\d{1,9}[.)])) [\s\S]+?(?:\n+(?=\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$))|\n+(?= {0,3}\[((?!\s*\])(?:\\[[\]]|[^[\]])+)\]: *\n? *<?([^\s>]+)>?(?:(?: +\n? *| *\n *)((?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))))? *(?:\n+|$))|\n{2,}(?! )(?!\1(?:[*+-]|\d{1,9}[.)]) )\n*|\s*$)/;
-        this._htmlRegExp =
-            /^ {0,3}(?:<(script|pre|style)[\s>][\s\S]*?(?:<\/\1>[^\n]*\n+|$)|<!--(?!-?>)[\s\S]*?(?:-->|$)[^\n]*(\n+|$)|<\?[\s\S]*?(?:\?>\n*|$)|<![A-Z][\s\S]*?(?:>\n*|$)|<!\[CDATA\[[\s\S]*?(?:\]\]>\n*|$)|<\/?(address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)[\s\S]*?(?:\n{2,}|$)|<(?!script|pre|style)([a-z][\w-]*)(?: +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?)*? *\/?>(?=[ \t]*(?:\n|$))[\s\S]*?(?:\n{2,}|$)|<\/(?!script|pre|style)[a-z][\w-]*\s*>(?=[ \t]*(?:\n|$))[\s\S]*?(?:\n{2,}|$))/i;
-        this._defRegExp =
-            /^ {0,3}\[((?!\s*\])(?:\\[[\]]|[^[\]])+)\]: *\n? *<?([^\s>]+)>?(?:(?: +\n? *| *\n *)((?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))))? *(?:\n+|$)/;
-        this._nptableRegExp =
-            /^ *([^|\n ].*\|.*)\n {0,3}([-:]+ *\|[-| :]*)(?:\n((?:(?!\n| {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {4}[^\n]| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--)).*(?:\n|$))*)\n*|$)/;
-        this._tableRegExp =
-            /^ *\|(.+)\n {0,3}\|?( *[-:]+[-| :]*)(?:\n *((?:(?!\n| {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {4}[^\n]| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--)).*(?:\n|$))*)\n*|$)/;
-        this._lheadingRegExp = /^([^\n]+)\n {0,3}(=+|-+) *(?:\n+|$)/;
-        this._textRegExp = /^[^\n]+/;
-        this._bulletRegExp = /(?:[*+-]|\d{1,9}[.)])/;
-        this._itemRegExp =
-            /^( *)((?:[*+-]|\d{1,9}[.)])) ?[^\n]*(?:\n(?!\1(?:[*+-]|\d{1,9}[.)]) ?)[^\n]*)*/gm;
-        this._paragraphRegExp =
-            /^([^\n]+(?:\n(?! {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--))[^\n]+)*)/;
-        this._backpedalRegExp =
-            /(?:[^?!.,:;*_~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_~)]+(?!$))+/;
-        this._escapeRegExp = /^\\([!"#$%&'()*+,\-./:;<=>?@[\]\\^_`{|}~~|])/;
-        this._escapesRegExp = /\\([!"#$%&'()*+,\-./:;<=>?@[\]\\^_`{|}~])/g;
-        /* eslint-disable no-control-regex */
-        this._autolinkRegExp =
-            /^<([a-zA-Z][a-zA-Z0-9+.-]{1,31}:[^\s\x00-\x1f<>]*|[a-zA-Z0-9.!#$%&'*+/=?_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_]))>/;
-        this._linkRegExp =
-            /^!?\[((?:\[(?:\\.|[^[\]\\])*\]|\\.|`[^`]*`|[^[\]\\`])*?)\]\(\s*(<(?:\\[<>]?|[^\s<>\\])*>|[^\s\x00-\x1f]*)(?:\s+("(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)))?\s*\)/;
-        /* eslint-enable no-control-regex */
-        this._urlRegExp =
-            /^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9-]+\.?)+[^\s<]*|^[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/i;
-        this._tagRegExp =
-            /^<!--(?!-?>)[\s\S]*?-->|^<\/[a-zA-Z][\w:-]*\s*>|^<[a-zA-Z][\w-]*(?:\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?)*?\s*\/?>|^<\?[\s\S]*?\?>|^<![a-zA-Z]+\s[\s\S]*?>|^<!\[CDATA\[[\s\S]*?\]\]>/;
-        this._reflinkRegExp =
-            /^!?\[((?:\[(?:\\.|[^[\]\\])*\]|\\.|`[^`]*`|[^[\]\\`])*?)\]\[(?!\s*\])((?:\\[[\]]?|[^[\]\\])+)\]/;
-        this._nolinkRegExp = /^!?\[(?!\s*\])((?:\[[^[\]]*\]|\\[[\]]|[^[\]])*)\](?:\[\])?/;
-        this._reflinkSearchRegExp =
-            /!?\[((?:\[(?:\\.|[^[\]\\])*\]|\\.|`[^`]*`|[^[\]\\`])*?)\]\[(?!\s*\])((?:\\[[\]]?|[^[\]\\])+)\]|!?\[(?!\s*\])((?:\[[^[\]]*\]|\\[[\]]|[^[\]])*)\](?:\[\])?(?!\()/g;
-        this._strongStartRegExp =
-            /^(?:(\*\*(?=[*!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]))|\*\*)(?![\s])|__/;
-        this._strongMiddleRegExp =
-            /^\*\*(?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|\*(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?\*)+?\*\*$|^__(?![\s])((?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|_(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?_)+?)__$/;
-        this._strongEndAstRegExp =
-            /[^!"#$%&'()+\-.,/:;<=>?@[\]`{|}~\s]\*\*(?!\*)|[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]\*\*(?!\*)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~_\s]|$))/g;
-        this._strongEndUndRegExp = /[^\s]__(?!_)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~*\s])|$)/g;
-        this._emStartRegExp = /^(?:(\*(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]))|\*)(?![*\s])|_/;
-        this._emMiddleRegExp =
-            /^\*(?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|\*(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?\*)+?\*$|^_(?![_\s])(?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|_(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?_)+?_$/;
-        this._emEndAstRegExp =
-            /[^!"#$%&'()+\-.,/:;<=>?@[\]`{|}~\s]\*(?!\*)|[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]\*(?!\*)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~_\s]|$))/g;
-        (this._emEndUndRegExp = /[^\s]_(?!_)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~*\s])|$)/g),
-            (this._codespanRegExp = /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/);
-        this._brRegExp = /^( {2,}|\\)\n(?!\s*$)/;
-        this._delRegExp = /^~+(?=\S)([\s\S]*?\S)~+/;
-        this._textspanRegExp =
-            /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<![`*~]|\b_|https?:\/\/|ftp:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+/=?_`{|}~-](?=[a-zA-Z0-9.!#$%&'*+/=?_`{|}~-]+@))|(?=[a-zA-Z0-9.!#$%&'*+/=?_`{|}~-]+@))/;
-        this._punctuationRegExp = /^([\s*!"#$%&'()+\-.,/:;<=>?@[\]`{|}~])/;
-        this._blockSkipRegExp = /\[[^\]]*?\]\([^)]*?\)|`[^`]*?`|<[^>]*?>/g;
-        this._escapeTestRegExp = /[&<>"']/;
-        this._escapeReplaceRegExp = /[&<>"']/g;
-        this._escapeTestNoEncodeRegExp = /[<>"']|&(?!#?\w+;)/;
-        this._escapeReplaceNoEncodeRegExp = /[<>"']|&(?!#?\w+;)/g;
-        this._escapeReplacementsMap =
-            {'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', '\'': '&#39;'};
-    }
-
-    html(source) {
-        const tokens = [];
-        const links = new Map();
-        this._tokenize(
-            source.replace(/\r\n|\r/g, '\n').replace(/\t/g, '    '), tokens, links, true);
-        this._tokenizeBlock(tokens, links);
-        const slugs = new Map();
-        const result = this._render(tokens, slugs, true);
-        return result;
-    }
-
-    _tokenize(source, tokens, links, top) {
-        source = source.replace(/^ +$/gm, '');
-        while (source) {
-            let match = this._newlineRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                if (match[0].length > 1) {
-                    tokens.push({type: 'space'});
-                }
-                continue;
-            }
-            match = this._codeRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                const lastToken = tokens[tokens.length - 1];
-                if (lastToken && lastToken.type === 'paragraph') {
-                    lastToken.text += '\n' + match[0].trimRight();
-                } else {
-                    const text = match[0].replace(/^ {4}/gm, '').replace(/\n*$/, '');
-                    tokens.push({type: 'code', text: text});
-                }
-                continue;
-            }
-            match = this._fencesRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                const language = match[2] ? match[2].trim() : match[2];
-                let content = match[3] || '';
-                const matchIndent = match[0].match(/^(\s+)(?:```)/);
-                if (matchIndent !== null) {
-                    const indent = matchIndent[1];
-                    content = content.split('\n')
-                                  .map((node) => {
-                                      const match = node.match(/^\s+/);
-                                      return match !== null && match[0].length >= indent.length ?
-                                          node.slice(indent.length) :
-                                          node;
-                                  })
-                                  .join('\n');
-                }
-                tokens.push({type: 'code', language: language, text: content});
-                continue;
-            }
-            match = this._headingRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                tokens.push({type: 'heading', depth: match[1].length, text: match[2]});
-                continue;
-            }
-            match = this._nptableRegExp.exec(source);
-            if (match) {
-                const header = this._splitCells(match[1].replace(/^ *| *\| *$/g, ''));
-                const align = match[2].replace(/^ *|\| *$/g, '').split(/ *\| */);
-                if (header.length === align.length) {
-                    const cells = match[3] ? match[3].replace(/\n$/, '').split('\n') : [];
-                    const token =
-                        {type: 'table', header: header, align: align, cells: cells, raw: match[0]};
-                    for (let i = 0; i < token.align.length; i++) {
-                        if (/^ *-+: *$/.test(token.align[i])) {
-                            token.align[i] = 'right';
-                        } else if (/^ *:-+: *$/.test(token.align[i])) {
-                            token.align[i] = 'center';
-                        } else if (/^ *:-+ *$/.test(token.align[i])) {
-                            token.align[i] = 'left';
-                        } else {
-                            token.align[i] = null;
-                        }
-                    }
-                    token.cells =
-                        token.cells.map((cell) => this._splitCells(cell, token.header.length));
-                    source = source.substring(token.raw.length);
-                    tokens.push(token);
-                    continue;
-                }
-            }
-            match = this._hrRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                tokens.push({type: 'hr'});
-                continue;
-            }
-            match = this._blockquoteRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                const text = match[0].replace(/^ *> ?/gm, '');
-                tokens.push(
-                    {type: 'blockquote', text: text, tokens: this._tokenize(text, [], links, top)});
-                continue;
-            }
-            match = this._listRegExp.exec(source);
-            if (match) {
-                let raw = match[0];
-                const bull = match[2];
-                const ordered = bull.length > 1;
-                const parent = bull[bull.length - 1] === ')';
-                const list = {
-                    type: 'list',
-                    raw: raw,
-                    ordered: ordered,
-                    start: ordered ? +bull.slice(0, -1) : '',
-                    loose: false,
-                    items: [],
-                };
-                const itemMatch = match[0].match(this._itemRegExp);
-                let next = false;
-                const length = itemMatch.length;
-                for (let i = 0; i < length; i++) {
-                    let item = itemMatch[i];
-                    raw = item;
-                    let space = item.length;
-                    item = item.replace(/^ *([*+-]|\d+[.)]) ?/, '');
-                    if (~item.indexOf('\n ')) {
-                        space -= item.length;
-                        item = item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '');
-                    }
-                    if (i !== length - 1) {
-                        const bullet = this._bulletRegExp.exec(itemMatch[i + 1])[0];
-                        if (ordered ? bullet.length === 1 ||
-                                    (!parent && bullet[bullet.length - 1] === ')') :
-                                      bullet.length > 1) {
-                            const addBack = itemMatch.slice(i + 1).join('\n');
-                            list.raw = list.raw.substring(0, list.raw.length - addBack.length);
-                            i = length - 1;
-                        }
-                    }
-                    let loose = next || /\n\n(?!\s*$)/.test(item);
-                    if (i !== length - 1) {
-                        next = item.charAt(item.length - 1) === '\n';
-                        if (!loose) {
-                            loose = next;
-                        }
-                    }
-                    if (loose) {
-                        list.loose = true;
-                    }
-                    const task = /^\[[ xX]\] /.test(item);
-                    let checked = undefined;
-                    if (task) {
-                        checked = item[1] !== ' ';
-                        item = item.replace(/^\[[ xX]\] +/, '');
-                    }
-                    list.items.push({
-                        type: 'list_item',
-                        raw,
-                        task: task,
-                        checked: checked,
-                        loose: loose,
-                        text: item,
-                    });
-                }
-                source = source.substring(list.raw.length);
-                for (const item of list.items) {
-                    item.tokens = this._tokenize(item.text, [], links, false);
-                }
-                tokens.push(list);
-                continue;
-            }
-            match = this._htmlRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                tokens.push({
-                    type: 'html',
-                    pre: match[1] === 'pre' || match[1] === 'script' || match[1] === 'style',
-                    text: match[0],
-                });
-                continue;
-            }
-            if (top) {
-                match = this._defRegExp.exec(source);
-                if (match) {
-                    source = source.substring(match[0].length);
-                    match[3] = match[3] ? match[3].substring(1, match[3].length - 1) : match[3];
-                    const tag = match[1].toLowerCase().replace(/\s+/g, ' ');
-                    if (!links.has(tag)) {
-                        links.set(tag, {href: match[2], title: match[3]});
-                    }
-                    continue;
-                }
-            }
-            match = this._tableRegExp.exec(source);
-            if (match) {
-                const header = this._splitCells(match[1].replace(/^ *| *\| *$/g, ''));
-                const align = match[2].replace(/^ *|\| *$/g, '').split(/ *\| */);
-                if (header.length === align.length) {
-                    const cells = match[3] ? match[3].replace(/\n$/, '').split('\n') : [];
-                    const token =
-                        {type: 'table', header: header, align: align, cells: cells, raw: match[0]};
-                    for (let i = 0; i < token.align.length; i++) {
-                        if (/^ *-+: *$/.test(token.align[i])) {
-                            token.align[i] = 'right';
-                        } else if (/^ *:-+: *$/.test(token.align[i])) {
-                            token.align[i] = 'center';
-                        } else if (/^ *:-+ *$/.test(token.align[i])) {
-                            token.align[i] = 'left';
-                        } else {
-                            token.align[i] = null;
-                        }
-                    }
-                    token.cells = token.cells.map(
-                        (cell) => this._splitCells(
-                            cell.replace(/^ *\| *| *\| *$/g, ''), token.header.length));
-                    source = source.substring(token.raw.length);
-                    tokens.push(token);
-                    continue;
-                }
-            }
-            match = this._lheadingRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                tokens.push(
-                    {type: 'heading', depth: match[2].charAt(0) === '=' ? 1 : 2, text: match[1]});
-                continue;
-            }
-            if (top) {
-                match = this._paragraphRegExp.exec(source);
-                if (match) {
-                    source = source.substring(match[0].length);
-                    tokens.push({
-                        type: 'paragraph',
-                        text: match[1].charAt(match[1].length - 1) === '\n' ?
-                            match[1].slice(0, -1) :
-                            match[1],
-                    });
-                    continue;
-                }
-            }
-            match = this._textRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                const lastToken = tokens[tokens.length - 1];
-                if (lastToken && lastToken.type === 'text') {
-                    lastToken.text += '\n' + match[0];
-                } else {
-                    tokens.push({type: 'text', text: match[0]});
-                }
-                continue;
-            }
-            throw new Error('Unexpected \'' + source.charCodeAt(0) + '\'.');
-        }
-        return tokens;
-    }
-
-    _tokenizeInline(source, links, inLink, inRawBlock, prevChar) {
-        const tokens = [];
-        let maskedSource = source;
-        if (links.size > 0) {
-            while (maskedSource) {
-                const match = this._reflinkSearchRegExp.exec(maskedSource);
-                if (match) {
-                    if (links.has(match[0].slice(match[0].lastIndexOf('[') + 1, -1))) {
-                        maskedSource = maskedSource.slice(0, match.index) + '[' +
-                            'a'.repeat(match[0].length - 2) + ']' +
-                            maskedSource.slice(this._reflinkSearchRegExp.lastIndex);
-                    }
-                    continue;
-                }
-                break;
-            }
-        }
-        while (maskedSource) {
-            const match = this._blockSkipRegExp.exec(maskedSource);
-            if (match) {
-                maskedSource = maskedSource.slice(0, match.index) + '[' +
-                    'a'.repeat(match[0].length - 2) + ']' +
-                    maskedSource.slice(this._blockSkipRegExp.lastIndex);
-                continue;
-            }
-            break;
-        }
-        while (source) {
-            let match = this._escapeRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                tokens.push({type: 'escape', text: this._escape(match[1])});
-                continue;
-            }
-            match = this._tagRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                if (!inLink && /^<a /i.test(match[0])) {
-                    inLink = true;
-                } else if (inLink && /^<\/a>/i.test(match[0])) {
-                    inLink = false;
-                }
-                if (!inRawBlock && /^<(pre|code|kbd|script)(\s|>)/i.test(match[0])) {
-                    inRawBlock = true;
-                } else if (inRawBlock && /^<\/(pre|code|kbd|script)(\s|>)/i.test(match[0])) {
-                    inRawBlock = false;
-                }
-                tokens.push({type: 'html', raw: match[0], text: match[0]});
-                continue;
-            }
-            match = this._linkRegExp.exec(source);
-            if (match) {
-                let index = -1;
-                const ref = match[2];
-                if (ref.indexOf(')') !== -1) {
-                    let level = 0;
-                    for (let i = 0; i < ref.length; i++) {
-                        switch (ref[i]) {
-                            case '\\':
-                                i++;
-                                break;
-                            case '(':
-                                level++;
-                                break;
-                            case ')':
-                                level--;
-                                if (level < 0) {
-                                    index = i;
-                                    i = ref.length;
-                                }
-                                break;
-                            default:
-                                break;
-                        }
-                    }
-                }
-                if (index > -1) {
-                    const length = (match[0].indexOf('!') === 0 ? 5 : 4) + match[1].length + index;
-                    match[2] = match[2].substring(0, index);
-                    match[0] = match[0].substring(0, length).trim();
-                    match[3] = '';
-                }
-                const title =
-                    (match[3] ? match[3].slice(1, -1) : '').replace(this._escapesRegExp, '$1');
-                const href = match[2]
-                                 .trim()
-                                 .replace(/^<([\s\S]*)>$/, '$1')
-                                 .replace(this._escapesRegExp, '$1');
-                const token = this._outputLink(match, href, title);
-                source = source.substring(match[0].length);
-                if (token.type === 'link') {
-                    token.tokens = this._tokenizeInline(token.text, links, true, inRawBlock, '');
-                }
-                tokens.push(token);
-                continue;
-            }
-            match = this._reflinkRegExp.exec(source) || this._nolinkRegExp.exec(source);
-            if (match) {
-                let link = (match[2] || match[1]).replace(/\s+/g, ' ');
-                link = links.get(link.toLowerCase());
-                if (!link || !link.href) {
-                    const text = match[0].charAt(0);
-                    source = source.substring(text.length);
-                    tokens.push({type: 'text', text: text});
-                } else {
-                    source = source.substring(match[0].length);
-                    const token = this._outputLink(match, link);
-                    if (token.type === 'link') {
-                        token.tokens =
-                            this._tokenizeInline(token.text, links, true, inRawBlock, '');
-                    }
-                    tokens.push(token);
-                }
-                continue;
-            }
-            match = this._strongStartRegExp.exec(source);
-            if (match &&
-                (!match[1] ||
-                 (match[1] && (prevChar === '' || this._punctuationRegExp.exec(prevChar))))) {
-                const masked = maskedSource.slice(-1 * source.length);
-                const endReg =
-                    match[0] === '**' ? this._strongEndAstRegExp : this._strongEndUndRegExp;
-                endReg.lastIndex = 0;
-                let cap;
-                while ((match = endReg.exec(masked)) !== null) {
-                    cap = this._strongMiddleRegExp.exec(masked.slice(0, match.index + 3));
-                    if (cap) {
-                        break;
-                    }
-                }
-                if (cap) {
-                    const text = source.substring(2, cap[0].length - 2);
-                    source = source.substring(cap[0].length);
-                    tokens.push({
-                        type: 'strong',
-                        text: text,
-                        tokens: this._tokenizeInline(text, links, inLink, inRawBlock, ''),
-                    });
-                    continue;
-                }
-            }
-            match = this._emStartRegExp.exec(source);
-            if (match &&
-                (!match[1] ||
-                 (match[1] && (prevChar === '' || this._punctuationRegExp.exec(prevChar))))) {
-                const masked = maskedSource.slice(-1 * source.length);
-                const endReg = match[0] === '*' ? this._emEndAstRegExp : this._emEndUndRegExp;
-                endReg.lastIndex = 0;
-                let cap;
-                while ((match = endReg.exec(masked)) !== null) {
-                    cap = this._emMiddleRegExp.exec(masked.slice(0, match.index + 2));
-                    if (cap) {
-                        break;
-                    }
-                }
-                if (cap) {
-                    const text = source.slice(1, cap[0].length - 1);
-                    source = source.substring(cap[0].length);
-                    tokens.push({
-                        type: 'em',
-                        text: text,
-                        tokens: this._tokenizeInline(text, links, inLink, inRawBlock, ''),
-                    });
-                    continue;
-                }
-            }
-            match = this._codespanRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                let content = match[2].replace(/\n/g, ' ');
-                if (/[^ ]/.test(content) && content.startsWith(' ') && content.endsWith(' ')) {
-                    content = content.substring(1, content.length - 1);
-                }
-                tokens.push({type: 'codespan', text: this._encode(content)});
-                continue;
-            }
-            match = this._brRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                tokens.push({type: 'br'});
-                continue;
-            }
-            match = this._delRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                const text = match[1];
-                tokens.push({
-                    type: 'del',
-                    text: text,
-                    tokens: this._tokenizeInline(text, links, inLink, inRawBlock, ''),
-                });
-                continue;
-            }
-            match = this._autolinkRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                const text = this._escape(match[1]);
-                const href = match[2] === '@' ? 'mailto:' + text : text;
-                tokens.push({
-                    type: 'link',
-                    text: text,
-                    href: href,
-                    tokens: [{type: 'text', raw: text, text}],
-                });
-                continue;
-            }
-            if (!inLink) {
-                match = this._urlRegExp.exec(source);
-                if (match) {
-                    const email = match[2] === '@';
-                    if (!email) {
-                        let prevCapZero;
-                        do {
-                            prevCapZero = match[0];
-                            match[0] = this._backpedalRegExp.exec(match[0])[0];
-                        } while (prevCapZero !== match[0]);
-                    }
-                    const text = this._escape(match[0]);
-                    const href =
-                        email ? 'mailto:' + text : match[1] === 'www.' ? 'http://' + text : text;
-                    source = source.substring(match[0].length);
-                    tokens.push({
-                        type: 'link',
-                        text: text,
-                        href: href,
-                        tokens: [{type: 'text', text: text}],
-                    });
-                    continue;
-                }
-            }
-            match = this._textspanRegExp.exec(source);
-            if (match) {
-                source = source.substring(match[0].length);
-                prevChar = match[0].slice(-1);
-                tokens.push({type: 'text', text: inRawBlock ? match[0] : this._escape(match[0])});
-                continue;
-            }
-            throw new Error('Unexpected \'' + source.charCodeAt(0) + '\'.');
-        }
-        return tokens;
-    }
-
-    _tokenizeBlock(tokens, links) {
-        for (const token of tokens) {
-            switch (token.type) {
-                case 'paragraph':
-                case 'text':
-                case 'heading': {
-                    token.tokens = this._tokenizeInline(token.text, links, false, false, '');
-                    break;
-                }
-                case 'table': {
-                    token.tokens = {};
-                    token.tokens.header = token.header.map(
-                        (header) => this._tokenizeInline(header, links, false, false, ''));
-                    token.tokens.cells = token.cells.map(
-                        (cell) =>
-                            cell.map((row) => this._tokenizeInline(row, links, false, false, '')));
-                    break;
-                }
-                case 'blockquote': {
-                    this._tokenizeBlock(token.tokens, links);
-                    break;
-                }
-                case 'list': {
-                    for (const item of token.items) {
-                        this._tokenizeBlock(item.tokens, links);
-                    }
-                    break;
-                }
-                default: {
-                    break;
-                }
-            }
-        }
-    }
-
-    _render(tokens, slugs, top) {
-        let html = '';
-        while (tokens.length > 0) {
-            const token = tokens.shift();
-            switch (token.type) {
-                case 'space': {
-                    continue;
-                }
-                case 'hr': {
-                    html += '<hr>\n';
-                    continue;
-                }
-                case 'heading': {
-                    const level = token.depth;
-                    const id = this._slug(slugs, this._renderInline(token.tokens, true));
-                    html += '<h' + level + ' id="' + id + '">' + this._renderInline(token.tokens) +
-                        '</h' + level + '>\n';
-                    continue;
-                }
-                case 'code': {
-                    const code = token.text;
-                    const language = (token.language || '').match(/\S*/)[0];
-                    html += '<pre><code' +
-                        (language ? ' class="' +
-                                 'language-' + this._encode(language) + '"' :
-                                    '') +
-                        '>' + (token.escaped ? code : this._encode(code)) + '</code></pre>\n';
-                    continue;
-                }
-                case 'table': {
-                    let header = '';
-                    let cell = '';
-                    for (let j = 0; j < token.header.length; j++) {
-                        const content = this._renderInline(token.tokens.header[j]);
-                        const align = token.align[j];
-                        cell += '<th' + (align ? ' align="' + align + '"' : '') + '>' + content +
-                            '</th>\n';
-                    }
-                    header += '<tr>\n' + cell + '</tr>\n';
-                    let body = '';
-                    for (let j = 0; j < token.cells.length; j++) {
-                        const row = token.tokens.cells[j];
-                        cell = '';
-                        for (let k = 0; k < row.length; k++) {
-                            const content = this._renderInline(row[k]);
-                            const align = token.align[k];
-                            cell += '<td' + (align ? ' align="' + align + '"' : '') + '>' +
-                                content + '</td>\n';
-                        }
-                        body += '<tr>\n' + cell + '</tr>\n';
-                    }
-                    html += '<table>\n<thead>\n' + header + '</thead>\n' +
-                        (body ? '<tbody>' + body + '</tbody>' : body) + '</table>\n';
-                    continue;
-                }
-                case 'blockquote': {
-                    html += '<blockquote>\n' + this._render(token.tokens, slugs, true) +
-                        '</blockquote>\n';
-                    continue;
-                }
-                case 'list': {
-                    const ordered = token.ordered;
-                    const start = token.start;
-                    const loose = token.loose;
-                    let body = '';
-                    for (const item of token.items) {
-                        let itemBody = '';
-                        if (item.task) {
-                            const checkbox = '<input ' + (item.checked ? 'checked="" ' : '') +
-                                'disabled="" type="checkbox"' +
-                                '> ';
-                            if (loose) {
-                                if (item.tokens.length > 0 && item.tokens[0].type === 'text') {
-                                    item.tokens[0].text = checkbox + ' ' + item.tokens[0].text;
-                                    if (item.tokens[0].tokens && item.tokens[0].tokens.length > 0 &&
-                                        item.tokens[0].tokens[0].type === 'text') {
-                                        item.tokens[0].tokens[0].text =
-                                            checkbox + ' ' + item.tokens[0].tokens[0].text;
-                                    }
-                                } else {
-                                    item.tokens.unshift({type: 'text', text: checkbox});
-                                }
-                            } else {
-                                itemBody += checkbox;
-                            }
-                        }
-                        itemBody += this._render(item.tokens, slugs, loose);
-                        body += '<li>' + itemBody + '</li>\n';
-                    }
-                    const type = ordered ? 'ol' : 'ul';
-                    html += '<' + type + (ordered && start !== 1 ? ' start="' + start + '"' : '') +
-                        '>\n' + body + '</' + type + '>\n';
-                    continue;
-                }
-                case 'html': {
-                    html += token.text;
-                    continue;
-                }
-                case 'paragraph': {
-                    html += '<p>' + this._renderInline(token.tokens) + '</p>\n';
-                    continue;
-                }
-                case 'text': {
-                    html += top ? '<p>' : '';
-                    html += token.tokens ? this._renderInline(token.tokens) : token.text;
-                    while (tokens.length > 0 && tokens[0].type === 'text') {
-                        const token = tokens.shift();
-                        html +=
-                            '\n' + (token.tokens ? this._renderInline(token.tokens) : token.text);
-                    }
-                    html += top ? '</p>\n' : '';
-                    continue;
-                }
-                default: {
-                    throw new Error('Unexpected token type \'' + token.type + '\'.');
-                }
-            }
-        }
-        return html;
-    }
-
-    _renderInline(tokens, slug) {
-        let html = '';
-        for (const token of tokens) {
-            switch (token.type) {
-                case 'escape':
-                case 'html':
-                case 'text': {
-                    html += token.text;
-                    break;
-                }
-                case 'link': {
-                    const text = this._renderInline(token.tokens, slug);
-                    html += slug ? text :
-                                   '<a href="' + token.href + '"' +
-                            (token.title ? ' title="' + token.title + '"' : '') +
-                            ' target="_blank">' + text + '</a>';
-                    break;
-                }
-                case 'image': {
-                    html += slug ? token.text :
-                                   '<img src="' + token.href + '" alt="' + token.text + '"' +
-                            (token.title ? ' title="' + token.title + '"' : '') + '>';
-                    break;
-                }
-                case 'strong': {
-                    const text = this._renderInline(token.tokens, slug);
-                    html += slug ? text : '<strong>' + text + '</strong>';
-                    break;
-                }
-                case 'em': {
-                    const text = this._renderInline(token.tokens, slug);
-                    html += slug ? text : '<em>' + text + '</em>';
-                    break;
-                }
-                case 'codespan': {
-                    html += slug ? token.text : '<code>' + token.text + '</code>';
-                    break;
-                }
-                case 'br': {
-                    html += slug ? '' : '<br>';
-                    break;
-                }
-                case 'del': {
-                    const text = this._renderInline(token.tokens, slug);
-                    html += slug ? text : '<del>' + text + '</del>';
-                    break;
-                }
-                default: {
-                    throw new Error('Unexpected token type \'' + token.type + '\'.');
-                }
-            }
-        }
-        return html;
-    }
-
-    _outputLink(match, href, title) {
-        title = title ? this._escape(title) : null;
-        const text = match[1].replace(/\\([[\]])/g, '$1');
-        return match[0].charAt(0) !== '!' ?
-            {type: 'link', href: href, title: title, text: text} :
-            {type: 'image', href: href, title: title, text: this._escape(text)};
-    }
-
-    _splitCells(tableRow, count) {
-        const row = tableRow.replace(/\|/g, (match, offset, str) => {
-            let escaped = false;
-            let position = offset;
-            while (--position >= 0 && str[position] === '\\') {
-                escaped = !escaped;
-            }
-            return escaped ? '|' : ' |';
-        });
-        const cells = row.split(/ \|/);
-        if (cells.length > count) {
-            cells.splice(count);
-        } else {
-            while (cells.length < count) {
-                cells.push('');
-            }
-        }
-        return cells.map((cell) => cell.trim().replace(/\\\|/g, '|'));
-    }
-
-    _slug(slugs, value) {
-        value = value.replace(/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/gi, (_, n) => {
-            n = n.toLowerCase();
-            if (n === 'colon') {
-                return ':';
-            }
-            if (n.charAt(0) === '#') {
-                return String.fromCharCode(
-                    n.charAt(1) === 'x' ? parseInt(n.substring(2), 16) : +n.substring(1));
-            }
-            return '';
-        });
-        value = value.toLowerCase()
-                    .trim()
-                    .replace(/<[!/a-z].*?>/gi, '')
-                    .replace(/[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g, '')
-                    .replace(/\s/g, '-');
-        let slug = value;
-        let count = 0;
-        if (slugs.has(value)) {
-            count = slugs.get(value);
-            do {
-                count++;
-                slug = value + '-' + count;
-            } while (slugs.has(slug));
-        }
-        slugs.set(value, count);
-        slugs.set(slug, 0);
-        return slug;
-    }
-
-    _encode(content) {
-        if (this._escapeTestRegExp.test(content)) {
-            return content.replace(
-                this._escapeReplaceRegExp, (ch) => this._escapeReplacementsMap[ch]);
-        }
-        return content;
-    }
-
-    _escape(content) {
-        if (this._escapeTestNoEncodeRegExp.test(content)) {
-            return content.replace(
-                this._escapeReplaceNoEncodeRegExp, (ch) => this._escapeReplacementsMap[ch]);
-        }
-        return content;
-    }
-};
-
-if (typeof module !== 'undefined' && typeof module.exports === 'object') {
-    module.exports.Sidebar = sidebar.Sidebar;
-    module.exports.ModelSidebar = sidebar.ModelSidebar;
-    module.exports.NodeSidebar = sidebar.NodeSidebar;
-    module.exports.DocumentationSidebar = sidebar.DocumentationSidebar;
-    module.exports.FindSidebar = sidebar.FindSidebar;
-    module.exports.Formatter = sidebar.Formatter;
-}
diff --git a/media/CircleEditor/view.js b/media/CircleEditor/view.js
index e3b13aee..4fddce16 100644
--- a/media/CircleEditor/view.js
+++ b/media/CircleEditor/view.js
@@ -40,20 +40,6 @@
 // This file referenced
 // https://github.com/lutzroeder/netron/blob/ae449ff55642636e6a1eef092eda34ffcba1c684/source/view.js
 
-var view = view || {};
-
-var base = base || require('./base');
-var zip = zip || require('./zip');
-var gzip = gzip || require('./gzip');
-var tar = tar || require('./tar');
-var json = json || require('./json');
-var xml = xml || require('./xml');
-var protobuf = protobuf || require('./protobuf');
-var flatbuffers = flatbuffers || require('./flatbuffers');
-var python = python || require('./python');
-var sidebar = sidebar || require('./view-sidebar');
-var grapher = grapher || require('./view-grapher');
-
 view.View = class {
     constructor(host, id) {
         this._host = host;
@@ -70,11 +56,9 @@ view.View = class {
                 this._model = null;
                 this._graphs = [];
                 this._selection = [];
-                this._selectionNodes = [];  // selection of view.Node
                 this._sidebar = new sidebar.Sidebar(this._host, id);
                 this._searchText = '';
                 this._theme = undefined;
-                this._scrollToSelected = true;  // TODO add menu for this
                 this._modelFactoryService = new view.ModelFactoryService(this._host);
                 this._getElementById('zoom-in-button').addEventListener('click', () => {
                     this.zoomIn();
@@ -91,11 +75,9 @@ view.View = class {
                 this._getElementById('sidebar').addEventListener('mousewheel', (e) => {
                     this._preventDefault(e);
                 }, {passive: true});
-                if (this._host._mode === viewMode.viewer) {
-                    this._host.document.addEventListener('keydown', () => {
-                        this.clearSelection();
-                    });
-                }
+                this._host.document.addEventListener('keydown', () => {
+                    this.clearSelection();
+                });
                 this._host.start();
                 const container = this._getElementById('graph');
                 container.addEventListener('scroll', (e) => this._scrollHandler(e));
@@ -193,21 +175,14 @@ view.View = class {
     find() {
         if (this._graph) {
             let hostMode = this._host._mode;
-            if (hostMode === viewMode.viewer) {
-                this.clearSelection();
-            }
+            this.clearSelection();
             const graphElement = this._getElementById('canvas');
             const view = new sidebar.FindSidebar(this._host, graphElement, this._graph);
             view.on('search-text-changed', (sender, text) => {
                 this._searchText = text;
             });
             view.on('select', (sender, selection) => {
-                if (hostMode === viewMode.viewer) {
-                    this.select(selection);
-                } else if (hostMode === viewMode.selector) {
-                    this.scrollToSelection(selection);
-                    // TODO maybe toggle selection
-                }
+                this.select(selection);
             });
             this._sidebar.open(view.content, 'Find');
             view.focus(this._searchText);
@@ -438,9 +413,7 @@ view.View = class {
     }
 
     select(selection) {
-        if (this._host._mode === viewMode.viewer) {
-            this.clearSelection();
-        }
+        this.clearSelection();
         if (selection && selection.length > 0) {
             const container = this._getElementById('graph');
             let x = 0;
@@ -461,219 +434,11 @@ view.View = class {
         }
     }
 
-    _clearSelection() {
+    clearSelection() {
         while (this._selection.length > 0) {
             const element = this._selection.pop();
             element.classList.remove('select');
         }
-        this._selectionNodes = [];
-    }
-
-    /**
-     * @brief scroll to selection but do not select
-     */
-    scrollToSelection(selection) {
-        if (selection && selection.length > 0) {
-            const container = this._getElementById('graph');
-            let x = 0;
-            let y = 0;
-            for (const element of selection) {
-                const rect = element.getBoundingClientRect();
-                x += rect.left + (rect.width / 2);
-                y += rect.top + (rect.height / 2);
-            }
-            x = x / selection.length;
-            y = y / selection.length;
-            const rect = container.getBoundingClientRect();
-            const left = (container.scrollLeft + x - rect.left) - (rect.width / 2);
-            const top = (container.scrollTop + y - rect.top) - (rect.height / 2);
-            container.scrollTo({left: left, top: top, behavior: 'smooth'});
-        }
-    }
-
-    /**
-     * @brief toggleSelect will select or toggle select with CtrlKey down
-     * @param viewNode view.Node instance
-     * @note  works on host mode is viewMode.selector
-     */
-    toggleSelect(viewNode) {
-        if (viewNode && this._host._mode === viewMode.selector) {
-            if (this._keyCtrl) {
-                // toggle selection
-                let index = this._selectionNodes.indexOf(viewNode);
-                if (index > -1) {
-                    // de-select
-                    this._selectionNodes.splice(index, 1);
-                } else {
-                    this._selectionNodes.push(viewNode);
-                }
-                // toggle for element
-                const element = viewNode.element;  // member of grapher.Node
-                index = this._selection.indexOf(element);
-                if (index > -1) {
-                    // de-select
-                    element.classList.remove('select');
-                    this._selection.splice(index, 1);
-                } else {
-                    element.classList.add('select');
-                    this._selection.push(element);
-                }
-            } else {
-                this._clearSelection();
-
-                this._selectionNodes.push(viewNode);
-                const element = viewNode.element;  // member of grapher.Node
-                element.classList.add('select');
-                this._selection.push(element);
-            }
-
-            // request host to handle selection change
-            this._host.onView('selection');
-        }
-    }
-
-    clearSelection() {
-        this._clearSelection();
-        if (host._mode === viewMode.selector) {
-            this._host.onView('selection');
-        }
-    }
-
-    /**
-     * @brief getSelection returns array of circle.Node that are selected
-     */
-    getSelection() {
-        let selectionNodes = [];
-        let selectionTensors = [];
-        let index;
-        for (index = 0; index < this._selectionNodes.length; index++) {
-            var node = this._selectionNodes[index];
-            if (node.value.outputs) {
-                node.value.outputs.forEach((output) => {
-                    output._arguments.forEach((arg) => {
-                        // NOTE name is tensor_name + tensor_index, in circle.js
-                        const mixed = arg._name.split(/\n/);
-                        selectionNodes.push(mixed[0]);
-                        selectionTensors.push(arg._location);
-                    });
-                });
-            }
-        }
-        return {names: selectionNodes, tensors: selectionTensors};
-    }
-
-    selectViewNode(viewNode) {
-        if (viewNode) {
-            let index = this._selectionNodes.indexOf(viewNode);
-            if (index === -1) {
-                this._selectionNodes.push(viewNode);
-            }
-            const element = viewNode.element;  // member of grapher.Node
-            index = this._selection.indexOf(element);
-            if (index === -1) {
-                element.classList.add('select');
-                this._selection.push(element);
-            }
-        }
-    }
-
-    /**
-     * @brief turn on selection for nodes with selection.names array
-     */
-    setSelection(selection) {
-        // clear current selection
-        this._clearSelection();
-
-        // set new selection
-        if (Object.prototype.hasOwnProperty.call(selection, 'names')) {
-            // selection is by names
-            const names = selection.names;
-            let scrollToSelects = [];  // elements to make visible by scroll to
-
-            for (const nodeId of this._graph.nodes.keys()) {
-                const node = this._graph.node(nodeId);
-                if (node.label.value._outputs) {
-                    node.label.value._outputs.forEach((output) => {
-                        output._arguments.forEach((arg) => {
-                            // NOTE name is tensor_name + tensor_index, in circle.js
-                            const mixed = arg._name.split(/\n/);
-                            const name = mixed[0];
-                            if (names.includes(name)) {
-                                this.selectViewNode(node.label);
-                                if (this._scrollToSelected) {
-                                    scrollToSelects.push(node.label.element);
-                                }
-                            }
-                        });
-                    });
-                }
-            }
-            if (this._scrollToSelected) {
-                // make elements to be visible
-                this.scrollToSelection(scrollToSelects);
-            }
-        }
-        // TODO select with others
-    }
-
-    setNodeBackend(node, backend) {
-        let circleNode = node.label.value;
-        if (circleNode) {
-            circleNode._backend = backend;
-        }
-        const g = node.label.element.childNodes[0];
-        const prefix = 'node-item-backend-';
-        const styles = g.classList;
-        // clear existing styles for backend
-        this._host._backends.forEach((item) => {
-            styles.remove(prefix + item.toLowerCase());
-        });
-        if (backend) {
-            styles.add(prefix + backend.toLowerCase());
-        }
-    }
-
-    /**
-     * @brief set partition information to whole graph
-     */
-    setPartition(message) {
-        // NOTE opname has only nodes that are assigned to a backend
-        //    that is, not all nodes are listed.
-        //    from this, when setting graph view nodes, previous set is not cleared.
-        //    to solve this, we can (1) clear for all nodes then set backend
-        //    (2) include unassigned nodes with empty backend
-        //    (3) interate all graph nodes and set if exist in opname, clear if not.
-        //    here, (3) is implemented
-
-        if (!Object.prototype.hasOwnProperty.call(message, 'partition')) {
-            return;
-        }
-        const partition = message.partition;
-        const opname = partition.OPNAME;
-        // NOTE opname maybe undefined if there is no assignment
-
-        for (const nodeId of this._graph.nodes.keys()) {
-            const node = this._graph.node(nodeId);
-            if (node.label.value._outputs) {
-                // NOTE node.label = view.Node
-                // NOTE node.label.value = circle.Node
-                let backendFound = undefined;
-                if (opname) {
-                    node.label.value._outputs.forEach((output) => {
-                        output._arguments.forEach((arg) => {
-                            // NOTE name is tensor_name + tensor_index, in circle.js
-                            const mixed = arg._name.split(/\n/);
-                            const name = mixed[0];
-                            const backend = opname[name];
-                            if (backend !== undefined) {
-                                backendFound = backend;
-                            }
-                        });
-                    });
-                }
-                this.setNodeBackend(node, backendFound);
-            }
-        }
     }
 
     error(err, name, screen) {
@@ -754,21 +519,6 @@ view.View = class {
         });
     }
 
-    reset() {
-        this._sidebar.close();
-
-        const canvas = this._getElementById('canvas');
-        while (canvas.lastChild) {
-            canvas.removeChild(canvas.lastChild);
-        }
-
-        this._model = null;
-        this._graph = null;
-        this._graphs = [];
-        this._selection = [];
-        this._selectionNodes = [];
-    }
-
     _updateActiveGraph(graph) {
         this._sidebar.close();
         if (this._model) {
@@ -1197,748 +947,6 @@ view.View = class {
     }
 };
 
-view.Graph = class extends grapher.Graph {
-    constructor(view, model, compound, options) {
-        super(compound, options);
-        this.view = view;
-        this.model = model;
-        this._arguments = new Map();
-        this._nodeKey = 0;
-    }
-
-    createNode(node) {
-        const value = new view.Node(this, node);
-        value.name = (this._nodeKey++).toString();
-        // value.name = node.name;
-        this.setNode(value);
-        return value;
-    }
-
-    createInput(input) {
-        const value = new view.Input(this, input);
-        value.name = (this._nodeKey++).toString();
-        this.setNode(value);
-        return value;
-    }
-
-    createOutput(output) {
-        const value = new view.Output(this, output);
-        value.name = (this._nodeKey++).toString();
-        this.setNode(value);
-        return value;
-    }
-
-    createArgument(argument) {
-        const name = argument.name;
-        if (!this._arguments.has(name)) {
-            this._arguments.set(name, new view.Argument(this, argument));
-        }
-        return this._arguments.get(name);
-    }
-
-    createEdge(from, to) {
-        const value = new view.Edge(from, to);
-        return value;
-    }
-
-    add(graph) {
-        const clusters = new Set();
-        const clusterParentMap = new Map();
-        const groups = graph.groups;
-        if (groups) {
-            for (const node of graph.nodes) {
-                if (node.group) {
-                    const path = node.group.split('/');
-                    while (path.length > 0) {
-                        const name = path.join('/');
-                        path.pop();
-                        clusterParentMap.set(name, path.join('/'));
-                    }
-                }
-            }
-        }
-
-        for (const input of graph.inputs) {
-            const viewInput = this.createInput(input);
-            for (const argument of input.arguments) {
-                this.createArgument(argument).from(viewInput);
-            }
-        }
-
-        for (const node of graph.nodes) {
-            const viewNode = this.createNode(node);
-
-            const inputs = node.inputs;
-            for (const input of inputs) {
-                for (const argument of input.arguments) {
-                    if (argument.name !== '' && !argument.initializer) {
-                        this.createArgument(argument).to(viewNode);
-                    }
-                }
-            }
-            let outputs = node.outputs;
-            if (node.chain && node.chain.length > 0) {
-                const chainOutputs = node.chain[node.chain.length - 1].outputs;
-                if (chainOutputs.length > 0) {
-                    outputs = chainOutputs;
-                }
-            }
-            for (const output of outputs) {
-                for (const argument of output.arguments) {
-                    if (!argument) {
-                        throw new view.Error(
-                            'Invalid null argument in \'' + this.model.identifier + '\'.');
-                    }
-                    if (argument.name !== '') {
-                        this.createArgument(argument).from(viewNode);
-                    }
-                }
-            }
-
-            if (node.controlDependencies && node.controlDependencies.length > 0) {
-                for (const argument of node.controlDependencies) {
-                    this.createArgument(argument).to(viewNode, true);
-                }
-            }
-
-            const createCluster = (name) => {
-                if (!clusters.has(name)) {
-                    this.setNode({name: name, rx: 5, ry: 5});
-                    clusters.add(name);
-                    const parent = clusterParentMap.get(name);
-                    if (parent) {
-                        createCluster(parent);
-                        this.setParent(name, parent);
-                    }
-                }
-            };
-
-            if (groups) {
-                let groupName = node.group;
-                if (groupName && groupName.length > 0) {
-                    if (!clusterParentMap.has(groupName)) {
-                        const lastIndex = groupName.lastIndexOf('/');
-                        if (lastIndex !== -1) {
-                            groupName = groupName.substring(0, lastIndex);
-                            if (!clusterParentMap.has(groupName)) {
-                                groupName = null;
-                            }
-                        } else {
-                            groupName = null;
-                        }
-                    }
-                    if (groupName) {
-                        createCluster(groupName);
-                        this.setParent(viewNode.name, groupName);
-                    }
-                }
-            }
-        }
-
-        for (const output of graph.outputs) {
-            const viewOutput = this.createOutput(output);
-            for (const argument of output.arguments) {
-                this.createArgument(argument).to(viewOutput);
-            }
-        }
-    }
-
-    build(document, origin) {
-        for (const argument of this._arguments.values()) {
-            argument.build();
-        }
-        super.build(document, origin);
-    }
-};
-
-view.Node = class extends grapher.Node {
-    constructor(context, value) {
-        super();
-        this.context = context;  // view.Graph
-        this.value = value;      // circle.Node
-        view.Node.counter = view.Node.counter || 0;
-        this.id = 'node-' +
-            (value.name ? 'name-' + value.name : 'id-' + (view.Node.counter++).toString());
-        this._add(this.value);
-    }
-
-    // clang-format off
-  get class() {
-    return 'graph-node';
-  }
-    // clang-format on
-
-    get inputs() {
-        return this.value.inputs;
-    }
-
-    get outputs() {
-        return this.value.outputs;
-    }
-
-    _add(node) {
-        // NOTE this.context = view.Graph
-        //    this.context.view = view
-        const host = this.context.view._host;
-        const header = this.header();
-        const styles = ['node-item-type'];
-        const type = node.type;
-        const category = type && type.category ? type.category : '';
-        if (category) {
-            if (host._mode === viewMode.viewer) {
-                styles.push('node-item-type-' + category.toLowerCase());
-            }
-        }
-        if (typeof type.name !== 'string' || !type.name.split) {  // #416
-            const identifier = this.context.model && this.context.model.identifier ?
-                this.context.model.identifier :
-                '?';
-            throw new view.Error(
-                'Unsupported node type \'' + JSON.stringify(type.name) + '\' in \'' + identifier +
-                '\'.');
-        }
-        const content = this.context.view.options.names && (node.name || node.location) ?
-            (node.name || node.location) :
-            type.name.split('.').pop();
-        const tooltip = this.context.view.options.names && (node.name || node.location) ?
-            type.name :
-            (node.name || node.location);
-        const title = header.add(null, styles, content, tooltip);
-
-        if (host._mode === viewMode.viewer) {
-            title.on('click', () => this.context.view.showNodeProperties(node, null));
-        } else if (host._mode === viewMode.selector) {
-            // toggle select with click
-            title.on('click', () => {
-                this.context.view.toggleSelect(this);
-            });
-        }
-
-        if (node.type.nodes && node.type.nodes.length > 0) {
-            const definition = header.add(null, styles, '\u0192', 'Show Function Definition');
-            definition.on('click', () => this.context.view.pushGraph(node.type));
-        }
-        if (node.nodes) {
-            // this._expand = header.add(null, styles, '+', null);
-            // this._expand.on('click', () => this.toggle());
-        }
-        const initializers = [];
-        let hiddenInitializers = false;
-        if (this.context.view.options.initializers) {
-            for (const input of node.inputs) {
-                if (input.visible && input.arguments.length === 1 &&
-                    input.arguments[0].initializer !== null) {
-                    initializers.push(input);
-                }
-                if ((!input.visible || input.arguments.length > 1) &&
-                    input.arguments.some((argument) => argument.initializer !== null)) {
-                    hiddenInitializers = true;
-                }
-            }
-        }
-        let sortedAttributes = [];
-        const attributes = node.attributes || [];
-        if (this.context.view.options.attributes) {
-            sortedAttributes = attributes.filter((attribute) => attribute.visible).slice();
-        }
-        sortedAttributes.sort((a, b) => {
-            const au = a.name.toUpperCase();
-            const bu = b.name.toUpperCase();
-            return (au < bu) ? -1 : (au > bu) ? 1 : 0;
-        });
-        if (initializers.length > 0 || hiddenInitializers || sortedAttributes.length > 0) {
-            const list = this.list();
-            if (host._mode === viewMode.viewer) {
-                list.on('click', () => this.context.view.showNodeProperties(node));
-            }
-            for (const initializer of initializers) {
-                const argument = initializer.arguments[0];
-                const type = argument.type;
-                let shape = '';
-                let separator = '';
-                if (type && type.shape && type.shape.dimensions &&
-                    Array.isArray(type.shape.dimensions)) {
-                    shape = '\u3008' +
-                        type.shape.dimensions.map((d) => d ? d : '?').join('\u00D7') + '\u3009';
-                    if (type.shape.dimensions.length === 0 && argument.initializer &&
-                        !argument.initializer.state) {
-                        try {
-                            shape = argument.initializer.toString();
-                            if (shape && shape.length > 10) {
-                                shape = shape.substring(0, 10) + '\u2026';
-                            }
-                            separator = ' = ';
-                        } catch (err) {
-                            let type = '?';
-                            try {
-                                type = argument.initializer.type.toString();
-                            } catch (error) {
-                                // continue regardless of error
-                            }
-                            const identifier =
-                                this.context.view.model && this.context.view.model.identifier ?
-                                this.context.view.model.identifier :
-                                '?';
-                            throw new view.Error(
-                                'Failed to render tensor of type \'' + type + '\' in \'' +
-                                identifier + '\' (' + err.message + ').');
-                        }
-                    }
-                }
-                list.add(
-                    argument.name ? 'initializer-' + argument.name : '', initializer.name, shape,
-                    type ? type.toString() : '', separator);
-            }
-            if (hiddenInitializers) {
-                // clang-format off
-        list.add(null, '\u3008' + '\u2026' + '\u3009', '', null, '');
-                // clang-format on
-            }
-
-            for (const attribute of sortedAttributes) {
-                if (attribute.visible) {
-                    let value = new sidebar.Formatter(attribute.value, attribute.type).toString();
-                    if (value && value.length > 25) {
-                        value = value.substring(0, 25) + '\u2026';
-                    }
-                    list.add(null, attribute.name, value, attribute.type, ' = ');
-                }
-            }
-        }
-        if (Array.isArray(node.chain) && node.chain.length > 0) {
-            for (const innerNode of node.chain) {
-                this._add(innerNode);
-            }
-        }
-        if (node.inner) {
-            this._add(node.inner);
-        }
-        if (node.nodes) {
-            this.canvas = this.canvas();
-        }
-    }
-
-    toggle() {
-        this._expand.content = '-';
-        this._graph = new view.Graph(this.context.view, this.context.model, false, {});
-        this._graph.add(this.value);
-        // const document = this.element.ownerDocument;
-        // const parent = this.element.parentElement;
-        // this._graph.build(document, parent);
-        // this._graph.update();
-        this.canvas.width = 300;
-        this.canvas.height = 300;
-        this.layout();
-        this.context.update();
-    }
-};
-
-view.Input = class extends grapher.Node {
-    constructor(context, value) {
-        super();
-        this.context = context;
-        this.value = value;
-        view.Input.counter = view.Input.counter || 0;
-        const types = value.arguments.map((argument) => argument.type || '').join('\n');
-        let name = value.name || '';
-        if (name.length > 16) {
-            name = name.split('/').pop();
-        }
-        const header = this.header();
-        const title = header.add(null, ['graph-item-input'], name, types);
-        title.on('click', () => this.context.view.showModelProperties());
-        this.id = 'input-' + (name ? 'name-' + name : 'id-' + (view.Input.counter++).toString());
-    }
-
-    // clang-format off
-  get class() {
-    return 'graph-input';
-  }
-    // clang-format on
-
-    get inputs() {
-        return [];
-    }
-
-    get outputs() {
-        return [this.value];
-    }
-};
-
-view.Output = class extends grapher.Node {
-    constructor(context, value) {
-        super();
-        this.context = context;
-        this.value = value;
-        const types = value.arguments.map((argument) => argument.type || '').join('\n');
-        let name = value.name || '';
-        if (name.length > 16) {
-            name = name.split('/').pop();
-        }
-        const header = this.header();
-        const title = header.add(null, ['graph-item-output'], name, types);
-        title.on('click', () => this.context.view.showModelProperties());
-    }
-
-    get inputs() {
-        return [this.value];
-    }
-
-    get outputs() {
-        return [];
-    }
-};
-
-view.Argument = class {
-    constructor(context, argument) {
-        this.context = context;
-        this._argument = argument;
-    }
-
-    from(node) {
-        this._from = node;
-    }
-
-    to(node, controlDependency) {
-        this._to = this._to || [];
-        if (controlDependency) {
-            this._controlDependencies = this._controlDependencies || new Set();
-            this._controlDependencies.add(this._to.length);
-        }
-        this._to.push(node);
-    }
-
-    build() {
-        this._edges = this._edges || [];
-        if (this._from && this._to) {
-            for (let i = 0; i < this._to.length; i++) {
-                const to = this._to[i];
-                let content = '';
-                const type = this._argument.type;
-
-                if (type && type.shape && type.shape.dimensions &&
-                    type.shape.dimensions.length > 0 &&
-                    type.shape.dimensions.every(
-                        (dim) => !dim || Number.isInteger(dim) || dim instanceof base.Int64 ||
-                            (typeof dim === 'string'))) {
-                    content = type.shape.dimensions.map((dim) => dim || '?').join('\u00D7');
-                    content = content.length > 16 ? '' : content;
-                }
-                if (this.context.view.options.names) {
-                    content = this._argument.name.split('\n').shift();  // custom argument id
-                }
-                const edge = this.context.createEdge(this._from, to);
-                edge.v = this._from.name;
-                edge.w = to.name;
-                if (content) {
-                    edge.label = content;
-                }
-                edge.id = 'edge-' + this._argument.name;
-                if (this._controlDependencies && this._controlDependencies.has(i)) {
-                    edge.class = 'edge-path-control-dependency';
-                }
-                this.context.setEdge(edge);
-                this._edges.push(edge);
-            }
-        }
-    }
-};
-
-view.Edge = class extends grapher.Edge {
-    constructor(from, to) {
-        super(from, to);
-    }
-
-    get minlen() {
-        if (this.from.inputs.every(
-                (parameter) => parameter.arguments.every((argument) => argument.initializer))) {
-            return 2;
-        }
-        return 1;
-    }
-};
-
-view.ModelContext = class {
-    constructor(context, formats) {
-        this._context = context;
-        this._tags = new Map();
-        this._content = new Map();
-        this._formats = formats || new Map();
-    }
-
-    get identifier() {
-        return this._context.identifier;
-    }
-
-    get stream() {
-        return this._context.stream;
-    }
-
-    request(file, encoding, base) {
-        return this._context.request(file, encoding, base);
-    }
-
-    require(id) {
-        return this._context.require(id);
-    }
-
-    exception(error, fatal) {
-        this._context.exception(error, fatal);
-    }
-
-    entries(format) {
-        return this._formats.get(format) || new Map();
-    }
-
-    open(type) {
-        if (!this._content.has(type)) {
-            this._content.set(type, undefined);
-            const stream = this.stream;
-            const position = stream.position;
-            const signatures = [
-                [0x89, 0x48, 0x44, 0x46, 0x0D, 0x0A, 0x1A, 0x0A],  // HDF5
-                [
-                    0x80, undefined, 0x8a, 0x0a, 0x6c, 0xfc, 0x9c, 0x46, 0xf9, 0x20, 0x6a, 0xa8,
-                    0x50, 0x19
-                ]  // PyTorch
-            ];
-            const skip = signatures.some(
-                             (signature) => signature.length <= stream.length &&
-                                 stream.peek(signature.length)
-                                     .every(
-                                         (value, index) => signature[index] === undefined ||
-                                             signature[index] === value)) ||
-                Array.from(this._tags)
-                    .some((pair) => pair[0] !== 'flatbuffers' && pair[1].size > 0) ||
-                Array.from(this._content.values()).some((obj) => obj !== undefined);
-            if (!skip) {
-                switch (type) {
-                    case 'json': {
-                        try {
-                            const reader = json.TextReader.open(this.stream);
-                            if (reader) {
-                                const obj = reader.read();
-                                this._content.set(type, obj);
-                            }
-                        } catch (err) {
-                            // continue regardless of error
-                        }
-                        break;
-                    }
-                    case 'json.gz': {
-                        try {
-                            const archive = gzip.Archive.open(this.stream);
-                            if (archive) {
-                                const entries = archive.entries;
-                                if (entries.size === 1) {
-                                    const stream = entries.values().next().value;
-                                    const reader = json.TextReader.open(stream);
-                                    if (reader) {
-                                        const obj = reader.read();
-                                        this._content.set(type, obj);
-                                    }
-                                }
-                            }
-                        } catch (err) {
-                            // continue regardless of error
-                        }
-                        break;
-                    }
-                    case 'pkl': {
-                        let unpickler = null;
-                        try {
-                            if (stream.length > 2) {
-                                const zlib = (stream) => {
-                                    const buffer = stream.peek(2);
-                                    if (buffer[0] === 0x78) {
-                                        const check = (buffer[0] << 8) + buffer[1];
-                                        if (check % 31 === 0) {
-                                            const archive = zip.Archive.open(stream);
-                                            return archive.entries.get('');
-                                        }
-                                    }
-                                    return stream;
-                                };
-                                unpickler = python.Unpickler.open(zlib(stream));
-                            }
-                        } catch (err) {
-                            // continue regardless of error
-                        }
-                        if (unpickler) {
-                            const execution = new python.Execution(null, (error, fatal) => {
-                                const message =
-                                    error && error.message ? error.message : error.toString();
-                                this.exception(
-                                    new view.Error(
-                                        message.replace(/\.$/, '') + ' in \'' + this.identifier +
-                                        '\'.'),
-                                    fatal);
-                            });
-                            // eslint-disable-next-line
-                            const persistent_load = (saved_id) => {
-                                return saved_id;
-                            };
-                            const obj = unpickler.load(
-                                (name, args) => execution.invoke(name, args), persistent_load);
-                            this._content.set(type, obj);
-                        }
-                        break;
-                    }
-                    default: {
-                        throw new view.Error('Unsupported open format type \'' + type + '\'.');
-                    }
-                }
-            }
-            if (stream.position !== position) {
-                stream.seek(0);
-            }
-        }
-        return this._content.get(type);
-    }
-
-    tags(type) {
-        if (!this._tags.has(type)) {
-            let tags = new Map();
-            const stream = this.stream;
-            const position = stream.position;
-            if (stream) {
-                const signatures = [
-                    [0x89, 0x48, 0x44, 0x46, 0x0D, 0x0A, 0x1A, 0x0A],  // HDF5
-                    [
-                        0x80, undefined, 0x8a, 0x0a, 0x6c, 0xfc, 0x9c, 0x46, 0xf9, 0x20, 0x6a, 0xa8,
-                        0x50, 0x19
-                    ],             // PyTorch
-                    [0x50, 0x4b],  // Zip
-                    [0x1f, 0x8b]   // Gzip
-                ];
-                const skip = signatures.some(
-                                 (signature) => signature.length <= stream.length &&
-                                     stream.peek(signature.length)
-                                         .every(
-                                             (value, index) => signature[index] === undefined ||
-                                                 signature[index] === value)) ||
-                    (Array.from(this._tags)
-                         .some((pair) => pair[0] !== 'flatbuffers' && pair[1].size > 0) &&
-                     type !== 'pb+') ||
-                    Array.from(this._content.values()).some((obj) => obj !== undefined);
-                if (!skip) {
-                    try {
-                        switch (type) {
-                            case 'pbtxt': {
-                                const reader = protobuf.TextReader.open(stream);
-                                tags = reader ? reader.signature() : tags;
-                                break;
-                            }
-                            case 'pb': {
-                                const reader = protobuf.BinaryReader.open(stream);
-                                tags = reader.signature();
-                                break;
-                            }
-                            case 'pb+': {
-                                const reader = protobuf.BinaryReader.open(stream);
-                                tags = reader.decode();
-                                break;
-                            }
-                            case 'flatbuffers': {
-                                if (stream.length >= 8) {
-                                    const buffer = stream.peek(Math.min(32, stream.length));
-                                    const reader = flatbuffers.BinaryReader.open(buffer);
-                                    const identifier = reader.identifier;
-                                    if (identifier.length > 0) {
-                                        tags.set('file_identifier', identifier);
-                                    }
-                                }
-                                break;
-                            }
-                            case 'xml': {
-                                const reader = xml.TextReader.open(stream);
-                                if (reader) {
-                                    const document = reader.peek();
-                                    const element = document.documentElement;
-                                    const namespaceURI = element.namespaceURI;
-                                    const localName = element.localName;
-                                    const name =
-                                        namespaceURI ? namespaceURI + ':' + localName : localName;
-                                    tags.set(name, element);
-                                }
-                                break;
-                            }
-                            default: {
-                                throw new view.Error(
-                                    'Unsupported tags format type \'' + type + '\'.');
-                            }
-                        }
-                    } catch (error) {
-                        tags.clear();
-                    }
-                }
-            }
-            if (stream.position !== position) {
-                stream.seek(position);
-            }
-            this._tags.set(type, tags);
-        }
-        return this._tags.get(type);
-    }
-};
-
-view.ArchiveContext = class {
-    constructor(host, entries, rootFolder, identifier, stream) {
-        this._host = host;
-        this._entries = new Map();
-        if (entries) {
-            for (const entry of entries) {
-                if (entry[0].startsWith(rootFolder)) {
-                    const name = entry[0].substring(rootFolder.length);
-                    this._entries.set(name, entry[1]);
-                }
-            }
-        }
-        this._identifier = identifier.substring(rootFolder.length);
-        this._stream = stream;
-    }
-
-    get identifier() {
-        return this._identifier;
-    }
-
-    get stream() {
-        return this._stream;
-    }
-
-    request(file, encoding, base) {
-        if (base === undefined) {
-            const stream = this._entries.get(file);
-            if (!stream) {
-                return Promise.reject(new Error('File not found.'));
-            }
-            if (encoding) {
-                const decoder = new TextDecoder(encoding);
-                const buffer = stream.peek();
-                const value = decoder.decode(buffer);
-                return Promise.resolve(value);
-            }
-            return Promise.resolve(stream);
-        }
-        return this._host.request(file, encoding, base);
-    }
-
-    require(id) {
-        return this._host.require(id);
-    }
-
-    exception(error, fatal) {
-        this._host.exception(error, fatal);
-    }
-};
-
-view.ArchiveError = class extends Error {
-    constructor(message) {
-        super(message);
-        this.name = 'Error loading archive.';
-    }
-};
-
 view.ModelFactoryService = class {
     constructor(host) {
         this._host = host;
@@ -2542,15 +1550,6 @@ view.ModelFactoryService = class {
     }
 };
 
-view.Error = class extends Error {
-    constructor(message, telemetry) {
-        super(message);
-        this.name = 'Error loading model.';
-        this.telemetry = telemetry;
-        this.stack = undefined;
-    }
-};
-
 if (typeof module !== 'undefined' && typeof module.exports === 'object') {
     module.exports.View = view.View;
     module.exports.ModelFactoryService = view.ModelFactoryService;
diff --git a/media/CircleEditor/external/.FORMATDENY b/media/external/netron/.FORMATDENY
similarity index 100%
rename from media/CircleEditor/external/.FORMATDENY
rename to media/external/netron/.FORMATDENY
diff --git a/media/CircleEditor/external/LICENSE b/media/external/netron/LICENSE
similarity index 100%
rename from media/CircleEditor/external/LICENSE
rename to media/external/netron/LICENSE
diff --git a/media/external/netron/ORIGIN b/media/external/netron/ORIGIN
new file mode 100644
index 00000000..8b1b5df9
--- /dev/null
+++ b/media/external/netron/ORIGIN
@@ -0,0 +1,9 @@
+This file is for notifying about origin of source codes.
+
+All of source codes(not in exception list at the end) in this directory are copied from below git.
+- repo: https://github.com/lutzroeder/netron.git
+- commit: ae449ff55642636e6a1eef092eda34ffcba1c684
+- tag: v5.7.4
+
+However, following files are not copied.
+- .FORMATDENY : for clang-format not to check format in this directory.
diff --git a/media/CircleEditor/external/base.js b/media/external/netron/base.js
similarity index 100%
rename from media/CircleEditor/external/base.js
rename to media/external/netron/base.js
diff --git a/media/CircleEditor/external/circle-schema.js b/media/external/netron/circle-schema.js
similarity index 100%
rename from media/CircleEditor/external/circle-schema.js
rename to media/external/netron/circle-schema.js
diff --git a/media/CircleEditor/external/circle.js b/media/external/netron/circle.js
similarity index 100%
rename from media/CircleEditor/external/circle.js
rename to media/external/netron/circle.js
diff --git a/media/CircleEditor/external/dagre.js b/media/external/netron/dagre.js
similarity index 100%
rename from media/CircleEditor/external/dagre.js
rename to media/external/netron/dagre.js
diff --git a/media/CircleEditor/external/flatbuffers.js b/media/external/netron/flatbuffers.js
similarity index 100%
rename from media/CircleEditor/external/flatbuffers.js
rename to media/external/netron/flatbuffers.js
diff --git a/media/CircleEditor/external/flexbuffers.js b/media/external/netron/flexbuffers.js
similarity index 100%
rename from media/CircleEditor/external/flexbuffers.js
rename to media/external/netron/flexbuffers.js
diff --git a/media/CircleEditor/external/gzip.js b/media/external/netron/gzip.js
similarity index 100%
rename from media/CircleEditor/external/gzip.js
rename to media/external/netron/gzip.js
diff --git a/media/external/netron/index.js b/media/external/netron/index.js
new file mode 100644
index 00000000..71130686
--- /dev/null
+++ b/media/external/netron/index.js
@@ -0,0 +1,1051 @@
+
+/* eslint "no-global-assign": ["error", {"exceptions": [ "TextDecoder", "TextEncoder", "URLSearchParams" ] } ] */
+/* global view */
+
+var host = {};
+
+host.BrowserHost = class {
+
+    constructor() {
+        this._document = window.document;
+        this._window = window;
+        this._navigator = navigator;
+        if (this._window.location.hostname.endsWith('.github.io')) {
+            this._window.location.replace('https://netron.app');
+        }
+        this._window.eval = () => {
+            throw new Error('window.eval() not supported.');
+        };
+        this._meta = {};
+        for (const element of Array.from(this._document.getElementsByTagName('meta'))) {
+            if (element.content) {
+                this._meta[element.name] = this._meta[element.name] || [];
+                this._meta[element.name].push(element.content);
+            }
+        }
+        this._type = this._meta.type ? this._meta.type[0] : 'Browser';
+        this._version = this._meta.version ? this._meta.version[0] : null;
+        this._telemetry = this._version && this._version !== '0.0.0';
+        this._environment = new Map();
+        this._environment.set('zoom', 'scroll');
+        // this._environment.set('zoom', 'drag');
+    }
+
+    get window() {
+        return this._window;
+    }
+
+    get document() {
+        return this._document;
+    }
+
+    get version() {
+        return this._version;
+    }
+
+    get type() {
+        return this._type;
+    }
+
+    get agent() {
+        const userAgent = this._navigator.userAgent.toLowerCase();
+        if (userAgent.indexOf('safari') !== -1 && userAgent.indexOf('chrome') === -1) {
+            return 'safari';
+        }
+        return 'any';
+    }
+
+    initialize(view) {
+        this._view = view;
+        return new Promise((resolve /*, reject */) => {
+            const accept = () => {
+                if (this._telemetry) {
+                    const script = this.document.createElement('script');
+                    script.setAttribute('type', 'text/javascript');
+                    script.setAttribute('src', 'https://www.google-analytics.com/analytics.js');
+                    script.onload = () => {
+                        if (this.window.ga) {
+                            this.window.ga.l = 1 * new Date();
+                            this.window.ga('create', 'UA-54146-13', 'auto');
+                            this.window.ga('set', 'anonymizeIp', true);
+                        }
+                        resolve();
+                    };
+                    script.onerror = () => {
+                        resolve();
+                    };
+                    this.document.body.appendChild(script);
+                }
+                else {
+                    resolve();
+                }
+            };
+            const request = () => {
+                this._view.show('welcome consent');
+                const acceptButton = this.document.getElementById('consent-accept-button');
+                if (acceptButton) {
+                    acceptButton.addEventListener('click', () => {
+                        this._setCookie('consent', 'yes', 30);
+                        accept();
+                    });
+                }
+            };
+            if (this._getCookie('consent')) {
+                accept();
+            }
+            else {
+                this._request('https://ipinfo.io/json', { 'Content-Type': 'application/json' }, 'utf-8', 2000).then((text) => {
+                    try {
+                        const json = JSON.parse(text);
+                        const countries = ['AT', 'BE', 'BG', 'HR', 'CZ', 'CY', 'DK', 'EE', 'FI', 'FR', 'DE', 'EL', 'HU', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'NO', 'PL', 'PT', 'SK', 'ES', 'SE', 'GB', 'UK', 'GR', 'EU', 'RO'];
+                        if (json && json.country && !countries.indexOf(json.country) !== -1) {
+                            this._setCookie('consent', Date.now(), 30);
+                            accept();
+                        }
+                        else {
+                            request();
+                        }
+                    }
+                    catch (err) {
+                        request();
+                    }
+                }).catch(() => {
+                    request();
+                });
+            }
+        });
+    }
+
+    start() {
+        this.window.addEventListener('error', (e) => {
+            this.exception(e.error, true);
+        });
+
+        const params = new URLSearchParams(this.window.location.search);
+        this._environment.set('zoom', params.has('zoom') ? params.get('zoom') : this._environment.get('zoom'));
+
+        this._menu = new host.Dropdown(this, 'menu-button', 'menu-dropdown');
+        this._menu.add({
+            label: 'Properties...',
+            accelerator: 'CmdOrCtrl+Enter',
+            click: () => this._view.showModelProperties()
+        });
+        this._menu.add({});
+        this._menu.add({
+            label: 'Find...',
+            accelerator: 'CmdOrCtrl+F',
+            click: () => this._view.find()
+        });
+        this._menu.add({});
+        this._menu.add({
+            label: () => this._view.options.attributes ? 'Hide Attributes' : 'Show Attributes',
+            accelerator: 'CmdOrCtrl+D',
+            click: () => this._view.toggle('attributes')
+        });
+        this._menu.add({
+            label: () => this._view.options.initializers ? 'Hide Initializers' : 'Show Initializers',
+            accelerator: 'CmdOrCtrl+I',
+            click: () => this._view.toggle('initializers')
+        });
+        this._menu.add({
+            label: () => this._view.options.names ? 'Hide Names' : 'Show Names',
+            accelerator: 'CmdOrCtrl+U',
+            click: () => this._view.toggle('names')
+        });
+        this._menu.add({
+            label: () => this._view.options.direction === 'vertical' ? 'Show Horizontal' : 'Show Vertical',
+            accelerator: 'CmdOrCtrl+K',
+            click: () => this._view.toggle('direction')
+        });
+        this._menu.add({
+            label: () => this._view.options.mousewheel === 'scroll' ? 'Mouse Wheel: Zoom' : 'Mouse Wheel: Scroll',
+            accelerator: 'CmdOrCtrl+M',
+            click: () => this._view.toggle('mousewheel')
+        });
+        this._menu.add({});
+        this._menu.add({
+            label: 'Zoom In',
+            accelerator: 'Shift+Up',
+            click: () => this.document.getElementById('zoom-in-button').click()
+        });
+        this._menu.add({
+            label: 'Zoom Out',
+            accelerator: 'Shift+Down',
+            click: () => this.document.getElementById('zoom-out-button').click()
+        });
+        this._menu.add({
+            label: 'Actual Size',
+            accelerator: 'Shift+Backspace',
+            click: () => this._view.resetZoom()
+        });
+        this._menu.add({});
+        this._menu.add({
+            label: 'Export as PNG',
+            accelerator: 'CmdOrCtrl+Shift+E',
+            click: () => this._view.export(document.title + '.png')
+        });
+        this._menu.add({
+            label: 'Export as SVG',
+            accelerator: 'CmdOrCtrl+Alt+E',
+            click: () => this._view.export(document.title + '.svg')
+        });
+        this.document.getElementById('menu-button').addEventListener('click', (e) => {
+            this._menu.toggle();
+            e.preventDefault();
+        });
+        this._menu.add({});
+        this._menu.add({
+            label: 'About ' + this.document.title,
+            click: () => this._about()
+        });
+
+        this.document.getElementById('version').innerText = this.version;
+
+        if (this._meta.file) {
+            const url = this._meta.file[0];
+            if (this._view.accept(url)) {
+                this._openModel(this._url(url), null);
+                return;
+            }
+        }
+
+        const url = params.get('url');
+        if (url) {
+            const identifier = params.get('identifier') || null;
+            const location = url.replace(new RegExp('^https://github.com/([\\w]*/[\\w]*)/blob/([\\w/_.]*)(\\?raw=true)?$'), 'https://raw.githubusercontent.com/$1/$2');
+            if (this._view.accept(identifier || location)) {
+                this._openModel(location, identifier);
+                return;
+            }
+        }
+
+        const gist = params.get('gist');
+        if (gist) {
+            this._openGist(gist);
+            return;
+        }
+
+        const openFileButton = this.document.getElementById('open-file-button');
+        const openFileDialog = this.document.getElementById('open-file-dialog');
+        if (openFileButton && openFileDialog) {
+            openFileButton.addEventListener('click', () => {
+                openFileDialog.value = '';
+                openFileDialog.click();
+            });
+            openFileDialog.addEventListener('change', (e) => {
+                if (e.target && e.target.files && e.target.files.length > 0) {
+                    const files = Array.from(e.target.files);
+                    const file = files.find((file) => this._view.accept(file.name));
+                    if (file) {
+                        this._open(file, files);
+                    }
+                }
+            });
+        }
+        const githubButton = this.document.getElementById('github-button');
+        const githubLink = this.document.getElementById('logo-github');
+        if (githubButton && githubLink) {
+            githubButton.style.opacity = 1;
+            githubButton.addEventListener('click', () => {
+                this.openURL(githubLink.href);
+            });
+        }
+        this.document.addEventListener('dragover', (e) => {
+            e.preventDefault();
+        });
+        this.document.addEventListener('drop', (e) => {
+            e.preventDefault();
+        });
+        this.document.body.addEventListener('drop', (e) => {
+            e.preventDefault();
+            if (e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+                const files = Array.from(e.dataTransfer.files);
+                const file = files.find((file) => this._view.accept(file.name));
+                if (file) {
+                    this._open(file, files);
+                }
+            }
+        });
+
+        this._view.show('welcome');
+    }
+
+    environment(name) {
+        return this._environment.get(name);
+    }
+
+    error(message, detail) {
+        alert((message == 'Error' ? '' : message + ' ') + detail);
+    }
+
+    confirm(message, detail) {
+        return confirm(message + ' ' + detail);
+    }
+
+    require(id) {
+        const url = this._url(id + '.js');
+        this.window.__modules__ = this.window.__modules__ || {};
+        if (this.window.__modules__[url]) {
+            return Promise.resolve(this.window.__exports__[url]);
+        }
+        return new Promise((resolve, reject) => {
+            this.window.module = { exports: {} };
+            const script = document.createElement('script');
+            script.setAttribute('id', id);
+            script.setAttribute('type', 'text/javascript');
+            script.setAttribute('src', url);
+            script.onload = (e) => {
+                if (this.window.module && this.window.module.exports) {
+                    const exports = this.window.module.exports;
+                    delete this.window.module;
+                    this.window.__modules__[id] = exports;
+                    resolve(exports);
+                }
+                else {
+                    reject(new Error('The script \'' + e.target.src + '\' has no exports.'));
+                }
+            };
+            script.onerror = (e) => {
+                delete this.window.module;
+                reject(new Error('The script \'' + e.target.src + '\' failed to load.'));
+            };
+            this.document.head.appendChild(script);
+        });
+    }
+
+    save(name, extension, defaultPath, callback) {
+        callback(defaultPath + '.' + extension);
+    }
+
+    export(file, blob) {
+        const element = this.document.createElement('a');
+        element.download = file;
+        element.href = URL.createObjectURL(blob);
+        this.document.body.appendChild(element);
+        element.click();
+        this.document.body.removeChild(element);
+    }
+
+    request(file, encoding, base) {
+        const url = base ? (base + '/' + file) : this._url(file);
+        return this._request(url, null, encoding);
+    }
+
+    openURL(url) {
+        this.window.location = url;
+    }
+
+    exception(error, fatal) {
+        if (this._telemetry && this.window.ga && error.telemetry !== false) {
+            const description = [];
+            description.push((error && error.name ? (error.name + ': ') : '') + (error && error.message ? error.message : '(null)'));
+            if (error.stack) {
+                const match = error.stack.match(/\n {4}at (.*)\((.*)\)/);
+                if (match) {
+                    description.push(match[1] + '(' + match[2].split('/').pop() + ')');
+                }
+                else {
+                    description.push(error.stack.split('\n').shift());
+                }
+            }
+            this.window.ga('send', 'exception', {
+                exDescription: description.join(' @ '),
+                exFatal: fatal,
+                appName: this.type,
+                appVersion: this.version
+            });
+        }
+    }
+
+    screen(name) {
+        if (this._telemetry && this.window.ga) {
+            this.window.ga('send', 'screenview', {
+                screenName: name,
+                appName: this.type,
+                appVersion: this.version
+            });
+        }
+    }
+
+    event(category, action, label, value) {
+        if (this._telemetry && this.window.ga) {
+            this.window.ga('send', 'event', {
+                eventCategory: category,
+                eventAction: action,
+                eventLabel: label,
+                eventValue: value,
+                appName: this.type,
+                appVersion: this.version
+            });
+        }
+    }
+
+    _request(url, headers, encoding, timeout) {
+        return new Promise((resolve, reject) => {
+            const request = new XMLHttpRequest();
+            if (!encoding) {
+                request.responseType = 'arraybuffer';
+            }
+            if (timeout) {
+                request.timeout = timeout;
+            }
+            const error = (status) => {
+                const err = new Error("The web request failed with status code " + status + " at '" + url + "'.");
+                err.type = 'error';
+                err.url = url;
+                return err;
+            };
+            request.onload = () => {
+                if (request.status == 200) {
+                    if (request.responseType == 'arraybuffer') {
+                        resolve(new host.BrowserHost.BinaryStream(new Uint8Array(request.response)));
+                    }
+                    else {
+                        resolve(request.responseText);
+                    }
+                }
+                else {
+                    reject(error(request.status));
+                }
+            };
+            request.onerror = (e) => {
+                const err = error(request.status);
+                err.type = e.type;
+                reject(err);
+            };
+            request.ontimeout = () => {
+                request.abort();
+                const err = new Error("The web request timed out in '" + url + "'.");
+                err.type = 'timeout';
+                err.url = url;
+                reject(err);
+            };
+            request.open('GET', url, true);
+            if (headers) {
+                for (const name of Object.keys(headers)) {
+                    request.setRequestHeader(name, headers[name]);
+                }
+            }
+            request.send();
+        });
+    }
+
+    _url(file) {
+        let url = file;
+        if (this.window && this.window.location && this.window.location.href) {
+            let location = this.window.location.href.split('?').shift();
+            if (location.endsWith('.html')) {
+                location = location.split('/').slice(0, -1).join('/');
+            }
+            if (location.endsWith('/')) {
+                location = location.slice(0, -1);
+            }
+            url = location + '/' + (file.startsWith('/') ? file.substring(1) : file);
+        }
+        return url;
+    }
+
+    _openModel(url, identifier) {
+        url = url + ((/\?/).test(url) ? '&' : '?') + 'cb=' + (new Date()).getTime();
+        this._view.show('welcome spinner');
+        this._request(url).then((buffer) => {
+            const context = new host.BrowserHost.BrowserContext(this, url, identifier, buffer);
+            this._view.open(context).then(() => {
+                this.document.title = identifier || context.identifier;
+            }).catch((err) => {
+                if (err) {
+                    this._view.error(err, null, 'welcome');
+                }
+            });
+        }).catch((err) => {
+            this.error('Model load request failed.', err.message);
+            this._view.show('welcome');
+        });
+    }
+
+    _open(file, files) {
+        this._view.show('welcome spinner');
+        const context = new host.BrowserHost.BrowserFileContext(this, file, files);
+        context.open().then(() => {
+            return this._view.open(context).then((model) => {
+                this._view.show(null);
+                this.document.title = files[0].name;
+                return model;
+            });
+        }).catch((error) => {
+            this._view.error(error, null, null);
+        });
+    }
+
+    _openGist(gist) {
+        this._view.show('welcome spinner');
+        const url = 'https://api.github.com/gists/' + gist;
+        this._request(url, { 'Content-Type': 'application/json' }, 'utf-8').then((text) => {
+            const json = JSON.parse(text);
+            if (json.message) {
+                this.error('Error while loading Gist.', json.message);
+                return;
+            }
+            const key = Object.keys(json.files).find((key) => this._view.accept(json.files[key].filename));
+            if (!key) {
+                this.error('Error while loading Gist.', 'Gist does not contain a model file.');
+                return;
+            }
+            const file = json.files[key];
+            const identifier = file.filename;
+            const encoder = new TextEncoder();
+            const buffer = encoder.encode(file.content);
+            const context = new host.BrowserHost.BrowserContext(this, '', identifier, buffer);
+            this._view.open(context).then(() => {
+                this.document.title = identifier;
+            }).catch((error) => {
+                if (error) {
+                    this._view.show(error.name, error, 'welcome');
+                }
+            });
+        }).catch((err) => {
+            this._view.show('Model load request failed.', err, 'welcome');
+        });
+    }
+
+    _setCookie(name, value, days) {
+        const date = new Date();
+        date.setTime(date.getTime() + ((typeof days !== "number" ? 365 : days) * 24 * 60 * 60 * 1000));
+        document.cookie = name + "=" + value + ";path=/;expires=" + date.toUTCString();
+    }
+
+    _getCookie(name) {
+        const cookie = '; ' + document.cookie;
+        const parts = cookie.split('; ' + name + '=');
+        return parts.length < 2 ? undefined : parts.pop().split(';').shift();
+    }
+
+    _about() {
+        const self = this;
+        const eventHandler = () => {
+            this.window.removeEventListener('keydown', eventHandler);
+            self.document.body.removeEventListener('click', eventHandler);
+            self._view.show('default');
+        };
+        this.window.addEventListener('keydown', eventHandler);
+        this.document.body.addEventListener('click', eventHandler);
+        this._view.show('about');
+    }
+};
+
+host.Dropdown = class {
+
+    constructor(host, button, dropdown) {
+        this._host = host;
+        this._dropdown = this._host.document.getElementById(dropdown);
+        this._button = this._host.document.getElementById(button);
+        this._items = [];
+        this._apple = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+        this._acceleratorMap = {};
+        this._host.window.addEventListener('keydown', (e) => {
+            let code = e.keyCode;
+            code |= ((e.ctrlKey && !this._apple) || (e.metaKey && this._apple)) ? 0x0400 : 0;
+            code |= e.altKey ? 0x0200 : 0;
+            code |= e.shiftKey ? 0x0100 : 0;
+            if (code == 0x001b) { // Escape
+                this.close();
+                return;
+            }
+            const item = this._acceleratorMap[code.toString()];
+            if (item) {
+                item.click();
+                e.preventDefault();
+            }
+        });
+        this._host.document.body.addEventListener('click', (e) => {
+            if (!this._button.contains(e.target)) {
+                this.close();
+            }
+        });
+    }
+
+    add(item) {
+        const accelerator = item.accelerator;
+        if (accelerator) {
+            let cmdOrCtrl = false;
+            let alt = false;
+            let shift = false;
+            let key = '';
+            for (const part of item.accelerator.split('+')) {
+                switch (part) {
+                    case 'CmdOrCtrl': cmdOrCtrl = true; break;
+                    case 'Alt': alt = true; break;
+                    case 'Shift': shift = true; break;
+                    default: key = part; break;
+                }
+            }
+            if (key !== '') {
+                item.accelerator = {};
+                item.accelerator.text = '';
+                if (this._apple) {
+                    item.accelerator.text += alt ? '&#x2325;' : '';
+                    item.accelerator.text += shift ? '&#x21e7;' : '';
+                    item.accelerator.text += cmdOrCtrl ? '&#x2318;' : '';
+                    const keyTable = { 'Enter': '&#x23ce;', 'Up': '&#x2191;', 'Down': '&#x2193;', 'Backspace': '&#x232B;' };
+                    item.accelerator.text += keyTable[key] ? keyTable[key] : key;
+                }
+                else {
+                    const list = [];
+                    if (cmdOrCtrl) {
+                        list.push('Ctrl');
+                    }
+                    if (alt) {
+                        list.push('Alt');
+                    }
+                    if (shift) {
+                        list.push('Shift');
+                    }
+                    list.push(key);
+                    item.accelerator.text = list.join('+');
+                }
+                let code = 0;
+                switch (key) {
+                    case 'Backspace': code = 0x08; break;
+                    case 'Enter': code = 0x0D; break;
+                    case 'Up': code = 0x26; break;
+                    case 'Down': code = 0x28; break;
+                    default: code = key.charCodeAt(0); break;
+                }
+                code |= cmdOrCtrl ? 0x0400 : 0;
+                code |= alt ? 0x0200 : 0;
+                code |= shift ? 0x0100 : 0;
+                this._acceleratorMap[code.toString()] = item;
+            }
+        }
+        this._items.push(item);
+    }
+
+    toggle() {
+
+        if (this._dropdown.style.display === 'block') {
+            this.close();
+            return;
+        }
+
+        while (this._dropdown.lastChild) {
+            this._dropdown.removeChild(this._dropdown.lastChild);
+        }
+
+        for (const item of this._items) {
+            if (Object.keys(item).length > 0) {
+                const button = this._host.document.createElement('button');
+                button.innerText = (typeof item.label == 'function') ? item.label() : item.label;
+                button.addEventListener('click', () => {
+                    this.close();
+                    setTimeout(() => {
+                        item.click();
+                    }, 10);
+                });
+                this._dropdown.appendChild(button);
+                if (item.accelerator) {
+                    const accelerator = this._host.document.createElement('span');
+                    accelerator.style.float = 'right';
+                    accelerator.innerHTML = item.accelerator.text;
+                    button.appendChild(accelerator);
+                }
+            }
+            else {
+                const separator = this._host.document.createElement('div');
+                separator.setAttribute('class', 'separator');
+                this._dropdown.appendChild(separator);
+            }
+        }
+
+        this._dropdown.style.display = 'block';
+    }
+
+    close() {
+        this._dropdown.style.display = 'none';
+    }
+};
+
+host.BrowserHost.BinaryStream = class {
+
+    constructor(buffer) {
+        this._buffer = buffer;
+        this._length = buffer.length;
+        this._position = 0;
+    }
+
+    get position() {
+        return this._position;
+    }
+
+    get length() {
+        return this._length;
+    }
+
+    stream(length) {
+        const buffer = this.read(length);
+        return new host.BrowserHost.BinaryStream(buffer.slice(0));
+    }
+
+    seek(position) {
+        this._position = position >= 0 ? position : this._length + position;
+    }
+
+    skip(offset) {
+        this._position += offset;
+    }
+
+    peek(length) {
+        if (this._position === 0 && length === undefined) {
+            return this._buffer;
+        }
+        const position = this._position;
+        this.skip(length !== undefined ? length : this._length - this._position);
+        const end = this._position;
+        this.seek(position);
+        return this._buffer.subarray(position, end);
+    }
+
+    read(length) {
+        if (this._position === 0 && length === undefined) {
+            this._position = this._length;
+            return this._buffer;
+        }
+        const position = this._position;
+        this.skip(length !== undefined ? length : this._length - this._position);
+        return this._buffer.subarray(position, this._position);
+    }
+
+    byte() {
+        const position = this._position;
+        this.skip(1);
+        return this._buffer[position];
+    }
+};
+
+host.BrowserHost.BrowserFileContext = class {
+
+    constructor(host, file, blobs) {
+        this._host = host;
+        this._file = file;
+        this._blobs = {};
+        for (const blob of blobs) {
+            this._blobs[blob.name] = blob;
+        }
+    }
+
+    get identifier() {
+        return this._file.name;
+    }
+
+    get stream() {
+        return this._stream;
+    }
+
+    request(file, encoding, base) {
+        if (base !== undefined) {
+            return this._host.request(file, encoding, base);
+        }
+        const blob = this._blobs[file];
+        if (!blob) {
+            return Promise.reject(new Error("File not found '" + file + "'."));
+        }
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                resolve(encoding ? e.target.result : new host.BrowserHost.BinaryStream(new Uint8Array(e.target.result)));
+            };
+            reader.onerror = (e) => {
+                e = e || this.window.event;
+                let message = '';
+                const error = e.target.error;
+                switch(error.code) {
+                    case error.NOT_FOUND_ERR:
+                        message = "File not found '" + file + "'.";
+                        break;
+                    case error.NOT_READABLE_ERR:
+                        message = "File not readable '" + file + "'.";
+                        break;
+                    case error.SECURITY_ERR:
+                        message = "File access denied '" + file + "'.";
+                        break;
+                    default:
+                        message = error.message ? error.message : "File read '" + error.code.toString() + "' error '" + file + "'.";
+                        break;
+                }
+                reject(new Error(message));
+            };
+            if (encoding === 'utf-8') {
+                reader.readAsText(blob, encoding);
+            }
+            else {
+                reader.readAsArrayBuffer(blob);
+            }
+        });
+    }
+
+    require(id) {
+        return this._host.require(id);
+    }
+
+    exception(error, fatal) {
+        this._host.exception(error, fatal);
+    }
+
+    open() {
+        return this.request(this._file.name, null).then((stream) => {
+            this._stream = stream;
+        });
+    }
+};
+
+host.BrowserHost.BrowserContext = class {
+
+    constructor(host, url, identifier, stream) {
+        this._host = host;
+        this._stream = stream;
+        if (identifier) {
+            this._identifier = identifier;
+            this._base = url;
+            if (this._base.endsWith('/')) {
+                this._base.substring(0, this._base.length - 1);
+            }
+        }
+        else {
+            const parts = url.split('?')[0].split('/');
+            this._identifier = parts.pop();
+            this._base = parts.join('/');
+        }
+    }
+
+    get identifier() {
+        return this._identifier;
+    }
+
+    get stream() {
+        return this._stream;
+    }
+
+    request(file, encoding, base) {
+        return this._host.request(file, encoding, base === undefined ? this._base : base);
+    }
+
+    require(id) {
+        return this._host.require(id);
+    }
+
+    exception(error, fatal) {
+        this._host.exception(error, fatal);
+    }
+};
+
+if (typeof TextDecoder === "undefined") {
+    TextDecoder = function TextDecoder(encoding) {
+        this._encoding = encoding;
+    };
+    TextDecoder.prototype.decode = function decode(buffer) {
+        let result = '';
+        const length = buffer.length;
+        let i = 0;
+        switch (this._encoding) {
+            case 'utf-8':
+                while (i < length) {
+                    const c = buffer[i++];
+                    switch(c >> 4) {
+                        case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7: {
+                            result += String.fromCharCode(c);
+                            break;
+                        }
+                        case 12: case 13: {
+                            const c2 = buffer[i++];
+                            result += String.fromCharCode(((c & 0x1F) << 6) | (c2 & 0x3F));
+                            break;
+                        }
+                        case 14: {
+                            const c2 = buffer[i++];
+                            const c3 = buffer[i++];
+                            result += String.fromCharCode(((c & 0x0F) << 12) | ((c2 & 0x3F) << 6) | ((c3 & 0x3F) << 0));
+                            break;
+                        }
+                        case 15: {
+                            const c2 = buffer[i++];
+                            const c3 = buffer[i++];
+                            const c4 = buffer[i++];
+                            result += String.fromCodePoint(((c & 0x07) << 18) | ((c2 & 0x3F) << 12) | ((c3 & 0x3F) << 6) | (c4 & 0x3F));
+                            break;
+                        }
+                        default: {
+                            break;
+                        }
+                    }
+                }
+                break;
+            case 'ascii':
+                while (i < length) {
+                    result += String.fromCharCode(buffer[i++]);
+                }
+                break;
+            default:
+                break;
+        }
+        return result;
+    };
+}
+
+if (typeof TextEncoder === 'undefined') {
+    TextEncoder = function TextEncoder() {
+    };
+    TextEncoder.prototype.encode = function encode(str) {
+        "use strict";
+        const length = str.length;
+        let resPos = -1;
+        const resArr = typeof Uint8Array === "undefined" ? new Array(length * 2) : new Uint8Array(length * 3);
+        for (let point = 0, nextcode = 0, i = 0; i !== length; ) {
+            point = str.charCodeAt(i);
+            i += 1;
+            if (point >= 0xD800 && point <= 0xDBFF) {
+                if (i === length) {
+                    resArr[resPos += 1] = 0xef; resArr[resPos += 1] = 0xbf;
+                    resArr[resPos += 1] = 0xbd; break;
+                }
+                nextcode = str.charCodeAt(i);
+                if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) {
+                    point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000;
+                    i += 1;
+                    if (point > 0xffff) {
+                        resArr[resPos += 1] = (0x1e<<3) | (point>>>18);
+                        resArr[resPos += 1] = (0x2<<6) | ((point>>>12)&0x3f);
+                        resArr[resPos += 1] = (0x2<<6) | ((point>>>6)&0x3f);
+                        resArr[resPos += 1] = (0x2<<6) | (point&0x3f);
+                        continue;
+                    }
+                }
+                else {
+                    resArr[resPos += 1] = 0xef; resArr[resPos += 1] = 0xbf;
+                    resArr[resPos += 1] = 0xbd; continue;
+                }
+            }
+            if (point <= 0x007f) {
+                resArr[resPos += 1] = (0x0<<7) | point;
+            }
+            else if (point <= 0x07ff) {
+                resArr[resPos += 1] = (0x6<<5) | (point>>>6);
+                resArr[resPos += 1] = (0x2<<6) | (point&0x3f);
+            }
+            else {
+                resArr[resPos += 1] = (0xe<<4) | (point>>>12);
+                resArr[resPos += 1] = (0x2<<6) | ((point>>>6)&0x3f);
+                resArr[resPos += 1] = (0x2<<6) | (point&0x3f);
+            }
+        }
+        if (typeof Uint8Array!=="undefined") {
+            return new Uint8Array(resArr.buffer.slice(0, resPos+1));
+        }
+        else {
+            return resArr.length === resPos + 1 ? resArr : resArr.slice(0, resPos + 1);
+        }
+    };
+    TextEncoder.prototype.toString = function() {
+        return "[object TextEncoder]";
+    };
+    try {
+        Object.defineProperty(TextEncoder.prototype,"encoding", {
+            get:function() {
+                if (Object.prototype.isPrototypeOf.call(TextEncoder.prototype, this)) {
+                    return"utf-8";
+                }
+                else {
+                    throw new TypeError("Illegal invocation");
+                }
+            }
+        });
+    }
+    catch (e) {
+        TextEncoder.prototype.encoding = "utf-8";
+    }
+    if (typeof Symbol !== "undefined") {
+        TextEncoder.prototype[Symbol.toStringTag] = "TextEncoder";
+    }
+}
+
+if (typeof URLSearchParams === 'undefined') {
+    URLSearchParams = function URLSearchParams(search) {
+        const decode = (str) => {
+            return str.replace(/[ +]/g, '%20').replace(/(%[a-f0-9]{2})+/ig, (match) => { return decodeURIComponent(match); });
+        };
+        this._dict = {};
+        if (typeof search === 'string') {
+            search = search.indexOf('?') === 0 ? search.substring(1) : search;
+            const properties = search.split('&');
+            for (const property of properties) {
+                const index = property.indexOf('=');
+                const name = (index > -1) ? decode(property.substring(0, index)) : decode(property);
+                const value = (index > -1) ? decode(property.substring(index + 1)) : '';
+                if (!Object.prototype.hasOwnProperty.call(this._dict, name)) {
+                    this._dict[name] = [];
+                }
+                this._dict[name].push(value);
+            }
+        }
+    };
+    URLSearchParams.prototype.get = function(name) {
+        return Object.prototype.hasOwnProperty.call(this._dict, name) ? this._dict[name][0] : null;
+    };
+}
+
+if (!HTMLCanvasElement.prototype.toBlob) {
+    HTMLCanvasElement.prototype.toBlob = function(callback, type, quality) {
+        const canvas = this;
+        setTimeout(function() {
+            const data = atob(canvas.toDataURL(type, quality).split(',')[1]);
+            const length = data.length;
+            const buffer = new Uint8Array(length);
+            for (let i = 0; i < length; i++) {
+                buffer[i] = data.charCodeAt(i);
+            }
+            callback(new Blob([ buffer ], { type: type || 'image/png' }));
+        });
+    };
+}
+
+if (!('scrollBehavior' in window.document.documentElement.style)) {
+    const __scrollTo__ = Element.prototype.scrollTo;
+    Element.prototype.scrollTo = function(options) {
+        if (options === undefined) {
+            return;
+        }
+        if (options === null || typeof options !== 'object' || options.behavior === undefined || arguments[0].behavior === 'auto' || options.behavior === 'instant') {
+            if (__scrollTo__) {
+                __scrollTo__.apply(this, arguments);
+            }
+            return;
+        }
+        const now = () => {
+            return window.performance && window.performance.now ? window.performance.now() : Date.now();
+        };
+        const ease = (k) => {
+            return 0.5 * (1 - Math.cos(Math.PI * k));
+        };
+        const step = (context) => {
+            const value = ease(Math.min((now() - context.startTime) / 468, 1));
+            const x = context.startX + (context.x - context.startX) * value;
+            const y = context.startY + (context.y - context.startY) * value;
+            context.element.scrollLeft = x;
+            context.element.scrollTop = y;
+            if (x !== context.x || y !== context.y) {
+                window.requestAnimationFrame(step.bind(window, context));
+            }
+        };
+        const context = {
+            element: this,
+            x: typeof options.left === 'undefined' ? this.scrollLeft : ~~options.left,
+            y: typeof options.top === 'undefined' ? this.scrollTop : ~~options.top,
+            startX: this.scrollLeft,
+            startY: this.scrollTop,
+            startTime: now()
+        };
+        step(context);
+    };
+}
+
+window.addEventListener('load', () => {
+    window.__view__ = new view.View(new host.BrowserHost());
+});
diff --git a/media/CircleEditor/external/json.js b/media/external/netron/json.js
similarity index 100%
rename from media/CircleEditor/external/json.js
rename to media/external/netron/json.js
diff --git a/media/CircleEditor/external/protobuf.js b/media/external/netron/protobuf.js
similarity index 100%
rename from media/CircleEditor/external/protobuf.js
rename to media/external/netron/protobuf.js
diff --git a/media/CircleEditor/external/python.js b/media/external/netron/python.js
similarity index 100%
rename from media/CircleEditor/external/python.js
rename to media/external/netron/python.js
diff --git a/media/CircleEditor/external/tar.js b/media/external/netron/tar.js
similarity index 100%
rename from media/CircleEditor/external/tar.js
rename to media/external/netron/tar.js
diff --git a/media/CircleEditor/external/text.js b/media/external/netron/text.js
similarity index 100%
rename from media/CircleEditor/external/text.js
rename to media/external/netron/text.js
diff --git a/media/external/netron/view-grapher.css b/media/external/netron/view-grapher.css
new file mode 100644
index 00000000..0e44895f
--- /dev/null
+++ b/media/external/netron/view-grapher.css
@@ -0,0 +1,136 @@
+
+.node path { stroke: #333; fill: none; stroke-width: 1px; }
+.node line { stroke: #333; fill: none; stroke-width: 1px; }
+
+.node-item path { stroke-width: 0; stroke: #000; fill: #fff; }
+.node-item text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 11px; text-rendering: geometricPrecision; }
+
+.node-item-function path { fill: #fff; }
+.node-item-function text { fill: #000; }
+.node-item-function:hover { cursor: pointer; }
+.node-item-function:hover path { fill: #eee; }
+
+.node-item-type path { fill: #000; }
+.node-item-type text { fill: #fff; }
+.node-item-type:hover { cursor: pointer; }
+.node-item-type:hover path { fill: #fff; }
+.node-item-type:hover text { fill: #000; }
+
+.node-item-type-constant path { fill: #eee; }
+.node-item-type-constant text { fill: #000; }
+.node-item-type-constant:hover path { fill: #fff; }
+
+.node-item-type-control path { fill: #eee; }
+.node-item-type-control text { fill: #000; }
+.node-item-type-control:hover path { fill: #fff; }
+
+.node-item-type-layer path { fill: rgb(51, 85, 136); }
+.node-item-type-wrapper path { fill: rgb(238, 238, 238); }
+.node-item-type-wrapper text { fill: rgb(0, 0, 0) }
+.node-item-type-activation path { fill: rgb(112, 41, 33); }
+.node-item-type-pool path { fill: rgb(51, 85, 51); }
+.node-item-type-normalization path { fill: rgb(51, 85, 68); }
+.node-item-type-dropout path { fill: rgb(69, 71, 112); }
+.node-item-type-shape path { fill: rgb(108, 79, 71); }
+.node-item-type-tensor path { fill: rgb(89, 66, 59); }
+.node-item-type-transform path { fill: rgb(51, 85, 68); }
+.node-item-type-data path { fill: rgb(85, 85, 85); }
+.node-item-type-quantization path { fill: rgb(80, 40, 0); }
+.node-item-type-custom path { fill: rgb(128, 128, 128); }
+
+.node-item-input path { fill: #fff; }
+.node-item-input:hover { cursor: pointer; }
+.node-item-input:hover path { fill: #fff; }
+
+.node-item-constant path { fill: #eee; }
+.node-item-constant:hover { cursor: pointer; }
+.node-item-constant:hover path { fill: #fff; }
+
+.node-item-undefined path { fill: #f00; }
+.node-item-undefined:hover { cursor: pointer; }
+.node-item-undefined:hover path { fill: #fff; }
+
+.node-attribute:hover { cursor: pointer; }
+.node-attribute text { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 9px; font-weight: normal; text-rendering: geometricPrecision; }
+.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: pointer; }
+.graph-item-input:hover path { fill: #fff; }
+
+.graph-item-output path { fill: #eee; }
+.graph-item-output:hover { cursor: pointer; }
+.graph-item-output:hover path { fill: #fff; }
+
+.edge-label { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "PingFang SC"; font-size: 10px; }
+.edge-path { stroke: #000; stroke-width: 1px; fill: none; marker-end: url("#arrowhead-vee"); }
+#arrowhead-vee { fill: #000; }
+.edge-path-control-dependency { stroke-dasharray: 3, 2; }
+
+.cluster rect { stroke: #000; fill: #000; fill-opacity: 0.02; stroke-opacity: 0.06; stroke-width: 1px; }
+
+.select .node.border { stroke: #e00; stroke-width: 2px; }
+.select.edge-path { stroke: #e00; stroke-width: 2px; marker-end: url("#arrowhead-vee-select"); }
+#arrowhead-vee-select { fill: #e00; }
+
+@keyframes pulse { from { stroke-dashoffset: 100px; } to { stroke-dashoffset: 0; } }
+
+@media (prefers-color-scheme: dark) {
+
+    .edge-label { fill: #b2b2b2; }
+    .edge-path { stroke: #888; }
+    #arrowhead-vee { fill: #888; }
+
+    .node path { stroke: #1d1d1d; }
+    .node line { stroke: #1d1d1d; }
+
+    .select .node.border { stroke: #b00; }
+    .select.edge-path { stroke: #b00; }
+    #arrowhead-vee-select { fill: #b00 }
+
+    .node-item-function path { fill: #404040; }
+    .node-item-function text { fill: #dfdfdfdf; }
+    .node-item-function:hover { cursor: pointer; }
+    .node-item-function:hover path { fill: #666666; }
+    
+    .node-item-type path { fill: #303030; }
+    .node-item-type text { fill: #dfdfdf; }
+    .node-item-type:hover { cursor: pointer; }
+    .node-item-type:hover path { fill: #808080; }
+    .node-item-type:hover text { fill: #dfdfdf; }
+
+    .node-item path { stroke: #fff; }
+    .node-item text { fill: #dfdfdf; }
+
+    .node-attribute text { fill: #b2b2b2; }
+    .node-attribute path { fill: #2d2d2d; }
+    .node-attribute:hover path { fill: #666666; }
+
+    .graph-item-input path { fill: #404040; }
+    .graph-item-input:hover { cursor: pointer; }
+    .graph-item-input:hover path { fill: #666666; }
+
+    .graph-item-output path { fill: #404040; }
+    .graph-item-output:hover { cursor: pointer; }
+    .graph-item-output:hover path { fill: #666666; }
+
+    .node-item-input path { fill: #404040; }
+    .node-item-input:hover path { fill: #666666; }
+    .node-item-constant path { fill: #4b4b4b; }
+    .node-item-constant:hover path { fill: #666666; }
+
+    .node-item-type-layer path { fill: rgba(51, 85, 136, 0.7); }
+    .node-item-type-activation path { fill: rgba(75, 27, 22, 0.7); }
+    .node-item-type-activation path { fill: rgba(75, 27, 22, 0.7); }
+    .node-item-type-pool path { fill: rgba(51, 85, 51, 0.7); }
+    .node-item-type-pool path { fill: rgba(51, 85, 51, 0.7); }
+    .node-item-type-normalization path { fill: rgba(51, 85, 68, 0.7); }
+    .node-item-type-dropout path { fill: rgba(69, 71, 112, 0.7); }
+    .node-item-type-shape path { fill: rgba(108, 79, 71, 0.7); }
+    .node-item-type-tensor path { fill: rgba(89, 66, 59, 0.7); }
+    .node-item-type-transform path { fill: rgba(51, 85, 68, 0.7); }
+    .node-item-type-data path { fill: rgba(85, 85, 85, 0.7); }
+    .node-item-type-quantization path { fill: rgb(80, 40, 0, 0.7); }
+    .node-item-type-custom path { fill: rgb(64, 64, 64, 0.7); }
+}
diff --git a/media/CircleEditor/view-grapher.js b/media/external/netron/view-grapher.js
similarity index 73%
rename from media/CircleEditor/view-grapher.js
rename to media/external/netron/view-grapher.js
index 769d2349..0cbd8722 100644
--- a/media/CircleEditor/view-grapher.js
+++ b/media/external/netron/view-grapher.js
@@ -1,49 +1,9 @@
-/*
- * Copyright (c) 2022 Samsung Electronics Co., Ltd. All Rights Reserved
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *  http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/*
- * MIT License
- *
- * Copyright (c) Lutz Roeder
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-// This file referenced
-// https://github.com/lutzroeder/netron/blob/ae449ff55642636e6a1eef092eda34ffcba1c684/source/view-grapher.js
 
 var grapher = grapher || {};
 var dagre = dagre || require('./dagre');
 
 grapher.Graph = class {
+
     constructor(compound, options) {
         this._isCompound = compound;
         this._options = options;
@@ -63,8 +23,9 @@ grapher.Graph = class {
         const value = this._nodes.get(key);
         if (value) {
             value.label = node;
-        } else {
-            this._nodes.set(key, {v: key, label: node});
+        }
+        else {
+            this._nodes.set(key, { v: key, label: node });
             if (this._isCompound) {
                 this._parent[key] = '\x00';
                 this._children[key] = {};
@@ -82,19 +43,18 @@ grapher.Graph = class {
         }
         const key = edge.v + ':' + edge.w;
         if (!this._edges.has(key)) {
-            this._edges.set(key, {v: edge.v, w: edge.w, label: edge});
+            this._edges.set(key, { v: edge.v, w: edge.w, label: edge });
         }
     }
 
     setParent(node, parent) {
         if (!this._isCompound) {
-            throw new Error('Cannot set parent in a non-compound graph');
+            throw new Error("Cannot set parent in a non-compound graph");
         }
-        parent += '';
+        parent += "";
         for (let ancestor = parent; ancestor; ancestor = this.parent(ancestor)) {
             if (ancestor === node) {
-                throw new Error(
-                    'Setting ' + parent + ' as parent of ' + node + ' would create a cycle');
+                throw new Error("Setting " + parent + " as parent of " + node + " would create a cycle");
             }
         }
         delete this._children[this._parent[node]][node];
@@ -136,9 +96,11 @@ grapher.Graph = class {
             if (children) {
                 return Object.keys(children);
             }
-        } else if (key === '\x00') {
+        }
+        else if (key === '\x00') {
             return this.nodes.keys();
-        } else if (this.hasNode(key)) {
+        }
+        else if (this.hasNode(key)) {
             return [];
         }
         return null;
@@ -176,18 +138,18 @@ grapher.Graph = class {
             element.appendChild(markerPath);
             return element;
         };
-        edgePathGroupDefs.appendChild(marker('arrowhead-vee'));
-        edgePathGroupDefs.appendChild(marker('arrowhead-vee-select'));
+        edgePathGroupDefs.appendChild(marker("arrowhead-vee"));
+        edgePathGroupDefs.appendChild(marker("arrowhead-vee-select"));
 
         for (const nodeId of this.nodes.keys()) {
             const node = this.node(nodeId);
-            if (this.children(nodeId).length === 0) {
+            if (this.children(nodeId).length == 0) {
                 // node
                 node.label.build(document, nodeGroup);
-            } else {
+            }
+            else {
                 // cluster
-                node.label.rectangle =
-                    document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+                node.label.rectangle = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                 if (node.label.rx) {
                     node.label.rectangle.setAttribute('rx', node.rx);
                 }
@@ -210,16 +172,16 @@ grapher.Graph = class {
         dagre.layout(this);
         for (const nodeId of this.nodes.keys()) {
             const node = this.node(nodeId);
-            if (this.children(nodeId).length === 0) {
+            if (this.children(nodeId).length == 0) {
                 // node
                 node.label.update();
-            } else {
+            }
+            else {
                 // cluster
                 const node = this.node(nodeId);
-                node.label.element.setAttribute(
-                    'transform', 'translate(' + node.label.x + ',' + node.label.y + ')');
-                node.label.rectangle.setAttribute('x', -node.label.width / 2);
-                node.label.rectangle.setAttribute('y', -node.label.height / 2);
+                node.label.element.setAttribute('transform', 'translate(' + node.label.x + ',' + node.label.y + ')');
+                node.label.rectangle.setAttribute('x', - node.label.width / 2);
+                node.label.rectangle.setAttribute('y', - node.label.height / 2 );
                 node.label.rectangle.setAttribute('width', node.label.width);
                 node.label.rectangle.setAttribute('height', node.label.height);
             }
@@ -231,6 +193,7 @@ grapher.Graph = class {
 };
 
 grapher.Node = class {
+
     constructor() {
         this._blocks = [];
     }
@@ -259,16 +222,18 @@ grapher.Node = class {
             this.element.setAttribute('id', this.id);
         }
         this.element.setAttribute('class', this.class ? 'node ' + this.class : 'node');
-            this.element.style.opacity = 0; parent.appendChild(this.element);
-            this.border = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            this.border.setAttribute('class', ['node', 'border'].join(' '));
-            for (let i = 0; i < this._blocks.length; i++) {
-                const block = this._blocks[i];
-                block.first = i === 0;
-                block.last = i === this._blocks.length - 1;
-                block.build(document, this.element);
-            } this.element.appendChild(this.border);
-            this.layout();
+        this.element.style.opacity = 0;
+        parent.appendChild(this.element);
+        this.border = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        this.border.setAttribute('class', [ 'node', 'border' ].join(' '));
+        for (let i = 0; i < this._blocks.length; i++) {
+            const block = this._blocks[i];
+            block.first = i === 0;
+            block.last = i === this._blocks.length - 1;
+            block.build(document, this.element);
+        }
+        this.element.appendChild(this.border);
+        this.layout();
     }
 
     layout() {
@@ -277,20 +242,17 @@ grapher.Node = class {
         for (let i = 0; i < this._blocks.length; i++) {
             const block = this._blocks[i];
             block.y = height;
-            block.update(this.element, height, width, i === 0, i === this._blocks.length - 1);
+            block.update(this.element, height, width, i == 0, i == this._blocks.length - 1);
             height = height + block.height;
         }
-        this.border.setAttribute(
-            'd', grapher.Node.roundedRect(0, 0, width, height, true, true, true, true));
+        this.border.setAttribute('d', grapher.Node.roundedRect(0, 0, width, height, true, true, true, true));
         const nodeBox = this.element.getBBox();
         this.width = nodeBox.width;
         this.height = nodeBox.height;
     }
 
     update() {
-        this.element.setAttribute(
-            'transform',
-            'translate(' + (this.x - (this.width / 2)) + ',' + (this.y - (this.height / 2)) + ')');
+        this.element.setAttribute('transform', 'translate(' + (this.x - (this.width / 2)) + ',' + (this.y - (this.height / 2)) + ')');
         this.element.style.opacity = 1;
     }
 
@@ -300,15 +262,21 @@ grapher.Node = class {
         r2 = r2 ? radius : 0;
         r3 = r3 ? radius : 0;
         r4 = r4 ? radius : 0;
-        return 'M' + (x + r1) + ',' + y + 'h' + (width - r1 - r2) + 'a' + r2 + ',' + r2 +
-            ' 0 0 1 ' + r2 + ',' + r2 + 'v' + (height - r2 - r3) + 'a' + r3 + ',' + r3 + ' 0 0 1 ' +
-            -r3 + ',' + r3 + 'h' + (r3 + r4 - width) + 'a' + r4 + ',' + r4 + ' 0 0 1 ' + -r4 + ',' +
-            -r4 + 'v' + (-height + r4 + r1) + 'a' + r1 + ',' + r1 + ' 0 0 1 ' + r1 + ',' + -r1 +
-            'z';
+        return "M" + (x + r1) + "," + y +
+            "h" + (width - r1 - r2) +
+            "a" + r2 + "," + r2 + " 0 0 1 " + r2 + "," + r2 +
+            "v" + (height - r2 - r3) +
+            "a" + r3 + "," + r3 + " 0 0 1 " + -r3 + "," + r3 +
+            "h" + (r3 + r4 - width) +
+            "a" + r4 + "," + r4 + " 0 0 1 " + -r4 + "," + -r4 +
+            'v' + (-height + r4 + r1) +
+            "a" + r1 + "," + r1 + " 0 0 1 " + r1 + "," + -r1 +
+            "z";
     }
 };
 
 grapher.Node.Header = class {
+
     constructor() {
         this._entries = [];
     }
@@ -344,9 +312,10 @@ grapher.Node.Header = class {
         const dx = width - this.width;
         for (let i = 0; i < this._entries.length; i++) {
             const entry = this._entries[i];
-            if (i === 0) {
+            if (i == 0) {
                 entry.width = entry.width + dx;
-            } else {
+            }
+            else {
                 entry.x = entry.x + dx;
                 entry.tx = entry.tx + dx;
             }
@@ -355,18 +324,17 @@ grapher.Node.Header = class {
         for (let i = 0; i < this._entries.length; i++) {
             const entry = this._entries[i];
             entry.element.setAttribute('transform', 'translate(' + entry.x + ',' + entry.y + ')');
-            const r1 = i === 0 && this.first;
-            const r2 = i === this._entries.length - 1 && this.first;
-            const r3 = i === this._entries.length - 1 && this.last;
-            const r4 = i === 0 && this.last;
-            entry.path.setAttribute(
-                'd', grapher.Node.roundedRect(0, 0, entry.width, entry.height, r1, r2, r3, r4));
+            const r1 = i == 0 && this.first;
+            const r2 = i == this._entries.length - 1 && this.first;
+            const r3 = i == this._entries.length - 1 && this.last;
+            const r4 = i == 0 && this.last;
+            entry.path.setAttribute('d', grapher.Node.roundedRect(0, 0, entry.width, entry.height, r1, r2, r3, r4));
             entry.text.setAttribute('x', 6);
             entry.text.setAttribute('y', entry.ty);
         }
         for (let i = 0; i < this._entries.length; i++) {
             const entry = this._entries[i];
-            if (i !== 0) {
+            if (i != 0) {
                 const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                 line.setAttribute('class', 'node');
                 line.setAttribute('x1', entry.x);
@@ -387,6 +355,7 @@ grapher.Node.Header = class {
 };
 
 grapher.Node.Header.Entry = class {
+
     constructor(id, classList, content, tooltip, handler) {
         this.id = id;
         this.classList = classList;
@@ -418,7 +387,7 @@ grapher.Node.Header.Entry = class {
         this.text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
         this.element.appendChild(this.path);
         this.element.appendChild(this.text);
-        const classList = ['node-item'];
+        const classList = [ 'node-item' ];
         if (this.classList) {
             classList.push(...this.classList);
         }
@@ -446,6 +415,7 @@ grapher.Node.Header.Entry = class {
 };
 
 grapher.Node.List = class {
+
     constructor() {
         this._items = [];
         this.events = {};
@@ -502,12 +472,11 @@ grapher.Node.List = class {
             }
             const name = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
             name.textContent = item.name;
-            if (item.separator.trim() !== '=') {
+            if (item.separator.trim() != '=') {
                 name.style.fontWeight = 'bold';
             }
             text.appendChild(name);
-            const textValueElement =
-                document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
+            const textValueElement = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
             textValueElement.textContent = item.separator + item.value;
             text.appendChild(textValueElement);
             const size = text.getBBox();
@@ -528,10 +497,7 @@ grapher.Node.List = class {
 
     update(parent, top, width) {
         this.element.setAttribute('transform', 'translate(0,' + this.y + ')');
-        this.background.setAttribute(
-            'd',
-            grapher.Node.roundedRect(
-                0, 0, width, this.height, this.first, this.first, this.last, this.last));
+        this.background.setAttribute('d', grapher.Node.roundedRect(0, 0, width, this.height, this.first, this.first, this.last, this.last));
         if (this.line) {
             this.line.setAttribute('x1', 0);
             this.line.setAttribute('x2', width);
@@ -542,6 +508,7 @@ grapher.Node.List = class {
 };
 
 grapher.Node.List.Item = class {
+
     constructor(id, name, value, tooltip, separator) {
         this.id = id;
         this.name = name;
@@ -552,17 +519,21 @@ grapher.Node.List.Item = class {
 };
 
 grapher.Node.Canvas = class {
+
     constructor() {
         this.width = 0;
         this.height = 0;
     }
 
-    build(/* document, parent */) {}
+    build(/* document, parent */) {
+    }
 
-    update(/* parent, top, width , first, last */) {}
+    update(/* parent, top, width , first, last */) {
+    }
 };
 
 grapher.Edge = class {
+
     constructor(from, to) {
         this.from = from;
         this.to = to;
@@ -581,34 +552,32 @@ grapher.Edge = class {
             this.element.setAttribute('id', this.id);
         }
         this.element.setAttribute('class', this.class ? 'edge-path ' + this.class : 'edge-path');
-            edgePathGroupElement.appendChild(this.element); if (this.label) {
-                const tspan = createElement('tspan');
-                tspan.setAttribute('xml:space', 'preserve');
-                tspan.setAttribute('dy', '1em');
-                tspan.setAttribute('x', '1');
-                tspan.appendChild(document.createTextNode(this.label));
-                this.labelElement = createElement('text');
-                this.labelElement.appendChild(tspan);
-                this.labelElement.style.opacity = 0;
-                this.labelElement.setAttribute('class', 'edge-label');
-                if (this.id) {
-                    this.labelElement.setAttribute('id', 'edge-label-' + this.id);
-                }
-                edgeLabelGroupElement.appendChild(this.labelElement);
-                const edgeBox = this.labelElement.getBBox();
-                this.width = edgeBox.width;
-                this.height = edgeBox.height;
+        edgePathGroupElement.appendChild(this.element);
+        if (this.label) {
+            const tspan = createElement('tspan');
+            tspan.setAttribute('xml:space', 'preserve');
+            tspan.setAttribute('dy', '1em');
+            tspan.setAttribute('x', '1');
+            tspan.appendChild(document.createTextNode(this.label));
+            this.labelElement = createElement('text');
+            this.labelElement.appendChild(tspan);
+            this.labelElement.style.opacity = 0;
+            this.labelElement.setAttribute('class', 'edge-label');
+            if (this.id) {
+                this.labelElement.setAttribute('id', 'edge-label-' + this.id);
             }
+            edgeLabelGroupElement.appendChild(this.labelElement);
+            const edgeBox = this.labelElement.getBBox();
+            this.width = edgeBox.width;
+            this.height = edgeBox.height;
+        }
     }
 
     update() {
         const edgePath = grapher.Edge._computeCurvePath(this, this.from, this.to);
         this.element.setAttribute('d', edgePath);
         if (this.labelElement) {
-            this.labelElement.setAttribute(
-                'transform',
-                'translate(' + (this.x - (this.width / 2)) + ',' + (this.y - (this.height / 2)) +
-                    ')');
+            this.labelElement.setAttribute('transform', 'translate(' + (this.x - (this.width / 2)) + ',' + (this.y - (this.height / 2)) + ')');
             this.labelElement.style.opacity = 1;
         }
     }
@@ -636,18 +605,23 @@ grapher.Edge = class {
             }
             sx = dy === 0 ? 0 : h * dx / dy;
             sy = h;
-        } else {
+        }
+        else {
             if (dx < 0) {
                 w = -w;
             }
             sx = w;
             sy = dx === 0 ? 0 : w * dy / dx;
         }
-        return {x: x + sx, y: y + sy};
+        return {
+            x: x + sx,
+            y: y + sy
+        };
     }
 };
 
 grapher.Edge.Curve = class {
+
     constructor(points) {
         this._path = new grapher.Edge.Path();
         this._x0 = NaN;
@@ -690,7 +664,8 @@ grapher.Edge.Curve = class {
                 this._state = 1;
                 if (this._line) {
                     this._path.lineTo(x, y);
-                } else {
+                }
+                else {
                     this._path.moveTo(x, y);
                 }
                 break;
@@ -714,13 +689,18 @@ grapher.Edge.Curve = class {
 
     curve(x, y) {
         this._path.bezierCurveTo(
-            (2 * this._x0 + this._x1) / 3, (2 * this._y0 + this._y1) / 3,
-            (this._x0 + 2 * this._x1) / 3, (this._y0 + 2 * this._y1) / 3,
-            (this._x0 + 4 * this._x1 + x) / 6, (this._y0 + 4 * this._y1 + y) / 6);
+            (2 * this._x0 + this._x1) / 3,
+            (2 * this._y0 + this._y1) / 3,
+            (this._x0 + 2 * this._x1) / 3,
+            (this._y0 + 2 * this._y1) / 3,
+            (this._x0 + 4 * this._x1 + x) / 6,
+            (this._y0 + 4 * this._y1 + y) / 6
+        );
     }
 };
 
 grapher.Edge.Path = class {
+
     constructor() {
         this._x0 = null;
         this._y0 = null;
@@ -730,23 +710,22 @@ grapher.Edge.Path = class {
     }
 
     moveTo(x, y) {
-        this._data += 'M' + (this._x0 = this._x1 = +x) + ',' + (this._y0 = this._y1 = +y);
+        this._data += "M" + (this._x0 = this._x1 = +x) + "," + (this._y0 = this._y1 = +y);
     }
 
     lineTo(x, y) {
-        this._data += 'L' + (this._x1 = +x) + ',' + (this._y1 = +y);
+        this._data += "L" + (this._x1 = +x) + "," + (this._y1 = +y);
     }
 
     bezierCurveTo(x1, y1, x2, y2, x, y) {
-        this._data += 'C' + (+x1) + ',' + (+y1) + ',' + (+x2) + ',' + (+y2) + ',' +
-            (this._x1 = +x) + ',' + (this._y1 = +y);
+        this._data += "C" + (+x1) + "," + (+y1) + "," + (+x2) + "," + (+y2) + "," + (this._x1 = +x) + "," + (this._y1 = +y);
     }
 
     closePath() {
         if (this._x1 !== null) {
             this._x1 = this._x0;
             this._y1 = this._y0;
-            this._data += 'Z';
+            this._data += "Z";
         }
     }
 
@@ -759,4 +738,4 @@ if (typeof module !== 'undefined' && typeof module.exports === 'object') {
     module.exports.Graph = grapher.Graph;
     module.exports.Node = grapher.Node;
     module.exports.Edge = grapher.Edge;
-}
+}
\ No newline at end of file
diff --git a/media/external/netron/view-sidebar.css b/media/external/netron/view-sidebar.css
new file mode 100644
index 00000000..340a8b54
--- /dev/null
+++ b/media/external/netron/view-sidebar.css
@@ -0,0 +1,89 @@
+
+.sidebar { font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif; font-size: 12px; height: 100%; width: 0; position: fixed; transition: 0.2s; z-index: 1; top: 0; right: 0; background-color: #ececec; color: #242424; overflow: hidden; border-left: 1px solid #ccc; }
+.sidebar-title { font-weight: bold; font-size: 12px; letter-spacing: 0.5px; height: 20px; margin: 0; padding: 20px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
+.sidebar-closebutton { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #777777; opacity: 1.0; display: block; transition: 0.2s; position: absolute; top: 0; right: 15px; margin-left: 50px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
+.sidebar-closebutton:hover { color: #242424; }
+.sidebar-content { padding-left: 20px; padding-right: 20px; margin-bottom: 20px; overflow-y: auto; height: calc(100vh - 60px); }
+
+.sidebar-view-title { font-weight: bold; font-size: 11px; line-height: 1.25; border-bottom: 1px solid #ececec; padding-bottom: 0.3em; margin-top: 0; margin-bottom: 16px; color: #333; user-select: none; -webkit-user-select: none; -moz-user-select: none; cursor: default; }
+.sidebar-view-title-button { display: inline-block; color: #888; text-align: center; vertical-align: middle; font-weight: bold; width: 12px; height: 12px; font-size: 10px; line-height: 12px; border-radius: 50%; transform: translateY(-1px); padding: 1px; background: transparent; border: 1px solid #aaa; text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
+.sidebar-view-title-button:hover { color: #333; border: 1px solid #333; }
+.sidebar-view-header { font-weight: bold; font-size: 11px; text-transform: uppercase; line-height: 1.25; margin-top: 16px; margin-bottom: 16px; border-bottom: 1px solid #ececec; display: block; user-select: none; -webkit-user-select: none; -moz-user-select: none; cursor: default; }
+.sidebar-view-item { margin-bottom: 0px; display: block; }
+.sidebar-view-item-name { float: left; font-size: 11px; min-width: 95px; max-width: 95px; padding-right: 5px; padding-top: 7px; display: block; }
+.sidebar-view-item-name input { color: #777; font-family: inherit; font-size: inherit; color: inherit; background-color: inherit; width: 100%; text-align: right; margin: 0; padding: 0; border: 0; outline: none; text-overflow: ellipsis; }
+.sidebar-view-item-value-list { margin: 0; margin-left: 105px; overflow: hidden; display: block; padding: 0; }
+.sidebar-view-item-value { font-size: 11px; background-color: #fcfcfc; border-radius: 2px; border: 1px solid #fcfcfc; margin-top: 3px; margin-bottom: 3px; overflow: auto; }
+.sidebar-view-item-value-dark { background-color: #f8f8f8; border: 1px solid #f8f8f8; }
+.sidebar-view-item-value b { font-weight: bold; }
+.sidebar-view-item-value code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; overflow: auto; white-space: pre-wrap; word-wrap: break-word; }
+.sidebar-view-item-value pre { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0; overflow: auto; white-space: pre; word-wrap: normal; display: block; }
+.sidebar-view-item-value-line { padding: 4px 6px 4px 6px; }
+.sidebar-view-item-value-line-link { padding: 4px 6px 4px 6px; cursor: default; }
+.sidebar-view-item-value-line-link:hover { text-decoration: underline; }
+.sidebar-view-item-value-line-border { padding: 4px 6px 4px 6px; border-top: 1px solid rgba(27, 31, 35, 0.05); }
+.sidebar-view-item-value-line-content { white-space: pre; word-wrap: normal; overflow: auto; display: block; }
+.sidebar-view-item-value-expander { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; float: right; color: #aaa; cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; padding: 4px 6px 4px 6px; }
+.sidebar-view-item-value-expander:hover { color: #000; }
+.sidebar-view-item-select {
+    font-family: inherit; font-size: 12px;
+    background-color: #fcfcfc; border: #fcfcfc; color: #333;
+    border-radius: 2px; width: 100%; height: 23px; padding: 3px 12px 3px 7px;
+    margin-top: 3px; margin-bottom: 3px; box-sizing: border-box; outline: none;
+    -moz-box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%);
+    background-position: calc(100% - 12px) calc(10px), calc(100% - 7px) calc(10px);
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+}
+.sidebar-view-separator { margin-bottom: 20px; }
+
+.sidebar-view-find input[type=text] { font-family: inherit; font-size: 13px; padding: 4px 6px 4px 6px; background: #fff; border-radius: 4px; border: 1px solid #ccc; outline: 0; }
+.sidebar-view-find ol { list-style-type: none; overflow-y: auto; margin: 8px 0 20px 0; padding: 0; }
+.sidebar-view-find li { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; margin: 0; padding: 5px 8px 5px 8px; outline: 0; white-space: nowrap; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
+.sidebar-view-find li:not(:first-child) { border-top: 1px solid #f0f0f0; }
+.sidebar-view-find li:hover { background: #eee; }
+
+.sidebar-view-documentation { font-size: 13px; line-height: 1.5; margin: 0; }
+.sidebar-view-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-view-documentation h2 { font-weight: bold; font-size: 11px; line-height: 1.25; margin-top: 20px; margin-bottom: 16px; text-transform: uppercase; border: 0; }
+.sidebar-view-documentation h3 { font-weight: bold; font-size: 11px; line-height: 1.25; }
+.sidebar-view-documentation p { margin-top: 4px; margin-bottom: 4px; margin-left: 0px; }
+.sidebar-view-documentation a { color: #237; }
+.sidebar-view-documentation code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; background-color: rgba(27, 31, 35, 0.05); padding: 0.2em 0.4em; margin: 0; border-radius: 3px; }
+.sidebar-view-documentation pre { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 12px; padding: 16px; overflow: auto; line-height: 1.45; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; }
+.sidebar-view-documentation pre code { font-size: 13px; padding: 16px; line-height: 1.45; background-color: transparent; padding: 0; border-radius: 0; }
+.sidebar-view-documentation tt { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-weight: bold; font-size: 90%; background-color: rgba(27, 31, 35, 0.05); border-radius: 3px; padding: 0.2em 0.4em; margin: 0; }
+.sidebar-view-documentation dl dt { font-size: 13px; font-weight: bold; padding: 0; margin-top: 16px; margin-left: 0px; }
+.sidebar-view-documentation dd { padding: 0 16px; margin-left: 0; margin-bottom: 16px; }
+.sidebar-view-documentation ul { margin-top: 6px; margin-bottom: 6px; padding-left: 20px; }
+.sidebar-view-documentation blockquote { margin-left: 15px; margin-right: 15px; }
+
+@media (prefers-color-scheme: dark) {
+    .sidebar html { color: #dfdfdf; }
+    .sidebar { background-color: #2d2d2d; color: #dfdfdf; border-left: 1px solid #000; }
+    .sidebar-closebutton { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #777777; opacity: 1.0; display: block; transition: 0.2s; position: absolute; top: 0; right: 15px; margin-left: 50px; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
+    .sidebar-closebutton:hover { color: #ffffff; }
+    .sidebar-view-item-value { background-color: #383838; border-color: #383838; }
+    .sidebar-view-item-value-dark { background-color: #3e3e3e; border-color: #3e3e3e; }
+    .sidebar-view-item-value-line-border { border-color: rgba(0, 0, 0, 0.09); }
+    .sidebar-view-item-select { background-color: #383838; border: #383838; color: #dfdfdf; background-image: linear-gradient(45deg, transparent 50%, #aaa 50%), linear-gradient(135deg, #aaa 50%, transparent 50%); }
+
+    .sidebar-view-title { border-bottom-color: #2d2d2d; color: #dfdfdf; }
+    .sidebar-view-title-button { color: #888888; border-color: #888888; }
+    .sidebar-view-title-button:hover { color: #dfdfdf; border-color: #dfdfdf; }
+    .sidebar-view-header { border-bottom-color: #2d2d2d; color: #dfdfdf; }
+    
+    .sidebar-view-documentation h1 { border-bottom: 1px solid #424242; color: #dfdfdf; }
+    .sidebar-view-documentation h2 { color: #dfdfdf; }
+    .sidebar-view-documentation p { color: #aaaaaa; }
+    .sidebar-view-documentation a { color: #6688aa; }
+    .sidebar-view-documentation tt { background-color:#1e1e1e; }
+    .sidebar-view-documentation code { background-color: #1e1e1e; }
+    .sidebar-view-documentation pre { background-color: #1e1e1e; }
+
+    .sidebar-view-find input[type=text] { background: #383838; color: #dfdfdf; border-color: #424242; }
+    .sidebar-view-find li:not(:first-child) { border-top: 1px solid #2a2a2a; }
+    .sidebar-view-find li:hover { background: #383838; }
+    
+}
diff --git a/media/external/netron/view-sidebar.js b/media/external/netron/view-sidebar.js
new file mode 100644
index 00000000..b57c2640
--- /dev/null
+++ b/media/external/netron/view-sidebar.js
@@ -0,0 +1,2250 @@
+
+var sidebar = sidebar || {};
+var base = base || require('./base');
+
+sidebar.Sidebar = class {
+
+    constructor(host, id) {
+        this._host = host;
+        this._id = id ? ('-' + id) : '';
+        this._stack = [];
+        this._closeSidebarHandler = () => {
+            this._pop();
+        };
+        this._closeSidebarKeyDownHandler = (e) => {
+            if (e.keyCode == 27) {
+                e.preventDefault();
+                this._pop();
+            }
+        };
+    }
+
+    _getElementById(id) {
+        return this._host.document.getElementById(id + this._id);
+    }
+
+    open(content, title) {
+        this.close();
+        this.push(content, title);
+    }
+
+    close() {
+        this._deactivate();
+        this._stack = [];
+        this._hide();
+    }
+
+    push(content, title) {
+        const item = { title: title, content: content };
+        this._stack.push(item);
+        this._activate(item);
+    }
+
+    _pop() {
+        this._deactivate();
+        if (this._stack.length > 0) {
+            this._stack.pop();
+        }
+        if (this._stack.length > 0) {
+            this._activate(this._stack[this._stack.length - 1]);
+        }
+        else {
+            this._hide();
+        }
+    }
+
+    _hide() {
+        const sidebar = this._getElementById('sidebar');
+        if (sidebar) {
+            sidebar.style.width = '0px';
+        }
+        const container = this._getElementById('graph');
+        if (container) {
+            container.style.width = '100%';
+            container.focus();
+        }
+    }
+
+    _deactivate() {
+        const sidebar = this._getElementById('sidebar');
+        if (sidebar) {
+            const closeButton = this._getElementById('sidebar-closebutton');
+            if (closeButton) {
+                closeButton.removeEventListener('click', this._closeSidebarHandler);
+                closeButton.style.color = '#f8f8f8';
+            }
+
+            this._host.document.removeEventListener('keydown', this._closeSidebarKeyDownHandler);
+        }
+    }
+
+    _activate(item) {
+        const sidebar = this._getElementById('sidebar');
+        if (sidebar) {
+            sidebar.innerHTML = '';
+
+            const title = this._host.document.createElement('h1');
+            title.classList.add('sidebar-title');
+            title.innerHTML = item.title ? item.title.toUpperCase() : '';
+            sidebar.appendChild(title);
+
+            const closeButton = this._host.document.createElement('a');
+            closeButton.classList.add('sidebar-closebutton');
+            closeButton.setAttribute('id', 'sidebar-closebutton');
+            closeButton.setAttribute('href', 'javascript:void(0)');
+            closeButton.innerHTML = '&times;';
+            closeButton.addEventListener('click', this._closeSidebarHandler);
+            sidebar.appendChild(closeButton);
+
+            const content = this._host.document.createElement('div');
+            content.classList.add('sidebar-content');
+            content.setAttribute('id', 'sidebar-content');
+            sidebar.appendChild(content);
+
+            if (typeof item.content == 'string') {
+                content.innerHTML = item.content;
+            }
+            else if (item.content instanceof Array) {
+                for (const element of item.content) {
+                    content.appendChild(element);
+                }
+            }
+            else {
+                content.appendChild(item.content);
+            }
+            sidebar.style.width = 'min(calc(100% * 0.6), 500px)';
+            this._host.document.addEventListener('keydown', this._closeSidebarKeyDownHandler);
+        }
+        const container = this._getElementById('graph');
+        if (container) {
+            container.style.width = 'max(40vw, calc(100vw - 500px))';
+        }
+    }
+};
+
+sidebar.NodeSidebar = class {
+
+    constructor(host, node) {
+        this._host = host;
+        this._node = node;
+        this._elements = [];
+        this._attributes = [];
+        this._inputs = [];
+        this._outputs = [];
+
+        if (node.type) {
+            let showDocumentation = null;
+            const type = node.type;
+            if (type && (type.description || type.inputs || type.outputs || type.attributes)) {
+                showDocumentation = {};
+                showDocumentation.text = type.nodes ? '\u0192': '?';
+                showDocumentation.callback = () => {
+                    this._raise('show-documentation', null);
+                };
+            }
+            this._addProperty('type', new sidebar.ValueTextView(this._host, node.type.name, showDocumentation));
+            if (node.type.module) {
+                this._addProperty('module', new sidebar.ValueTextView(this._host, node.type.module));
+            }
+        }
+
+        if (node.name) {
+            this._addProperty('name', new sidebar.ValueTextView(this._host, node.name));
+        }
+
+        if (node.location) {
+            this._addProperty('location', new sidebar.ValueTextView(this._host, node.location));
+        }
+
+        if (node.description) {
+            this._addProperty('description', new sidebar.ValueTextView(this._host, node.description));
+        }
+
+        if (node.device) {
+            this._addProperty('device', new sidebar.ValueTextView(this._host, node.device));
+        }
+
+        const attributes = node.attributes;
+        if (attributes && attributes.length > 0) {
+            const sortedAttributes = node.attributes.slice();
+            sortedAttributes.sort((a, b) => {
+                const au = a.name.toUpperCase();
+                const bu = b.name.toUpperCase();
+                return (au < bu) ? -1 : (au > bu) ? 1 : 0;
+            });
+            this._addHeader('Attributes');
+            for (const attribute of sortedAttributes) {
+                this._addAttribute(attribute.name, attribute);
+            }
+        }
+
+        const inputs = node.inputs;
+        if (inputs && inputs.length > 0) {
+            this._addHeader('Inputs');
+            for (const input of inputs) {
+                this._addInput(input.name, input);
+            }
+        }
+
+        const outputs = node.outputs;
+        if (outputs && outputs.length > 0) {
+            this._addHeader('Outputs');
+            for (const output of outputs) {
+                this._addOutput(output.name, output);
+            }
+        }
+
+        const separator = this._host.document.createElement('div');
+        separator.className = 'sidebar-view-separator';
+        this._elements.push(separator);
+    }
+
+    render() {
+        return this._elements;
+    }
+
+    _addHeader(title) {
+        const headerElement = this._host.document.createElement('div');
+        headerElement.className = 'sidebar-view-header';
+        headerElement.innerText = title;
+        this._elements.push(headerElement);
+    }
+
+    _addProperty(name, value) {
+        const item = new sidebar.NameValueView(this._host, name, value);
+        this._elements.push(item.render());
+    }
+
+    _addAttribute(name, attribute) {
+        const item = new NodeAttributeView(this._host, attribute);
+        item.on('show-graph', (sender, graph) => {
+            this._raise('show-graph', graph);
+        });
+        const view = new sidebar.NameValueView(this._host, name, item);
+        this._attributes.push(view);
+        this._elements.push(view.render());
+    }
+
+    _addInput(name, input) {
+        if (input.arguments.length > 0) {
+            const view = new sidebar.ParameterView(this._host, input);
+            view.on('export-tensor', (sender, tensor) => {
+                this._raise('export-tensor', tensor);
+            });
+            view.on('error', (sender, tensor) => {
+                this._raise('error', tensor);
+            });
+            const item = new sidebar.NameValueView(this._host, name, view);
+            this._inputs.push(item);
+            this._elements.push(item.render());
+        }
+    }
+
+    _addOutput(name, output) {
+        if (output.arguments.length > 0) {
+            const item = new sidebar.NameValueView(this._host, name, new sidebar.ParameterView(this._host, output));
+            this._outputs.push(item);
+            this._elements.push(item.render());
+        }
+    }
+
+    toggleInput(name) {
+        for (const input of this._inputs) {
+            if (name == input.name) {
+                input.toggle();
+            }
+        }
+    }
+
+    on(event, callback) {
+        this._events = this._events || {};
+        this._events[event] = this._events[event] || [];
+        this._events[event].push(callback);
+    }
+
+    _raise(event, data) {
+        if (this._events && this._events[event]) {
+            for (const callback of this._events[event]) {
+                callback(this, data);
+            }
+        }
+    }
+};
+
+sidebar.NameValueView = class {
+
+    constructor(host, name, value) {
+        this._host = host;
+        this._name = name;
+        this._value = value;
+
+        const nameElement = this._host.document.createElement('div');
+        nameElement.className = 'sidebar-view-item-name';
+
+        const nameInputElement = this._host.document.createElement('input');
+        nameInputElement.setAttribute('type', 'text');
+        nameInputElement.setAttribute('value', name);
+        nameInputElement.setAttribute('title', name);
+        nameInputElement.setAttribute('readonly', 'true');
+        nameElement.appendChild(nameInputElement);
+
+        const valueElement = this._host.document.createElement('div');
+        valueElement.className = 'sidebar-view-item-value-list';
+
+        for (const element of value.render()) {
+            valueElement.appendChild(element);
+        }
+
+        this._element = this._host.document.createElement('div');
+        this._element.className = 'sidebar-view-item';
+        this._element.appendChild(nameElement);
+        this._element.appendChild(valueElement);
+    }
+
+    get name() {
+        return this._name;
+    }
+
+    render() {
+        return this._element;
+    }
+
+    toggle() {
+        this._value.toggle();
+    }
+};
+
+sidebar.SelectView = class {
+
+    constructor(host, values, selected) {
+        this._host = host;
+        this._elements = [];
+        this._values = values;
+
+        const selectElement = this._host.document.createElement('select');
+        selectElement.setAttribute('class', 'sidebar-view-item-select');
+        selectElement.addEventListener('change', (e) => {
+            this._raise('change', this._values[e.target.selectedIndex]);
+        });
+        this._elements.push(selectElement);
+
+        for (const value of values) {
+            const optionElement = this._host.document.createElement('option');
+            optionElement.innerText = value.name || '';
+            if (value == selected) {
+                optionElement.setAttribute('selected', 'selected');
+            }
+            selectElement.appendChild(optionElement);
+        }
+    }
+
+    render() {
+        return this._elements;
+    }
+
+    on(event, callback) {
+        this._events = this._events || {};
+        this._events[event] = this._events[event] || [];
+        this._events[event].push(callback);
+    }
+
+    _raise(event, data) {
+        if (this._events && this._events[event]) {
+            for (const callback of this._events[event]) {
+                callback(this, data);
+            }
+        }
+    }
+};
+
+sidebar.ValueTextView = class {
+
+    constructor(host, value, action) {
+        this._host = host;
+        this._elements = [];
+        const element = this._host.document.createElement('div');
+        element.className = 'sidebar-view-item-value';
+        this._elements.push(element);
+
+        if (action) {
+            this._action = this._host.document.createElement('div');
+            this._action.className = 'sidebar-view-item-value-expander';
+            this._action.innerHTML = action.text;
+            this._action.addEventListener('click', () => {
+                action.callback();
+            });
+            element.appendChild(this._action);
+        }
+
+        const list = Array.isArray(value) ? value : [ value ];
+        let className = 'sidebar-view-item-value-line';
+        for (const item of list) {
+            const line = this._host.document.createElement('div');
+            line.className = className;
+            line.innerText = item;
+            element.appendChild(line);
+            className = 'sidebar-view-item-value-line-border';
+        }
+    }
+
+    render() {
+        return this._elements;
+    }
+
+    toggle() {
+    }
+};
+
+class NodeAttributeView {
+
+    constructor(host, attribute) {
+        this._host = host;
+        this._attribute = attribute;
+        this._element = this._host.document.createElement('div');
+        this._element.className = 'sidebar-view-item-value';
+
+        const type = this._attribute.type;
+        if (type) {
+            this._expander = this._host.document.createElement('div');
+            this._expander.className = 'sidebar-view-item-value-expander';
+            this._expander.innerText = '+';
+            this._expander.addEventListener('click', () => {
+                this.toggle();
+            });
+            this._element.appendChild(this._expander);
+        }
+        const value = this._attribute.value;
+        switch (type) {
+            case 'graph': {
+                const line = this._host.document.createElement('div');
+                line.className = 'sidebar-view-item-value-line-link';
+                line.innerHTML = value.name;
+                line.addEventListener('click', () => {
+                    this._raise('show-graph', value);
+                });
+                this._element.appendChild(line);
+                break;
+            }
+            case 'function': {
+                const line = this._host.document.createElement('div');
+                line.className = 'sidebar-view-item-value-line-link';
+                line.innerHTML = type === value.type.name;
+                line.addEventListener('click', () => {
+                    this._raise('show-graph', value.type);
+                });
+                this._element.appendChild(line);
+                break;
+            }
+            default: {
+                let content = new sidebar.Formatter(value, type).toString();
+                if (content && content.length > 1000) {
+                    content = content.substring(0, 1000) + '\u2026';
+                }
+                if (content && typeof content === 'string') {
+                    content = content.split('<').join('&lt;').split('>').join('&gt;');
+                }
+                const line = this._host.document.createElement('div');
+                line.className = 'sidebar-view-item-value-line';
+                line.innerHTML = content ? content : '&nbsp;';
+                this._element.appendChild(line);
+            }
+        }
+    }
+
+    render() {
+        return [ this._element ];
+    }
+
+    toggle() {
+        if (this._expander.innerText == '+') {
+            this._expander.innerText = '-';
+
+            const typeLine = this._host.document.createElement('div');
+            typeLine.className = 'sidebar-view-item-value-line-border';
+            const type = this._attribute.type;
+            const value = this._attribute.value;
+            if (type == 'tensor' && value && value.type) {
+                typeLine.innerHTML = 'type: ' + '<code><b>' + value.type.toString() + '</b></code>';
+                this._element.appendChild(typeLine);
+            }
+            else {
+                typeLine.innerHTML = 'type: ' + '<code><b>' + this._attribute.type + '</b></code>';
+                this._element.appendChild(typeLine);
+            }
+
+            const description = this._attribute.description;
+            if (description) {
+                const descriptionLine = this._host.document.createElement('div');
+                descriptionLine.className = 'sidebar-view-item-value-line-border';
+                descriptionLine.innerHTML = description;
+                this._element.appendChild(descriptionLine);
+            }
+
+            if (this._attribute.type == 'tensor' && value) {
+                const state = value.state;
+                const valueLine = this._host.document.createElement('div');
+                valueLine.className = 'sidebar-view-item-value-line-border';
+                const contentLine = this._host.document.createElement('pre');
+                contentLine.innerHTML = state || value.toString();
+                valueLine.appendChild(contentLine);
+                this._element.appendChild(valueLine);
+            }
+        }
+        else {
+            this._expander.innerText = '+';
+            while (this._element.childElementCount > 2) {
+                this._element.removeChild(this._element.lastChild);
+            }
+        }
+    }
+
+    on(event, callback) {
+        this._events = this._events || {};
+        this._events[event] = this._events[event] || [];
+        this._events[event].push(callback);
+    }
+
+    _raise(event, data) {
+        if (this._events && this._events[event]) {
+            for (const callback of this._events[event]) {
+                callback(this, data);
+            }
+        }
+    }
+}
+
+sidebar.ParameterView = class {
+
+    constructor(host, list) {
+        this._list = list;
+        this._elements = [];
+        this._items = [];
+        for (const argument of list.arguments) {
+            const item = new sidebar.ArgumentView(host, argument);
+            item.on('export-tensor', (sender, tensor) => {
+                this._raise('export-tensor', tensor);
+            });
+            item.on('error', (sender, tensor) => {
+                this._raise('error', tensor);
+            });
+            this._items.push(item);
+            this._elements.push(item.render());
+        }
+    }
+
+    render() {
+        return this._elements;
+    }
+
+    toggle() {
+        for (const item of this._items) {
+            item.toggle();
+        }
+    }
+
+    on(event, callback) {
+        this._events = this._events || {};
+        this._events[event] = this._events[event] || [];
+        this._events[event].push(callback);
+    }
+
+    _raise(event, data) {
+        if (this._events && this._events[event]) {
+            for (const callback of this._events[event]) {
+                callback(this, data);
+            }
+        }
+    }
+};
+
+sidebar.ArgumentView = class {
+
+    constructor(host, argument) {
+        this._host = host;
+        this._argument = argument;
+
+        this._element = this._host.document.createElement('div');
+        this._element.className = 'sidebar-view-item-value';
+
+        const initializer = argument.initializer;
+        if (initializer) {
+            this._element.classList.add('sidebar-view-item-value-dark');
+        }
+
+        const quantization = argument.quantization;
+        const type = argument.type;
+        const location = this._argument.location !== undefined;
+        if (type || initializer || quantization || location) {
+            this._expander = this._host.document.createElement('div');
+            this._expander.className = 'sidebar-view-item-value-expander';
+            this._expander.innerText = '+';
+            this._expander.addEventListener('click', () => {
+                this.toggle();
+            });
+            this._element.appendChild(this._expander);
+        }
+
+        let name = this._argument.name || '';
+        this._hasId = name ? true : false;
+        this._hasKind = initializer && initializer.kind ? true : false;
+        if (this._hasId || (!this._hasKind && !type)) {
+            this._hasId = true;
+            const nameLine = this._host.document.createElement('div');
+            nameLine.className = 'sidebar-view-item-value-line';
+            if (typeof name !== 'string') {
+                throw new Error("Invalid argument identifier '" + JSON.stringify(name) + "'.");
+            }
+            name = name.split('\n').shift(); // custom argument id
+            name = name || ' ';
+            nameLine.innerHTML = '<span class=\'sidebar-view-item-value-line-content\'>name: <b>' + name + '</b></span>';
+            this._element.appendChild(nameLine);
+        }
+        else if (this._hasKind) {
+            const kindLine = this._host.document.createElement('div');
+            kindLine.className = 'sidebar-view-item-value-line';
+            kindLine.innerHTML = 'kind: <b>' + initializer.kind + '</b>';
+            this._element.appendChild(kindLine);
+        }
+        else if (type) {
+            const typeLine = this._host.document.createElement('div');
+            typeLine.className = 'sidebar-view-item-value-line-border';
+            typeLine.innerHTML = 'type: <code><b>' + type.toString().split('<').join('&lt;').split('>').join('&gt;') + '</b></code>';
+            this._element.appendChild(typeLine);
+        }
+    }
+
+    render() {
+        return this._element;
+    }
+
+    toggle() {
+        if (this._expander) {
+            if (this._expander.innerText == '+') {
+                this._expander.innerText = '-';
+
+                const initializer = this._argument.initializer;
+                if (this._hasId && this._hasKind) {
+                    const kindLine = this._host.document.createElement('div');
+                    kindLine.className = 'sidebar-view-item-value-line-border';
+                    kindLine.innerHTML = 'kind: ' + '<b>' + initializer.kind + '</b>';
+                    this._element.appendChild(kindLine);
+                }
+                let type = null;
+                let denotation = null;
+                if (this._argument.type) {
+                    type = this._argument.type.toString();
+                    denotation = this._argument.type.denotation || null;
+                }
+                if (type && (this._hasId || this._hasKind)) {
+                    const typeLine = this._host.document.createElement('div');
+                    typeLine.className = 'sidebar-view-item-value-line-border';
+                    typeLine.innerHTML = 'type: <code><b>' + type.split('<').join('&lt;').split('>').join('&gt;') + '</b></code>';
+                    this._element.appendChild(typeLine);
+                }
+                if (denotation) {
+                    const denotationLine = this._host.document.createElement('div');
+                    denotationLine.className = 'sidebar-view-item-value-line-border';
+                    denotationLine.innerHTML = 'denotation: <code><b>' + denotation + '</b></code>';
+                    this._element.appendChild(denotationLine);
+                }
+
+                const description = this._argument.description;
+                if (description) {
+                    const descriptionLine = this._host.document.createElement('div');
+                    descriptionLine.className = 'sidebar-view-item-value-line-border';
+                    descriptionLine.innerHTML = description;
+                    this._element.appendChild(descriptionLine);
+                }
+
+                const quantization = this._argument.quantization;
+                if (quantization) {
+                    const quantizationLine = this._host.document.createElement('div');
+                    quantizationLine.className = 'sidebar-view-item-value-line-border';
+                    const content = !Array.isArray(quantization) ? quantization : '<br><br>' + quantization.map((value) => '  ' + value).join('<br>');
+                    quantizationLine.innerHTML = '<span class=\'sidebar-view-item-value-line-content\'>quantization: ' + '<b>' + content + '</b></span>';
+                    this._element.appendChild(quantizationLine);
+                }
+
+                if (this._argument.location !== undefined) {
+                    const location = this._host.document.createElement('div');
+                    location.className = 'sidebar-view-item-value-line-border';
+                    location.innerHTML = 'location: ' + '<b>' + this._argument.location + '</b>';
+                    this._element.appendChild(location);
+                }
+
+                if (initializer) {
+                    const contentLine = this._host.document.createElement('pre');
+                    const valueLine = this._host.document.createElement('div');
+                    try {
+                        const state = initializer.state;
+                        if (state === null && this._host.save &&
+                            initializer.type.dataType && initializer.type.dataType != '?' &&
+                            initializer.type.shape && initializer.type.shape.dimensions /*&& initializer.type.shape.dimensions.length > 0*/) {
+                            this._saveButton = this._host.document.createElement('div');
+                            this._saveButton.className = 'sidebar-view-item-value-expander';
+                            this._saveButton.innerHTML = '&#x1F4BE;';
+                            this._saveButton.addEventListener('click', () => {
+                                this._raise('export-tensor', initializer);
+                            });
+                            this._element.appendChild(this._saveButton);
+                        }
+
+                        valueLine.className = 'sidebar-view-item-value-line-border';
+                        contentLine.innerHTML = state || initializer.toString();
+                    }
+                    catch (err) {
+                        contentLine.innerHTML = err.toString();
+                        this._raise('error', err);
+                    }
+                    valueLine.appendChild(contentLine);
+                    this._element.appendChild(valueLine);
+                }
+            }
+            else {
+                this._expander.innerText = '+';
+                while (this._element.childElementCount > 2) {
+                    this._element.removeChild(this._element.lastChild);
+                }
+            }
+        }
+    }
+
+    on(event, callback) {
+        this._events = this._events || {};
+        this._events[event] = this._events[event] || [];
+        this._events[event].push(callback);
+    }
+
+    _raise(event, data) {
+        if (this._events && this._events[event]) {
+            for (const callback of this._events[event]) {
+                callback(this, data);
+            }
+        }
+    }
+};
+
+sidebar.ModelSidebar = class {
+
+    constructor(host, model, graph) {
+        this._host = host;
+        this._model = model;
+        this._elements = [];
+
+        if (model.format) {
+            this._addProperty('format', new sidebar.ValueTextView(this._host, model.format));
+        }
+        if (model.producer) {
+            this._addProperty('producer', new sidebar.ValueTextView(this._host, model.producer));
+        }
+        if (model.source) {
+            this._addProperty('source', new sidebar.ValueTextView(this._host, model.source));
+        }
+        if (model.name) {
+            this._addProperty('name', new sidebar.ValueTextView(this._host, model.name));
+        }
+        if (model.version) {
+            this._addProperty('version', new sidebar.ValueTextView(this._host, model.version));
+        }
+        if (model.description) {
+            this._addProperty('description', new sidebar.ValueTextView(this._host, model.description));
+        }
+        if (model.author) {
+            this._addProperty('author', new sidebar.ValueTextView(this._host, model.author));
+        }
+        if (model.company) {
+            this._addProperty('company', new sidebar.ValueTextView(this._host, model.company));
+        }
+        if (model.license) {
+            this._addProperty('license', new sidebar.ValueTextView(this._host, model.license));
+        }
+        if (model.domain) {
+            this._addProperty('domain', new sidebar.ValueTextView(this._host, model.domain));
+        }
+        if (model.imports) {
+            this._addProperty('imports', new sidebar.ValueTextView(this._host, model.imports));
+        }
+        if (model.runtime) {
+            this._addProperty('runtime', new sidebar.ValueTextView(this._host, model.runtime));
+        }
+
+        const metadata = model.metadata;
+        if (metadata) {
+            for (const property of model.metadata) {
+                this._addProperty(property.name, new sidebar.ValueTextView(this._host, property.value));
+            }
+        }
+
+        const graphs = Array.isArray(model.graphs) ? model.graphs : [];
+        if (graphs.length > 1) {
+            const graphSelector = new sidebar.SelectView(this._host, model.graphs, graph);
+            graphSelector.on('change', (sender, data) => {
+                this._raise('update-active-graph', data);
+            });
+            this._addProperty('subgraph', graphSelector);
+        }
+
+        if (graph) {
+            if (graph.version) {
+                this._addProperty('version', new sidebar.ValueTextView(this._host, graph.version));
+            }
+            if (graph.type) {
+                this._addProperty('type', new sidebar.ValueTextView(this._host, graph.type));
+            }
+            if (graph.tags) {
+                this._addProperty('tags', new sidebar.ValueTextView(this._host, graph.tags));
+            }
+            if (graph.description) {
+                this._addProperty('description', new sidebar.ValueTextView(this._host, graph.description));
+            }
+            if (Array.isArray(graph.inputs) && graph.inputs.length > 0) {
+                this._addHeader('Inputs');
+                for (const input of graph.inputs) {
+                    this.addArgument(input.name, input);
+                }
+            }
+            if (Array.isArray(graph.outputs) && graph.outputs.length > 0) {
+                this._addHeader('Outputs');
+                for (const output of graph.outputs) {
+                    this.addArgument(output.name, output);
+                }
+            }
+        }
+
+        const separator = this._host.document.createElement('div');
+        separator.className = 'sidebar-view-separator';
+        this._elements.push(separator);
+    }
+
+    render() {
+        return this._elements;
+    }
+
+    _addHeader(title) {
+        const headerElement = this._host.document.createElement('div');
+        headerElement.className = 'sidebar-view-header';
+        headerElement.innerText = title;
+        this._elements.push(headerElement);
+    }
+
+    _addProperty(name, value) {
+        const item = new sidebar.NameValueView(this._host, name, value);
+        this._elements.push(item.render());
+    }
+
+    addArgument(name, argument) {
+        const view = new sidebar.ParameterView(this._host, argument);
+        view.toggle();
+        const item = new sidebar.NameValueView(this._host, name, view);
+        this._elements.push(item.render());
+    }
+
+    on(event, callback) {
+        this._events = this._events || {};
+        this._events[event] = this._events[event] || [];
+        this._events[event].push(callback);
+    }
+
+    _raise(event, data) {
+        if (this._events && this._events[event]) {
+            for (const callback of this._events[event]) {
+                callback(this, data);
+            }
+        }
+    }
+};
+
+sidebar.DocumentationSidebar = class {
+
+    constructor(host, metadata) {
+        this._host = host;
+        this._metadata = metadata;
+    }
+
+    render() {
+        if (!this._elements) {
+            this._elements = [];
+
+            const type = sidebar.DocumentationSidebar.formatDocumentation(this._metadata);
+
+            const element = this._host.document.createElement('div');
+            element.setAttribute('class', 'sidebar-view-documentation');
+
+            this._append(element, 'h1', type.name);
+
+            if (type.summary) {
+                this._append(element, 'p', type.summary);
+            }
+
+            if (type.description) {
+                this._append(element, 'p', type.description);
+            }
+
+            if (Array.isArray(type.attributes) && type.attributes.length > 0) {
+                this._append(element, 'h2', 'Attributes');
+                const attributes = this._append(element, 'dl');
+                for (const attribute of type.attributes) {
+                    this._append(attributes, 'dt', attribute.name + (attribute.type ? ': <tt>' + attribute.type + '</tt>' : ''));
+                    this._append(attributes, 'dd', attribute.description);
+                }
+                element.appendChild(attributes);
+            }
+
+            if (Array.isArray(type.inputs) && type.inputs.length > 0) {
+                this._append(element, 'h2', 'Inputs' + (type.inputs_range ? ' (' + type.inputs_range + ')' : ''));
+                const inputs = this._append(element, 'dl');
+                for (const input of type.inputs) {
+                    this._append(inputs, 'dt', input.name + (input.type ? ': <tt>' + input.type + '</tt>' : '') + (input.option ? ' (' + input.option + ')' : ''));
+                    this._append(inputs, 'dd', input.description);
+                }
+            }
+
+            if (Array.isArray(type.outputs) && type.outputs.length > 0) {
+                this._append(element, 'h2', 'Outputs' + (type.outputs_range ? ' (' + type.outputs_range + ')' : ''));
+                const outputs = this._append(element, 'dl');
+                for (const output of type.outputs) {
+                    this._append(outputs, 'dt', output.name + (output.type ? ': <tt>' + output.type + '</tt>' : '') + (output.option ? ' (' + output.option + ')' : ''));
+                    this._append(outputs, 'dd', output.description);
+                }
+            }
+
+            if (Array.isArray(type.type_constraints) && type.type_constraints.length > 0) {
+                this._append(element, 'h2', 'Type Constraints');
+                const type_constraints = this._append(element, 'dl');
+                for (const type_constraint of type.type_constraints) {
+                    this._append(type_constraints, 'dt', type_constraint.type_param_str + ': ' + type_constraint.allowed_type_strs.map((item) => '<tt>' + item + '</tt>').join(', '));
+                    this._append(type_constraints, 'dd', type_constraint.description);
+                }
+            }
+
+            if (Array.isArray(type.examples) && type.examples.length > 0) {
+                this._append(element, 'h2', 'Examples');
+                for (const example of type.examples) {
+                    this._append(element, 'h3', example.summary);
+                    this._append(element, 'pre', example.code);
+                }
+            }
+
+            if (Array.isArray(type.references) && type.references.length > 0) {
+                this._append(element, 'h2', 'References');
+                const references = this._append(element, 'ul');
+                for (const reference of type.references) {
+                    this._append(references, 'li', reference.description);
+                }
+            }
+
+            if (type.domain && type.version && type.support_level) {
+                this._append(element, 'h2', 'Support');
+                this._append(element, 'dl', 'In domain <tt>' + type.domain + '</tt> since version <tt>' + type.version + '</tt> at support level <tt>' + type.support_level + '</tt>.');
+            }
+
+            if (!this._host.type !== 'Electron') {
+                element.addEventListener('click', (e) => {
+                    if (e.target && e.target.href) {
+                        const link = e.target.href;
+                        if (link.startsWith('http://') || link.startsWith('https://')) {
+                            e.preventDefault();
+                            this._raise('navigate', { link: link });
+                        }
+                    }
+                });
+            }
+
+            this._elements = [ element ];
+
+            const separator = this._host.document.createElement('div');
+            separator.className = 'sidebar-view-separator';
+            this._elements.push(separator);
+        }
+        return this._elements;
+    }
+
+    on(event, callback) {
+        this._events = this._events || {};
+        this._events[event] = this._events[event] || [];
+        this._events[event].push(callback);
+    }
+
+    _raise(event, data) {
+        if (this._events && this._events[event]) {
+            for (const callback of this._events[event]) {
+                callback(this, data);
+            }
+        }
+    }
+
+    _append(parent, type, content) {
+        const element = this._host.document.createElement(type);
+        if (content) {
+            element.innerHTML = content;
+        }
+        parent.appendChild(element);
+        return element;
+    }
+
+    static formatDocumentation(source) {
+        if (source) {
+            const generator = new markdown.Generator();
+            const target = {};
+            if (source.name !== undefined) {
+                target.name = source.name;
+            }
+            if (source.module !== undefined) {
+                target.module = source.module;
+            }
+            if (source.category !== undefined) {
+                target.category = source.category;
+            }
+            if (source.summary !== undefined) {
+                target.summary = generator.html(source.summary);
+            }
+            if (source.description !== undefined) {
+                target.description = generator.html(source.description);
+            }
+            if (Array.isArray(source.attributes)) {
+                target.attributes = source.attributes.map((source) => {
+                    const target = {};
+                    target.name = source.name;
+                    if (source.type !== undefined) {
+                        target.type = source.type;
+                    }
+                    if (source.option !== undefined) {
+                        target.option = source.option;
+                    }
+                    if (source.optional !== undefined) {
+                        target.optional = source.optional;
+                    }
+                    if (source.required !== undefined) {
+                        target.required = source.required;
+                    }
+                    if (source.minimum !== undefined) {
+                        target.minimum = source.minimum;
+                    }
+                    if (source.src !== undefined) {
+                        target.src = source.src;
+                    }
+                    if (source.src_type !== undefined) {
+                        target.src_type = source.src_type;
+                    }
+                    if (source.description !== undefined) {
+                        target.description = generator.html(source.description);
+                    }
+                    if (source.default !== undefined) {
+                        target.default = source.default;
+                    }
+                    if (source.visible !== undefined) {
+                        target.visible = source.visible;
+                    }
+                    return target;
+                });
+            }
+            if (Array.isArray(source.inputs)) {
+                target.inputs = source.inputs.map((source) => {
+                    const target = {};
+                    target.name = source.name;
+                    if (source.type !== undefined) {
+                        target.type = source.type;
+                    }
+                    if (source.description !== undefined) {
+                        target.description = generator.html(source.description);
+                    }
+                    if (source.default !== undefined) {
+                        target.default = source.default;
+                    }
+                    if (source.src !== undefined) {
+                        target.src = source.src;
+                    }
+                    if (source.list !== undefined) {
+                        target.list = source.list;
+                    }
+                    if (source.isRef !== undefined) {
+                        target.isRef = source.isRef;
+                    }
+                    if (source.typeAttr !== undefined) {
+                        target.typeAttr = source.typeAttr;
+                    }
+                    if (source.numberAttr !== undefined) {
+                        target.numberAttr = source.numberAttr;
+                    }
+                    if (source.typeListAttr !== undefined) {
+                        target.typeListAttr = source.typeListAttr;
+                    }
+                    if (source.option !== undefined) {
+                        target.option = source.option;
+                    }
+                    if (source.optional !== undefined) {
+                        target.optional = source.optional;
+                    }
+                    if (source.visible !== undefined) {
+                        target.visible = source.visible;
+                    }
+                    return target;
+                });
+            }
+            if (Array.isArray(source.outputs)) {
+                target.outputs = source.outputs.map((source) => {
+                    const target = {};
+                    target.name = source.name;
+                    if (source.type) {
+                        target.type = source.type;
+                    }
+                    if (source.description !== undefined) {
+                        target.description = generator.html(source.description);
+                    }
+                    if (source.list !== undefined) {
+                        target.list = source.list;
+                    }
+                    if (source.typeAttr !== undefined) {
+                        target.typeAttr = source.typeAttr;
+                    }
+                    if (source.typeListAttr !== undefined) {
+                        target.typeListAttr = source.typeAttr;
+                    }
+                    if (source.numberAttr !== undefined) {
+                        target.numberAttr = source.numberAttr;
+                    }
+                    if (source.isRef !== undefined) {
+                        target.isRef = source.isRef;
+                    }
+                    if (source.option !== undefined) {
+                        target.option = source.option;
+                    }
+                    return target;
+                });
+            }
+            if (Array.isArray(source.references)) {
+                target.references = source.references.map((source) => {
+                    if (source) {
+                        target.description = generator.html(source.description);
+                    }
+                    return target;
+                });
+            }
+            if (source.version !== undefined) {
+                target.version = source.version;
+            }
+            if (source.operator !== undefined) {
+                target.operator = source.operator;
+            }
+            if (source.identifier !== undefined) {
+                target.identifier = source.identifier;
+            }
+            if (source.package !== undefined) {
+                target.package = source.package;
+            }
+            if (source.support_level !== undefined) {
+                target.support_level = source.support_level;
+            }
+            if (source.min_input !== undefined) {
+                target.min_input = source.min_input;
+            }
+            if (source.max_input !== undefined) {
+                target.max_input = source.max_input;
+            }
+            if (source.min_output !== undefined) {
+                target.min_output = source.min_output;
+            }
+            if (source.max_input !== undefined) {
+                target.max_output = source.max_output;
+            }
+            if (source.inputs_range !== undefined) {
+                target.inputs_range = source.inputs_range;
+            }
+            if (source.outputs_range !== undefined) {
+                target.outputs_range = source.outputs_range;
+            }
+            if (source.examples !== undefined) {
+                target.examples = source.examples;
+            }
+            if (source.constants !== undefined) {
+                target.constants = source.constants;
+            }
+            if (source.type_constraints !== undefined) {
+                target.type_constraints = source.type_constraints;
+            }
+            return target;
+        }
+        return '';
+    }
+};
+
+sidebar.FindSidebar = class {
+
+    constructor(host, element, graph) {
+        this._host = host;
+        this._graphElement = element;
+        this._graph = graph;
+        this._contentElement = this._host.document.createElement('div');
+        this._contentElement.setAttribute('class', 'sidebar-view-find');
+        this._searchElement = this._host.document.createElement('input');
+        this._searchElement.setAttribute('id', 'search');
+        this._searchElement.setAttribute('type', 'text');
+        this._searchElement.setAttribute('spellcheck', 'false');
+        this._searchElement.setAttribute('placeholder', 'Search...');
+        this._searchElement.setAttribute('style', 'width: 100%');
+        this._searchElement.addEventListener('input', (e) => {
+            this.update(e.target.value);
+            this._raise('search-text-changed', e.target.value);
+        });
+        this._resultElement = this._host.document.createElement('ol');
+        this._resultElement.addEventListener('click', (e) => {
+            this.select(e);
+        });
+        this._contentElement.appendChild(this._searchElement);
+        this._contentElement.appendChild(this._resultElement);
+    }
+
+    on(event, callback) {
+        this._events = this._events || {};
+        this._events[event] = this._events[event] || [];
+        this._events[event].push(callback);
+    }
+
+    _raise(event, data) {
+        if (this._events && this._events[event]) {
+            for (const callback of this._events[event]) {
+                callback(this, data);
+            }
+        }
+    }
+
+    select(e) {
+        const selection = [];
+        const id = e.target.id;
+
+        const nodesElement = this._graphElement.getElementById('nodes');
+        let nodeElement = nodesElement.firstChild;
+        while (nodeElement) {
+            if (nodeElement.id == id) {
+                selection.push(nodeElement);
+            }
+            nodeElement = nodeElement.nextSibling;
+        }
+
+        const edgePathsElement = this._graphElement.getElementById('edge-paths');
+        let edgePathElement = edgePathsElement.firstChild;
+        while (edgePathElement) {
+            if (edgePathElement.id == id) {
+                selection.push(edgePathElement);
+            }
+            edgePathElement = edgePathElement.nextSibling;
+        }
+
+        let initializerElement = this._graphElement.getElementById(id);
+        if (initializerElement) {
+            while (initializerElement.parentElement) {
+                initializerElement = initializerElement.parentElement;
+                if (initializerElement.id && initializerElement.id.startsWith('node-')) {
+                    selection.push(initializerElement);
+                    break;
+                }
+            }
+        }
+
+        if (selection.length > 0) {
+            this._raise('select', selection);
+        }
+    }
+
+    focus(searchText) {
+        this._searchElement.focus();
+        this._searchElement.value = '';
+        this._searchElement.value = searchText;
+        this.update(searchText);
+    }
+
+    update(searchText) {
+        while (this._resultElement.lastChild) {
+            this._resultElement.removeChild(this._resultElement.lastChild);
+        }
+
+        let terms = null;
+        let callback = null;
+        const unquote = searchText.match(new RegExp(/^'(.*)'|"(.*)"$/));
+        if (unquote) {
+            const term = unquote[1] || unquote[2];
+            terms = [ term ];
+            callback = (name) => {
+                return term == name;
+            };
+        }
+        else {
+            terms = searchText.trim().toLowerCase().split(' ').map((term) => term.trim()).filter((term) => term.length > 0);
+            callback = (name) => {
+                return terms.every((term) => name.toLowerCase().indexOf(term) !== -1);
+            };
+        }
+
+        const nodes = new Set();
+        const edges = new Set();
+
+        for (const node of this._graph.nodes.values()) {
+            const label = node.label;
+            const initializers = [];
+            if (label.class === 'graph-node' || label.class === 'graph-input') {
+                for (const input of label.inputs) {
+                    for (const argument of input.arguments) {
+                        if (argument.name && !edges.has(argument.name)) {
+                            const match = (argument, term) => {
+                                if (argument.name && argument.name.toLowerCase().indexOf(term) !== -1) {
+                                    return true;
+                                }
+                                if (argument.type) {
+                                    if (argument.type.dataType && term === argument.type.dataType.toLowerCase()) {
+                                        return true;
+                                    }
+                                    if (argument.type.shape) {
+                                        if (term === argument.type.shape.toString().toLowerCase()) {
+                                            return true;
+                                        }
+                                        if (argument.type.shape && Array.isArray(argument.type.shape.dimensions)) {
+                                            const dimensions = argument.type.shape.dimensions.map((dimension) => dimension ? dimension.toString().toLowerCase() : '');
+                                            if (term === dimensions.join(',')) {
+                                                return true;
+                                            }
+                                            if (dimensions.some((dimension) => term === dimension)) {
+                                                return true;
+                                            }
+                                        }
+                                    }
+                                }
+                                return false;
+                            };
+                            if (terms.every((term) => match(argument, term))) {
+                                if (!argument.initializer) {
+                                    const inputItem = this._host.document.createElement('li');
+                                    inputItem.innerText = '\u2192 ' + argument.name.split('\n').shift(); // custom argument id
+                                    inputItem.id = 'edge-' + argument.name;
+                                    this._resultElement.appendChild(inputItem);
+                                    edges.add(argument.name);
+                                }
+                                else {
+                                    initializers.push(argument);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            if (label.class === 'graph-node') {
+                const name = label.value.name;
+                const type = label.value.type.name;
+                if (!nodes.has(label.id) &&
+                    ((name && callback(name) || (type && callback(type))))) {
+                    const nameItem = this._host.document.createElement('li');
+                    nameItem.innerText = '\u25A2 ' + (name || '[' + type + ']');
+                    nameItem.id = label.id;
+                    this._resultElement.appendChild(nameItem);
+                    nodes.add(label.id);
+                }
+            }
+            for (const argument of initializers) {
+                if (argument.name) {
+                    const initializeItem = this._host.document.createElement('li');
+                    initializeItem.innerText = '\u25A0 ' + argument.name.split('\n').shift(); // custom argument id
+                    initializeItem.id = 'initializer-' + argument.name;
+                    this._resultElement.appendChild(initializeItem);
+                }
+            }
+        }
+
+        for (const node of this._graph.nodes.values()) {
+            const label = node.label;
+            if (label.class === 'graph-node' || label.class === 'graph-output') {
+                for (const output of label.outputs) {
+                    for (const argument of output.arguments) {
+                        if (argument.name && !edges.has(argument.name) && terms.every((term) => argument.name.toLowerCase().indexOf(term) != -1)) {
+                            const outputItem = this._host.document.createElement('li');
+                            outputItem.innerText = '\u2192 ' + argument.name.split('\n').shift(); // custom argument id
+                            outputItem.id = 'edge-' + argument.name;
+                            this._resultElement.appendChild(outputItem);
+                            edges.add(argument.name);
+                        }
+                    }
+                }
+            }
+        }
+
+        this._resultElement.style.display = this._resultElement.childNodes.length != 0 ? 'block' : 'none';
+    }
+
+    get content() {
+        return this._contentElement;
+    }
+};
+
+sidebar.Formatter = class {
+
+    constructor(value, type, quote) {
+        this._value = value;
+        this._type = type;
+        this._quote = quote;
+        this._values = new Set();
+    }
+
+    toString() {
+        return this._format(this._value, this._type, this._quote);
+    }
+
+    _format(value, type, quote) {
+
+        if (typeof value === 'function') {
+            return value();
+        }
+        if (value && (value instanceof base.Int64 || value instanceof base.Uint64)) {
+            return value.toString();
+        }
+        if (Number.isNaN(value)) {
+            return 'NaN';
+        }
+        switch (type) {
+            case 'shape':
+                return value ? value.toString() : '(null)';
+            case 'shape[]':
+                if (value && !Array.isArray(value)) {
+                    throw new Error("Invalid shape '" + JSON.stringify(value) + "'.");
+                }
+                return value ? value.map((item) => item.toString()).join(', ') : '(null)';
+            case 'graph':
+                return value ? value.name : '(null)';
+            case 'graph[]':
+                return value ? value.map((graph) => graph.name).join(', ') : '(null)';
+            case 'tensor':
+                if (value && value.type && value.type.shape && value.type.shape.dimensions && value.type.shape.dimensions.length == 0) {
+                    return value.toString();
+                }
+                return '[...]';
+            case 'function':
+                return value.type.name;
+            case 'function[]':
+                return value ? value.map((item) => item.type.name).join(', ') : '(null)';
+            default:
+                break;
+        }
+        if (typeof value === 'string' && (!type || type != 'string')) {
+            return quote ? '"' + value + '"' : value;
+        }
+        if (Array.isArray(value)) {
+            if (value.length == 0) {
+                return quote ? '[]' : '';
+            }
+            let ellipsis = false;
+            if (value.length > 1000) {
+                value = value.slice(0, 1000);
+                ellipsis = true;
+            }
+            const itemType = (type && type.endsWith('[]')) ? type.substring(0, type.length - 2) : null;
+            const array = value.map((item) => {
+                if (item && (item instanceof base.Int64 || item instanceof base.Uint64)) {
+                    return item.toString();
+                }
+                if (Number.isNaN(item)) {
+                    return 'NaN';
+                }
+                const quote = !itemType || itemType === 'string';
+                return this._format(item, itemType, quote);
+            });
+            if (ellipsis) {
+                array.push('\u2026');
+            }
+            return quote ? [ '[', array.join(', '), ']' ].join(' ') : array.join(', ');
+        }
+        if (value === null) {
+            return quote ? 'null' : '';
+        }
+        if (value === undefined) {
+            return 'undefined';
+        }
+        if (value !== Object(value)) {
+            return value.toString();
+        }
+        if (this._values.has(value)) {
+            return '\u2026';
+        }
+        this._values.add(value);
+        const list = [];
+        const entries = Object.entries(value).filter((entry) => !entry[0].startsWith('__') && !entry[0].endsWith('__'));
+        if (entries.length == 1) {
+            list.push(this._format(entries[0][1], null, true));
+        }
+        else {
+            for (const entry of entries) {
+                list.push(entry[0] + ': ' + this._format(entry[1], null, true));
+            }
+        }
+        let objectType = value.__type__;
+        if (!objectType && value.constructor.name && value.constructor.name !== 'Object') {
+            objectType = value.constructor.name;
+        }
+        if (objectType) {
+            return objectType + (list.length == 0 ? '()' : [ '(', list.join(', '), ')' ].join(''));
+        }
+        switch (list.length) {
+            case 0:
+                return quote ? '()' : '';
+            case 1:
+                return list[0];
+            default:
+                return quote ? [ '(', list.join(', '), ')' ].join(' ') : list.join(', ');
+        }
+    }
+};
+
+const markdown = {};
+
+markdown.Generator = class {
+
+    constructor() {
+        this._newlineRegExp = /^\n+/;
+        this._codeRegExp = /^( {4}[^\n]+\n*)+/;
+        this._fencesRegExp = /^ {0,3}(`{3,}(?=[^`\n]*\n)|~{3,})([^\n]*)\n(?:|([\s\S]*?)\n)(?: {0,3}\1[~`]* *(?:\n+|$)|$)/;
+        this._hrRegExp = /^ {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)/;
+        this._headingRegExp = /^ {0,3}(#{1,6}) +([^\n]*?)(?: +#+)? *(?:\n+|$)/;
+        this._blockquoteRegExp = /^( {0,3}> ?(([^\n]+(?:\n(?! {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--))[^\n]+)*)|[^\n]*)(?:\n|$))+/;
+        this._listRegExp = /^( {0,3})((?:[*+-]|\d{1,9}[.)])) [\s\S]+?(?:\n+(?=\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$))|\n+(?= {0,3}\[((?!\s*\])(?:\\[[\]]|[^[\]])+)\]: *\n? *<?([^\s>]+)>?(?:(?: +\n? *| *\n *)((?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))))? *(?:\n+|$))|\n{2,}(?! )(?!\1(?:[*+-]|\d{1,9}[.)]) )\n*|\s*$)/;
+        this._htmlRegExp = /^ {0,3}(?:<(script|pre|style)[\s>][\s\S]*?(?:<\/\1>[^\n]*\n+|$)|<!--(?!-?>)[\s\S]*?(?:-->|$)[^\n]*(\n+|$)|<\?[\s\S]*?(?:\?>\n*|$)|<![A-Z][\s\S]*?(?:>\n*|$)|<!\[CDATA\[[\s\S]*?(?:\]\]>\n*|$)|<\/?(address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)[\s\S]*?(?:\n{2,}|$)|<(?!script|pre|style)([a-z][\w-]*)(?: +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?)*? *\/?>(?=[ \t]*(?:\n|$))[\s\S]*?(?:\n{2,}|$)|<\/(?!script|pre|style)[a-z][\w-]*\s*>(?=[ \t]*(?:\n|$))[\s\S]*?(?:\n{2,}|$))/i;
+        this._defRegExp = /^ {0,3}\[((?!\s*\])(?:\\[[\]]|[^[\]])+)\]: *\n? *<?([^\s>]+)>?(?:(?: +\n? *| *\n *)((?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))))? *(?:\n+|$)/;
+        this._nptableRegExp = /^ *([^|\n ].*\|.*)\n {0,3}([-:]+ *\|[-| :]*)(?:\n((?:(?!\n| {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {4}[^\n]| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--)).*(?:\n|$))*)\n*|$)/;
+        this._tableRegExp = /^ *\|(.+)\n {0,3}\|?( *[-:]+[-| :]*)(?:\n *((?:(?!\n| {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {4}[^\n]| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--)).*(?:\n|$))*)\n*|$)/;
+        this._lheadingRegExp = /^([^\n]+)\n {0,3}(=+|-+) *(?:\n+|$)/;
+        this._textRegExp = /^[^\n]+/;
+        this._bulletRegExp = /(?:[*+-]|\d{1,9}[.)])/;
+        this._itemRegExp = /^( *)((?:[*+-]|\d{1,9}[.)])) ?[^\n]*(?:\n(?!\1(?:[*+-]|\d{1,9}[.)]) ?)[^\n]*)*/gm;
+        this._paragraphRegExp = /^([^\n]+(?:\n(?! {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)| {0,3}#{1,6} | {0,3}>| {0,3}(?:`{3,}(?=[^`\n]*\n)|~{3,})[^\n]*\n| {0,3}(?:[*+-]|1[.)]) |<\/?(?:address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul)(?: +|\n|\/?>)|<(?:script|pre|style|!--))[^\n]+)*)/;
+        this._backpedalRegExp = /(?:[^?!.,:;*_~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_~)]+(?!$))+/;
+        this._escapeRegExp = /^\\([!"#$%&'()*+,\-./:;<=>?@[\]\\^_`{|}~~|])/;
+        this._escapesRegExp = /\\([!"#$%&'()*+,\-./:;<=>?@[\]\\^_`{|}~])/g;
+        /* eslint-disable no-control-regex */
+        this._autolinkRegExp = /^<([a-zA-Z][a-zA-Z0-9+.-]{1,31}:[^\s\x00-\x1f<>]*|[a-zA-Z0-9.!#$%&'*+/=?_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_]))>/;
+        this._linkRegExp = /^!?\[((?:\[(?:\\.|[^[\]\\])*\]|\\.|`[^`]*`|[^[\]\\`])*?)\]\(\s*(<(?:\\[<>]?|[^\s<>\\])*>|[^\s\x00-\x1f]*)(?:\s+("(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)))?\s*\)/;
+        /* eslint-enable no-control-regex */
+        this._urlRegExp = /^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9-]+\.?)+[^\s<]*|^[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/i;
+        this._tagRegExp = /^<!--(?!-?>)[\s\S]*?-->|^<\/[a-zA-Z][\w:-]*\s*>|^<[a-zA-Z][\w-]*(?:\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?)*?\s*\/?>|^<\?[\s\S]*?\?>|^<![a-zA-Z]+\s[\s\S]*?>|^<!\[CDATA\[[\s\S]*?\]\]>/;
+        this._reflinkRegExp = /^!?\[((?:\[(?:\\.|[^[\]\\])*\]|\\.|`[^`]*`|[^[\]\\`])*?)\]\[(?!\s*\])((?:\\[[\]]?|[^[\]\\])+)\]/;
+        this._nolinkRegExp = /^!?\[(?!\s*\])((?:\[[^[\]]*\]|\\[[\]]|[^[\]])*)\](?:\[\])?/;
+        this._reflinkSearchRegExp = /!?\[((?:\[(?:\\.|[^[\]\\])*\]|\\.|`[^`]*`|[^[\]\\`])*?)\]\[(?!\s*\])((?:\\[[\]]?|[^[\]\\])+)\]|!?\[(?!\s*\])((?:\[[^[\]]*\]|\\[[\]]|[^[\]])*)\](?:\[\])?(?!\()/g;
+        this._strongStartRegExp = /^(?:(\*\*(?=[*!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]))|\*\*)(?![\s])|__/;
+        this._strongMiddleRegExp = /^\*\*(?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|\*(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?\*)+?\*\*$|^__(?![\s])((?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|_(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?_)+?)__$/;
+        this._strongEndAstRegExp = /[^!"#$%&'()+\-.,/:;<=>?@[\]`{|}~\s]\*\*(?!\*)|[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]\*\*(?!\*)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~_\s]|$))/g;
+        this._strongEndUndRegExp = /[^\s]__(?!_)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~*\s])|$)/g;
+        this._emStartRegExp = /^(?:(\*(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]))|\*)(?![*\s])|_/;
+        this._emMiddleRegExp = /^\*(?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|\*(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^*]|\\\*)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?\*)+?\*$|^_(?![_\s])(?:(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)|_(?:(?!__[^_]*?__|\*\*\[^\*\]*?\*\*)(?:[^_]|\\_)|__[^_]*?__|\*\*\[^\*\]*?\*\*)*?_)+?_$/;
+        this._emEndAstRegExp = /[^!"#$%&'()+\-.,/:;<=>?@[\]`{|}~\s]\*(?!\*)|[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~]\*(?!\*)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~_\s]|$))/g;
+        this._emEndUndRegExp = /[^\s]_(?!_)(?:(?=[!"#$%&'()+\-.,/:;<=>?@[\]`{|}~*\s])|$)/g,
+        this._codespanRegExp = /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/;
+        this._brRegExp = /^( {2,}|\\)\n(?!\s*$)/;
+        this._delRegExp = /^~+(?=\S)([\s\S]*?\S)~+/;
+        this._textspanRegExp = /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<![`*~]|\b_|https?:\/\/|ftp:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+/=?_`{|}~-](?=[a-zA-Z0-9.!#$%&'*+/=?_`{|}~-]+@))|(?=[a-zA-Z0-9.!#$%&'*+/=?_`{|}~-]+@))/;
+        this._punctuationRegExp = /^([\s*!"#$%&'()+\-.,/:;<=>?@[\]`{|}~])/;
+        this._blockSkipRegExp = /\[[^\]]*?\]\([^)]*?\)|`[^`]*?`|<[^>]*?>/g;
+        this._escapeTestRegExp = /[&<>"']/;
+        this._escapeReplaceRegExp = /[&<>"']/g;
+        this._escapeTestNoEncodeRegExp = /[<>"']|&(?!#?\w+;)/;
+        this._escapeReplaceNoEncodeRegExp = /[<>"']|&(?!#?\w+;)/g;
+        this._escapeReplacementsMap = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+    }
+
+    html(source) {
+        const tokens = [];
+        const links = new Map();
+        this._tokenize(source.replace(/\r\n|\r/g, '\n').replace(/\t/g, '    '), tokens, links, true);
+        this._tokenizeBlock(tokens, links);
+        const slugs = new Map();
+        const result = this._render(tokens, slugs, true);
+        return result;
+    }
+
+    _tokenize(source, tokens, links, top) {
+        source = source.replace(/^ +$/gm, '');
+        while (source) {
+            let match = this._newlineRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                if (match[0].length > 1) {
+                    tokens.push({ type: 'space' });
+                }
+                continue;
+            }
+            match = this._codeRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                const lastToken = tokens[tokens.length - 1];
+                if (lastToken && lastToken.type === 'paragraph') {
+                    lastToken.text += '\n' + match[0].trimRight();
+                }
+                else {
+                    const text = match[0].replace(/^ {4}/gm, '').replace(/\n*$/, '');
+                    tokens.push({ type: 'code', text: text });
+                }
+                continue;
+            }
+            match = this._fencesRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                const language = match[2] ? match[2].trim() : match[2];
+                let content = match[3] || '';
+                const matchIndent = match[0].match(/^(\s+)(?:```)/);
+                if (matchIndent !== null) {
+                    const indent = matchIndent[1];
+                    content = content.split('\n').map(node => {
+                        const match = node.match(/^\s+/);
+                        return (match !== null && match[0].length >= indent.length) ? node.slice(indent.length) : node;
+                    }).join('\n');
+                }
+                tokens.push({ type: 'code', language: language, text: content });
+                continue;
+            }
+            match = this._headingRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                tokens.push({ type: 'heading', depth: match[1].length, text: match[2] });
+                continue;
+            }
+            match = this._nptableRegExp.exec(source);
+            if (match) {
+                const header = this._splitCells(match[1].replace(/^ *| *\| *$/g, ''));
+                const align = match[2].replace(/^ *|\| *$/g, '').split(/ *\| */);
+                if (header.length === align.length) {
+                    const cells = match[3] ? match[3].replace(/\n$/, '').split('\n') : [];
+                    const token = { type: 'table', header: header, align: align, cells: cells, raw: match[0] };
+                    for (let i = 0; i < token.align.length; i++) {
+                        if (/^ *-+: *$/.test(token.align[i])) {
+                            token.align[i] = 'right';
+                        }
+                        else if (/^ *:-+: *$/.test(token.align[i])) {
+                            token.align[i] = 'center';
+                        }
+                        else if (/^ *:-+ *$/.test(token.align[i])) {
+                            token.align[i] = 'left';
+                        }
+                        else {
+                            token.align[i] = null;
+                        }
+                    }
+                    token.cells = token.cells.map((cell) => this._splitCells(cell, token.header.length));
+                    source = source.substring(token.raw.length);
+                    tokens.push(token);
+                    continue;
+                }
+            }
+            match = this._hrRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                tokens.push({ type: 'hr' });
+                continue;
+            }
+            match = this._blockquoteRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                const text = match[0].replace(/^ *> ?/gm, '');
+                tokens.push({ type: 'blockquote', text: text, tokens: this._tokenize(text, [], links, top) });
+                continue;
+            }
+            match = this._listRegExp.exec(source);
+            if (match) {
+                let raw = match[0];
+                const bull = match[2];
+                const ordered = bull.length > 1;
+                const parent = bull[bull.length - 1] === ')';
+                const list = { type: 'list', raw: raw, ordered: ordered, start: ordered ? +bull.slice(0, -1) : '', loose: false, items: [] };
+                const itemMatch = match[0].match(this._itemRegExp);
+                let next = false;
+                const length = itemMatch.length;
+                for (let i = 0; i < length; i++) {
+                    let item = itemMatch[i];
+                    raw = item;
+                    let space = item.length;
+                    item = item.replace(/^ *([*+-]|\d+[.)]) ?/, '');
+                    if (~item.indexOf('\n ')) {
+                        space -= item.length;
+                        item = item.replace(new RegExp('^ {1,' + space + '}', 'gm'), '');
+                    }
+                    if (i !== length - 1) {
+                        const bullet = this._bulletRegExp.exec(itemMatch[i + 1])[0];
+                        if (ordered ? bullet.length === 1 || (!parent && bullet[bullet.length - 1] === ')') : (bullet.length > 1)) {
+                            const addBack = itemMatch.slice(i + 1).join('\n');
+                            list.raw = list.raw.substring(0, list.raw.length - addBack.length);
+                            i = length - 1;
+                        }
+                    }
+                    let loose = next || /\n\n(?!\s*$)/.test(item);
+                    if (i !== length - 1) {
+                        next = item.charAt(item.length - 1) === '\n';
+                        if (!loose) {
+                            loose = next;
+                        }
+                    }
+                    if (loose) {
+                        list.loose = true;
+                    }
+                    const task = /^\[[ xX]\] /.test(item);
+                    let checked = undefined;
+                    if (task) {
+                        checked = item[1] !== ' ';
+                        item = item.replace(/^\[[ xX]\] +/, '');
+                    }
+                    list.items.push({ type: 'list_item', raw, task: task, checked: checked, loose: loose, text: item });
+                }
+                source = source.substring(list.raw.length);
+                for (const item of list.items) {
+                    item.tokens = this._tokenize(item.text, [], links, false);
+                }
+                tokens.push(list);
+                continue;
+            }
+            match = this._htmlRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                tokens.push({ type: 'html', pre: (match[1] === 'pre' || match[1] === 'script' || match[1] === 'style'), text: match[0] });
+                continue;
+            }
+            if (top) {
+                match = this._defRegExp.exec(source);
+                if (match) {
+                    source = source.substring(match[0].length);
+                    match[3] = match[3] ? match[3].substring(1, match[3].length - 1) : match[3];
+                    const tag = match[1].toLowerCase().replace(/\s+/g, ' ');
+                    if (!links.has(tag)) {
+                        links.set(tag, { href: match[2], title: match[3] });
+                    }
+                    continue;
+                }
+            }
+            match = this._tableRegExp.exec(source);
+            if (match) {
+                const header = this._splitCells(match[1].replace(/^ *| *\| *$/g, ''));
+                const align = match[2].replace(/^ *|\| *$/g, '').split(/ *\| */);
+                if (header.length === align.length) {
+                    const cells = match[3] ? match[3].replace(/\n$/, '').split('\n') : [];
+                    const token = { type: 'table', header: header, align: align, cells: cells, raw: match[0] };
+                    for (let i = 0; i < token.align.length; i++) {
+                        if (/^ *-+: *$/.test(token.align[i])) {
+                            token.align[i] = 'right';
+                        }
+                        else if (/^ *:-+: *$/.test(token.align[i])) {
+                            token.align[i] = 'center';
+                        }
+                        else if (/^ *:-+ *$/.test(token.align[i])) {
+                            token.align[i] = 'left';
+                        }
+                        else {
+                            token.align[i] = null;
+                        }
+                    }
+                    token.cells = token.cells.map((cell) => this._splitCells(cell.replace(/^ *\| *| *\| *$/g, ''), token.header.length));
+                    source = source.substring(token.raw.length);
+                    tokens.push(token);
+                    continue;
+                }
+            }
+            match = this._lheadingRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                tokens.push({ type: 'heading', depth: match[2].charAt(0) === '=' ? 1 : 2, text: match[1] });
+                continue;
+            }
+            if (top) {
+                match = this._paragraphRegExp.exec(source);
+                if (match) {
+                    source = source.substring(match[0].length);
+                    tokens.push({ type: 'paragraph', text: match[1].charAt(match[1].length - 1) === '\n' ? match[1].slice(0, -1) : match[1] });
+                    continue;
+                }
+            }
+            match = this._textRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                const lastToken = tokens[tokens.length - 1];
+                if (lastToken && lastToken.type === 'text') {
+                    lastToken.text += '\n' + match[0];
+                }
+                else {
+                    tokens.push({ type: 'text', text: match[0] });
+                }
+                continue;
+            }
+            throw new Error("Unexpected '" + source.charCodeAt(0) + "'.");
+        }
+        return tokens;
+    }
+
+    _tokenizeInline(source, links, inLink, inRawBlock, prevChar) {
+        const tokens = [];
+        let maskedSource = source;
+        if (links.size > 0) {
+            while (maskedSource) {
+                const match = this._reflinkSearchRegExp.exec(maskedSource);
+                if (match) {
+                    if (links.has(match[0].slice(match[0].lastIndexOf('[') + 1, -1))) {
+                        maskedSource = maskedSource.slice(0, match.index) + '[' + 'a'.repeat(match[0].length - 2) + ']' + maskedSource.slice(this._reflinkSearchRegExp.lastIndex);
+                    }
+                    continue;
+                }
+                break;
+            }
+        }
+        while (maskedSource) {
+            const match = this._blockSkipRegExp.exec(maskedSource);
+            if (match) {
+                maskedSource = maskedSource.slice(0, match.index) + '[' + 'a'.repeat(match[0].length - 2) + ']' + maskedSource.slice(this._blockSkipRegExp.lastIndex);
+                continue;
+            }
+            break;
+        }
+        while (source) {
+            let match = this._escapeRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                tokens.push({ type: 'escape', text: this._escape(match[1]) });
+                continue;
+            }
+            match = this._tagRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                if (!inLink && /^<a /i.test(match[0])) {
+                    inLink = true;
+                }
+                else if (inLink && /^<\/a>/i.test(match[0])) {
+                    inLink = false;
+                }
+                if (!inRawBlock && /^<(pre|code|kbd|script)(\s|>)/i.test(match[0])) {
+                    inRawBlock = true;
+                }
+                else if (inRawBlock && /^<\/(pre|code|kbd|script)(\s|>)/i.test(match[0])) {
+                    inRawBlock = false;
+                }
+                tokens.push({ type: 'html', raw: match[0], text: match[0] });
+                continue;
+            }
+            match = this._linkRegExp.exec(source);
+            if (match) {
+                let index = -1;
+                const ref = match[2];
+                if (ref.indexOf(')') !== -1) {
+                    let level = 0;
+                    for (let i = 0; i < ref.length; i++) {
+                        switch (ref[i]) {
+                            case '\\':
+                                i++;
+                                break;
+                            case '(':
+                                level++;
+                                break;
+                            case ')':
+                                level--;
+                                if (level < 0) {
+                                    index = i;
+                                    i = ref.length;
+                                }
+                                break;
+                            default:
+                                break;
+                        }
+                    }
+                }
+                if (index > -1) {
+                    const length = (match[0].indexOf('!') === 0 ? 5 : 4) + match[1].length + index;
+                    match[2] = match[2].substring(0, index);
+                    match[0] = match[0].substring(0, length).trim();
+                    match[3] = '';
+                }
+                const title = (match[3] ? match[3].slice(1, -1) : '').replace(this._escapesRegExp, '$1');
+                const href = match[2].trim().replace(/^<([\s\S]*)>$/, '$1').replace(this._escapesRegExp, '$1');
+                const token = this._outputLink(match, href, title);
+                source = source.substring(match[0].length);
+                if (token.type === 'link') {
+                    token.tokens = this._tokenizeInline(token.text, links, true, inRawBlock, '');
+                }
+                tokens.push(token);
+                continue;
+            }
+            match = this._reflinkRegExp.exec(source) || this._nolinkRegExp.exec(source);
+            if (match) {
+                let link = (match[2] || match[1]).replace(/\s+/g, ' ');
+                link = links.get(link.toLowerCase());
+                if (!link || !link.href) {
+                    const text = match[0].charAt(0);
+                    source = source.substring(text.length);
+                    tokens.push({ type: 'text', text: text });
+                }
+                else {
+                    source = source.substring(match[0].length);
+                    const token = this._outputLink(match, link);
+                    if (token.type === 'link') {
+                        token.tokens = this._tokenizeInline(token.text, links, true, inRawBlock, '');
+                    }
+                    tokens.push(token);
+                }
+                continue;
+            }
+            match = this._strongStartRegExp.exec(source);
+            if (match && (!match[1] || (match[1] && (prevChar === '' || this._punctuationRegExp.exec(prevChar))))) {
+                const masked = maskedSource.slice(-1 * source.length);
+                const endReg = match[0] === '**' ? this._strongEndAstRegExp : this._strongEndUndRegExp;
+                endReg.lastIndex = 0;
+                let cap;
+                while ((match = endReg.exec(masked)) != null) {
+                    cap = this._strongMiddleRegExp.exec(masked.slice(0, match.index + 3));
+                    if (cap) {
+                        break;
+                    }
+                }
+                if (cap) {
+                    const text = source.substring(2, cap[0].length - 2);
+                    source = source.substring(cap[0].length);
+                    tokens.push({ type: 'strong', text: text, tokens: this._tokenizeInline(text, links, inLink, inRawBlock, '') });
+                    continue;
+                }
+            }
+            match = this._emStartRegExp.exec(source);
+            if (match && (!match[1] || (match[1] && (prevChar === '' || this._punctuationRegExp.exec(prevChar))))) {
+                const masked = maskedSource.slice(-1 * source.length);
+                const endReg = match[0] === '*' ? this._emEndAstRegExp : this._emEndUndRegExp;
+                endReg.lastIndex = 0;
+                let cap;
+                while ((match = endReg.exec(masked)) != null) {
+                    cap = this._emMiddleRegExp.exec(masked.slice(0, match.index + 2));
+                    if (cap) {
+                        break;
+                    }
+                }
+                if (cap) {
+                    const text = source.slice(1, cap[0].length - 1);
+                    source = source.substring(cap[0].length);
+                    tokens.push({ type: 'em', text: text, tokens: this._tokenizeInline(text, links, inLink, inRawBlock, '') });
+                    continue;
+                }
+            }
+            match = this._codespanRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                let content = match[2].replace(/\n/g, ' ');
+                if (/[^ ]/.test(content) && content.startsWith(' ') && content.endsWith(' ')) {
+                    content = content.substring(1, content.length - 1);
+                }
+                tokens.push({ type: 'codespan', text: this._encode(content) });
+                continue;
+            }
+            match = this._brRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                tokens.push({ type: 'br' });
+                continue;
+            }
+            match = this._delRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                const text = match[1];
+                tokens.push({ type: 'del', text: text, tokens: this._tokenizeInline(text, links, inLink, inRawBlock, '') });
+                continue;
+            }
+            match = this._autolinkRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                const text = this._escape(match[1]);
+                const href = match[2] === '@' ? 'mailto:' + text : text;
+                tokens.push({ type: 'link', text: text, href: href, tokens: [ { type: 'text', raw: text, text } ] });
+                continue;
+            }
+            if (!inLink) {
+                match = this._urlRegExp.exec(source);
+                if (match) {
+                    const email = match[2] === '@';
+                    if (!email) {
+                        let prevCapZero;
+                        do {
+                            prevCapZero = match[0];
+                            match[0] = this._backpedalRegExp.exec(match[0])[0];
+                        } while (prevCapZero !== match[0]);
+                    }
+                    const text = this._escape(match[0]);
+                    const href = email ? ('mailto:' + text) : (match[1] === 'www.' ? 'http://' + text : text);
+                    source = source.substring(match[0].length);
+                    tokens.push({ type: 'link', text: text, href: href, tokens: [ { type: 'text', text: text } ] });
+                    continue;
+                }
+            }
+            match = this._textspanRegExp.exec(source);
+            if (match) {
+                source = source.substring(match[0].length);
+                prevChar = match[0].slice(-1);
+                tokens.push({ type: 'text' , text: inRawBlock ? match[0] : this._escape(match[0]) });
+                continue;
+            }
+            throw new Error("Unexpected '" + source.charCodeAt(0) + "'.");
+        }
+        return tokens;
+    }
+
+    _tokenizeBlock(tokens, links) {
+        for (const token of tokens) {
+            switch (token.type) {
+                case 'paragraph':
+                case 'text':
+                case 'heading': {
+                    token.tokens  = this._tokenizeInline(token.text, links, false, false, '');
+                    break;
+                }
+                case 'table': {
+                    token.tokens = {};
+                    token.tokens.header = token.header.map((header) => this._tokenizeInline(header, links, false, false, ''));
+                    token.tokens.cells = token.cells.map((cell) => cell.map((row) => this._tokenizeInline(row, links, false, false, '')));
+                    break;
+                }
+                case 'blockquote': {
+                    this._tokenizeBlock(token.tokens, links);
+                    break;
+                }
+                case 'list': {
+                    for (const item of token.items) {
+                        this._tokenizeBlock(item.tokens, links);
+                    }
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        }
+    }
+
+    _render(tokens, slugs, top) {
+        let html = '';
+        while (tokens.length > 0) {
+            const token = tokens.shift();
+            switch (token.type) {
+                case 'space': {
+                    continue;
+                }
+                case 'hr': {
+                    html += '<hr>\n';
+                    continue;
+                }
+                case 'heading': {
+                    const level = token.depth;
+                    const id = this._slug(slugs, this._renderInline(token.tokens, true));
+                    html += '<h' + level + ' id="' + id + '">' + this._renderInline(token.tokens) + '</h' + level + '>\n';
+                    continue;
+                }
+                case 'code': {
+                    const code = token.text;
+                    const language = (token.language || '').match(/\S*/)[0];
+                    html += '<pre><code' + (language ? ' class="' + 'language-' + this._encode(language) + '"' : '') + '>' + (token.escaped ? code : this._encode(code)) + '</code></pre>\n';
+                    continue;
+                }
+                case 'table': {
+                    let header = '';
+                    let cell = '';
+                    for (let j = 0; j < token.header.length; j++) {
+                        const content = this._renderInline(token.tokens.header[j]);
+                        const align = token.align[j];
+                        cell += '<th' + (align ? ' align="' + align + '"' : '') + '>' + content + '</th>\n';
+                    }
+                    header += '<tr>\n' + cell + '</tr>\n';
+                    let body = '';
+                    for (let j = 0; j < token.cells.length; j++) {
+                        const row = token.tokens.cells[j];
+                        cell = '';
+                        for (let k = 0; k < row.length; k++) {
+                            const content = this._renderInline(row[k]);
+                            const align = token.align[k];
+                            cell += '<td' + (align ? ' align="' + align + '"' : '') + '>' + content + '</td>\n';
+                        }
+                        body += '<tr>\n' + cell + '</tr>\n';
+                    }
+                    html += '<table>\n<thead>\n' + header + '</thead>\n' + (body ? '<tbody>' + body + '</tbody>' : body) + '</table>\n';
+                    continue;
+                }
+                case 'blockquote': {
+                    html += '<blockquote>\n' + this._render(token.tokens, slugs, true) + '</blockquote>\n';
+                    continue;
+                }
+                case 'list': {
+                    const ordered = token.ordered;
+                    const start = token.start;
+                    const loose = token.loose;
+                    let body = '';
+                    for (const item of token.items) {
+                        let itemBody = '';
+                        if (item.task) {
+                            const checkbox = '<input ' + (item.checked ? 'checked="" ' : '') + 'disabled="" type="checkbox"' + '> ';
+                            if (loose) {
+                                if (item.tokens.length > 0 && item.tokens[0].type === 'text') {
+                                    item.tokens[0].text = checkbox + ' ' + item.tokens[0].text;
+                                    if (item.tokens[0].tokens && item.tokens[0].tokens.length > 0 && item.tokens[0].tokens[0].type === 'text') {
+                                        item.tokens[0].tokens[0].text = checkbox + ' ' + item.tokens[0].tokens[0].text;
+                                    }
+                                }
+                                else {
+                                    item.tokens.unshift({ type: 'text', text: checkbox });
+                                }
+                            }
+                            else {
+                                itemBody += checkbox;
+                            }
+                        }
+                        itemBody += this._render(item.tokens, slugs, loose);
+                        body += '<li>' + itemBody + '</li>\n';
+                    }
+                    const type = (ordered ? 'ol' : 'ul');
+                    html += '<' + type + (ordered && start !== 1 ? (' start="' + start + '"') : '') + '>\n' + body + '</' + type + '>\n';
+                    continue;
+                }
+                case 'html': {
+                    html += token.text;
+                    continue;
+                }
+                case 'paragraph': {
+                    html += '<p>' + this._renderInline(token.tokens) + '</p>\n';
+                    continue;
+                }
+                case 'text': {
+                    html += top ? '<p>' : '';
+                    html += token.tokens ? this._renderInline(token.tokens) : token.text;
+                    while (tokens.length > 0 && tokens[0].type === 'text') {
+                        const token = tokens.shift();
+                        html += '\n' + (token.tokens ? this._renderInline(token.tokens) : token.text);
+                    }
+                    html += top ? '</p>\n' : '';
+                    continue;
+                }
+                default: {
+                    throw new Error("Unexpected token type '" + token.type + "'.");
+                }
+            }
+        }
+        return html;
+    }
+
+    _renderInline(tokens, slug) {
+        let html = '';
+        for (const token of tokens) {
+            switch (token.type) {
+                case 'escape':
+                case 'html':
+                case 'text': {
+                    html += token.text;
+                    break;
+                }
+                case 'link': {
+                    const text = this._renderInline(token.tokens, slug);
+                    html += slug ? text : '<a href="' + token.href + '"' + (token.title ? ' title="' + token.title + '"' : '') + ' target="_blank">' + text + '</a>';
+                    break;
+                }
+                case 'image': {
+                    html += slug ? token.text : '<img src="' + token.href + '" alt="' + token.text + '"' + (token.title ? ' title="' + token.title + '"' : '') + '>';
+                    break;
+                }
+                case 'strong': {
+                    const text = this._renderInline(token.tokens, slug);
+                    html += slug ? text : '<strong>' + text + '</strong>';
+                    break;
+                }
+                case 'em': {
+                    const text = this._renderInline(token.tokens, slug);
+                    html += slug ? text : '<em>' + text + '</em>';
+                    break;
+                }
+                case 'codespan': {
+                    html += slug ? token.text : '<code>' + token.text + '</code>';
+                    break;
+                }
+                case 'br': {
+                    html += slug ? '' : '<br>';
+                    break;
+                }
+                case 'del': {
+                    const text = this._renderInline(token.tokens, slug);
+                    html += slug ? text : '<del>' + text + '</del>';
+                    break;
+                }
+                default: {
+                    throw new Error("Unexpected token type '" + token.type + "'.");
+                }
+            }
+        }
+        return html;
+    }
+
+    _outputLink(match, href, title) {
+        title = title ? this._escape(title) : null;
+        const text = match[1].replace(/\\([[\]])/g, '$1');
+        return match[0].charAt(0) !== '!' ?
+            { type: 'link', href: href, title: title, text: text } :
+            { type: 'image', href: href, title: title, text: this._escape(text) };
+    }
+
+    _splitCells(tableRow, count) {
+        const row = tableRow.replace(/\|/g, (match, offset, str) => {
+            let escaped = false;
+            let position = offset;
+            while (--position >= 0 && str[position] === '\\') {
+                escaped = !escaped;
+            }
+            return escaped ? '|' : ' |';
+        });
+        const cells = row.split(/ \|/);
+        if (cells.length > count) {
+            cells.splice(count);
+        }
+        else {
+            while (cells.length < count) {
+                cells.push('');
+            }
+        }
+        return cells.map((cell) => cell.trim().replace(/\\\|/g, '|'));
+    }
+
+    _slug(slugs, value) {
+        value = value.replace(/&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/ig, (_, n) => {
+            n = n.toLowerCase();
+            if (n === 'colon') {
+                return ':';
+            }
+            if (n.charAt(0) === '#') {
+                return String.fromCharCode(n.charAt(1) === 'x' ? parseInt(n.substring(2), 16) : +n.substring(1));
+            }
+            return '';
+        });
+        value = value.toLowerCase().trim()
+            .replace(/<[!/a-z].*?>/ig, '')
+            .replace(/[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g, '')
+            .replace(/\s/g, '-');
+        let slug = value;
+        let count = 0;
+        if (slugs.has(value)) {
+            count = slugs.get(value);
+            do {
+                count++;
+                slug = value + '-' + count;
+            }
+            while (slugs.has(slug));
+        }
+        slugs.set(value, count);
+        slugs.set(slug, 0);
+        return slug;
+    }
+
+    _encode(content) {
+        if (this._escapeTestRegExp.test(content)) {
+            return content.replace(this._escapeReplaceRegExp, (ch) => this._escapeReplacementsMap[ch]);
+        }
+        return content;
+    }
+
+    _escape(content) {
+        if (this._escapeTestNoEncodeRegExp.test(content)) {
+            return content.replace(this._escapeReplaceNoEncodeRegExp, (ch) => this._escapeReplacementsMap[ch]);
+        }
+        return content;
+    }
+};
+
+if (typeof module !== 'undefined' && typeof module.exports === 'object') {
+    module.exports.Sidebar = sidebar.Sidebar;
+    module.exports.ModelSidebar = sidebar.ModelSidebar;
+    module.exports.NodeSidebar = sidebar.NodeSidebar;
+    module.exports.DocumentationSidebar = sidebar.DocumentationSidebar;
+    module.exports.FindSidebar = sidebar.FindSidebar;
+    module.exports.Formatter = sidebar.Formatter;
+}
diff --git a/media/external/netron/view.js b/media/external/netron/view.js
new file mode 100644
index 00000000..e0a4e712
--- /dev/null
+++ b/media/external/netron/view.js
@@ -0,0 +1,2105 @@
+
+var view = view || {};
+
+var base = base || require('./base');
+var zip = zip || require('./zip');
+var gzip = gzip || require('./gzip');
+var tar = tar || require('./tar');
+var json = json || require('./json');
+var xml = xml || require('./xml');
+var protobuf = protobuf || require('./protobuf');
+var flatbuffers = flatbuffers || require('./flatbuffers');
+var python = python || require('./python');
+var sidebar = sidebar || require('./view-sidebar');
+var grapher = grapher || require('./view-grapher');
+
+view.View = class {
+
+    constructor(host, id) {
+        this._host = host;
+        this._id = id ? ('-' + id) : '';
+        this._options = {
+            initializers: true,
+            attributes: false,
+            names: false,
+            direction: 'vertical',
+            mousewheel: 'scroll'
+        };
+        this._host.initialize(this).then(() => {
+            this._model = null;
+            this._graphs = [];
+            this._selection = [];
+            this._sidebar = new sidebar.Sidebar(this._host, id);
+            this._searchText = '';
+            this._modelFactoryService = new view.ModelFactoryService(this._host);
+            this._getElementById('zoom-in-button').addEventListener('click', () => {
+                this.zoomIn();
+            });
+            this._getElementById('zoom-out-button').addEventListener('click', () => {
+                this.zoomOut();
+            });
+            this._getElementById('back-button').addEventListener('click', () => {
+                this.popGraph();
+            });
+            this._getElementById('name-button').addEventListener('click', () => {
+                this.showDocumentation(this.activeGraph);
+            });
+            this._getElementById('sidebar').addEventListener('mousewheel', (e) => {
+                this._preventDefault(e);
+            }, { passive: true });
+            this._host.document.addEventListener('keydown', () => {
+                this.clearSelection();
+            });
+            this._host.start();
+            const container = this._getElementById('graph');
+            container.addEventListener('scroll', (e) => this._scrollHandler(e));
+            container.addEventListener('wheel', (e) => this._wheelHandler(e), { passive: false });
+            container.addEventListener('mousedown', (e) => this._mouseDownHandler(e));
+            switch (this._host.agent) {
+                case 'safari':
+                    container.addEventListener('gesturestart', (e) => this._gestureStartHandler(e), false);
+                    break;
+                default:
+                    container.addEventListener('touchstart', (e) => this._touchStartHandler(e), { passive: true });
+                    break;
+            }
+        }).catch((err) => {
+            this.error(err, null, null);
+        });
+    }
+
+    show(page) {
+        if (!page) {
+            page = (!this._model && !this.activeGraph) ? 'welcome' : 'default';
+        }
+        this._host.screen(page);
+        if (this._sidebar) {
+            this._sidebar.close();
+        }
+        this._host.document.body.setAttribute('class', page);
+        if (page === 'default') {
+            const container = this._getElementById('graph');
+            if (container) {
+                container.focus();
+            }
+        }
+        if (page === 'welcome') {
+            const element = this._getElementById('open-file-button');
+            if (element) {
+                element.focus();
+            }
+        }
+        this._page = page;
+    }
+
+    cut() {
+        this._host.document.execCommand('cut');
+    }
+
+    copy() {
+        this._host.document.execCommand('copy');
+    }
+
+    paste() {
+        this._host.document.execCommand('paste');
+    }
+
+    selectAll() {
+        this._host.document.execCommand('selectall');
+    }
+
+    find() {
+        if (this._graph) {
+            this.clearSelection();
+            const graphElement = this._getElementById('canvas');
+            const view = new sidebar.FindSidebar(this._host, graphElement, this._graph);
+            view.on('search-text-changed', (sender, text) => {
+                this._searchText = text;
+            });
+            view.on('select', (sender, selection) => {
+                this.select(selection);
+            });
+            this._sidebar.open(view.content, 'Find');
+            view.focus(this._searchText);
+        }
+    }
+
+    get model() {
+        return this._model;
+    }
+
+    get options() {
+        return this._options;
+    }
+
+    toggle(name) {
+        switch (name) {
+            case 'names':
+            case 'attributes':
+            case 'initializers':
+                this._options[name] = !this._options[name];
+                this._reload();
+                break;
+            case 'direction':
+                this._options.direction = this._options.direction === 'vertical' ? 'horizontal' : 'vertical';
+                this._reload();
+                break;
+            case 'mousewheel':
+                this._options.mousewheel = this._options.mousewheel === 'scroll' ? 'zoom' : 'scroll';
+                break;
+            default:
+                throw new view.Error("Unsupported toogle '" + name + "'.");
+        }
+    }
+
+    _reload() {
+        this.show('welcome spinner');
+        if (this._model && this._graphs.length > 0) {
+            this._updateGraph(this._model, this._graphs).catch((error) => {
+                if (error) {
+                    this.error(error, 'Graph update failed.', 'welcome');
+                }
+            });
+        }
+    }
+
+    _timeout(time) {
+        return new Promise((resolve) => {
+            setTimeout(() => { resolve(); }, time);
+        });
+    }
+
+    _getElementById(id) {
+        return this._host.document.getElementById(id + this._id);
+    }
+
+    zoomIn() {
+        this._updateZoom(this._zoom * 1.1);
+    }
+
+    zoomOut() {
+        this._updateZoom(this._zoom * 0.9);
+    }
+
+    resetZoom() {
+        this._updateZoom(1);
+    }
+
+    _preventDefault(e) {
+        if (e.shiftKey || e.ctrlKey) {
+            e.preventDefault();
+        }
+    }
+
+    _updateZoom(zoom, e) {
+        const container = this._getElementById('graph');
+        const canvas = this._getElementById('canvas');
+        const limit = this._options.direction === 'vertical' ?
+            container.clientHeight / this._height :
+            container.clientWidth / this._width;
+        const min = Math.min(Math.max(limit, 0.15), 1);
+        zoom = Math.max(min, Math.min(zoom, 1.4));
+        const scrollLeft = this._scrollLeft || container.scrollLeft;
+        const scrollTop = this._scrollTop || container.scrollTop;
+        const x = (e ? e.pageX : (container.clientWidth / 2)) + scrollLeft;
+        const y = (e ? e.pageY : (container.clientHeight / 2)) + scrollTop;
+        const width = zoom * this._width;
+        const height = zoom * this._height;
+        canvas.style.width = width + 'px';
+        canvas.style.height = height + 'px';
+        this._scrollLeft = Math.max(0, ((x * zoom) / this._zoom) - (x - scrollLeft));
+        this._scrollTop = Math.max(0, ((y * zoom) / this._zoom) - (y - scrollTop));
+        container.scrollLeft = this._scrollLeft;
+        container.scrollTop = this._scrollTop;
+        this._zoom = zoom;
+    }
+
+    _mouseDownHandler(e) {
+        if (e.buttons === 1) {
+            const document = this._host.document.documentElement;
+            document.style.cursor = 'grabbing';
+            const container = this._getElementById('graph');
+            this._mousePosition = {
+                left: container.scrollLeft,
+                top: container.scrollTop,
+                x: e.clientX,
+                y: e.clientY
+            };
+            e.stopImmediatePropagation();
+            const mouseMoveHandler = (e) => {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+                const dx = e.clientX - this._mousePosition.x;
+                const dy = e.clientY - this._mousePosition.y;
+                this._mousePosition.moved = dx * dx + dy * dy > 0;
+                if (this._mousePosition.moved) {
+                    const container = this._getElementById('graph');
+                    container.scrollTop = this._mousePosition.top - dy;
+                    container.scrollLeft = this._mousePosition.left - dx;
+                }
+            };
+            const mouseUpHandler = () => {
+                document.style.cursor = null;
+                container.removeEventListener('mouseup', mouseUpHandler);
+                container.removeEventListener('mouseleave', mouseUpHandler);
+                container.removeEventListener('mousemove', mouseMoveHandler);
+                if (this._mousePosition && this._mousePosition.moved) {
+                    e.preventDefault();
+                    e.stopImmediatePropagation();
+                    delete this._mousePosition;
+                    document.addEventListener('click', clickHandler, true);
+                }
+            };
+            const clickHandler = (e) => {
+                e.stopPropagation();
+                document.removeEventListener('click', clickHandler, true);
+            };
+            container.addEventListener('mousemove', mouseMoveHandler);
+            container.addEventListener('mouseup', mouseUpHandler);
+            container.addEventListener('mouseleave', mouseUpHandler);
+        }
+    }
+
+    _touchStartHandler(e) {
+        if (e.touches.length === 2) {
+            this._touchPoints = Array.from(e.touches);
+            this._touchZoom = this._zoom;
+        }
+        const touchMoveHandler = (e) => {
+            if (Array.isArray(this._touchPoints) && this._touchPoints.length === 2 && e.touches.length === 2) {
+                const distance = (points) => {
+                    const dx =(points[1].clientX - points[0].clientX);
+                    const dy =(points[1].clientY - points[0].clientY);
+                    return Math.sqrt(dx * dx + dy * dy);
+                };
+                const d1 = distance(Array.from(e.touches));
+                const d2 = distance(this._touchPoints);
+                if (d2 !== 0) {
+                    const points = this._touchPoints;
+                    const e = {
+                        pageX: (points[1].pageX + points[0].pageX) / 2,
+                        pageY: (points[1].pageY + points[0].pageY) / 2
+                    };
+                    const zoom = d2 === 0 ? d1 : d1 / d2;
+                    this._updateZoom(this._touchZoom * zoom, e);
+                }
+            }
+        };
+        const touchEndHandler = () => {
+            container.removeEventListener('touchmove', touchMoveHandler, { passive: true });
+            container.removeEventListener('touchcancel', touchEndHandler, { passive: true });
+            container.removeEventListener('touchend', touchEndHandler, { passive: true });
+            delete this._touchPoints;
+            delete this._touchZoom;
+        };
+        const container = this._getElementById('graph');
+        container.addEventListener('touchmove', touchMoveHandler, { passive: true });
+        container.addEventListener('touchcancel', touchEndHandler, { passive: true });
+        container.addEventListener('touchend', touchEndHandler, { passive: true });
+    }
+
+    _gestureStartHandler(e) {
+        e.preventDefault();
+        this._gestureZoom = this._zoom;
+        const container = this._getElementById('graph');
+        const gestureChangeHandler = (e) => {
+            e.preventDefault();
+            this._updateZoom(this._gestureZoom * e.scale, e);
+        };
+        const gestureEndHandler = (e) => {
+            container.removeEventListener('gesturechange', gestureChangeHandler, false);
+            container.removeEventListener('gestureend', gestureEndHandler, false);
+            e.preventDefault();
+            if (this._gestureZoom) {
+                this._updateZoom(this._gestureZoom * e.scale, e);
+                delete this._gestureZoom;
+            }
+        };
+        container.addEventListener('gesturechange', gestureChangeHandler, false);
+        container.addEventListener('gestureend', gestureEndHandler, false);
+    }
+
+    _scrollHandler(e) {
+        if (this._scrollLeft && e.target.scrollLeft !== Math.floor(this._scrollLeft)) {
+            delete this._scrollLeft;
+        }
+        if (this._scrollTop && e.target.scrollTop !== Math.floor(this._scrollTop)) {
+            delete this._scrollTop;
+        }
+    }
+
+    _wheelHandler(e) {
+        if (e.shiftKey || e.ctrlKey || this._options.mousewheel === 'zoom') {
+            const delta = -e.deltaY * (e.deltaMode === 1 ? 0.05 : e.deltaMode ? 1 : 0.002) * (e.ctrlKey ? 10 : 1);
+            this._updateZoom(this._zoom * Math.pow(2, delta), e);
+            e.preventDefault();
+        }
+    }
+
+    select(selection) {
+        this.clearSelection();
+        if (selection && selection.length > 0) {
+            const container = this._getElementById('graph');
+            let x = 0;
+            let y = 0;
+            for (const element of selection) {
+                element.classList.add('select');
+                this._selection.push(element);
+                const rect = element.getBoundingClientRect();
+                x += rect.left + (rect.width / 2);
+                y += rect.top + (rect.height / 2);
+            }
+            x = x / selection.length;
+            y = y / selection.length;
+            const rect = container.getBoundingClientRect();
+            const left = (container.scrollLeft + x - rect.left) - (rect.width / 2);
+            const top = (container.scrollTop + y - rect.top) - (rect.height / 2);
+            container.scrollTo({ left: left, top: top, behavior: 'smooth' });
+        }
+    }
+
+    clearSelection() {
+        while (this._selection.length > 0) {
+            const element = this._selection.pop();
+            element.classList.remove('select');
+        }
+    }
+
+    error(err, name, screen) {
+        if (this._sidebar) {
+            this._sidebar.close();
+        }
+        this._host.exception(err, false);
+
+        const knowns = [
+            { name: '', message: /^Invalid argument identifier/, url: 'https://github.com/lutzroeder/netron/issues/540' },
+            { name: '', message: /^Cannot read property/, url: 'https://github.com/lutzroeder/netron/issues/647' },
+            { name: '', message: /^Failed to render tensor/, url: 'https://github.com/lutzroeder/netron/issues/681' },
+            { 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: /^start offset of Int32Array/, url: 'https://github.com/lutzroeder/netron/issues/565' },
+            { name: 'RangeError', message: /^Maximum call stack size exceeded/, url: 'https://github.com/lutzroeder/netron/issues/589' },
+            { name: 'RangeError', message: /^Invalid string length/, url: 'https://github.com/lutzroeder/netron/issues/648' },
+            { 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 Caffe model.', message: /^File format is not caffe\.NetParameter/, url: 'https://github.com/lutzroeder/netron/issues/563' },
+            { name: 'Error loading Darknet model.', message: /^Invalid tensor shape/, url: 'https://github.com/lutzroeder/netron/issues/541' },
+            { name: 'Error loading Keras model.', message: /^Unsupported data object header version/, url: 'https://github.com/lutzroeder/netron/issues/548' },
+            { name: 'Error loading MNN model.', message: /^File format is not mnn\.Net/, url: 'https://github.com/lutzroeder/netron/issues/746' },
+            { 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' },
+            { name: 'Error loading PyTorch model.', message: /^Failed to resolve module/, url: 'https://github.com/lutzroeder/netron/issues/545' },
+            { name: 'Error loading PyTorch model.', message: /^Unsupported function/, url: 'https://github.com/lutzroeder/netron/issues/546' },
+            { name: 'Error loading PyTorch model.', message: /^Unsupported uninitialized argument/, url: 'https://github.com/lutzroeder/netron/issues/547' },
+            { name: 'Error loading ONNX model.', message: /^File format is not onnx\.ModelProto/, url: 'https://github.com/lutzroeder/netron/issues/549' },
+            { name: 'Error loading TensorFlow model.', message: /^File text format is not TensorFlow\.js graph-model/, url: 'https://github.com/lutzroeder/netron/issues/764' },
+            { name: 'Error loading TensorFlow Lite model.', message: /^Offset is outside the bounds of the DataView/, url: 'https://github.com/lutzroeder/netron/issues/563' },
+            { name: 'Error loading UFF model.', message: /^Unknown attribute/, url: 'https://github.com/lutzroeder/netron/issues/649' }
+        ];
+        const known = knowns.find((known) => (known.name.length === 0 || known.name === err.name) && err.message.match(known.message));
+        const message = err.message + (known ? '\n\nPlease provide information about this issue at ' + known.url + '.' : '');
+        name = name || err.name;
+        this._host.error(name, message);
+        this.show(screen !== undefined ? screen : 'welcome');
+        if (known) {
+            this._host.openURL(known.url);
+        }
+    }
+
+    accept(file) {
+        return this._modelFactoryService.accept(file);
+    }
+
+    open(context) {
+        this._host.event('Model', 'Open', 'Size', context.stream ? context.stream.length : 0);
+        this._sidebar.close();
+        return this._timeout(2).then(() => {
+            return this._modelFactoryService.open(context).then((model) => {
+                const format = [];
+                if (model.format) {
+                    format.push(model.format);
+                }
+                if (model.producer) {
+                    format.push('(' + model.producer + ')');
+                }
+                if (format.length > 0) {
+                    this._host.event('Model', 'Format', format.join(' '));
+                }
+                return this._timeout(20).then(() => {
+                    const graphs = Array.isArray(model.graphs) && model.graphs.length > 0 ? [ model.graphs[0] ] : [];
+                    return this._updateGraph(model, graphs);
+                });
+            });
+        });
+    }
+
+    _updateActiveGraph(graph) {
+        this._sidebar.close();
+        if (this._model) {
+            const model = this._model;
+            this.show('welcome spinner');
+            this._timeout(200).then(() => {
+                return this._updateGraph(model, [ graph ]).catch((error) => {
+                    if (error) {
+                        this.error(error, 'Graph update failed.', 'welcome');
+                    }
+                });
+            });
+        }
+    }
+
+    get activeGraph() {
+        return Array.isArray(this._graphs) && this._graphs.length > 0 ? this._graphs[0] : null;
+    }
+
+    _updateGraph(model, graphs) {
+        const lastModel = this._model;
+        const lastGraphs = this._graphs;
+        this._model = model;
+        this._graphs = graphs;
+        const graph = this.activeGraph;
+        return this._timeout(100).then(() => {
+            if (graph && graph != lastGraphs[0]) {
+                const nodes = graph.nodes;
+                if (nodes.length > 2048) {
+                    if (!this._host.confirm('Large model detected.', 'This graph contains a large number of nodes and might take a long time to render. Do you want to continue?')) {
+                        this._host.event('Graph', 'Render', 'Skip', nodes.length);
+                        this.show(null);
+                        return null;
+                    }
+                }
+            }
+            const update = () => {
+                const nameButton = this._getElementById('name-button');
+                const backButton = this._getElementById('back-button');
+                if (this._graphs.length > 1) {
+                    const graph = this.activeGraph;
+                    nameButton.innerHTML = graph ? graph.name : '';
+                    backButton.style.opacity = 1;
+                    nameButton.style.opacity = 1;
+                }
+                else {
+                    backButton.style.opacity = 0;
+                    nameButton.style.opacity = 0;
+                }
+            };
+            return this.renderGraph(this._model, this.activeGraph).then(() => {
+                if (this._page !== 'default') {
+                    this.show('default');
+                }
+                update();
+                return this._model;
+            }).catch((error) => {
+                this._model = lastModel;
+                this._graphs = lastGraphs;
+                return this.renderGraph(this._model, this.activeGraph).then(() => {
+                    if (this._page !== 'default') {
+                        this.show('default');
+                    }
+                    update();
+                    throw error;
+                });
+            });
+        });
+    }
+
+    pushGraph(graph) {
+        if (graph !== this.activeGraph) {
+            this._sidebar.close();
+            this._updateGraph(this._model, [ graph ].concat(this._graphs));
+        }
+    }
+
+    popGraph() {
+        if (this._graphs.length > 1) {
+            this._sidebar.close();
+            return this._updateGraph(this._model, this._graphs.slice(1));
+        }
+        return null;
+    }
+
+    renderGraph(model, graph) {
+        try {
+            this._graph = null;
+
+            const canvas = this._getElementById('canvas');
+            while (canvas.lastChild) {
+                canvas.removeChild(canvas.lastChild);
+            }
+            if (!graph) {
+                return Promise.resolve();
+            }
+            else {
+                this._zoom = 1;
+
+                const groups = graph.groups;
+                const nodes = graph.nodes;
+                this._host.event('Graph', 'Render', 'Size', nodes.length);
+
+                const options = {};
+                options.nodesep = 20;
+                options.ranksep = 20;
+                const rotate = graph.nodes.every((node) => node.inputs.filter((input) => input.arguments.every((argument) => !argument.initializer)).length === 0 && node.outputs.length === 0);
+                const horizontal = rotate ? this._options.direction === 'vertical' : this._options.direction !== 'vertical';
+                if (horizontal) {
+                    options.rankdir = "LR";
+                }
+                if (nodes.length > 3000) {
+                    options.ranker = 'longest-path';
+                }
+
+                const viewGraph = new view.Graph(this, model, groups, options);
+                viewGraph.add(graph);
+
+                // Workaround for Safari background drag/zoom issue:
+                // https://stackoverflow.com/questions/40887193/d3-js-zoom-is-not-working-with-mousewheel-in-safari
+                const background = this._host.document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+                background.setAttribute('id', 'background');
+                background.setAttribute('fill', 'none');
+                background.setAttribute('pointer-events', 'all');
+                canvas.appendChild(background);
+
+                const origin = this._host.document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                origin.setAttribute('id', 'origin');
+                canvas.appendChild(origin);
+
+                viewGraph.build(this._host.document, origin);
+
+                this._zoom = 1;
+
+                return this._timeout(20).then(() => {
+
+                    viewGraph.update();
+
+                    const elements = Array.from(canvas.getElementsByClassName('graph-input') || []);
+                    if (elements.length === 0) {
+                        const nodeElements = Array.from(canvas.getElementsByClassName('graph-node') || []);
+                        if (nodeElements.length > 0) {
+                            elements.push(nodeElements[0]);
+                        }
+                    }
+
+                    const size = canvas.getBBox();
+                    const margin = 100;
+                    const width = Math.ceil(margin + size.width + margin);
+                    const height = Math.ceil(margin + size.height + margin);
+                    origin.setAttribute('transform', 'translate(' + margin.toString() + ', ' + margin.toString() + ') scale(1)');
+                    background.setAttribute('width', width);
+                    background.setAttribute('height', height);
+                    this._width = width;
+                    this._height = height;
+                    delete this._scrollLeft;
+                    delete this._scrollRight;
+                    canvas.setAttribute('viewBox', '0 0 ' + width + ' ' + height);
+                    canvas.setAttribute('width', width);
+                    canvas.setAttribute('height', height);
+
+                    this._zoom = 1;
+                    this._updateZoom(this._zoom);
+
+                    const container = this._getElementById('graph');
+                    if (elements && elements.length > 0) {
+                        // Center view based on input elements
+                        const xs = [];
+                        const ys = [];
+                        for (let i = 0; i < elements.length; i++) {
+                            const element = elements[i];
+                            const rect = element.getBoundingClientRect();
+                            xs.push(rect.left + (rect.width / 2));
+                            ys.push(rect.top + (rect.height / 2));
+                        }
+                        let x = xs[0];
+                        const y = ys[0];
+                        if (ys.every(y => y === ys[0])) {
+                            x = xs.reduce((a, b) => a + b, 0) / xs.length;
+                        }
+                        const graphRect = container.getBoundingClientRect();
+                        const left = (container.scrollLeft + x - graphRect.left) - (graphRect.width / 2);
+                        const top = (container.scrollTop + y - graphRect.top) - (graphRect.height / 2);
+                        container.scrollTo({ left: left, top: top, behavior: 'auto' });
+                    }
+                    else {
+                        const canvasRect = canvas.getBoundingClientRect();
+                        const graphRect = container.getBoundingClientRect();
+                        const left = (container.scrollLeft + (canvasRect.width / 2) - graphRect.left) - (graphRect.width / 2);
+                        const top = (container.scrollTop + (canvasRect.height / 2) - graphRect.top) - (graphRect.height / 2);
+                        container.scrollTo({ left: left, top: top, behavior: 'auto' });
+                    }
+                    this._graph = viewGraph;
+                    return;
+                });
+            }
+        }
+        catch (error) {
+            return Promise.reject(error);
+        }
+    }
+
+    applyStyleSheet(element, name) {
+        let rules = [];
+        for (const styleSheet of this._host.document.styleSheets) {
+            if (styleSheet && styleSheet.href && styleSheet.href.endsWith('/' + name)) {
+                rules = styleSheet.cssRules;
+                break;
+            }
+        }
+        const nodes = element.getElementsByTagName('*');
+        for (const node of nodes) {
+            for (const rule of rules) {
+                if (node.matches(rule.selectorText)) {
+                    for (const item of rule.style) {
+                        node.style[item] = rule.style[item];
+                    }
+                }
+            }
+        }
+    }
+
+    export(file) {
+        const lastIndex = file.lastIndexOf('.');
+        const extension = (lastIndex != -1) ? file.substring(lastIndex + 1) : '';
+        if (this.activeGraph && (extension === 'png' || extension === 'svg')) {
+            const canvas = this._getElementById('canvas');
+            const clone = canvas.cloneNode(true);
+            this.applyStyleSheet(clone, 'view-grapher.css');
+            clone.setAttribute('id', 'export');
+            clone.removeAttribute('viewBox');
+            clone.removeAttribute('width');
+            clone.removeAttribute('height');
+            clone.style.removeProperty('opacity');
+            clone.style.removeProperty('display');
+            const background = clone.querySelector('#background');
+            const origin = clone.querySelector('#origin');
+            origin.setAttribute('transform', 'translate(0,0) scale(1)');
+            background.removeAttribute('width');
+            background.removeAttribute('height');
+
+            const parent = canvas.parentElement;
+            parent.insertBefore(clone, canvas);
+            const size = clone.getBBox();
+            parent.removeChild(clone);
+            parent.removeChild(canvas);
+            parent.appendChild(canvas);
+            const delta = (Math.min(size.width, size.height) / 2.0) * 0.1;
+            const width = Math.ceil(delta + size.width + delta);
+            const height = Math.ceil(delta + size.height + delta);
+            origin.setAttribute('transform', 'translate(' + (delta - size.x).toString() + ', ' + (delta - size.y).toString() + ') scale(1)');
+            clone.setAttribute('width', width);
+            clone.setAttribute('height', height);
+            background.setAttribute('width', width);
+            background.setAttribute('height', height);
+            background.setAttribute('fill', '#fff');
+
+            const data = new XMLSerializer().serializeToString(clone);
+
+            if (extension === 'svg') {
+                const blob = new Blob([ data ], { type: 'image/svg' });
+                this._host.export(file, blob);
+            }
+
+            if (extension === 'png') {
+                const image = new Image();
+                image.onload = () => {
+                    const max = Math.max(width, height);
+                    const scale = Math.min(24000.0 / max, 2.0);
+                    const canvas = this._host.document.createElement('canvas');
+                    canvas.width = Math.ceil(width * scale);
+                    canvas.height = Math.ceil(height * scale);
+                    const context = canvas.getContext('2d');
+                    context.scale(scale, scale);
+                    context.drawImage(image, 0, 0);
+                    canvas.toBlob((blob) => {
+                        if (blob) {
+                            this._host.export(file, blob);
+                        }
+                        else {
+                            const err = new Error();
+                            err.name = 'Error exporting image.';
+                            err.message = 'Image may be too large to render as PNG.';
+                            this._host.exception(err, false);
+                            this._host.error(err.name, err.message);
+                        }
+                    }, 'image/png');
+                };
+                image.src = 'data:image/svg+xml;base64,' + this._host.window.btoa(unescape(encodeURIComponent(data)));
+            }
+        }
+    }
+
+    showModelProperties() {
+        if (this._model) {
+            try {
+                const modelSidebar = new sidebar.ModelSidebar(this._host, this._model, this.activeGraph);
+                modelSidebar.on('update-active-graph', (sender, graph) => {
+                    this._updateActiveGraph(graph);
+                });
+                const content = modelSidebar.render();
+                this._sidebar.open(content, 'Model Properties');
+            }
+            catch (error) {
+                const content = " in '" + this._model.identifier + "'.";
+                if (error && !error.message.endsWith(content) && (error.context === undefined || error.context === true)) {
+                    error.message = error.message.replace(/\.$/, '') + content;
+                }
+                this.error(error, 'Error showing model properties.', null);
+            }
+        }
+    }
+
+    showNodeProperties(node, input) {
+        if (node) {
+            try {
+                const nodeSidebar = new sidebar.NodeSidebar(this._host, node);
+                nodeSidebar.on('show-documentation', (/* sender, e */) => {
+                    this.showDocumentation(node.type);
+                });
+                nodeSidebar.on('show-graph', (sender, graph) => {
+                    this.pushGraph(graph);
+                });
+                nodeSidebar.on('export-tensor', (sender, tensor) => {
+                    const defaultPath = tensor.name ? tensor.name.split('/').join('_').split(':').join('_').split('.').join('_') : 'tensor';
+                    this._host.save('NumPy Array', 'npy', defaultPath, (file) => {
+                        try {
+                            let data_type = tensor.type.dataType;
+                            if (data_type === 'boolean') {
+                                data_type = 'bool';
+                            }
+                            const execution = new python.Execution(null);
+                            const bytes = execution.invoke('io.BytesIO', []);
+                            const dtype = execution.invoke('numpy.dtype', [ data_type ]);
+                            const array = execution.invoke('numpy.asarray', [ tensor.value, dtype ]);
+                            execution.invoke('numpy.save', [ bytes, array ]);
+                            bytes.seek(0);
+                            const blob = new Blob([ bytes.read() ], { type: 'application/octet-stream' });
+                            this._host.export(file, blob);
+                        }
+                        catch (error) {
+                            this.error(error, 'Error saving NumPy tensor.', null);
+                        }
+                    });
+                });
+                nodeSidebar.on('error', (sender, error) => {
+                    if (this._model) {
+                        error.message = error.message.replace(/\.$/, '') + " in '" + this._model.identifier + "'.";
+                    }
+                    this.error(error, null, null);
+                });
+                if (input) {
+                    nodeSidebar.toggleInput(input.name);
+                }
+                this._sidebar.open(nodeSidebar.render(), 'Node Properties');
+            }
+            catch (error) {
+                const content = " in '" + this._model.identifier + "'.";
+                if (error && !error.message.endsWith(content) && (error.context === undefined || error.context === true)) {
+                    error.message = error.message.replace(/\.$/, '') + content;
+                }
+                this.error(error, 'Error showing node properties.', null);
+            }
+        }
+    }
+
+    showDocumentation(type) {
+        if (type && (type.description || type.inputs || type.outputs || type.attributes)) {
+            if (type.nodes && type.nodes.length > 0) {
+                this.pushGraph(type);
+            }
+            const documentationSidebar = new sidebar.DocumentationSidebar(this._host, type);
+            documentationSidebar.on('navigate', (sender, e) => {
+                this._host.openURL(e.link);
+            });
+            const title = type.type === 'function' ? 'Function' : 'Documentation';
+            this._sidebar.push(documentationSidebar.render(), title);
+        }
+    }
+};
+
+view.Graph = class extends grapher.Graph {
+
+    constructor(view, model, compound, options) {
+        super(compound, options);
+        this.view = view;
+        this.model = model;
+        this._arguments = new Map();
+        this._nodeKey = 0;
+    }
+
+    createNode(node) {
+        const value = new view.Node(this, node);
+        value.name = (this._nodeKey++).toString();
+        // value.name = node.name;
+        this.setNode(value);
+        return value;
+    }
+
+    createInput(input) {
+        const value = new view.Input(this, input);
+        value.name = (this._nodeKey++).toString();
+        this.setNode(value);
+        return value;
+    }
+
+    createOutput(output) {
+        const value = new view.Output(this, output);
+        value.name = (this._nodeKey++).toString();
+        this.setNode(value);
+        return value;
+    }
+
+    createArgument(argument) {
+        const name = argument.name;
+        if (!this._arguments.has(name)) {
+            this._arguments.set(name, new view.Argument(this, argument));
+        }
+        return this._arguments.get(name);
+    }
+
+    createEdge(from, to) {
+        const value = new view.Edge(from, to);
+        return value;
+    }
+
+    add(graph) {
+        const clusters = new Set();
+        const clusterParentMap = new Map();
+        const groups = graph.groups;
+        if (groups) {
+            for (const node of graph.nodes) {
+                if (node.group) {
+                    const path = node.group.split('/');
+                    while (path.length > 0) {
+                        const name = path.join('/');
+                        path.pop();
+                        clusterParentMap.set(name, path.join('/'));
+                    }
+                }
+            }
+        }
+
+        for (const input of graph.inputs) {
+            const viewInput = this.createInput(input);
+            for (const argument of input.arguments) {
+                this.createArgument(argument).from(viewInput);
+            }
+        }
+
+        for (const node of graph.nodes) {
+
+            const viewNode = this.createNode(node);
+
+            const inputs = node.inputs;
+            for (const input of inputs) {
+                for (const argument of input.arguments) {
+                    if (argument.name != '' && !argument.initializer) {
+                        this.createArgument(argument).to(viewNode);
+                    }
+                }
+            }
+            let outputs = node.outputs;
+            if (node.chain && node.chain.length > 0) {
+                const chainOutputs = node.chain[node.chain.length - 1].outputs;
+                if (chainOutputs.length > 0) {
+                    outputs = chainOutputs;
+                }
+            }
+            for (const output of outputs) {
+                for (const argument of output.arguments) {
+                    if (!argument) {
+                        throw new view.Error("Invalid null argument in '" + this.model.identifier + "'.");
+                    }
+                    if (argument.name != '') {
+                        this.createArgument(argument).from(viewNode);
+                    }
+                }
+            }
+
+            if (node.controlDependencies && node.controlDependencies.length > 0) {
+                for (const argument of node.controlDependencies) {
+                    this.createArgument(argument).to(viewNode, true);
+                }
+            }
+
+            const createCluster = (name) => {
+                if (!clusters.has(name)) {
+                    this.setNode({ name: name, rx: 5, ry: 5});
+                    clusters.add(name);
+                    const parent = clusterParentMap.get(name);
+                    if (parent) {
+                        createCluster(parent);
+                        this.setParent(name, parent);
+                    }
+                }
+            };
+
+            if (groups) {
+                let groupName = node.group;
+                if (groupName && groupName.length > 0) {
+                    if (!clusterParentMap.has(groupName)) {
+                        const lastIndex = groupName.lastIndexOf('/');
+                        if (lastIndex != -1) {
+                            groupName = groupName.substring(0, lastIndex);
+                            if (!clusterParentMap.has(groupName)) {
+                                groupName = null;
+                            }
+                        }
+                        else {
+                            groupName = null;
+                        }
+                    }
+                    if (groupName) {
+                        createCluster(groupName);
+                        this.setParent(viewNode.name, groupName);
+                    }
+                }
+            }
+        }
+
+        for (const output of graph.outputs) {
+            const viewOutput = this.createOutput(output);
+            for (const argument of output.arguments) {
+                this.createArgument(argument).to(viewOutput);
+            }
+        }
+    }
+
+    build(document, origin) {
+        for (const argument of this._arguments.values()) {
+            argument.build();
+        }
+        super.build(document, origin);
+    }
+};
+
+view.Node = class extends grapher.Node {
+
+    constructor(context, value) {
+        super();
+        this.context = context;
+        this.value = value;
+        view.Node.counter = view.Node.counter || 0;
+        this.id = 'node-' + (value.name ? 'name-' + value.name : 'id-' + (view.Node.counter++).toString());
+        this._add(this.value);
+    }
+
+    get class() {
+        return 'graph-node';
+    }
+
+    get inputs() {
+        return this.value.inputs;
+    }
+
+    get outputs() {
+        return this.value.outputs;
+    }
+
+    _add(node) {
+        const header =  this.header();
+        const styles = [ 'node-item-type' ];
+        const type = node.type;
+        const category = type && type.category ? type.category : '';
+        if (category) {
+            styles.push('node-item-type-' + category.toLowerCase());
+        }
+        if (typeof type.name !== 'string' || !type.name.split) { // #416
+            const identifier = this.context.model && this.context.model.identifier ? this.context.model.identifier : '?';
+            throw new view.Error("Unsupported node type '" + JSON.stringify(type.name) + "' in '" + identifier + "'.");
+        }
+        const content = this.context.view.options.names && (node.name || node.location) ? (node.name || node.location) : type.name.split('.').pop();
+        const tooltip = this.context.view.options.names && (node.name || node.location) ? type.name : (node.name || node.location);
+        const title = header.add(null, styles, content, tooltip);
+        title.on('click', () => this.context.view.showNodeProperties(node, null));
+        if (node.type.nodes && node.type.nodes.length > 0) {
+            const definition = header.add(null, styles, '\u0192', 'Show Function Definition');
+            definition.on('click', () => this.context.view.pushGraph(node.type));
+        }
+        if (node.nodes) {
+            // this._expand = header.add(null, styles, '+', null);
+            // this._expand.on('click', () => this.toggle());
+        }
+        const initializers = [];
+        let hiddenInitializers = false;
+        if (this.context.view.options.initializers) {
+            for (const input of node.inputs) {
+                if (input.visible && input.arguments.length === 1 && input.arguments[0].initializer != null) {
+                    initializers.push(input);
+                }
+                if ((!input.visible || input.arguments.length > 1) &&
+                    input.arguments.some((argument) => argument.initializer != null)) {
+                    hiddenInitializers = true;
+                }
+            }
+        }
+        let sortedAttributes = [];
+        const attributes = node.attributes || [];
+        if (this.context.view.options.attributes) {
+            sortedAttributes = attributes.filter((attribute) => attribute.visible).slice();
+        }
+        sortedAttributes.sort((a, b) => {
+            const au = a.name.toUpperCase();
+            const bu = b.name.toUpperCase();
+            return (au < bu) ? -1 : (au > bu) ? 1 : 0;
+        });
+        if (initializers.length > 0 || hiddenInitializers || sortedAttributes.length > 0) {
+            const list = this.list();
+            list.on('click', () => this.context.view.showNodeProperties(node));
+            for (const initializer of initializers) {
+                const argument = initializer.arguments[0];
+                const type = argument.type;
+                let shape = '';
+                let separator = '';
+                if (type && type.shape && type.shape.dimensions && Array.isArray(type.shape.dimensions)) {
+                    shape = '\u3008' + type.shape.dimensions.map((d) => d ? d : '?').join('\u00D7') + '\u3009';
+                    if (type.shape.dimensions.length === 0 && argument.initializer && !argument.initializer.state) {
+                        try {
+                            shape = argument.initializer.toString();
+                            if (shape && shape.length > 10) {
+                                shape = shape.substring(0, 10) + '\u2026';
+                            }
+                            separator = ' = ';
+                        }
+                        catch (err) {
+                            let type = '?';
+                            try {
+                                type = argument.initializer.type.toString();
+                            }
+                            catch (error) {
+                                // continue regardless of error
+                            }
+                            const identifier = this.context.view.model && this.context.view.model.identifier ? this.context.view.model.identifier : '?';
+                            throw new view.Error("Failed to render tensor of type '" + type + "' in '" + identifier + "' (" + err.message + ").");
+                        }
+                    }
+                }
+                list.add(argument.name ? 'initializer-' + argument.name : '', initializer.name, shape, type ? type.toString() : '', separator);
+            }
+            if (hiddenInitializers) {
+                list.add(null, '\u3008' + '\u2026' + '\u3009', '', null, '');
+            }
+
+            for (const attribute of sortedAttributes) {
+                if (attribute.visible) {
+                    let value = new sidebar.Formatter(attribute.value, attribute.type).toString();
+                    if (value && value.length > 25) {
+                        value = value.substring(0, 25) + '\u2026';
+                    }
+                    list.add(null, attribute.name, value, attribute.type, ' = ');
+                }
+            }
+        }
+        if (Array.isArray(node.chain) && node.chain.length > 0) {
+            for (const innerNode of node.chain) {
+                this._add(innerNode);
+            }
+        }
+        if (node.inner) {
+            this._add(node.inner);
+        }
+        if (node.nodes) {
+            this.canvas = this.canvas();
+        }
+    }
+
+    toggle() {
+        this._expand.content = '-';
+        this._graph = new view.Graph(this.context.view, this.context.model, false, {});
+        this._graph.add(this.value);
+        // const document = this.element.ownerDocument;
+        // const parent = this.element.parentElement;
+        // this._graph.build(document, parent);
+        // this._graph.update();
+        this.canvas.width = 300;
+        this.canvas.height = 300;
+        this.layout();
+        this.context.update();
+    }
+};
+
+view.Input = class extends grapher.Node {
+
+    constructor(context, value) {
+        super();
+        this.context = context;
+        this.value = value;
+        view.Input.counter = view.Input.counter || 0;
+        const types = value.arguments.map((argument) => argument.type || '').join('\n');
+        let name = value.name || '';
+        if (name.length > 16) {
+            name = name.split('/').pop();
+        }
+        const header = this.header();
+        const title = header.add(null, [ 'graph-item-input' ], name, types);
+        title.on('click', () => this.context.view.showModelProperties());
+        this.id = 'input-' + (name ? 'name-' + name : 'id-' + (view.Input.counter++).toString());
+    }
+
+    get class() {
+        return 'graph-input';
+    }
+
+    get inputs() {
+        return [];
+    }
+
+    get outputs() {
+        return [ this.value ];
+    }
+};
+
+view.Output = class extends grapher.Node {
+
+    constructor(context, value) {
+        super();
+        this.context = context;
+        this.value = value;
+        const types = value.arguments.map((argument) => argument.type || '').join('\n');
+        let name = value.name || '';
+        if (name.length > 16) {
+            name = name.split('/').pop();
+        }
+        const header = this.header();
+        const title = header.add(null, [ 'graph-item-output' ], name, types);
+        title.on('click', () => this.context.view.showModelProperties());
+    }
+
+    get inputs() {
+        return [ this.value ];
+    }
+
+    get outputs() {
+        return [];
+    }
+};
+
+view.Argument = class {
+
+    constructor(context, argument) {
+        this.context = context;
+        this._argument = argument;
+    }
+
+    from(node) {
+        this._from = node;
+    }
+
+    to(node, controlDependency) {
+        this._to = this._to || [];
+        if (controlDependency) {
+            this._controlDependencies = this._controlDependencies || new Set();
+            this._controlDependencies.add(this._to.length);
+        }
+        this._to.push(node);
+    }
+
+    build() {
+        this._edges = this._edges || [];
+        if (this._from && this._to) {
+            for (let i = 0; i < this._to.length; i++) {
+                const to = this._to[i];
+                let content = '';
+                const type = this._argument.type;
+
+                if (type &&
+                    type.shape &&
+                    type.shape.dimensions &&
+                    type.shape.dimensions.length > 0 &&
+                    type.shape.dimensions.every((dim) => !dim || Number.isInteger(dim) || dim instanceof base.Int64 || (typeof dim === 'string'))) {
+                    content = type.shape.dimensions.map((dim) => dim || '?').join('\u00D7');
+                    content = content.length > 16 ? '' : content;
+                }
+                if (this.context.view.options.names) {
+                    content = this._argument.name.split('\n').shift(); // custom argument id
+                }
+                const edge = this.context.createEdge(this._from, to);
+                edge.v = this._from.name;
+                edge.w = to.name;
+                if (content) {
+                    edge.label = content;
+                }
+                edge.id = 'edge-' + this._argument.name;
+                if (this._controlDependencies && this._controlDependencies.has(i)) {
+                    edge.class = 'edge-path-control-dependency';
+                }
+                this.context.setEdge(edge);
+                this._edges.push(edge);
+            }
+        }
+    }
+};
+
+view.Edge = class extends grapher.Edge {
+
+    constructor(from, to) {
+        super(from, to);
+    }
+
+    get minlen() {
+        if (this.from.inputs.every((parameter) => parameter.arguments.every((argument) => argument.initializer))) {
+            return 2;
+        }
+        return 1;
+    }
+};
+
+view.ModelContext = class {
+
+    constructor(context, formats) {
+        this._context = context;
+        this._tags = new Map();
+        this._content = new Map();
+        this._formats = formats || new Map();
+    }
+
+    get identifier() {
+        return this._context.identifier;
+    }
+
+    get stream() {
+        return this._context.stream;
+    }
+
+    request(file, encoding, base) {
+        return this._context.request(file, encoding, base);
+    }
+
+    require(id) {
+        return this._context.require(id);
+    }
+
+    exception(error, fatal) {
+        this._context.exception(error, fatal);
+    }
+
+    entries(format) {
+        return this._formats.get(format) || new Map();
+    }
+
+    open(type) {
+        if (!this._content.has(type)) {
+            this._content.set(type, undefined);
+            const stream = this.stream;
+            const position = stream.position;
+            const signatures = [
+                [ 0x89, 0x48, 0x44, 0x46, 0x0D, 0x0A, 0x1A, 0x0A ], // HDF5
+                [ 0x80, undefined, 0x8a, 0x0a, 0x6c, 0xfc, 0x9c, 0x46, 0xf9, 0x20, 0x6a, 0xa8, 0x50, 0x19 ] // PyTorch
+            ];
+            const skip =
+                signatures.some((signature) => signature.length <= stream.length && stream.peek(signature.length).every((value, index) => signature[index] === undefined || signature[index] === value)) ||
+                Array.from(this._tags).some((pair) => pair[0] !== 'flatbuffers' && pair[1].size > 0) ||
+                Array.from(this._content.values()).some((obj) => obj !== undefined);
+            if (!skip) {
+                switch (type) {
+                    case 'json': {
+                        try {
+                            const reader = json.TextReader.open(this.stream);
+                            if (reader) {
+                                const obj = reader.read();
+                                this._content.set(type, obj);
+                            }
+                        }
+                        catch (err) {
+                            // continue regardless of error
+                        }
+                        break;
+                    }
+                    case 'json.gz': {
+                        try {
+                            const archive = gzip.Archive.open(this.stream);
+                            if (archive) {
+                                const entries = archive.entries;
+                                if (entries.size === 1) {
+                                    const stream = entries.values().next().value;
+                                    const reader = json.TextReader.open(stream);
+                                    if (reader) {
+                                        const obj = reader.read();
+                                        this._content.set(type, obj);
+                                    }
+                                }
+                            }
+                        }
+                        catch (err) {
+                            // continue regardless of error
+                        }
+                        break;
+                    }
+                    case 'pkl': {
+                        let unpickler = null;
+                        try {
+                            if (stream.length > 2) {
+                                const zlib = (stream) => {
+                                    const buffer = stream.peek(2);
+                                    if (buffer[0] === 0x78) {
+                                        const check = (buffer[0] << 8) + buffer[1];
+                                        if (check % 31 === 0) {
+                                            const archive = zip.Archive.open(stream);
+                                            return archive.entries.get('');
+                                        }
+                                    }
+                                    return stream;
+                                };
+                                unpickler = python.Unpickler.open(zlib(stream));
+                            }
+                        }
+                        catch (err) {
+                            // continue regardless of error
+                        }
+                        if (unpickler) {
+                            const execution = new python.Execution(null, (error, fatal) => {
+                                const message = error && error.message ? error.message : error.toString();
+                                this.exception(new view.Error(message.replace(/\.$/, '') + " in '" + this.identifier + "'."), fatal);
+                            });
+                            const persistent_load = (saved_id) => {
+                                return saved_id;
+                            };
+                            const obj = unpickler.load((name, args) => execution.invoke(name, args), persistent_load);
+                            this._content.set(type, obj);
+                        }
+                        break;
+                    }
+                    default: {
+                        throw new view.Error("Unsupported open format type '" + type + "'.");
+                    }
+                }
+            }
+            if (stream.position !== position) {
+                stream.seek(0);
+            }
+        }
+        return this._content.get(type);
+    }
+
+    tags(type) {
+        if (!this._tags.has(type)) {
+            let tags = new Map();
+            const stream = this.stream;
+            const position = stream.position;
+            if (stream) {
+                const signatures = [
+                    [ 0x89, 0x48, 0x44, 0x46, 0x0D, 0x0A, 0x1A, 0x0A ], // HDF5
+                    [ 0x80, undefined, 0x8a, 0x0a, 0x6c, 0xfc, 0x9c, 0x46, 0xf9, 0x20, 0x6a, 0xa8, 0x50, 0x19 ], // PyTorch
+                    [ 0x50, 0x4b ], // Zip
+                    [ 0x1f, 0x8b ] // Gzip
+                ];
+                const skip =
+                    signatures.some((signature) => signature.length <= stream.length && stream.peek(signature.length).every((value, index) => signature[index] === undefined || signature[index] === value)) ||
+                    (Array.from(this._tags).some((pair) => pair[0] !== 'flatbuffers' && pair[1].size > 0) && type !== 'pb+') ||
+                    Array.from(this._content.values()).some((obj) => obj !== undefined);
+                if (!skip) {
+                    try {
+                        switch (type) {
+                            case 'pbtxt': {
+                                const reader = protobuf.TextReader.open(stream);
+                                tags = reader ? reader.signature() : tags;
+                                break;
+                            }
+                            case 'pb': {
+                                const reader = protobuf.BinaryReader.open(stream);
+                                tags = reader.signature();
+                                break;
+                            }
+                            case 'pb+': {
+                                const reader = protobuf.BinaryReader.open(stream);
+                                tags = reader.decode();
+                                break;
+                            }
+                            case 'flatbuffers': {
+                                if (stream.length >= 8) {
+                                    const buffer = stream.peek(Math.min(32, stream.length));
+                                    const reader = flatbuffers.BinaryReader.open(buffer);
+                                    const identifier = reader.identifier;
+                                    if (identifier.length > 0) {
+                                        tags.set('file_identifier', identifier);
+                                    }
+                                }
+                                break;
+                            }
+                            case 'xml': {
+                                const reader = xml.TextReader.open(stream);
+                                if (reader) {
+                                    const document = reader.peek();
+                                    const element = document.documentElement;
+                                    const namespaceURI = element.namespaceURI;
+                                    const localName = element.localName;
+                                    const name = namespaceURI ? namespaceURI + ':' + localName : localName;
+                                    tags.set(name, element);
+                                }
+                                break;
+                            }
+                            default: {
+                                throw new view.Error("Unsupported tags format type '" + type + "'.");
+                            }
+                        }
+                    }
+                    catch (error) {
+                        tags.clear();
+                    }
+                }
+            }
+            if (stream.position !== position) {
+                stream.seek(position);
+            }
+            this._tags.set(type, tags);
+        }
+        return this._tags.get(type);
+    }
+};
+
+view.ArchiveContext = class {
+
+    constructor(host, entries, rootFolder, identifier, stream) {
+        this._host = host;
+        this._entries = new Map();
+        if (entries) {
+            for (const entry of entries) {
+                if (entry[0].startsWith(rootFolder)) {
+                    const name = entry[0].substring(rootFolder.length);
+                    this._entries.set(name, entry[1]);
+                }
+            }
+        }
+        this._identifier = identifier.substring(rootFolder.length);
+        this._stream = stream;
+    }
+
+    get identifier() {
+        return this._identifier;
+    }
+
+    get stream() {
+        return this._stream;
+    }
+
+    request(file, encoding, base) {
+        if (base === undefined) {
+            const stream = this._entries.get(file);
+            if (!stream) {
+                return Promise.reject(new Error('File not found.'));
+            }
+            if (encoding) {
+                const decoder = new TextDecoder(encoding);
+                const buffer = stream.peek();
+                const value = decoder.decode(buffer);
+                return Promise.resolve(value);
+            }
+            return Promise.resolve(stream);
+        }
+        return this._host.request(file, encoding, base);
+    }
+
+    require(id) {
+        return this._host.require(id);
+    }
+
+    exception(error, fatal) {
+        this._host.exception(error, fatal);
+    }
+};
+
+view.ArchiveError = class extends Error {
+
+    constructor(message) {
+        super(message);
+        this.name = 'Error loading archive.';
+    }
+};
+
+view.ModelFactoryService = class {
+
+    constructor(host) {
+        this._host = host;
+        this._extensions = new Set([ '.zip', '.tar', '.tar.gz', '.tgz', '.gz' ]);
+        this._factories = [];
+        this.register('./pytorch', [ '.pt', '.pth', '.ptl', '.pt1', '.pyt', '.pyth', '.pkl', '.pickle', '.h5', '.t7', '.model', '.dms', '.tar', '.ckpt', '.chkpt', '.tckpt', '.bin', '.pb', '.zip', '.nn', '.torchmodel', '.torchscript', '.pytorch', '.ot', '.params', '.trt' ], [ '.model' ]);
+        this.register('./onnx', [ '.onnx', '.onn', '.pb', '.onnxtxt', '.pbtxt', '.prototxt', '.txt', '.model', '.pt', '.pth', '.pkl', '.ort', '.ort.onnx' ]);
+        this.register('./mxnet', [ '.json', '.params' ], [ '.mar'] );
+        this.register('./coreml', [ '.mlmodel', '.bin', 'manifest.json', 'metadata.json', 'featuredescriptions.json', '.pb' ], [ '.mlpackage' ]);
+        this.register('./caffe', [ '.caffemodel', '.pbtxt', '.prototxt', '.pt', '.txt' ]);
+        this.register('./caffe2', [ '.pb', '.pbtxt', '.prototxt' ]);
+        this.register('./torch', [ '.t7', '.net' ]);
+        this.register('./tflite', [ '.tflite', '.lite', '.tfl', '.bin', '.pb', '.tmfile', '.h5', '.model', '.json', '.txt' ]);
+        this.register('./circle', [ '.circle' ]);
+        this.register('./tf', [ '.pb', '.meta', '.pbtxt', '.prototxt', '.txt', '.pt', '.json', '.index', '.ckpt', '.graphdef', '.pbmm', /.data-[0-9][0-9][0-9][0-9][0-9]-of-[0-9][0-9][0-9][0-9][0-9]$/, /^events.out.tfevents./ ], [ '.zip' ]);
+        this.register('./mediapipe', [ '.pbtxt' ]);
+        this.register('./uff', [ '.uff', '.pb', '.pbtxt', '.uff.txt', '.trt', '.engine' ]);
+        this.register('./tensorrt', [ '.trt', '.engine', '.model', '.txt', '.uff', '.pb', '.tmfile', '.onnx', '.pth', '.dnn', '.plan' ]);
+        this.register('./numpy', [ '.npz', '.npy', '.pkl', '.pickle' ]);
+        this.register('./lasagne', [ '.pkl', '.pickle', '.joblib', '.model', '.pkl.z', '.joblib.z' ]);
+        this.register('./lightgbm', [ '.txt', '.pkl', '.model' ]);
+        this.register('./keras', [ '.h5', '.hd5', '.hdf5', '.keras', '.json', '.cfg', '.model', '.pb', '.pth', '.weights', '.pkl', '.lite', '.tflite', '.ckpt' ], [ '.zip' ]);
+        this.register('./sklearn', [ '.pkl', '.pickle', '.joblib', '.model', '.meta', '.pb', '.pt', '.h5', '.pkl.z', '.joblib.z' ]);
+        this.register('./pickle', [ '.pkl', '.pickle', '.joblib', '.model', '.meta', '.pb', '.pt', '.h5', '.pkl.z', '.joblib.z', '.pdstates' ]);
+        this.register('./cntk', [ '.model', '.cntk', '.cmf', '.dnn' ]);
+        this.register('./paddle', [ '.pdmodel', '.pdiparams', '.pdparams', '.pdopt', '.paddle', '__model__', '.__model__', '.pbtxt', '.txt', '.tar', '.tar.gz', '.nb' ]);
+        this.register('./bigdl', [ '.model', '.bigdl' ]);
+        this.register('./darknet', [ '.cfg', '.model', '.txt', '.weights' ]);
+        this.register('./weka', [ '.model' ]);
+        this.register('./rknn', [ '.rknn', '.onnx' ]);
+        this.register('./dlc', [ '.dlc' ]);
+        this.register('./armnn', [ '.armnn', '.json' ]);
+        this.register('./mnn', ['.mnn']);
+        this.register('./ncnn', [ '.param', '.bin', '.cfg.ncnn', '.weights.ncnn', '.ncnnmodel' ]);
+        this.register('./tnn', [ '.tnnproto', '.tnnmodel' ]);
+        this.register('./tengine', ['.tmfile']);
+        this.register('./mslite', [ '.ms']);
+        this.register('./barracuda', [ '.nn' ]);
+        this.register('./dnn', [ '.dnn' ]);
+        this.register('./xmodel', [ '.xmodel' ]);
+        this.register('./kmodel', [ '.kmodel' ]);
+        this.register('./flux', [ '.bson' ]);
+        this.register('./dl4j', [ '.json', '.bin' ]);
+        this.register('./openvino', [ '.xml', '.bin' ]);
+        this.register('./mlnet', [ '.zip' ]);
+        this.register('./acuity', [ '.json' ]);
+        this.register('./imgdnn', [ '.dnn', 'params', '.json' ]);
+        this.register('./flax', [ '.msgpack' ]);
+        this.register('./om', [ '.om', '.onnx', '.pb', '.engine' ]);
+        this.register('./nnabla', [ '.nntxt' ], [ '.nnp' ]);
+    }
+
+    register(id, factories, containers) {
+        for (const extension of factories) {
+            this._factories.push({ extension: extension, id: id });
+            this._extensions.add(extension);
+        }
+        for (const extension of containers || []) {
+            this._extensions.add(extension);
+        }
+    }
+
+    open(context) {
+        return this._openSignature(context).then((context) => {
+            const containers = new Map();
+            let stream = context.stream;
+            const entries = context.entries;
+            if (!stream && entries && entries.size > 0) {
+                containers.set('', entries);
+            }
+            else {
+                const identifier = context.identifier;
+                try {
+                    const archive = gzip.Archive.open(stream);
+                    if (archive) {
+                        const entries = archive.entries;
+                        containers.set('gzip', entries);
+                        if (entries.size === 1) {
+                            stream = entries.values().next().value;
+                        }
+                    }
+                }
+                catch (error) {
+                    const message = error && error.message ? error.message : error.toString();
+                    throw new view.ArchiveError(message.replace(/\.$/, '') + " in '" + identifier + "'.");
+                }
+                try {
+                    const formats = new Map([ [ 'zip', zip ], [ 'tar', tar ] ]);
+                    for (const pair of formats) {
+                        const format = pair[0];
+                        const module = pair[1];
+                        const archive = module.Archive.open(stream);
+                        if (archive) {
+                            containers.set(format, archive.entries);
+                            containers.delete('gzip');
+                            break;
+                        }
+                    }
+                }
+                catch (error) {
+                    const message = error && error.message ? error.message : error.toString();
+                    throw new view.ArchiveError(message.replace(/\.$/, '') + " in '" + identifier + "'.");
+                }
+            }
+
+            const modelContext = new view.ModelContext(context, containers);
+            /* eslint-disable consistent-return */
+            return this._openContext(modelContext).then((model) => {
+                if (model) {
+                    return model;
+                }
+                if (containers.size > 0) {
+                    return this._openEntries(containers.values().next().value).then((context) => {
+                        if (context) {
+                            return this._openContext(context);
+                        }
+                        this._unsupported(modelContext);
+                    });
+                }
+                this._unsupported(modelContext);
+            });
+            /* eslint-enable consistent-return */
+        });
+    }
+
+    _unsupported(context) {
+        const identifier = context.identifier;
+        const extension = identifier.split('.').pop().toLowerCase();
+        const stream = context.stream;
+        for (const module of [ zip, tar, gzip ]) {
+            let archive = null;
+            try {
+                archive = module.Archive.open(stream);
+            }
+            catch (error) {
+                // continue regardless of error
+            }
+            if (archive) {
+                throw new view.Error("Archive contains no model files in '" + identifier + "'.", true);
+            }
+        }
+        const skip = () => {
+            const knownUnsupportedIdentifiers = new Set([
+                'natives_blob.bin',
+                'v8_context_snapshot.bin',
+                'snapshot_blob.bin',
+                'image_net_labels.json',
+                'package.json',
+                'models.json',
+                'LICENSE.meta',
+                'input_0.pb',
+                'output_0.pb'
+            ]);
+            return knownUnsupportedIdentifiers.has(context.identifier);
+        };
+        const json = () => {
+            const obj = context.open('json');
+            if (obj) {
+                const formats = [
+                    { name: 'Netron metadata', tags: [ '[].name', '[].schema' ] },
+                    { name: 'Netron metadata', tags: [ '[].name', '[].attributes' ] },
+                    { name: 'Netron metadata', tags: [ '[].name', '[].category' ] },
+                    { name: 'Darkflow metadata', tags: [ 'net', 'type', 'model' ] },
+                    { name: 'keras-yolo2 configuration', tags: [ 'model', 'train', 'valid' ] },
+                    { name: 'Vulkan SwiftShader ICD manifest', tags: [ 'file_format_version', 'ICD' ] },
+                    { name: 'DeepLearningExamples configuration', tags: [ 'attention_probs_dropout_prob', 'hidden_act', 'hidden_dropout_prob', 'hidden_size', ] },
+                    { name: 'NuGet assets', tags: [ 'version', 'targets', 'packageFolders' ] },
+                    { name: 'NuGet data', tags: [ 'format', 'restore', 'projects' ] },
+                    { name: 'NPM package', tags: [ 'name', 'version', 'dependencies' ] },
+                    { name: 'NetworkX adjacency_data', tags: [ 'directed', 'graph', 'nodes' ] },
+                    { name: 'Waifu2x data', tags: [ 'name', 'arch_name', 'channels' ] },
+                    { name: 'Waifu2x data', tags: [ '[].nInputPlane', '[].nOutputPlane', '[].weight', '[].bias' ] },
+                    { name: 'Brain.js data', tags: [ 'type', 'sizes', 'layers' ] },
+                    { name: 'Custom Vision metadata', tags: [ 'CustomVision.Metadata.Version' ] }
+                ];
+                const match = (obj, tag) => {
+                    if (tag.startsWith('[].')) {
+                        tag = tag.substring(3);
+                        return (Array.isArray(obj) && obj.some((item) => Object.prototype.hasOwnProperty.call(item, tag)));
+                    }
+                    return Object.prototype.hasOwnProperty.call(obj, tag);
+                };
+                for (const format of formats) {
+                    if (format.tags.every((tag) => match(obj, tag))) {
+                        throw new view.Error('Invalid file content. File contains ' + format.name + '.', true);
+                    }
+                }
+                const content = JSON.stringify(obj).substring(0, 100).replace(/\s/, '').substr(0, 48) + '...';
+                throw new view.Error("Unsupported JSON content '" + (content.length > 64 ? content.substring(0, 100) + '...' : content) + "' for extension '." + extension + "' in '" + identifier + "'.", !skip());
+            }
+        };
+        const pbtxt = () => {
+            const formats = [
+                { name: 'ImageNet LabelMap data', tags: [ 'entry', 'entry.target_class' ] },
+                { name: 'StringIntLabelMapProto data', tags: [ 'item', 'item.id', 'item.name' ] },
+                { name: 'caffe.LabelMap data', tags: [ 'item', 'item.name', 'item.label' ] },
+                { name: 'Triton Inference Server configuration', tags: [ 'name', 'platform', 'input', 'output' ] },
+                { name: 'TensorFlow OpList data', tags: [ 'op', 'op.name', 'op.input_arg' ] },
+                { name: 'vitis.ai.proto.DpuModelParamList data', tags: [ 'model', 'model.name', 'model.kernel' ] },
+                { name: 'object_detection.protos.DetectionModel data', tags: [ 'model', 'model.ssd' ] },
+                { name: 'object_detection.protos.DetectionModel data', tags: [ 'model', 'model.faster_rcnn' ] },
+                { name: 'tensorflow.CheckpointState data', tags: [ 'model_checkpoint_path', 'all_model_checkpoint_paths' ] },
+                { name: 'apollo.perception.camera.traffic_light.detection.DetectionParam data', tags: [ 'min_crop_size', 'crop_method' ] },
+                { name: 'tidl_meta_arch.TIDLMetaArch data', tags: [ 'caffe_ssd' ] }, // https://github.com/TexasInstruments/edgeai-mmdetection/blob/master/mmdet/utils/proto/mmdet_meta_arch.proto
+                { name: 'tidl_meta_arch.TIDLMetaArch data', tags: [ 'tf_od_api_ssd' ] },
+                { name: 'tidl_meta_arch.TIDLMetaArch data', tags: [ 'tidl_ssd' ] },
+                { name: 'tidl_meta_arch.TIDLMetaArch data', tags: [ 'tidl_faster_rcnn' ] },
+                { name: 'tidl_meta_arch.TIDLMetaArch data', tags: [ 'tidl_yolo' ] },
+                { name: 'tidl_meta_arch.TIDLMetaArch data', tags: [ 'tidl_retinanet' ] },
+                { name: 'domi.InsertNewOps data', tags: [ 'aipp_op' ] } // https://github.com/Ascend/parser/blob/development/parser/proto/insert_op.proto
+            ];
+            const tags = context.tags('pbtxt');
+            if (tags.size > 0) {
+                for (const format of formats) {
+                    if (format.tags.every((tag) => tags.has(tag))) {
+                        throw new view.Error('Invalid file content. File contains ' + format.name + '.', true);
+                    }
+                }
+                const entries = [];
+                entries.push(...Array.from(tags).filter((pair) => pair[0].toString().indexOf('.') === -1));
+                entries.push(...Array.from(tags).filter((pair) => pair[0].toString().indexOf('.') !== -1));
+                const content = entries.map((pair) => pair[1] === true ? pair[0] : pair[0] + ':' + JSON.stringify(pair[1])).join(',');
+                throw new view.Error("Unsupported Protocol Buffers text content '" + (content.length > 64 ? content.substring(0, 100) + '...' : content) + "' for extension '." + extension + "' in '" + identifier + "'.", !skip());
+            }
+        };
+        const pb = () => {
+            const tags = context.tags('pb+');
+            if (Object.keys(tags).length > 0) {
+                const formats = [
+                    { name: 'sentencepiece.ModelProto data', tags: [[1,[[1,2],[2,5],[3,0]]],[2,[[1,2],[2,2],[3,0],[4,0],[5,2],[6,0],[7,2],[10,5],[16,0],[40,0],[41,0],[42,0],[43,0]]],[3,[]],[4,[]],[5,[]]] },
+                    { name: 'mediapipe.BoxDetectorIndex data', tags: [[1,[[1,[[1,[[1,5],[2,5],[3,5],[4,5],[6,0],[7,5],[8,5],[10,5],[11,0],[12,0]]],[2,5],[3,[]]]],[2,false],[3,false],[4,false],[5,false]]],[2,false],[3,false]] },
+                    { name: 'third_party.tensorflow.python.keras.protobuf.SavedMetadata data', tags: [[1,[[1,[[1,0],[2,0]]],[2,0],[3,2],[4,2],[5,2]]]] },
+                    { name: 'pblczero.Net data', tags: [[1,5],[2,2],[3,[[1,0],[2,0],[3,0]],[10,[[1,[]],[2,[]],[3,[]],[4,[]],[5,[]],[6,[]]]],[11,[]]]] } // https://github.com/LeelaChessZero/lczero-common/blob/master/proto/net.proto
+                ];
+                const match = (tags, schema) => {
+                    for (const pair of schema) {
+                        const key = pair[0];
+                        const inner = pair[1];
+                        const value = tags[key];
+                        if (value === undefined) {
+                            continue;
+                        }
+                        if (inner === false) {
+                            return false;
+                        }
+                        if (Array.isArray(inner)) {
+                            if (typeof value !== 'object' || !match(value, inner)) {
+                                return false;
+                            }
+                        }
+                        else if (inner !== value) {
+                            if (inner === 2 && !Array.isArray(value) && Object(value) === (value) && Object.keys(value).length === 0) {
+                                return true;
+                            }
+                            return false;
+                        }
+                    }
+                    return true;
+                };
+                const tags = context.tags('pb+');
+                for (const format of formats) {
+                    if (match(tags, format.tags)) {
+                        throw new view.Error('Invalid file content. File contains ' + format.name + '.', true);
+                    }
+                }
+                const format = (tags) => {
+                    const content = Object.entries(tags).map((pair) => {
+                        const key = pair[0];
+                        const value = pair[1];
+                        return key.toString() + ':' + (Object(value) === value ? '{' + format(value) + '}' : value.toString());
+                    });
+                    return content.join(',');
+                };
+                const content = format(tags);
+                throw new view.Error("Unsupported Protocol Buffers content '" + (content.length > 64 ? content.substring(0, 100) + '...' : content) + "' for extension '." + extension + "' in '" + identifier + "'.", !skip());
+            }
+        };
+        const flatbuffers = () => {
+            const tags = context.tags('flatbuffers');
+            if (tags.has('file_identifier')) {
+                const file_identifier = tags.get('file_identifier');
+                const formats = [
+                    { name: 'onnxruntime.experimental.fbs.InferenceSession data', identifier: 'ORTM' },
+                    { name: 'tflite.Model data', identifier: 'TFL3' },
+                    { name: 'FlatBuffers ENNC data', identifier: 'ENNC' },
+                ];
+                for (const format of formats) {
+                    if (file_identifier === format.identifier) {
+                        throw new view.Error('Invalid file content. File contains ' + format.name + '.', true);
+                    }
+                }
+            }
+        };
+        const xml = () => {
+            const tags = context.tags('xml');
+            if (tags.size > 0) {
+                const formats = [
+                    { name: 'OpenCV storage data', tags: [ 'opencv_storage' ] },
+                    { name: 'XHTML markup', tags: [ 'http://www.w3.org/1999/xhtml:html' ]}
+                ];
+                for (const format of formats) {
+                    if (format.tags.some((tag) => tags.has(tag))) {
+                        throw new view.Error('Invalid file content. File contains ' + format.name + '.', true);
+                    }
+                }
+                throw new view.Error("Unsupported XML content '" + tags.keys().next().value + "' in '" + identifier + "'.", !skip());
+            }
+        };
+        const unknown = () => {
+            stream.seek(0);
+            const buffer = stream.peek(Math.min(16, stream.length));
+            const bytes = Array.from(buffer).map((c) => (c < 16 ? '0' : '') + c.toString(16)).join('');
+            const content = stream.length > 268435456 ? '(' + bytes + ') [' + stream.length.toString() + ']': '(' + bytes + ')';
+            throw new view.Error("Unsupported file content " + content + " for extension '." + extension + "' in '" + identifier + "'.", !skip());
+        };
+        json();
+        pbtxt();
+        pb();
+        flatbuffers();
+        xml();
+        unknown();
+    }
+
+    _openContext(context) {
+        const modules = this._filter(context).filter((module) => module && module.length > 0);
+        const errors = [];
+        let success = false;
+        const nextModule = () => {
+            if (modules.length > 0) {
+                const id = modules.shift();
+                return this._host.require(id).then((module) => {
+                    const updateErrorContext = (error, context) => {
+                        const content = " in '" + context.identifier + "'.";
+                        if (error && typeof error.message === 'string' && !error.message.endsWith(content) && (error.context === undefined || error.context === true)) {
+                            error.message = error.message.replace(/\.$/, '') + content;
+                        }
+                    };
+                    if (!module.ModelFactory) {
+                        throw new view.Error("Failed to load module '" + id + "'.");
+                    }
+                    const modelFactory = new module.ModelFactory();
+                    let match = undefined;
+                    try {
+                        match = modelFactory.match(context);
+                        if (!match) {
+                            return nextModule();
+                        }
+                    }
+                    catch (error) {
+                        updateErrorContext(error, context);
+                        return Promise.reject(error);
+                    }
+                    success = true;
+                    return modelFactory.open(context, match).then((model) => {
+                        if (!model.identifier) {
+                            model.identifier = context.identifier;
+                        }
+                        return model;
+                    }).catch((error) => {
+                        updateErrorContext(error, context);
+                        errors.push(error);
+                        return nextModule();
+                    });
+                });
+            }
+            else {
+                if (success) {
+                    if (errors.length === 1) {
+                        const error = errors[0];
+                        return Promise.reject(error);
+                    }
+                    return Promise.reject(new view.Error(errors.map((err) => err.message).join('\n')));
+                }
+                return Promise.resolve(null);
+            }
+        };
+        return nextModule();
+    }
+
+    _openEntries(entries) {
+        try {
+            const rootFolder = (files) => {
+                const map = files.map((file) => file.split('/').slice(0, -1));
+                const at = index => list => list[index];
+                const rotate = list => list.length === 0 ? [] : list[0].map((item, index) => list.map(at(index)));
+                const equals = list => list.every((item) => item === list[0]);
+                const folder = rotate(map).filter(equals).map(at(0)).join('/');
+                return folder.length === 0 ? folder : folder + '/';
+            };
+            const filter = (queue) => {
+                let matches = [];
+                const nextEntry = () => {
+                    if (queue.length > 0) {
+                        const entry = queue.shift();
+                        const context = new view.ModelContext(new view.ArchiveContext(this._host, null, folder, entry.name, entry.stream));
+                        let modules = this._filter(context);
+                        const nextModule = () => {
+                            if (modules.length > 0) {
+                                const id = modules.shift();
+                                return this._host.require(id).then((module) => {
+                                    if (!module.ModelFactory) {
+                                        throw new view.ArchiveError("Failed to load module '" + id + "'.", null);
+                                    }
+                                    const factory = new module.ModelFactory();
+                                    if (factory.match(context)) {
+                                        matches.push(entry);
+                                        modules = [];
+                                    }
+                                    return nextModule();
+                                });
+                            }
+                            else {
+                                return nextEntry();
+                            }
+                        };
+                        return nextModule();
+                    }
+                    else {
+                        if (matches.length === 0) {
+                            return Promise.resolve(null);
+                        }
+                        // MXNet
+                        if (matches.length === 2 &&
+                            matches.some((e) => e.name.toLowerCase().endsWith('.params')) &&
+                            matches.some((e) => e.name.toLowerCase().endsWith('-symbol.json'))) {
+                            matches = matches.filter((e) => e.name.toLowerCase().endsWith('.params'));
+                        }
+                        // TensorFlow.js
+                        if (matches.length > 0 &&
+                            matches.some((e) => e.name.toLowerCase().endsWith('.bin')) &&
+                            matches.some((e) => e.name.toLowerCase().endsWith('.json'))) {
+                            matches = matches.filter((e) => e.name.toLowerCase().endsWith('.json'));
+                        }
+                        // ncnn
+                        if (matches.length > 0 &&
+                            matches.some((e) => e.name.toLowerCase().endsWith('.bin')) &&
+                            matches.some((e) => e.name.toLowerCase().endsWith('.param'))) {
+                            matches = matches.filter((e) => e.name.toLowerCase().endsWith('.param'));
+                        }
+                        // ncnn
+                        if (matches.length > 0 &&
+                            matches.some((e) => e.name.toLowerCase().endsWith('.bin')) &&
+                            matches.some((e) => e.name.toLowerCase().endsWith('.param.bin'))) {
+                            matches = matches.filter((e) => e.name.toLowerCase().endsWith('.param.bin'));
+                        }
+                        // Paddle
+                        if (matches.length > 0 &&
+                            matches.some((e) => e.name.toLowerCase().endsWith('.pdmodel')) &&
+                            (matches.some((e) => e.name.toLowerCase().endsWith('.pdparams')) ||
+                             matches.some((e) => e.name.toLowerCase().endsWith('.pdopt')) ||
+                             matches.some((e) => e.name.toLowerCase().endsWith('.pdiparams')))) {
+                            matches = matches.filter((e) => e.name.toLowerCase().endsWith('.pdmodel'));
+                        }
+                        // Paddle Lite
+                        if (matches.length > 0 &&
+                            matches.some((e) => e.name.toLowerCase().split('/').pop() === '__model__.nb') &&
+                            matches.some((e) => e.name.toLowerCase().split('/').pop() === 'param.nb')) {
+                            matches = matches.filter((e) => e.name.toLowerCase().split('/').pop() == '__model__.nb');
+                        }
+                        // TensorFlow Bundle
+                        if (matches.length > 1 &&
+                            matches.some((e) => e.name.toLowerCase().endsWith('.data-00000-of-00001'))) {
+                            matches = matches.filter((e) => !e.name.toLowerCase().endsWith('.data-00000-of-00001'));
+                        }
+                        // TensorFlow SavedModel
+                        if (matches.length === 2 &&
+                            matches.some((e) => e.name.toLowerCase().split('/').pop() === 'keras_metadata.pb')) {
+                            matches = matches.filter((e) => e.name.toLowerCase().split('/').pop() !== 'keras_metadata.pb');
+                        }
+                        if (matches.length > 1) {
+                            return Promise.reject(new view.ArchiveError('Archive contains multiple model files.'));
+                        }
+                        const match = matches.shift();
+                        return Promise.resolve(new view.ModelContext(new view.ArchiveContext(this._host, entries, folder, match.name, match.stream)));
+                    }
+                };
+                return nextEntry();
+            };
+            const list = Array.from(entries).map((entry) => {
+                return { name: entry[0], stream: entry[1] };
+            });
+            const files = list.filter((entry) => {
+                if (entry.name.endsWith('/')) {
+                    return false;
+                }
+                if (entry.name.split('/').pop().startsWith('.')) {
+                    return false;
+                }
+                if (!entry.name.startsWith('./') && entry.name.startsWith('.')) {
+                    return false;
+                }
+                return true;
+            });
+            const folder = rootFolder(files.map((entry) => entry.name));
+            const queue = files.slice(0).filter((entry) => entry.name.substring(folder.length).indexOf('/') < 0);
+            return filter(queue).then((context) => {
+                if (context) {
+                    return Promise.resolve(context);
+                }
+                const queue = files.slice(0).filter((entry) => entry.name.substring(folder.length).indexOf('/') >= 0);
+                return filter(queue);
+            });
+        }
+        catch (error) {
+            return Promise.reject(new view.ArchiveError(error.message));
+        }
+    }
+
+    accept(identifier) {
+        const extension = identifier.indexOf('.') === -1 ? '' : identifier.split('.').pop().toLowerCase();
+        identifier = identifier.toLowerCase().split('/').pop();
+        for (const extension of this._extensions) {
+            if ((typeof extension === 'string' && identifier.endsWith(extension)) || (extension instanceof RegExp && extension.exec(identifier))) {
+                this._host.event('File', 'Accept', extension, 1);
+                return true;
+            }
+        }
+        this._host.event('File', 'Reject', extension, 1);
+        return false;
+    }
+
+    _filter(context) {
+        const identifier = context.identifier.toLowerCase().split('/').pop();
+        const list = this._factories.filter((entry) =>
+            (typeof entry.extension === 'string' && identifier.endsWith(entry.extension)) ||
+            (entry.extension instanceof RegExp && entry.extension.exec(identifier)));
+        return Array.from(new Set(list.map((entry) => entry.id)));
+    }
+
+    _openSignature(context) {
+        const stream = context.stream;
+        if (stream) {
+            let empty = true;
+            let position = 0;
+            while (empty && position < stream.length) {
+                const buffer = stream.read(Math.min(4096, stream.length - position));
+                position += buffer.length;
+                if (!buffer.every((value) => value === 0x00)) {
+                    empty = false;
+                    break;
+                }
+            }
+            stream.seek(0);
+            if (empty) {
+                return Promise.reject(new view.Error('File has no content.', true));
+            }
+            /* eslint-disable no-control-regex */
+            const entries = [
+                { name: 'ELF executable', value: /^\x7FELF/ },
+                { name: 'PNG image', value: /^\x89PNG/ },
+                { name: 'Git LFS header', value: /^version https:\/\/git-lfs.github.com/ },
+                { name: 'Git LFS header', value: /^\s*oid sha256:/ },
+                { name: 'HTML markup', value: /^\s*<html>/ },
+                { name: 'HTML markup', value: /^\s*<!doctype\s*html>/ },
+                { name: 'HTML markup', value: /^\s*<!DOCTYPE\s*html>/ },
+                { name: 'HTML markup', value: /^\s*<!DOCTYPE\s*HTML>/ },
+                { name: 'HTML markup', value: /^\s*<!DOCTYPE\s*HTML\s+(PUBLIC|SYSTEM)?/ },
+                { name: 'Unity metadata', value: /^fileFormatVersion:/ },
+                { name: 'Python source code', value: /^\s*import[ ]+(os|sys|types|torch|argparse|onnx|numpy|tensorflow)(,|;|\s)/ },
+                { name: 'Python source code', value: /^\s*import[ ]+([a-z])+[ ]+as[ ]+/ },
+                { name: 'Python source code', value: /^\s*from[ ]+(torch)[ ]+import[ ]+/ },
+                { name: 'Python source code', value: /^\s*from[ ]+(keras)[ ]+import[ ]+/ },
+                { name: 'Bash script', value: /^#!\/usr\/bin\/env\s/ },
+                { name: 'Bash script', value: /^#!\/bin\/bash\s/ },
+                { name: 'TSD header', value: /^%TSD-Header-###%/ },
+                { name: 'AppleDouble data', value: /^\x00\x05\x16\x07/ },
+                { name: 'TensorFlow Hub module', value: /^\x08\x03$/, identifier: 'tfhub_module.pb' },
+                { name: 'OpenVX network binary graph data', value: /^VPMN/ } // network_binary.nb
+            ];
+            /* eslint-enable no-control-regex */
+            const buffer = stream.peek(Math.min(4096, stream.length));
+            const content = String.fromCharCode.apply(null, buffer);
+            for (const entry of entries) {
+                if (content.match(entry.value) && (!entry.identifier || entry.identifier === context.identifier)) {
+                    return Promise.reject(new view.Error('Invalid file content. File contains ' + entry.name + '.', true));
+                }
+            }
+        }
+        return Promise.resolve(context);
+    }
+};
+
+view.Error = class extends Error {
+
+    constructor(message, telemetry) {
+        super(message);
+        this.name = 'Error loading model.';
+        this.telemetry = telemetry;
+        this.stack = undefined;
+    }
+};
+
+if (typeof module !== 'undefined' && typeof module.exports === 'object') {
+    module.exports.View = view.View;
+    module.exports.ModelFactoryService = view.ModelFactoryService;
+}
diff --git a/media/CircleEditor/external/xml.js b/media/external/netron/xml.js
similarity index 100%
rename from media/CircleEditor/external/xml.js
rename to media/external/netron/xml.js
diff --git a/media/CircleEditor/external/zip.js b/media/external/netron/zip.js
similarity index 100%
rename from media/CircleEditor/external/zip.js
rename to media/external/netron/zip.js
diff --git a/src/CircleEditor/CircleEditorProvider.ts b/src/CircleEditor/CircleEditorProvider.ts
index 7d8bacb6..d883b1d1 100644
--- a/src/CircleEditor/CircleEditorProvider.ts
+++ b/src/CircleEditor/CircleEditorProvider.ts
@@ -24,38 +24,6 @@ import {getUri} from '../Utils/external/Uri';
 
 import {CircleEditorDocument} from './CircleEditorDocument';
 
-/**
- * Message commands for communicating with webviews
- */
-export enum MessageDefs {
-  // message command
-  alert = 'alert',
-  request = 'request',
-  response = 'response',
-  pageloaded = 'pageloaded',
-  loadmodel = 'loadmodel',
-  finishload = 'finishload',
-  reload = 'reload',
-  selection = 'selection',
-  backendColor = 'backendColor',
-  error = 'error',
-  colorTheme = 'colorTheme',
-  // loadmodel type
-  modelpath = 'modelpath',
-  uint8array = 'uint8array',
-  // selection
-  names = 'names',
-  tensors = 'tensors',
-  // partiton of backends
-  partition = 'partition',
-  // commands for custom editor features
-  edit = 'edit',
-  loadJson = 'loadJson',
-  updateJson = 'updateJson',
-  getCustomOpAttrT = 'getCustomOpAttrT',
-  requestEncodingData = 'requestEncodingData'
-}
-
 /**
  * Custom Editor Provider necessary for vscode extension API
  */
@@ -112,34 +80,34 @@ export class CircleEditorProvider implements vscode.CustomEditorProvider<CircleE
     return document;
   }
 
-  resolveCustomEditor(
+  public async resolveCustomEditor(
       document: CircleEditorDocument, webviewPanel: vscode.WebviewPanel,
-      _token: vscode.CancellationToken): void|Thenable<void> {
+      _token: vscode.CancellationToken): Promise<void> {
     this.webviews.add(document.uri, webviewPanel);
 
     // Setup initial content for the webview
     webviewPanel.webview.options = {
       enableScripts: true,
     };
-    webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);
+    webviewPanel.webview.html = await this.getHtmlForWebview(webviewPanel.webview);
 
     webviewPanel.webview.onDidReceiveMessage((e) => this.onMessage(document, e));
   }
 
-  saveCustomDocument(document: CircleEditorDocument, cancellation: vscode.CancellationToken):
+  public saveCustomDocument(document: CircleEditorDocument, cancellation: vscode.CancellationToken):
       Thenable<void> {
     return document.save(cancellation);
   }
-  saveCustomDocumentAs(
+  public saveCustomDocumentAs(
       document: CircleEditorDocument, destination: vscode.Uri,
       cancellation: vscode.CancellationToken): Thenable<void> {
     return document.saveAs(destination, cancellation);
   }
-  revertCustomDocument(document: CircleEditorDocument, cancellation: vscode.CancellationToken):
+  public revertCustomDocument(document: CircleEditorDocument, cancellation: vscode.CancellationToken):
       Thenable<void> {
     return document.revert(cancellation);
   }
-  backupCustomDocument(
+  public backupCustomDocument(
       document: CircleEditorDocument, context: vscode.CustomDocumentBackupContext,
       cancellation: vscode.CancellationToken): Thenable<vscode.CustomDocumentBackup> {
     return document.backup(context.destination, cancellation);
@@ -151,39 +119,32 @@ export class CircleEditorProvider implements vscode.CustomEditorProvider<CircleE
 
   private onMessage(document: CircleEditorDocument, message: any) {
     switch (message.command) {
-      case MessageDefs.alert:
+      case 'alert':
         Balloon.error(message.text, false);
-        return;
-      case MessageDefs.request:
+        break;
+      case 'request':
         this.handleRequest(document, message.url, message.encoding);
-        return;
-      case MessageDefs.pageloaded:
-        return;
-      case MessageDefs.loadmodel:
+        break;
+      case 'loadmodel':
         document.sendModel(parseInt(message.offset));
-        return;
-      case MessageDefs.finishload:
-        return;
-      case MessageDefs.selection:
-        return;
-      case MessageDefs.edit:
+        break;
+      case 'edit':
         document.makeEdit(message);
-        return;
-      case MessageDefs.loadJson:
+        break;
+      case 'loadJson':
         document.loadJson();
-        return;
-      case MessageDefs.updateJson:
+        break;
+      case 'updateJson':
         document.editJsonModel(message.data);
-        return;
-      case MessageDefs.getCustomOpAttrT:
+        break;
+      case 'getCustomOpAttrT':
         document.setCustomOpAttrT(message);
-        return;
-      case MessageDefs.requestEncodingData:
+        break;
+      case 'requestEncodingData':
         document.sendEncodingData(message);
-        return;
+        break;
       default:
-        // TODO: add MessageDefs and appropriate function to handle this request
-        return;
+        break;
     }
   }
 
@@ -205,15 +166,15 @@ export class CircleEditorProvider implements vscode.CustomEditorProvider<CircleE
     }
   }
 
-  private getHtmlForWebview(webview: vscode.Webview): string {
-    const htmlUrl = webview.asWebviewUri(vscode.Uri.joinPath(
-        this._context.extensionUri, this.folderMediaCircleEditor, 'index.html'));
+  private async getHtmlForWebview(webview: vscode.Webview): Promise<string> {
     const codiconUri = getUri(
         webview, this._context.extensionUri,
         ['node_modules', '@vscode', 'codicons', 'dist', 'codicon.css']);
-    let html = fs.readFileSync(htmlUrl.fsPath, {encoding: 'utf-8'});
 
     const nonce = getNonce();
+
+    const htmlUri = vscode.Uri.joinPath(this._context.extensionUri, 'media', 'CircleEditor', 'index.html');
+    let html = Buffer.from(await vscode.workspace.fs.readFile(htmlUri)).toString();
     html = html.replace(/%nonce%/gi, nonce);
     html = html.replace('%webview.cspSource%', webview.cspSource);
     html = html.replace(/\${codiconUri}/g, `${codiconUri}`);
@@ -222,9 +183,10 @@ export class CircleEditorProvider implements vscode.CustomEditorProvider<CircleE
     html = this.updateUri(html, webview, '%view-sidebar.css%', 'view-sidebar.css');
     html = this.updateUri(html, webview, '%view-json-editor.css%', 'view-json-editor.css');
     html = this.updateUri(html, webview, '%type.js%', 'type.js');
-    html = this.updateUri(html, webview, '%view-sidebar.js%', 'view-sidebar.js');
-    html = this.updateUri(html, webview, '%view-grapher.js%', 'view-grapher.js');
+    html = this.updateExternalUri(html, webview, '%view-sidebar.js%', 'view-sidebar.js');
+    html = this.updateExternalUri(html, webview, '%view-grapher.js%', 'view-grapher.js');
     html = this.updateUri(html, webview, '%view-json-editor.js%', 'view-json-editor.js');
+    html = this.updateExternalUri(html, webview, '%index.js%', 'index.js');
     html = this.updateExternalUri(html, webview, '%dagre.js%', 'dagre.js');
     html = this.updateExternalUri(html, webview, '%base.js%', 'base.js');
     html = this.updateExternalUri(html, webview, '%text.js%', 'text.js');
@@ -237,38 +199,28 @@ export class CircleEditorProvider implements vscode.CustomEditorProvider<CircleE
     html = this.updateExternalUri(html, webview, '%zip.js%', 'zip.js');
     html = this.updateExternalUri(html, webview, '%gzip.js%', 'gzip.js');
     html = this.updateExternalUri(html, webview, '%tar.js%', 'tar.js');
+    html = this.updateExternalUri(html, webview, '%view.js%', 'view.js');
     // for circle format
     html = this.updateExternalUri(html, webview, '%circle.js%', 'circle.js');
     html = this.updateExternalUri(html, webview, '%circle-schema.js%', 'circle-schema.js');
     // modified for one-vscode
-    html = this.updateUri(html, webview, '%index.js%', 'index.js');
-    html = this.updateUri(html, webview, '%view.js%', 'view.js');
-    // viewMode: this is replaced as a comment as we do not provide selection mode
-    // html = html.replace('%viewMode%', this._viewMode);
+    html = this.updateUri(html, webview, '%modified.index.js%', 'index.js');
+    html = this.updateUri(html, webview, '%modified.view.js%', 'view.js');
+    html = this.updateUri(html, webview, '%modified.view-sidebar.js%', 'view-sidebar.js');
 
     return html;
   }
 
-  private getMediaPath(file: string) {
-    return vscode.Uri.joinPath(this._context.extensionUri, this.folderMediaCircleEditor, file);
-  }
-
   private updateExternalUri(
       html: string, webview: vscode.Webview, search: string, replace: string) {
-    const replaceUri = this.getUriFromPath(webview, 'external/' + replace);
+    const replaceUri = getUri(webview, this._context.extensionUri, ['media', 'external', 'netron', replace]);
     return html.replace(search, `${replaceUri}`);
   }
 
   private updateUri(html: string, webview: vscode.Webview, search: string, replace: string) {
-    const replaceUri = this.getUriFromPath(webview, replace);
+    const replaceUri = getUri(webview, this._context.extensionUri, ['media', 'CircleEditor', replace]);
     return html.replace(search, `${replaceUri}`);
   }
-
-  private getUriFromPath(webview: vscode.Webview, file: string) {
-    const mediaPath = this.getMediaPath(file);
-    const uriView = webview.asWebviewUri(mediaPath);
-    return uriView;
-  }
 }
 
 /**