[Tidy] Update Graph theme using clientside_callback

[petar-qb]

Description

The PR addresses two issues:

• #995 -> "Investigate whether we need to configure overlay_style differently or have to remove it",
• #74 -> "Rewrite the 'update_graph_theme' callback into client-side callback"

After a little investigation into the overlay style issue, I found that removing it would be a quick and easy fix for the unlovely grey background in the graphs that appears when the theme is changed. However, there is a better solution which idea comes from one old ticket #74 (that also is planned to be addressed in the actions v2 (Unstaged phase) process).

Here are some of the benefits that this PR brings:

• There is no more unlovely grey background in the graphs when the theme is changed.
• The way how the "theme changing system" works for graphs is aligned with the way how it already works for AgGrid and Dashboard (clientside_callback).
• Changing theme process is faster when the app is deployed.
• There are three http requests to the server when a new page is opened (main branch). With these changes there will be only two (which is the ideal case I was always trying to achieve):
  1. Dash pages request and
  2. on_page_load request.

Screenshot

Download videos and see visual difference:

from the main branch: https://github.com/mckinsey/vizro/assets/108530920/fd0905a7-80e5-4a76-bf78-d1fb11632a9c

from the tidy/update_graph_theme_clientside branch: https://github.com/mckinsey/vizro/assets/108530920/6baec66f-b1d7-4d72-af20-bc341c7ab502

Notice

• [x] I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[maxschulz-COL]

I started reviewing, but for me the theme switch does not work at all now for figures, see below screenshot:

[huong-li-nguyen]

I started reviewing, but for me the theme switch does not work at all now for figures, see below screenshot:

For me that worked - your hatch environment eventually still has to update to the latest dash version! I just got a bunch of id errors but the theme switch worked 😄

[maxschulz-COL]

One other question out of interest: I think previously we could change the graph theme mid animation (e.g. on the animated gapminder tutorial). That should still be possible right, because we are just changing the layout, not the entire object?

[petar-qb]

One other question out of interest: I think previously we could change the graph theme mid animation (e.g. on the animated gapminder tutorial). That should still be possible right, because we are just changing the layout, not the entire object?

You're right. The following JS code (that's added in this PR) enables exactly this Plotly.relayout(plotly_graph, { template: theme_to_apply });.