1

我想创建一个个人 Jupyter Lab 扩展来向 Launcher 添加一个按钮。单击它时，它应该呈现一个带有Voila的 jupyter 实验室 GUI 。

由于我对这种实现很陌生，我复制了很多这个扩展示例来创建一个新的启动器按钮。但我不太了解如何实现瞧这部分。

我直接查看了源代码，因为npm 页面没有提供很多信息。我想我需要IVoilaPreviewTracker从这个模块导入对象，这给了我以下代码。

import {
  JupyterFrontEnd,
  JupyterFrontEndPlugin,
} from '@jupyterlab/application';

import { ICommandPalette } from '@jupyterlab/apputils';

import { IFileBrowserFactory } from '@jupyterlab/filebrowser';

import { ILauncher } from '@jupyterlab/launcher';

import { LabIcon } from '@jupyterlab/ui-components';

import IVoilaPreviewTracker from "@voila-dashboards/jupyterlab-preview"

import pythonIconStr from '../style/Python-logo-notext.svg';

const PALETTE_CATEGORY = 'My tools';
const LAUNCHER_CATEGORY = 'My tools';

namespace CommandIDs {
  export const createNew = 'my-tools:open-gippy';
}

const extension: JupyterFrontEndPlugin<IVoilaPreviewTracker> = {
  id: 'launcher',
  autoStart: true,
  requires: [IFileBrowserFactory],
  optional: [ILauncher, ICommandPalette],
  activate: (
    app: JupyterFrontEnd,
    browserFactory: IFileBrowserFactory,
    launcher: ILauncher | null,
    notebook: IVoilaPreviewTracker | null,
    palette: ICommandPalette | null
  ) => {
    const { commands } = app;
    const command = CommandIDs.createNew;
    const icon = new LabIcon({
      name: 'launcher:gipp-icon',
      svgstr: pythonIconStr,
    });

    commands.addCommand(command, {
      label: (args) => (args['isPalette'] ? 'Open tool' : 'My tool'),
      caption: 'Open the Voila interface to use my tool',
      icon: (args) => (args['isPalette'] ? null : icon),
      execute: async (args) => {
        // Get the directory in which the Python file must be created;
        // otherwise take the current filebrowser directory
        const cwd = args['cwd'] || browserFactory.tracker.currentWidget.model.path;
        const gui_path = cwd + "ihm_nb.ipynb";

        commands.execute('notebook:render-with-voila', {
          path: gui_path,
        });
      }
    });

    // Add the command to the launcher
    if (launcher) {
      launcher.add({
        command,
        category: LAUNCHER_CATEGORY,
        rank: 1,
      });
    }

    // Add the command to the palette
    if (palette) {
      palette.addItem({
        command,
        args: { isPalette: true },
        category: PALETTE_CATEGORY,
      });
    }
  },
};

export default extension;

这不起作用。我的 linter 打印我'IVoilaPreviewTracker' refers to a value, but is being used as a type here. Did you mean 'typeof IVoilaPreviewTracker'?。

我不明白要导入哪个对象才能使用该notebook:render-with-voila命令。

请帮忙！

4

1 回答 1

1

第一：你必须使用void而不是在IVoilaPreviewTracker这里：

const extension: JupyterFrontEndPlugin<void>

接下来你需要使用这种命令：

commands.addCommand(command, {
      label: (args) => (args['isPalette'] ? 'Open tool' : 'My tool'),
      caption: 'Open the Voila interface to use my tool',
      icon: (args) => (args['isPalette'] ? null : icon),
      execute: () => {
        const notebook_path = "ihm_nb.ipynb";
        commands.execute("docmanager:open", {
          path: notebook_path,
          factory: "Voila-preview",
          options: {
            mode: "split-right",
          },
        });
      },
}
于 2022-03-03T14:12:15.887 回答