Verkettete Callbacks

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

Warum Callbacks verketten?

Bisher bewirken Callbacks:
- Diagramme neu zeichnen
- HTML/Text ändern

Was ist mit einem Callback, der einen anderen auslöst?
- Use Case: bedingte Dropdowns

Ein häufiges Beispiel

Ein GIF mit zwei Dropdowns nebeneinander. Das erste hat den Platzhalter „Make", das zweite „Model". Wenn die Maus im ersten Dropdown Audi auswählt und dann zum zweiten wechselt, ist klar, dass die Optionen im zweiten Dropdown auf Audi-Modelle gefiltert wurden.

Inputs und Outputs

Der Trick: die Callback-Pfade (Inputs und Outputs) kennen
Nützliches Tool: ein Input-Output-Diagramm

Ablauf:
- Nutzer ändert value des ersten Dropdowns (INPUT)
- Ein Callback filtert und liefert options des zweiten Dropdowns (OUTPUT)
- Ein zweiter Callback kann durch die value-Eigenschaft des zweiten Dropdowns (INPUT) ausgelöst werden.

Verkettete Callbacks in Dash

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

def update_major_cat(major_cat_dd):
    # Optionen filtern (Liste von Dicts)
    return minor_options

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

def update_minor_cat(minor_cat_options):
    # Standardwert wählen
    return chosen_value

Mehrere Outputs

Mehrere Elemente aktualisieren

@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

Diagramm: mehrere Outputs

Ein erweitertes Flussdiagramm des vorherigen. Statt der letzten Box „(Optional) More callbacks" führen zwei Pfeile zu zwei Boxen nebeneinander: „Minor Category Dropdown" und „HTML Title". Beide zeigen per Pfeil auf die optionale Box unten aus dem letzten Diagramm.

Lass uns üben!

Dashboards mit Dash und Plotly erstellen