Update graphviz browser renderer

[Neriderc]

The current library used to display the GraphViz DOT file in the browser has not been updated for many years, and in our version the "tooltip" option does not work. The Viz.js github repository has been archived and is no longer maintained, with the last release in 2018.

There is a forked repository here that continues to maintain it, however, the changes are significant and it has many breaking changes so it is not a case of simply updating the files.

An alternative option is d3-graphviz. This comes with it's own extras (animations while assembling the graph, built in pan and zoom), and so we should test this out as well.

Once this is updated we should use the "tooltip" option (which does not currently work) to change the hover text of the diagram tiles. Firstly the tooltips for families in combined mode which are a bit cryptic after #267, but we could consider further changes to tooltips once this feature is available.

[Neriderc]

I've tested d3-graphviz, it works, has built in panning/zooming, but has some weird display issues:

It might be resolvable but there doesn't seem to be enough benefit to making the change if it's just going to make things worse.

Next up I'll try the forked Viz.js repository.

[Neriderc]

Turns out the <table> label doesn't work with the forked Vis.js repository, for unknown reasons. It also hasn't had an updated version in over a year.

Also an issue with the d3-graphviz option is that the built in panning/zooming doesn't seem as customisable. We would lose our ability to scroll to a specific individual, as far as I can tell.

However, after no releases since 2018, the original repo has in June 2023 released a new version, then several more since then! I will move on to looking at if we can use that.

Edit: Oh, no image support yet. I'll keep an eye on it, it looks like they are working on it but want to make a change in Graphviz itself to avoid the hackyness of the current solution.

[Neriderc]

I'm very excited, images are now working in the new Viz.js. I found and reported a bug and it was fixed overnight, so now it's working great!

From a functional point of view I'm not sure what has changed, the version would have gone from two-point-something to version 9 of Graphviz.

I know that at least we should be able to add tooltips. To start, I have used this to remove tooltips, so on hover you don't see a weird string like "X23_X45_X32".

I'll merge this change in soon, and this will close this long-standing issue.

[schuco]

Using the merged code I see a problem similarly reported already in December testing d3-graphviz:

This behaviour is observed when long text is to be displayed in a box and a nickname (underscored text) is followed by normal text.
Official release works as expected:

[Neriderc]

Thanks for reporting this! I didn't notice in my testing.

I can fix this with a workaround, but I'll spend a bit more time trying to work out the root cause. It does seem to depend on font, so some fonts work OK and others don't. This makes the workaround trickier, as the fonts that work will end up with extra spacing.

I'll roll your comment into a new issue so that I can track it and make sure it gets fixed.