Frontend Integration

JupyterLab user interface integration providing toolbar buttons, menu items, command palette integration, keyboard shortcuts, and format-on-save functionality.

Capabilities

Main Extension Class

The primary extension class that implements JupyterLab's widget extension interface and orchestrates all UI components.

class JupyterLabCodeFormatter implements DocumentRegistry.IWidgetExtension<NotebookPanel, INotebookModel> {
  constructor(
    app: JupyterFrontEnd,
    tracker: INotebookTracker,
    palette: ICommandPalette,
    settingRegistry: ISettingRegistry,
    menu: IMainMenu,
    editorTracker: IEditorTracker
  );

  createNew(
    nb: NotebookPanel,
    context: DocumentRegistry.IContext<INotebookModel>
  ): IDisposable;
}

Parameters:

• app - JupyterLab application instance
• tracker - Notebook tracker for managing notebook widgets
• palette - Command palette for adding commands
• settingRegistry - Settings registry for configuration
• menu - Main menu for adding menu items
• editorTracker - File editor tracker for managing editor widgets

Methods:

• createNew() - Creates toolbar button and connects save event handlers for notebooks

Plugin Configuration

The main plugin export that configures the JupyterLab extension.

const plugin: JupyterFrontEndPlugin<void>;

Plugin Properties:

• id - Plugin identifier
• autoStart - Automatically start on JupyterLab load
• requires - Required JupyterLab services
• activate - Activation function that creates the main extension instance

Extension Constants

Core constants used throughout the extension.

namespace Constants {
  const PLUGIN_NAME: string; // "jupyterlab_code_formatter"
  const FORMAT_COMMAND: string; // Format selected cells command
  const FORMAT_ALL_COMMAND: string; // Format all cells command
  const ICON_FORMAT_ALL_SVG: string; // SVG icon for format button
  const ICON_FORMAT_ALL: string; // CSS class for format icon
  const SETTINGS_SECTION: string; // Settings registry section
  const COMMAND_SECTION_NAME: string; // Command palette category
  const PLUGIN_VERSION: string; // Plugin version
}

Usage Examples

Creating the Extension

import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import { ICommandPalette } from '@jupyterlab/apputils';
import { INotebookTracker } from '@jupyterlab/notebook';
import { ISettingRegistry } from '@jupyterlab/settingregistry';
import { IMainMenu } from '@jupyterlab/mainmenu';
import { IEditorTracker } from '@jupyterlab/fileeditor';

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'jupyterlab_code_formatter',
  autoStart: true,
  requires: [
    ICommandPalette,
    INotebookTracker,
    ISettingRegistry,
    IMainMenu,
    IEditorTracker
  ],
  activate: (
    app: JupyterFrontEnd,
    palette: ICommandPalette,
    tracker: INotebookTracker,
    settingRegistry: ISettingRegistry,
    menu: IMainMenu,
    editorTracker: IEditorTracker
  ) => {
    new JupyterLabCodeFormatter(
      app,
      tracker,
      palette,
      settingRegistry,
      menu,
      editorTracker
    );
  }
};

export default plugin;

Using Constants

import { Constants } from './constants';

// Register commands
app.commands.addCommand(Constants.FORMAT_COMMAND, {
  execute: async () => {
    // Format selected cells
  },
  label: 'Format cell'
});

app.commands.addCommand(Constants.FORMAT_ALL_COMMAND, {
  execute: async () => {
    // Format all cells
  },
  label: 'Format notebook'
});

Integration Points

Toolbar Integration

The extension adds a format button to notebook toolbars:

• Button Icon: SVG icon defined in Constants.ICON_FORMAT_ALL_SVG
• Button Action: Formats all code cells in the notebook
• Button Placement: Inserted after the cell type selector

Menu Integration

Formatter-specific menu items are added to the Edit menu:

• Dynamic Menu Items: Created based on available formatters
• Formatter Labels: Use human-readable names from formatter definitions
• Visibility Logic: Menu items shown only when applicable to current context

Command Palette Integration

Commands are registered with the command palette:

• Category: "Jupyterlab Code Formatter"
• Format Cell: Format selected cells
• Format All: Format all cells in notebook
• Formatter-Specific: Individual commands for each available formatter

Context Menu Integration

Right-click context menu integration:

• Selector: .jp-Notebook (notebook cells)
• Command: Format command for selected cells

Settings Integration

JupyterLab settings system integration:

• Settings Section: jupyterlab_code_formatter:settings
• Configuration: Formatter options, format-on-save, error handling
• Live Updates: Settings changes trigger configuration updates

Save Event Handling

Format-on-save functionality:

• Notebook Save: Monitors notebook save state
• Editor Save: Monitors file editor save state
• Conditional Formatting: Only formats when formatOnSave setting is enabled
• Error Suppression: Configurable error handling during auto-format