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

ALLSMALLERセレクタ

ALLSMALLERセレクタを使うと、属性”type”の値が同じ かつ 属性”index”の値が小さい 全てのコンポーネントの属性値をコールバック関数で利用することができます

[ソースコード]

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')
    Input({'type': 'dropdown1', 'index':ALLSMALLER}, 'value')   # MATCHセレクタをALLSMALLERセレクタに変更
)
def update_graph(selected_values):
    return str(selected_values)

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

２つ目のコールバック関数(update_graph)のInputでALLSMALLERセレクタを指定しています。

Pコンポーネントの属性”index”よりも小さな値を持つドロップダウンのvalue属性の値が、リストに格納されPコンポーネントに表示されます。

[ブラウザで表示]

ボタンを押すたびにドロップダウンとリストの内容を表示するPコンポーネントが追加され、自身よりも上部に表示されている（つまり属性indexの値が小さい）ドロップダウンの値が全て表示されていることを確認できます。