Is there a WebAssembly version?

[fiatjaf]

I'm not aware of the specifics of viz.js, but it seems that Emscripten allows compiling to WebAssembly just by passing the -s WASM=1 flag to emcc.

Is that something doable with this library?

[nikeee]

I am also interested in this, since it should provide a better performance.

[broofa]

ping (@mdaines)?

[mdaines]

@broofa I plan to look at this in the next few days.

[mdaines]

Emscripten can produce a WebAssembly binary for Viz.js using just the -s WASM=1 flag, but this doesn't fit with the way the main Viz() function is called currently, since the binary needs to be loaded asynchronously. Perhaps the API could be changed to return a promise rather than a string.

While investigating this I built the "lite" version as WebAssembly. The total size (binary + Emscripten loading code + wrapper) appears to be just under 900 KB rather than 1.62 MB.

[broofa]

I'm fine with an async API. That's very clearly the future (and present) of JS.

That is a nice space savings. Any idea if there's a perf improvement with that as well?

[fiatjaf]

Normally there so many perf improvements between asm.js and WASM versions it's almost unbelievable.

[amilajack]

@mdaines were you able to get this working? I'm really excited for this

[mdaines]

@amilajack I was able to get it to work, but the API for Viz.js needs to change to support asynchronous loading and indicating the location of the binary. Maybe something like this:

Viz("digraph { ... }", { wasmModule: "viz-module.wasm" }).then(function(result) {
  // ...
});

I'm planning to change the Viz.js API so that it returns promises and supports web workers more directly, and this would fit with that. I'll post an issue detailing those changes soon.

[magjac]

I don't know WebAssembly so I don't know if this is useful to you, but here's how I solved asynchronous loading and indicating the location of viz.js in d3-graphviz

        var scripts = d3.selectAll('script');
        var vizScript = scripts.filter(function() {
            return d3.select(this).attr('type') == 'javascript/worker';
        });
...
            this._vizURL = vizScript.attr('src');
...
        }
    }
...
        var js = `
            onmessage = function(event) {
                if (event.data.vizURL) {
                    importScripts(event.data.vizURL);
                }
                try {
                    var svg = Viz(event.data.dot, event.data.options);
                }
...
        var blob = new Blob([js]);
        var blobURL = window.URL.createObjectURL(blob);
        this._worker = new Worker(blobURL);
...
    // force JIT compilation of Viz.js
...
        var vizURL = this._vizURL;
        var graphvizInstance = this;
...
        if (!vizURL.match(/^https?:\/\/|^\/\//i)) {
            // Local URL. Prepend with local domain to be usable in web worker
            vizURL = document.location.protocol + '//' + document.location.host + '/' + vizURL;
        }
        this._worker.postMessage({dot: "", vizURL: vizURL});
...

Details:
https://github.com/magjac/d3-graphviz/blob/master/src/graphviz.js#L26
https://github.com/magjac/d3-graphviz/blob/master/src/dot.js#L10

[mdaines]

@amilajack @magjac I've opened #113 to discuss the possible changes.

[IvanGoncharov]

@mdaines As I understand post-v2.0 API has potential to support WASM.
What are the next steps and how we could help?

[mdaines]

I was thinking it looks something like this:

• Add a target to build a WebAssembly binary.
• Implement a wrapper like ModuleWrapper or WorkerWrapper so that Viz instances can be constructed by specifying the WebAssembly binary.

[zmitry]

any updates on this ? Is there some guide how to compile this lib to web assembly ?

[iameli]

This would allow running Viz in a CloudFlare worker for free, which would be pretty neat.

[zmitry]

https://github.com/CyberhavenInc/graphviz-wasm
Here is wasm version of this lib
api is the same as this viz.js

[mdaines]

Closing because v3 uses WebAssembly.

[nikeee]

Oh wow, didn't notice that this project was un-archived. Good to hear! :)