Callbacks encadeados

Construindo Dashboards com Dash e Plotly

Alex Scriven

Data Scientist

Por que encadear callbacks?

Até agora, callbacks fazem:
- Regenerar gráficos
- Alterar HTML / texto

E quando um callback dispara outro?
- Caso de uso: dropdown condicional

Um exemplo comum

Um gif com dois dropdowns lado a lado. O primeiro tem o placeholder Make e o segundo, Model. Ao selecionar Audi no primeiro e ir para o segundo, fica claro que as opções do segundo foram filtradas apenas para modelos da Audi

Entradas e saídas

O truque: conhecer os caminhos do callback (entradas e saídas)
Ferramenta útil: diagrama de entrada-saída

O fluxo:
- Usuário altera o value do primeiro dropdown (INPUT)
- Um callback filtra e retorna options do segundo dropdown (OUTPUT)
- Um segundo callback pode ser disparado (INPUT) pelo value do segundo dropdown.

Um fluxograma com retângulos e setas ligando caixas verticalmente. Entre as caixas há pequenos rótulos. A primeira caixa tem "user" e seta para a segunda, "Major Category dropdown". Entre elas, o rótulo "value". Há uma seta para a próxima caixa, "Minor category dropdown". O rótulo entre elas diz Options. Esta caixa aponta para a final, "(Optional) More callbacks", com o rótulo entre elas "Options"

Callbacks encadeados no 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últiplas saídas

Atualizando vários 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últiplas saídas

Um diagrama que estende o anterior. Em vez da caixa final "(Optional) More callbacks", há duas setas para duas caixas lado a lado: "Minor Category Dropdown" e "HTML Title", ambas apontando para a caixa opcional que estava no fim do último diagrama.

Vamos praticar!

Construindo Dashboards com Dash e Plotly