Synchronizing data between Dash pages

Dash Python
1

Hi, I am trying to build a multipage Dash application where every page provides a different analysis of a given very large dataset. To filter this dataset, every page has its own dropdown where the user can choose which subset of the data to consider. Now, for a nice UX, I’d like the values of these dropdowns to be synchronized across different pages. I have considered creating a dropdown menu in the navigation bar, outside of the pages, but because of the nature of the individual pages this is not desirable. I’ve considered a couple of solutions, but none of them seem to do the job:

  • Store the value of the dropdowns in a dcc.Store object that is witnessed as a State in every page. However, the logic behind setting this dcc.Store object should be in a single callback (to avoid duplicate Output callbacks), and Dash does not recognize component IDs from different pages when a page is being viewed.

  • Use cyclical callbacks to synchronize the value of the dropdown menus. Suffers from the same issue as above, namely that Dash does not recognize component IDs from pages that are not currently viewed.

  • Let every page have its own dcc.Store object in the app.py that in turn sets the “global” dcc.Store object. This “global” object is now witnessed by the individual pages to set the default value of the dropdowns by having layout(dropdown_value) be a parameterized function. I guess this could be managed through the url but it seems like it introduces a lot of (unnecessary) complexity into the system, as a lot of additional dcc.Store objects are created to mock a cyclical callback.

As Dash pages are very new, the amount of examples I could find to solve these slightly more complex problems were limited. For clarity, I am looking for a way to synchronize data between dropdowns across different pages, not pass data one-way between pages as explained here: Sharing Data between Multipage App Pages - Plotly Dash - YouTube

I hope this question is somewhat relevant, and thanks in advance for any responses

2

I have the same problem as you after switching to dash pages

3

Leaving this here for anyone having the same problem: By installing the dash-extensions package you get access to the MultiplexerTransform class. By initializing your Dash app with

app = DashProxy(
    __name__,
    transforms=[MultiplexerTransform()],
    use_pages=True,
)

you can initialize a Dash application that allows for multiple callbacks to the same Output. Now create a dcc.Store object in your app.py layout and in all pages write callbacks to this id. This will allow for the desired behaviour.

2 Likes