Panel and SplitPanel do not always render initially

[fleming79]

The example is running from recent WinPython distribution (Jupyterlab 4.0.4), but the same issue happens for me using a conda dev environment running on WSL. The JupyterLite example works correctly, but everywhere else I've tried this has similar behaviour to that shown below.

Running through widgets.ipynb from the examples folder code. The panels appear, but the contents do not show up.

Dragging the panels about can make the contents appear.

[fleming79]

It looks like it may be related to JupyterV4.# as it displays correctly with V3.

[jtpio]

Thanks @fleming79 for investigating.

Not sure what changed in JupyterLab 4 that would cause this issue. Maybe there is something relevant in https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#jupyterlab-3-x-to-4-x, and we need to update ipylab accordingly?

[fleming79]

I think it might be related to the error "Uncaught (in promise) TypeError: MathJax.Hub is undefined"

split_panel.ts line 139:

[fleming79]

It looks like JupyterLab 4 switched to MathJax3 (jupyterlab/jupyterlab#13877).

Looking in the source for ipywidgets ipywidgets/packages/controls/src/utils.ts the function typeset hasn't been upgraded to work with MathJax3. source here.

export function typeset(element: HTMLElement, text?: string): void {
  if (text !== void 0) {
    element.textContent = text;
  }
  if ((window as any).MathJax !== void 0) {
    MathJax!.Hub!.Queue(['Typeset', MathJax.Hub, element]);
  }
}

The mathJax upgrade notes here explain that Mathjax.Hub has" been removed entirely" which is why the error occurs.

[jtpio]

So maybe it should be fixed in ipywidgets directly?

[matthewturk]

Hi! We are also seeing this with the simplest IntSlider panel as well, although the MathJax error isn't showing up (that we can see, at least.) We did see some errors about Error setting state and t.on is not a function (which I think is not the cause, albeit potentially related) but the machine they were reported on is inaccessible to me right now, and I'll do a proper debugging and send the full info ASAP.

[erkin98]

i thinks it;s related to CSS or layout, so if you set css through Layout it should do the work

[pierre-yv]

Hi, I am facing the same issue but I have no console error of any kind. I can add to all of this:

• When created, the div element corresponding to the panel has not height or width set, then it does not show.
• When moving it around it acquires it's sizing properties and displays properly
  But there are caveats:
• The positioning is not right (part of the panel comes bellow the tabs)
  • I can see it get width and height but not min-width, min-height, top, and left`
• The panel is not styled as an active tab (blue line on top)

[brian-from-quantrocket]

I experienced this issue as well but worked around it by moving the Panel creation logic into a JupyterLab extension and only using ipylab to call a command to run the extension from a notebook.

    app = JupyterFrontEnd()

    app.commands.execute('my-command', {
        'arg1': arg1,
        'arg2': arg2,
        'insertMode': 'tab-after',
    })

Since ipylab is intended as a bridge between notebooks and the JupyterLab UI, this keeps the bridge as short as possible.

It won't work for every use case (e.g. if you're using ipywidgets in your Panel).

[matthewturk]

This may be a dead issue now, but I was still seeing it and I was able to fix it with:

view = w.children[0].children[1]

p = ipylab.Panel(children = [view])
p.layout.min_height = '100%'
p.layout.width = '100%'
app.shell.add(p, 'main')

This works for my particular use case, but may not for others. I was finding that when using 'split-right' it was placing the widgets on the far left side, with a very small width. I assume there is some nested style or display issue going on, but I wasn't able to identify the origin.