Header area not showing

[jtpio]

Description

The header area doesn't seem to be shown when adding widgets to it from a third-party extension.

Reproduce

Example code:

function activate(app: JupyterFrontEnd) {
  let logo = new Widget();
  logo.addClass('jp-MainAreaPortraitIcon');
  logo.addClass('jp-JupyterIcon');
  logo.node.style.height = "28px";
  logo.id = 'jp-MainLogo-header';
  app.shell.add(logo, 'header');
};

Or at: https://github.com/jtpio/potatoes/blob/421fdafe8658df1a3d7eb2a6b9c446ea16cce855/header-logo/src/index.ts#L13-L20

Expected behavior

Actual behavior

Context

• Operating System and version: Ubuntu 19.04
• Browser and version: Firefox 69
• JupyterLab version: 1.1.4

[meeseeksmachine]

This issue has been mentioned on Jupyter Community Forum. There might be relevant details there:

https://discourse.jupyter.org/t/plugin-extension-development-adding-a-widget-to-header-area-of-jupyterfrontend-ishell-does-not-make-the-area-visible/3682/5

[jasongrout]

The reason the top bar shows up is that we explicitly set a min height for it:

jupyterlab/packages/application/style/base.css

Line 38 in 0731248

min-height: var(--jp-private-menubar-height);

[meeseeksmachine]

This issue has been mentioned on Jupyter Community Forum. There might be relevant details there:

https://discourse.jupyter.org/t/plugin-extension-development-adding-a-widget-to-header-area-of-jupyterfrontend-ishell-does-not-make-the-area-visible/3682/6

[jasongrout]

So, it looks like you could follow what the top area does and just set a min-height for the jp-header-panel:

#jp-header-panel {
  min-height: 30px; /* or whatever */
}

That isn't a very satisfying solution, but will work with what we have now. For the future, I suggest we change the header to a box panel, like the bottom area is already, and then you'd be able to just set a min-height for the widget you are adding, and the header will automatically see that and adjust its size to fit it.

[jasongrout]

For the future, I suggest we change the header to a box panel, like the bottom area is already, and then you'd be able to just set a min-height for the widget you are adding, and the header will automatically see that and adjust its size to fit it.

I did this in #8059.

[meeseeksmachine]

This issue has been mentioned on Jupyter Community Forum. There might be relevant details there:

https://discourse.jupyter.org/t/plugin-extension-development-adding-a-widget-to-header-area-of-jupyterfrontend-ishell-does-not-make-the-area-visible/3682/7

[machafulla]

So, it looks like you could follow what the top area does and just set a min-height for the jp-header-panel:

#jp-header-panel {
  min-height: 30px; /* or whatever */
}

That isn't a very satisfying solution, but will work with what we have now. For the future, I suggest we change the header to a box panel, like the bottom area is already, and then you'd be able to just set a min-height for the widget you are adding, and the header will automatically see that and adjust its size to fit it.

I understand that this would fix the issue, but I don't know how to do this from the application plug-in extension. I can see that e.g. #jp-bottom-panel is defined in <jupyterlab_1.2.6>\packages\application\style\base.css, and there's no definition for #jp-header-panel... can I just set #jp-header-panel as you say somewhere in the extension and it would be used? I have seen that there are extensions to modify the JupyterLab theme... maybe I should take a look at those 😀

In any case, thanks for the explanations so far!

[meeseeksmachine]

This issue has been mentioned on Jupyter Community Forum. There might be relevant details there:

https://discourse.jupyter.org/t/plugin-extension-development-adding-a-widget-to-header-area-of-jupyterfrontend-ishell-does-not-make-the-area-visible/3682/8

[machafulla]

For the future, I suggest we change the header to a box panel, like the bottom area is already, and then you'd be able to just set a min-height for the widget you are adding, and the header will automatically see that and adjust its size to fit it.

I did this in #8059.

That was a very near future indeed!

[machafulla]

I understand that this would fix the issue, but I don't know how to do this from the application plug-in extension. I can see that e.g. #jp-bottom-panel is defined in <jupyterlab_1.2.6>\packages\application\style\base.css, and there's no definition for #jp-header-panel... can I just set #jp-header-panel as you say somewhere in the extension and it would be used? I have seen that there are extensions to modify the JupyterLab theme... maybe I should take a look at those 😀

In any case, thanks for the explanations so far!

Yes that did it! 🎉