Hi,
I am easily able to render 10k nodes including edges using GoJS (great performance!) when visualizing only a small part of my diagram (this is fine). However, when I enable the overview, my browser gets very slow. Is there a more efficient overview renderer available? If not, how can I make the overview more efficient? Could we render a png image as background instead of drawing everything on the canvas? Could you provide some pointers?
Thanks in advance!
The problem with the concept of an “overview” is that it assumes that all of the Nodes and Links are available to be rendered. If your whole diagram (not the small area with 10K parts) has (maybe?) 100K parts, then all of those need to be created and laid out before the “overview” can be rendered.
Another way to look at is that with virtualization, app start-up time can be reasonable if you only need to show a very small fraction. But as soon as an “overview” is present, you have no choice but to make sure all of the parts are actually existing. Are you in fact using virtualization?
So the GoJS Overview is in fact drawing the “image” that you talk about. And the only way to create such an image is by using a canvas. Drawing the canvas image on the screen is very fast, of course.
10K nodes/links in the whole diagram with ~100 nodes/links visible in the view viewport. I understand that rendering all the 10k nodes/links in the viewport takes longer and makes things slow (I also experience this when zooming out and show all nodes in my diagram div).
No I am not using virtualization at the moment since it seems quite fluent still if create 50k nodes in my diagram (except from the loading that takes a bit longer). Is the main benefit of virtualization the initial load time? I cannot really see that much performance difference when everything is loaded, is this true? If this is the case, I would rather not introduce virtualization because a longer loading time for me is acceptable and it does not complex things.
Now I can get to my point, is it possible to only once create the image? Or once in a specific time interval? Or even in the back-end? And use this image for the overview div? I am only looking for the overview functionality and let the user move the pink box for navigation, I care less about the overview image being exactly up to date with the diagram.
Thanks for your quick responses, it helps a lot!
Yes, virtualization helps with startup time and with memory usage (mobile browsers).
Ah, if you are willing not to have the Overview be quite so up-to-date, that would be an interesting feature to add. We can look into that.
Yes please
I think we can add in version 2.1.7 an undocumented property, Overview.updateDelay, that will control how many milliseconds it will wait to draw itself when the Overview.observed Diagram needs to be redrawn. I’m not sure when that will come out – probably within a couple weeks.
That’s great, thanks!
2.1.7 is available – try using that new undocumented property. In my testing I tried values of 2000 and 5000.
Works perfectly, thanks! Now I am able to visualize the overview with 50k nodes.
Great! What value for updateDelay are you using?
5000 at the moment