CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-notebook

Jupyter Notebook - A web-based notebook environment for interactive computing

Pending
Overview
Eval results
Files

frontend-plugins.mddocs/

Frontend Plugins

The frontend plugin system provides JupyterLab extensions that enhance the notebook interface with notebook-specific functionality. These TypeScript/JavaScript plugins integrate with the JupyterLab frontend architecture to provide features like checkpoint indicators, kernel status, output scrolling, and UI enhancements.

Capabilities

Core Application Framework

The frontend application framework provides the main application class and shell interface for the notebook frontend.

class NotebookApp extends JupyterFrontEnd<INotebookShell> {
    /**
     * Main frontend application class for Jupyter Notebook.
     * 
     * Extends JupyterFrontEnd to provide notebook-specific functionality
     * while maintaining compatibility with the JupyterLab ecosystem.
     */
    constructor(options?: NotebookApp.IOptions);
    readonly name: string = 'Jupyter Notebook';
    readonly namespace: string;
    readonly version: string;
    readonly restored: Promise<void>;
    get info(): JupyterLab.IInfo;
    get paths(): JupyterFrontEnd.IPaths;
    registerPluginModule(mod: NotebookApp.IPluginModule): void;
    registerPluginModules(mods: NotebookApp.IPluginModule[]): void;
}

interface INotebookShell {
    /**
     * Shell interface for notebook application.
     * 
     * Defines the structure and behavior of the notebook UI shell,
     * managing layout, widgets, and user interface components.
     */
}

class NotebookShell implements INotebookShell {
    /**
     * Default shell implementation for notebook interface.
     * 
     * Provides the concrete implementation of the notebook shell
     * with specific layout and widget management for notebooks.
     */
}

Path and File Management

Interface and services for opening files and managing navigation within the notebook application.

interface INotebookPathOpener {
    /**
     * Service for opening paths in the notebook application.
     * 
     * Provides functionality to open files, directories, and notebooks
     * with customizable options for window targeting and parameters.
     */
    open(options: INotebookPathOpener.IOpenOptions): WindowProxy | null;
}

namespace INotebookPathOpener {
    interface IOpenOptions {
        /**
         * Options for opening paths in the application.
         */
        prefix: string;          // URL prefix including base URL
        path?: string;           // Path to open (e.g., 'setup.py', 'notebooks/example.ipynb')
        searchParams?: URLSearchParams;  // Extra search parameters for URL
        target?: string;         // Browsing context name for window.open
        features?: string;       // Features parameter for window.open
    }
}

const INotebookPathOpener: Token<INotebookPathOpener>;
/**
 * Dependency injection token for path opener service.
 * 
 * Used to register and inject the path opener service throughout
 * the application for consistent file and directory opening behavior.
 */

Core Plugin Collection

The main collection of JupyterLab plugins that provide notebook-specific functionality.

const plugins: JupyterFrontEndPlugin<any>[];
/**
 * Array of all notebook-specific frontend plugins.
 * 
 * This default export contains all the plugins that should be
 * registered with the JupyterLab application to provide full
 * notebook functionality.
 */

Lab Extension Plugins

Main lab extension plugins that provide notebook-specific functionality in JupyterLab.

// Interface Switcher Plugin
const interfaceSwitcher: JupyterFrontEndPlugin<void>;
/**
 * Plugin to add custom toolbar items to the notebook page.
 * 
 * Provides interface switching functionality between Notebook, JupyterLab,
 * and NbClassic when available. Adds commands and toolbar buttons for
 * opening current notebook in different interfaces.
 */

// Launch Tree Plugin
const launchNotebookTree: JupyterFrontEndPlugin<void>;
/**
 * Plugin to add a command to open the Jupyter Notebook Tree.
 * 
 * Adds a command to launch the file browser in a new tab,
 * providing navigation from notebook to file browser interface.
 */

Command Namespace

namespace CommandIDs {
    const launchNotebookTree: string;  // 'jupyter-notebook:launch-tree'
    const openNotebook: string;        // 'jupyter-notebook:open-notebook'
    const openLab: string;             // 'jupyter-notebook:open-lab'
    const openNbClassic: string;       // 'jupyter-notebook:open-nbclassic'
}

Plugin Configuration Interface

interface ISwitcherChoice {
    command: string;
    commandLabel: string;
    commandDescription: string;
    buttonLabel: string;
    urlPrefix: string;
}

Plugin Architecture

Plugin Registration

// Plugins are typically registered by importing and adding to JupyterLab
import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import plugins from '@jupyter-notebook/notebook-extension';

// Register all notebook plugins
const app = new JupyterFrontEnd();
plugins.forEach(plugin => {
    app.registerPlugin(plugin);
});

Command System Integration

// Plugins integrate with JupyterLab's command system
const app: JupyterFrontEnd = /* ... */;

// Commands added by plugins are accessible through the app
await app.commands.execute('notebook:toggle-full-width');
await app.commands.execute('notebook:close-and-halt');
await app.commands.execute('notebook:open-tree-tab');
await app.commands.execute('notebook:edit-metadata');

Service Dependencies

// Plugins declare dependencies on JupyterLab services
const examplePlugin: JupyterFrontEndPlugin<void> = {
    id: 'example-plugin',
    autoStart: true,
    requires: [INotebookTracker, ITranslator],
    optional: [ICommandPalette, ISettingRegistry],
    activate: (
        app: JupyterFrontEnd,
        tracker: INotebookTracker,
        translator: ITranslator,
        palette?: ICommandPalette,
        settings?: ISettingRegistry
    ) => {
        // Plugin implementation using injected services
    }
};

Usage Examples

Using the Path Opener Service

import { INotebookPathOpener } from '@jupyter-notebook/application';

// Inject the path opener service
class MyWidget extends Widget {
    constructor(private pathOpener: INotebookPathOpener) {
        super();
    }
    
    openNotebook(path: string) {
        // Open a notebook in a new tab
        this.pathOpener.open({
            prefix: '/notebooks',
            path: path,
            target: '_blank'
        });
    }
    
    openDirectory(path: string) {
        // Open file browser for a directory
        this.pathOpener.open({
            prefix: '/tree',
            path: path,
            searchParams: new URLSearchParams({ view: 'tree' })
        });
    }
}

Creating Custom Plugins

import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import { INotebookShell } from '@jupyter-notebook/application';

const customPlugin: JupyterFrontEndPlugin<void> = {
    id: 'my-custom-notebook-plugin',
    description: 'Custom notebook functionality',
    autoStart: true,
    requires: [INotebookShell],
    activate: (app: JupyterFrontEnd, shell: INotebookShell) => {
        console.log('Custom notebook plugin loaded');
        
        // Add custom functionality
        app.commands.addCommand('custom:my-command', {
            label: 'My Custom Command',
            execute: () => {
                console.log('Custom command executed');
            }
        });
        
        // React to shell changes
        shell.currentChanged.connect(() => {
            console.log('Current widget changed');
        });
    }
};

export default customPlugin;

Accessing Plugin Services

// Access services provided by notebook plugins
import { JupyterFrontEnd } from '@jupyterlab/application';
import { INotebookTracker } from '@jupyterlab/notebook';

class NotebookManager {
    constructor(private app: JupyterFrontEnd) {}
    
    getCurrentNotebook() {
        // Access the current notebook through the tracker
        const tracker = this.app.serviceManager.get('notebook-tracker') as INotebookTracker;
        return tracker.currentWidget;
    }
    
    async executeCommand(command: string) {
        // Execute notebook-specific commands
        return await this.app.commands.execute(command);
    }
    
    isFullWidth(): boolean {
        // Check if full-width mode is enabled
        return this.app.commands.isToggled('notebook:toggle-full-width');
    }
}

Install with Tessl CLI

npx tessl i tessl/pypi-notebook

docs

core-application.md

extension-integration.md

frontend-plugins.md

index.md

web-handlers.md

tile.json