Visual Python Panel

Interactive panel component that provides the main Visual Python GUI interface within JupyterLab, extending Lumino's Panel widget with Visual Python-specific functionality.

Capabilities

Panel Class

Main Visual Python panel component extending Lumino Panel for JupyterLab integration.

/**
 * Visual Python panel component for JupyterLab
 * Extends Lumino Panel with Visual Python functionality
 */
class VpPanel extends Panel {
  constructor(app: JupyterLab);
  onResize(msg: ResizeMessage): void;
  onBeforeShow(): void;
  onAfterHide(): void;
  onAfterAttach(): void;
  onCloseRequest(msg: CloseRequestMessage): void;
}

Constructor

Creates a new Visual Python panel instance with JupyterLab integration.

/**
 * Creates Visual Python panel with application reference
 * @param app - JupyterLab application instance
 */
constructor(app: JupyterLab);

Parameters:

• app: JupyterLab application instance for accessing shell, commands, and services

Description: Initializes the Visual Python panel with:

• Application reference storage
• Panel ID configuration ('jupyterlab-visualpython:panel')
• Title and icon setup
• Visual Python frame preparation

Usage Example:

import { VpPanel } from './VpPanel.js';

// Create panel during extension activation
const vpPanel = new VpPanel(app);
app.shell.add(vpPanel, 'right');

Lifecycle Methods

Panel lifecycle methods handling visibility, attachment, and sizing events.

Resize Handling

/**
 * Handles panel resize events and adjusts internal frame dimensions
 * @param msg - Resize message containing new dimensions
 */
onResize(msg: ResizeMessage): void;

Description: Responds to panel size changes by:

• Calculating new dimensions for menu and board frames
• Adjusting Visual Python interface layout
• Ensuring proper scaling of visual components

Parameters:

• msg: Resize message object containing dimension information

Visibility Management

/**
 * Executed before panel becomes visible
 * Shows VP wrapper and initializes Visual Python interface
 */
onBeforeShow(): void;

Description: Prepares panel for display by:

• Making VP wrapper visible
• Opening Visual Python interface
• Initializing interactive components

/**
 * Executed after panel is hidden
 * Hides VP wrapper and cleans up interface
 */
onAfterHide(): void;

Description: Handles panel hiding by:

• Hiding VP wrapper elements
• Pausing Visual Python operations
• Cleaning up temporary resources

DOM Attachment

/**
 * Called after panel is attached to DOM
 * Triggers Visual Python frame attachment
 */
onAfterAttach(): void;

Description: Handles panel DOM attachment by:

• Calling vpFrame's afterAttach method
• Ensuring proper DOM integration
• Activating Visual Python interface elements

Panel Disposal

/**
 * Handles panel close request and disposes resources
 * @param msg - Close request message
 */
onCloseRequest(msg: CloseRequestMessage): void;

Description: Manages panel cleanup during close by:

• Disposing of panel resources
• Cleaning up Visual Python components
• Removing event listeners and references

Parameters:

• msg: Close request message object

Panel Properties

Core properties providing panel configuration and state management.

// Panel properties
app: JupyterLab;           // Application reference
vpFrame: VpFrameObject;    // Visual Python frame component
id: string;                // Panel identifier
title: TitleObject;        // Panel title configuration

Property Details:

app

• Type: JupyterLab
• Description: Reference to main JupyterLab application instance
• Usage: Provides access to shell, commands, and services

vpFrame

• Type: VpFrameObject
• Description: Loaded Visual Python frame component containing the visual interface
• Usage: Manages the core Visual Python functionality and UI

id

• Type: string
• Value: 'jupyterlab-visualpython:panel'
• Description: Unique identifier for the panel instance

title

• Type: TitleObject
• Description: Panel title configuration including icon and caption
• Usage: Displayed in JupyterLab's panel tab and sidebar

Frame Integration

Visual Python Frame

The panel integrates with a Visual Python frame component that provides the core visual programming interface.

// Frame integration methods
vpFrame.afterAttach(): void;    // Called after panel DOM attachment
vpFrame.resize(): void;         // Handles frame resizing
vpFrame.show(): void;           // Shows Visual Python interface
vpFrame.hide(): void;           // Hides Visual Python interface

Frame Communication

The panel communicates with the Visual Python frame through:

• Resize Events: Panel size changes propagated to frame
• Visibility Events: Show/hide state synchronized
• DOM Events: Attachment and detachment coordination
• Resource Management: Shared cleanup and disposal

UI Integration

JupyterLab Shell Integration

The panel integrates with JupyterLab's shell system:

// Panel added to right sidebar
app.shell.add(vpPanel, 'right');

// Panel visibility management
if (vpPanel.isVisible) {
  vpPanel.hide();
} else {
  vpPanel.show();
}

Event Handling

The panel handles various JupyterLab events:

• Resize Events: Window and panel size changes
• Visibility Events: Panel show/hide operations
• Focus Events: Panel activation and deactivation
• Close Events: Panel disposal and cleanup

CodeMirror Integration

The panel works with CodeMirror for code editing functionality:

// CodeMirror integration for code generation
const editor = CodeMirror.fromTextArea(textarea, {
  mode: 'python',
  theme: 'default'
});

Types

// Panel-related types
interface ResizeMessage extends Message {
  width: number;
  height: number;
}

interface CloseRequestMessage extends Message {
  // Close request message properties
}

interface VpFrameObject {
  afterAttach(): void;
  resize(width: number, height: number): void;
  show(): void;
  hide(): void;
}

interface TitleObject {
  label: string;
  icon: string;
  caption: string;
}