Dash⑰（パターンマッチング・コールバック／ALLセレクタ）

パターンマッチング・コールバック

パターンマッチング・コールバックとは、条件に合ったコンポーネントの値を利用するコールバックです。

パターンマッチング・コールバックを使うと、UIに新たにコンポーネントを加えたり、そのコンポーネントに対してコールバックを適用したりすることができます。

パターンマッチング・コールバックを作成するために、次の３種類のセレクタを条件に使用します。

  • ALLセレクタ
  • MATCHセレクタ
  • ALLSMALLERセレクタ

ALLセレクタ

ALLセレクタは、IDキー”type”が一致する全てのコンポーネントをコールバックで利用できるセレクタです。

今回は、ボタンをクリックすると新たにドロップダウンが追加されるアプリケーションを作成します。

ドロップダウンではcountry列に含まれる国名が選択でき、各ドロップダウンで選択された全ての国名を画面下部に表示します。

[ソースコード]

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
51
52
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, ALL

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

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

app.layout = html.Div(
    [
        html.Button('Push', id='add_button', n_clicks=0),
#        html.Button('Push', id='add_button'),
        html.Div(id='show_drop', children=[]),
        html.P(id='content')
    ],
    style={'width':'90%', 'margin':'2% auto'}
)

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

# コールバックの定義②
@app.callback(
    Output('content', 'children'),
    Input({'type': 'my_dropdown', 'index':ALL}, 'value'),
    prevent_initial_calll=True
)
def update_graph(selected_values):
    # 全てのドロップダウンで選択された国のリストを文字列にして返す
    return str(selected_values)

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

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

２つ目のコールバック関数(update_graph)では、全てのドロップダウンの選択結果を文字列にして返すために、ALLセレクタをInputのインスタンスに設定しています。

パターンマッチング・コールバックでは、Inputメソッドなどの IDキー”index” に対して、セレクタを渡すことにより選択するコンポーネントを指定します。

今回はALLセレクタを使って、IDキーが “type”:”my_dropdown”となっているコンポーネントの全てのvalue値をコールバックで返します。

[ブラウザで表示]

ボタンを押すと、ドロップダウンが追加されます。

またそれぞれのドロップダウンで国名を選択すると、選択された国名が全て画面下部にテキストで表示されます。