How to extend jupyter ui by adding menus to main page?

Notebook
1

See the image below:

jupyter_screenshot

I want write a jupyter ui extension that adds a new menu item like “Files”, “Running”, and “Clusters”. All of the documentation and examples I’ve seen show how to add extensions to the notebook pages themselves, but I haven’t found anything about how to change the main page.

Can anyone help point me in the write direction? Thanks!

1 Like
2

I would strongly recommend targeting the new, safer plugin system included in the upcoming notebook v7 (you can check the latest build online, here); in v7 the tabs are in the same place as before:

Screenshot from 2022-08-31 13-34-33
Screenshot from 2022-08-31 13-34-331220×274 14.1 KB

and are defined the notebookTreeWidget plugin which provides INotebookTree token:

To add a custom tab you would need to request that token and call addWidget() and tabBar.addTab(), roughly:

import {
  JupyterFrontEnd,
  JupyterFrontEndPlugin,
} from '@jupyterlab/application';
import { INotebookTree } from '@jupyter-notebook/tree';
import { Widget } from '@lumino/widgets';


// from https://github.com/jupyterlab/extension-examples/blob/7a0473140860aa407c21d9beafa8ae721f659e70/widgets/README.md
class ExampleWidget extends Widget {
  constructor() {
    super();
    this.addClass('my-extension-example-widget');
    this.id = 'simple-widget-example';
    this.title.label = 'Widget Example';
    this.title.closable = false;
  }
}

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'my-extension:plugin',
  autoStart: true,
  requires: [INotebookTree],
  activate: (app: JupyterFrontEnd, nbTreeWidget: INotebookTree) => {
    const myWidget = new ExampleWidget();
    nbTreeWidget.addWidget(myWidget);
    nbTreeWidget.tabBar.addTab(myWidget.title);
  },
};

export default plugin;

For reference, there is Extension Developer Guide — JupyterLab 3.4.5 documentation; following the tutorial for JupyterLab extensions which should clarify things. More examples and resources may appear on Custom front-end extensions — Jupyter Notebook 7.0.0a5 documentation with time. If you have any questions let me know.