Possible dbc.Collapse bug in Dash 1.11.0

@chander wrote:

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:

behaviore_with_dash_1_10_0990×533 18.7 KB

This is the behavior with 1.11.0 (graph layout is all messed up):

behaviore_with_dash_1_11_01018×281 3.56 KB

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)

Posts: 1

Participants: 1

Read full topic