reactome-cytoscape-style optimisation

[EliotRagueneau]

Hi,

we would like to officially publish our reactome-cytoscape-style but before releasing it, we would like to optimise it as much as possible. One of the optimisation issues I found is that we rely extensively on SVGs for our many different node shapes, and to handle interactions with them.

This can get pretty heavy for the GPU / CPU, and I think using the canvas functionality would be much better in terms of performance. I would therefore like to create a PR to add all our complicated shapes

Specially the complex, set and cells and the genome encoded entity (maybe through indepandant corner radii on a rounded rectangle).

Having a way to inject canvas small decorations like the gene arrow would be pretty nice too, but I guess this could maybe stay an SVG embedding as they are not so numerous. The Rx pathway icons should probably stay as SVG, unless the decoration injector is really powerful !

Also, in our analsyis mode, we are introducing a gradient as a background for most of our nodes. I was thinking I could maybe extend the already existing stripe chart background to cover this, including with my new shapes. Or maybe using linear gradients with superimposed control points, depending on what is more performant.
example

Finally, we have interactive bheaviour, like highlighting in blue on top when selected, and in green bellow when hovered. This system is also currently using SVG, and while it's not so bad because usually users only interact with one element at a time, it could also be 'optimised' by being integrated within canvas.

For all those different points, I would like to have your opinion on whether I should even try to create such a PR before starting to work on it, and maybe we could talk of what should be cytoscape-scoped, extension-scoped, etc.
Of course if I really create this PR to put all those inew features in Cytoscape.js, I would make them as generic as possible so that they can be reused by other users for different shapes for instance, etc.

[d2fong]

Hi Eliot, it was nice to meet you today.

As a follow up to our discussion lets figure out how to set up a target to optimize some of the performance concerns for the new Reactome browser app. In terms of starting points, I would like to suggest a few things we could start to try:

1. Create a new branch of cytoscape to start adding shapes/things you would like added to the library
2. Point this new branch to be the source of the cytoscape.js dependency in the Reactome browser app. (I think its here?:https://github.com/reactome/PathwayBrowser/blob/main/package.json#L31 )
3. Find some candidate metrics to track and log them in the code related to cytoscape.js rendering in the app. Possibly frame rate, time to first paint for the network, etc. I will try to find other metrics that may not be obvious.

Once thats setup if you share any branches/progress you made I could look at it with you or provide any other support you might need. Just let me know.

Thanks,
Dylan

[mikekucera]

Hi Eliot. I would suggest to try the new WebGL mode, however I'm not sure it will fit your all needs. In particular it doesn't support all the edge styles that you may be using. There's some info here: https://blog.js.cytoscape.org/2025/01/13/webgl-preview

The canvas renderer will cache node bodies and labels to offscreen textures in order to avoid redrawing them on every frame. Is this not working for nodes rendered with SVG? I opened the network you linked to in Safari and opened the Graphics tab in the Web inspector and it does seem like node bodies and labels are being cached as expected:

The issue is that even with texture caching every node body is drawn to the canvas one at a time. This typically has problems scaling to large networks. The WebGL mode has the benefit of using the GPU to parallelize that as much as possible. I would suggest to try the WebGL mode just to compare 1) rendering speed and 2) how much different it looks on your networks. It might be the case that adding support for missing styles that you need to the WebGL mode might get you the best results.