Poor performance when 50 nodes get rendered on the graph

[yinfeiru]

Hi there,

Thanks for writing this library. It saved me a lot of time!

I added this lib to our code recently and I'm seeing really poor performance when I have more than 50 nodes on the graph. After some profiling, I found out that the browser spent tons of time on doing https://github.com/kaluginserg/cytoscape-node-html-label/blob/master/src/cytoscape-node-html-label.ts#L311 . I'm wondering if we can do things like debounce to bump the performance up.

I know do you probably did it on purpose. But can you explain why you put a setTimeout here?

[bebeun]

Thank U again for this wonderful library which is very helpful !

Nevertheless, I have the same problem. Graph with about 100 nodes gets very slow.

Any idea ?

[josejulio]

I added this lib to our code recently and I'm seeing really poor performance when I have more than 50 nodes on the graph. After some profiling, I found out that the browser spent tons of time on doing https://github.com/kaluginserg/cytoscape-node-html-label/blob/master/src/cytoscape-node-html-label.ts#L311 . I'm wondering if we can do things like debounce to bump the performance up.

Maybe or set some kind of cache to avoid recomputing it all the time?

[josejulio]

That function gets called for the element every time there is a style or data update on the element. Do you make such changes by code? If so maybe you could use the batching function to https://js.cytoscape.org/#cy.batch

But yes, maybe a debounce function could help there, PRs are welcome.

[gamespark]

Yes, According to the source code in this lib: '_cy.on("style", updateDataOrStyleCyHandler);', 'style' event caused this issue, it always refresh html nodes by this event, if too many nodes, there will be performance issue.
I also tried to listen 'style' event before this lib register, and call event.preventDefault() to stop this event, but not work, event still flow to the listener of this lib.
But I find event.isPreventDegault() changed to false if event.preventDefault() called.
So you can fork and edit the source code to add logic to check if event.isPreventDegault() === true, then just return from func 'updateDataOrStyleCyHandler'
Or add a new parameter like 'notListenStyleEvent' to do this.