15 |
22 |
23 | ) : (
24 | <>
25 | )}
26 |
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/.github/workflows/check-release.yml:
--------------------------------------------------------------------------------
1 | name: Check Release
2 | on:
3 | pull_request:
4 | branches: ["*"]
5 |
6 | concurrency:
7 | group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
8 | cancel-in-progress: true
9 |
10 | jobs:
11 | check_release:
12 | runs-on: ubuntu-latest
13 | steps:
14 | - name: Checkout
15 | uses: actions/checkout@v4
16 | - name: Base Setup
17 | uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
18 | - name: Check Release
19 | uses: jupyter-server/jupyter_releaser/.github/actions/check-release@v2
20 | with:
21 |
22 | token: ${{ secrets.GITHUB_TOKEN }}
23 |
24 | - name: Upload Distributions
25 | uses: actions/upload-artifact@v4
26 | with:
27 | name: variable_inspector-releaser-dist-${{ github.run_number }}
28 | path: .jupyter_releaser_checkout/dist
29 |
--------------------------------------------------------------------------------
/src/icons/settingsIcon.ts:
--------------------------------------------------------------------------------
1 | import { LabIcon } from '@jupyterlab/ui-components';
2 |
3 | const svgStr = `
4 |
5 | `;
6 |
7 | export const settingsIcon = new LabIcon({
8 | name: 'my-variable-settings-icon',
9 | svgstr: svgStr
10 | });
11 |
12 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/schema/plugin.json:
--------------------------------------------------------------------------------
1 | {
2 | "jupyter.lab.shortcuts": [],
3 | "title": "variable-inspector",
4 | "description": "variable-inspector settings.",
5 | "type": "object",
6 | "properties": {
7 | "variableInspectorAutoRefresh": {
8 | "type": "boolean",
9 | "title": "variableInspectorAutoRefresh",
10 | "description": "Enable Auto Refresh",
11 | "default": true
12 | },
13 | "variableInspectorShowType": {
14 | "type": "boolean",
15 | "title": "variableInspectorShowType",
16 | "description": "Show Type Column",
17 | "default": true
18 | },
19 | "variableInspectorShowShape": {
20 | "type": "boolean",
21 | "title": "variableInspectorShowShape",
22 | "description": "Show Shape Column",
23 | "default": false
24 | },
25 | "variableInspectorShowSize": {
26 | "type": "boolean",
27 | "title": "variableInspectorShowSize",
28 | "description": "Show Size Column",
29 | "default": false
30 | },
31 | "language": {
32 | "type": "string",
33 | "title": "Language",
34 | "description": "Set the display language for the Your Variables.",
35 | "default": "en"
36 | }
37 | },
38 | "additionalProperties": false
39 | }
40 |
--------------------------------------------------------------------------------
/src/context/themeContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useEffect, useState, useContext } from 'react';
2 |
3 | interface ThemeContextProps {
4 | isDark: boolean;
5 | }
6 |
7 | const ThemeContext = createContext
24 |
27 |
28 |
35 |
36 |
37 | );
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/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 | import { t } from '../translator';
10 |
11 | interface IVariableListComponentProps {
12 | commands: CommandRegistry;
13 | labShell: ILabShell;
14 | settingRegistry: ISettingRegistry | null;
15 | }
16 |
17 | export const VariableListComponent: React.FC
24 | <>
25 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/context/notebookKernelContext.tsx:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useEffect, useState } from 'react';
2 | import { NotebookWatcher, KernelInfo } from '../watchers/notebookWatcher';
3 |
4 | type NotebookKernelContextType = KernelInfo | null;
5 |
6 | const NotebookKernelContext = createContext
26 |
30 | {t('Your Variables')}
27 |
31 |
38 |
39 | //
73 |
74 |
75 |
78 |
82 |
85 |
91 |
92 |
93 |
94 |
95 |
96 | );
97 | }
98 | }
99 |
100 | export function createVariableInspectorSidebar(
101 | notebookWatcher: NotebookWatcher,
102 | commands: CommandRegistry,
103 | labShell: ILabShell,
104 | settingRegistry: ISettingRegistry | null,
105 | stateDB: IStateDB,
106 | ): VariableInspectorSidebarWidget {
107 | return new VariableInspectorSidebarWidget(
108 | notebookWatcher,
109 | commands,
110 | labShell,
111 | settingRegistry,
112 | stateDB
113 | );
114 | }
115 |
--------------------------------------------------------------------------------
/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
118 | {loading ? (
119 |
155 | );
156 | };
157 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
120 | {t('Loading variables...')}
121 |
122 | ) : variables.length === 0 ? (
123 |
124 | {t('Sorry, no variables available.')}
125 |
126 | ) : (
127 | -
128 |
- 129 | {t('Name')} 130 | {showType && {t('Type')}} 131 | {showShape && {t('Shape')}} 132 | {showSize && {t('Size')}} 133 | {t('Value')} 134 | 135 | {filteredVariables.map((variable, index) => ( 136 |
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 |
122 | Here’s a simple `README.md` you can drop into your repo 👇
123 |
124 | ## Running End-to-End UI Tests
125 |
126 | This project uses **Playwright** to run UI tests against JupyterLab with the MLJAR extension.
127 |
128 | ### Prerequisites
129 |
130 | - Node.js / Yarn
131 | - Playwright installed (`jlpm playwright install`)
132 |
133 | ### How to Run Tests
134 |
135 | You need **two terminals**:
136 |
137 | #### 1. Start JupyterLab
138 | In the first terminal, run:
139 |
140 | ```bash
141 | jlpm lab
142 | ```
143 |
144 | This will start JupyterLab at `http://localhost:8899/lab`.
145 |
146 | #### 2. Run UI Tests
147 |
148 | In the second terminal, run:
149 |
150 | ```bash
151 | jlpm test:ui:headed
152 | ```
153 |
154 | This will:
155 |
156 | * Remove any temporary `Untitled*.ipynb` files
157 | * Launch Playwright in **headed mode** (with a visible browser)
158 | * Run the end-to-end tests defined in `tests/e2e`
159 | * Remove leftover `Untitled*.ipynb` files after tests finish
160 |
161 | ### Notes
162 |
163 | * Logs are printed to the console during test execution for easier debugging.
164 | * If you encounter navigation timeout errors, make sure JupyterLab is fully started before running the tests.
165 |
166 |
167 | ### Packaging the extension
168 |
169 | See [RELEASE](RELEASE.md)
170 |
--------------------------------------------------------------------------------
/src/components/variableSettingsButton.tsx:
--------------------------------------------------------------------------------
1 | import { settingsIcon } from '../icons/settingsIcon';
2 | import { checkIcon } from '../icons/checkIcon';
3 | import React, { useEffect, useRef, useState } from 'react';
4 | import { ISettingRegistry } from '@jupyterlab/settingregistry';
5 | import { t } from '../translator';
6 |
7 | import {
8 | VARIABLE_INSPECTOR_ID,
9 | // autoRefreshProperty,
10 | showTypeProperty,
11 | showShapeProperty,
12 | showSizeProperty
13 | } from '../index';
14 |
15 | interface ISettingsButtonProps {
16 | settingRegistry: ISettingRegistry | null;
17 | }
18 |
19 | export const SettingsButton: React.FC
107 |
114 |
115 | {isOpen && (
116 |
177 | );
178 | };
179 |
--------------------------------------------------------------------------------
/src/python_code/getMatrix.ts:
--------------------------------------------------------------------------------
1 | export const getMatrix = (
2 | varName: string,
3 | startRow: number,
4 | endRow: number,
5 | startColumn: number,
6 | endColumn: number
7 | ): string => `
8 | import importlib
9 | from datetime import datetime
10 | from IPython.display import JSON
11 |
12 | def __get_variable_shape(obj):
13 | if hasattr(obj, 'shape'):
14 | return " x ".join(map(str, obj.shape))
15 | if isinstance(obj, list):
16 | if obj and all(isinstance(el, list) for el in obj):
17 | if len(set(map(len, obj))) == 1:
18 | return f"{len(obj)} x {len(obj[0])}"
19 | else:
20 | return f"{len(obj)}"
21 | return str(len(obj))
22 | return ""
23 |
24 | def __format_content(item):
25 | if isinstance(item, list):
26 | return [__format_content(subitem) for subitem in item]
27 | elif isinstance(item, dict):
28 | return {k: __format_content(v) for k, v in item.items()}
29 | elif isinstance(item, str):
30 | return item[:50] + "..." if len(item) > 50 else item
31 | elif isinstance(item, (int, float, bool, datetime)) or item is None:
32 | return item
33 | else:
34 | if hasattr(item, "name"):
35 | return getattr(item, "name")
36 | return type(item).__name__
37 |
38 | def __mljar_variable_inspector_get_matrix_content(
39 | var_name="${varName}",
40 | start_row=${startRow},
41 | end_row=${endRow},
42 | start_column=${startColumn},
43 | end_column=${endColumn}
44 | ):
45 | if var_name not in globals():
46 | return JSON({"error": "Variable not found."})
47 |
48 | obj = globals()[var_name]
49 | module_name = type(obj).__module__
50 | var_type = type(obj).__name__
51 | var_shape = __get_variable_shape(obj)
52 |
53 | if "numpy" in module_name:
54 | try:
55 | np = importlib.import_module("numpy")
56 | except ImportError:
57 | return JSON({"error": "Numpy is not installed."})
58 | if isinstance(obj, np.ndarray):
59 | if obj.ndim > 2:
60 | return JSON({
61 | "variable": var_name,
62 | "variableType": var_type,
63 | "variableShape": var_shape,
64 | "error": "Numpy array has more than 2 dimensions."
65 | })
66 | if obj.ndim == 1:
67 | actual_end_row = min(end_row, len(obj))
68 | sliced = obj[start_row:actual_end_row]
69 | returnedSize = [start_row, actual_end_row, 0, 1]
70 | else:
71 | actual_end_row = min(end_row, obj.shape[0])
72 | actual_end_column = min(end_column, obj.shape[1])
73 | sliced = obj[start_row:actual_end_row, start_column:actual_end_column]
74 | returnedSize = [start_row, actual_end_row, start_column, actual_end_column]
75 | return JSON({
76 | "variable": var_name,
77 | "variableType": var_type,
78 | "variableShape": var_shape,
79 | "returnedSize": returnedSize,
80 | "content": __format_content(sliced.tolist())
81 | })
82 |
83 | if "pandas" in module_name:
84 | try:
85 | pd = importlib.import_module("pandas")
86 | except ImportError:
87 | return JSON({"error": "Pandas is not installed."})
88 | if isinstance(obj, pd.DataFrame):
89 | actual_end_row = min(end_row, len(obj.index))
90 | actual_end_column = min(end_column, len(obj.columns))
91 | sliced = obj.iloc[start_row:actual_end_row, start_column:actual_end_column]
92 | result = []
93 | for col in sliced.columns:
94 | col_values = [col] + sliced[col].tolist()
95 | result.append(col_values)
96 | returnedSize = [start_row, actual_end_row, start_column, actual_end_column]
97 | return JSON({
98 | "variable": var_name,
99 | "variableType": var_type,
100 | "variableShape": var_shape,
101 | "returnedSize": returnedSize,
102 | "content": __format_content(result)
103 | })
104 | elif isinstance(obj, pd.Series):
105 | actual_end_row = min(end_row, len(obj))
106 | sliced = obj.iloc[start_row:actual_end_row]
107 | df = sliced.to_frame()
108 | result = []
109 | for col in df.columns:
110 | col_values = [col] + df[col].tolist()
111 | result.append(col_values)
112 | returnedSize = [start_row, actual_end_row, 0, 1]
113 | return JSON({
114 | "variable": var_name,
115 | "variableType": var_type,
116 | "variableShape": var_shape,
117 | "returnedSize": returnedSize,
118 | "content": __format_content(result)
119 | })
120 |
121 | if isinstance(obj, list):
122 | if all(isinstance(el, list) for el in obj):
123 | if len(set(map(len, obj))) == 1:
124 | actual_end_row = min(end_row, len(obj))
125 | actual_end_column = min(end_column, len(obj[0]))
126 | sliced = [row[start_column:actual_end_column] for row in obj[start_row:actual_end_row]]
127 | returnedSize = [start_row, actual_end_row, start_column, actual_end_column]
128 | content = __format_content(sliced)
129 | else:
130 | actual_end_row = min(end_row, len(obj))
131 | sliced = obj[start_row:actual_end_row]
132 | returnedSize = [start_row, actual_end_row, 0, 1]
133 | content = ["list" for _ in sliced]
134 | var_shape = f"{len(obj)}"
135 | return JSON({
136 | "variable": var_name,
137 | "variableType": var_type,
138 | "variableShape": var_shape,
139 | "returnedSize": returnedSize,
140 | "content": content
141 | })
142 | else:
143 | actual_end_row = min(end_row, len(obj))
144 | sliced = obj[start_row:actual_end_row]
145 | returnedSize = [start_row, actual_end_row, 0, 1]
146 | return JSON({
147 | "variable": var_name,
148 | "variableType": var_type,
149 | "variableShape": str(len(obj)),
150 | "returnedSize": returnedSize,
151 | "content": __format_content(sliced)
152 | })
153 |
154 | if isinstance(obj, dict):
155 | items = list(obj.items())[start_row:end_row]
156 | sliced_dict = dict(items)
157 | returnedSize = [start_row, end_row, 0, 1]
158 | var_shape = str(len(obj))
159 | return JSON({
160 | "variable": var_name,
161 | "variableType": var_type,
162 | "variableShape": var_shape,
163 | "returnedSize": returnedSize,
164 | "content": __format_content(sliced_dict)
165 | })
166 |
167 | return JSON({
168 | "variable": var_name,
169 | "variableType": var_type,
170 | "variableShape": "unknown",
171 | "error": "Variable is not a supported array type.",
172 | "content": [10, 10, 10]
173 | })
174 |
175 | __mljar_variable_inspector_get_matrix_content()
176 | `;
177 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "variable-inspector",
3 | "version": "1.1.0",
4 | "description": "Variable explorer for Jupyter Lab.",
5 | "keywords": [
6 | "jupyter",
7 | "jupyterlab",
8 | "jupyterlab-extension"
9 | ],
10 | "homepage": "https://github.com/mljar/variable-inspector.git",
11 | "bugs": {
12 | "url": "https://github.com/mljar/variable-inspector.git/issues"
13 | },
14 | "license": "AGPL-3.0-or-later",
15 | "author": {
16 | "name": "MLJAR Sp z o.o.",
17 | "email": "contact@mljar.com"
18 | },
19 | "files": [
20 | "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
21 | "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
22 | "src/**/*.{ts,tsx}",
23 | "schema/*.json",
24 | "locales/**/*"
25 | ],
26 | "main": "lib/index.js",
27 | "types": "lib/index.d.ts",
28 | "style": "style/index.css",
29 | "repository": {
30 | "type": "git",
31 | "url": "https://github.com/mljar/variable-inspector.git.git"
32 | },
33 | "scripts": {
34 | "build": "jlpm build:lib && jlpm build:labextension:dev",
35 | "build:prod": "jlpm clean && jlpm build:lib:prod && jlpm build:labextension",
36 | "build:labextension": "jupyter labextension build .",
37 | "build:labextension:dev": "jupyter labextension build --development True .",
38 | "build:lib": "tsc --sourceMap && cpx \"locales/**/*\" lib/locales",
39 | "build:lib:prod": "tsc && cpx \"locales/**/*\" lib/locales",
40 | "clean": "jlpm clean:lib",
41 | "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
42 | "clean:lintcache": "rimraf .eslintcache .stylelintcache",
43 | "clean:labextension": "rimraf variable_inspector/labextension variable_inspector/_version.py",
44 | "clean:all": "jlpm clean:lib && jlpm clean:labextension && jlpm clean:lintcache",
45 | "eslint": "jlpm eslint:check --fix",
46 | "eslint:check": "eslint . --cache --ext .ts,.tsx",
47 | "install:extension": "jlpm build",
48 | "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
49 | "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
50 | "prettier": "jlpm prettier:base --write --list-different",
51 | "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
52 | "prettier:check": "jlpm prettier:base --check",
53 | "stylelint": "jlpm stylelint:check --fix",
54 | "stylelint:check": "stylelint --cache \"style/**/*.css\"",
55 | "watch": "run-p watch:src watch:labextension",
56 | "watch:src": "tsc -w --sourceMap",
57 | "watch:labextension": "jupyter labextension watch .",
58 | "lab": "jupyter lab --no-browser --IdentityProvider.token='' --ServerApp.password='' --ServerApp.allow_origin='*' --ServerApp.disable_check_xsrf=True --ServerApp.port=8899",
59 | "test:e2e": "playwright test",
60 | "test:ui:headed": "rm -f \"Untitled*.ipynb\" && playwright test --headed && rm -f \"Untitled*.ipynb\""
61 | },
62 | "dependencies": {
63 | "@jupyterlab/application": "^4.0.0",
64 | "@jupyterlab/notebook": "^4.0.0",
65 | "@jupyterlab/settingregistry": "^4.0.0",
66 | "@jupyterlab/translation": "^4.4.4",
67 | "react": "^18.2.0",
68 | "react-dom": "^18.2.0",
69 | "react-virtualized": "^9.22.6"
70 | },
71 | "devDependencies": {
72 | "@jupyterlab/builder": "^4.0.0",
73 | "@playwright/test": "^1.55.1",
74 | "@types/json-schema": "^7.0.11",
75 | "@types/react": "^18.0.26",
76 | "@types/react-addons-linked-state-mixin": "^0.14.22",
77 | "@types/react-dom": "^18.0.10",
78 | "@types/react-virtualized": "^9.22.0",
79 | "@typescript-eslint/eslint-plugin": "^6.1.0",
80 | "@typescript-eslint/parser": "^6.1.0",
81 | "cpx2": "^8.0.0",
82 | "css-loader": "^6.7.1",
83 | "eslint": "^8.36.0",
84 | "eslint-config-prettier": "^8.8.0",
85 | "eslint-plugin-prettier": "^5.0.0",
86 | "npm-run-all2": "^7.0.1",
87 | "prettier": "^3.0.0",
88 | "rimraf": "^5.0.1",
89 | "source-map-loader": "^1.0.2",
90 | "style-loader": "^3.3.1",
91 | "stylelint": "^15.10.1",
92 | "stylelint-config-recommended": "^13.0.0",
93 | "stylelint-config-standard": "^34.0.0",
94 | "stylelint-csstree-validator": "^3.0.0",
95 | "stylelint-prettier": "^4.0.0",
96 | "typescript": "~5.0.2",
97 | "webpack": "^5.97.1",
98 | "yjs": "^13.5.0"
99 | },
100 | "sideEffects": [
101 | "style/*.css",
102 | "style/index.js"
103 | ],
104 | "styleModule": "style/index.js",
105 | "publishConfig": {
106 | "access": "public"
107 | },
108 | "jupyterlab": {
109 | "extension": true,
110 | "outputDir": "variable_inspector/labextension",
111 | "schemaDir": "schema"
112 | },
113 | "eslintIgnore": [
114 | "node_modules",
115 | "dist",
116 | "coverage",
117 | "**/*.d.ts"
118 | ],
119 | "eslintConfig": {
120 | "extends": [
121 | "eslint:recommended",
122 | "plugin:@typescript-eslint/eslint-recommended",
123 | "plugin:@typescript-eslint/recommended",
124 | "plugin:prettier/recommended"
125 | ],
126 | "parser": "@typescript-eslint/parser",
127 | "parserOptions": {
128 | "project": "tsconfig.json",
129 | "sourceType": "module"
130 | },
131 | "plugins": [
132 | "@typescript-eslint"
133 | ],
134 | "rules": {
135 | "@typescript-eslint/naming-convention": [
136 | "error",
137 | {
138 | "selector": "interface",
139 | "format": [
140 | "PascalCase"
141 | ],
142 | "custom": {
143 | "regex": "^I[A-Z]",
144 | "match": true
145 | }
146 | }
147 | ],
148 | "@typescript-eslint/no-unused-vars": [
149 | "warn",
150 | {
151 | "args": "none"
152 | }
153 | ],
154 | "@typescript-eslint/no-explicit-any": "off",
155 | "@typescript-eslint/no-namespace": "off",
156 | "@typescript-eslint/no-use-before-define": "off",
157 | "@typescript-eslint/quotes": [
158 | "error",
159 | "single",
160 | {
161 | "avoidEscape": true,
162 | "allowTemplateLiterals": false
163 | }
164 | ],
165 | "curly": [
166 | "error",
167 | "all"
168 | ],
169 | "eqeqeq": "error",
170 | "prefer-arrow-callback": "error"
171 | }
172 | },
173 | "prettier": {
174 | "singleQuote": true,
175 | "trailingComma": "none",
176 | "arrowParens": "avoid",
177 | "endOfLine": "auto",
178 | "overrides": [
179 | {
180 | "files": "package.json",
181 | "options": {
182 | "tabWidth": 4
183 | }
184 | }
185 | ]
186 | },
187 | "stylelint": {
188 | "extends": [
189 | "stylelint-config-recommended",
190 | "stylelint-config-standard",
191 | "stylelint-prettier/recommended"
192 | ],
193 | "plugins": [
194 | "stylelint-csstree-validator"
195 | ],
196 | "rules": {
197 | "csstree/validator": true,
198 | "property-no-vendor-prefix": null,
199 | "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
200 | "selector-no-vendor-prefix": null,
201 | "value-no-vendor-prefix": null
202 | }
203 | }
204 | }
205 |
--------------------------------------------------------------------------------
/src/context/notebookVariableContext.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | createContext,
3 | useContext,
4 | useState,
5 | useEffect,
6 | useCallback,
7 | useRef
8 | } from 'react';
9 | import { useNotebookPanelContext } from './notebookPanelContext';
10 | import { useNotebookKernelContext } from './notebookKernelContext';
11 | import { KernelMessage } from '@jupyterlab/services';
12 | import { IStateDB } from '@jupyterlab/statedb';
13 | import { withIgnoredSidebarKernelUpdates } from '../utils/kernelOperationNotifier';
14 | import { variableDict } from '../python_code/getVariables';
15 | import { CommandRegistry } from '@lumino/commands';
16 |
17 | export interface IVariableInfo {
18 | name: string;
19 | type: string;
20 | shape: string;
21 | dimension: number;
22 | size: number;
23 | value: string;
24 | }
25 |
26 | interface IVariableContextProps {
27 | variables: IVariableInfo[];
28 | loading: boolean;
29 | error: string | null;
30 | searchTerm: string;
31 | setSearchTerm: React.Dispatch
117 |
175 | )}
176 | -
118 | {/*
131 |
144 |
*/} 145 | 146 | 155 | 164 | 173 |
56 |
294 | );
295 | };
296 |
--------------------------------------------------------------------------------
/style/base.css:
--------------------------------------------------------------------------------
1 | .mljar-variable-inspector-sidebar-widget {
2 | background-color: #ffffff;
3 | padding: 10px 0px 10px 10px;
4 | font-family: 'Courier New', Courier, monospace;
5 | }
6 |
7 | .mljar-variable-inspector-sidebar-container {
8 | height: 99vh;
9 | }
10 | .mljar-variable-inspector-sidebar-container::-webkit-scrollbar {
11 | display: none;
12 | }
13 |
14 | .mljar-variable-inspector-list-container {
15 | padding-right: 20px;
16 | display: flex;
17 | flex-direction: column;
18 | height: 100%;
19 | overflow-y: auto;
20 | position: relative;
21 | }
22 |
23 | .mljar-variable-inspector-list {
24 | overflow-y: auto;
25 | min-height: 0;
26 | max-height: 85vh;
27 | list-style: none;
28 | padding: 0;
29 | margin: 0;
30 | }
31 |
32 | .mljar-variable-header-container {
33 | display: flex;
34 | justify-content: space-between;
35 | align-items: flex-end;
36 | border-bottom: 2px solid #ddd;
37 | position: sticky;
38 | top: 0;
39 | z-index: 20;
40 | background: var(--jp-layout-color1);
41 | margin-bottom: 0px;
42 | margin-right: 0px;
43 | padding-right: 20px;
44 | }
45 |
46 | .mljar-variable-header {
47 | flex: 4;
48 | font-size: 0.95rem;
49 | font-weight: 700;
50 | color: var(--jp-ui-font-color1);
51 | text-align: left;
52 | padding-bottom: 8px;
53 | margin: 0;
54 | }
55 |
56 | .mljar-variable-inspector-header-list {
57 | display: grid;
58 | grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
59 | align-items: center;
60 | font-size: 0.9rem;
61 | column-gap: 1rem;
62 | padding: 10px 8px;
63 | background-color: var(--jp-layout-color0);
64 | color: #0099cc;
65 | border: 1px solid #0099cc;
66 | border-top-right-radius: 5px;
67 | border-top-left-radius: 5px;
68 | font-weight: 800;
69 | }
70 |
71 | .mljar-variable-inspector-item {
72 | display: grid;
73 | grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
74 | align-items: center;
75 | column-gap: 1rem;
76 | padding-left: 8px;
77 | padding-right: 8px;
78 | border-bottom: 1px solid var(--jp-border-color2);
79 | border-left: 1px solid var(--jp-border-color2);
80 | border-right: 1px solid var(--jp-border-color2);
81 | margin-bottom: 0px;
82 | margin-right: 0px;
83 | width: 100%;
84 | box-sizing: border-box;
85 | background-color: var(--jp-layout-color0);
86 | font-size: 0.8rem;
87 | font-weight: 500;
88 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
89 | }
90 |
91 | .mljar-variable-inspector-item.small-value {
92 | min-height: 39px;
93 | }
94 |
95 | .mljar-variable-inspector-show-variable-button {
96 | background: none;
97 | position: relative;
98 | border: none;
99 | border-radius: 4px;
100 | cursor: pointer;
101 | padding: 4px;
102 | margin: 5px 0px;
103 | display: inline-block;
104 | width: 28px;
105 | align-items: center;
106 | justify-content: flex-start;
107 | color: #0099cc;
108 | transition: background-color 0.3s ease;
109 | }
110 |
111 | .mljar-variable-inspector-show-variable-button:disabled {
112 | opacity: 0.5;
113 | cursor: not-allowed;
114 | }
115 |
116 | .mljar-variable-search-bar-container {
117 | margin-bottom: 10px;
118 | margin-right: 0px;
119 | padding-right: 20px;
120 | padding-top: 15px;
121 | padding-bottom: 5px;
122 | position: sticky;
123 | top: 38px;
124 | z-index: 10;
125 | background: var(--jp-layout-color1);
126 | }
127 |
128 | .mljar-variable-inspector-search-bar-input {
129 | width: 100%;
130 | padding: 8px;
131 | box-sizing: border-box;
132 | background-color: var(--jp-layout-color1);
133 | color: var(--jp-ui-font-color1);
134 | border: 1px solid var(--jp-border-color2);
135 | border-radius: 5px;
136 | }
137 |
138 | .mljar-variable-inspector-search-bar-input:focus {
139 | outline: none;
140 | border: 2px solid var(--jp-ui-font-color1);
141 | }
142 |
143 | .mljar-variable-inspector-search-bar-input::placeholder {
144 | color: var(--jp-ui-font-color2);
145 | }
146 |
147 | .mljar-variable-inspector-variable-name {
148 | font-weight: 600;
149 | }
150 |
151 | .mljar-variable-inspector-item:hover {
152 | background-color: var(--jp-layout-color2);
153 | cursor: pointer;
154 | }
155 |
156 | .mljar-variable-inspector-item.active {
157 | background-color: var(--jp-brand-color1);
158 | color: var(--jp-ui-inverse-font-color1);
159 | }
160 |
161 | .mljar-varable-item.active {
162 | background-color: var(--jp-brand-color1);
163 | color: var(--jp-ui-inverse-font-color1);
164 | }
165 |
166 | .mljar-variable-inspector-variable-name,
167 | .mljar-variable-type,
168 | .mljar-variable-inspector-variable-size,
169 | .mljar-variable-inspector-variable-value,
170 | .mljar-variable-shape {
171 | overflow: hidden;
172 | text-overflow: ellipsis;
173 | white-space: nowrap;
174 | }
175 |
176 | .mljar-variable-inspector-variable-size {
177 | word-spacing: -5px;
178 | }
179 |
180 | .mljar-variable-inspector-show-variable-button:hover {
181 | color: #fff;
182 | background-color: #0099cc;
183 | transition: background-color 0.3s ease;
184 | }
185 |
186 | .mljar-variable-detail-button-icon {
187 | display: flex;
188 | align-items: center;
189 | width: 20px;
190 | height: 20px;
191 | }
192 |
193 | .mljar-variable-inspector-skip-icon {
194 | display: flex;
195 | align-items: center;
196 | width: 15px;
197 | height: 15px;
198 | }
199 |
200 | .mljar-variable-inspector-settings-button,
201 | .mljar-variable-inspector-refresh-button {
202 | width: 30px;
203 | display: flex;
204 | margin: 2px 1px;
205 | align-items: center;
206 | justify-content: center;
207 | gap: 8px;
208 | color: #0099cc;
209 | border: none;
210 | border-radius: 4px;
211 | padding: 8px 0px;
212 | cursor: pointer;
213 | font-size: 0.75rem;
214 | transition: background-color 0.3s ease;
215 | }
216 |
217 | .mljar-variable-inspector-skip-button {
218 | display: flex;
219 | margin: 0px;
220 | align-items: center;
221 | justify-content: center;
222 | color: #0099cc;
223 | background-color: transparent;
224 | border: none;
225 | padding: 2px;
226 | border-radius: 4px;
227 | cursor: pointer;
228 | font-size: 0.75rem;
229 | transition: background-color 0.3s ease;
230 | }
231 |
232 | .mljar-variable-inspector-skip-button:disabled,
233 | .mljar-variable-inspector-settings-button:disabled,
234 | .mljar-variable-inspector-refresh-button:disabled {
235 | cursor: not-allowed;
236 | }
237 |
238 | .mljar-variable-inspector-skip-button:hover:not(:disabled),
239 | .mljar-variable-inspector-settings-button:hover:not(:disabled),
240 | .mljar-variable-inspector-refresh-button:hover:not(:disabled) {
241 | background-color: #0099cc;
242 | color: #ffffff;
243 | }
244 |
245 | .mljar-variable-inspector-refresh-button.manually-refresh {
246 | color: #28a745;
247 | }
248 |
249 | .mljar-variable-inspector-refresh-button.manually-refresh:hover:not(:disabled) {
250 | background-color: #28a745;
251 | color: #ffffff;
252 | }
253 |
254 | .mljar-variable-inspector-settings-button.active {
255 | background-color: #0099cc;
256 | color: #ffffff;
257 | }
258 |
259 | .mljar-variable-inspector-settings-icon,
260 | .mljar-variable-inspector-refresh-icon {
261 | display: flex;
262 | align-items: center;
263 | width: 15px;
264 | height: 15px;
265 | }
266 |
267 | .mljar-variable-inspector-message {
268 | margin: 10px 0px 0px 5px;
269 | font-size: small;
270 | }
271 |
272 | .mljar-variable-inspector-settings-container {
273 | position: relative;
274 | display: inline-block;
275 | }
276 |
277 | .mljar-variable-inspector-settings-menu {
278 | position: absolute;
279 | right: 0;
280 | top: 40px;
281 | width: 200px;
282 | background-color: var(--jp-layout-color0);
283 | border: 1px solid var(--jp-layout-color3);
284 | box-shadow: 0px 2px 24px 0px var(--jp-layout-color2);
285 | border-radius: 5px;
286 | z-index: 100;
287 | }
288 |
289 | .mljar-variable-inspector-settings-menu-list {
290 | list-style: none;
291 | margin: 0px;
292 | padding: 0px;
293 | }
294 |
295 | .mljar-variable-inspector-settings-menu-item {
296 | font-size: 12px;
297 | padding: 5px 10px;
298 | cursor: pointer;
299 | text-align: left;
300 | width: 100%;
301 | transition: background 0.3s ease;
302 | display: flex;
303 | justify-content: space-between;
304 | align-items: center;
305 | }
306 |
307 | .mljar-variable-inspector-settings-menu-item.first {
308 | border-top-left-radius: 5px;
309 | border-top-right-radius: 5px;
310 | }
311 |
312 | .mljar-variable-inspector-settings-menu-item.last {
313 | border-bottom-left-radius: 5px;
314 | border-bottom-right-radius: 5px;
315 | }
316 |
317 | .mljar-variable-inspector-settings-menu-item:hover {
318 | background-color: var(--jp-layout-color2);
319 | cursor: pointer;
320 | }
321 |
322 | .mljar-variable-actions-container {
323 | display: flex;
324 | gap: 10px;
325 | margin-bottom: 10px;
326 | margin-right: 10px;
327 | }
328 |
329 | /* main extension scrollbar */
330 | .mljar-variable-inspector-list::-webkit-scrollbar {
331 | width: 0px;
332 | }
333 |
334 | .mljar-variable-inspector-list:hover::-webkit-scrollbar {
335 | width: 10px;
336 | height: 8px;
337 | }
338 |
339 | .mljar-variable-inspector-list:hover::-webkit-scrollbar-track {
340 | background: var(--jp-layout-color2);
341 | border-radius: 4px;
342 | }
343 |
344 | .mljar-variable-inspector-list:hover::-webkit-scrollbar-thumb {
345 | background: var(--jp-layout-color3);
346 | border-radius: 8px;
347 | border: 2px solid transparent;
348 | background-clip: padding-box;
349 | }
350 |
351 | .mljar-variable-spinner {
352 | border: 4px solid rgba(0, 0, 0, 0.1);
353 | width: 10px;
354 | height: 10px;
355 | border-radius: 50%;
356 | border-left-color: #ffffff;
357 | animation: spin 1s linear infinite;
358 | }
359 |
360 | .mljar-variable-spinner-big {
361 | border: 4px solid rgba(0, 0, 0, 0.1);
362 | width: 20px;
363 | height: 20px;
364 | border-radius: 50%;
365 | border-left-color: #ffffff;
366 | animation: spin 1s linear infinite;
367 | }
368 |
369 | @keyframes spin {
370 | to {
371 | transform: rotate(360deg);
372 | }
373 | }
374 |
375 | .mljar-variable-inspector-pagination-container {
376 | padding: 8px;
377 | background-color: var(--jp-layout-color0);
378 | margin: auto;
379 | align-items: center;
380 | }
381 |
382 | .mljar-variable-inspector-pagination-item {
383 | display: flex;
384 | flex-direction: column;
385 | align-items: center;
386 | gap: 10px;
387 | }
388 |
389 | .mljar-variable-inspector-choose-range {
390 | display: flex;
391 | align-items: center;
392 | gap: 10px;
393 | font-size: 14px;
394 | }
395 |
396 | .mljar-variable-inspector-pagination-input {
397 | width: 80px;
398 | padding: 5px;
399 | text-align: center;
400 | border: 1px solid #ccc;
401 | border-radius: 4px;
402 | font-size: 14px;
403 | background-color: var(--jp-border-color2);
404 | }
405 |
406 | .mljar-variable-inspector-pagination-input:focus {
407 | outline: none;
408 | border-color: #007bff;
409 | box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
410 | }
411 |
412 | .mljar-variable-inspector-pagination-input::-webkit-outer-spin-button,
413 | .mljar-variable-inspector-pagination-input::-webkit-inner-spin-button {
414 | -webkit-appearance: none;
415 | margin: 0;
416 | }
417 |
418 | /* variable panel scrollbar */
419 | .ReactVirtualized__Grid::-webkit-scrollbar {
420 | width: 9px;
421 | height: 8px;
422 | }
423 |
424 | .ReactVirtualized__Grid::-webkit-scrollbar-track {
425 | background: var(--jp-layout-color3);
426 | border-radius: 8px;
427 | }
428 |
429 | .ReactVirtualized__Grid::-webkit-scrollbar-thumb {
430 | background-color: rgba(255, 255, 255, 0.6);
431 | border-radius: 8px;
432 | border: 2px solid transparent;
433 | background-clip: padding-box;
434 | }
435 |
436 | .mljar-variable-inspector-preview {
437 | cursor: pointer;
438 | white-space: nowrap;
439 | overflow: hidden;
440 | text-overflow: ellipsis;
441 | color: #1976d2;
442 | }
443 |
444 | .mljar-variable-inspector-preview:hover {
445 | text-decoration: underline;
446 | }
447 |
448 | .mljar-variable-inspector-item {
449 | cursor: pointer;
450 | }
451 |
452 | .mljar-variable-inspector-variable-preview {
453 | background: none;
454 | border: none;
455 | padding: 0;
456 | margin: 0;
457 | cursor: pointer;
458 | font-family: 'Courier New', Courier, monospace;
459 | font-size: 0.7rem;
460 | font-weight: bold;
461 | display: inline-block;
462 | max-width: 100%;
463 | white-space: nowrap;
464 | text-overflow: ellipsis;
465 | overflow: hidden;
466 | text-align: left;
467 | color: var(--jp-ui-font-color1);
468 | }
469 |
470 | .mljar-variable-inspector-variable-preview:hover {
471 | text-decoration: underline;
472 | background-color: #d3d3d3;
473 | }
474 |
475 | .mljar-variable-inspector-variable-preview,
476 | .mljar-variable-inspector-variable-value {
477 | padding-left: 7px;
478 | }
479 |
--------------------------------------------------------------------------------
/src/python_code/getVariables.ts:
--------------------------------------------------------------------------------
1 | export const variableDict = `
2 | import json
3 | import sys
4 | import math
5 | from datetime import datetime
6 | from importlib import __import__
7 | from IPython import get_ipython
8 | from IPython.core.magics.namespace import NamespaceMagics
9 |
10 | __mljar_variable_inspector_nms = NamespaceMagics()
11 | __mljar_variable_inspector_Jupyter = get_ipython()
12 | __mljar_variable_inspector_nms.shell = __mljar_variable_inspector_Jupyter.kernel.shell
13 |
14 | __np = None
15 | __pd = None
16 | __pyspark = None
17 | __tf = None
18 | __K = None
19 | __torch = None
20 | __ipywidgets = None
21 | __xr = None
22 |
23 |
24 | def __mljar_variable_inspector_attempt_import(module):
25 | try:
26 | return __import__(module)
27 | except ImportError:
28 | return None
29 |
30 |
31 | def __mljar_variable_inspector_check_imported():
32 | global __np, __pd, __pyspark, __tf, __K, __torch, __ipywidgets, __xr
33 |
34 | __np = __mljar_variable_inspector_attempt_import('numpy')
35 | __pd = __mljar_variable_inspector_attempt_import('pandas')
36 | __pyspark = __mljar_variable_inspector_attempt_import('pyspark')
37 | __tf = __mljar_variable_inspector_attempt_import('tensorflow')
38 | __K = __mljar_variable_inspector_attempt_import('keras.backend') or __mljar_variable_inspector_attempt_import('tensorflow.keras.backend')
39 | __torch = __mljar_variable_inspector_attempt_import('torch')
40 | __ipywidgets = __mljar_variable_inspector_attempt_import('ipywidgets')
41 | __xr = __mljar_variable_inspector_attempt_import('xarray')
42 |
43 |
44 | def __mljar_variable_inspector_getshapeof(x):
45 | def get_list_shape(lst):
46 | if isinstance(lst, (list, tuple)):
47 | if not lst:
48 | return "0"
49 | sub_shape = get_list_shape(lst[0])
50 | return f"{len(lst)}" if sub_shape == "" else f"{len(lst)} x {sub_shape}"
51 | else:
52 | return ""
53 |
54 | if __pd and isinstance(x, __pd.DataFrame):
55 | return "%d x %d" % x.shape
56 | if __pd and isinstance(x, __pd.Series):
57 | return "%d" % x.shape
58 | if __np and isinstance(x, __np.ndarray):
59 | shape = " x ".join([str(i) for i in x.shape])
60 | return "%s" % shape
61 | if __pyspark and isinstance(x, __pyspark.sql.DataFrame):
62 | return "? x %d" % len(x.columns)
63 | if __tf and isinstance(x, __tf.Variable):
64 | shape = " x ".join([str(int(i)) for i in x.shape])
65 | return "%s" % shape
66 | if __tf and isinstance(x, __tf.Tensor):
67 | shape = " x ".join([str(int(i)) for i in x.shape])
68 | return "%s" % shape
69 | if __torch and isinstance(x, __torch.Tensor):
70 | shape = " x ".join([str(int(i)) for i in x.shape])
71 | return "%s" % shape
72 | if __xr and isinstance(x, __xr.DataArray):
73 | shape = " x ".join([str(int(i)) for i in x.shape])
74 | return "%s" % shape
75 | if isinstance(x, (list, tuple)):
76 | return get_list_shape(x)
77 | if isinstance(x, dict):
78 | return "%s keys" % len(x)
79 | return None
80 |
81 |
82 | def __format_content(item):
83 | if isinstance(item, list):
84 | return __format_content(str([__format_content(subitem) for subitem in item]))
85 | elif isinstance(item, dict):
86 | return __format_content(str({k: __format_content(v) for k, v in item.items()}))
87 | elif isinstance(item, str):
88 | return item[:100] + "..." if len(item) > 100 else item
89 | elif isinstance(item, (int, float, bool, set)) or item is None:
90 | return item
91 | else:
92 | if hasattr(item, "name"):
93 | return getattr(item, "name")
94 | return type(item).__name__
95 |
96 | def __mljar_variable_inspector_get_simple_value(x):
97 | if isinstance(x, bytes):
98 | return ""
99 | if x is None:
100 | return "None"
101 | if __np is not None and __np.isscalar(x) and not isinstance(x, bytes):
102 | return str(x)
103 | if isinstance(x, (int, float, complex, bool, str, set, list, dict, tuple, datetime)):
104 | strValue = str(x) #__format_content(x)
105 | if len(strValue) > 100:
106 | return strValue[:100] + "..."
107 | else:
108 | return strValue
109 | # if isinstance(x, (list, dict)):
110 | # return __format_content(x)
111 |
112 | return ""
113 |
114 |
115 | def __mljar_variable_inspector_size_converter(size):
116 | if size == 0:
117 | return '0B'
118 | units = ['B', 'kB', 'MB', 'GB', 'TB']
119 | index = math.floor(math.log(size, 1024))
120 | divider = math.pow(1024, index)
121 | converted_size = round(size / divider, 2)
122 | return f"{converted_size} {units[index]}"
123 |
124 |
125 | def __mljar_variableinspector_is_matrix(x):
126 | # True if type(x).__name__ in ["DataFrame", "ndarray", "Series"] else False
127 | if __pd and isinstance(x, __pd.DataFrame):
128 | return True
129 | if __pd and isinstance(x, __pd.Series):
130 | return True
131 | if __np and isinstance(x, __np.ndarray) and len(x.shape) <= 2:
132 | return True
133 | if __pyspark and isinstance(x, __pyspark.sql.DataFrame):
134 | return True
135 | if __tf and isinstance(x, __tf.Variable) and len(x.shape) <= 2:
136 | return True
137 | if __tf and isinstance(x, __tf.Tensor) and len(x.shape) <= 2:
138 | return True
139 | if __torch and isinstance(x, __torch.Tensor) and len(x.shape) <= 2:
140 | return True
141 | if __xr and isinstance(x, __xr.DataArray) and len(x.shape) <= 2:
142 | return True
143 | if isinstance(x, list):
144 | return True
145 | return False
146 |
147 |
148 | def __mljar_variableinspector_is_widget(x):
149 | return __ipywidgets and issubclass(x, __ipywidgets.DOMWidget)
150 |
151 | def __mljar_variableinspector_getcolumnsof(x):
152 | if __pd and isinstance(x, __pd.DataFrame):
153 | return list(x.columns)
154 | return []
155 |
156 | def __mljar_variableinspector_getcolumntypesof(x):
157 | if __pd and isinstance(x, __pd.DataFrame):
158 | return [str(t) for t in x.dtypes]
159 | return []
160 |
161 | def __mljar_variable_inspector_dict_list():
162 | __mljar_variable_inspector_check_imported()
163 | def __mljar_variable_inspector_keep_cond(v):
164 | try:
165 | obj = eval(v)
166 | if isinstance(obj, str):
167 | return True
168 | if __tf and isinstance(obj, __tf.Variable):
169 | return True
170 | if __pd and __pd is not None and (
171 | isinstance(obj, __pd.core.frame.DataFrame)
172 | or isinstance(obj, __pd.core.series.Series)):
173 | return True
174 | if __xr and __xr is not None and isinstance(obj, __xr.DataArray):
175 | return True
176 | if str(obj).startswith("
57 | {rowsCount > maxRowsRange || colsCount > maxColsRange ? (
58 | <>
59 |
293 |
60 | {rowsCount > maxRowsRange ? (
61 | <>
62 | {t('Rows from ')}
63 |
70 |
77 | setRowInput(e.target.value)}
85 | onKeyDown={e => {
86 | if (e.key === 'Enter') {
87 | const newPage = parseInt(rowInput, 10);
88 | if (
89 | !isNaN(newPage) &&
90 | newPage >= 0 &&
91 | newPage <= rowsCount
92 | ) {
93 | setCurrentRow(newPage);
94 | setRowInput(newPage.toString());
95 | }
96 | }
97 | }}
98 | onBlur={() => {
99 | const newPage = parseInt(rowInput, 10);
100 | if (
101 | isNaN(newPage) ||
102 | newPage < 0 ||
103 | newPage > rowsCount
104 | ) {
105 | setRowInput(currentRow.toString());
106 | } else {
107 | setCurrentRow(newPage);
108 | }
109 | }}
110 | />
111 | {t('to ')}
112 |
113 | {parseInt(rowInput) + 99 >= rowsCount
114 | ? rowsCount - 1
115 | : parseInt(rowInput) + 99}
116 |
117 |
124 |
131 |
132 | {t('Total')}{' '}
133 | {rowsCount}{' '}
134 | {t('rows')}
135 |
136 |
137 | ) : (
138 |
139 | {t('Total rows')}: {rowsCount}
140 |
141 | )}
142 |
143 |
144 |
145 | {colsCount > maxColsRange ? (
146 | <>
147 | {t('Columns from ')}
148 |
155 |
162 | setColumnInput(e.target.value)}
172 | onKeyDown={e => {
173 | if (e.key === 'Enter') {
174 | const newPage = parseInt(columnInput, 10);
175 | if (
176 | !isNaN(newPage) &&
177 | newPage >= 0 &&
178 | newPage <= colsCount
179 | ) {
180 | setCurrentColumn(newPage);
181 | setColumnInput(newPage.toString());
182 | }
183 | }
184 | }}
185 | onBlur={() => {
186 | const newPage = parseInt(columnInput, 10);
187 | if (
188 | isNaN(newPage) ||
189 | newPage < 0 ||
190 | newPage > colsCount
191 | ) {
192 | setColumnInput(currentColumn.toString());
193 | } else {
194 | setCurrentColumn(newPage);
195 | }
196 | }}
197 | />
198 | {t('to ')}
199 |
200 | {parseInt(columnInput) + 49 >= colsCount
201 | ? colsCount - 1
202 | : parseInt(columnInput) + 49}
203 |
204 |
211 |
218 |
219 | {t('Total')}{' '}
220 | {colsCount}{' '}
221 | {t('columns')}
222 |
223 |
224 | ) : (
225 |
226 | {t('Total columns')}: {colsCount}
227 |
228 | )}
229 |
230 |
231 | ) : (
232 |
233 | Rows: {rowsCount} Columns: {colsCount}
234 |
235 | )}
236 | {/* Goto Cell section */}
237 | {/*
238 | Goto cell:
239 | setCellRowInput(e.target.value)}
245 | onKeyDown={e => {
246 | if (e.key === 'Enter') {
247 | const newVal = parseInt(cellRowInput, 10);
248 | if (isNaN(newVal) || newVal < 0) {
249 | setCellRowInput('0');
250 | } else {
251 | handleGotoCell();
252 | }
253 | }
254 | }}
255 | onBlur={() => {
256 | const newVal = parseInt(cellRowInput, 10);
257 | if (isNaN(newVal) || newVal < 0) {
258 | setCellRowInput('0');
259 | }
260 | }}
261 | />
262 | setCellColumnInput(e.target.value)}
268 | onKeyDown={e => {
269 | if (e.key === 'Enter') {
270 | const newVal = parseInt(cellColumnInput, 10);
271 | if (isNaN(newVal) || newVal < 0) {
272 | setCellColumnInput('0');
273 | } else {
274 | handleGotoCell();
275 | }
276 | }
277 | }}
278 | onBlur={() => {
279 | const newVal = parseInt(cellColumnInput, 10);
280 | if (isNaN(newVal) || newVal < 0) {
281 | setCellColumnInput('0');
282 | }
283 | }}
284 | />
285 |
291 |
*/}
292 |
288 | {typeof cellData === 'boolean'
289 | ? cellData
290 | ? 'True'
291 | : 'False'
292 | : cellData}
293 |
294 | );
295 | };
296 |
297 | const handleGotoCell = () => {
298 | const targetGlobalRow = parseInt(cellRowInput, 10);
299 | const targetGlobalCol = parseInt(cellColumnInput, 10);
300 | if (
301 | !isNaN(targetGlobalRow) &&
302 | targetGlobalRow >= 0 &&
303 | !isNaN(targetGlobalCol) &&
304 | targetGlobalCol >= 0
305 | ) {
306 | const newRowPage = Math.floor(targetGlobalRow / maxRowsRange) + 1;
307 | const newColPage = Math.floor(targetGlobalCol / maxColsRange) + 1;
308 | setRowInput(newRowPage.toString());
309 | setColumnInput(newColPage.toString());
310 | const localRow = targetGlobalRow - (newRowPage - 1) * maxRowsRange;
311 | const localCol = targetGlobalCol - (newColPage - 1) * maxColsRange;
312 | const gridRow = fixedRowCount + localRow;
313 | const gridCol = fixedColumnCount + localCol;
314 | setCurrentRow(newRowPage);
315 | setCurrentColumn(newColPage);
316 | setTimeout(() => {
317 | setGotoCell({ row: gridRow, column: gridCol });
318 | setHighlightCell({ row: gridRow, column: gridCol });
319 | setTimeout(() => {
320 | setHighlightCell(null);
321 | }, 2000);
322 | }, 500);
323 | }
324 | };
325 |
326 | if (!allowedTypes.includes(variableType)) {
327 | return (
328 |
337 |
341 | );
342 | }
343 | return (
344 | 338 | {t('Wrong variable type:')} {variableType} 339 |
340 |
353 |
413 | );
414 | };
415 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | GNU AFFERO GENERAL PUBLIC LICENSE
2 | Version 3, 19 November 2007
3 |
4 | Copyright (C) 2007 Free Software Foundation, Inc.
363 | {/* Grid */}
364 |
365 | {({ width, height }: { width: number; height: number }) => (
366 |
372 | columnWidths[index]
373 | }
374 | rowHeight={20}
375 | height={height}
376 | rowCount={rowCount}
377 | width={width}
378 | scrollToRow={gotoCell ? gotoCell.row : undefined}
379 | scrollToColumn={gotoCell ? gotoCell.column : undefined}
380 | styleTopLeftGrid={{ background: isDark ? '#555' : '#e0e0e0' }}
381 | styleTopRightGrid={{ background: isDark ? '#555' : '#e0e0e0' }}
382 | styleBottomLeftGrid={{ background: isDark ? '#222' : '#fff' }}
383 | styleBottomRightGrid={{ background: isDark ? '#222' : '#fff' }}
384 | />
385 | )}
386 |
387 |
388 |
389 | {/* pagination */}
390 |
412 |