How to use @jupyterlab/statusbar - 10 common examples

activate: (
    _: JupyterFrontEnd,
    statusBar: IStatusBar,
    notebookTracker: INotebookTracker,
    editorTracker: IEditorTracker,
    consoleTracker: IConsoleTracker,
    labShell: ILabShell
  ) => {
    const item = new LineCol();

    const onActiveCellChanged = (notebook: Notebook, cell: Cell) => {
      item.model!.editor = cell && cell.editor;
    };

    const onPromptCreated = (console: CodeConsole, prompt: CodeCell) => {
      item.model!.editor = prompt && prompt.editor;
    };

    labShell.currentChanged.connect((_, change) => {
      const { oldValue, newValue } = change;

      // Check if we need to disconnect the console listener
      // or the notebook active cell listener
      if (oldValue && consoleTracker.has(oldValue)) {
        (oldValue as ConsolePanel).console.promptCellCreated.disconnect(

activate: (
    _: JupyterFrontEnd,
    statusBar: IStatusBar,
    notebookTracker: INotebookTracker,
    editorTracker: IEditorTracker,
    consoleTracker: IConsoleTracker,
    labShell: ILabShell
  ) => {
    const item = new LineCol();

    const onActiveCellChanged = (notebook: Notebook, cell: Cell) => {
      item.model!.editor = cell && cell.editor;
    };

    const onPromptCreated = (console: CodeConsole, prompt: CodeCell) => {
      item.model!.editor = prompt && prompt.editor;
    };

    labShell.currentChanged.connect((_, change) => {
      const { oldValue, newValue } = change;

      // Check if we need to disconnect the console listener
      // or the notebook active cell listener
      if (oldValue && consoleTracker.has(oldValue)) {
        (oldValue as ConsolePanel).console.promptCellCreated.disconnect(

activate: (
    app: JupyterFrontEnd,
    labShell: ILabShell | null,
    settingRegistry: ISettingRegistry | null,
    mainMenu: IMainMenu | null,
    palette: ICommandPalette | null
  ) => {
    const statusBar = new StatusBar();
    statusBar.id = 'jp-main-statusbar';
    app.shell.add(statusBar, 'bottom');

    // If available, connect to the shell's layout modified signal.
    if (labShell) {
      labShell.layoutModified.connect(() => {
        statusBar.update();
      });
    }

    const category: string = 'Main Area';
    const command: string = 'statusbar:toggle';

    app.commands.addCommand(command, {
      label: 'Show Status Bar',
      execute: (args: any) => {

activate: (
    app: JupyterFrontEnd,
    labShell: ILabShell | null,
    settingRegistry: ISettingRegistry | null,
    mainMenu: IMainMenu | null,
    palette: ICommandPalette | null
  ) => {
    const statusBar = new StatusBar();
    statusBar.id = 'jp-main-statusbar';
    app.shell.add(statusBar, 'bottom');

    // If available, connect to the shell's layout modified signal.
    if (labShell) {
      labShell.layoutModified.connect(() => {
        statusBar.update();
      });
    }

    const category: string = 'Main Area';
    const command: string = 'statusbar:toggle';

    app.commands.addCommand(command, {
      label: 'Show Status Bar',
      execute: (args: any) => {

notebookTracker: INotebookTracker,
    consoleTracker: IConsoleTracker,
    labShell: ILabShell
  ) => {
    // When the status item is clicked, launch the kernel
    // selection dialog for the current session.
    let currentSession: IClientSession | null = null;
    const changeKernel = async () => {
      if (!currentSession) {
        return;
      }
      await currentSession.selectKernel();
    };

    // Create the status item.
    const item = new KernelStatus({
      onClick: changeKernel
    });

    // When the title of the active widget changes, update the label
    // of the hover text.
    const onTitleChanged = (title: Title) => {
      item.model!.activityName = title.label;
    };

    // Keep the session object on the status item up-to-date.
    labShell.currentChanged.connect((_, change) => {
      const { oldValue, newValue } = change;

      // Clean up after the old value if it exists,
      // listen for changes to the title of the activity
      if (oldValue) {

notebookTracker: INotebookTracker,
    consoleTracker: IConsoleTracker,
    labShell: ILabShell
  ) => {
    // When the status item is clicked, launch the kernel
    // selection dialog for the current session.
    let currentSession: IClientSession | null = null;
    const changeKernel = async () => {
      if (!currentSession) {
        return;
      }
      await currentSession.selectKernel();
    };

    // Create the status item.
    const item = new KernelStatus({
      onClick: changeKernel
    });

    // When the title of the active widget changes, update the label
    // of the hover text.
    const onTitleChanged = (title: Title) => {
      item.model!.activityName = title.label;
    };

    // Keep the session object on the status item up-to-date.
    labShell.currentChanged.connect((_, change) => {
      const { oldValue, newValue } = change;

      // Clean up after the old value if it exists,
      // listen for changes to the title of the activity
      if (oldValue) {

it('should construct a new status bar', () => {
        const statusBar = new StatusBar();
        expect(statusBar).to.be.an.instanceof(StatusBar);
      });
    });

beforeEach(() => {
      statusBar = new StatusBar();
      Widget.attach(statusBar, document.body);
    });

private _handleClick(): void {
    const menu = this._menu;
    if (this._popup) {
      this._popup.dispose();
    }

    menu.aboutToClose.connect(this._menuClosed, this);

    this._popup = showPopup({
      body: menu,
      anchor: this,
      align: 'right'
    });
  }

.forEach(spec => {
        if (spec.mode.indexOf('brainf') === 0) {
          return;
        }

        let args: JSONObject = {
          insertSpaces: true,
          name: spec.name!
        };

        modeMenu.addItem({
          command,
          args
        });
      });
    this._popup = showPopup({
      body: modeMenu,
      anchor: this,
      align: 'left'
    });
  };