I have a multiple dropdown in Dash that is dependent on 6 other dropdowns. The options of the dropdown update correctly, it shows all the correct values, but it does not show the default value (but when hovering on the graph it shows the correct default value, it just doesn't show in the dropdown), nor does it show the value when you click on something different. It just stays empty. This is shown here:
Dropdown options correctly displaying:
Moreover, when clicking on one of the options from the dropdown, it shows the correct variable on the graph, but it only allows one variable, even though I chose multi=True for the dropdown. I don't get why this is happening, I did something similar on other apps and it worked perfectly. I also tried removing the dynamic dropdown, but it still has the same problem, so it's not that causing it. Does anyone know what might be wrong?
Here are the relevant parts of my code:
html.Div(
className="row", children=[
html.Div(className="col-4", children=[
dcc.Dropdown(
id='est_method',
options=[{'label': i, 'value': i} for i in sorted(list(set(estimation_method)))],
value='Production'
)
]),
html.Div(className="col-4", children=[
dcc.Dropdown(
id='seasonality',
options=[{'label': i, 'value': i} for i in sorted(list(set(seasonality)))],
value='Seasonally adjusted',
)
]),
html.Div(className="col-4", children=[
dcc.Dropdown(
id='prices',
options=[{'label': i, 'value': i} for i in sorted(list(set(prices)))],
value='Real',
)
]),
]
),
html.Div(
className="row", children=[
html.Div(className="col-4", children=[
dcc.Dropdown(
id='level',
options=[{'label': i, 'value': i} for i in sorted(list(set(level)))],
value='Total'
)
]),
html.Div(className="col-4", children=[
dcc.Dropdown(
id='value_$',
options=[{'label': i, 'value': i} for i in sorted(list(set(value)))],
value='Dollars',
)
]),
html.Div(className="col-4", children=[
dcc.Dropdown(
id='frequency',
options=[{'label': i, 'value': i} for i in sorted(list(set(frequency)))],
value='Quarterly',
)
]),
]
),
###the problematic dropdown:
html.Div(
className="row", children=[
html.Div(className="col-12", children=[
dcc.Dropdown(
id='indicator_long',
options=[{'label': i, 'value': i} for i in sorted(list(set(indicator_long)))],
value='Wood and Paper Products Manufacturing, Quarterly, Seasonally adjusted, Real',
multi=True,
)
]),
]
),
#callbacks:
@app.callback(
Output('indicator_long', 'options'),
Input('est_method', 'value'),
Input('seasonality', 'value'),
Input('prices', 'value'),
Input('level', 'value'),
Input('value_$', 'value'),
Input('frequency', 'value'),
)
def dropdown_value(e, s, p, l, v, f):
e_list = [a for a, b in series_dict.items() if e in b]
s_list = [a for a, b in series_dict.items() if s in b]
p_list = [a for a, b in series_dict.items() if p in b]
l_list = [a for a, b in series_dict.items() if l in b]
v_list = [a for a, b in series_dict.items() if v in b]
f_list = [a for a, b in series_dict.items() if f in b]
common_keys = list(set.intersection(*map(set, [e_list, s_list, p_list, l_list, v_list, f_list])))
common_labels_long = []
for key in common_keys:
common_labels_long.append(series_dict[key][1])
return [{'label': i, 'value': i} for i in sorted(common_labels_long)]
@app.callback(
Output('mygraph', 'figure'),
Input('indicator_long', 'value'),
Input('range-slider', 'value'),
Input('measure', 'value'),
State('value_$', 'value'),
State('frequency', 'value'),
)
def update_graph(indicator, range, measure, v, frequency):
if measure=='Level' and v=='Dollars':
df_filt = df_gdp_piv.iloc[range[0]:range[1]]
unit='Dollars'
elif measure=='Level' and v=='Index':
df_filt = df_gdp_piv.iloc[range[0]:range[1]]
unit='Index'
elif measure=='qpc':
df_filt = df_gdp_qpc.iloc[range[0]:range[1]]
unit = 'Quarterly percentage change'
elif measure=='apc':
df_filt = df_gdp_apc.iloc[range[0]:range[1]]
unit = 'Annual percentage change'
elif measure=='aapc':
df_filt = df_gdp_aapc.iloc[range[0]:range[1]]
unit = 'Annual average percentage change'
else:
pass
fig = px.line(df_filt, x=df_filt.index, y=indicator, title='Gross domestic product')
fig.update_layout(margin={'l': 40, 'b': 40, 't': 40, 'r': 0}, hovermode='closest', legend_title_text='', yaxis=dict(tickformat=".1f"), yaxis_title=unit, \
xaxis_title=frequency, template='seaborn', legend=dict(orientation="h", y=-0.15))
return fig
I am using plotly version 5.1.0 and dash version 2.3.1.
My data (df_gdp_piv) is in the following format:
Period|Indicator_1|Indicator_2|etc...

