imshow facet plots integrated in dash not preserving grid structure when number of elements is changed

[CarolineMagg]

Describe your context
Please provide us your environment, so we can easily reproduce the issue.

dash                              2.6.1
dash-bootstrap-components         1.2.1
dash-core-components              2.0.0
dash-html-components              2.0.0
dash-table                        5.0.0
jupyter-dash                      0.4.2

• if frontend related, tell us your Browser, Version and OS

  • OS: windows 10 pro
  • Browser Chrome and Microsoft Edge

Describe the bug

I am trying to integrate facet plots with imshow into a dash application with a variable number of elements. The number of subplots can be changed by user interaction, as in the following minimal example:

from dash import Output, Input
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from skimage import io

data = io.imread("https://github.com/scikit-image/skimage-tutorials/raw/main/images/cells.tif")
img = data[20:45:2]
img = img[0:4, :, :]
fig = px.imshow(img, facet_col=0, binary_string=True, facet_col_wrap=5)

app = dash.Dash()
app.layout = html.Div(children=[html.Div(id="container", children=dcc.Graph(id="figure", figure=fig)),
                                dcc.RadioItems(
                                    id="labels",
                                    options=[{"label": str(idx), "value": idx} for idx in range(12)],
                                    value=4)],
                      style={"height": "80%",
                             "width": "50%"})


@app.callback(
    Output("container", "children"),
    Input("labels", 'value')
)
def create_facet_plot(labels):
    data = io.imread("https://github.com/scikit-image/skimage-tutorials/raw/main/images/cells.tif")
    img = data[20:45:2]
    cols = int(labels)
    img = img[0:cols, :, :]
    fig = px.imshow(img, facet_col=0, binary_string=True, facet_col_wrap=5)
    return dcc.Graph(id="figure", figure=fig)


app.run_server(debug=True, use_reloader=False, port=8856)  # Turn off reloader if inside Jupyter

For the first call, the grid is as expected. When the number of facet elements is changed, the grid gets distorted and some individual elements are out of line. Depending on what the first setting is, different settings do not work as expected. The facet titles seem to work correctly, but the image subplots are not. Running the same code without dash, only with plotly in a jupyter notebook, the facet plot is always as expected. Thus, the error only occurs when the facet plot is integrated in a dash application. Based on the behavior, it seems that some internal rendering settings are not updated when the plot is generated again by the callback.

A quick test suggests that the same behavior does not occur with histograms and seems to be a problem with only imshow.

Expected behavior

Regular grid in facet plot when changing the number of elements in a dash application.

Screenshots
1st run:

first call with initially 6 elements - working

changing it to 4 - not working

2nd run (new call):

first call with initially 4 elements - working

changing it to 6 - not working

[ned2]

I recall struggling with this before, but cannot bring up the exact example.

Did you search the Dash forums for this? I found this thread which sounds similar and someone found a solution: https://community.plotly.com/t/resizing-issue-for-px-imshow-figure/70266

[CarolineMagg]

I already searched if someone had the same problem and found a solution for it, but so far I couldn't find anything.
If I change the margin of the figure, then in addition to the grid being messed up, also the facet titles are shifted, so this does not seem to work for my problem.

@ned2 Do you remember if you ended up finding a solution?

[alexcjohnson]

Thanks @CarolineMagg - I think this is a problem with updating a graph with multiple domain-constrained matching axes to include new domains. In some cases I think we're holding on to the old domains. axis.constrain mostly has a default of "range" but when there's an image trace its default is changed to "domain". I think this is a problem with plotly.js, rather than plotly.py or Dash.

To confirm this and help debug, the best next step would be to create a codepen where we Plotly.newPlot(gd, fig1).then(function() { Plotly.react(gd, fig2) }) where fig1 and fig2 both display correctly via Plotly.newPlot but fig2 shows this bug when we react to it after starting with fig1. We should be able to do that without the (data-intensive) images just by explicitly setting axis.constrain="domain" on a plot with some other trace type like a little scatter plot. And if my hunch is right, we can do this with a single subplot that's just supposed to move.

[ned2]

I haven't played with plotly.js directly before so don't have enough context to create that codepen @alexcjohnson, but I did do a little poking around with the Dash example, and learnt that the buggy behaviour only happens when the number of images to display is greater than facet_col_wrap value, and attempts to wrap onto the next row.

Here's a cleaned up version of the original example that's a little easier to work with. @CarolineMagg, something to note in particular is that pulling the io.imread(URL) call from outside the callback means the data only needs to be fetched and loaded once, rather than on every callback, making interaction much snappier.

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

URL = "https://github.com/scikit-image/skimage-tutorials/raw/main/images/cells.tif"
IMG = io.imread(URL)[20:45:2]
IMG_NUM = 12
WRAP_NUM = 6

app = Dash()
app.layout = html.Div(
    [
        html.Div(id="container"),
        dcc.RadioItems(
            id="num-img",
            options=[{"label": i, "value": i} for i in range(1, IMG_NUM + 1)],
            value=5,
        ),
    ],
)


@app.callback(Output("container", "children"), Input("num-img", "value"))
def create_facet_plot(num_img):
    img = IMG[0 : int(num_img), :, :]
    fig = px.imshow(img, facet_col=0, binary_string=True, facet_col_wrap=WRAP_NUM)
    return dcc.Graph(figure=fig)


if __name__ == "__main__":
    app.run_server(debug=True, port=8050)