I am new to typescript and Jupyter and I am playing around with jupyterlab extensions following the examples in the jupyterlab/extension-examples repository on Github, in particular the extension-examples/widgets. I currently have a button in the notebook toolbar and a command. (I am doing this in WSL2 using the conda environment)
The following error in createCommand() (app.shell.add(widget, 'main'); occurs:
Argument of type 'ProgramWidget' is not assignable to parameter of type 'Widget'.
Types of property 'title' are incompatible.
Property 'iconRenderer' is missing in type 'import("/home/luc/documents/.../node_modules/@lumino/widgets/types/title").Title<import("/home/luc/documents/.../node_modules/@lumino/widgets/types/widget").Widget>' but required in type 'import("/home/luc/documents/.../node_modules/@jupyterlab/ui-components/node_modules/@lumino/widgets/types/title").Title<import("/home/luc/documents/.../node_modules/@jupyterlab/ui-components/no...'.ts(2345)
Clearly there is something wrong with the dependencies, however I do not know how to solve it. I updated jupyterlab and NodeJS and I tried to remove the yarn.lock file and the node_modules folder and do jlpm install again with no effect. It did however gave me the following warnings:
[1/4] Resolving packages...
warning @jupyterlab/application > @jupyterlab/apputils > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning @jupyterlab/application > @jupyterlab/ui-components > @blueprintjs/core > popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
warning @jupyterlab/application > @jupyterlab/ui-components > @blueprintjs/core > react-popper > popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
warning @jupyterlab/builder > terser-webpack-plugin > cacache > @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
warning @jupyterlab/testutils > jest-junit > uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
warning @jupyterlab/testutils > jest > @jest/core > jest-haste-map > sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
warning @jupyterlab/testutils > jest > @jest/core > jest-haste-map > sane > micromatch > snapdragon > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning @jupyterlab/testutils > jest > jest-cli > jest-config > jest-environment-jsdom > jsdom > w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
warning @jupyterlab/testutils > jest > @jest/core > jest-haste-map > sane > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning @jupyterlab/testutils > jest > @jest/core > jest-haste-map > sane > micromatch > snapdragon > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning @jupyterlab/testutils > jest > @jest/core > jest-haste-map > sane > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] Fetching packages...
info fsevents@2.3.2: The platform "linux" is incompatible with this module.
info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "@jupyterlab/application > @lumino/coreutils@1.12.1" has unmet peer dependency "crypto@1.0.1".
warning "@jupyterlab/application > @jupyterlab/ui-components@3.6.3" has unmet peer dependency "react@^17.0.1".
warning "@jupyterlab/application > @jupyterlab/docregistry > @jupyterlab/docprovider > y-websocket@1.5.0" has unmet peer dependency "yjs@^13.5.6".
warning "@jupyterlab/application > @jupyterlab/rendermime > @jupyterlab/codemirror > y-codemirror@3.0.1" has unmet peer dependency "yjs@^13.5.17".
warning "@jupyterlab/application > @jupyterlab/docregistry > @jupyterlab/docprovider > y-websocket > y-leveldb@0.1.2" has unmet peer dependency "yjs@^13.0.0".
My index.ts currently:
import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import { IDisposable, DisposableDelegate } from '@lumino/disposable';
import { /*NotebookActions,*/ NotebookPanel, INotebookModel, } from '@jupyterlab/notebook';
import { DocumentRegistry } from '@jupyterlab/docregistry';
import { ICommandPalette, ToolbarButton } from '@jupyterlab/apputils';
import { Widget } from '@lumino/widgets';
import { openProgramIcon } from './style/icons';
/**
* Helper functions
*/
function log(): void{
console.log('The command was executed')
}
/**
* The plugin registration information.
*/
const extension: JupyterFrontEndPlugin<void> = {
activate,
id: 'sac-program-viewer',
autoStart: true,
requires: [ICommandPalette]
};
/**
* Add button to the toolbar.
*/
export class ButtonExtension
implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel>
{
/**
* Create a new extension for the notebook panel widget.
*
* @param panel Notebook panel
* @param context Notebook context
* @returns Disposable on the added button
*/
createNew(
panel: NotebookPanel,
context: DocumentRegistry.IContext<INotebookModel>,
): IDisposable {
const openPanel = () => {
log();
};
const button = new ToolbarButton({
className: 'sac-program-viewer-button',
label: '',
icon: openProgramIcon,
onClick: openPanel,
tooltip: 'Opens the sac program in a seperate panel',
});
panel.toolbar.insertItem(10, 'openPanel', button);
return new DisposableDelegate(() => {
button.dispose();
});
}
}
/**
* Function to create a command
*/
function createCommand(app: JupyterFrontEnd){
//const { commands, shell } = app;
const command: string = 'sac:get-program';
app.commands.addCommand(command, {
label: 'Execute sac:get-program Command',
caption:'Execute sac:get-program Command',
execute: () => {
const widget = new ProgramWidget();
app.shell.add(widget, 'main');
},
});
return command;
}
/**
* Function to create widget panel
*/
class ProgramWidget extends Widget {
constructor() {
super();
this.addClass('sac-panel');
this.id = 'sac-panel';
this.title.label = 'SAC Program View';
this.title.closable = true;
}
}
/**
* Activate the extension and add command to the palette.
*
* @param app Main application object
* @param palette Command palette
*/
function activate(app: JupyterFrontEnd, palette: ICommandPalette): void {
console.log('sac-program-viewer is activated!');
app.docRegistry.addWidgetExtension('Notebook', new ButtonExtension());
const category = 'Sac Commands';
const command = createCommand(app);
palette.addItem({ command, category, args: { origin: 'from palette' } });
}
export default extension;
I hope I provided enough information for someone to help me.