Kedjade callbacks

Bygg dashboards med Dash och Plotly

Alex Scriven

Data Scientist

Varför kedja callbacks?

Hittills orsakar callbacks:
- Återskapa diagram
- Ändra HTML/text

Vad händer om en callback utlöser en annan?
- Användningsfall: villkorlig rullgardinsmeny

Ett vanligt exempel

En gif med två rullgardinsmenyer sida vid sida. Den första har platshållartexten Make och den andra Model. När musen väljer Audi i den första menyn och sedan flyttar till den andra, syns det tydligt att alternativen i den andra menyn filtrerats till enbart modeller för Audi

Indata och utdata

Nyckeln: ha koll på callback-flöden (indata och utdata)
Användbart verktyg: ett indata-utdata-diagram

Flödet:
- Användaren ändrar value i den första rullgardinsmenyn (INPUT)
- En callback filtrerar och returnerar options för den andra rullgardinsmenyn (OUTPUT)
- En andra callback kan utlösas (INPUT) av value-egenskapen i den andra rullgardinsmenyn.

Kedjade callbacks i 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

Flera utdata

Uppdatera flera element

@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 över flera utdata

Ett flödesschema som bygger vidare på det tidigare. I stället för den sista rutan med texten "(Optional) More callbacks" går nu två pilar till två rutor sida vid sida. De innehåller texten "Minor Category Dropdown" och "HTML Title", och båda har en pil till den valfria rutan längst ned i det förra diagrammet.

Nu kör vi en övning!

Bygg dashboards med Dash och Plotly