Hello Plotly community,
I’m encountering an issue with my Dash application where changing the selection in a dropdown causes the entire webpage to go blank. I’m using a callback to dynamically display different sets of filters based on the user’s selection, but something seems to be going wrong.
Correctly funcitionability: I have a dropdown menu (seleccion_servicio) with options ‘Energía’ and ‘Gas’. Depending on the selection, I want to display different rows of filters: row-filtros_servicios_publicos_1 for ‘Energía’ and row-filtros_servicios_publicos_2 for ‘Gas’. However, when I change the selection, the entire website becomes blank.
dataforgraphs=get_data(collection_energia,collection_gas,format='pandas')
filter1_energia=dbc.Col(dcc.Dropdown(
id='mercado_energia',
options=[
#unique values of the column
{'label': i, 'value': i} for i in dataforgraphs['energia']['Mercado'].unique()
],
multi=True,
#select aleatory values for default
value=[i for i in dataforgraphs['energia']['Mercado'].unique()[:5]],
placeholder="Seleccione un mercado",
className='dcc_compon'),className='dcc_compon', width=5)
#estrato
filter2_energia=dbc.Col(
dcc.Dropdown(
id='estrato_energia',
options=[
#unique values of the column
{'label': i, 'value': i} for i in dataforgraphs['energia']['Estrato'].unique()
],
multi=True,
#select aleatory values for default
value=[i for i in dataforgraphs['energia']['Estrato'].unique()[:5]],
placeholder="Seleccione un estrato",
className='dcc_compon'
),className='dcc_compon', width=3)
filter3_energia=dbc.Col(
dcc.DatePickerRange(
id='date_start_energia',
min_date_allowed=dataforgraphs['energia']['date'].min(),
max_date_allowed=dataforgraphs['energia']['date'].max(),
initial_visible_month=dataforgraphs['energia']['date'].min(),
start_date=dataforgraphs['energia']['date'].min(),
end_date=dataforgraphs['energia']['date'].max(),
className='dcc_compon'
),className='dcc_compon', width=4)
#gas
#municipios
avaliable_municipios=dataforgraphs['gas']['MUNICIPIOS'].unique()
#separate by -, there are multiple municipios in one
avaliable_municipios=[i.split('-') for i in avaliable_municipios]
#flatten the list
avaliable_municipios=[item for sublist in avaliable_municipios for item in sublist]
#unique values
avaliable_municipios=list(set(avaliable_municipios))
filter1_gas=dbc.Col(
dcc.Dropdown(
id='municipio_gas',
options=[
#unique values of the column
{'label': i, 'value': i} for i in avaliable_municipios
],
multi=True,
#select aleatory values for default
value=[i for i in avaliable_municipios[:5]],
placeholder="Seleccione un municipio",
className='dcc_compon'
),className='dcc_compon', width=5)
filter2_gas=dbc.Col(
dcc.Dropdown(
id='estrato_gas',
options=[
#unique values of the column
{'label': i, 'value': i} for i in dataforgraphs['gas']['ESTRATO'].unique()
],
multi=True,
#select aleatory values for default
value=[i for i in dataforgraphs['gas']['ESTRATO'].unique()[:5]],
placeholder="Seleccione un estrato",
className='dcc_compon'
),className='dcc_compon', width=3)
filter3_gas=dbc.Col(
dcc.DatePickerRange(
id='date_start_gas',
min_date_allowed=dataforgraphs['gas']['date'].min(),
max_date_allowed=dataforgraphs['gas']['date'].max(),
initial_visible_month=dataforgraphs['gas']['date'].min(),
start_date=dataforgraphs['gas']['date'].min(),
end_date=dataforgraphs['gas']['date'].max(),
className='dcc_compon'
),className='dcc_compon', width=4)
app.layout = dbc.Container(
[
dmc.LoadingOverlay(
loaderProps={"variant": "spinner", "color": "blue"},
style={"height": "100vh"},
children=[
html.Div(id="notifications-container"),
dbc.Card(
[
dbc.CardHeader("Opciones"),
dbc.CardBody([
#ROW DE FILTROS, ESTE ES EL MODIFICABLE
dbc.Row(
[
dbc.Col(
[dcc.Dropdown(
id='seleccion_servicio',
options=[
{'label': 'Energía', 'value': 'energia'},
{'label': 'Gas', 'value': 'gas'},
],
value='energia'
)],
width=2,
),
]
),
html.Hr(),
dbc.Row(
[filter1_energia, filter2_energia, filter3_energia], id="row-filtros_servicios_publicos_1"
),
dbc.Row(
[filter1_gas, filter2_gas, filter3_gas], id="row-filtros_servicios_publicos_2"
#hide this row by default
,style={'display': 'none'}
),
]),
dbc.CardFooter(
[
dbc.Row([
dbc.Col(
dbc.Button(
"Descargar Dataset",
id="update-button" + metric,
color="primary",
className='btn-sm',
n_clicks=0,
),
width=1,),
dbc.Col(
dbc.Button(
"Personalizar Gráficos",
id="walker" + metric,
color="primary",
className='btn-sm',
n_clicks=0,
),
width=1,),
])
]
),
],className="shadow mb-3"
),
]
),
],
fluid=True, id="mainContainer" + metric
)
@app.callback(
[Output("row-filtros_servicios_publicos_1", "style"),
Output("row-filtros_servicios_publicos_2", "style")],
Input("seleccion_servicio", "value"),
)
def filtros_servicios_publicos(servicio):
if servicio == 'gas':
return {}, {'display': 'none'} # Show Gas filters, hide Energía filters
else:
return {'display': 'none'}, {} # Hide Gas filters, show Energía filters
@app.callback(
Output("mainContainer" + metric, "children"),
[Input("walker" + metric, "n_clicks"),
Input("seleccion_servicio", "value")
],
prevent_initial_call=True
)
There are no visible errors in the console, and the callback logic appears to be straightforward. I’m wondering if there might be an underlying issue with the way Dash handles these dynamic changes, or if I’m missing something in my code.
Any insights or suggestions would be greatly appreciated!