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

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