Цепочки обратных вызовов

Создание дашбордов с помощью Dash и Plotly

Alex Scriven

Data Scientist

Зачем создавать цепочки?

До сих пор обратные вызовы использовались для:
- Перерисовки графиков
- Изменения HTML / текста

А что если один обратный вызов запускает другой?
- Пример: условный выпадающий список

Типичный пример

GIF с двумя выпадающими списками рядом. Первый с меткой Make, второй — Model. При выборе Audi в первом списке параметры второго фильтруются и показывают только модели Audi

Входы и выходы

Главное: понимать пути обратных вызовов (входы и выходы)
Полезный инструмент: диаграмма входов и выходов

Порядок работы:
- Пользователь меняет value первого выпадающего списка (INPUT)
- Обратный вызов фильтрует и возвращает options второго списка (OUTPUT)
- Второй обратный вызов может быть запущен (INPUT) свойством value второго выпадающего списка.

Блок-схема с прямоугольниками и стрелками. Первый блок — «Пользователь», стрелка ведёт к блоку «Выпадающий список основной категории» (метка «value»). Далее стрелка к блоку «Выпадающий список подкатегории» (метка «Options»), затем к блоку «(Необязательно) Дополнительные обратные вызовы» (метка «Options»)

Цепочки обратных вызовов в 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

Несколько выходов

Обновление нескольких элементов

@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

Диаграмма с несколькими выходами

Расширенная блок-схема: вместо финального блока «(Необязательно) Дополнительные обратные вызовы» теперь две стрелки ведут к двум блокам — «Выпадающий список подкатегории» и «HTML-заголовок», каждый из которых соединяется с необязательным блоком внизу.

Давайте потренируемся!

Создание дашбордов с помощью Dash и Plotly