performance problems on 1000 elements

[canbax]

I'm trying to load nearly 500 nodes and 500 edges. I have rich and heavy styles. And hardware specs of the machine I'm testing on is not really good.

Just adding elements with add the function of Cytoscape.js is taking nearly 8-9 seconds. The browser freezes.

When I enable this extension I observed it takes nearly 8-10 seconds to execute this line which is simply png function.

I suspect that Cytoscape.js is busy and somehow it takes too much time. So tried to disable rendering. And I call rendering manually after I was sure that the browser is responsive.

setTimeout(() => {
  nav._onRenderHandler();
}, 30000);

Now png function takes 1-2 seconds. This is a lot better.

I see that render event fired too early and multiple times. Maybe I fire the event unnecessarily.

The browser is not responding well during loading elements and rendering. So how can I improve the performance?

[maxkfranz]

I wouldn’t be surprised if this extension could be optimised more than it is, but getting thumbnails of a changing graph can be expensive generally. We haven’t used this extension in any of our apps for a long time. This extension is a bit old-fashioned, like the pan-zoom extension. I don’t think it’s all that useful in a lot of apps, especially considering the performance trade-offs.

It looks like you’ve started some promising research on performance of this extension. If you find any approaches that could be used to improve performance of this extension, you’re welcome to create a pull request.

On Apr 9, 2020, at 8:30 AM, yusuf [email protected] wrote:

I'm trying to load nearly 500 nodes and 500 edges. I have rich and heavy styles. And hardware specs of the machine I'm testing on is not really good.

Just adding elements with add the function of Cytoscape.js https://js.cytoscape.org/#cy.add is taking nearly 8-9 seconds. The browser freezes.

When I enable this extension I observed it takes nearly 8-10 seconds to execute this line https://github.com/cytoscape/cytoscape.js-navigator/blob/6cd2bbe488992eb6701beb4b66ad7d9d62a2ba27/cytoscape-navigator.js#L872 which is simply png function https://js.cytoscape.org/#cy.png.

I suspect that Cytoscape.js is busy and somehow it takes too much time. So tried to disable rendering. And I call rendering manually after I was sure that the browser is responsive.

setTimeout(() => { nav._onRenderHandler(); }, 30000); Now png function https://js.cytoscape.org/#cy.png takes 1-2 seconds. This is a lot better.

I see that render event https://js.cytoscape.org/#events/graph-events fired too early and multiple times. Maybe I fire the event unnecessarily.

The browser is not responding well during loading elements and rendering. So how can I improve the performance?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cytoscape/cytoscape.js-navigator/issues/46, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHRO44OB4IQCNRKJ53SG3DRLW5VDANCNFSM4MEWEL3Q.

[canbax]

Thank you Max. We disabled the extension to increase performance ;)

Is it reasonable to use batch inside the extension for better performance? I might try it. Do you have any other suggestions?

[maxkfranz]

I don’t know offhand whether it would make a difference in this case. Maybe there are some ways of making minor improvements to the performance of this extension, but I suspect it will always be relatively expensive.

On Apr 21, 2020, at 1:14 AM, yusuf [email protected] wrote:

Thank you Max. We disabled the extension to increase performance ;)

Is it reasonable to use batch https://js.cytoscape.org/#cy.batch inside the extension for better performance? I might try it. Do you have any other suggestions?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/cytoscape/cytoscape.js-navigator/issues/46#issuecomment-616956469, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHRO4ZGESLP7BQ4PXVITXLRNUTSVANCNFSM4MEWEL3Q.