Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Hierarchy in linked dropdowns

Hi

I have a hierarchy which have 4 levels and are stored in a dataframe.

I would like to represent each level of the hierarchy in dropdowns.

Can anyone recommend a method to “link” the 4 dropdowns (which should be populated from the dataframe)

Hi,

Welcome to the community!

Could you elaborate a little bit more on what do you mean by “link” the 4 dropdowns?

If it is just a drill-down on the hierarchies (say Continent/Country/City/Street), you could start by adding N-1 callbacks to output new “options” to the lower hierarchy based on values matching the upper levels:

@app.callback(
    Output("country-dropdown", "options"),
    Input("continent-dropdown", "value")
)
def filter_country_options(continent):
    # Assumes df has "continent", "country" and "city" columns (+ others)
    countries_in_continent = df.loc[df.continent == continent].country # country series
     
    options = [{"id": country, "name": country} for country in countries_in_continent]
    return options

In this example, for the 3rd level (city), you would need to provide as input both continent and country selections, so you can filter the dataframe by these two columns.

Another approach could be to use the ALLSMALLER pattern-matching callbacks, however this approach is a bit more advanced and might not be needed in simple cases.

1 Like