Callbacks chaînés

Créer des tableaux de bord avec Dash et Plotly

Alex Scriven

Data Scientist

Pourquoi chaîner des callbacks ?

Jusqu'ici, les callbacks servent à :
- Régénérer des graphiques
- Modifier du HTML / du texte

Et si un callback en déclenchait un autre ?
- Cas d'usage : menu déroulant conditionnel

Un exemple courant

Un gif de deux menus déroulants côte à côte. Le premier affiche l'espace réservé Make et le second Model. Quand la souris choisit Audi dans le premier, puis passe au second, on voit que les options du second sont filtrées pour ne montrer que les modèles Audi.

Entrées et sorties

L'astuce : bien comprendre les voies des callbacks (entrées et sorties)
Outil utile : un schéma entrées-sorties

Le flux :
- L'utilisateur modifie value du premier menu (INPUT)
- Un callback sous-ensemble et renvoie options du second (OUTPUT)
- Un second callback peut alors être déclenché (INPUT) par la propriété value du second menu.

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 schéma qui étend le précédent. Au lieu de la dernière case « (Optional) More callbacks », deux flèches mènent vers deux cases côte à côte : « Minor Category Dropdown » et « HTML Title », qui pointent toutes deux vers la case optionnelle au bas de l'ancien schéma.

Passons à la pratique !

Créer des tableaux de bord avec Dash et Plotly