Plotly figure cropped with JupyterLab 4.0.0a30

[jtpio]

Description

Reporting here since this is an issue with JupyterLab 4 but not with 3:

4.0.0a30

3.4.7

Reproduce

1. pip install plotly pandas
2. Open JupyterLab
3. Run a cell with the following content:

import plotly.express as px
fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
fig.show()

Expected behavior

The figure should be displayed correctly.

Context

• Operating System and version: Fedora 36
• Browser and version: Firefox 105
• JupyterLab version: 4.0.0a30

cc @fcollonval who might know if that could be related to the virtual notebook changes

[fcollonval]

@jtpio does it resize after a certain delay or not? Because at first the plotly height is small as it displays here (I saw that in the integration tests).

[jtpio]

No it does not seem to resize, even when resizing the window or triggering changes:

plotly-figure-cropped.mp4

[fcollonval]

Thanks for the screencast.

[fcollonval]

I can confirm this is still happening on master

I think the reason is that the CSS rule applied is:

In CSS 2, the effect of min-height and max-height on tables, inline tables, table cells, table rows, and row groups is undefined.

coupled to the current set of CSS rule:

Setting height instead of min-height works but I think it needs to be applied upstream.

---

ref: https://drafts.csswg.org/css2/#min-max-heights

The switch to table layout was done in #11508

[jtpio]

Update: this was fixed in plotly/plotly.py#4227.

We can keep the issue open until there is a new release with the fix.

[jtpio]

Closing as it is now fixed with Plotly 5.15.0: https://github.com/plotly/plotly.py/releases/tag/v5.15.0