コールバックの連鎖

Dash と Plotly で作るダッシュボード

Alex Scriven

Data Scientist

なぜ連鎖させるか

これまでのコールバックの効果:
- プロットの再生成
- HTML/テキストの変更

別のコールバックを起動することは?
- 例: 条件付きドロップダウン

よくある例

左右に 2 つのドロップダウン。左は Make、右は Model。左で Audi を選ぶと、右の選択肢が Audi のモデルに絞り込まれる様子が示されている GIF

入力と出力

要点: コールバック経路（入力/出力）を把握
ツール: 入出力ダイアグラム

フロー:
- ユーザーが最初のドロップダウンのvalueを変更（入力）
- コールバックが 2 つ目のoptionsを絞り込み返す（出力）
- 2 つ目のvalueを入力として、2 番目のコールバックが起動され得る

長方形と矢印の縦型フローチャート。最上段「user」から「Major Category dropdown」へ（間の小枠は「value」）。次に「Minor category dropdown」（間は「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

複数出力の図

先ほどのフローチャートを拡張した図。最後の「（任意）さらにコールバック」の箱の代わりに、2 本の矢印が下の 2 つの箱（「小分類ドロップダウン」「HTML タイトル」）へ分岐し、どちらからも前回の最下部にあった任意の箱へ矢印が戻っている。

練習しましょう！

Dash と Plotly で作るダッシュボード