Auto sizing a single axis not properly handled

[mneilly]

Describe your context

Plotly 5.11.0 Dash 2.7.0 Python 3.10

Dockerfile:

FROM debian:bullseye
RUN apt update && apt install -y --no-install-recommends python3 python3-pip
RUN pip install plotly==5.11.0 dash==2.7.0 dash-bootstrap-components==1.2.1 pandas==1.5.2
COPY swap_charts.py /tmp
EXPOSE 8050
CMD python3 /tmp/swap_charts.py

Describe the bug

My application is a simple report editor which is a column of charts and markdown where each chart or markdown can be selected and moved up or down in the column. To move charts up and down I have a callback which swaps adjacent children in the containing element.

When both the width and height of a chart are set to explicit sizes or when they are both None the swap works fine. When the height is set and width is None (so that width is auto sized), the swap results in swapped charts but sizes remain as they were.

The following is the mwe for the problem:

import json
from random import randint

import dash
from dash import Dash, dcc, html, Output, Input, State
import plotly.express as px

@dash.callback(
    Output("chart-container", "children"),
    Input("swap-button", "n_clicks"),
    State("chart-container", "children"),
    prevent_initial_call=True,
)
def update_chart(unused, charts):
    """Swap pairs of charts"""
    charts[0], charts[1] = charts[1], charts[0]
    charts[2], charts[3] = charts[3], charts[2]
    return charts

def layout():
    """Create 2 charts with height and 2 charts with width and height"""
    graphs = []
    for i in range(4):
        fig = px.bar(
            x=list(range(5)),
            y=[randint(1, 10) for _ in range(5)],
            title=f"Chart {i}"
        )
        width = 400 if i > 1 else None
        fig.update_layout(height=200*(i%2 + 1), width=width)
        graphs.append(dcc.Graph(figure=fig))

    chart = html.Div(children=graphs, id="chart-container")
    button = html.Button("Swap", id="swap-button")
    layout = html.Div([chart, button])

    return layout

if __name__ == "__main__":
    app = Dash()
    app.layout = layout()
    app.run_server(host="0.0.0.0", debug=True)

The following image shows the original order and sizes of the charts. Charts 0 and 2 have a height of 200px while charts 1 and 3 have a height of 400px. Charts 0 and 1 have a width of None while charts 2 and 3 have a width of 400px.

Swapping charts 0 and 1 and charts 2 and 3 results in correct sizes for charts 2 and 3 but the wrong sizes for charts 1 and 0. Although charts 1 and 0 are swapped, their sizes are not.

Expected behavior

When swapping child elements containing plotly charts the proper sizes should be retained.

[mneilly]

Another example that inserts a new child chart which results in a change to the height of the existing chart.

import json
from random import randint

import dash
from dash import Dash, dcc, html, Output, Input, State
import plotly.express as px

@dash.callback(
    Output("chart-container", "children"),
    Input("insert-button", "n_clicks"),
    State("chart-container", "children"),
    prevent_initial_call=True,
)
def update_chart(unused, charts):
    """Insert a new chart"""
    fig = px.bar(
        x=range(5),
        y=[randint(1, 10) for _ in range(5)],
        title=f"Chart 1"
    )
    fig.update_layout(height=400, width=None)
    graph = dcc.Graph(figure=fig)
    charts.insert(0, graph)
    return charts

def layout():
    """Create layout with 1 chart and insert button"""
    fig = px.bar(
        x=range(5),
        y=[randint(1, 10) for _ in range(5)],
        title=f"Chart 0"
    )
    fig.update_layout(height=200, width=None)
    graph = [dcc.Graph(figure=fig)]

    chart = html.Div(children=graph, id="chart-container")
    button = html.Button("Insert", id="insert-button")
    layout = html.Div([chart, button])

    return layout

if __name__ == "__main__":
    app = Dash()
    app.layout = layout()
    app.run_server(host="0.0.0.0", debug=True)