typescript - Hvordan lager jeg en Jupyter Lab-utvidelse som legger til en egendefinert knapp på verktøylinjen i en Jupyter Lab-notatbok?

Jeg prøver å lage en utvidelse som legger til en egendefinert knapp i verktøylinjen til en åpen Jupyter Lab-notatbok, lik «Submit Notebook»-knappen ... i dette bildet. Hvordan kan jeg oppnå dette? Jeg prøvde å bruke følgende kode, men det fungerer ikke:

import { ToolbarButton } from "@jupyterlab/apputils";
import { DocumentRegistry } from "@jupyterlab/docregistry";
import { INotebookModel, NotebookPanel } from "@jupyterlab/notebook";
import { IDisposable } from "@lumino/disposable";

export class ButtonExtension implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {

  createNew(panel: NotebookPanel, context: DocumentRegistry.IContext<INotebookModel>): IDisposable {
    // Create the toolbar button
    let mybutton = new ToolbarButton({
        label: 'My Button',
        onClick: () => alert('You did it!')
    });

    // Add the toolbar button to the notebook toolbar
    panel.toolbar.insertItem(10, 'mybutton', mybutton);

    // The ToolbarButton class implements `IDisposable`, so the
    // button *is* the extension for the purposes of this method.
    return mybutton;
  }
}

Svar #1

Knappkoden din ser bra ut, men inkluderer ikke den faktiske applikasjonspluginen som ville registrere knappen for notatbøker:

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

const yourPlugin: JupyterFrontEndPlugin<void> = {
  id: '@your-org/plugin-name',
  autoStart: true,
  activate: (app: JupyterFrontEnd) => {
    const your_button = new ButtonExtension();
    app.docRegistry.addWidgetExtension('Notebook', your_button);
  }
}

export default yourPlugin;

Du vil kanskje lære ved å se på koden til disse utvidelsene som legger til en knapp i notatbøker:

  • jupyter-offlinenotebook/src/index.ts
  • retrolab/lab-utvidelse/src/index.ts

Du kan også erstatte insertItem() med addItem() hvis hensikten din er å legge til en knapp. Hvis dette er din første utvidelse, vil jeg sterkt anbefale å følge veiledningen og bygge videre på den.

Svar #2

Jeg hadde problemer med å komme gjennom trinnene og få det til å fungere, men her er en liste over oppdaterte trinn som fungerer: https://pastebin.com/UtCLhU1K

Hovedproblemet var å få de oppdaterte avhengighetene

jlpm add @jupyterlab/apputils
jlpm add @jupyterlab/coreutils
jlpm add @jupyterlab/docregistry
jlpm add @jupyterlab/notebook
jlpm add @lumino/disposable

Og installere utvidelsen

jlpm
insert button.ts to src folder (also updated the console log in index.ts)
insert the button info to index.ts
jlpm build
since jupyter labextension install . keeps failing, this is the only way I can install it rn
jupyter labextension develop --overwrite .
jupyter lab

Relaterte artikler