python - 无法使用下拉选择器更新仪表板应用程序中的图表

Question

您好，我正在开发一个破折号应用程序，不知何故我无法更新不同 div 回调之间的图表。该应用程序的工作原理如下:

1. 用户在前端的文本输入框中输入网址，然后单击按钮来运行分析。
2. 用户也可以在运行分析之前选择查看模式，查看模式取决于下拉选择器
3. 该 URL 用于显示视频帧并运行 Python 函数。
4. 处理后的结果应存储在 dcc.store 组件中。
5. 然后调用存储的数据来更新图表。

下面是回调代码:

#Video Selection
@app.callback(Output("video-display", "url"),
              [Input("submit_button", "n_clicks")],
              [State('video_url', 'value')])
def select_footage(n_clicks, video_url):
    if n_clicks is not None and n_clicks > 0:
        url = video_url
        return url


# Processing and Storing the results in dcc.store
@app.callback(Output("intermediate-value", "data"),
              [Input("submit_button", "n_clicks")],
              [State('video_url', 'value')])

def video_processing(n_clicks, value ):
    global frame
    if n_clicks is not None and n_clicks > 0:
        frame = python_func(url)
        return frame.to_json(orient='split')

# Callback to change the graph view mode div
@app.callback(Output("div-graph-mode", "children"),
              [Input("dropdown-graph-view-mode", "value")])
def update_graph_mode(value):
    if value == "graphical":
        return [
            html.Div(
                children=[
                    html.P(children="Retention Score of Detected Labels",
                           className='plot-title'),
                    dcc.Graph(
                        id="bar-score-graph",
                        style={'height': '55vh', 'width': '100%'}
                    ),
                    html.P(children="Audience Retention Behavior",
                           className='plot-title'),
                    dcc.Graph(
                        id="line_chart_retention",
                        style={'height': '45vh', 'width': '100%'}
                    )
                ]
            )
        ]
    else:
        return []

@app.callback(Output("div-table-mode", "children"),
              [Input("dropdown-graph-view-mode", "value")])
def update_table_mode(dropdown_value):
    if dropdown_value == "table":
        return [
            html.Div(
                children=[
                    html.P(children="Retention By Label",
                           className='plot-title'),
                    html.Div([
                        table.DataTable(
                            id="label_retention",
                            )],
                        style={'height': '45vh'}),


                    html.P(children="Retention by Time Stamp",
                           className='plot-title'),
                    html.Div([
                        table.DataTable(
                            id="timestamp_retention",
                            style_table={'maxHeight': '40vh', 'width': '100%', 'overflowY': 'scroll'})],
                        style={'height': '40vh'}
                    )
                ]
            )
        ]
    else:
        return []

# Updating Graphs
@app.callback(Output("label_retention", "figure"),
              [Input("dropdown-graph-view-mode", "value")])
def update_table_bar(value):
    global frame
    if frame is not None:
        print(frame)
        print("table")
        print(value)

@app.callback(Output("bar-score-graph", "figure"),
              [Input("dropdown-graph-view-mode", "value")])
def update_score_bar(value):
    global frame
    if frame is not None:
        print(frame)
        print("graph")
        print(value)

现在发生的情况是，如果我尝试在两种图形 View 模式之间切换，应用程序不会反射(reflect)图形，并且需要再次单击按钮才能获取结果。因此，基本上我相信当我使用下拉菜单进行切换时，数据不会在 dcc.store 组件中丢失。

如何使应用程序的行为方式使我的 python 函数仅在提交按钮上运行一次，但随后我可以在 View 模式之间切换以查看图表。

提前非常感谢!!

附注这只是代码片段，因为代码太长，但如果您想查看完整代码，请告诉我。

更新:我刚刚意识到，当我选择图形模式时，应用程序会打印表格模式的结果，当我选择表格模型时，应用程序会打印图形模式的结果。我无法弄清楚为什么会发生这种情况。

Answer 1

我终于能够解决我的问题，如下所示:

@app.callback(Output("div-table-mode", "children"),
              [Input("dropdown-graph-view-mode", "value")])
def update_table_mode(dropdown_value):
    if dropdown_value == "tabular":
        return [
            html.Div(
                children=[
                    html.P(children="Retention By Label",
                           className='plot-title', style={'margin': '0 0 1em 0'}),
                    html.Div([
                        table.DataTable(
                            id="label_retention",
                            columns=[{"name": i, "id": i} for i in label_retention.columns],

                            data=label_retention.to_dict("rows"),

                            style_table={'maxHeight': '40vh', 'width': '100%', 'overflowY': 'scroll'},
                            style_cell_conditional=[
                                {
                                    'if': {'column_id': c},
                                    'textAlign': 'left'
                                } for c in ['Labels']
                            ],
                            style_data_conditional=[
                                {
                                    'if': {'row_index': 'odd'},
                                    'backgroundColor': 'rgb(248, 248, 248)'
                                }
                            ],

                            style_header={
                                'backgroundColor': 'rgb(230, 230, 230)',
                                'fontWeight': 'bold'
                            }
                            )],
                        style={'height': '40vh'}),


                    html.P(children="Retention by Time Stamp",
                           className='plot-title', style={'margin': '1em 0 1em 0'}),
                    html.Div([
                        table.DataTable(
                            id="timestamp_retention",
                            columns=[{"name": i, "id": i} for i in timeline_retention.columns],
                            data=timeline_retention.to_dict("rows"),
                            style_table={'maxHeight': '40vh', 'width': '100%', 'overflowY': 'scroll'},
                            style_cell={'textAlign': 'left', 'minWidth': '20px', 'width': '20px', 'maxWidth': '50px',
                                        'whiteSpace': 'normal'},
                            css=[{
                                'selector': '.dash-cell div.dash-cell-value',
                                'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
                            }],
                            style_data_conditional=[
                                {
                                    'if': {'row_index': 'odd'},
                                    'backgroundColor': 'rgb(248, 248, 248)'
                                }
                            ],

                            style_header={
                                'backgroundColor': 'rgb(230, 230, 230)',
                                'fontWeight': 'bold'
                            }
                        )],
                        style={'height': '40vh'}
                    )
                ],
                style={'backgroundColor': '#F2F2F2'}
            )
        ]
    else:
        return []


@app.callback(Output("div-graph-mode", "children"),
              [Input("dropdown-graph-view-mode", "value")])
def update_graph_mode(value):
    if value == "graphical":
        return [
            html.Div(
                children=[
                    html.P(children="Retention Score of Detected Labels",
                           className='plot-title', style={'margin': '0 0 1em 0', 'width': '100%'}),
                    dcc.Graph(
                        id="bar-score-graph",
                        figure=go.Figure({
                            'data': [{'hoverinfo': 'x+text',
                                      'name': 'Detection Scores',
                                      #'text': y_text,
                                      'type': 'bar',
                                      'x': label_retention["Description"],
                                      'marker': {'color': colors},
                                      'y': label_retention["sum"].tolist()}],
                            'layout': {'showlegend': False,
                                       'autosize': False,
                                       'paper_bgcolor': 'rgb(249,249,249)',
                                       'plot_bgcolor': 'rgb(249,249,249)',
                                       'xaxis': {'automargin': True, 'tickangle': -45},
                                       'yaxis': {'automargin': True, 'range': [minval, maxval], 'title': {'text': 'Score'}}}
                        }
                        ),
                        style={'height': '55vh', 'width': '100%'}
                    ),
                    html.P(children="Audience Retention Behavior",
                           className='plot-title', style={'margin': '0 0 1em 0', 'width': '100%'}),
                    dcc.Graph(
                        id="line_chart_retention",
                        figure=go.Figure({
                            'data': [go.Scatter(x=label_retention['Start'], y=label_retention['sum'], mode='lines', name='Audience Retention',
                                                line=dict(color='firebrick', width=4))],
                            'layout': {
                                'yaxis': {'title': {'text': 'Audience Retention'}, 'automargin': True},
                                'xaxis': {'title': {'text': 'Time Segment'}, 'automargin': True},
                                'paper_bgcolor': 'rgb(249,249,249)',
                                'plot_bgcolor': 'rgb(249,249,249)',

                            }
                        }),
                        style={'height': '45vh', 'width': '100%'}
                    )
                ],
                style={'backgroundColor': '#F2F2F2', 'width': '100%'}
            )
        ]
    else:
        return []