Performance with initializing multiple plot components at once

[dsa821]

Hello,

I am trying to display multiple bar charts on the same page at the same time (at least 50, potentially up to 100 or so). I've noticed that the initialization time of an individual plot seems to be affected by how many total plots there are.

For example, 1 chart might take around 30 ms (based on when the (initialized) callback fires). 10 charts starts causing them to take around 250 ms. 50 charts is closer to 1500 ms. Obviously having more charts will be slower overall, but I wasn't expecting all individual (initialized) callbacks to take longer, and then fire all at once.

Stackblitz here - initialization times are being logged to the console.

[dsa821]

On further investigation, it seems like this behavior occurs when using the base plotly.js library without the angular-plotly wrapper.

[leeoniya]

also https://bugs.chromium.org/p/chromium/issues/detail?id=771792

[dsa821]

I'd actually like to reopen this to see if something can be done on the angular-plotly side. By calling Plotly.newPlot inside a setTimeout function, it at least allows the UI to start rendering plots individually, instead of being blocked until they all initialize.

I've updated the previous Stackblitz to demonstrate.

[andrefarzat]

hello @dsa821 I started experimenting with your code directly in the angular-plotly.js code. Please check the performance branch. I am replicating your experiment, but no luck so far. Check this print:

Even though I added the setTimeout, I could not see the same performance gain you've in your example.

May I ask your help in this task? 😸

[dsa821]

Hi @andrefarzat, I think what you're seeing is just a difference in how we are measuring the start times in the experiment. If you move the ngInited event inside the setTimeout:

setTimeout(async () => {
    this.ngInited.emit();
    await this.createPlot();
    const figure = this.createFigure();
    this.initialized.emit(figure);
});

Then you'll see similar results.

You can also compare without the setTimeout:

this.ngInited.emit();
this.createPlot().then(() => {
    const figure = this.createFigure();
    this.initialized.emit(figure);
});

Note that this trick doesn't actually improve the overall page load time, it just allows individual plots to start rendering on the page faster. Total time that you are measuring still stays about the same.

If you start on the demo home page and try navigating to the performance page with and without the setTimeout, you'll see a noticeable difference in how fast the performance page comes up.

[KanupriyaGoel]

Hi,

I am facing the same issue. I am rendering almost 15 charts on the page. The data is over a million records. I see that data handling is not taking much time and individual charts load in 3-4 seconds but combined all of these take over 250-300 seconds.

I tried timeout as suggested, the first chart visible on screen loads fast but the screen is unresponsive so I cannot scroll.

I have also tried below

1. Converting promises to observables, and trying to subscribe - didn't help
2. using async and await - didnt help
   Can you please help, it is very important for my project delivery.

Thanks.

[andrefarzat]

@KanupriyaGoel I dunno if scrolling triggers the angular change detection, but checking 1 mi records every moment is very timing consuming.
Do you mind trying using the prop updateOnlyWithRevision? This will make the plots not to update, then we can see if is the change detection the villain here