Performance improvements with large diagram

[deammer]

Hi folks,

We’re using GoJS to visualize codebases: we display collapsible groups to represent directories, nodes to represent files, and links to represent dependencies (like an import statement in JavaScript, for example.)

We’re running into performance problems when rendering diagrams with lots of content. Our biggest diagram so far contains 20k node/groups and 35k links, for example. I am hoping you can give us some insight into why it takes so long to render diagrams when most of the parts aren’t visible.

Take the diagram below, for example. When rendered for the first time, it only displays 10 nodes and 1 link because all the subgraphs are collapsed, but it can take up to 30 seconds to render.

We’ll probably have to virtualize our data eventually, but this isn’t an issue with rendering too many nodes in the same viewport, it’s an issue with rendering hidden nodes. Our code already follows most of the suggestions on this page. Are there other ways to speed up our diagrams without virtualization?

Thank you!

[walter]

Yes, virtualization is one solution. Another is progressive or incremental loading of data as needed.

For example, Incremental Tree

You don’t even have to have the whole model in memory. With a pretend server, showing how to load incremental results, Incremental Tree

[deammer]

Thank you for your quick response, @walter.

The incremental tree approach seems like a good solution, but it’ll require us to handle a lot of logic on our end. In our system, there can be links between nodes that are nested inside of groups. When those nodes are collapsed, we still want to display the links between their containing groups. Here’s an example where the tailwind.config.js file is imported by a file nested inside a few groups:

The incremental load strategy will definitely help and we’ll look into it, but it’s not optimal.

The root of the performance problem seems to be that GoJS is performing a lot of work to render nodes even though they’re actually hidden. Could you please explain why that’s the case? Why can’t GoJS skip the rendering phase for items inside a collapsed subgraph?

[simon]

GoJS does not render items that are not visible (off-screen or opacity === 0 or visible === false or collapsed)

If you think you have a good example that you want us to investigate for any perf issues, we would be happy to review it. You can send email, gojs at nwoods.com

[deammer]

Thank you, @simon, I’ll prepare an example and email your team soon.