Plugin extension development: adding a widget to 'header' area of JupyterFrontEnd.IShell does not make the area visible

JupyterLab
,
1

Hello. I hope this is a simple question to answer :grin: I am working on a jupyter lab plugin application extension. One of the things my plugin must do is to show some information in the ‘header’ area. I created a widget to show this information and added it to the JupyterFrontEnd.IShell like this:

app.shell.add(statusWidget, 'header');

This doesn’t show anything, and I get no errors, but if I do this:

app.shell.add(statusWidget, 'bottom');

…it shows my widget on top of the JupyterLab status bar… Now, if I could get the same widget displaying at the ‘header’ or below the menu bar, it would be exactly what I need, but I could not find documentation or examples how to do this.

I’m fairly new to JupyterLab and any kind of web-based UI development, so any help/pointers would be much appreciated.

Regards and thanks for reading this! :pray:

2

Can you look in the browser debugger at the HTML and see if your widget is actually in the html of the page? Right-click on the header area and click “inspect element”, or open the html inspector and search for some text that would identify your widget.

3

image
image709×369 16.3 KB

Very good suggestion! that revealed some interesting information :+1:

So it seems my widget is there, in the jp-header-panel but… the panel:

  1. Has a height of 0px and
  2. Is sharing the same position as the jp-top-panel

I guess either or both of those two points could be reason enough for it not to show? :thinking:

Can I change the header panel position? Or its height?

4

Posting the full snippet in case it makes things clearer

    const statusBar = new StatusBar();
    statusBar.id = 'lab-statusbar';

    const statusWidget = new Widget();
    statusWidget.node.textContent = 'wonderful to be here';
    statusBar.registerStatusItem('status text', {
      align: 'middle',
      item: statusWidget
    });      

    const button = new ToolbarButton({
      label: 'click me!',
      enabled: true,
      onClick: (): void => {
        console.log('Click, click!');
      },
      tooltip: 'does not do much yet',
    });
    
    const toolbar = new Toolbar<Widget>();
    toolbar.id = 'status toolbar';
    toolbar.addItem('button to do things', button);
    
    statusBar.registerStatusItem('status toolbar', {
      align: 'right',
      item: toolbar
    });

    app.shell.add(statusBar, 'header');
    app.shell.activateById(statusBar.id);
5

Jeremy pointed out this might be a known issue: https://github.com/jupyterlab/jupyterlab/issues/7279

6

I’m diving into this more in depth in the issue: https://github.com/jupyterlab/jupyterlab/issues/7279

7

Fix up at the issue: https://github.com/jupyterlab/jupyterlab/issues/7279

Basically, for now set a min-height for the header region. I put in a PR that lets you just set a min-height for your widget instead.

8

Hello again, Jason. Thanks very much for looking into this. I now understand the problem, and also have looked at the PR you made. I also looked at the original problem (https://github.com/jupyterlab/jupyterlab/issues/7279) and your explanations there, and I have posted some more questions there (trying to figure “where to post what” here!)

9

A quick update. I managed to show the header by setting the #jp-header-panel from a theme extension :partying_face: I’m veeeeeery happy!
Many thanks again for your help.
Marta