Study: fetch() related methods in view.js

[seanshpark]

Purpose: to add something like fetchOndemand()

---

The weight icon?

            <symbol id="sidebar-icon-weight" viewBox="0 0 20 20">
                <circle cx="5" cy="5" r="1" />
                <circle cx="10" cy="5" r="1" />
                <circle cx="15" cy="5" r="1" />
                <circle cx="5" cy="10" r="1" />
                <circle cx="10" cy="10" r="1" />
                <circle cx="15" cy="10" r="1" />
                <circle cx="5" cy="15" r="1" />
                <circle cx="10" cy="15" r="1" />
                <circle cx="15" cy="15" r="1" />
          </symbol>

---

set ELECTRON_ENABLE_LOGGING=true

[seanshpark]

• from #6
• not sure adding fetchOndemand() will provide the feature as of now

[seanshpark]

Where this object be consumed?

• view.Value ?
• view.ValueView ?
• view.TensorView ?

Related

• metrics.Tensor

[seanshpark]

weight icon from view.ValueView ctor

            if (initializer && source !== 'attribute') {
                const element = this.createElement('div', 'sidebar-item-value-button');
                element.classList.add('sidebar-item-value-button-tool');
                element.setAttribute('title', 'Show Tensor');
                element.innerHTML = `<svg class='sidebar-find-content-icon'><use href="#sidebar-icon-weight"></use></svg>`;
                element.addEventListener('pointerenter', () => this.emit('focus', this._value));
                element.addEventListener('pointerleave', () => this.emit('blur', this._value));
                element.style.cursor = 'pointer';
                element.addEventListener('click', () => this.emit('activate', this._value));
                this.control(element);
            }

[seanshpark]

(just thinking)

In view.Context, say, to delay the loading of stream,

• if we want use streamProxy instead of stream,
• lots of codes access stream properties, like position, length
• that may not be ready until it is loaded

[seanshpark]

    async fetch(file) {
        const stream = await this._context.request(file, null, this._base);
        return new view.Context(this, file, stream, new Map());
    }

this._context is host.ElectronHost.Context

• calling request will forward to host.ElectronHost.request()
• which returns new Promois
• with

                    fs.readFile(pathname, encoding, (err, data) => {
                        if (err) {
                            reject(err);
                        } else {
                            resolve(encoding ? data : new base.BinaryStream(data));
                        }
                    });

or

                    resolve(new host.ElectronHost.FileStream(pathname, 0, stat.size, stat.mtimeMs));

[seanshpark]

where ElectronHost is used ?

window.addEventListener('load', () => {
    const value = new host.ElectronHost();
    window.__view__ = new view.View(value);
    window.__view__.start();
});

---

host.ElectronHost

    async _open(location) {
        ...
        if (path && this._view.accept(path, size)) {
            this._view.show('welcome spinner');
            let context = null;
            try {
                context = await this._context(path);

[seanshpark]

calls

host.ElectronHost _open [object Object] path/file.onnx
view.View accept path/file.onnx
host.ElectronHost _context path/file.onnx
host.ElectronHost request file.onnx null path
host.ElectronHost _context file path/file.onnx
view.ModelFactoryService _openContext: [object Object] _context,_tags,_content,_stream,_base,_identifier
view.Context fetch2 1: [object Object] undefined

-> view.ModelFactoryService _openContext looks like view.Context

[seanshpark]

Promise object doesn't have any properties that we can check with hasOwnProperty()

[seanshpark]

Doing...

• find middle of
  • this.locations.set(keys[i], streams[i]);
  • view.ValueView.ctor

[seanshpark]

host.ElectronHost.request() itself is still running after graph has shown. and

resolve(encoding ? data : new base.BinaryStream(data));

is executed.