Toolbar buttons are added to the right of the kernel selector widget

[matthewgasbarro]

trafficstars

Description

In notebook 7, when buttons are added to the toolbar and specified to be added after the codeCell widget, the buttons are not added to the right of the codecell widget, but rather to the right of the kernel selector widget.

Also, my existing extension used panel.toolbar.insertAfter() to insert the button after the codecell widget, but the button would not render. If instead using panel.toolbar.insertItem() then the button appears, but again it is after the kernel widget.

    const button = new ToolbarButton({
      className: 'addOnOpen',
      tooltip: this._trans.__(LanguageStrings.ADDON_MODE),
      label: this._trans.__(LanguageStrings.ADDON_MODE),
      icon: MyIcons.desktopIcon,
      iconClass: 'desktopIcon',
      onClick: () => {
        this._commands.execute(CommandIDs.addOnOpen);
      },
    });
    // does not work in NB7, button does not show
    // panel.toolbar.insertAfter('cellType', 'addOnOpen', button);
    panel.toolbar.insertItem(10, 'addOnOpen', button);

Reproduce

1. Open a notebook that has the git toolbar button from nbdime
2. Notice it is located to the right of the kernel widget

Expected behavior

The buttons should display next to the codecell widget as they do in Lab.

Context

• Operating System and version: Windows 10 Pro
• Browser and version: Chrome 118
• Jupyter Notebook version: 7.0.4

[jtpio]

Thanks @matthewgasbarro for the report :+1:

The buttons should display next to the codecell widget as they do in Lab.

Indeed, that would be the expected behavior. Normally Notebook 7 should behave the same as JupyterLab when it comes to adding buttons to the notebook toolbar.

Which version of JupyterLab is it on the screenshot?

[jtpio]

Also you may want to use the settings system for adding the toolbar button, instead of programmatically adding it via panel.toolbar.insertIem(): https://github.com/jupyterlab/extension-examples/tree/main/toolbar-button

[matthewgasbarro]

Which version of JupyterLab is it on the screenshot?

It's 4.0.6. Thanks!

[matthewgasbarro]

Any update if there will be a fix soon? Thanks!

[jtpio]

@matthewgasbarro were you able to try using the settings system to add the item to the toolbar? And use the rank option to position the item after the cell type widget?

Maybe that could work for now, until the underlying issue is fixed. It looks like the Notebook toolbar is showing other issues compared to JupyterLab: https://github.com/jupyter/notebook/issues/7311

[matthewgasbarro]

were you able to try using the settings system to add the item to the toolbar? And use the rank option to position the item after the cell type widget?

Yes Jeremy that works. I had preferred to do it code but I can conform to using the settings system.

For other extensions not adding toolbar items through the settings system, are they required to do so or is there plans to fix the issue when added programmatically? Thanks!

[brichet]

After some tests, the items seems to be inserted in a different order in Jupyterlab and Notebook. In Jupyterlab, the items coming from settings are inserted before the programmatic ones, and vice versa in Notebook. And the position of the items is only used at the insertion time, there is no subsequent reorganization. In the case of the Notebook, whatever is the expected position of the programmatic items, they are inserted at the beginning of the toolbar, and are shifted to the end by the settings ones.

[brichet]

Taking a closer look in this issue, it should probably be fixed upstream in Jupyterlab. I opened https://github.com/jupyterlab/jupyterlab/issues/16143