plotly / plotly/dash

Provide mechanism to determine whether initial app render has completed

Open
#1,467 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

feature P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

Is your feature request related to a problem? Please describe.
Not a problem per se - I just have a callback that looks at its Input triggers in order to determine what to render.

When the app initializes/boots up for the first time, it cannot render the appropriate contents because it is looking for a specific trigger that doesn't exist at that particular moment. This only occurs upon the initialization of the app. So in my case, a Datatable would not be rendered in a tab output until I navigated to a different tab and returned back to the original tab.

In other words, is there a better way to determine if the app is running its initial sequence of callbacks?

Describe the solution you'd like
It would be interesting to see some sort of prop that would allow us to know whether if the app has just started up.

Describe alternatives you've considered
After consulting @Marc-Andre-Rivet and @rpkyle, a stop-gap solution was to use State("anom-overview-list", "derived_viewport_indices") (anom-overview-list is the id for the Datatable in this context). It was determined that an empty Datatable did exist upon the initialization of the app, so if the length of the derived viewport indices were zero, then it was a hack-y way knowing if the app just started up or not.

Additional context
I have created a simple example that emulates this issue: In this GIF, we can see when the app starts, we are unable to see anything under the default tab, Tab 1. If we navigate to Tab 2 and return to Tab1, we are then finally able to see what should have been rendered in the first place:

example

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Tabs(
            id="tabs-example",
            value="tab-1",
            children=[
                dcc.Tab(label="Tab 1", value="tab-1"),
                dcc.Tab(label="Tab 2", value="tab-2"),
            ],
        ),
        html.Div(id="tabs-example-content"),
    ]
)


@app.callback(
    Output("tabs-example-content", "children"), [Input("tabs-example", "value")]
)
def render_content(tab):
    ctx = dash.callback_context
    if ctx.triggered:
        triggered_props = [tx["prop_id"] for tx in ctx.triggered]
    else:
        triggered_props = []
    tab_changed = "tabs-example.value" in triggered_props
    if tab == "tab-1" and tab_changed:
        return html.Div(
            [html.H3("REAL TAB 1 CONTENT THAT DID NOT SHOW UP UPON APP INITIALIZATION")]
        )
    elif tab == "tab-2":
        return html.Div([html.H3("Tab content 2")])


if __name__ == "__main__":
    app.run_server(port=8070, debug=True, threaded=True)



Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the supplied two-tab example and inspect dash.callback_context during the initial callback. Trace the initialization behavior around the callback entry point; done means a reliable mechanism lets an app determine whether its initial render sequence has completed and prevents the default tab content from being skipped.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.