Hello. I met this problem. I create a simple example.
from dash import dash
import plotly.io as pio
from dash import dcc
from dash.dependencies import Input, Output
import plotly.graph_objs as go
from dash import html
import dash_bootstrap_components as dbc
TEMPLATE_NAME = "plotly_dark"
pio.templates.default = "plotly_dark"
pio.templates[pio.templates.default].layout.plot_bgcolor = '#171921'
pio.templates[pio.templates.default].layout.paper_bgcolor = '#171921'
app = dash.Dash(
__name__, external_stylesheets=[dbc.themes.LUMEN],
meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"}],
title="test"
)
app.config["suppress_callback_exceptions"] = True
def create_app_layout():
return html.Div(
className="app-layout",
children=[
dcc.Tabs(id='view-tab', className='app-custom-tabs tabs',
value='a',
children=[
dcc.Tab(label='A', className='app-custom-tab tab',
selected_className='app-custom-tab--selected', value='a'),
dcc.Tab(label='B', className='app-custom-tab tab',
selected_className='app-custom-tab--selected', value='b')
]),
html.Div(id='view', className='view-container')
])
@app.callback([
Output('view', 'children')
],
Input('view-tab', 'value'),
)
def _prepare_data(view):
if view == 'a':
figure = go.Figure()
figure.add_trace(go.Pie(values=[0, 1, 2, 3, 4], labels=['a', 'b', 'c', 'd', 'e']))
graphs = [dcc.Graph(className='w45', figure=figure)]
return [html.Div(className='plots-container',
children=graphs)]
if view == 'b':
figure = go.Figure()
figure.add_trace(go.Pie(values=[10, 0.5, 5, 12, 4], labels=['aa', 'bb', 'cc', 'dd', 'ee']))
graphs = [dcc.Graph(className='w100', figure=figure)]
return [html.Div(className='plots-container',
children=graphs)]
return
app.layout = html.Div()
if __name__ == "__main__":
app.layout = create_app_layout()
app.run_server(debug=True, host='0.0.0.0', port=8050, dev_tools_hot_reload=False, use_reloader=False)
I just create two Tabs and change view-div children when changing tab. As you can see, a and b graphs have a different classnames(w45 for a, and w100 for b), but when i change tab classname of b graph doesn’t change, it’s still remains like the first tab.
A tab
B tab
What interested that content of Pie chart was updated, but classname of his parent are not. I don’t know why it work in this way because I update whole array of children instead specific dcc.Graph figure. I don’t know what i’m doing wrong.
I open React Dev Tools and saw that prop className was changed.
A tab
B tab
If I add to b-graph a id-field the problem disappeared but only for graph with id.
i think it means that problem may be with renderer, maybe some sort of things like cache or something similar.
I will be glad if you can help me. Thanks.