0
# Visual Python Panel
1

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

4
## Capabilities
5

6
### Panel Class
7

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

10
```javascript { .api }
11
/**
12
 * Visual Python panel component for JupyterLab
13
 * Extends Lumino Panel with Visual Python functionality
14
 */
15
class VpPanel extends Panel {
16
  constructor(app: JupyterLab);
17
  onResize(msg: ResizeMessage): void;
18
  onBeforeShow(): void;
19
  onAfterHide(): void;
20
  onAfterAttach(): void;
21
  onCloseRequest(msg: CloseRequestMessage): void;
22
}
23
```
24

25
### Constructor
26

27
Creates a new Visual Python panel instance with JupyterLab integration.
28

29
```javascript { .api }
30
/**
31
 * Creates Visual Python panel with application reference
32
 * @param app - JupyterLab application instance
33
 */
34
constructor(app: JupyterLab);
35
```
36

37
**Parameters**:
38
- `app`: JupyterLab application instance for accessing shell, commands, and services
39

40
**Description**: Initializes the Visual Python panel with:
41
- Application reference storage
42
- Panel ID configuration (`'jupyterlab-visualpython:panel'`)
43
- Title and icon setup
44
- Visual Python frame preparation
45

46
**Usage Example**:
47

48
```javascript
49
import { VpPanel } from './VpPanel.js';
50

51
// Create panel during extension activation
52
const vpPanel = new VpPanel(app);
53
app.shell.add(vpPanel, 'right');
54
```
55

56
### Lifecycle Methods
57

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

60
#### Resize Handling
61

62
```javascript { .api }
63
/**
64
 * Handles panel resize events and adjusts internal frame dimensions
65
 * @param msg - Resize message containing new dimensions
66
 */
67
onResize(msg: ResizeMessage): void;
68
```
69

70
**Description**: Responds to panel size changes by:
71
- Calculating new dimensions for menu and board frames
72
- Adjusting Visual Python interface layout
73
- Ensuring proper scaling of visual components
74

75
**Parameters**:
76
- `msg`: Resize message object containing dimension information
77

78
#### Visibility Management
79

80
```javascript { .api }
81
/**
82
 * Executed before panel becomes visible
83
 * Shows VP wrapper and initializes Visual Python interface
84
 */
85
onBeforeShow(): void;
86
```
87

88
**Description**: Prepares panel for display by:
89
- Making VP wrapper visible
90
- Opening Visual Python interface
91
- Initializing interactive components
92

93
```javascript { .api }
94
/**
95
 * Executed after panel is hidden
96
 * Hides VP wrapper and cleans up interface
97
 */
98
onAfterHide(): void;
99
```
100

101
**Description**: Handles panel hiding by:
102
- Hiding VP wrapper elements
103
- Pausing Visual Python operations
104
- Cleaning up temporary resources
105

106
#### DOM Attachment
107

108
```javascript { .api }
109
/**
110
 * Called after panel is attached to DOM
111
 * Triggers Visual Python frame attachment
112
 */
113
onAfterAttach(): void;
114
```
115

116
**Description**: Handles panel DOM attachment by:
117
- Calling vpFrame's afterAttach method
118
- Ensuring proper DOM integration
119
- Activating Visual Python interface elements
120

121
#### Panel Disposal
122

123
```javascript { .api }
124
/**
125
 * Handles panel close request and disposes resources
126
 * @param msg - Close request message
127
 */
128
onCloseRequest(msg: CloseRequestMessage): void;
129
```
130

131
**Description**: Manages panel cleanup during close by:
132
- Disposing of panel resources
133
- Cleaning up Visual Python components
134
- Removing event listeners and references
135

136
**Parameters**:
137
- `msg`: Close request message object
138

139
### Panel Properties
140

141
Core properties providing panel configuration and state management.
142

143
```javascript { .api }
144
// Panel properties
145
app: JupyterLab;           // Application reference
146
vpFrame: VpFrameObject;    // Visual Python frame component
147
id: string;                // Panel identifier
148
title: TitleObject;        // Panel title configuration
149
```
150

151
**Property Details**:
152

153
**`app`**
154
- **Type**: `JupyterLab`
155
- **Description**: Reference to main JupyterLab application instance
156
- **Usage**: Provides access to shell, commands, and services
157

158
**`vpFrame`**
159
- **Type**: `VpFrameObject`
160
- **Description**: Loaded Visual Python frame component containing the visual interface
161
- **Usage**: Manages the core Visual Python functionality and UI
162

163
**`id`**
164
- **Type**: `string`
165
- **Value**: `'jupyterlab-visualpython:panel'`
166
- **Description**: Unique identifier for the panel instance
167

168
**`title`**
169
- **Type**: `TitleObject`
170
- **Description**: Panel title configuration including icon and caption
171
- **Usage**: Displayed in JupyterLab's panel tab and sidebar
172

173
## Frame Integration
174

175
### Visual Python Frame
176

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

179
```javascript { .api }
180
// Frame integration methods
181
vpFrame.afterAttach(): void;    // Called after panel DOM attachment
182
vpFrame.resize(): void;         // Handles frame resizing
183
vpFrame.show(): void;           // Shows Visual Python interface
184
vpFrame.hide(): void;           // Hides Visual Python interface
185
```
186

187
### Frame Communication
188

189
The panel communicates with the Visual Python frame through:
190

191
- **Resize Events**: Panel size changes propagated to frame
192
- **Visibility Events**: Show/hide state synchronized
193
- **DOM Events**: Attachment and detachment coordination
194
- **Resource Management**: Shared cleanup and disposal
195

196
## UI Integration
197

198
### JupyterLab Shell Integration
199

200
The panel integrates with JupyterLab's shell system:
201

202
```javascript
203
// Panel added to right sidebar
204
app.shell.add(vpPanel, 'right');
205

206
// Panel visibility management
207
if (vpPanel.isVisible) {
208
  vpPanel.hide();
209
} else {
210
  vpPanel.show();
211
}
212
```
213

214
### Event Handling
215

216
The panel handles various JupyterLab events:
217

218
- **Resize Events**: Window and panel size changes
219
- **Visibility Events**: Panel show/hide operations
220
- **Focus Events**: Panel activation and deactivation
221
- **Close Events**: Panel disposal and cleanup
222

223
### CodeMirror Integration
224

225
The panel works with CodeMirror for code editing functionality:
226

227
```javascript
228
// CodeMirror integration for code generation
229
const editor = CodeMirror.fromTextArea(textarea, {
230
  mode: 'python',
231
  theme: 'default'
232
});
233
```
234

235
## Types
236

237
```typescript { .api }
238
// Panel-related types
239
interface ResizeMessage extends Message {
240
  width: number;
241
  height: number;
242
}
243

244
interface CloseRequestMessage extends Message {
245
  // Close request message properties
246
}
247

248
interface VpFrameObject {
249
  afterAttach(): void;
250
  resize(width: number, height: number): void;
251
  show(): void;
252
  hide(): void;
253
}
254

255
interface TitleObject {
256
  label: string;
257
  icon: string;
258
  caption: string;
259
}
260
```