如何通过 Dash 应用程序中的回调更新输入组件

Question

语境 ：

我有一个带有下拉菜单和地图的 Dash 应用程序。

该地图显示 3 个 ID 为“01”、“02”和“03”的标记。我可以点击一个标记并通过回调返回其 ID。

下拉列表使我能够通过 ID 选择标记。

我想要做的是使用地图上选定的标记更新下拉列表中的选定值。

示例：我想选择“02”。我可以通过在下拉列表中选择“02”或单击地图上的“02”来完成此操作。但如果我从地图中选择它，我希望从下拉列表中选择的值更新为“02”。

如何根据回调返回的值更新下拉列表选定的值？

这是一个代表：

# -*- coding: utf-8 -*-
import dash.dependencies
import dash_bootstrap_components as dbc
import pandas as pd
import dash_leaflet as dl
from dash import dcc, html, Input, Output

########################################################################################################################
# VARIABLES
df_sites = pd.DataFrame([['01', (48.805, 2.326)], ['02', (43.167, 0.969)], ['03', (48.812, 2.530)]],
                        columns=['id_tech', 'coordonnees'])

circlemarkers = [dl.CircleMarker(
    dl.Tooltip(df_sites.iloc[i]['id_tech']),
    center=pos,
    radius=2,
    id=df_sites.iloc[i]['id_tech'])
    for i, pos in enumerate(df_sites['coordonnees'])]

########################################################################################################################
# APP
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
        dbc.Col([
            dbc.Row([
                # Following dropdown selected value should be updated when clicking on the map
                dcc.Dropdown(df_sites['id_tech'].tolist(), df_sites['id_tech'].tolist()[0],id="in_choix_site"),
                html.Br(),
                dl.Map([dl.TileLayer(),
                        dl.GestureHandling(),
                        dl.LayerGroup(id="container", children=circlemarkers)
                        ],
                       center=[47.285549, 2.300576],
                       zoom=4,
                       style={'height': '200px', 'width':'90%', 'margin':'10px'}),

                "Selected from dropdown",
                html.Div(id='from_dropdown'), 
                html.Br(),
                "Selected from map",
                html.Div(id='from_map')
            ])
        ], md=4)
])

@app.callback(Output("from_dropdown", "children"),
              Input("in_choix_site", "value"))
def selected_site(dropdown_value):
    return(dropdown_value)

@app.callback(Output("from_map", "children"),
              [Input(marker.id, "n_clicks") for marker in circlemarkers])
def marker_click(*args):
    marker_id = dash.callback_context.triggered[0]["prop_id"].split(".")[0]
    return marker_id

if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

感谢同事的帮助，我得到了答案！

这实际上是非常明显的，但由于我是 Dash 新手，所以我并没有立即弄清楚它。我只需要添加我的下拉菜单作为回调的输出。我将这个答案留在这里，以防其他人遇到同样的问题。

@app.callback([Output("from_map", "children"),
               Output("in_choix_site", "value")],
              [Input(marker.id, "n_clicks") for marker in circlemarkers])
def update_dropdown(*args):
    marker_id = dash.callback_context.triggered[0]["prop_id"].split(".")[0]
    return marker_id, marker_id