Seeking Solution: Displaying Figure Before Markdown in Dash App

Dash Python
1

I developed a Dash app with figure and markdown components. The aim is to annotate figures using markdown. However, the figure lags behind and markdown shows first, even after wrapping the figure and markdown components in a Loading component. Need help to display the figure before markdown.

2

Hi @edak welcome to the community!

If you can separate the figure update and markdown update into two callbacks, you could chain the callbacks so that the figure update triggers the markdown update. The time.sleep() ist just for demonstarting that the Markdown is updated after the figure and not necessary

from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import numpy as np
import time

app = Dash(__name__)

app.layout = html.Div(
    html.Div(
        [
            html.Button(id='btn', children='click'),
            dcc.Graph(id='graph', figure={}),
            dcc.Markdown(id='md')
        ],
    )
)


@app.callback(
    Output('graph', 'figure'),
    Input('btn', 'n_clicks'),
    prevent_initial_call=True
)
def show(_):
    return px.imshow(np.random.randint(0, 255, size=(20, 20)))


@app.callback(
    Output('md', 'children'),
    Input('graph', 'figure'),
    prevent_initial_call=True
)
def show(_):
    time.sleep(1)
    return "Markdown has been updated"


if __name__ == '__main__':
    app.run()
3

@AIMPED thank you for the response. I will implement your solution

4

Hello @edak, In case you have a lot of users, I would recommend using ‘clientside_callback’

If I understand you correctly, try to use dcc.Loading (link)

anim1

1 Like
5

Thank you @zaphire121.

I used dcc.Loading, yet the problem persists

6

Hello @edak,

I think @zaphire121 may be on to something. Did you try wrapping both the markdown and the graph in a dcc.loading? The same one.

dcc.Loading([markdown, graph])

Also, if you are just using words like that, did you consider just titling the graph with the words you are placing?

7

Here’s what I did:

dcc.Loading([graph, markdown ])