Callback in catena

Creare dashboard con Dash e Plotly

Alex Scriven

Data Scientist

Perché concatenare i callback?

Finora i callback servono a:
- Rigenerare grafici
- Modificare HTML / testo

E se un callback ne attivasse un altro?
- Caso d'uso: menu a discesa condizionale

Un esempio comune

Una gif con due menu a discesa affiancati. Il primo ha il segnaposto Make, il secondo Model. Quando il mouse seleziona Audi dal primo menu e passa al secondo, si vede che le opzioni del secondo sono filtrate ai soli modelli Audi

Input e output

Trucco: conoscere i percorsi dei callback (input e output)
Strumento utile: un diagramma input-output

Il flusso:
- L'utente cambia value del primo menu (INPUT)
- Un callback crea un sottoinsieme e restituisce le options del secondo menu (OUTPUT)
- Un secondo callback può essere attivato (INPUT) dalla proprietà value del secondo menu.

Callback in catena 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

Output multipli

Aggiornare più elementi

@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

Diagramma con output multipli

Un diagramma di flusso che estende il precedente. Invece della casella finale "(Optional) More callbacks", ci sono due frecce verso due caselle affiancate: "Minor Category Dropdown" e "HTML Title", entrambe con una freccia verso la casella opzionale in basso del diagramma precedente.

Esercitiamoci!

Creare dashboard con Dash e Plotly