✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Clear selectedData when an Input changes state

I have a dash app with a bar-chart representing Counts over Dates (days). The bar chart is linked to a map (scattermapbox). Users can filter which dates show on the map by selecting (e.g. via box or lasso) on the bar chart which date/date ranges they are interested in.

The chart and map are fed by a dataframe. There is a dropdown element which subsets the dataframe by a categorical variable.

Whenever I “select dates” on the plot it successfully filters the map, but when I change the drop down category, the selectedData is retained, thus pre-filtering the map undesirably.

Which brings me to two questions:

  1. How would you go about fixing this specific issue?

  2. In general is there some general technique in dash to compare the apps present state with a past state? A way to track when a certain input changes?

EDIT:

I tried following along with this post but after formatting it for my app - my version of the example’s def update_selection(data, selected_data, state) was not working … the arguments were empty

What you could do is to update both the figure and the selectedData attributes of your map in the same callback.

@app.callback(
    [
        Output("bar-chart", "figure"),
        Output("map-chart", "figure"),
        Output("map-chart", "selectedData")
    ],
    [Input("dropdown", "value")]
)
def update(val):
    # Prepare the figures
    return [fig_bar, fig_map, None]
1 Like

Your suggestion helped me think about a different way to approach the problem which ultimately did solve it…

I just added a new callback in before the callback that outputs the bar chart and bar graph

@app.callback(
    Output('bar-chart-time-series', 'selectedData'),
    [Input(component_id='dropdown-menu', component_property='value')]
)
def clear_selected(new_dropdown_value):
    return None

and then later in the code …


@app.callback(
     Output('bar-chart-time-series', 'figure'),
     Output('map', 'children')],
    [Input(component_id='dropdown-menu', component_property='value'),
     Input(component_id='dropdown-menu2', component_property='value'), 
     Input('bar-chart-time-series', 'selectedData')]
)

so now whenever dropdown-menu changes, the selectedData of the bar-chart is set to None (i.e. cleared)