Virtual LayeredDigraphLayout

GoJS
1

I have a huge graph that uses the LayeredDiagraphLayout. I would like it to only render the nodes that are visible. From this example I realised that I have to do it myself (which I don’t like, but that’s a different discussion).

I can’t seem to understand which methods I have to overwrite and how. I’ve also checked this topic, but I don’t understand any of it.

So, I need to improve the performance of LayeredDiagraphLayout and I think making it virtual may improve it. Where do I even start? I don’t know how LayeredDiagraphLayout works (I don’t have the source code).

2

How many nodes and links are in your “huge graph”? If it’s more than a few hundred each, then LayeredDigraphLayout will just be too slow. Virtualization helps with the initial start-up time when there would be a lot of nodes and links, but it does not make the chosen layout any faster.

3

I have 868 edges and 41 nodes.

What should I use instead of LayeredDigraphLayout then?

4

That depends on the structure of your graph. How long does it take now? Are you satisfied with the results?

Are there duplicate links, i.e., multiple links that have the same fromPort and toPort ? Perhaps those could be simplified.

5

There are no duplicates, as far as I know.

Well, I first render the graph with fewer nodes now, so it doesn’t break and then when I want to see the whole model, with all those nodes, it takes like 5-10 seconds to render, during which the browser is sort of frozen.

So, no, not very satisfied with it

6

Some day we will write a new layout that is a lot faster and still covers the same cases. But this will be a significant undertaking, so it will not happen soon. In the meantime, I suppose you could try setting LayeredDigraphLayout.packOption to various values to see if the time is faster and yet the results are reasonable.

I still don’t know what your graphs are supposed to look like, so it’s hard to guess. But I’ll start by suggesting:

    $(go.LayeredDigraphLayout,
      { packOption: go.LayeredDigraphLayout.PackMedian })

Or maybe:

    $(go.LayeredDigraphLayout,
      { packOption: go.LayeredDigraphLayout.PackMedian | go.LayeredDigraphLayout.PackStraighten })

Alternatively I suppose you could try TreeLayout, but with that many links, I’m not sure the results will look good.

7

Yeah, I already set the pack option to PackMedian and the aggresive option to AggressiveLess.

Can we do a private chat or something where I can show you my graph? I can’t show it in public.

8

You can send it to us by email, at GoJS at our domain, nwoods.com.