dcc.Tabs: Filling tabs with dynamic content. How to organize the callbacks?

Hey @geertjes, thanks for reaching out!

The error message that is usually thrown in this case looks like this:

dash.exceptions.NonExistantIdException:
Attempting to assign a callback to the
component with the id "graph" but no
components with id "graph" exist in the
app's layout.


Here is a list of IDs in layout:
['dropdown', 'tabs', 'tab-output']


If you are assigning callbacks to components
that are generated by other callbacks
(and therefore not in the initial layout), then
you can suppress this exception by setting
`app.config['suppress_callback_exceptions']=True`.

Following the instructions in the error message, we can remove this exception by setting

app.config['suppress_callback_exceptions'] = True

Now, why does this work?
When we assign callbacks, Dash traverses the existing app.layout to collect all of the component ids and checks that the ids that you are using the callbacks have actually been defined. So, if you make a typo, Dash will fail early and fast and tell you which ID you supplied and which ID was available:

app.layout = html.Div([
    html.Dropdown(id='my-dropdown'),
    html.Graph(id='my-graph'),
])

@app.callback(Output('my-graph-typo', 'figure'), [Input('my-dropdown', 'value')])
def update_graph(value):
    return ...
dash.exceptions.NonExistantIdException:
Attempting to assign a callback to the
component with the id "my-graph-typo" but no
components with id "my-graph-typo" exist in the
app's layout.


Here is a list of IDs in layout:
['my-graph', 'my-dropdown']


If you are assigning callbacks to components
that are generated by other callbacks
(and therefore not in the initial layout), then
you can suppress this exception by setting
`app.config['suppress_callback_exceptions']=True`.

When we generate dynamic components from callbacks (as in your case), Dash has no way of knowing which IDs you are generating. After all, the IDs could be totally dynamic! Dash assumes that you are making a typo by assigning a callback to an ID that doesn’t exist at app start but allows you to manually correct this assumption by setting app.config['suppress_callback_exceptions']=True. This forces you to acknowledge that Dash will not protect you against ID exceptions.


In your example, I notice that you are also rendering DataTable dynamically. This requires some special care, see Display tables in Dash - #40 by chriddyp for a discussion and solution.


Let me know if this makes sense! If you have any suggestions on how to make this exception easier to understand, I’m all ears :slight_smile:

4 Likes