Clear selectedData when an Input changes state

Dash Python
1

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

1 Like
2

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]
3 Likes
3

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)

4

I was able to edit an existing callback to return None rather than raise PreventUpdate.

5

I’m really struggling with this - I’ve tried the solutions above but with no luck and think I must be missing something…

I’ve got a choropleth map and a dropdown for region and year. The main call back takes a dataframe, subsets it by region/year and then outputs the figure into a dcc.Graph.

My issue is that if I select data in one region, then change the region, the selected Data remains even if I set it as None.

I’ve tried putting the selectedData as none within the appcallback for the Graph but that hasn’t worked, then tried with a separate callback (as below) but that also hasn’t seemed to have worked.

Example:

I select South Norfolk in the East of England, then with that still selected change the region to London, I get the following (the bottom text is a print out of the State graph SelectedData):

image
image1646×881 73.1 KB

The callback code in abbreviated form:



#attempt at clearing selected data when region changes

@app.callback(
    Output('graph', 'selectedData'),
    [Input(component_id='region_picker', component_property='value')]
)
def clear_selected(new_dropdown_value):
    return None


# Choropleth callback and figure creation

@app.callback([
    Output("graph", "figure"),
    Output("selecteddatahtml", "children")],
    Input("region_picker", "value"),
    Input("year_picker", "value"),
    State("graph", "selectedData")
)

def display_choropleth(region, year, selectedData):

    #Use data frame function to create dataframe for selected region and year
    choropleth_df = basicdataframe(region, year)


    # Set up json file
    with open(r"Local_Authority_Districts_(December_2021)_GB_BFC4.json") as json_file:
        geojson = json.load(json_file)

    # create figure
    fig = px.choropleth_mapbox(choropleth_df, geojson=geojson, color=choropleth_df["Ratio"],
                               locations=choropleth_df["Local Authority"], featureidkey="properties.LAD21NM",
                               color_continuous_scale= "YlOrRd",
                               hover_data= ["Local Authority"], opacity=0.7,
                               )

    fig.update_layout(clickmode='event+select')

    x = str(selectedData)


    return [fig, x]

Am I missing something obvious?

6

Is it really possible to modify the selectedData property of a dcc.Graph component? According to the documentation (Graph | Dash for Python Documentation | Plotly), the property selectedData is supposed to be “read-only”.