Chaînage de callbacks

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Pourquoi chaîner des callbacks ?

Jusqu'ici, les callbacks permettent :
- Régénérer des graphiques
- Modifier le HTML / le texte

Et si un callback en déclenchait un autre ?
- Cas d'usage : liste déroulante conditionnelle

Un exemple courant

Un gif de deux listes déroulantes côte à côte. La première affiche l'espace réservé Make et la seconde Model. Quand la souris choisit Audi dans la première, puis passe à la seconde, on voit que ses options sont filtrées pour ne montrer que les modèles Audi.

Entrées et sorties

L'astuce : bien connaître les cheminements de callbacks (entrées et sorties)
Outil utile : un diagramme entrées–sorties

Le déroulement :
- L'utilisateur modifie value de la première liste (INPUT)
- Un callback sous-ensemble et renvoie options de la seconde liste (OUTPUT)
- Un second callback peut être déclenché (INPUT) par la propriété value de la seconde liste.

Callbacks chaînés dans 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

Sorties multiples

Mettre à jour plusieurs éléments

@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

Diagramme des sorties multiples

Un diagramme qui prolonge le précédent. Au lieu d'une seule case finale « (Optional) More callbacks », deux flèches mènent à deux cases côte à côte : « Minor Category Dropdown » et « HTML Title », toutes deux pointant ensuite vers la case optionnelle du bas.

Passons à la pratique !