search

kaluginserg / cytoscape-node-html-label

Labels for cytoscape node. Demo:
https://kaluginserg.github.io/cytoscape-node-html-label/
MIT License
102 stars 43 forks source link

Poor performance when 50 nodes get rendered on the graph #40

Open yinfeiru opened 4 years ago

yinfeiru commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

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.