AIManage/public/onnx/onnx_view/onnx_view.js

var view = view || {};
var grapher = grapher || window.grapher;
var python = python || window.python;

var markdown = markdown || {};

view.View = class {

    constructor(host) {
        this._host = host;
        this._defaultOptions = {
            weights: true,
            attributes: false,
            names: false,
            direction: 'vertical',
            mousewheel: 'scroll'
        };
        this._options = Object.assign({}, this._defaultOptions);
        this._model = null;
        this._graphs = [];
        this._selection = [];
        this._sidebar = new view.Sidebar(this._host);
        this._searchText = '';
    }

    async start() {
        try {
            //await this._host.view(this);
            this._element('sidebar-button').addEventListener('click', () => {
                this.showModelProperties();
            });
            this._element('zoom-in-button').addEventListener('click', () => {
                this.zoomIn();
            });
            this._element('zoom-out-button').addEventListener('click', () => {
                this.zoomOut();
            });
            this._element('toolbar-path-back-button').addEventListener('click', () => {
                this.popGraph();
            });
            this._element('sidebar').addEventListener('mousewheel', (e) => {
                if (e.shiftKey || e.ctrlKey) {
                    e.preventDefault();
                }
            }, { passive: true });
            this._host.document.addEventListener('keydown', () => {
                if (this._graph) {
                    this._graph.select(null);
                }
            });
            this._menu = new view.Menu(this._host);
            this._menu.add({
                accelerator: 'Backspace',
                execute: () => this.popGraph()
            });

            if (this._host.environment && this._host.environment('menu')) {
                this._menu.attach(this._element('menu'), this._element('menu-button'));
                const file = this._menu.group('&File');
                file.add({
                    label: 'Export as &PNG',
                    accelerator: 'CmdOrCtrl+Shift+E',
                    execute: () => this.export(this._host.document.title + '.png'),
                    enabled: () => this.activeGraph
                });
                file.add({
                    label: 'Export as &SVG',
                    accelerator: 'CmdOrCtrl+Alt+E',
                    execute: () => this.export(this._host.document.title + '.svg'),
                    enabled: () => this.activeGraph
                });
                const edit = this._menu.group('&Edit');
                edit.add({
                    label: '&Find...',
                    accelerator: 'CmdOrCtrl+F',
                    execute: () => this.find(),
                    enabled: () => this.activeGraph
                });
                const view = this._menu.group('&View');
                view.add({
                    label: () => this.options.attributes ? 'Hide &Attributes' : 'Show &Attributes',
                    accelerator: 'CmdOrCtrl+D',
                    execute: () => this.toggle('attributes'),
                    enabled: () => this.activeGraph
                });
                view.add({
                    label: () => this.options.weights ? 'Hide &Weights' : 'Show &Weights',
                    accelerator: 'CmdOrCtrl+I',
                    execute: () => this.toggle('weights'),
                    enabled: () => this.activeGraph
                });
                view.add({
                    label: () => this.options.names ? 'Hide &Names' : 'Show &Names',
                    accelerator: 'CmdOrCtrl+U',
                    execute: () => this.toggle('names'),
                    enabled: () => this.activeGraph
                });
                view.add({
                    label: () => this.options.direction === 'vertical' ? 'Show &Horizontal' : 'Show &Vertical',
                    accelerator: 'CmdOrCtrl+K',
                    execute: () => this.toggle('direction'),
                    enabled: () => this.activeGraph
                });
                view.add({
                    label: () => this.options.mousewheel === 'scroll' ? '&Mouse Wheel: Zoom' : '&Mouse Wheel: Scroll',
                    accelerator: 'CmdOrCtrl+M',
                    execute: () => this.toggle('mousewheel'),
                    enabled: () => this.activeGraph
                });
                view.add({});
                view.add({
                    label: 'Zoom &In',
                    accelerator: 'Shift+Up',
                    execute: () => this.zoomIn(),
                    enabled: () => this.activeGraph
                });
                view.add({
                    label: 'Zoom &Out',
                    accelerator: 'Shift+Down',
                    execute: () => this.zoomOut(),
                    enabled: () => this.activeGraph
                });
                view.add({
                    label: 'Actual &Size',
                    accelerator: 'Shift+Backspace',
                    execute: () => this.resetZoom(),
                    enabled: () => this.activeGraph
                });
                view.add({});
                view.add({
                    label: '&Properties...',
                    accelerator: 'CmdOrCtrl+Enter',
                    execute: () => this.showModelProperties(),
                    enabled: () => this.activeGraph
                });
            }
            //await this._host.start();
        } catch (err) {
            this.error(err, null, null);
        }
    }

    show(page) {
        if (!page) {
            page = (!this._model && !this.activeGraph) ? 'welcome' : 'default';
        }
        // this._host.event('screen_view', {
        //     screen_name: page,
        // });
        if (this._sidebar) {
            this._sidebar.close();
        }
        if (this._menu) {
            this._menu.close();
        }
        this._host.document.body.classList.remove(...Array.from(this._host.document.body.classList).filter((_) => _ !== 'active'));
        this._host.document.body.classList.add(...page.split(' '));
        if (page === 'default') {
            this._activate();
        } else {
            this._deactivate();
        }
        this._page = page;
    }

    progress(percent) {
        const bar = this._element('progress-bar');
        if (bar) {
            bar.style.width = percent.toString() + '%';
        }
    }

    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._graph.select(null);
            const content = new view.FindSidebar(this._host, this.activeGraph);
            content.on('search-text-changed', (sender, text) => {
                this._searchText = text;
            });
            content.on('select', (sender, selection) => {
                this.scrollTo(this._graph.select([selection]));
            });
            content.on('focus', (sender, selection) => {
                this._graph.focus([selection]);
            });
            content.on('blur', (sender, selection) => {
                this._graph.blur([selection]);
            });
            this._sidebar.open(content.render(), 'Find');
            content.focus(this._searchText);
        }
    }

    get model() {
        return this._model;
    }

    get options() {
        return this._options;
    }

    toggle(name) {
        switch (name) {
            case 'names':
            case 'attributes':
            case 'weights':
                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(delay) {
        return new Promise((resolve) => {
            setTimeout(resolve, delay);
        });
    }

    _element(id) {
        return this._host.document.getElementById(id);
    }

    zoomIn() {
        this._updateZoom(this._zoom * 1.1);
    }

    zoomOut() {
        this._updateZoom(this._zoom * 0.9);
    }

    resetZoom() {
        this._updateZoom(1);
    }

    _activate() {
        if (!this._events) {
            this._events = {};
            this._events.scroll = (e) => this._scrollHandler(e);
            this._events.wheel = (e) => this._wheelHandler(e);
            this._events.pointerdown = (e) => this._pointerDownHandler(e);
        }
        const graph = this._element('graph');
        graph.focus();
        graph.addEventListener('scroll', this._events.scroll);
        graph.addEventListener('wheel', this._events.wheel, { passive: false });
        graph.addEventListener('pointerdown', this._events.pointerdown);
    }

    _deactivate() {
        if (this._events) {
            const graph = this._element('graph');
            graph.removeEventListener('scroll', this._events.scroll);
            graph.removeEventListener('wheel', this._events.wheel);
            graph.removeEventListener('pointerdown', this._events.pointerdown);
        }
    }

    _updateZoom(zoom, e) {
        const container = this._element('graph');
        const canvas = this._element('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;
    }

    _pointerDownHandler(e) {
        if (e.pointerType !== 'touch' && e.buttons === 1) {
            e.target.setPointerCapture(e.pointerId);
            const document = this._host.document.documentElement;
            const container = this._element('graph');
            this._mousePosition = {
                left: container.scrollLeft,
                top: container.scrollTop,
                x: e.clientX,
                y: e.clientY
            };
            container.style.cursor = 'grabbing';
            e.stopImmediatePropagation();
            const pointerMoveHandler = (e) => {
                e.preventDefault();
                e.stopImmediatePropagation();
                if (this._mousePosition) {
                    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._element('graph');
                        container.scrollTop = this._mousePosition.top - dy;
                        container.scrollLeft = this._mousePosition.left - dx;
                    }
                }
            };
            const clickHandler = (e) => {
                e.stopPropagation();
                document.removeEventListener('click', clickHandler, true);
            };
            const pointerUpHandler = (e) => {
                e.target.releasePointerCapture(e.pointerId);
                container.style.removeProperty('cursor');
                container.removeEventListener('pointerup', pointerUpHandler);
                container.removeEventListener('pointerleave', pointerUpHandler);
                container.removeEventListener('pointermove', pointerMoveHandler);
                if (this._mousePosition && this._mousePosition.moved) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    delete this._mousePosition;
                    document.addEventListener('click', clickHandler, true);
                }
            };
            container.addEventListener('pointermove', pointerMoveHandler);
            container.addEventListener('pointerup', pointerUpHandler);
            container.addEventListener('pointerleave', pointerUpHandler);
        }
    }

    _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();
        }
    }

    scrollTo(selection) {
        if (selection && selection.length > 0) {
            const container = this._element('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' });
        }
    }

    async error(err, name, screen) {
        if (this._sidebar) {
            this._sidebar.close();
        }
        window.console.error(err,name);
        this.show(screen !== undefined ? screen : 'welcome');
    }

    /**
     * entry
     * @param {onnx.Model} model 
     * @param {string} model name
     * @returns 
     */
    async open(model, modelName) {
        this.show('welcome spinner');
        this._sidebar.close();
        try {
            const graphs = Array.isArray(model.graphs) && model.graphs.length > 0 ? [model.graphs[0]] : [];
            await this._updateGraph(model, graphs);
            this._host.document.title = modelName;
        } catch (error) {
            throw error;
        }
    }

    async _updateActiveGraph(graph) {
        this._sidebar.close();
        if (this._model) {
            const model = this._model;
            this.show('welcome spinner');
            await this._timeout(200);
            try {
                await 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;
    }

    async _updateGraph(model, graphs) {
        await this._timeout(100);
        const update = async (model, graphs) => {
            this._model = model;
            this._graphs = graphs;
            await this.renderGraph(this._model, this.activeGraph, this._options);
            if (this._page !== 'default') {
                this.show('default');
            }
            const path = this._element('toolbar-path');
            const back = this._element('toolbar-path-back-button');
            while (path.children.length > 1) {
                path.removeChild(path.lastElementChild);
            }
            if (this._graphs.length <= 1) {
                back.style.opacity = 0;
            } else {
                back.style.opacity = 1;
                const last = this._graphs.length - 2;
                const count = Math.min(2, last);
                if (count < last) {
                    const element = this._host.document.createElement('button');
                    element.setAttribute('class', 'toolbar-path-name-button');
                    element.innerHTML = '&hellip;';
                    path.appendChild(element);
                }
                for (let i = count; i >= 0; i--) {
                    const graph = this._graphs[i];
                    const element = this._host.document.createElement('button');
                    element.setAttribute('class', 'toolbar-path-name-button');
                    element.addEventListener('click', () => {
                        if (i > 0) {
                            this._graphs = this._graphs.slice(i);
                            this._updateGraph(this._model, this._graphs);
                        }
                        this.showDefinition(this._graphs[0]);
                    });
                    const name = graph && graph.name ? graph.name : '';
                    if (name.length > 24) {
                        element.setAttribute('title', name);
                        element.innerHTML = '&hellip;' + name.substring(name.length - 24, name.length);
                    } else {
                        element.removeAttribute('title');
                        element.innerHTML = name;
                    }
                    path.appendChild(element);
                }
            }
        };
        const lastModel = this._model;
        const lastGraphs = this._graphs;
        try {
            await update(model, graphs);
            return this._model;
        } catch (error) {
            await update(lastModel, lastGraphs);
            throw error;
        }
    }

    pushGraph(graph) {
        if (graph && graph !== this.activeGraph && Array.isArray(graph.nodes)) {
            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;
    }

    async renderGraph(model, graph, options) {
        this._graph = null;
        const canvas = this._element('canvas');
        while (canvas.lastChild) {
            canvas.removeChild(canvas.lastChild);
        }
        if (!graph) {
            return;
        }
        this._zoom = 1;
        const groups = graph.groups;
        const nodes = graph.nodes;
        // this._host.event('graph_view', {
        //     graph_node_count: nodes.length,
        //     graph_skip: 0
        // });
        const layout = {};
        layout.nodesep = 20;
        layout.ranksep = 20;
        const rotate = graph.nodes.every((node) => node.inputs.filter((input) => input.value.every((argument) => !argument.initializer)).length === 0 && node.outputs.length === 0);
        const horizontal = rotate ? options.direction === 'vertical' : options.direction !== 'vertical';
        if (horizontal) {
            layout.rankdir = "LR";
        }
        if (nodes.length > 3000) {
            layout.ranker = 'longest-path';
        }
        const viewGraph = new view.Graph(this, model, options, groups, layout);
        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);
        await this._timeout(20);
        viewGraph.measure();
        viewGraph.layout();
        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._element('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;
            const [y] = ys;
            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;
    }

    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).toLowerCase() : 'png';
        if (this.activeGraph && (extension === 'png' || extension === 'svg')) {
            const canvas = this._element('canvas');
            const clone = canvas.cloneNode(true);
            this.applyStyleSheet(clone, 'grapher.css');
            clone.setAttribute('id', 'export');
            clone.removeAttribute('viewBox');
            clone.removeAttribute('width');
            clone.removeAttribute('height');
            clone.style.removeProperty('opacity');
            clone.style.removeProperty('display');
            clone.style.removeProperty('width');
            clone.style.removeProperty('height');
            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 error = new Error('Image may be too large to render as PNG.');
                            error.name = 'Error exporting image.';
                            this._host.exception(error, false);
                            this._host.error(error.name, error.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 view.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) {
                if (error) {
                    error.context = this._model.identifier;
                }
                this.error(error, 'Error showing model properties.', null);
            }
        }
    }

    showNodeProperties(node) {
        if (node) {
            try {
                if (this._menu) {
                    this._menu.close();
                }
                const nodeSidebar = new view.NodeSidebar(this._host, node);
                nodeSidebar.on('show-documentation', (/* sender, e */) => {
                    this.showDefinition(node.type);
                });
                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();
                            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.context = this._model.identifier;
                    }
                    this.error(error, null, null);
                });
                nodeSidebar.on('activate', (sender, value) => {
                    this._graph.select([value]);
                });
                nodeSidebar.on('deactivate', () => {
                    this._graph.select(null);
                });
                nodeSidebar.on('select', (sender, value) => {
                    this.scrollTo(this._graph.activate(value));
                });
                this._sidebar.open(nodeSidebar.render(), 'Node Properties');
            } catch (error) {
                if (error) {
                    error.context = this._model.identifier;
                }
                this.error(error, 'Error showing node properties.', null);
            }
        }
    }

    showConnectionProperties(value, from, to) {
        try {
            if (this._menu) {
                this._menu.close();
            }
            const connectionSidebar = new view.ConnectionSidebar(this._host, value, from, to);
            connectionSidebar.on('activate', (sender, value) => {
                this._graph.select([value]);
            });
            connectionSidebar.on('deactivate', () => {
                this._graph.select(null);
            });
            connectionSidebar.on('select', (sender, value) => {
                this.scrollTo(this._graph.activate(value));
            });
            connectionSidebar.on('error', (sender, error) => {
                if (this._model) {
                    error.context = this._model.identifier;
                }
                this.error(error, null, null);
            });
            this._sidebar.open(connectionSidebar.render(), 'Connection Properties');
        } catch (error) {
            if (error) {
                error.context = this._model.identifier;
            }
            this.error(error, 'Error showing connection properties.', null);
        }
    }

    showDefinition(type) {
        if (type && (type.description || type.inputs || type.outputs || type.attributes)) {
            if (type.nodes && type.nodes.length > 0) {
                this.pushGraph(type);
            }
            const documentationSidebar = new view.DocumentationSidebar(this._host, type);
            const title = type.type === 'function' ? 'Function' : 'Documentation';
            this._sidebar.push(documentationSidebar.render(), title);
        }
    }
};

view.Menu = class {

    constructor(host) {
        this.items = [];
        this._darwin = false;
        this._document = host.document;
        this._stack = [];
        this._root = [];
        this._buttons = [];
        this._accelerators = new Map();
        this._keyCodes = new Map([
            ['Backspace', 0x08], ['Enter', 0x0D], ['Escape', 0x1B],
            ['Left', 0x25], ['Up', 0x26], ['Right', 0x27], ['Down', 0x28],
            ['F5', 0x74], ['F11', 0x7a]
        ]);
        this._symbols = new Map([
            ['Backspace', '&#x232B;'], ['Enter', '&#x23ce;'],
            ['Up', '&#x2191;'], ['Down', '&#x2193;'],
        ]);
        this._keydown = (e) => {
            this._alt = false;
            const code = e.keyCode | (e.altKey ? 0x0200 : 0) | (e.shiftKey ? 0x0100 : 0);
            const modifier = (e.ctrlKey ? 0x0400 : 0) | (e.metaKey ? 0x0800 : 0);
            if ((code | modifier) === 0x0212) { // Alt
                this._alt = true;
            } else {
                const action =
                    this._accelerators.get(code | modifier) ||
                    this._accelerators.get(code | ((e.ctrlKey && !this._darwin) || (e.metaKey && this._darwin) ? 0x1000 : 0));
                if (action && this._execute(action)) {
                    e.preventDefault();
                } else {
                    const item = this._mnemonic(code | modifier);
                    if (item && this._activate(item)) {
                        e.preventDefault();
                    }
                }
            }
        };
        this._keyup = (e) => {
            const code = e.keyCode;
            if (code === 0x0012 && this._alt) { // Alt
                switch (this._stack.length) {
                    case 0: {
                        if (this.open()) {
                            e.preventDefault();
                        }
                        break;
                    }
                    case 1: {
                        if (this.close()) {
                            e.preventDefault();
                        }
                        break;
                    }
                    default: {
                        this._stack = [this];
                        if (this._root.length > 1) {
                            this._root = [this];
                            this._rebuild();
                        }
                        this._update();
                        e.preventDefault();
                        break;
                    }
                }
            }
            this._alt = false;
        };
        this._next = () => {
            const button = this._element.ownerDocument.activeElement;
            const index = this._buttons.indexOf(button);
            if (index !== -1 && index < this._buttons.length - 1) {
                const next = this._buttons[index + 1];
                next.focus();
            }
        };
        this._previous = () => {
            const button = this._element.ownerDocument.activeElement;
            const index = this._buttons.indexOf(button);
            if (index > 0) {
                const next = this._buttons[index - 1];
                next.focus();
            }
        };
        this._push = () => {
            const button = this._element.ownerDocument.activeElement;
            if (button && button.getAttribute('data-type') === 'group') {
                button.click();
            }
        };
        this._pop = () => {
            if (this._stack.length > 1) {
                this._deactivate();
            }
        };
        this._exit = () => {
            this._deactivate();
            if (this._stack.length === 0) {
                this.close();
            }
        };
        host.window.addEventListener('keydown', this._keydown);
        host.window.addEventListener('keyup', this._keyup);
    }

    attach(element, button) {
        this._element = element;
        button.addEventListener('click', (e) => {
            this.toggle();
            e.preventDefault();
        });
    }

    add(value) {
        const item = new view.Menu.Command(value);
        this.register(item, item.accelerator);
    }

    group(label) {
        const item = new view.Menu.Group(this, label);
        item.identifier = 'menu-item-' + this.items.length.toString();
        this.items.push(item);
        item.shortcut = this.register(item.accelerator);
        return item;
    }

    toggle() {
        if (this._element.style.opacity >= 1) {
            this.close();
        } else {
            this._root = [this];
            this._stack = [this];
            this.open();
        }
    }

    open() {
        if (this._element) {
            if (this._stack.length === 0) {
                this.toggle();
                this._stack = [this];
            }
            this._rebuild();
            this._update();
            this.register(this._exit, 'Escape');
            this.register(this._previous, 'Up');
            this.register(this._next, 'Down');
            this.register(this._pop, 'Left');
            this.register(this._push, 'Right');
        }
    }

    close() {
        if (this._element) {
            this.unregister(this._exit);
            this.unregister(this._previous);
            this.unregister(this._next);
            this.unregister(this._pop);
            this.unregister(this._push);
            this._element.style.opacity = 0;
            this._element.style.left = '-17em';
            const button = this._element.ownerDocument.activeElement;
            if (this._buttons.indexOf(button) > 0) {
                button.blur();
            }
            while (this._root.length > 1) {
                this._deactivate();
            }
            this._stack = [];
        }
    }

    register(action, accelerator) {
        let shortcut = '';
        if (accelerator) {
            let shift = false;
            let alt = false;
            let ctrl = false;
            let cmd = false;
            let cmdOrCtrl = false;
            let key = '';
            for (const part of accelerator.split('+')) {
                switch (part) {
                    case 'CmdOrCtrl': cmdOrCtrl = true; break;
                    case 'Cmd': cmd = true; break;
                    case 'Ctrl': ctrl = true; break;
                    case 'Alt': alt = true; break;
                    case 'Shift': shift = true; break;
                    default: key = part; break;
                }
            }
            if (key !== '') {
                if (this._darwin) {
                    shortcut += ctrl ? '&#x2303' : '';
                    shortcut += alt ? '&#x2325;' : '';
                    shortcut += shift ? '&#x21e7;' : '';
                    shortcut += cmdOrCtrl || cmd ? '&#x2318;' : '';
                    shortcut += this._symbols.has(key) ? this._symbols.get(key) : key;
                } else {
                    shortcut += cmdOrCtrl || ctrl ? 'Ctrl+' : '';
                    shortcut += alt ? 'Alt+' : '';
                    shortcut += shift ? 'Shift+' : '';
                    shortcut += key;
                }
                let code = (cmdOrCtrl ? 0x1000 : 0) | (cmd ? 0x0800 : 0) | (ctrl ? 0x0400 : 0) | (alt ? 0x0200 : 0 | shift ? 0x0100 : 0);
                code |= this._keyCodes.has(key) ? this._keyCodes.get(key) : key.charCodeAt(0);
                this._accelerators.set(code, action);
            }
        }
        return shortcut;
    }

    unregister(action) {
        this._accelerators = new Map(Array.from(this._accelerators.entries()).filter(([, value]) => value !== action));
    }

    _execute(action) {
        if (typeof action === 'function') {
            action();
            return true;
        }
        switch (action ? action.type : null) {
            case 'group': {
                while (this._stack.length > this._root.length) {
                    this._stack.pop();
                }
                this._root.push({ items: [action] });
                this._stack.push(action);
                this._rebuild();
                this._update();
                return true;
            }
            case 'command': {
                this.close();
                setTimeout(() => action.execute(), 10);
                return true;
            }
            default: {
                return false;
            }
        }
    }

    _mnemonic(code) {
        const key = /[a-zA-Z0-9]/.test(String.fromCharCode(code & 0x00FF));
        const modifier = (code & 0xFF00) !== 0;
        const alt = (code & 0xFF00) === 0x0200;
        if (alt && key) {
            this.open();
        }
        if (this._stack.length > 0 && key && (alt || !modifier)) {
            const key = String.fromCharCode(code & 0x00FF);
            const group = this._stack.length > 0 ? this._stack[this._stack.length - 1] : this;
            const item = group.items.find((item) => key === item.mnemonic && (item.type === 'group' || item.type === 'command') && item.enabled);
            if (item) {
                return item;
            }
        }
        return null;
    }

    _activate(item) {
        switch (item ? item.type : null) {
            case 'group': {
                this._stack.push(item);
                this._rebuild();
                this._update();
                return true;
            }
            case 'command': {
                return this._execute(item);
            }
            default: {
                return false;
            }
        }
    }

    _deactivate() {
        if (this._root.length > 1) {
            this._root.pop();
            const group = this._stack.pop();
            this._rebuild();
            this._update();
            if (group) {
                const button = this._buttons.find((button) => button.getAttribute('id') === group.identifier);
                if (button) {
                    button.focus();
                }
            }
        } else if (this._stack.length > 0) {
            this._stack.pop();
            this._update();
        }
    }

    _label(item, mnemonic) {
        delete item.mnemonic;
        const value = item.label;
        if (value) {
            const index = value.indexOf('&');
            if (index !== -1) {
                if (mnemonic) {
                    item.mnemonic = value[index + 1].toUpperCase();
                    return value.substring(0, index) + '<u>' + value[index + 1] + '</u>' + value.substring(index + 2);
                }
                return value.substring(0, index) + value.substring(index + 1);
            }
        }
        return value || '';
    }

    _rebuild() {
        this._element.innerHTML = '';
        const root = this._root[this._root.length - 1];
        for (const group of root.items) {
            const container = this._document.createElement('div');
            container.setAttribute('id', group.identifier);
            container.setAttribute('class', 'menu-group');
            container.innerHTML = "<div class='menu-group-header'></div>";
            for (const item of group.items) {
                switch (item.type) {
                    case 'group':
                    case 'command': {
                        const button = this._document.createElement('button');
                        button.setAttribute('class', 'menu-command');
                        button.setAttribute('id', item.identifier);
                        button.setAttribute('data-type', item.type);
                        button.addEventListener('mouseenter', () => button.focus());
                        button.addEventListener('click', () => this._execute(item));
                        const accelerator = this._document.createElement('span');
                        accelerator.setAttribute('class', 'menu-shortcut');
                        if (item.type === 'group') {
                            accelerator.innerHTML = '&#10095;';
                        } else if (item.shortcut) {
                            accelerator.innerHTML = item.shortcut;
                        }
                        button.appendChild(accelerator);
                        const content = this._document.createElement('span');
                        content.setAttribute('class', 'menu-label');
                        button.appendChild(content);
                        container.appendChild(button);
                        break;
                    }
                    case 'separator': {
                        const element = this._document.createElement('div');
                        element.setAttribute('class', 'menu-separator');
                        element.setAttribute('id', item.identifier);
                        container.appendChild(element);
                        break;
                    }
                    default: {
                        break;
                    }
                }
            }
            this._element.appendChild(container);
        }
        this._element.style.opacity = 1.0;
        this._element.style.left = '0px';
        if (this._root.length > 1) {
            this._element.style.width = 'auto';
            this._element.style.maxWidth = '60%';
        } else {
            this._element.style.removeProperty('width');
            this._element.style.maxWidth = 'auto';
        }
    }

    _update() {
        this._buttons = [];
        const selected = this._stack.length > 0 ? this._stack[this._stack.length - 1] : null;
        const root = this._root[this._root.length - 1];
        for (const group of root.items) {
            let visible = false;
            let block = false;
            const active = this._stack.length <= 1 || this._stack[1] === group;
            const container = this._document.getElementById(group.identifier);
            container.childNodes[0].innerHTML = this._label(group, this === selected);
            for (const item of group.items) {
                switch (item.type) {
                    case 'group':
                    case 'command': {
                        const label = this._label(item, group === selected);
                        const button = this._document.getElementById(item.identifier);
                        button.childNodes[1].innerHTML = label;
                        if (item.enabled) {
                            button.removeAttribute('disabled');
                            button.style.display = 'block';
                            visible = true;
                            block = true;
                            if (active) {
                                this._buttons.push(button);
                            }
                        } else {
                            button.setAttribute('disabled', '');
                            button.style.display = 'none';
                        }
                        break;
                    }
                    case 'separator': {
                        const element = this._document.getElementById(item.identifier);
                        element.style.display = block ? 'block' : 'none';
                        block = false;
                        break;
                    }
                    default: {
                        break;
                    }
                }
            }
            for (let i = group.items.length - 1; i >= 0; i--) {
                const item = group.items[i];
                if ((item.type === 'group' || item.type === 'command') && item.enabled) {
                    break;
                } else if (item.type === 'separator') {
                    const element = this._document.getElementById(item.identifier);
                    element.style.display = 'none';
                }
            }
            if (!visible) {
                container.style.display = 'none';
            }
            container.style.opacity = active ? 1 : 0;
        }
        const button = this._element.ownerDocument.activeElement;
        const index = this._buttons.indexOf(button);
        if (index === -1 && this._buttons.length > 0) {
            this._buttons[0].focus();
        }
    }
};

view.Menu.Group = class {

    constructor(parent, label) {
        this.type = 'group';
        this.parent = parent;
        this.label = label;
        this.items = [];
    }

    get enabled() {
        return this.items.some((item) => item.enabled);
    }

    add(value) {
        const item = Object.keys(value).length > 0 ? new view.Menu.Command(value) : new view.Menu.Separator();
        item.identifier = this.identifier + '-' + this.items.length.toString();
        this.items.push(item);
        item.shortcut = this.parent.register(item, item.accelerator);
    }

    group(label) {
        const item = new view.Menu.Group(this, label);
        item.identifier = this.identifier + '-' + this.items.length.toString();
        this.items.push(item);
        item.shortcut = this.parent.register(item, item.accelerator);
        return item;
    }

    clear() {
        for (const item of this.items) {
            if (item.clear) {
                item.clear();
            }
            this.parent.unregister(item);
        }
        this.items = [];
    }

    register(item, accelerator) {
        return this.parent.register(item, accelerator);
    }

    unregister(item) {
        this.parent.unregister(item);
    }
};

view.Menu.Command = class {

    constructor(item) {
        this.type = 'command';
        this.accelerator = item.accelerator;
        this._label = item.label;
        this._enabled = item.enabled;
        this._execute = item.execute;
    }

    get label() {
        return typeof this._label === 'function' ? this._label() : this._label;
    }

    get enabled() {
        return this._enabled ? this._enabled() : true;
    }

    execute() {
        if (this._execute && this.enabled) {
            this._execute();
        }
    }
};

view.Menu.Separator = class {

    constructor() {
        this.type = 'separator';
        this.enabled = false;
    }
};

view.Graph = class extends grapher.Graph {

    constructor(view, model, options, compound, layout) {
        super(compound, layout);
        this.view = view;
        this.model = model;
        this.options = options;
        this._nodeKey = 0;
        this._values = new Map();
        this._table = new Map();
        this._selection = new Set();
    }

    createNode(node, type) {
        if (type) {
            const value = new view.Node(this, { type: type });
            value.name = (this._nodeKey++).toString();
            this._table.set(type, value);
            return value;
        }
        const value = new view.Node(this, node);
        value.name = (this._nodeKey++).toString();
        this._table.set(node, value);
        return value;
    }

    createInput(input) {
        const value = new view.Input(this, input);
        value.name = (this._nodeKey++).toString();
        this._table.set(input, value);
        return value;
    }

    createOutput(output) {
        const value = new view.Output(this, output);
        value.name = (this._nodeKey++).toString();
        this._table.set(output, value);
        return value;
    }

    createValue(argument) {
        const name = argument.name;
        if (!this._values.has(name)) {
            const value = new view.Value(this, argument);
            this._values.set(name, value);
            this._table.set(argument, value);
        } else {
            // duplicate argument name
            const value = this._values.get(name);
            this._table.set(argument, value);
        }
        return this._values.get(name);
    }

    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);
            this.setNode(viewInput);
            for (const value of input.value) {
                this.createValue(value).from = viewInput;
            }
        }
        for (const node of graph.nodes) {
            const viewNode = this.createNode(node);
            this.setNode(viewNode);
            const inputs = node.inputs;
            for (const input of inputs) {
                for (const value of input.value) {
                    if (value.name != '' && !value.initializer) {
                        this.createValue(value).to.push(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 value of output.value) {
                    if (!value) {
                        const error = new view.Error('Invalid null argument.');
                        error.context = this.model.identifier;
                        throw error;
                    }
                    if (value.name != '') {
                        this.createValue(value).from = viewNode;
                    }
                }
            }

            if (node.controlDependencies && node.controlDependencies.length > 0) {
                for (const value of node.controlDependencies) {
                    this.createValue(value).controlDependency(viewNode);
                }
            }
            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 + '\ngroup');
                        this.setParent(viewNode.name, groupName + '\ngroup');
                    }
                }
            }
        }
        for (const output of graph.outputs) {
            const viewOutput = this.createOutput(output);
            this.setNode(viewOutput);
            for (const value of output.value) {
                this.createValue(value).to.push(viewOutput);
            }
        }
    }

    build(document, origin) {
        for (const value of this._values.values()) {
            value.build();
        }
        super.build(document, origin);
    }

    select(selection) {
        if (this._selection.size > 0) {
            for (const element of this._selection) {
                element.deselect();
            }
            this._selection.clear();
        }
        if (selection) {
            let array = [];
            for (const value of selection) {
                if (this._table.has(value)) {
                    const element = this._table.get(value);
                    array = array.concat(element.select());
                    this._selection.add(element);
                }
            }
            return array;
        }
        return null;
    }

    activate(value) {
        if (this._table.has(value)) {
            this.select(null);
            const element = this._table.get(value);
            element.activate();
            return this.select([value]);
        }
        return [];
    }

    focus(selection) {
        for (const value of selection) {
            const element = this._table.get(value);
            if (element && !this._selection.has(element)) {
                element.select();
            }
        }
    }

    blur(selection) {
        for (const value of selection) {
            const element = this._table.get(value);
            if (element && !this._selection.has(element)) {
                element.deselect();
            }
        }
    }
};

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 options = this.context.options;
        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 error = new view.Error("Unsupported node type '" + JSON.stringify(type.name) + "'.");
            if (this.context.model && this.context.model.identifier) {
                error.context = this.context.model.identifier;
            }
            throw error;
        }
        const content = options.names && (node.name || node.location) ? (node.name || node.location) : type.name.split('.').pop();
        const tooltip = 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.activate(node);
        });
        if (Array.isArray(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 (Array.isArray(node.nodes)) {
            // this._expand = header.add(null, styles, '+', null);
            // this._expand.on('click', () => this.toggle());
        }
        const initializers = [];
        let hiddenInitializers = false;
        if (options.weights) {
            if (Array.isArray(node.inputs)) {
                for (const input of node.inputs) {
                    if (input.visible !== false && input.value.length === 1 && input.value[0].initializer != null) {
                        initializers.push(input);
                    }
                    if ((input.visible === false || input.value.length > 1) &&
                        input.value.some((argument) => argument.initializer != null)) {
                        hiddenInitializers = true;
                    }
                }
            }
        }
        const objects = [];
        const attributes = [];
        if (Array.isArray(node.attributes) && node.attributes.length > 0) {
            for (const attribute of node.attributes) {
                switch (attribute.type) {
                    case 'graph':
                    case 'object':
                    case 'object[]':
                    case 'function':
                    case 'function[]': {
                        objects.push(attribute);
                        break;
                    }
                    default: {
                        if (options.attributes && attribute.visible !== false) {
                            attributes.push(attribute);
                        }
                    }
                }
            }
            attributes.sort((a, b) => a.name.toUpperCase().localeCompare(b.name.toUpperCase()));
        }
        if (initializers.length > 0 || hiddenInitializers || attributes.length > 0 || objects.length > 0) {
            const list = this.list();
            list.on('click', () => this.context.activate(node));
            for (const argument of initializers) {
                const [value] = argument.value;
                const type = value.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 !== null && d !== undefined) ? d : '?').join('\u00D7') + '\u3009';
                    if (type.shape.dimensions.length === 0 && value.initializer) {
                        try {
                            const initializer = value.initializer;
                            const tensor = new view.Tensor(initializer);
                            const encoding = tensor.encoding;
                            if ((encoding === '<' || encoding === '>' || encoding === '|') && !tensor.empty && tensor.type.dataType !== '?') {
                                shape = tensor.toString();
                                if (shape && shape.length > 10) {
                                    shape = shape.substring(0, 10) + '\u2026';
                                }
                                separator = ' = ';
                            }
                        } catch (err) {
                            let type = '?';
                            try {
                                type = value.initializer.type.toString();
                            } catch (error) {
                                // continue regardless of error
                            }
                            const error = new view.Error("Failed to render tensor of type '" + type + "' (" + err.message + ").");
                            if (this.context.view.model && this.context.view.model.identifier) {
                                error.context = this.context.view.model.identifier;
                            }
                            throw error;
                        }
                    }
                }
                list.add(argument.name, shape, type ? type.toString() : '', separator);
            }
            if (hiddenInitializers) {
                list.add('\u3008\u2026\u3009', '', null, '');
            }
            for (const attribute of attributes) {
                if (attribute.visible !== false) {
                    let value = new view.Formatter(attribute.value, attribute.type).toString();
                    if (value && value.length > 25) {
                        value = value.substring(0, 25) + '\u2026';
                    }
                    list.add(attribute.name, value, attribute.type, ' = ');
                }
            }
            for (const attribute of objects) {
                if (attribute.type === 'graph') {
                    const node = this.context.createNode(null, attribute.value);
                    list.add(attribute.name, node, '', '');
                }
                if (attribute.type === 'function' || attribute.type === 'object') {
                    const node = this.context.createNode(attribute.value);
                    list.add(attribute.name, node, '', '');
                }
                if (attribute.type === 'function[]' || attribute.type === 'object[]') {
                    const nodes = attribute.value.map((value) => this.context.createNode(value));
                    list.add(attribute.name, nodes, '', '');
                }
            }
        }
        if (Array.isArray(node.nodes) && node.nodes.length > 0) {
            // this.canvas = this.canvas();
        }
        if (Array.isArray(node.chain) && node.chain.length > 0) {
            for (const innerNode of node.chain) {
                this.context.createNode(innerNode);
                this._add(innerNode);
            }
        }
        if (node.inner) {
            this.context.createNode(node.inner);
            this._add(node.inner);
        }
    }

    toggle() {
        this._expand.content = '-';
        this._graph = new view.Graph(this.context.view, this.context.model, this.context.options, 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();
    }

    activate() {
        this.context.view.showNodeProperties(this.value);
    }
};

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.value.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];
    }

    activate() {
        this.context.view.showModelProperties();
    }
};

view.Output = class extends grapher.Node {

    constructor(context, value) {
        super();
        this.context = context;
        this.value = value;
        const types = value.value.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 [];
    }

    activate() {
        this.context.view.showModelProperties();
    }
};

view.Value = class {

    constructor(context, argument) {
        this.context = context;
        this.value = argument;
        this.from = null;
        this.to = [];
    }

    controlDependency(node) {
        this._controlDependencies = this._controlDependencies || new Set();
        this._controlDependencies.add(this.to.length);
        this.to.push(node);
    }

    build() {
        this._edges = this._edges || [];
        if (this.from && Array.isArray(this.to)) {
            for (let i = 0; i < this.to.length; i++) {
                const to = this.to[i];
                let content = '';
                const type = this.value.type;
                if (type &&
                    type.shape &&
                    type.shape.dimensions &&
                    type.shape.dimensions.length > 0 &&
                    type.shape.dimensions.every((dim) => !dim || Number.isInteger(dim) || (typeof dim === 'string'))) {
                    content = type.shape.dimensions.map((dim) => (dim !== null && dim !== undefined) ? dim : '?').join('\u00D7');
                    content = content.length > 16 ? '' : content;
                }
                if (this.context.options.names) {
                    content = this.value.name.split('\n').shift(); // custom argument id
                }
                const edge = new view.Edge(this, this.from, to);
                edge.v = this.from.name;
                edge.w = to.name;
                if (content) {
                    edge.label = content;
                }
                edge.id = 'edge-' + this.value.name;
                if (this._controlDependencies && this._controlDependencies.has(i)) {
                    edge.class = 'edge-path-control-dependency';
                }
                this.context.setEdge(edge);
                this._edges.push(edge);
            }
        }
    }

    select() {
        let array = [];
        for (const edge of this._edges) {
            array = array.concat(edge.select());
        }
        return array;
    }

    deselect() {
        for (const edge of this._edges) {
            edge.deselect();
        }
    }

    activate() {
        if (this.value && this.from && Array.isArray(this.to)) {
            const value = this.value;
            const from = this.from.value;
            const to = this.to.map((node) => node.value);
            this.context.view.showConnectionProperties(value, from, to);
        }
    }
};

view.Edge = class extends grapher.Edge {

    constructor(value, from, to) {
        super(from, to);
        this.value = value;
    }

    get minlen() {
        if (this.from.inputs.every((argument) => argument.value.every((value) => value.initializer))) {
            return 2;
        }
        return 1;
    }

    emit(event) {
        switch (event) {
            case 'pointerover': {
                this.value.context.focus([this.value.value]);
                break;
            }
            case 'pointerleave': {
                this.value.context.blur([this.value.value]);
                break;
            }
            case 'click': {
                this.value.context.activate(this.value.value);
                break;
            }
            default:
                break;
        }
    }
};

view.Sidebar = class {

    constructor(host) {
        this._host = host;
        this._stack = [];
        const pop = () => this._update(this._stack.slice(0, -1));
        this._closeSidebarHandler = () => pop();
        this._closeSidebarKeyDownHandler = (e) => {
            if (e.keyCode == 27) {
                e.preventDefault();
                pop();
            }
        };
        const sidebar = this._element('sidebar');
        sidebar.addEventListener('transitionend', (event) => {
            if (event.propertyName === 'opacity' && sidebar.style.opacity === '0') {
                const content = this._element('sidebar-content');
                content.innerHTML = '';
            }
        });
    }

    _element(id) {
        return this._host.document.getElementById(id);
    }

    open(content, title) {
        this._update([{ title: title, content: content }]);
    }

    close() {
        this._update([]);
    }

    push(content, title) {
        this._update(this._stack.concat({ title: title, content: content }));
    }

    _update(stack) {
        const sidebar = this._element('sidebar');
        const container = this._element('graph');
        const closeButton = this._element('sidebar-closebutton');
        closeButton.removeEventListener('click', this._closeSidebarHandler);
        this._host.document.removeEventListener('keydown', this._closeSidebarKeyDownHandler);
        if (stack) {
            this._stack = stack;
        } else if (this._stack.length > 0) {
            this._stack.pop();
        }
        if (this._stack.length > 0) {
            const item = this._stack[this._stack.length - 1];
            this._element('sidebar-title').innerHTML = item.title || '';
            closeButton.addEventListener('click', this._closeSidebarHandler);
            const content = this._element('sidebar-content');
            if (typeof item.content == 'string') {
                content.innerHTML = item.content;
            } else if (item.content instanceof Array) {
                content.innerHTML = '';
                for (const element of item.content) {
                    content.appendChild(element);
                }
            } else {
                content.innerHTML = '';
                content.appendChild(item.content);
            }
            sidebar.style.width = 'min(calc(100% * 0.6), 42em)';
            sidebar.style.right = 0;
            sidebar.style.opacity = 1;
            this._host.document.addEventListener('keydown', this._closeSidebarKeyDownHandler);
            container.style.width = 'max(40vw, calc(100vw - 42em))';
        } else {
            sidebar.style.right = 'calc(0px - min(calc(100% * 0.6), 42em))';
            sidebar.style.opacity = 0;
            container.style.width = '100%';
            container.focus();
        }
    }
};

view.Control = class {

    constructor(host) {
        this._host = host;
    }

    createElement(tagName, className) {
        const element = this._host.document.createElement(tagName);
        if (className) {
            element.setAttribute('class', className);
        }
        return element;
    }

    on(event, callback) {
        this._events = this._events || {};
        this._events[event] = this._events[event] || [];
        this._events[event].push(callback);
    }

    emit(event, data) {
        if (this._events && this._events[event]) {
            for (const callback of this._events[event]) {
                callback(this, data);
            }
        }
    }
};

view.ObjectSidebar = class extends view.Control {

    constructor(host) {
        super(host);
        this._container = this.createElement('div', 'sidebar-object');
    }

    add(name, item) {
        const entry = new view.NameValueView(this._host, name, item);
        const element = entry.render();
        this._container.appendChild(element);
    }

    addProperty(name, value, style) {
        const item = new view.ValueTextView(this._host, value, style);
        this.add(name, item);
        return item;
    }

    addHeader(title) {
        const element = this.createElement('div', 'sidebar-header');
        element.innerText = title;
        this._container.appendChild(element);
    }

    render() {
        return [this._container];
    }
};

view.NodeSidebar = class extends view.ObjectSidebar {

    constructor(host, node) {
        super(host);
        this._node = node;
        this._attributes = [];
        this._inputs = [];
        this._outputs = [];
        if (node.type) {
            const type = node.type;
            const item = this.addProperty('type', node.type.identifier || node.type.name);
            if (type && (type.description || type.inputs || type.outputs || type.attributes)) {
                item.action(type.nodes ? '\u0192' : '?', () => {
                    this.emit('show-documentation', null);
                });
            }
            if (node.type.module) {
                this.addProperty('module', node.type.module);
            }
        }
        if (node.name) {
            this.addProperty('name', node.name);
        }
        if (node.location) {
            this.addProperty('location', node.location);
        }
        if (node.description) {
            this.addProperty('description', node.description);
        }
        if (node.device) {
            this.addProperty('device', node.device);
        }
        const attributes = node.attributes;
        if (Array.isArray(attributes) && attributes.length > 0) {
            this.addHeader('Attributes');
            attributes.sort((a, b) => {
                const au = a.name.toUpperCase();
                const bu = b.name.toUpperCase();
                return (au < bu) ? -1 : (au > bu) ? 1 : 0;
            });
            for (const attribute of attributes) {
                this._addAttribute(attribute.name, attribute);
            }
        }
        const inputs = node.inputs;
        if (Array.isArray(inputs) && inputs.length > 0) {
            this.addHeader('Inputs');
            for (const input of inputs) {
                this._addInput(input.name, input);
            }
        }
        const outputs = node.outputs;
        if (Array.isArray(outputs) && outputs.length > 0) {
            this.addHeader('Outputs');
            for (const output of outputs) {
                this._addOutput(output.name, output);
            }
        }
    }

    _addAttribute(name, attribute) {
        let value = null;
        switch (attribute.type) {
            case 'tensor': {
                value = new view.ValueView(this._host, { type: attribute.value.type, initializer: attribute.value }, '');
                value.on('export-tensor', (sender, value) => this.emit('export-tensor', value));
                value.on('error', (sender, value) => this.emit('error', value));
                break;
            }
            case 'tensor[]': {
                const values = attribute.value.map((value) => {
                    return { type: value.type, initializer: value };
                });
                value = new view.ArgumentView(this._host, { value: values }, '');
                break;
            }
            default: {
                value = new view.AttributeView(this._host, attribute);
                value.on('activate', (sender, graph) => {
                    this.emit('activate', graph);
                });
                break;
            }
        }
        const item = new view.NameValueView(this._host, name, value);
        this._attributes.push(item);
        this._container.appendChild(item.render());
    }

    _addInput(name, input) {
        if (input.value.length > 0) {
            const value = new view.ArgumentView(this._host, input);
            value.on('export-tensor', (sender, value) => this.emit('export-tensor', value));
            value.on('error', (sender, value) => this.emit('error', value));
            value.on('activate', (sender, value) => this.emit('activate', value));
            value.on('deactivate', (sender, value) => this.emit('deactivate', value));
            value.on('select', (sender, value) => this.emit('select', value));
            const item = new view.NameValueView(this._host, name, value);
            this._inputs.push(item);
            this._container.appendChild(item.render());
        }
    }

    _addOutput(name, output) {
        if (output.value.length > 0) {
            const value = new view.ArgumentView(this._host, output);
            value.on('activate', (sender, value) => this.emit('activate', value));
            value.on('deactivate', (sender, value) => this.emit('deactivate', value));
            value.on('select', (sender, value) => this.emit('select', value));
            const item = new view.NameValueView(this._host, name, value);
            this._outputs.push(item);
            this._container.appendChild(item.render());
        }
    }
};

view.NameValueView = class extends view.Control {

    constructor(host, name, value) {
        super(host);
        this._host = host;
        this._name = name;
        this._value = value;
        const nameElement = this.createElement('div', 'sidebar-item-name');
        const input = this.createElement('input');
        input.setAttribute('type', 'text');
        input.setAttribute('value', name);
        input.setAttribute('title', name);
        input.setAttribute('readonly', 'true');
        nameElement.appendChild(input);
        const valueElement = this.createElement('div', 'sidebar-item-value-list');
        for (const element of value.render()) {
            valueElement.appendChild(element);
        }
        this._element = this.createElement('div', 'sidebar-item');
        this._element.appendChild(nameElement);
        this._element.appendChild(valueElement);
    }

    get name() {
        return this._name;
    }

    render() {
        return this._element;
    }

    toggle() {
        this._value.toggle();
    }
};

view.SelectView = class extends view.Control {

    constructor(host, values, selected) {
        super();
        this._host = host;
        this._elements = [];
        this._values = values;

        const selectElement = this.createElement('select', 'sidebar-item-select');
        selectElement.addEventListener('change', (e) => {
            this.emit('change', this._values[e.target.selectedIndex]);
        });
        this._elements.push(selectElement);

        for (const value of values) {
            const optionElement = this.createElement('option');
            optionElement.innerText = value.name || '';
            if (value == selected) {
                optionElement.setAttribute('selected', 'selected');
            }
            selectElement.appendChild(optionElement);
        }
    }

    render() {
        return this._elements;
    }
};

view.ValueTextView = class extends view.Control {

    constructor(host, value, style) {
        super(host);
        this._element = this.createElement('div', 'sidebar-item-value');
        if (value) {
            const list = Array.isArray(value) ? value : [value];
            let className = 'sidebar-item-value-line';
            for (const item of list) {
                const line = this.createElement('div', className);
                switch (style) {
                    case 'code':
                        line.innerHTML = '<code>' + item + '<code>';
                        break;
                    case 'bold':
                        line.innerHTML = '<b>' + item + '<b>';
                        break;
                    default:
                        line.innerText = item;
                        break;
                }
                this._element.appendChild(line);
                className = 'sidebar-item-value-line-border';
            }
        }
    }

    action(text, callback) {
        this._action = this.createElement('div', 'sidebar-item-value-expander');
        this._action.innerHTML = text;
        this._action.addEventListener('click', () => {
            callback();
        });
        this._element.insertBefore(this._action, this._element.childNodes[0]);
    }

    render() {
        return [this._element];
    }

    toggle() {
    }
};

view.AttributeView = class extends view.Control {

    constructor(host, attribute) {
        super(host);
        this._attribute = attribute;
        this._element = this.createElement('div', 'sidebar-item-value');
        const type = this._attribute.type;
        if (type && type !== 'tensor') {
            this._expander = this.createElement('div', 'sidebar-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.createElement('div', 'sidebar-item-value-line-link');
                line.innerHTML = value.name || '&nbsp;';
                line.addEventListener('click', () => {
                    this.emit('activate', value);
                });
                this._element.appendChild(line);
                break;
            }
            case 'function': {
                const line = this.createElement('div', 'sidebar-item-value-line-link');
                line.innerHTML = value.type.name;
                line.addEventListener('click', () => {
                    this.emit('activate', value);
                });
                this._element.appendChild(line);
                break;
            }
            case 'tensor': {
                throw new view.Error('Attribute view tensor not implemented.');
            }
            default: {
                let content = new view.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.createElement('div', 'sidebar-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 type = this._attribute.type;
            const value = this._attribute.value;
            const content = type == 'tensor' && value && value.type ? value.type.toString() : this._attribute.type;
            const typeLine = this.createElement('div', 'sidebar-item-value-line-border');
            typeLine.innerHTML = 'type: ' + '<code><b>' + content + '</b></code>';
            this._element.appendChild(typeLine);
            const description = this._attribute.description;
            if (description) {
                const descriptionLine = this.createElement('div', 'sidebar-item-value-line-border');
                descriptionLine.innerHTML = description;
                this._element.appendChild(descriptionLine);
            }
        } else {
            this._expander.innerText = '+';
            while (this._element.childElementCount > 2) {
                this._element.removeChild(this._element.lastChild);
            }
        }
    }
};

view.ArgumentView = class extends view.Control {

    constructor(host, argument) {
        super();
        this._argument = argument;
        this._elements = [];
        this._items = [];
        for (const value of argument.value) {
            const item = new view.ValueView(host, value);
            item.on('export-tensor', (sender, value) => this.emit('export-tensor', value));
            item.on('error', (sender, value) => this.emit('error', value));
            item.on('activate', (sender, value) => this.emit('activate', value));
            item.on('deactivate', (sender, value) => this.emit('deactivate', value));
            item.on('select', (sender, value) => this.emit('select', value));
            this._items.push(item);
            for (const element of item.render()) {
                this._elements.push(element);
            }
        }
    }

    render() {
        return this._elements;
    }

    toggle() {
        for (const item of this._items) {
            item.toggle();
        }
    }
};

view.ValueView = class extends view.Control {

    constructor(host, value, name) {
        super(host);
        this._value = value;
        this._element = this.createElement('div', 'sidebar-item-value');
        const type = this._value.type;
        const initializer = this._value.initializer;
        const quantization = this._value.quantization;
        const location = this._value.location !== undefined;
        if (initializer) {
            this._element.classList.add('sidebar-item-value-dark');
        }
        if (type || initializer || quantization || location || name === undefined) {
            this._expander = this.createElement('div', 'sidebar-item-value-expander');
            this._expander.innerText = '+';
            this._expander.addEventListener('click', () => {
                this.toggle();
            });
            this._element.appendChild(this._expander);
        }
        const tensor = name !== undefined;
        name = this._value.name ? this._value.name.split('\n').shift() : ''; // custom argument id
        this._hasId = name && !tensor ? true : false;
        this._hasCategory = initializer && initializer.category ? true : false;
        if (this._hasId || (!this._hasCategory && !type && !tensor)) {
            this._hasId = true;
            const nameLine = this.createElement('div', 'sidebar-item-value-line');
            if (typeof name !== 'string') {
                throw new Error("Invalid value identifier '" + JSON.stringify(name) + "'.");
            }
            nameLine.innerHTML = '<span class=\'sidebar-item-value-line-content\'>name: <b>' + (name || ' ') + '</b></span>';
            nameLine.addEventListener('pointerenter', () => this.emit('activate', this._value));
            nameLine.addEventListener('pointerleave', () => this.emit('deactivate', this._value));
            if (!initializer) {
                nameLine.style.cursor = 'pointer';
                nameLine.addEventListener('click', () => this.emit('select', this._value));
            }
            this._element.appendChild(nameLine);
        } else if (this._hasCategory) {
            this._bold('category', initializer.category);
        } else if (type) {
            this._code('tensor', type.toString().split('<').join('&lt;').split('>').join('&gt;'));
        }
    }

    render() {
        return [this._element];
    }

    toggle() {
        if (this._expander) {
            if (this._expander.innerText == '+') {
                this._expander.innerText = '-';
                const initializer = this._value.initializer;
                if (this._hasId && this._hasCategory) {
                    this._bold('category', initializer.category);
                }
                let type = null;
                let denotation = null;
                if (this._value.type) {
                    type = this._value.type.toString();
                    denotation = this._value.type.denotation || null;
                }
                if (type && (this._hasId || this._hasCategory)) {
                    this._code('tensor', type.split('<').join('&lt;').split('>').join('&gt;'));
                }
                if (denotation) {
                    this._code('denotation', denotation);
                }
                const description = this._value.description;
                if (description) {
                    const descriptionLine = this.createElement('div', 'sidebar-item-value-line-border');
                    descriptionLine.innerHTML = description;
                    this._element.appendChild(descriptionLine);
                }
                const quantization = this._value.quantization;
                if (quantization) {
                    const quantizationLine = this.createElement('div', 'sidebar-item-value-line-border');
                    const content = !Array.isArray(quantization) ? quantization : '<br><br>' + quantization.map((value) => '  ' + value).join('<br>');
                    quantizationLine.innerHTML = '<span class=\'sidebar-item-value-line-content\'>quantization: ' + '<b>' + content + '</b></span>';
                    this._element.appendChild(quantizationLine);
                }
                const location = this._value.location;
                if (location !== undefined) {
                    this._bold('location', location);
                }
                const layout = this._value.type ? this._value.type.layout : null;
                if (layout) {
                    const layouts = new Map([
                        ['sparse', 'sparse'],
                        ['sparse.coo', 'sparse coo'],
                        ['sparse.csr', 'sparse csr'],
                        ['sparse.csc', 'sparse csc'],
                        ['sparse.bsr', 'sparse bsr'],
                        ['sparse.bsc', 'sparse bsc']
                    ]);
                    this._bold('layout', layouts.get(layout));
                }
                if (initializer) {
                    this._tensor(initializer);
                }
            } else {
                this._expander.innerText = '+';
                while (this._element.childElementCount > 2) {
                    this._element.removeChild(this._element.lastChild);
                }
            }
        }
    }

    _bold(name, value) {
        const line = this.createElement('div');
        line.innerHTML = name + ': ' + '<b>' + value + '</b>';
        this._add(line);
    }

    _code(name, value) {
        const line = this.createElement('div');
        line.innerHTML = name + ': ' + '<code><b>' + value + '</b></code>';
        this._add(line);
    }

    _add(child) {
        child.className = this._element.childNodes.length < 2 ? 'sidebar-item-value-line' : 'sidebar-item-value-line-border';
        this._element.appendChild(child);
    }

    _tensor(value) {
        const contentLine = this.createElement('pre');
        try {
            const tensor = new view.Tensor(value);
            if (Array.isArray(tensor.stride) && tensor.stride.length > 0) {
                this._code('stride', tensor.stride.join(','));
            }
            if (tensor.encoding !== '<' && tensor.encoding !== '>' && tensor.encoding !== '|') {
                contentLine.innerHTML = "Tensor encoding '" + tensor.layout + "' is not implemented.";
            } else if (tensor.layout && (tensor.layout !== 'sparse' && tensor.layout !== 'sparse.coo')) {
                contentLine.innerHTML = "Tensor layout '" + tensor.layout + "' is not implemented.";
            } else if (tensor.empty) {
                contentLine.innerHTML = 'Tensor data is empty.';
            } else if (tensor.type && tensor.type.dataType === '?') {
                contentLine.innerHTML = 'Tensor data type is not defined.';
            } else if (tensor.type && !tensor.type.shape) {
                contentLine.innerHTML = 'Tensor shape is not defined.';
            } else {
                contentLine.innerHTML = tensor.toString();
                if (this._host.save &&
                    value.type.shape && value.type.shape.dimensions &&
                    value.type.shape.dimensions.length > 0) {
                    this._saveButton = this.createElement('div', 'sidebar-item-value-expander');
                    this._saveButton.innerHTML = '&#x1F4BE;';
                    this._saveButton.addEventListener('click', () => {
                        this.emit('export-tensor', tensor);
                    });
                    this._element.appendChild(this._saveButton);
                }
            }
        } catch (err) {
            contentLine.innerHTML = err.toString();
            this.emit('error', err);
        }
        const valueLine = this.createElement('div', 'sidebar-item-value-line-border');
        valueLine.appendChild(contentLine);
        this._element.appendChild(valueLine);
    }
};

view.NodeView = class extends view.Control {

    constructor(host, node) {
        super(host);
        this._node = node;
        this._element = this.createElement('div', 'sidebar-item-value');
        const name = node.name;
        const type = node.type ? node.type.name : '';
        if (name && type) {
            this._expander = this.createElement('div', 'sidebar-item-value-expander');
            this._expander.innerText = '+';
            this._expander.addEventListener('click', () => {
                this.toggle();
            });
            this._element.appendChild(this._expander);
        }
        if (type) {
            const type = node.type.name;
            const element = this.createElement('div', 'sidebar-item-value-line');
            element.innerHTML = '<span class=\'sidebar-item-value-line-content\'>node: <b>' + (type || ' ') + '</b></span>';
            element.addEventListener('pointerenter', () => this.emit('activate', this._node));
            element.addEventListener('pointerleave', () => this.emit('deactivate', this._node));
            element.addEventListener('click', () => this.emit('select', this._node));
            element.style.cursor = 'pointer';
            this._element.appendChild(element);
        } else {
            const element = this.createElement('div', 'sidebar-item-value-line');
            element.innerHTML = '<span class=\'sidebar-item-value-line-content\'>name: <b>' + (name || ' ') + '</b></span>';
            element.addEventListener('pointerenter', () => this.emit('activate', this._node));
            element.addEventListener('pointerleave', () => this.emit('deactivate', this._node));
            element.addEventListener('click', () => this.emit('select', this._node));
            element.style.cursor = 'pointer';
            this._element.appendChild(element);
        }
    }

    render() {
        return [this._element];
    }

    toggle() {
        if (this._expander) {
            if (this._expander.innerText == '+') {
                this._expander.innerText = '-';
                const name = this._node.name;
                const element = this.createElement('div', 'sidebar-item-value-line-border');
                element.innerHTML = '<span class=\'sidebar-item-value-line-content\'>name: <b>' + name + '</b></span>';
                element.addEventListener('pointerenter', () => this.emit('activate', this._node));
                element.addEventListener('pointerleave', () => this.emit('deactivate', this._node));
                element.addEventListener('click', () => this.emit('select', this._node));
                element.style.cursor = 'pointer';
                this._element.appendChild(element);
            } else {
                this._expander.innerText = '+';
                while (this._element.childElementCount > 2) {
                    this._element.removeChild(this._element.lastChild);
                }
            }
        }
    }
};

view.NodeListView = class extends view.Control {

    constructor(host, list) {
        super();
        this._host = host;
        this._elements = [];
        for (const node of list) {
            const item = new view.NodeView(host, node);
            item.on('activate', (sender, value) => this.emit('activate', value));
            item.on('deactivate', (sender, value) => this.emit('deactivate', value));
            item.on('select', (sender, value) => this.emit('select', value));
            item.toggle();
            for (const element of item.render()) {
                this._elements.push(element);
            }
        }
    }

    render() {
        return this._elements;
    }
};

view.ConnectionSidebar = class extends view.ObjectSidebar {

    constructor(host, value, from, to) {
        super(host);
        this._host = host;
        this._value = value;
        this._from = from;
        this._to = to;
        const [name] = value.name.split('\n');
        this.addProperty('name', name);
        if (value.type) {
            const item = new view.ValueView(this._host, value, '');
            this.add('type', item);
            item.toggle();
        }
        if (from) {
            this.addHeader('Inputs');
            const list = new view.NodeListView(host, [from]);
            list.on('activate', (sender, value) => this.emit('activate', value));
            list.on('deactivate', (sender, value) => this.emit('deactivate', value));
            list.on('select', (sender, value) => this.emit('select', value));
            const item = new view.NameValueView(this._host, 'from', list);
            this._container.appendChild(item.render());
        }
        if (Array.isArray(to) && to.length > 0) {
            this.addHeader('Outputs');
            const list = new view.NodeListView(this._host, to);
            list.on('activate', (sender, value) => this.emit('activate', value));
            list.on('deactivate', (sender, value) => this.emit('deactivate', value));
            list.on('select', (sender, value) => this.emit('select', value));
            const item = new view.NameValueView(this._host, 'to', list);
            this._container.appendChild(item.render());
        }
    }
};

view.ModelSidebar = class extends view.ObjectSidebar {

    constructor(host, model, graph) {
        super(host);
        this._model = model;

        if (model.format) {
            this.addProperty('format', model.format);
        }
        if (model.producer) {
            this.addProperty('producer', model.producer);
        }
        if (model.name) {
            this.addProperty('name', model.name);
        }
        if (model.version) {
            this.addProperty('version', model.version);
        }
        if (model.description) {
            this.addProperty('description', model.description);
        }
        if (model.domain) {
            this.addProperty('domain', model.domain);
        }
        if (model.imports) {
            this.addProperty('imports', model.imports);
        }
        if (model.runtime) {
            this.addProperty('runtime', model.runtime);
        }
        if (model.metadata) {
            for (const entry of model.metadata) {
                this.addProperty(entry.name, entry.value);
            }
        }
        const graphs = Array.isArray(model.graphs) ? model.graphs : [];
        if (graphs.length === 1 && graphs[0].name) {
            this.addProperty('graph', graphs[0].name);
        } else if (graphs.length > 1) {
            const selector = new view.SelectView(this._host, model.graphs, graph);
            selector.on('change', (sender, data) => this.emit('update-active-graph', data));
            this.add('graph', selector);
        }
        if (graph) {
            if (graph.version) {
                this.addProperty('version', graph.version);
            }
            if (graph.type) {
                this.addProperty('type', graph.type);
            }
            if (graph.tags) {
                this.addProperty('tags', graph.tags);
            }
            if (graph.description) {
                this.addProperty('description', 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);
                }
            }
        }
    }

    render() {
        return [this._container];
    }

    addArgument(name, argument) {
        const value = new view.ArgumentView(this._host, argument);
        value.toggle();
        const item = new view.NameValueView(this._host, name, value);
        this._container.appendChild(item.render());
    }
};

view.DocumentationSidebar = class extends view.Control {

    constructor(host, type) {
        super();
        this._host = host;
        this._type = type;
    }

    render() {
        if (!this._elements) {
            this._elements = [];
            const type = view.Documentation.format(this._type);
            const element = this.createElement('div', 'sidebar-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>.');
            }
            this._elements = [element];
        }
        return this._elements;
    }

    _append(parent, type, content) {
        const element = this.createElement(type);
        if (content) {
            element.innerHTML = content;
        }
        parent.appendChild(element);
        return element;
    }
};

view.FindSidebar = class extends view.Control {

    constructor(host, graph) {
        super(host);
        this._graph = graph;
        this._table = new Map();
        this._searchElement = this.createElement('input', 'sidebar-find-search');
        this._searchElement.setAttribute('id', 'search');
        this._searchElement.setAttribute('type', 'text');
        this._searchElement.setAttribute('spellcheck', 'false');
        this._searchElement.setAttribute('placeholder', 'Search');
        this._searchElement.addEventListener('input', (e) => {
            this.update(e.target.value);
            this.emit('search-text-changed', e.target.value);
        });
        this._searchElement.addEventListener('keydown', (e) => {
            if (e.keyCode === 0x08 && !e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
                e.stopPropagation();
            }
        });
        this._contentElement = this.createElement('ol', 'sidebar-find-content');
        this._contentElement.addEventListener('click', (e) => {
            const identifier = e.target.getAttribute('data');
            if (this._table.has(identifier)) {
                this.emit('select', this._table.get(identifier));
            }
        });
    }

    on(event, callback) {
        this._events = this._events || {};
        this._events[event] = this._events[event] || [];
        this._events[event].push(callback);
    }

    emit(event, data) {
        if (this._events && this._events[event]) {
            for (const callback of this._events[event]) {
                callback(this, data);
            }
        }
    }

    focus(searchText) {
        this._searchElement.focus();
        this._searchElement.value = '';
        this._searchElement.value = searchText;
        this.update(searchText);
    }

    update(searchText) {
        while (this._contentElement.lastChild) {
            this._contentElement.removeChild(this._contentElement.lastChild);
        }
        this._table.clear();
        let index = 0;
        const add = (value, content) => {
            const key = index.toString();
            index++;
            this._table.set(key, value);
            const element = this.createElement('li');
            element.innerText = content;
            element.setAttribute('data', key);
            element.addEventListener('pointerover', (e) => {
                const identifier = e.target.getAttribute('data');
                if (this._table.has(identifier)) {
                    this.emit('focus', this._table.get(identifier));
                }
            });
            element.addEventListener('pointerleave', (e) => {
                const identifier = e.target.getAttribute('data');
                if (this._table.has(identifier)) {
                    this.emit('blur', this._table.get(identifier));
                }
            });
            this._contentElement.appendChild(element);
        };
        let terms = null;
        let match = null;
        const unquote = searchText.match(new RegExp(/^'(.*)'|"(.*)"$/));
        if (unquote) {
            const term = unquote[1] || unquote[2];
            terms = [term];
            match = (name) => {
                return term === name;
            };
        } else {
            terms = searchText.trim().toLowerCase().split(' ').map((term) => term.trim()).filter((term) => term.length > 0);
            match = (name) => {
                return terms.every((term) => name.toLowerCase().indexOf(term) !== -1);
            };
        }
        const edges = new Set();
        const matchValue = (value) => {
            if (terms.length === 0) {
                return true;
            }
            if (value.name && match(value.name.split('\n').shift())) {
                return true;
            }
            if (value.location && match(value.location)) {
                return true;
            }
            if (value.type) {
                for (const term of terms) {
                    if (value.type.dataType && term === value.type.dataType.toLowerCase()) {
                        return true;
                    }
                    if (value.type.shape) {
                        if (term === value.type.shape.toString().toLowerCase()) {
                            return true;
                        }
                        if (value.type.shape && Array.isArray(value.type.shape.dimensions)) {
                            const dimensions = value.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;
        };
        const edge = (value) => {
            if (value.name && !edges.has(value.name) && matchValue(value)) {
                add(value, '\u2192 ' + value.name.split('\n').shift()); // split custom argument id
                edges.add(value.name);
            }
        };
        for (const input of this._graph.inputs) {
            for (const value of input.value) {
                edge(value);
            }
        }
        for (const node of this._graph.nodes) {
            const initializers = [];
            for (const input of node.inputs) {
                for (const value of input.value) {
                    if (value.initializer) {
                        initializers.push(value);
                    } else {
                        edge(value);
                    }
                }
            }
            const name = node.name;
            const type = node.type.name;
            const location = node.location;
            if ((name && match(name)) || (type && match(type)) || (location && match(location))) {
                add(node, '\u25A2 ' + (name || '[' + type + ']'));
            }
            for (const value of initializers) {
                if (value.name && !edges.has(value.name) && matchValue(value)) {
                    add(node, '\u25A0 ' + value.name.split('\n').shift()); // split custom argument id
                }
            }
        }
        for (const output of this._graph.outputs) {
            for (const value of output.value) {
                edge(value);
            }
        }
        this._contentElement.style.display = this._contentElement.childNodes.length != 0 ? 'block' : 'none';
    }

    render() {
        return [this._searchElement, this._contentElement];
    }
};

view.Tensor = class {

    constructor(tensor) {
        this._tensor = tensor;
        this._type = tensor.type;
        this._encoding = tensor.encoding;
        this._layout = tensor.type.layout;
        this._stride = tensor.stride;
        switch (this._encoding) {
            case undefined:
            case '':
            case '<': {
                this._data = this._tensor.values;
                this._encoding = '<';
                this._littleEndian = true;
                break;
            }
            case '>': {
                this._data = this._tensor.values;
                this._encoding = '>';
                this._littleEndian = false;
                break;
            }
            case '|': {
                this._values = this._tensor.values;
                this._encoding = '|';
                break;
            }
            default: {
                throw new view.Error("Unsupported tensor encoding '" + this._encoding + "'.");
            }
        }
        switch (this._layout) {
            case 'sparse':
            case 'sparse.coo': {
                this._indices = this._tensor.indices;
                this._values = this._tensor.values;
                break;
            }
            default: {
                break;
            }
        }
        view.Tensor.dataTypes = view.Tensor.dataTypeSizes || new Map([
            ['boolean', 1],
            ['qint8', 1], ['qint16', 2], ['qint32', 4],
            ['quint8', 1], ['quint16', 2], ['quint32', 4],
            ['xint8', 1],
            ['int8', 1], ['int16', 2], ['int32', 4], ['int64', 8],
            ['uint8', 1], ['uint16', 2], ['uint32', 4,], ['uint64', 8],
            ['float16', 2], ['float32', 4], ['float64', 8], ['bfloat16', 2],
            ['complex64', 8], ['complex128', 16],
            ['float8e4m3fn', 1], ['float8e4m3fnuz', 1], ['float8e5m2', 1], ['float8e5m2fnuz', 1]
        ]);
    }

    get type() {
        return this._type;
    }

    get encoding() {
        return this._encoding;
    }

    get layout() {
        return this._layout;
    }

    get stride() {
        return this._stride;
    }

    get empty() {
        switch (this._layout) {
            case 'sparse':
            case 'sparse.coo': {
                return !this._values || this.indices || this._values.values === null || this._values.values.length === 0;
            }
            default: {
                switch (this._encoding) {
                    case '<':
                    case '>':
                        return !(Array.isArray(this._data) || this._data instanceof Uint8Array || this._data instanceof Int8Array) || this._data.length === 0;
                    case '|':
                        return !(Array.isArray(this._values) || ArrayBuffer.isView(this._values)) || this._values.length === 0;
                    default:
                        throw new Error("Unsupported tensor encoding '" + this._encoding + "'.");
                }
            }
        }
    }

    get value() {
        const context = this._context();
        context.limit = Number.MAX_SAFE_INTEGER;
        switch (context.encoding) {
            case '<':
            case '>': {
                return this._decodeData(context, 0, 0);
            }
            case '|': {
                return this._decodeValues(context, 0, 0);
            }
            default: {
                throw new Error("Unsupported tensor encoding '" + context.encoding + "'.");
            }
        }
    }

    toString() {
        const context = this._context();
        context.limit = 10000;
        switch (context.encoding) {
            case '<':
            case '>': {
                const value = this._decodeData(context, 0, 0);
                return view.Tensor._stringify(value, '', '    ');
            }
            case '|': {
                const value = this._decodeValues(context, 0, 0);
                return view.Tensor._stringify(value, '', '    ');
            }
            default: {
                throw new Error("Unsupported tensor encoding '" + context.encoding + "'.");
            }
        }
    }

    _context() {
        if (this._encoding !== '<' && this._encoding !== '>' && this._encoding !== '|') {
            throw new Error("Tensor encoding '" + this._encoding + "' is not supported.");
        }
        if (this._layout && (this._layout !== 'sparse' && this._layout !== 'sparse.coo')) {
            throw new Error("Tensor layout '" + this._layout + "' is not supported.");
        }
        const dataType = this._type.dataType;
        const context = {};
        context.encoding = this._encoding;
        context.dimensions = this._type.shape.dimensions.map((value) => !Number.isInteger(value) && value.toNumber ? value.toNumber() : value);
        context.dataType = dataType;
        const shape = context.dimensions;
        context.stride = this._stride;
        if (!Array.isArray(context.stride)) {
            context.stride = new Array(shape.length);
            let value = 1;
            for (let i = shape.length - 1; i >= 0; i--) {
                context.stride[i] = value;
                value *= shape[i];
            }
        }
        switch (this._layout) {
            case 'sparse': {
                const indices = new view.Tensor(this._indices).value;
                const values = new view.Tensor(this._values).value;
                context.data = this._decodeSparse(dataType, context.dimensions, indices, values);
                context.encoding = '|';
                break;
            }
            case 'sparse.coo': {
                const values = new view.Tensor(this._values).value;
                const data = new view.Tensor(this._indices).value;
                const dimensions = context.dimensions.length;
                let stride = 1;
                const strides = context.dimensions.slice().reverse().map((dim) => {
                    const value = stride;
                    stride *= dim;
                    return value;
                }).reverse();
                const indices = new Uint32Array(values.length);
                for (let i = 0; i < dimensions; i++) {
                    const stride = strides[i];
                    const dimension = data[i];
                    for (let i = 0; i < indices.length; i++) {
                        indices[i] += dimension[i] * stride;
                    }
                }
                context.data = this._decodeSparse(dataType, context.dimensions, indices, values);
                context.encoding = '|';
                break;
            }
            default: {
                switch (this._encoding) {
                    case '<':
                    case '>': {
                        context.data = (this._data instanceof Uint8Array || this._data instanceof Int8Array) ? this._data : this._data.peek();
                        context.view = new DataView(context.data.buffer, context.data.byteOffset, context.data.byteLength);
                        if (view.Tensor.dataTypes.has(dataType)) {
                            const itemsize = view.Tensor.dataTypes.get(dataType);
                            const length = context.data.length;
                            const stride = context.stride;
                            if (length < (itemsize * shape.reduce((a, v) => a * v, 1))) {
                                const max = stride.reduce((a, v, i) => v > stride[i] ? i : a, 0);
                                if (length !== (itemsize * stride[max] * shape[max])) {
                                    throw new Error('Invalid tensor data size.');
                                }
                            }
                            context.itemsize = itemsize;
                            context.stride = stride.map((v) => v * itemsize);
                        } else if (dataType.startsWith('uint') && !isNaN(parseInt(dataType.substring(4), 10))) {
                            context.dataType = 'uint';
                            context.bits = parseInt(dataType.substring(4), 10);
                            context.itemsize = 1;
                        } else if (dataType.startsWith('int') && !isNaN(parseInt(dataType.substring(3), 10))) {
                            context.dataType = 'int';
                            context.bits = parseInt(dataType.substring(3), 10);
                            context.itemsize = 1;
                        } else {
                            throw new Error("Tensor data type '" + dataType + "' is not implemented.");
                        }
                        break;
                    }
                    case '|': {
                        context.data = this._values;
                        if (!view.Tensor.dataTypes.has(dataType) && dataType !== 'string' && dataType !== 'object') {
                            throw new Error("Tensor data type '" + dataType + "' is not implemented.");
                        }
                        const size = context.dimensions.reduce((a, v) => a * v, 1);
                        if (size !== this._values.length) {
                            throw new Error('Invalid tensor data length.');
                        }
                        break;
                    }
                    default: {
                        throw new view.Tensor("Unsupported tensor encoding '" + this._encoding + "'.");
                    }
                }
            }
        }
        context.index = 0;
        context.count = 0;
        return context;
    }

    _decodeSparse(dataType, dimensions, indices, values) {
        const size = dimensions.reduce((a, b) => a * b, 1);
        const array = new Array(size);
        switch (dataType) {
            case 'boolean':
                array.fill(false);
                break;
            default:
                array.fill(0);
                break;
        }
        if (indices.length > 0) {
            if (Object.prototype.hasOwnProperty.call(indices[0], 'low')) {
                for (let i = 0; i < indices.length; i++) {
                    const index = indices[i];
                    array[index.high === 0 ? index.low : index.toNumber()] = values[i];
                }
            } else {
                for (let i = 0; i < indices.length; i++) {
                    array[indices[i]] = values[i];
                }
            }
        }
        return array;
    }

    _decodeData(context, dimension, offset) {
        const results = [];
        const shape = context.dimensions.length == 0 ? [1] : context.dimensions;
        const size = shape[dimension];
        const dataType = context.dataType;
        const view = context.view;
        const stride = context.stride[dimension];
        if (dimension == shape.length - 1) {
            const ellipsis = (context.count + size) > context.limit;
            const length = ellipsis ? context.limit - context.count : size;
            const max = offset + (length * context.itemsize);
            switch (dataType) {
                case 'boolean':
                    for (; offset < max; offset += stride) {
                        results.push(view.getUint8(offset) === 0 ? false : true);
                    }
                    break;
                case 'qint8':
                case 'xint8':
                case 'int8':
                    for (; offset < max; offset += stride) {
                        results.push(view.getInt8(offset));
                    }
                    break;
                case 'qint16':
                case 'int16':
                    for (; offset < max; offset += stride) {
                        results.push(view.getInt16(offset, this._littleEndian));
                    }
                    break;
                case 'qint32':
                case 'int32':
                    for (; offset < max; offset += stride) {
                        results.push(view.getInt32(offset, this._littleEndian));
                    }
                    break;
                case 'int64':
                    for (; offset < max; offset += stride) {
                        results.push(view.getInt64(offset, this._littleEndian));
                    }
                    break;
                case 'int':
                    for (; offset < size; offset += stride) {
                        results.push(view.getIntBits(offset, context.bits));
                    }
                    break;
                case 'quint8':
                case 'uint8':
                    for (; offset < max; offset += stride) {
                        results.push(view.getUint8(offset));
                    }
                    break;
                case 'quint16':
                case 'uint16':
                    for (; offset < max; offset += stride) {
                        results.push(view.getUint16(offset, true));
                    }
                    break;
                case 'quint32':
                case 'uint32':
                    for (; offset < max; offset += stride) {
                        results.push(view.getUint32(offset, true));
                    }
                    break;
                case 'uint64':
                    for (; offset < max; offset += stride) {
                        results.push(view.getUint64(offset, true));
                    }
                    break;
                case 'uint':
                    for (; offset < max; offset += stride) {
                        results.push(view.getUintBits(offset, context.bits));
                    }
                    break;
                case 'float16':
                    for (; offset < max; offset += stride) {
                        results.push(view.getFloat16(offset, this._littleEndian));
                    }
                    break;
                case 'float32':
                    for (; offset < max; offset += stride) {
                        results.push(view.getFloat32(offset, this._littleEndian));
                    }
                    break;
                case 'float64':
                    for (; offset < max; offset += stride) {
                        results.push(view.getFloat64(offset, this._littleEndian));
                    }
                    break;
                case 'bfloat16':
                    for (; offset < max; offset += stride) {
                        results.push(view.getBfloat16(offset, this._littleEndian));
                    }
                    break;
                case 'complex64':
                    for (; offset < max; offset += stride) {
                        results.push(view.getComplex64(offset, this._littleEndian));
                    }
                    break;
                case 'complex128':
                    for (; offset < size; offset += stride) {
                        results.push(view.getComplex128(offset, this._littleEndian));
                    }
                    break;
                case 'float8e4m3fn':
                    for (; offset < size; offset += stride) {
                        results.push(view.getFloat8e4m3(offset, true, false));
                    }
                    break;
                case 'float8e4m3fnuz':
                    for (; offset < size; offset += stride) {
                        results.push(view.getFloat8e4m3(offset, true, true));
                    }
                    break;
                case 'float8e5m2':
                    for (; offset < size; offset += stride) {
                        results.push(view.getFloat8e5m2(offset, false, false));
                    }
                    break;
                case 'float8e5m2fnuz':
                    for (; offset < size; offset += stride) {
                        results.push(view.getFloat8e5m2(offset, true, true));
                    }
                    break;
                default:
                    throw new Error("Unsupported tensor data type '" + dataType + "'.");
            }
            context.count += length;
            if (ellipsis) {
                results.push('...');
            }
        } else {
            for (let j = 0; j < size; j++) {
                if (context.count >= context.limit) {
                    results.push('...');
                    return results;
                }
                const nextOffset = offset + (j * stride);
                results.push(this._decodeData(context, dimension + 1, nextOffset));
            }
        }
        if (context.dimensions.length == 0) {
            return results[0];
        }
        return results;
    }

    _decodeValues(context, dimension, position) {
        const results = [];
        const shape = (context.dimensions.length == 0) ? [1] : context.dimensions;
        const size = shape[dimension];
        const dataType = context.dataType;
        const stride = context.stride[dimension];
        if (dimension == shape.length - 1) {
            const ellipsis = (context.count + size) > context.limit;
            const length = ellipsis ? context.limit - context.count : size;
            const data = context.data;
            for (let i = 0; i < length; i++) {
                if (context.count > context.limit) {
                    results.push('...');
                    return results;
                }
                switch (dataType) {
                    case 'boolean':
                        results.push(data[position] === 0 ? false : true);
                        break;
                    default:
                        results.push(data[position]);
                        break;
                }
                position += stride;
                context.count++;
            }
        } else {
            for (let i = 0; i < size; i++) {
                if (context.count >= context.limit) {
                    results.push('...');
                    return results;
                }
                const nextPosition = position + (i * stride);
                results.push(this._decodeValues(context, dimension + 1, nextPosition));
            }
        }
        if (context.dimensions.length == 0) {
            return results[0];
        }
        return results;
    }

    static _stringify(value, indentation, indent) {
        if (Array.isArray(value)) {
            const result = [];
            result.push(indentation + '[');
            const items = value.map((item) => view.Tensor._stringify(item, indentation + indent, indent));
            if (items.length > 0) {
                result.push(items.join(',\n'));
            }
            result.push(indentation + ']');
            return result.join('\n');
        }
        if (value === null) {
            return indentation + 'null';
        }
        switch (typeof value) {
            case 'boolean':
                return indentation + value.toString();
            case 'string':
                return indentation + '"' + value + '"';
            case 'number':
                if (value == Infinity) {
                    return indentation + 'Infinity';
                }
                if (value == -Infinity) {
                    return indentation + '-Infinity';
                }
                if (isNaN(value)) {
                    return indentation + 'NaN';
                }
                return indentation + value.toString();
            default:
                if (value && value.toString) {
                    return indentation + value.toString();
                }
                return indentation + '(undefined)';
        }
    }
};

view.Documentation = class {

    static format(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 '';
    }
};

view.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 (value && value.__class__ && value.__class__.__module__ === 'builtins' && value.__class__.__name__ === 'type') {
            return value.__module__ + '.' + value.__name__;
        }
        if (value && value.__class__ && value.__class__.__module__ === 'builtins' && value.__class__.__name__ === 'function') {
            return value.__module__ + '.' + value.__name__;
        }
        if (typeof value === 'function') {
            return value();
        }
        if (value && Number.isInteger(value)) {
            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 'object':
            case 'function':
                return value.type.name;
            case 'object[]':
            case 'function[]':
                return value ? value.map((item) => item.type.name).join(', ') : '(null)';
            case 'type':
                return value ? value.toString() : '(null)';
            case 'type[]':
                return value ? value.map((item) => item.toString()).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 && Number.isInteger(item)) {
                    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);
        let list = null;
        const entries = Object.entries(value).filter(([name]) => !name.startsWith('__') && !name.endsWith('__'));
        if (entries.length == 1) {
            list = [this._format(entries[0][1], null, true)];
        } else {
            list = entries.map(([name, value]) => name + ': ' + this._format(value, 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(', ');
        }
    }
};

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();
        source = source.replace(/\r\n|\r/g, '\n').replace(/\t/g, '    ');
        this._tokenize(source, tokens, links, true);
        this._tokenizeBlock(tokens, links);
        const result = this._render(tokens, 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;
                    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) {
                const [value, , bull] = match;
                const ordered = bull.length > 1;
                const parent = bull[bull.length - 1] === ')';
                let raw = value;
                const list = { type: 'list', raw: raw, ordered: ordered, start: ordered ? +bull.slice(0, -1) : '', loose: false, items: [] };
                const itemMatch = value.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]);
                        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;
                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) {
                const [value, text] = match;
                source = source.substring(value.length);
                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] === '@';
                    let [value] = match;
                    if (!email) {
                        let prevCapZero;
                        do {
                            prevCapZero = value;
                            [value] = this._backpedalRegExp.exec(value);
                        } while (prevCapZero !== value);
                    }
                    const text = this._escape(value);
                    const href = email ? ('mailto:' + text) : (match[1] === 'www.' ? 'http://' + text : text);
                    source = source.substring(value.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, 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;
                    html += '<h' + level + '">' + this._renderInline(token.tokens) + '</h' + level + '>\n';
                    continue;
                }
                case 'code': {
                    const code = token.text;
                    const [language] = (token.language || '').match(/\S*/);
                    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, 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, 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) {
        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);
                    html += '<a href="' + token.href + '"' + (token.title ? ' title="' + token.title + '"' : '') + ' target="_blank">' + text + '</a>';
                    break;
                }
                case 'image': {
                    html += '<img src="' + token.href + '" alt="' + token.text + '"' + (token.title ? ' title="' + token.title + '"' : '') + '>';
                    break;
                }
                case 'strong': {
                    const text = this._renderInline(token.tokens);
                    html += '<strong>' + text + '</strong>';
                    break;
                }
                case 'em': {
                    const text = this._renderInline(token.tokens);
                    html += '<em>' + text + '</em>';
                    break;
                }
                case 'codespan': {
                    html += '<code>' + token.text + '</code>';
                    break;
                }
                case 'br': {
                    html += '<br>';
                    break;
                }
                case 'del': {
                    const text = this._renderInline(token.tokens);
                    html += '<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, '|'));
    }

    _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;
    }
};

view.Error = class extends Error {

    constructor(message) {
        super(message);
        this.name = 'Error loading model.';
    }
};

if (typeof window !== 'undefined' && typeof window === 'object') {
    window.View = view.View;
}

if (typeof module !== 'undefined' && typeof module.exports === 'object') {
    module.exports = view.View;
}