Dash⑲(パターンマッチング・コールバック/MATCHセレクタ)

MATCHセレクタ

MATCHセレクタを使うと、IDキー”index”の値が一致するコンポーネントにして、コールバックを適用することができます。

gapminderデータセットを使って国名のドロップダウンをUIに追加し、その値を出力するアプリケーションを作成し、MATCHセレクタの動作を確認してみます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output, State, MATCH, ALLSMALLER

gapminder = px.data.gapminder() # データの読み込み

app = dash.Dash(__name__) # Dashインスタンスを生成

# レイアウト
app.layout = html.Div(
[
html.Button('Push', id='button1', n_clicks=0),
html.Div(id='div1', children=[])
],
style={'width':'90%', 'margin':'2% auto'}
)

# コールバックの定義①
@app.callback(
Output('div1', 'children'),
Input('button1', 'n_clicks'),
State('div1', 'children'),
prevent_initial_calll=True
)
def update_layouth(n_clicks, children):
new_layout = html.Div(
[
dcc.Dropdown(
id={'type':'dropdown1', 'index':n_clicks},
options=[{'label':c, 'value':c} for c in gapminder.country.unique()],
value=gapminder.country.unique()[n_clicks - 1]
),
html.P(id={'type':'text_show', 'index':n_clicks})
]
)
children.append(new_layout)
return children

# コールバックの定義②
@app.callback(
Output({'type':'text_show', 'index':MATCH}, 'children'),
Input({'type': 'dropdown1', 'index':MATCH}, 'value')
)
def update_graph(selected_values):
return str(selected_values)

if __name__ == '__main__':
app.run_server(debug=True) # アプリケーションを起動

レイアウトには、ボタンと新たなコンポーネントを追加するためのDivコンポーネントを配置します。

1つ目のコールバック(update_layout関数)では、ボタンがクリックされるとドロップダウンとPコンポーネントを追加します。

2つ目のコールバック(update_graph関数)では、入力項目と出力項目の指定IDキー”index”にMATCHを設定します。

こうすることでIDキー”index”に渡された値が同じもの同士に、コールバックが適用されドロップダウンで選択された値がそれぞれ表示されます。

[ブラウザで表示]

ボタンを押すたびに、ドロップダウンとPコンポーネントが追加され、ドロップダウンの選択値がそれそれのPコンポーネントに表示されることが確認できます。