Updating Plot Sizes and Colors Best Practice

[burtonr]

Hello all! I'm working on a site which has a "dashboard" of 8 different charts. The site has a global theme of colors that can be changed (light/dark). There is also an expanding navigation menu on the side of the page.

What I need: When the theme colors change (on light/dark button pressed), only the colors of the chart(s) get updated. Also, when the nav menu is expanded, or collapsed, the chart size should adjust to fit the area.

The trouble I'm having: When the charts load, there is a noticeable pause for a moment (< 30 seconds). Even a loading indicator stops its infinite spin while the charts load. In addition, if the page is loaded while the nav menu is expanded, when the nav menu is collapsed, the charts do not change size.

I've separated the code to have separate methods for each "piece" of the chart. CreateLayout(), UpdateColors(), and UpdateChartData(). The idea being, CreateLayout() is called on initialize, UpdateColors() is called on parameters set to read the cascading theme parameter color values, and finally, the UpdateChartData() is called in response to an background event once the data is returned from the API.

CreateLayout() does what it sounds like and sets the value of the property to a new Layout object where the property is 2-way bound to the PlotlyChart component. Just before the return, this calls chart.React()

UpdateColors() uses the @ref chart object to find the plot in order to update to the theme color set for that specific line. Just before the return, this calls chart.React()

UpdateChartData() uses the 2-way bound Data reference to data.Clear(), then data.Add(new Scatter()) with the appropriate settings and values. I've tried a few different options for the end of this method. Call the UpdateLayout, and call React() directly. Either way, the page gets "stuck" while the chart.React() executes.

Is there a different way, or process, or function, that I can use to do selective updates that would not hinder the page performance? I've also added calls to StateHasChanged() to help with the sizing changes, but that does not appear to have any effect.

I think I just need something to call for Plotly to adjust it's rendered colors or size without needing to re-calculate the whole chart since the data hasn't changed. The Plotly documentation mentions "This function has comparable performance to Plotly.react and is faster than redrawing the whole plot with Plotly.newPlot" which doesn't explain much, or offer any clue of which is best suited for which situation.