@lumino/widgets#Menu TypeScript Examples

menu: JupyterFrontEndPlugin<void> = {
  id: 'jupyterlab-ros/menu',
  autoStart: true,
  requires: [IMainMenu],
  optional: [],
  activate: (app: JupyterFrontEnd, mainMenu: IMainMenu) => {
    
    const { commands } = app;

    // Create a new menu
    const menu: Menu = new Menu({ commands });
    menu.title.label = 'ROS';
    mainMenu.addMenu(menu, { rank: 80 });
    
    // Open Zethus
    menu.addItem({ command: 'jupyterlab-ros/zethus:open' });
    menu.addItem({ type: 'separator' });

    // Open Logger
    menu.addItem({ command: 'jupyterlab-ros/logConsole:open' });
    menu.addItem({ type: 'separator' });

    // Open Settings
    menu.addItem({ command: 'jupyterlab-ros/settings:open' });
  }
}

protected createSubmenu(menuItem: IMenuItem, submenuItems: IContextMenuItem[]): Menu {
    const submenu = new Menu({ commands: this.commands });

    !this.inLab && submenu.addClass('bko-table-menu');
    submenu.title.label = menuItem.title;
    submenu.setHidden(false);

    this.createItems(submenuItems, submenu);

    return submenu;
  }

private _menuItems: Map<string, Menu.IItem> = new Map();

extension = {
    id: 'jupyterlab_sparkmonitor',
    autoStart: true,
    requires: [INotebookTracker, IMainMenu],
    activate(app: JupyterFrontEnd, notebooks: NotebookTracker, mainMenu: MainMenu) {
        let monitor: SparkMonitor;
        console.log('JupyterLab SparkMonitor is activated!');
        notebooks.widgetAdded.connect(async (sender, nbPanel) => {
            let notebookStore = store.notebooks[nbPanel.id];
            if (!notebookStore) {
                notebookStore = new NotebookStore(nbPanel.id);
                store.notebooks[nbPanel.id] = notebookStore;
            }

            // JupyterLab 1.0 backwards compatibility
            let kernel;
            let info;
            if ((nbPanel as any).session) {
                await (nbPanel as any).session.ready;
                kernel = (nbPanel as any).session.kernel;
                await kernel.ready;
                info = kernel.info;
            } else {
                // JupyterLab 2.0
                const { sessionContext } = nbPanel;
                await sessionContext.ready;
                kernel = sessionContext.session?.kernel;
                info = await kernel?.info;
            }

            if (info.language_info.name === 'python') {
                monitor = new SparkMonitor(nbPanel, notebookStore);
                console.log('Notebook kernel ready');
                monitor.startComm();
            }
        });

        const commandID = 'toggle-monitor';
        let toggled = false;

        app.commands.addCommand(commandID, {
            label: 'Hide Spark Monitoring',
            isEnabled: () => true,
            isVisible: () => true,
            isToggled: () => toggled,
            execute: () => {
                console.log(`Executed ${commandID}`);
                toggled = !toggled;
                monitor?.toggleAll();
            },
        });

        const menu = new Menu({ commands: app.commands });
        menu.title.label = 'Spark';
        menu.addItem({
            command: commandID,
            args: {},
        });

        mainMenu.addMenu(menu, { rank: 40 });
    },
}

protected addMenuItem(menuItem: IContextMenuItem, menu: addItem): Menu.IItem {
    this.addCommand(menuItem);
    this.addKeyBinding(menuItem);

    return menu.addItem({ command: menuItem.id, selector: menuItem.selector }) as Menu.IItem;
  }

protected addSeparatorItem(menuItem: IContextMenuItem, menu: addItem): Menu.IItem {
    return menu.addItem({ type: 'separator', selector: menuItem.selector }) as Menu.IItem;
  }

protected addSubmenuItem(menuItem: IContextMenuItem, menu: addItem, submenuItems: IContextMenuItem[]): Menu.IItem {
    return menu.addItem({
      type: 'submenu',
      submenu: this.createSubmenu(menuItem, submenuItems),
      selector: menuItem.selector,
    }) as Menu.IItem;
  }

protected menuItems: Menu.IItem[] = [];

export class BkoMenu extends Menu {
  keepOpen: boolean | undefined;
  trigger: HTMLElement;

  dispose() {
    delete this.trigger;
    super.dispose();
  }

  triggerActiveItem(): void {
    if (!this.keepOpen) {
      super.triggerActiveItem();
      return;
    }

    if (!this.isAttached) {
      return;
    }

    const item = this.activeItem;
    if (!item) {
      return;
    }

    const command = item.command,
      args = item.args;
    if (this.commands && this.commands.isEnabled(command, args)) {
      this.commands.execute(command, args);
    }
  }

  protected onBeforeAttach(msg: Message): void {
    super.onBeforeAttach(msg);

    if (this.parentMenu && this.parentMenu.activeItem && this.parentMenu.activeItem.type === 'submenu') {
      this.hide();
    }
  }

  protected onActivateRequest(msg: Message) {
    super.onActivateRequest(msg);

    if (!this.parentMenu || !this.parentMenu.activeItem || this.parentMenu.activeItem.type !== 'submenu') {
      return;
    }

    const itemNode = this.parentMenu.contentNode.children[this.parentMenu.activeIndex];
    const itemOffset = itemNode.getBoundingClientRect().top;
    this.node.style.top = `${window.pageYOffset + itemOffset}px`;

    this.show();
    const rect = this.node.getBoundingClientRect();
    const clientHeight = window.innerHeight || document.documentElement.clientHeight;

    if (rect.bottom > clientHeight) {
      this.node.style.top = `${window.pageYOffset + itemOffset - (rect.bottom - clientHeight)}px`;
    }
  }

  close() {
    super.close.call(this);

    setTimeout(() => {
      this.trigger && this.trigger.classList.remove('opened');
    });
  }
}

/**
 * Activate the extension.
 */
function activate(
  app: JupyterFrontEnd,
  mainMenu: IMainMenu,
  editorTracker: IEditorTracker,
  notebookTracker: INotebookTracker
) {
  console.log(
    'JupyterLab extension @reviewnb/gitplus (0.1.5) is activated!'
  );
  const createPRCommand = 'create-pr';
  app.commands.addCommand(createPRCommand, {
    label: 'Create Pull Request',
    execute: () => {
      get_server_config()
        .then(config => {
          const files = get_open_files(
            editorTracker,
            notebookTracker,
            config['server_root_dir']
          );
          const data = get_json_request_payload_from_file_list(files);
          get_modified_repositories(
            data,
            show_repository_selection_dialog,
            createPRCommand,
            show_repository_selection_failure_dialog
          );
        })
        .catch(error => {
          show_repository_selection_failure_dialog();
          console.log(error);
        });
    }
  });

  const pushCommitCommand = 'push-commit';
  app.commands.addCommand(pushCommitCommand, {
    label: 'Push Commit',
    execute: () => {
      get_server_config()
        .then(config => {
          const files = get_open_files(
            editorTracker,
            notebookTracker,
            config['server_root_dir']
          );
          const data = get_json_request_payload_from_file_list(files);
          get_modified_repositories(
            data,
            show_repository_selection_dialog,
            pushCommitCommand,
            show_repository_selection_failure_dialog
          );
        })
        .catch(error => {
          show_repository_selection_failure_dialog();
          console.log(error);
        });
    }
  });

  function show_repository_selection_dialog(
    repo_names: string[][],
    command: string
  ) {
    if (repo_names.length == 0) {
      let msg =
        "No GitHub repositories found! \n\nFirst, open the files that you'd like to commit or create pull request for.";
      if (command == createPRCommand) {
        msg =
          "No GitHub repositories found! \n\nFirst, open the files that you'd like to create pull request for.";
      } else if (command == pushCommitCommand) {
        msg =
          "No GitHub repositories found! \n\nFirst, open the files that you'd like to commit.";
      }
      showDialog({
        title: 'Repository Selection',
        body: msg,
        buttons: [Dialog.okButton({ label: 'Okay' })]
      }).then(result => { });
    } else {
      const label_style = {
        'font-size': '14px'
      };
      const body_style = {
        'padding-top': '2em',
        'padding-bottom': '2em',
        'border-top': '1px solid #dfe2e5'
      };
      const select_style = {
        'margin-top': '4px',
        'min-height': '32px'
      };
      const styles = {
        label_style: label_style,
        body_style: body_style,
        select_style: select_style
      };
      const dwidget = new DropDown(repo_names, 'Select Repository', styles);
      showDialog({
        title: 'Repository Selection',
        body: dwidget,
        buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Next' })]
      }).then(result => {
        if (!result.button.accept) {
          return;
        }
        const repo_name = dwidget.getTo();
        show_file_selection_dialog(repo_name, command);
      });
    }
  }

  function show_file_selection_dialog(repo_path: string, command: string) {
    get_server_config()
      .then(config => {
        const files = get_open_files(
          editorTracker,
          notebookTracker,
          config['server_root_dir']
        );
        const relevant_files: string[] = [];

        for (const f of files) {
          if (f.startsWith(repo_path)) {
            relevant_files.push(f.substring(repo_path.length + 1));
          }
        }

        const cwidget = new CheckBoxes(relevant_files);
        showDialog({
          title: 'Select Files',
          body: cwidget,
          buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Next' })]
        }).then(result => {
          if (!result.button.accept) {
            return;
          }
          const files = cwidget.getSelected();

          if (command == createPRCommand) {
            show_commit_pr_message_dialog(repo_path, files);
          } else if (command == pushCommitCommand) {
            show_commit_message_dialog(repo_path, files);
          }
        });
      })
      .catch(error => {
        show_file_selection_failure_dialog();
        console.log(error);
      });
  }

  function show_commit_message_dialog(repo_path: string, files: string[]) {
    console.log(`${repo_path} --show_commit_message_dialog-- ${files}`);
    const cmwidget = new CommitMessageDialog();

    showDialog({
      title: 'Provide Details',
      body: cmwidget,
      buttons: [
        Dialog.cancelButton(),
        Dialog.okButton({ label: 'Create & Push Commit' })
      ]
    }).then(result => {
      if (!result.button.accept) {
        return;
      }
      const commit_message = cmwidget.getCommitMessage();
      const body = {
        files: files,
        repo_path: repo_path,
        commit_message: commit_message
      };
      create_and_push_commit(body, show_commit_pushed_dialog);
    });
  }

  function show_commit_pr_message_dialog(repo_path: string, files: string[]) {
    console.log(`${repo_path} --show_commit_pr_message_dialog-- ${files}`);
    const cprwidget = new CommitPRMessageDialog();

    showDialog({
      title: 'Provide Details',
      body: cprwidget,
      buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Create PR' })]
    }).then(result => {
      if (!result.button.accept) {
        return;
      }
      const commit_message = cprwidget.getCommitMessage();
      const pr_title = cprwidget.getPRTitle();
      const body = {
        files: files,
        repo_path: repo_path,
        commit_message: commit_message,
        pr_title: pr_title
      };
      create_pull_request(body, show_pr_created_dialog);
    });
  }

  function show_pr_created_dialog(github_url = '', reviewnb_url = '') {
    if (github_url.length == 0 || reviewnb_url.length == 0) {
      showDialog({
        title: 'Failure',
        body: "Failed to create pull request. Check Jupyter logs for error. \n\nMake sure you've correctly setup GitHub access token. Steps here - https://github.com/ReviewNB/jupyterlab-gitplus/blob/master/README.md#setup-github-token\n\nIf unable to resolve, open an issue here - https://github.com/ReviewNB/jupyterlab-gitplus/issues",
        buttons: [Dialog.okButton({ label: 'Okay' })]
      }).then(result => { });
    } else {
      const prcwidget = new PRCreated(github_url, reviewnb_url);

      showDialog({
        title: 'Pull Request Created',
        body: prcwidget,
        buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Okay' })]
      }).then(result => { });
    }
  }

  function show_commit_pushed_dialog(github_url = '', reviewnb_url = '') {
    if (github_url.length == 0 || reviewnb_url.length == 0) {
      showDialog({
        title: 'Failure',
        body: 'Failed to create/push commit. Check Jupyter logs for error. \n\nIf unable to resolve, open an issue here - https://github.com/ReviewNB/jupyterlab-gitplus/issues',
        buttons: [Dialog.okButton({ label: 'Okay' })]
      }).then(result => { });
    } else {
      const prcwidget = new CommitPushed(github_url, reviewnb_url);

      showDialog({
        title: 'Commit pushed!',
        body: prcwidget,
        buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'Okay' })]
      }).then(result => {
        if (!result.button.accept) {
          return;
        }
      });
    }
  }
  // Create new top level menu
  const menu = new Menu({ commands: app.commands });
  menu.title.label = 'Git-Plus';
  mainMenu.addMenu(menu, { rank: 40 });

  // Add commands to menu
  menu.addItem({
    command: createPRCommand,
    args: {}
  });
  menu.addItem({
    command: pushCommitCommand,
    args: {}
  });
}

extension: JupyterFrontEndPlugin<IDashboardTracker> = {
  id: 'jupyterlab-interactive-dashboard-editor',
  autoStart: true,
  requires: [INotebookTracker, IMainMenu, IDocumentManager, ILauncher],
  provides: IDashboardTracker,
  activate: (
    app: JupyterFrontEnd,
    notebookTracker: INotebookTracker,
    mainMenu: IMainMenu,
    docManager: IDocumentManager,
    launcher: ILauncher
  ): IDashboardTracker => {
    // Tracker for Dashboard
    const dashboardTracker = new DashboardTracker({ namespace: 'dashboards' });

    //Tracker for DashboardWidgets
    const outputTracker = new WidgetTracker<DashboardWidget>({
      namespace: 'dashboard-outputs'
    });

    // Clipboard for copy/pasting outputs.
    const clipboard = new Set<Widgetstore.WidgetInfo>();

    // Define dashboard file type.
    const dashboardFiletype: Partial<DocumentRegistry.IFileType> = {
      name: 'dashboard',
      displayName: 'Dashboard',
      contentType: 'file',
      extensions: ['.dashboard', '.dash'],
      fileFormat: 'text',
      icon: DashboardIcons.tealDashboard,
      iconLabel: 'Dashboard',
      mimeTypes: ['application/json']
    };
    // Add dashboard file type to the doc registry.
    app.docRegistry.addFileType(dashboardFiletype);

    addCommands(
      app,
      dashboardTracker,
      outputTracker,
      clipboard,
      docManager,
      notebookTracker
    );

    // Create a new model factory.
    const modelFactory = new DashboardModelFactory({ notebookTracker });

    // Create a new widget factory.
    const widgetFactory = new DashboardDocumentFactory({
      name: 'dashboard',
      modelName: 'dashboard',
      fileTypes: ['dashboard'],
      defaultFor: ['dashboard'],
      commandRegistry: app.commands,
      outputTracker
    });

    app.docRegistry.addModelFactory(modelFactory);
    app.docRegistry.addWidgetFactory(widgetFactory);

    // Add newly created dashboards to the tracker, set their icon and label,
    // and set the default width, height, and scrollMode.
    widgetFactory.widgetCreated.connect((_sender, widget) => {
      void dashboardTracker.add(widget.content);

      widget.title.icon = dashboardFiletype.icon;
      widget.title.iconClass = dashboardFiletype.iconClass || '';
      widget.title.iconLabel = dashboardFiletype.iconLabel || '';

      const model = widget.content.model;
      // TODO: Make scrollMode changable in JL. Default 'infinite' for now.
      model.scrollMode = 'infinite';
      model.width = Dashboard.DEFAULT_WIDTH;
      model.height = Dashboard.DEFAULT_HEIGHT;
    });

    // Add commands to context menus.
    app.contextMenu.addItem({
      command: CommandIDs.save,
      selector: '.pr-JupyterDashboard',
      rank: 3
    });

    app.contextMenu.addItem({
      command: CommandIDs.undo,
      selector: '.pr-JupyterDashboard',
      rank: 1
    });

    app.contextMenu.addItem({
      command: CommandIDs.redo,
      selector: '.pr-JupyterDashboard',
      rank: 2
    });

    app.contextMenu.addItem({
      command: CommandIDs.cut,
      selector: '.pr-JupyterDashboard',
      rank: 3
    });

    app.contextMenu.addItem({
      command: CommandIDs.copy,
      selector: '.pr-JupyterDashboard',
      rank: 4
    });

    app.contextMenu.addItem({
      command: CommandIDs.paste,
      selector: '.pr-JupyterDashboard',
      rank: 5
    });

    const experimentalMenu = new Menu({ commands: app.commands });
    experimentalMenu.title.label = 'Experimental';

    experimentalMenu.addItem({
      command: CommandIDs.saveToMetadata
    });

    experimentalMenu.addItem({
      command: CommandIDs.toggleInfiniteScroll
    });

    experimentalMenu.addItem({
      command: CommandIDs.trimDashboard
    });

    app.contextMenu.addItem({
      type: 'submenu',
      submenu: experimentalMenu,
      selector: '.pr-JupyterDashboard',
      rank: 6
    });

    app.contextMenu.addItem({
      command: CommandIDs.deleteOutput,
      selector: '.pr-EditableWidget',
      rank: 0
    });

    app.contextMenu.addItem({
      command: CommandIDs.toggleFitContent,
      selector: '.pr-EditableWidget',
      rank: 1
    });

    app.contextMenu.addItem({
      command: CommandIDs.toggleWidgetMode,
      selector: '.pr-EditableWidget',
      rank: 2
    });

    app.contextMenu.addItem({
      type: 'separator',
      selector: '.pr-EditableWidget',
      rank: 3
    });

    app.contextMenu.addItem({
      command: CommandIDs.openFromMetadata,
      selector: '.jp-Notebook',
      rank: 16
    });

    // Add commands to key bindings
    app.commands.addKeyBinding({
      command: CommandIDs.deleteOutput,
      args: {},
      keys: ['Backspace'],
      selector: '.pr-EditableWidget'
    });

    app.commands.addKeyBinding({
      command: CommandIDs.undo,
      args: {},
      keys: ['Z'],
      selector: '.pr-JupyterDashboard'
    });

    app.commands.addKeyBinding({
      command: CommandIDs.redo,
      args: {},
      keys: ['Shift Z'],
      selector: '.pr-JupyterDashboard'
    });

    app.commands.addKeyBinding({
      command: CommandIDs.cut,
      args: {},
      keys: ['Accel X'],
      selector: '.pr-JupyterDashboard'
    });

    app.commands.addKeyBinding({
      command: CommandIDs.copy,
      args: {},
      keys: ['Accel C'],
      selector: '.pr-JupyterDashboard'
    });

    app.commands.addKeyBinding({
      command: CommandIDs.paste,
      args: {},
      keys: ['Accel V'],
      selector: '.pr-JupyterDashboard'
    });

    app.commands.addKeyBinding({
      command: CommandIDs.toggleFitContent,
      args: {},
      keys: ['K'],
      selector: '.pr-EditableWidget'
    });

    // Add commands to edit menu.
    mainMenu.fileMenu.addGroup([
      {
        command: CommandIDs.setDimensions
      },
      {
        command: CommandIDs.setTileSize
      }
    ]);

    mainMenu.fileMenu.newMenu.addGroup([
      {
        command: CommandIDs.createNew
      }
    ]);

    launcher.add({
      command: CommandIDs.createNew,
      category: 'Other',
      rank: 1
    });

    return dashboardTracker;
  }
}