Plotly Dash becomes unresponsive when adding a callback for dcc.Graph

Dash Python
1

Hi!

I’m using dash version 2.16.1 and am currently having an issue that I can’t seem to find an explanation or a solution for. I have an application built mostly with elements from dash mantine components with multiple tabs that perform different experiments with Large Language Models. Everything runs smoothly, my dataset isn’t very large, and any calculations are performed quite fast. However, when I try to add a dcc.Graph element into the dashboard and then add a callback for it my app becomes unresponsive, when I reload it it just says “Loading” until it finally times out and crashes with no errors on the back end. Adding dcc.Graph itself into the layout doesn’t cause any issues, but creating a callback for it is what makes it go unresponsive. I’ve updated all the versions of libraries I’m using, I’ve tried moving the graph object outside of the dmc stack, I’ve experimented with the contents of the callback, but no matter if the callback function is empty, returns an empty graph, or if I actually load the data and generate the correct graph, the result is always the same - an unresponsive application. I’m not sure if I’m simply missing something or not realising something very obvious, or if it’s a bug, but I would appreciate any help and advice!

Here is how my graph is added to the stack:

body_stats_chat = dmc.Stack(
    [
        html.Br(),
        dmc.Textarea(
            label="Enter your question:",
            id="question-text-stats",
            style={"width": 1350, "align": "center"},
            autosize=True,
            minRows=4,
        ),
        dmc.Button(
            "Submit",
            id="submit-btn-stats",
            leftIcon=DashIconify(icon="arcticons:openai-chatgpt"),
            style={"width": 1350, "align": "center"},
            color="blue",
        ),
        dcc.Loading(
            id="loading-answer-stats",
            type="dot",
            children=[
                html.H5(id="answer-label-stats"),
                html.Div(id="answer-text-stats"),
                html.Div(id="answer-table-stats"),
                dcc.Graph(id="stats-graph"),
                html.Br(),
            ],
            style={"width": 1350, "align": "left"},
        ),
        html.Br(),
    ]
)

And here is the structure of a callback I’m using:

@callback(
    Output('stats-graph', 'figure'),
    Input('question-text-viz', 'value'),
    Input('submit-btn-viz', 'n_clicks'))
def get_viz_answer(question, submit_btn):
    global answers, current_answer
    changed_ids = [p['prop_id'].split('.')[0]
                   for p in dash.callback_context.triggered]
    button_pressed = 'submit-btn-viz' in changed_ids
    if not button_pressed:
        return None
    df = pd.read_csv('data.csv')
    fig = px.bar(df, x="topic", y="value")
    return fig

Thank you!

2

Just needs a couple of small changes.

  1. Change IDs in callback so they correspond with IDs in layout
  2. return no_update not None from the callback when not button_pressed. For some reason I don’t understand, returning None just once (it happens on load) seems to stop the callback working on subsequent calls. (Or you could use State(‘question-text-viz’, ‘value’) rather than Input(…) if you want to take no action when it changes)
3

Thank you!

  1. Sorry this was a typo on my end, the IDs do actually match. But thank you for pointing that out, that would’ve definitely caused an issue.
  2. This helped, thank you so much! I usually return None for not button_pressed instances and never had this issue before so this is very odd but so helpful to know. Thank you!!
1 Like