Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] UI components not updating from dash_table connected callback #1071

Closed
tsiq-bertram opened this issue Jan 8, 2020 · 1 comment
Closed
Milestone

Comments

@tsiq-bertram
Copy link

Describe your context

dash                 1.7.0
dash-core-components 1.6.0
dash-html-components 1.0.2
dash-renderer        1.2.2
dash-table           4.5.1
  • macOS Catalina Version 10.15.2
  • Chrome Version 79.0.3945.88

Describe the bug

The issue is not apparent in dash 1.6.1, but appeared in 1.7.0.
For certain callback graphs, UI components with callbacks connected to a dash_table will not update their state.

Example callback graph and code:
dash_callback_graph

import dash
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output
import random


app = dash.Dash(__name__)
app.layout = html.Div(
    [
        html.Div(id="level-1_1"),
        html.Div(id="level-1_2"),
        html.Div(id="level-2_1"),
        html.H1(id="level-2_2"),
        html.Button("Update", id="button"),
        dash_table.DataTable(id="table"),
    ],
)


@app.callback(
    # Changing the order of outputs here fixes the issue
    [Output("level-1_2", "children"), Output("level-1_1", "children")],
    [Input("button", "n_clicks")],
)
def level1(n_clicks):
    if n_clicks is None:
        return "initializing", "initializing"
    return "level-1_2", "level-1_1"


@app.callback(
    Output("level-2_1", "children"), [Input("level-1_1", "children")],
)
def level2_1(data):
    if data is None:
        return "initializing"
    return "level-2_1"


@app.callback(
    Output("level-2_2", "children"),
    [Input("level-1_2", "children"), Input("table", "selected_cells")],
)
def level2_2(data, selected_cells):
    if data is None:
        return "initializing"
    return "hello " + str(random.randint(0,100))

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

Expected behavior

The UI displays the H1 element with "hello" and a random number. When clicking the "Update" button, the H1 element will be updated.

Actual behavior and investigation

The H1 UI element nondeterministically displays either "hello XX" or "initializing" (see screenshot below) on startup. Clicking the update button does not change the H1 element. This is despite the browser receiving the correct callback response from the backend on _dash-update-component, e.g.

{"response": {"props": {"children": "hello 65"}}}

The issue only occurs with the dash_table connected as input to the callback (independent on using selected_cells or another attribute).
Changing the order of outputs in the first callback above (see comment), or removing the seemingly unrelated callback for Div 2_1 also make the issue disappear.

Looking at the differences between 1.6.1 and 1.7.0, this might potentially be related to changes in
#1027.

Screenshots
initializing

@alexcjohnson
Copy link
Collaborator

Confirmed, thanks for the clear report @tsiq-bertram
I wonder if this is related to #1053 - anyway I'm reworking the whole callback dispatching machinery as part of wildcards #475 so will try to sort this out as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants