Problem with split panel on Mac

[kolibril13]

In JLab Version 4.1.8, on Mac I get a bug when running the below script:

from ipylab import JupyterFrontEnd, SplitPanel
from ipywidgets import IntSlider

app = JupyterFrontEnd()

split_panel = SplitPanel()

slider_ctrl = IntSlider(min=0, max=100, step=1, description='Slider Control:',)


# add the widgets to the split panel
split_panel.children = [
    slider_ctrl
]

app.shell.add(split_panel, 'main', { 'mode': 'split-right' })
split_panel

split_panel.title.label = 'A SplitPanel'
split_panel.title.icon_class = 'jp-PythonIcon'
split_panel.title.closable = True
split_panel.orientation = 'vertical'

The panel just stays grey when I run the script.
Only when I move the panel to the left or when I zoom in and out the widget appears.

That happens both in google chrome and in safari on local jupyter.

Screen.Recording.2024-06-06.at.22.48.33.mov

Interestingly, this bug does not occur when running this script on https://ipylab.readthedocs.io/en/latest/lite/lab/?path=widgets.ipynb

[shb84]

Just echoing the same experience on Mac (widget only appears after zooming in/out). In addition, there seems to be an inconsistency with where the first widget in children is displayed. With split-bottom the widget is displayed where one would expect but, with split-right, it is incorrectly displayed (see below).

[psychemedia]

In Chrome on a Mac, JL 4.1.8, trying to render the simple slider widget in a panel of its own as per the demo fails for me:

The "render into the top bar" seems to work okay.

[jtpio]

We looked at this issue with @kolibril13 today during the PyData Paris 2024 sprints.

I can also reproduce it locally with JupyterLab 4 on Ubuntu in Chrome:

ipylab-splitpanel-issue.webm

But it seems to be working fine with JupyterLab 3. So it's likely caused by a change in JupyterLab 4, or in Lumino 2 (since JupyterLab 4 uses Lumino 2), that we would need to handle here in ipylab.

[jtpio]

If someone would like to look into this issue, that would likely require checking the use of the SplitPanel in the ipylab code base, and see if some CSS needs to be added or tweaked to be compatible with the latest JupyterLab 4 and Lumino 2.