How to render a notebook with voila in a self-implemented extension?

Question

I'd like to create a personal Jupyter Lab extension to add a button to the Launcher. When clicking on it, it should render a jupyter lab GUI with Voila.

As I'm quite new to this kind of implementation, I copied a lots this extension example to create a new Launcher button. But I don't understand well how to implement the voila part.

I've gone directly to the source code as the npm page did not give a lots of information. I think I need to import the IVoilaPreviewTracker object from this module, which gives me the following code.

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;

This does not work. My linter prints me 'IVoilaPreviewTracker' refers to a value, but is being used as a type here. Did you mean 'typeof IVoilaPreviewTracker'?.

I can't understand which object to import to use the notebook:render-with-voila command.

Please help!

Answer 1

First: You have to use void instead of IVoilaPreviewTracker here:

const extension: JupyterFrontEndPlugin<void> 

Next you need to use this kind of command:

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",
          },
        });
      },
}