Increasing Performance for Large Graphs

[bitGatito]

Visualizing large graphs on Reagraph still leads to performance issues. It noticeably lags when you drag the scene around: example. Any idea on how to improve performance?

[kitswas]

Experiencing the same here.
https://citestat.vercel.app/doi/10.48550%2FarXiv.1706.03762
Corresponding code is at https://github.com/iiith-cs24-sp/citestat/blob/56e9eaa08fdc7b3ab79d137b7112f9ed868b5f42/client/src/components/NetworkGraph.tsx

Reagraph Devs, please consider using web workers as suggested by Web.dev.

As you can see from this profile, Reagraph does all of its work on the main (UI) thread, sometimes blocking it for over 2 seconds.

[amcdnl]

Happy to accept a PR for this. The edges are super expensive to render so I'm not suprised thats the problem child here.

[kitswas]

Another option could be to use OffscreenCanvas for rendering.

[kitswas]

@amcdnl
I cloned the repo and looked at the code.

Here's the plan:

1. Improvements: Functions that iterate over all nodes or edges should utilize Workers.
   Note that this won't decrease the time required to execute those functions, but the time will be consumed on a different thread, leaving the main thread free to do more important tasks like painting (and keep the UI responsive, no 'freeze'). (Total benefit unknown, needs comparision)
2. API Changes: Functions in the Reagraph Library that use Workers will be async and return Promises. (Possible Breaking Change)
3. Limitations: Not all functions can be moved. DOM manipulation, for example, is not available in Workers.
4. Comlink will be brought in to reduce complexity.

This migration would be best handled by someone very familiar with the codebase.
I am no expert in Web development, so please point out flaws in the plan and possible alternatives.

[amcdnl]

The easiest place to start implementing this would be in the layout. The harder place to implement this is going to be in the edge logic which is quite complicated and branches based on number of your edges for performance reasons.