3 | 
4 |
19 |
20 |
21 | ### Display DataFrames
22 |
23 | You can preview the DataFrame values as an interactive table.
24 |
25 | 
26 |
27 |
28 | ### Display DataFrames with updates
29 |
30 | The preview of DataFrame will be automatically refreshed when you change it in the Python code.
31 |
32 | 
33 |
34 |
35 | ### Customize displayed columns
36 |
37 | You can select which properties of the variables you'd like to display:
38 |
39 | 
40 |
41 | ### Automatic or manual refresh
42 |
43 | The list of variables will automatically update whenever you execute a cell. However, you can choose the Manual Refresh option to update the list at your convenience.
44 |
45 | 
46 |
47 | ### Dark theme
48 |
49 | If you prefer a darker look, a Dark Theme is also available!
50 |
51 | 
52 |
53 | ## Variable Inspector requirements
54 |
55 | - JupyterLab >= 4.0.0
56 |
57 | ## Install extension
58 |
59 | To install the extension, execute:
60 |
61 | ```bash
62 | pip install variable_inspector
63 | ```
64 |
65 | ## Uninstall extension
66 |
67 | To remove the extension, execute:
68 |
69 | ```bash
70 | pip uninstall variable_inspector
71 | ```
72 |
73 | ## Contributing
74 |
75 | ### Development install
76 |
77 | Note: You will need NodeJS to build the extension package.
78 |
79 | The `jlpm` command is JupyterLab's pinned version of
80 | [yarn](https://yarnpkg.com/) that is installed with JupyterLab. You may use
81 | `yarn` or `npm` in lieu of `jlpm` below.
82 |
83 | ```bash
84 | # Clone the repo to your local environment
85 | # Change directory to the variable_inspector directory
86 | # Install package in development mode
87 | pip install -e "."
88 | # Link your development version of the extension with JupyterLab
89 | jupyter labextension develop . --overwrite
90 | # Rebuild extension Typescript source after making changes
91 | jlpm build
92 | ```
93 |
94 | You can watch the source directory and run JupyterLab at the same time in different terminals to watch for changes in the extension's source and automatically rebuild the extension.
95 |
96 | ```bash
97 | # Watch the source directory in one terminal, automatically rebuilding when needed
98 | jlpm watch
99 | # Run JupyterLab in another terminal
100 | jupyter lab
101 | ```
102 |
103 | With the watch command running, every saved change will immediately be built locally and available in your running JupyterLab. Refresh JupyterLab to load the change in your browser (you may need to wait several seconds for the extension to be rebuilt).
104 |
105 | By default, the `jlpm build` command generates the source maps for this extension to make it easier to debug using the browser dev tools. To also generate source maps for the JupyterLab core extensions, you can run the following command:
106 |
107 | ```bash
108 | jupyter lab build --minimize=False
109 | ```
110 |
111 | ### Development uninstall
112 |
113 | ```bash
114 | pip uninstall variable_inspector
115 | ```
116 |
117 | In development mode, you will also need to remove the symlink created by `jupyter labextension develop`
118 | command. To find its location, you can run `jupyter labextension list` to figure out where the `labextensions`
119 | folder is located. Then you can remove the symlink named `variable-inspector` within that folder.
120 |
121 | ### Packaging the extension
122 |
123 | See [RELEASE](RELEASE.md)
124 |
--------------------------------------------------------------------------------
/RELEASE.md:
--------------------------------------------------------------------------------
1 | # Making a new release of variable_inspector
2 |
3 | The extension can be published to `PyPI` and `npm` manually or using the [Jupyter Releaser](https://github.com/jupyter-server/jupyter_releaser).
4 |
5 | ## Manual release
6 |
7 | ### Python package
8 |
9 | This extension can be distributed as Python packages. All of the Python
10 | packaging instructions are in the `pyproject.toml` file to wrap your extension in a
11 | Python package. Before generating a package, you first need to install some tools:
12 |
13 | ```bash
14 | pip install build twine hatch
15 | ```
16 |
17 | Bump the version using `hatch`. By default this will create a tag.
18 | See the docs on [hatch-nodejs-version](https://github.com/agoose77/hatch-nodejs-version#semver) for details.
19 |
20 | ```bash
21 | hatch version
53 |
244 | );
245 | };
246 |
--------------------------------------------------------------------------------
/src/components/searchBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useVariableContext } from '../context/notebookVariableContext';
3 |
4 | export const SearchBar: React.FC = () => {
5 | const { variables, searchTerm, setSearchTerm } = useVariableContext();
6 |
7 | const handleChange = (e: React.ChangeEvent
54 |
243 |
55 | Rows from
56 |
63 |
70 | setRowInput(e.target.value)}
78 | onKeyDown={e => {
79 | if (e.key === 'Enter') {
80 | const newPage = parseInt(rowInput, 10);
81 | if (!isNaN(newPage) && newPage >= 0 && newPage <= rowsCount) {
82 | setCurrentRow(newPage);
83 | setRowInput(newPage.toString());
84 | }
85 | }
86 | }}
87 | onBlur={() => {
88 | const newPage = parseInt(rowInput, 10);
89 | if (isNaN(newPage) || newPage < 0 || newPage > rowsCount) {
90 | setRowInput(currentRow.toString());
91 | } else {
92 | setCurrentRow(newPage);
93 | }
94 | }}
95 | />
96 | to
97 |
98 | {parseInt(rowInput) + 99 >= rowsCount
99 | ? rowsCount - 1
100 | : parseInt(rowInput) + 99}
101 |
102 |
109 |
116 |
117 | Total {rowsCount} rows
118 |
119 |
120 |
121 | Columns from
122 |
129 |
136 | setColumnInput(e.target.value)}
144 | onKeyDown={e => {
145 | if (e.key === 'Enter') {
146 | const newPage = parseInt(columnInput, 10);
147 | if (!isNaN(newPage) && newPage >= 0 && newPage <= colsCount) {
148 | setCurrentColumn(newPage);
149 | setColumnInput(newPage.toString());
150 | }
151 | }
152 | }}
153 | onBlur={() => {
154 | const newPage = parseInt(columnInput, 10);
155 | if (isNaN(newPage) || newPage < 0 || newPage > colsCount) {
156 | setColumnInput(currentColumn.toString());
157 | } else {
158 | setCurrentColumn(newPage);
159 | }
160 | }}
161 | />
162 | to
163 |
164 | {parseInt(columnInput) + 49 >= colsCount
165 | ? colsCount - 1
166 | : parseInt(columnInput) + 49}
167 |
168 |
175 |
182 |
183 | Total {colsCount} columns
184 |
185 |
186 | {/* Goto Cell section */}
187 | {/*
188 | Goto cell:
189 | setCellRowInput(e.target.value)}
195 | onKeyDown={e => {
196 | if (e.key === 'Enter') {
197 | const newVal = parseInt(cellRowInput, 10);
198 | if (isNaN(newVal) || newVal < 0) {
199 | setCellRowInput('0');
200 | } else {
201 | handleGotoCell();
202 | }
203 | }
204 | }}
205 | onBlur={() => {
206 | const newVal = parseInt(cellRowInput, 10);
207 | if (isNaN(newVal) || newVal < 0) {
208 | setCellRowInput('0');
209 | }
210 | }}
211 | />
212 | setCellColumnInput(e.target.value)}
218 | onKeyDown={e => {
219 | if (e.key === 'Enter') {
220 | const newVal = parseInt(cellColumnInput, 10);
221 | if (isNaN(newVal) || newVal < 0) {
222 | setCellColumnInput('0');
223 | } else {
224 | handleGotoCell();
225 | }
226 | }
227 | }}
228 | onBlur={() => {
229 | const newVal = parseInt(cellColumnInput, 10);
230 | if (isNaN(newVal) || newVal < 0) {
231 | setCellColumnInput('0');
232 | }
233 | }}
234 | />
235 |
241 |
*/}
242 |
14 |
21 |
22 | ) : (
23 | <>
24 | )}
25 |
26 | );
27 | };
28 |
--------------------------------------------------------------------------------
/src/components/variableInspectorPanel.ts:
--------------------------------------------------------------------------------
1 | import { ILabShell } from '@jupyterlab/application';
2 | import { VariablePanelWidget } from './variablePanelWidget';
3 | import { panelIcon } from '../icons/panelIcon';
4 | import { NotebookPanel } from '@jupyterlab/notebook';
5 |
6 | export function createEmptyVariableInspectorPanel(
7 | labShell: ILabShell,
8 | variableName: string,
9 | variableType: string,
10 | variableShape: string,
11 | notebookPanel?: NotebookPanel | null
12 | ): void {
13 | const panel = new VariablePanelWidget({
14 | variableName,
15 | variableType,
16 | variableShape,
17 | notebookPanel
18 | });
19 |
20 | panel.id = `${variableType}-${variableName}`;
21 | panel.title.label = `${variableType} ${variableName}`;
22 | panel.title.closable = true;
23 | panel.title.icon = panelIcon;
24 |
25 | const existingPanel = Array.from(labShell.widgets('main')).find(
26 | widget => widget.id === panel.id
27 | );
28 |
29 | if (existingPanel) {
30 | labShell.add(panel, 'main', { mode: 'tab-after', ref: existingPanel.id });
31 | } else {
32 | labShell.add(panel, 'main', { mode: 'split-right' });
33 | }
34 |
35 | labShell.activateById(panel.id);
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/variableInspectorSidebar.tsx:
--------------------------------------------------------------------------------
1 | // src/components/variableInspectorSidebarWidget.tsx
2 | import React from 'react';
3 | import { ReactWidget } from '@jupyterlab/ui-components';
4 | import { Message } from '@lumino/messaging';
5 | import { pluginIcon } from '../icons/pluginIcon';
6 | import { NotebookWatcher } from '../watchers/notebookWatcher';
7 | import { CommandRegistry } from '@lumino/commands';
8 | import { IStateDB } from '@jupyterlab/statedb';
9 |
10 | import { NotebookPanelContextProvider } from '../context/notebookPanelContext';
11 | import { NotebookKernelContextProvider } from '../context/notebookKernelContext';
12 | import { VariableContextProvider } from '../context/notebookVariableContext';
13 | import { VariableListComponent } from './variableListComponent';
14 | import {
15 | PluginVisibilityContextValue,
16 | PluginVisibilityContext
17 | } from '../context/pluginVisibilityContext';
18 | import { ILabShell } from '@jupyterlab/application';
19 | import { ISettingRegistry } from '@jupyterlab/settingregistry';
20 | import { CodeExecutionContextProvider } from '../context/codeExecutionContext';
21 |
22 | export class VariableInspectorSidebarWidget extends ReactWidget {
23 | private notebookWatcher: NotebookWatcher;
24 | private commands: CommandRegistry;
25 | private isOpen = false;
26 | private labShell: ILabShell;
27 | private settingRegistry: ISettingRegistry | null = null;
28 | private _stateDB: IStateDB;
29 |
30 | constructor(
31 | notebookWatcher: NotebookWatcher,
32 | commands: CommandRegistry,
33 | labShell: ILabShell,
34 | settingRegistry: ISettingRegistry | null,
35 | stateDB: IStateDB
36 | ) {
37 | super();
38 | this.notebookWatcher = notebookWatcher;
39 | this.commands = commands;
40 | this.id = 'mljar-variable-inspector::mljar-left-sidebar';
41 | this.title.icon = pluginIcon;
42 | this.title.caption = 'Variable Inspector';
43 | this.addClass('mljar-variable-inspector-sidebar-widget');
44 | this.labShell = labShell;
45 | this.settingRegistry = settingRegistry;
46 | this._stateDB = stateDB;
47 | }
48 |
49 | protected onAfterShow(msg: Message): void {
50 | super.onAfterShow(msg);
51 | this.isOpen = true;
52 | this.update();
53 | }
54 |
55 | protected onAfterHide(msg: Message): void {
56 | super.onAfterHide(msg);
57 | this.isOpen = false;
58 | this.update();
59 | }
60 |
61 | render(): JSX.Element {
62 | const contextValue: PluginVisibilityContextValue = {
63 | isPluginOpen: this.isOpen,
64 | setPluginOpen: open => {
65 | this.isOpen = open;
66 | this.update();
67 | }
68 | };
69 |
70 | return (
71 |
72 |
73 |
74 |
77 |
81 |
84 |
90 |
91 |
92 |
93 |
94 |
95 | );
96 | }
97 | }
98 |
99 | export function createVariableInspectorSidebar(
100 | notebookWatcher: NotebookWatcher,
101 | commands: CommandRegistry,
102 | labShell: ILabShell,
103 | settingRegistry: ISettingRegistry | null,
104 | stateDB: IStateDB
105 | ): VariableInspectorSidebarWidget {
106 | return new VariableInspectorSidebarWidget(
107 | notebookWatcher,
108 | commands,
109 | labShell,
110 | settingRegistry,
111 | stateDB
112 | );
113 | }
114 |
--------------------------------------------------------------------------------
/src/components/variableItem.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { detailIcon } from '../icons/detailIcon';
3 | import { CommandRegistry } from '@lumino/commands';
4 | import { executeMatrixContent } from '../utils/executeGetMatrix';
5 | import { useNotebookPanelContext } from '../context/notebookPanelContext';
6 | import { allowedTypes } from '../utils/allowedTypes';
7 | import { ILabShell } from '@jupyterlab/application';
8 | import { createEmptyVariableInspectorPanel } from '../components/variableInspectorPanel';
9 |
10 | interface VariableInfo {
11 | name: string;
12 | type: string;
13 | shape: string;
14 | dimension: number;
15 | size: number;
16 | value: string;
17 | }
18 |
19 | interface VariableItemProps {
20 | vrb: VariableInfo;
21 | commands: CommandRegistry;
22 | labShell: ILabShell;
23 | showType: boolean;
24 | showShape: boolean;
25 | showSize: boolean;
26 | }
27 |
28 | export const VariableItem: React.FC
70 | {loading ? (
71 |
108 | );
109 | };
110 |
--------------------------------------------------------------------------------
/src/components/variableListComponent.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { VariableList } from './variableList';
3 | import { SearchBar } from './searchBar';
4 | import { RefreshButton } from './variableRefreshButton';
5 | import { CommandRegistry } from '@lumino/commands';
6 | import { ILabShell } from '@jupyterlab/application';
7 | import { SettingsButton } from './variableSettingsButton';
8 | import { ISettingRegistry } from '@jupyterlab/settingregistry';
9 |
10 | interface IVariableListComponentProps {
11 | commands: CommandRegistry;
12 | labShell: ILabShell;
13 | settingRegistry: ISettingRegistry | null;
14 | }
15 |
16 | export const VariableListComponent: React.FC
72 | Loading variables...
73 |
74 | ) : variables.length === 0 ? (
75 |
76 | Sorry, no variables available.
77 |
78 | ) : (
79 | -
80 |
- 81 | Name 82 | {showType && Type} 83 | {showShape && Shape} 84 | {showSize && Size} 85 | Value 86 | 87 | {filteredVariables.map((variable, index) => ( 88 |
23 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/components/variablePanel.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useRef, useCallback } from 'react';
2 | import {
3 | MultiGrid as RVMultiGrid,
4 | AutoSizer as RVAutoSizer
5 | } from 'react-virtualized';
6 | import 'react-virtualized/styles.css';
7 | import { allowedTypes } from '../utils/allowedTypes';
8 | import { NotebookPanel } from '@jupyterlab/notebook';
9 | import { executeMatrixContent } from '../utils/executeGetMatrix';
10 | import { useVariableRefeshContext } from '../context/variableRefershContext';
11 | import { withIgnoredPanelKernelUpdates } from '../utils/kernelOperationNotifier';
12 | import { useThemeContext } from '../context/themeContext';
13 | import { transformMatrixData } from '../utils/utils';
14 | import { PaginationControls } from './paginationControls';
15 |
16 | interface IVariablePanelProps {
17 | variableName: string;
18 | initVariableType: string;
19 | initVariableShape: string;
20 | notebookPanel?: NotebookPanel | null;
21 | }
22 |
23 | const AutoSizer = RVAutoSizer as unknown as React.ComponentType
24 |
28 | Variable Inspector
25 |
29 |
36 |
287 | {typeof cellData === 'boolean'
288 | ? cellData
289 | ? 'True'
290 | : 'False'
291 | : cellData}
292 |
293 | );
294 | };
295 |
296 | const handleGotoCell = () => {
297 | const targetGlobalRow = parseInt(cellRowInput, 10);
298 | const targetGlobalCol = parseInt(cellColumnInput, 10);
299 | if (
300 | !isNaN(targetGlobalRow) &&
301 | targetGlobalRow >= 0 &&
302 | !isNaN(targetGlobalCol) &&
303 | targetGlobalCol >= 0
304 | ) {
305 | const newRowPage = Math.floor(targetGlobalRow / maxRowsRange) + 1;
306 | const newColPage = Math.floor(targetGlobalCol / maxColsRange) + 1;
307 | setRowInput(newRowPage.toString());
308 | setColumnInput(newColPage.toString());
309 | const localRow = targetGlobalRow - (newRowPage - 1) * maxRowsRange;
310 | const localCol = targetGlobalCol - (newColPage - 1) * maxColsRange;
311 | const gridRow = fixedRowCount + localRow;
312 | const gridCol = fixedColumnCount + localCol;
313 | setCurrentRow(newRowPage);
314 | setCurrentColumn(newColPage);
315 | setTimeout(() => {
316 | setGotoCell({ row: gridRow, column: gridCol });
317 | setHighlightCell({ row: gridRow, column: gridCol });
318 | setTimeout(() => {
319 | setHighlightCell(null);
320 | }, 2000);
321 | }, 500);
322 | }
323 | };
324 |
325 | if (!allowedTypes.includes(variableType)) {
326 | return (
327 |
336 |
338 | );
339 | }
340 |
341 | return (
342 | Wrong variable type: {variableType}
337 |
351 |
402 | );
403 | };
404 |
--------------------------------------------------------------------------------
/src/components/variablePanelWidget.tsx:
--------------------------------------------------------------------------------
1 | import { ReactWidget } from '@jupyterlab/apputils';
2 | import React from 'react';
3 | import { VariablePanel } from './variablePanel';
4 | import { NotebookPanel } from '@jupyterlab/notebook';
5 | import { VariableRefreshContextProvider } from '../context/variableRefershContext';
6 | import { ThemeContextProvider } from '../context/themeContext';
7 |
8 | export interface VariablePanelWidgetProps {
9 | variableName: string;
10 | variableType: string;
11 | variableShape: string;
12 | notebookPanel?: NotebookPanel | null;
13 | }
14 |
15 | export class VariablePanelWidget extends ReactWidget {
16 | constructor(private props: VariablePanelWidgetProps) {
17 | super();
18 | this.update();
19 | }
20 |
21 | protected render(): JSX.Element {
22 | return (
23 |
352 | {/* Grid */}
353 |
354 | {({ width, height }: { width: number; height: number }) => (
355 |
361 | columnWidths[index]
362 | }
363 | rowHeight={20}
364 | height={height}
365 | rowCount={rowCount}
366 | width={width}
367 | scrollToRow={gotoCell ? gotoCell.row : undefined}
368 | scrollToColumn={gotoCell ? gotoCell.column : undefined}
369 | styleTopLeftGrid={{ background: isDark ? '#555' : '#e0e0e0' }}
370 | styleTopRightGrid={{ background: isDark ? '#555' : '#e0e0e0' }}
371 | styleBottomLeftGrid={{ background: isDark ? '#222' : '#fff' }}
372 | styleBottomRightGrid={{ background: isDark ? '#222' : '#fff' }}
373 | />
374 | )}
375 |
376 |
377 |
378 | {/* pagination */}
379 |
401 |
24 |
27 |
28 |
35 |
36 |
37 | );
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/variableRefreshButton.tsx:
--------------------------------------------------------------------------------
1 | import { refreshIcon } from '../icons/refreshIcon';
2 | import React, { useEffect, useState } from 'react';
3 | import { useVariableContext } from '../context/notebookVariableContext';
4 | import { ISettingRegistry } from '@jupyterlab/settingregistry';
5 | import { VARIABLE_INSPECTOR_ID, autoRefreshProperty } from '../index';
6 |
7 | interface IProps {
8 | settingRegistry: ISettingRegistry | null;
9 | }
10 |
11 | export const RefreshButton: React.FC
84 |
91 |
92 | {isOpen && (
93 |
154 | );
155 | };
156 |
--------------------------------------------------------------------------------
/src/context/codeExecutionContext.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | createContext,
3 | useContext,
4 | useEffect,
5 | useState,
6 | ReactNode
7 | } from 'react';
8 | import { KernelMessage } from '@jupyterlab/services';
9 | import { IExecuteInputMsg } from '@jupyterlab/services/lib/kernel/messages';
10 | import { useNotebookPanelContext } from './notebookPanelContext';
11 | import { useNotebookKernelContext } from './notebookKernelContext';
12 | import { useVariableContext } from './notebookVariableContext';
13 | import { VARIABLE_INSPECTOR_ID, autoRefreshProperty } from '../index';
14 | import { ISettingRegistry } from '@jupyterlab/settingregistry';
15 | import { variableDict } from '../python_code/getVariables';
16 |
17 | interface ICodeExecutionContext {}
18 |
19 | interface ICodeExecutionContextProviderProps {
20 | children: ReactNode;
21 | settingRegistry: ISettingRegistry | null;
22 | }
23 |
24 | const CodeExecutionContext = createContext
94 |
152 | )}
153 | -
95 | {/*
108 |
121 |
*/} 122 | 123 | 132 | 141 | 150 |