Callback output for tabs error

Dash Python
1

Hi,

I’m using a callback to return a DIV to dash tab and it generates the following error:

dash._grouping.SchemaTypeValidationError: Schema: [<Output `tabs_mpm_content.children`>, <Output `tabs_mpm.value`>]
Path: ()
Expected type: (<class 'tuple'>, <class 'list'>)
Received value of type <class 'dash.html.Div.Div'>:
    Div(Graph(id='graph-with-slider'))

My code is:
app.layout = html.Div([
[..........]
    dcc.Tabs(id="tabs_mpm", value='graph-with-slider', style={'width': '80%'}, children=[
        dcc.Tab(label='Casos Novos', value='graph-with-slider'),
        dcc.Tab(label='Baixados', value='graph-baixas'),
        dcc.Tab(label='Pendentes', value='graph-pendentes'),
        dcc.Tab(label='TC', value='graph-tc'),
        dcc.Tab(label='IAD', value='graph-iad'),
        dcc.Tab(label='Sentenças', value='graph-sent'),
        dcc.Tab(label='Decisões', value='graph-dec'),
        dcc.Tab(label='Audiências', value='graph-aud')
    ]),
    html.Div(id='tabs_mpm_content', children=[
        dcc.Graph(id='graph-selecionado')],
        style={'width': '80%', 'display': 'inline-block', 'vertical-align': 'middle'}
    )

Show graph based on tab selection function:

@app.callback(Output('tabs_mpm_content', 'children'),
              Output('tabs_mpm', 'value'),
              Input('tabs_mpm', 'value'))

def render_content(tab):
    if tab == 'graph-with-slider':
        return html.Div(
            dcc.Graph(id='graph-with-slider') 
        )
    elif tab == 'graph-baixas':
        return html.Div(
            dcc.Graph(id='graph-baixas')
        )
    elif tab == 'graph-pendentes':
        return html.Div(
            dcc.Graph(id='graph-pendentes')
        )
    elif tab == 'graph-tc':
        return html.Div(
            dcc.Graph(id='graph-tc')
        )
    elif tab == 'graph-iad':
        return html.Div(
            dcc.Graph(id='graph-iad')
        )
    elif tab == 'graph-sent':
        return html.Div(
            dcc.Graph(id='graph-sent')
        )
    elif tab == 'graph-dec':
        return html.Div(
            dcc.Graph(id='graph-dec')
        )
    elif tab == 'graph-aud':
        return html.Div(
            dcc.Graph(id='graph-aud')
        )

I know the error message is about returning DIV instead of a list, but how should I fix it?

2

Hi @pedromsouza

It looks like your callback has two outputs, but you are only returning one Div

Note – You can make your code more readable by enclosing it in three back-tics:

```
type or paste code here
```
1 Like
3

Thanks for reply. Removing one of the outputs made it stop working… Sorry, I’m really a beginner in dash.

Due to the error message, I thought the output format caused it:

dash._grouping.SchemaTypeValidationError: Schema: [<Output tabs_mpm_content.children>, <Output tabs_mpm.value>]
Path: ()
**Expected type: (<class ‘tuple’>, <class ‘list’>)**
**Received value of type <class ‘dash.html.Div.Div’>:**
Div(Graph(id=‘graph-with-slider’))
4

Hi @pedromsouza

I’d like to help, but it’s hard without a minimal example that reproduces the error. Learn more about how to do that here:

And please be sure to update your code in the original post so that it’s more readable :slight_smile:

1 Like
5

@pedromsouza

Did you remove this one?: Output('tabs_mpm', 'value'),
What error did you get?

It looks like your app is very similar to this one in the docs: Tabs | Dash for Python Documentation | Plotly

If you copy and paste that app and run it yourself locally, do you get an error?

1 Like
6

When I removed this output, it ran without errors, but charts inside each tab didn’t work (they are blank).

image
image1526×522 5.18 KB

I based my app on the exemple you mentioned, but the original code (Tabs Docs) work without errors.

7

It’s not displaying a figure, because you only specify the id You need to add the figure prop as well.

You can see lots of simple example apps here: