Sharing components between pages

Dash Python
5

Hi @Emil,

a quick question about the components argument in dash.register_page(__name__, components=[my_data_table]).

What gets passed to components?

I was thinking it would be callback output ID’s i.e. if the callback looked something like this:

@callback([Output('plotting_complete_message', 'children'),
           Output('plot_1', 'figure'),
           Output('plot_2', 'figure')],
          [Input('dataframe_1', 'data')])
  
def plot_generator_1(dataframe_1):
       # Check if input does not contain data and prevent app update.
       if dataframe_1 is None:
            raise PreventUpdate

       # Check if input contains data and trigger callback.
       elif dataframe_1 is not None:
            some code that returns plot_1 and plot_2
 
            plotting_complete_message = html.H3("Complete")

            return(plotting_complete_message, plot_1, plot_2)
       else:
            return(no_update, no_update, no_update)

Would the component(s) then be passed as follows:

Page 1:
dash.register_page(__name__, components=['plotting_complete_message'])

Page 2:
dash.register_page(__name__, components=['plot_1', 'plot_2'])

In this example the outputs of the callback are split between pages.

The wider back-ground here is that I’m migrating my 1 page multi-tab Dash dasboard to a Dash multi-page with mutli-tab web-app/dashboard. I’ve got an open question on this as I’m working on various challenges:

https://community.plotly.com/t/a-nonexistent-object-was-used-in-an-output-of-a-dash-callback-correct-use-of-multi-page-app-validation/78864/6

My web-app has a Data Upload page (Dash-uploader button used to drop zipped files) that contains a layout updated dynamically with “Complete” messages as various callbacks finish. These callbacks are as above, not only outputting the “Complete” message, but also the plots which are served to a Visualisation page. In my 1 page multi-tab approach, as “Complete” messsages appear for plots in upload tab, it’s then possible to see them in the visualisation tab. Clicking between tabs whilst this process is happening doesn’t refresh tab content and so it’s just to check progress.

In the multi-page app, I would like the same functionality. However, I get a refresh of page content as callbacks are re-initiated for plotting, when I click on the Visualisation page and vice versa. Still trying to understand, where in my callback chain this happens and how it relates to pages.

Thanks for your time.

Alex