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

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:

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.


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?

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);

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

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

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.

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!)

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