在多选项卡破折号应用程序中为组件分配回调的问题

Question

I'm building a multi-tab web application with Dash (a python web platform from plotly). following instruction from https://dash.plot.ly/dash-core-components/tabs I render tab content as callback, which is preferred method from this instruction.

Now in one of the tab, I need to create two dropdowns, the second dropdown is dependent on the first dropdown. I need to use another callback function to dynamically update one dropdown in response to the other.

My code is below:

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

myList = ['A', 'B']
myDict = {'A': [1,2,3],'B': [4,5,6] }

app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    dcc.Tabs(id="tabs-example", value='tab-1-example', children=[
        dcc.Tab(label='Tab One', value='tab-1-example'),
        dcc.Tab(label='Tab Two', value='tab-2-example'),
    ]),
    html.Div(id='tabs-content-example')
])


@app.callback(Output('tabs-content-example', 'children'),
              [Input('tabs-example', 'value')])
def render_content(tab):
    if tab == 'tab-1-example':
        return html.Div([
            html.H3('Tab content 1'),
            dcc.Dropdown( id='first-dropdown',
                          options=[{'label':l, 'value':l} for l in myList],
                          value = 'A'
                          ),
            dcc.Dropdown(id='second-dropdown',multi=True),  
        ])
    elif tab == 'tab-2-example':
        return html.Div([html.H3('Tab content 2')])

@app.callback(
    dash.dependencies.Output('first-dropdown', 'options'),
    [dash.dependencies.Input('second-dropdown', 'value')])
def update_dropdown(value):
    return [ {'label': i, 'value': i} for i in myDict[value] ]

if __name__ == '__main__':
    app.run_server(debug=True)

I got error message:

dash.exceptions.NonExistentIdException:
                            Attempting to assign a callback to the
                            component with the id "first-dropdown" but no
                            components with id "first-dropdown" exist in the
                            app's layout.

I think it's because my tabs are generated from callback, my second callback cannot find the component in the tab.

Does anyone know how I can achieve that? Thank you very much!

Answer 1

If I understand correctly you just want to dynamically change the options in the second dropdown based on selection in the first dropdown. You can realize it with the following code (Dash v1.6.0):

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

myList = ['A', 'B']
myDict = {'A': [1,2,3],'B': [4,5,6] }
default_category = 'A'
default_index = 0

tab1 = html.Div([
    html.H3('Tab content 1'),
    dcc.Dropdown(id='first-dropdown',
                 options=[{'label':l, 'value':l} for l in myList],
                 value = default_category
    ),
    dcc.Dropdown(id='second-dropdown',
                 options=[{'label':l, 'value':l} for l in myDict[default_category]],
                 value = myDict[default_category][default_index]
    )
])

tab2 = html.Div([
    html.H3('Tab content 2'),
])    

app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    dcc.Tabs(id="tabs-example", value='tab-1-example', children=[
        dcc.Tab(id="tab-1", label='Tab One', value='tab-1-example'),
        dcc.Tab(id="tab-2", label='Tab Two', value='tab-2-example'),
    ]),
    html.Div(id='tabs-content-example',
             children = tab1)
])

@app.callback(dash.dependencies.Output('tabs-content-example', 'children'),
             [dash.dependencies.Input('tabs-example', 'value')])
def render_content(tab):
    if tab == 'tab-1-example':
        return tab1
    elif tab == 'tab-2-example':
        return tab2

@app.callback(
    [dash.dependencies.Output('second-dropdown', 'options'),
     dash.dependencies.Output('second-dropdown', 'value')],
    [dash.dependencies.Input('first-dropdown', 'value')])
def update_dropdown(value):
    return [[ {'label': i, 'value': i} for i in myDict[value] ], myDict[value][default_index]]

if __name__ == '__main__':
    app.run_server(debug=True)