Performance With Dynamic Size

[djseiss]

Currently on our project we are using SigmaJs with Vue. We have multiple views for the users such as a summary and detailed mode. Depending on the view the user is currently on a change to the style occurs dynamically. We are changing the height from 500px to 700px and seeing a decrease in performance when scaling up. No extra data is being added or processing being done. Just a simple height change.

Currently our graph is intractable with nodes that can be dragged and on hover actions. The decrease in performance causes laggy movement or hitches/hangs to hover events. Not a great experience for our users.

Since we are also using bootstrap and the div the SigmaJs graph is in can flex (note: we do not set a width) we can make the graph ares even smaller. This actually seems to make the performance better.

Any insight on this would be very helpful. We are stumped.

[jacomyal]

Hi! Sorry for the delay, I still forget to check on the discussions frequently enough 😅
Basically, the more pixels there are to colorize, the more computations the GPU needs to do. So yes, performances decrease when the stage size increases, and we can't do anything about it.

That being said, in my experience, most of the time, it's not the rendering that is the most costly (because GPUs are quite efficient), it's more the CPU-side updates - like frequent graphology updates for instance.