Tabs break Multipage?

Dash Python
1

Hi,
I have a multi-page application where one of the multi-pages contains tabs. All pages and tabs contain buttons and callbacks.

As I understand the flow the layouts have to be registered first to ensure that the Input id is available in the layout when the callback Input object is registered. In practice with tabs the layout is dynamic so at the time when the callbacks are registered the layout does not contain the appropriate id. So I get errors like

A nonexistent object was used in an `Input` of a Dash callback. The id of this object is `btn_2` and the property is `n_clicks`. The string ids in the current layout are: [url_top, top_page_store, tab1_store, tab2_store, navigation, top_store_display, _pages_location, _pages_content, _pages_store, _pages_dummy]

With tabs I make all the layouts available when the tab page layout is called:

    return html.Div([
        dcc.Tabs(id="ood-select-tabs", value='ood-tab-1',
                 children=[dcc.Tab(label="tab-{}".format(graph.gid),
                                   value="ood-tab-{}".format(graph.gid),
                                   children=[graph.layout]) for graph in graphs]),
    ])

However there does not seem to be a similar mechanism for multi-page:

def layout():
    return html.Div([
        ....
        dash.page_container,
	])

The only solution seems to be to not use Tabs with multiple pages. The demo’s GitHub - AnnMarieW/dash-multi-page-app-demos: Minimal examples of multi-page apps using the pages feature in dash>=2.5.1 do not have an example of this combination. @AnnMarieW It would be great if a suitable demo could be created to show how to implement Tabs with multiple pages!

2

Hi @peteasa welcome to the forums.

I am not sure, but did you check, if the use of suppress_callback_exceptions=True helps in this case?

I used this in the past when creating components dynamically.

Usage:
app = dash.Dash(__name__, suppress_callback_exceptions=True)

3

Hi

good thought… tried that and it did not seem to help. What is interesting is that the application all works and all the callbacks work. The error just seems to appear whilst the page is being loaded. I guess because by the time the call back is being used the appropriate layout and the id’s are all present, the multi-page, multi tab application works.

4

Inspired by @AIMPED I found the fix for this at - Advanced Callbacks | Dash for Python Documentation | Plotly - prevent_initial_call

@app.callback(Output("D{}_store".format(self.gid), 'data'), [
            Input("D{}_store".format(self.gid), 'data'), Input("btn_{}".format(self.gid), 'n_clicks')], 
            prevent_initial_call=True)

This removes the page load error but allows the app to work as normal.

3 Likes
6

Cant see how to edit post… changed location of example… so here we go…

Taking it to the next level I created my own multiple tab, multiple page synchronized example (@AnnMarieW).

In doing so I found quite a bit of dash / flask / plotly that could be put into a helper library. Anyone interested in helping with this project? :smile: