Issue with dark/light mode and the graphics in mobile version

[RoniAlvesArt]

Description

When we change the light/dark mode on mobile version one of the graphics disappears, like you can see in the gif.

I saw this erro following this tutorial -> https://www.youtube.com/watch?v=wmQ6_GZ0zSk

Expected behavior

We expect both graphics to remain on the screen.

Which package?

vizro

Package version

0.1.17

Python version

3.12.2

OS

Windows

How to Reproduce

1. Install Python, Dash, Pandas and Vizro with the 'pip install'
2. Execute the app above with 'py _filename.py'

Code:

import vizro.plotly.express as px
from vizro import Vizro
import vizro.models as vm

df = px.data.iris()
print(df.head())

page = vm.Page(
    title="My first dashboard",
    components=[
        # components consist of vm.Graph or  vm.Table
        vm.Graph(id="scatter_chart", figure=px.scatter(df, x="sepal_length", y="petal_width", color="species")),
        vm.Graph(id="hist_chart", figure=px.histogram(df, x="sepal_width", color="species")),
    ],
    controls=[
        # controls consist of vm.Filter or vm.Parameter
        # filter the dataframe (df) of the target graph (histogram), by column sepal_width, using the dropdown
        vm.Filter(column="sepal_width", selector=vm.Dropdown(), targets=["hist_chart"]),
    ],
)

dashboard = vm.Dashboard(pages=[page])

Vizro().build(dashboard).run()

Output

No response

Code of Conduct

• [X] I agree to follow the Code of Conduct.

[Joseph-Perkins]

thank you @RoniAlvesArt for identifying, and raising with such a clear explanation and gif!

we will investigate to identify the underlying cause, and will revert asap with any potential fix 👍

[antonymilne]

Great bug report indeed @RoniAlvesArt, thank you very much!

Any ideas here @huong-li-nguyen?

[huong-li-nguyen]

From what I can see, a combination of two factors causes it:

1) In mobile, we change to a flexbox layout 2) After the theme switch, the charts do not persist their heights (I am not sure what this is caused by)

Because of these two, the two charts overlap after changing the theme, as one chart gets reduced to 0px in height. That's why you see the two-mode bars below each other and one chart disappearing. However, if you refresh the page, everything seems fine even after the theme switch.

I think the next step would be to check if this behaviour can be observed in a standard dash app as well, as I am not sure what causes the second point.

[huong-li-nguyen]

It's fixed in this PR: https://github.com/mckinsey/vizro/pull/511

Should be part of our next release, which will be soon :)