Chained callbacks

Building Dashboards with Dash and Plotly

Alex Scriven

Data Scientist

Why chain callbacks?

So far callbacks cause:
- Regenerate plots
- Change HTML / text

What about callback triggering another callback?
- Use case: conditional dropdown

A common example

A gif of two dropdowns side-by-side. The first has the placeholder text Make, and the second has Model. As the mouse selects Audi from the first dropdown then moves to the second dropdown, it is clear the available options for then the second dropdown have been filtered to only models that are for Audi cars

Inputs and outputs

The trick: be aware of callback pathways (inputs and outputs)
Helpful tool: an input-output diagram

The flow:
- User changes value of first dropdown (INPUT)
- A callback subsets and returns options of the second dropdown (OUTPUT)
- A second callback could be triggered (INPUT) by the value property of the second dropdown.

Chained callbacks in Dash

@callback(
  Output('minor_cat_dd', 'options'),
  Input('major_cat_dd', 'value'))

def update_major_cat(major_cat_dd):
    # Filter options (list of dicts)
    return minor_options

@callback(
  Output('minor_cat_dd', 'value'),
  Input('minor_cat_dd', 'options'))

def update_minor_cat(minor_cat_options):
    # Pick a default value
    return chosen_value

Multiple outputs

Updating multiple elements

@callback(
  Output('my_title', 'children'),
  Output('minor_cat_dd', 'value'),
  Input('minor_cat_dd', 'options')
)
def some_function(input):
  # function body
  return title_value, dropdown_value

Multiple outputs diagram

A flow chart diagram that extends the one previously put up. Instead of the final box, which had the text "(Optional) More callbacks," there are two arrows to two boxes below, side-by-side. They have the text "Minor Category Dropdown" and "HTML Title," both of which have an arrow to the optional box that was a the bottom of the last diagram.

Let's practice!

Building Dashboards with Dash and Plotly