How to add Widget to an arbitrary HTMLElement?

JupyterLab
,
1

Hello,

I am trying to implement a custom Widget and put it on top of the Notebook widget in the main area. My current approach is to insert a new DIV element to the NotebookPanel element and give it position:absolute. I want to reuse some existing JupyterLab widgets, but from online resources I can only find ways to add them into some specific positions (left, right sidebars, main area, etc.).

I am wondering what’s the best way to add a Widget to an arbitrary HTMLElement? Some approaches I can think of:

  1. Insert the widget’s node into the new HTMLElement, but I think I will lose all data/model/event handlers associated with the widget :frowning_face:
  2. Convert the HTMLElement into an instance of Layout and then add the widget into it? If this is a promising approach, is there any tutorial/example for creating new Layouts?

Any suggestions are appreciated! Thank you in advance! :pray:

Jay

2

Are you trying to achieve something like this:

header-toggle-wording

which was implemented in API for custom toolbars/headers in Notebook widgets by fasiha · Pull Request #9984 · jupyterlab/jupyterlab · GitHub?

If yes, see the example in this comment. If that’s useful for you, it would be a very valuable addition to the extension developement documentation (and helpful for anyone using it by ensuring that developers do not forget about this feature ;)).

3 Likes
3

Thanks for the suggestion Michał! I’ve created a PR in the extensions-example repo to add this!

1 Like
4

Im looking to add content above the entire Lab interface (above the the menu toolbar and above the the topmost header that show notebook name when in Simple view). I read through the above referenced PR comments and am still confused how to access the topmost area.

Is it the area ‘header’ as in:

execute: () => {
const widget = new ExampleWidget();
shell.add(widget, ‘header’);
},

Would the above add a widget above the menu bar and the notebook name in Simple mode?

5

widget above the menu bar and the notebook name

The header is the “simple” notebook name, etc. At present there is nothing above it.

You can probably cheat and use the rootLayout directly, with e.g.

const widget = new ExampleWidget();
const rootLayout = (app.shell as any).layout as BoxLayout;
rootLayout.insertWidget(0, widget);
2 Likes