Reputation: 5929
I am developing a Dash app which will display a large table of data. However, because the table is so large, it takes a while to load the first time the app is opened on a given run; while it is loading, an empty chart axis is shown instead.
While loading, it looks like this:
This seems very jarring since the view changes entirely once the table itself loads. Once it's thought for a moment, this is what's shown instead:
Is there some way to stop the temporary chart appearing? Maybe do something like replace it with a temporary "We'll be with you in a moment!" kind of message?
If it's helpful, this is the code I used to produce the above screenshots:
import pandas as pd
import plotly.graph_objects as go
import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
d = {
'A scores': [100, 90, 80, 90],
'B scores': [95, 85, 75, 95],
'C scores': [75, 60, 65, 70]
}
df = pd.DataFrame(data=d)
def display_table(min_a_score=0):
filtered_data = df[df['A scores'] >= min_a_score]
fig = go.Figure(
go.Table(
header=dict(
values=filtered_data.columns,
align="left"
),
cells=dict(
values=[filtered_data[x].tolist() for x in filtered_data],
align='left'
)
)
)
return fig
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Slider(
id='score-slider',
min=10,
max=100,
step=10,
value=0,
marks=dict(zip(range(0, 110, 10), [f"{x} marks" for x in range(0, 110, 10)])),
),
dcc.Graph(id="scores-table")
])
@app.callback(
Output("scores-table", "figure"),
[Input("score-slider", "value")]
)
def display_filtered_table(min_a_score):
fig = display_table(min_a_score)
return fig
if __name__ == '__main__':
app.run_server(debug=True)
Upvotes: 2
Views: 2271
Reputation: 35275
There may be a way to control the display of the initial graph, but if you set an empty graph and designate it as the initial graph, unnecessary graphs will not be displayed.
fig = go.Figure(data=[go.Table(
header=dict(values=['A Scores', 'B Scores']),
cells=dict(values=[[],[]])
)])
app.layout = html.Div([...
dcc.Graph(id="scores-table", figure=fig)
])
Upvotes: 1
Reputation: 5929
On recommendation of a friend, I added a dcc.Loading()
component wrapping the dcc.Graph()
call.
That is, I replaced the line
dcc.Graph(id="scores-table")
in the app.layout bit with
dcc.Loading(
id="loading-1",
children=[dcc.Graph(id="scores-table")],
type="circle"
)
This means that instead of showing the empty axes, it shows a rotating circle suggesting progress is happening:
Upvotes: 2