Pattern matching callbacks using Match to return another dropdown list ( Chained Callback)

Dash Python
1

Hi, I am trying to do the following.

I have two list, I want “list_one” to show first, and when “list_one” is called, I want “list_two” to show. The problem I am having is that I can not get the second list to show.

Eventually, I want to make it such that, depending on your choice in “list_one”, different list options will appear

dash                      1.21.0    
dash-core-components      1.14.1    
dash-html-components      1.1.4

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

list_one = ['NYC', 'MTL', 'LA', 'TOKYO']
list_two = ['food', 'sight-seeing', 'hiking', 'dancing']

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

app.layout = html.Div([
    html.Button("Add Filter", id="dynamic-add-filter", n_clicks=0),
    html.Div(id='dynamic-dropdown-container', children=[]),
    html.Div(id ='dynamic-dropdown-container-filter',children=[])
])

@app.callback(
    Output('dynamic-dropdown-container', 'children'),
    Input('dynamic-add-filter', 'n_clicks'),
    State('dynamic-dropdown-container', 'children'))
def display_dropdowns(n_clicks, children):
    new_element = html.Div([
        dcc.Dropdown(
            id={
                'type': 'dynamic-dropdown',
                'index': n_clicks
            },
            options=[{'label': i, 'value': i} for i in list_one] # my traces
        ),

    ])
    children.append(new_element)
    return children


@app.callback(
    Output({'type': 'dynamic-dropdown-filter', 'index': MATCH}, 'children'),
    Input({'type': 'dynamic-dropdown', 'index': MATCH}, 'value'),
    State({'type': 'dynamic-dropdown', 'index': MATCH}, 'id'),
)
def display_output(value, id):
    children = []
    new_element = html.Div([
        dcc.Dropdown(
           id='id['index]',
           options=[{'label': i, 'value': i} for i in list_2] # my traces

        )])

    children.append(new_element)
    return children


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



Thank you in advance
2

What I want to do is called a Chained Callback. This youtube video explains it well, I had trouble finding Dash documentation on it.

3

My Code

import dash  # Dash 1.16 or higher
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import pandas as pd
import plotly.express as px
# need to pip install statsmodels for trendline='ols' in scatter plot

app = dash.Dash(__name__)

# Data from U.S. Congress, Joint Economic Committee, Social Capital Project. https://www.jec.senate.gov/public/index.cfm/republicans/2018/4/the-geography-of-social-capital-in-america
df = pd.read_csv("https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Callbacks/chained_callback/social-capital-project.csv")

app.layout = html.Div([
    html.Label("Filter-Options:", style={'fontSize':30, 'textAlign':'center'}),
    html.Button("Add Filter", id="dynamic-add-filter", n_clicks=0),
    html.Div(id='dynamic-dropdown-container', children=[]),

])

@app.callback(
    Output('dynamic-dropdown-container', 'children'),
    Input('dynamic-add-filter', 'n_clicks'),
    State('dynamic-dropdown-container', 'children'))
def display_dropdowns(n_clicks, children):
    new_element = html.Div([
        html.Label("New Filter:", style={'fontSize': 30, 'textAlign': 'center'}),
        dcc.Dropdown(
            id='filter',
            options=[{'label': s, 'value': s} for s in sorted(df.State.unique())],
            value=None,
            clearable=False
        ),
        html.Label("Unique Values:", style={'fontSize': 30, 'textAlign': 'center'}),
        dcc.Dropdown(id='filter-options',
                     options=[],
                     value=[],
                     multi=True),
        html.Div(id='graph-container', children=[])
    ])
    children.append(new_element)
    return children





# Populate the counties dropdown with options and values
@app.callback(
    Output('filter-options', 'options'),
   # Output('counties-dpdn', 'value'),
    Input('filter', 'value'),
)
def set_cities_options(chosen_state):
    dff = df[df.State==chosen_state]
    counties_of_states = [{'label': c, 'value': c} for c in sorted(dff.County.unique())]
    values_selected = [x['value'] for x in counties_of_states]

    return counties_of_states




if __name__ == '__main__':
    app.run_server(debug=True, port=8000)
4

Hey @Namdar
don’t forget
app = dash.Dash(__name__, suppress_callback_exceptions=True)

1 Like