How to add Multi Dropdown

Hi Everyone,

I have a problem of adding multi dropdown in dash.

# build dash layout
app.layout = html.Div([
        # section title
        dbc.Row(dbc.Col(html.H4('Scatter Plot'),
                        width={'offset': 0, 'size': 'auto'})),

        # first row contains 2 dropdowns
        dbc.Row(
            [
                dbc.Col(dcc.Dropdown(id='1st_scatter_dropdown', placeholder='Select an activity',
                                     options=[{'label': k, 'value': k} for k in dp_1.keys()],
                                     clearable=False,
                                     multi=False,
                                     value='Mining'),
                        width={'size': 2, 'offset': 0}
                        ),
                dbc.Col(dcc.Dropdown(id='2nd_scatter_dropdown', placeholder='Select a metric',
                                     clearable=False,
                                     multi=False,
                                     ),
                        width={'size': 2, 'offset': 0}
                        )
            ]
        ),
        # second row contains 2 dropdowns
        dbc.Row(
            [
                dbc.Col(dcc.Dropdown(id='3rd_scatter_dropdown', placeholder='Select X variable',
                                     clearable=False,
                                     multi=False,
                                     ),
                        width={'size': 2, 'offset': 0}
                        ),
                dbc.Col(dcc.Dropdown(id='4th_scatter_dropdown', placeholder='Select Y variable',
                                     clearable=False,
                                     multi=False,
                                     ),
                        width={'size': 2, 'offset': 0}
                        ),
            ]
        )
])

# callback for the 2nd scatter dropdown - options
@app.callback(
    dash.dependencies.Output('2nd_scatter_dropdown', 'options'),
    [dash.dependencies.Input('1st_scatter_dropdown', 'value')])
def set_2nd_scatter_dropdown_options(selected_activity):
    return [{'label': i, 'value': i} for i in dp_1[selected_activity]]

# callback for the 2nd scatter dropdown - value
@app.callback(
    dash.dependencies.Output('2nd_scatter_dropdown', 'value'),
    [dash.dependencies.Input('2nd_scatter_dropdown', 'options')])
def set_2nd_scatter_dropdown_value(available_activity):
    return available_activity[0]['value']

# callback for the third scatter dropdown - options
@app.callback(
    dash.dependencies.Output('3rd_scatter_dropdown', 'options'),
    [dash.dependencies.Input('1st_scatter_dropdown', 'value'),
     dash.dependencies.Input('2nd_scatter_dropdown', 'value')])
def set_3rd_scatter_dropdown_options(selected_activity, selected_metric):
    return [{'label': i, 'value': i} for i in dp_1[selected_activity][selected_metric]]

# callback for the third scatter dropdown - value
@app.callback(
    dash.dependencies.Output('3rd_scatter_dropdown', 'value'),
    [dash.dependencies.Input('3rd_scatter_dropdown', 'options')])
def set_3rd_scatter_dropdown_value(available_metric):
    return available_metric[0]['value']

# callback for the fourth scatter dropdown - options
@app.callback(
    dash.dependencies.Output('4th_scatter_dropdown', 'options'),
    [dash.dependencies.Input('1st_scatter_dropdown', 'value'),
     dash.dependencies.Input('2nd_scatter_dropdown', 'value'),
     dash.dependencies.Input('3rd_scatter_dropdown', 'value')])
def set_4th_scatter_dropdown_options(selected_activity, selected_metric, selected_x):
    return [{'label': i, 'value': i} for i in dp_1[selected_activity][selected_metric][selected_x]]

# callback for the fourth scatter dropdown - value
@app.callback(
    dash.dependencies.Output('4th_scatter_dropdown', 'value'),
    [dash.dependencies.Input('4th_scatter_dropdown', 'options')])
def set_4th_scatter_dropdown_value(available_x):
    return available_x[0]['value']

The dp_1 is basically a nested dictionary in the form of:

{activity 1:
       {metric1: {x1: [y1, y2], x2: [y2, y3]},
       {metric2: {x3: [y1, y4], x2: [y5, y6]},
 activity 2:
       ...
       ...
}

When I execute the code, firstly it runs without problem, but when I change selection in the first dropdown, the dropdown still works but it reports a callback error updating 4th_scatter_dropdown.options.

It says KeyError: dp_1[selected_activity][selected_metric][selected_x] --> where the selected_x is not available

Thanks in advance.

1 post - 1 participant

Read full topic