Gekoppelde callbacks

Dashboards bouwen met Dash en Plotly

Alex Scriven

Data Scientist

Waarom callbacks koppelen?

Tot nu toe zorgen callbacks voor:
- Grafieken opnieuw genereren
- HTML/tekst wijzigen

Hoe zit het met een callback die een andere triggert?
- Use case: voorwaardelijke dropdown

Een veelvoorkomend voorbeeld

Een gif van twee dropdowns naast elkaar. De eerste heeft de placeholder Make en de tweede Model. Als de muis Audi in de eerste kiest en dan naar de tweede gaat, is duidelijk dat de opties in de tweede zijn gefilterd naar alleen modellen van Audi.

Inputs en outputs

De truc: let op de callback-routes (inputs en outputs)
Handig hulpmiddel: een input-outputdiagram

De flow:
- Gebruiker wijzigt value van eerste dropdown (INPUT)
- Een callback subset en retourneert options van de tweede dropdown (OUTPUT)
- Een tweede callback kan worden getriggerd (INPUT) door de value-eigenschap van de tweede dropdown.

Een stroomdiagram met rechthoeken en pijlen verticaal verbonden. Tussen de vakken staan kleine tekstvakken. Het eerste vak heeft het woord user, met een pijl naar het tweede vak "Major Category dropdown". Ertussen staat "value". Daaronder een pijl naar "Minor category dropdown" met ertussen "Options". Dit vak heeft een pijl naar het laatste vak "(Optional) More callbacks" met ertussen "Options".

Gekoppelde 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):
    # Kies een standaardwaarde
    return chosen_value

Meerdere outputs

Meerdere elementen updaten

@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

Diagram: meerdere outputs

Een stroomdiagram dat het vorige uitbreidt. In plaats van de laatste box met de tekst "(Optional) More callbacks" gaan er twee pijlen naar twee naast elkaar staande vakken. Daarin staat "Minor Category Dropdown" en "HTML Title". Beide hebben een pijl naar de optionele box onderaan het vorige diagram.

Laten we oefenen!

Dashboards bouwen met Dash en Plotly