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

Let's do this in Dash!

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 second dropdown (OUTPUT)
- Another callback could be triggered (INPUT) by options change on second dropdown, and so on

Chained callbacks in Dash

The callbacks involved:

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

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

Set a default value

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

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

Multiple outputs

May wish to update multiple elements

In our example: update a HTML title as well
Add another output

@app.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