Callbacks encadenados

Creación de paneles con Dash y Plotly

Alex Scriven

Data Scientist

¿Por qué encadenar callbacks?

Hasta ahora, los callbacks hacen:
- Regenerar gráficos
- Cambiar HTML/texto

¿Y si un callback dispara otro?
- Caso de uso: menú dependiente

Un ejemplo común

Un GIF con dos menús desplegables lado a lado. El primero muestra Make y el segundo Model. Al seleccionar Audi en el primero y pasar al segundo, se ve que las opciones del segundo se filtran a modelos de Audi.

Entradas y salidas

La clave: conocer entradas y salidas del callback
Herramienta útil: diagrama de E/S

Flujo:
- La persona usuaria cambia value del primer menú (INPUT)
- Un callback filtra y devuelve options del segundo menú (OUTPUT)
- Un segundo callback puede dispararse (INPUT) por el value del segundo menú.

Un diagrama de flujo con rectángulos y flechas conectando cajas verticalmente. Entre cajas hay pequeños textos. La primera caja dice user; flecha a «Major Category dropdown». Entre medias, «value». Flecha a «Minor category dropdown», con «Options» entre medias. Luego flecha a «(Optional) More callbacks» con «Options» en el recuadro intermedio.

Callbacks encadenados en 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

Múltiples salidas

Actualizar varios elementos

@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

Diagrama de múltiples salidas

Un diagrama de flujo que amplía el anterior. En lugar de la caja final con el texto «(Optional) More callbacks», hay dos flechas hacia dos cajas inferiores, en paralelo. Dicen «Minor Category Dropdown» y «HTML Title», y ambas apuntan a la caja opcional que estaba al final del diagrama anterior.

¡Vamos a practicar!

Creación de paneles con Dash y Plotly