How to generate the wasm for an alternate graphviz version?

[wagle]

Several months ago I came up with a small patch to graphviz to get it to "play well" with Obsidian.md. I would like to now generate a wasm "binary" for a version of graphviz with that patch. How do I do that?

The main issue is that graphviz generates svg1, and obsidian expects (pieces of?) svg2. My patch changes two things in the svg output that lets obsidian's css adjust things.

Later: I wasn't finding the webpages I found previously, but I think I've found them again. The key thing is to support the d3 animation stuff, so I'm thinking that it would be easiest to patch and use whatever graphviz source was used back then, assuming that it was changed to work with emscripten (it now appears?). Is that source still available somewhere?

[GordonSmith]

Sounds interesting - If you share which file(s) you want to patch I should be able to point you in the correct direction...

[wagle]

Here's my patch from April 13, 2022. It is not svg1, its a kludge:

diff --git a/plugin/core/gvrender_core_svg.c b/plugin/core/gvrender_core_svg.c
index 85e748b7e..4ab2bc368 100644
--- a/plugin/core/gvrender_core_svg.c
+++ b/plugin/core/gvrender_core_svg.c
@@ -342,8 +342,14 @@ svg_begin_anchor(GVJ_t * job, char *href, char *tooltip, char *target,
     GVPUTS(job, ">"
 
                 "<a");
+    char *str;
+    if ((str = agget(job->obj->u.n, "class")) && str[0]) {
+      GVPUTS(job, " class=\"");
+      gvputs_xml(job, str);
+      GVPUTS(job, "\"");
+    }
     if (href && href[0]) {
-       GVPUTS(job, " xlink:href=\"");
+       GVPUTS(job, " href=\"");
        const xml_flags_t flags = {0};
        xml_escape(href, flags, (int(*)(void*, const char*))gvputs, job);
        GVPUTS(job, "\"");

[wagle]

I hacked one line in package.json just now to do macos* the same as linux*, which made run-script-os happier, but I was suspicious that that was the path to victory. It just proved that macos wasn't handled, as you confirmed a few seconds later.

Docker is even more daunting for me. I did manage to get it doing something quite a while back. Lets see if those neurons will fire again.

[wagle]

Which docker command do I use to run "./ubuntu-dev.dockerfile"? I should be ready to go, but that script is a different case than what I did before.

[wagle]

Like, I find no compose file, but I have the feeling (vague memory) that I don't necessarily need one?

[wagle]

I need to sleep now. When I wake, I will see if building it all on macOS pretending to be linux works. Otherwise, I will see if I can get my old docker ubuntu image to work for this new case. I'm uncomfortable with the idea of building something for macOS in linux, but maybe I'll get over it?

Thanks!

[GordonSmith]

The hardest part to get it building on OSX will be the installation of emsdk (emscripten) and associated tooling (the same is true on Windows which is why I just build in Linux).

If you do have docker desktop running on your OSX, then ignore my steps above and simply:

npm run build-docker

And it will create the final dist folder on your host machine. (I just pushed a change with should help the build performance if your tweaking the cpp-install-graphviz.sh file to run your patch).

Copy your patch into the scripts folder then it will get copied into the docker image along with the scripts.

Note Since the final output (the contents of the dist folder) only contains JavaScript (with embedded wasm) you don't have worry about what OS did the actual build...

Good luck!

[wagle]

Currently trying to figure this out, but docker desktop seems to have gone off into the weeds "Analyzing Image: Copying image":

#32 exporting to image
#32 sha256:e8c613e07b0b7ff33893b694f7759a10d42e180f2b4dc349fb57dc6b71dcab00
#32 exporting layers
#32 exporting layers 13.7s done
#32 writing image sha256:6ecc6c0fa9f394b0a3bd541771d61ed01b8d17104b443c740ac930615fa3641f done
#32 naming to docker.io/library/hpcc-js-wasm-build:latest done
#32 DONE 13.7s

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them

> @hpcc-js/[email protected] build-docker-wasm
> docker run --rm -it --mount source="$(pwd)/dist",target=/usr/src/app/dist,type=bind,consistency=cached hpcc-js-wasm-build:latest

docker: Error response from daemon: invalid mount config for type "bind": bind source path does not exist: /host_mnt/Users/wagle/repos/hpcc-js-wasm/dist.
See 'docker run --help'.
ERROR: "build-docker-wasm" exited with 125.

[wagle]

Not finding "graphvizlib.wasm" or "expatlib.wasm" anywhere in the hpcc-js-wasm repo after seemingly doing the build with "npm run build-docker".

I am finding them in my old previous failed attempt at getting d3-graphviz to work in various instances of
"./node_modules/@hpcc-js/wasm/dist/graphvizlib.wasm"

[wagle]

The .wasm files are there in the docker image. What's the correct way to export/install them to the host system?

usr/src/app/build/cpp/base91/base91lib.wasm
usr/src/app/build/cpp/expat/expatlib/expatlib.wasm
usr/src/app/build/cpp/graphviz/graphvizlib/graphvizlib.wasm
usr/src/app/build/cpp/zstd/zstdlib.wasm

[GordonSmith]

As part of the build process the wasm files are now:

1. Compressed using Zstd
2. Base91 encoded
3. Embedded inside the JS (with JS code to extract and load them)

[wagle]

Ah, that explains the mysterious .wasm.js files!

Is there standard practice for making the result available to other project on my own system?

I just finished a video describing how to publish to the public npm repo. Is that overkill or the Right Way To Do It?

[GordonSmith]

It doesn't sound like a npm publish would worth the pain. You could add your fork of this repo as a git submodule in your other project - or just copy the built js files into your other project with some comments on where it came from.
(No definitive answer I am afraid...)