I am facing issues with a dcc.graph updating correctly when embedded inside dbc.Collapse in Dash 1.11.0. It works fine in Dash 1.10.0. I created a simple app to demonstrate the problem.
This is the behavior with 1.10.0:
This is the behavior with 1.11.0 (graph layout is all messed up):
Here is the app code:
# -*- coding: utf-8 -*-
import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.exceptions import PreventUpdate
import plotly.graph_objects as go
external_stylesheets = [dbc.themes.BOOTSTRAP]
ID_BUTTON_COLLAPSE='id-button'
ID_COLLAPSE='id-collapse'
ID_LOADING='id-loading'
ID_GRAPH='id-graph'
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
graph = dcc.Loading(
dcc.Graph(
id=ID_GRAPH,
), id = ID_LOADING
)
app.layout = dbc.Container(children=[
dbc.CardHeader([
dbc.Row([
dbc.Col([
dbc.Button(
id=ID_BUTTON_COLLAPSE,
children = ['click to open'], size='lg'
)
], width=2)
])
]),
dbc.Collapse(dbc.CardBody([graph]), id=ID_COLLAPSE, is_open=False)
])
@app.callback(
Output(ID_GRAPH, 'figure'),
[Input(ID_COLLAPSE, 'is_open')]
)
def button_text_callback(is_open):
if not is_open:
raise PreventUpdate
data = []
data.append(go.Scatter(x=[1, 2, 3], y=[4, 1, 2], mode='lines', name='SF'))
data.append(go.Scatter(x=[1, 2, 3], y=[2, 4, 5], mode='lines', name=u'Montréal'))
figure = dict(data=data)
return figure
@app.callback(
Output(ID_BUTTON_COLLAPSE, 'children'),
[Input(ID_COLLAPSE, 'is_open')]
)
def button_text_callback(is_open):
return ['click to open'] if is_open is False else ['click to close']
@app.callback(
Output(ID_COLLAPSE, 'is_open'),
[Input(ID_BUTTON_COLLAPSE, 'n_clicks')],
[State(ID_COLLAPSE, 'is_open')]
)
def toggle_collapse_callback(n, is_open):
if n:
return not is_open
return is_open
if __name__ == '__main__':
app.run_server(debug=True)