Show a floating panel in JupyterLab

As a feature of my extension, I want to show a floating panel(like a pop-up dialog) that contains a few widgets(think of a form with some input fields) when I click a button in my extension’s base panel. I checked the options of DockPanel, Panel and BoxPanel but couldn’t figure out how to achieve this. Can someone let me know if it’s possible to show such custom floating panels and if yes, then how do I implement that?

As an explicit design choice, there are no stock lumino layouts that will create an independently draggable window. Part of this is that it demands a whole separate layer of concerns for keyboard navigation and window layout restoring.

However, an extension has full access to do whatever it needs to the underlying DOM, and as such could basically whatever is needed.

For example, jupyterlab-tour uses react-floater to put on-demand popups on the page, but these are not draggable, but have good keyboard reactivity.

1 Like

Thanks for the update @bollwyvl. I am currently leveraging the Dialog class to embed custom widget in the dialog body so that it gives a feel of floating window/form.

Sticklyand does some cool magic with floating widgets: GitHub - xiaohk/stickyland: Break the linear presentation of Jupyter Notebooks with sticky cells!

2 Likes