Обратный вызов на стороне клиента приложения Dash не передает значение обратному вызову на стороне сервера

Я работаю над приложением Dash, интегрированным с шаблоном Django, и столкнулся с проблемой, когда обратный вызов на стороне клиента не передает значение обратному вызову на стороне сервера. Значение корректно регистрируется в консоли браузера, но на стороне сервера при срабатывании обратного вызова на стороне сервера отображается как None.

**Минимальный код **

# template.html
{% load plotly_dash %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            setTimeout(function() {
                function getSelectedLAName() {
                    const selected_la_name_element = document.getElementById('selected-la-name');
                    if (selected_la_name_element) {
                        const selected_la_name = selected_la_name_element.getAttribute('data-la-name');
                        console.log("Selected LA Name:", selected_la_name);
                        return selected_la_name;
                    } else {
                        console.log("Element not found");
                        return null;
                    }
                }

                getSelectedLAName();  // Call the function to test
            }, 500);  // Delay in milliseconds
        </script>
    </head>
    <body>
        <h1>DASH APP Test</h1>
        <div id="selected-la-name" data-la-name="{{ selected_la.search_term }}"></div>
        {{ selected_la.search_term }} 
        <div id="dash-container" style="width: 100%; height: 600px; border: 1px solid red;">
             {% plotly_app name="dash_app" ratio=1 %}
        </div>
    </body>
</html>

# dash_app.py
from django_plotly_dash import DjangoDash
from dash import dcc, html
from dash.dependencies import Input, Output
from common.common_utils import *
import plotly.graph_objects as go

app = DjangoDash('dash_app')

app.layout = html.Div([
    html.Div(id='selected_la_name', style={'display': 'none'}),
    dcc.Dropdown(
        id='data-type',
        options=[
            {'label': 'Number', 'value': 'number'},
            {'label': 'Percentage', 'value': 'percentage'}
        ],
        value='number',
        style={'height': '30px', 'width': '50%', 'font-size': '16px'}
    ),
    dcc.Graph(
        id='heatmap',
        style={'height': '600px', 'padding': '8px'}
    )
])

# Client-side callback to extract value from hidden div
app.clientside_callback(
    """
    function() {
        const selected_la_name_element = document.getElementById('selected-la-name');
        return selected_la_name_element ? selected_la_name_element.getAttribute('data-la-name') : null;
    }
    """,
    Output('selected_la_name', 'children'),
    Input('heatmap', 'id')  # Dummy input to trigger the callback
)

# Server-side callback to update the graph
@app.callback(
    Output('heatmap', 'figure'),
    [Input('data-type', 'value'),
     Input('selected_la_name', 'children')]
)
def update_graph(data_type, selected_la_name):
    print(f"Received selected_la_name: {selected_la_name}") 
    if not selected_la_name:
        return go.Figure()  

    if data_type == 'number':
        data_norm, data = func_name(selected_la_name)
    else:
        data_norm, data = func_name(selected_la_name)

    fig = go.Figure(data=go.Heatmap(
        x=data_norm.columns,
        y=data_norm.index,
        z=data_norm.values
    ))
    return fig

ВЫХОДЫ

В шаблоне template.html

  • console.log("Selected LA Name:", selected_la_name);
    Вывод корректен

  • {{ selected_la.search_term }}
    вывод корректен

в файле dash_app.py

  • print(f "Received selected_la_name: {selected_la_name}")
    Выводы: Нет (т.е. неверно)

То, что я пробовал:

  • Убедитесь, что атрибут data-la-name правильно установлен в HTML.
  • Проверили, что обратный вызов на стороне клиента выполняется и регистрирует ожидаемое значение.
  • Убедился, что есть задержка для полной загрузки DOM, но проблема сохраняется.

Дополнительная информация:

  • Dash версии 2.9.3
  • Django версии 4.2.13
  • django-plotly-dash версия 2.3.1

Спасибо за помощь!

Вернуться на верх