Custom widget as MainAreaWidget

I would like to develop a custom widget that can be displayed in a MainAreaWidget, not only as a notebook output cell.

When I follow the Astronomy-Picture-Of-The-Day tutorial, a MainAreaWidget is created with a Widget as it’s content.

On the contrary, the Custom Widget tutorial Building a Custom Widget - Email widget — Jupyter Widgets 8.0.6 documentation implements the EmailView widget derived from DOMWidgetView, which has no inheritance relationship with lumino’s Widget.

How can I display such a custom widget inside a MainAreaWidget? It may be very simple, and I don’t see the forest for the trees. If so, I’d appreciate if you outline the steps how to initialize the MainAreaWidget to show the DOMWidgetView, or if you can point me to some example where this is done.

Thank you

A DOMWidgetView (as a subclass of WidgetView) creates its own .luminoWidget which is what gets added to the hierarchy of lumino widgets to efficiently handle resizing, etc.

To make a single widget that can live in multiple places, an implementation would make a single lumino widget which can be attached to multiple parents.

A technique used in the past for this is an internal facade around “the evented data,” which can be excited by a DOMWidgetModel or, for example, a IRenderMime.IModel or IContentsManager.IModel. In this case, a package would end up with a MyWidgetView, MyMainAreaWidget, MySidebarWidget, etc. that just wires up the adapter, and then a single MyWidget which actually does all rendering. It then usually makes sense to create these as separate plugins, and if there is extra dirty state, potentially another plugin to act as the interface to other lab extensions (e.g. settings).

At some point, perhaps now that JupyterLab 4 is out, it would be nice to extend one of the cookiecutters (or the new copier pattern, which better supports updates/modifications) to include this kind of pattern, as it greatly expands the flexibility of a widget without adding too much complexity (certainly less than n separate packages). Unfortunately, the best example I can point to is quite involved :crying_cat_face: .

1 Like