Skip to content

Commit c1e38a5

Browse files
MarchlakMarchlak
committed
small update work in progress
1 parent a4771e0 commit c1e38a5

7 files changed

+203
-28
lines changed

‎src/components/searchBar.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import { useVariableContext } from '../context/notebookVariableContext';
3+
4+
export const SearchBar: React.FC = () => {
5+
const { searchTerm, setSearchTerm } = useVariableContext();
6+
7+
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
8+
setSearchTerm(e.target.value);
9+
};
10+
11+
return (
12+
<div className="mljar-search-bar-container">
13+
<input
14+
type="text"
15+
value={searchTerm}
16+
onChange={handleChange}
17+
placeholder="Search Package..."
18+
className='search-bar-input'
19+
/>
20+
</div>
21+
);
22+
};
23+

‎src/components/variableInspectorSidebar.tsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { NotebookWatcher } from '../watchers/notebookWatcher'
55
import { NotebookPanelContextProvider } from '../context/notebookPanelContext';
66
import { CommandRegistry } from '@lumino/commands';
77
import { VariableListComponent } from './variableListComponent';
8+
import { NotebookKernelContextProvider } from '../context/notebookKernelContext';
9+
import { VariableContextProvider } from '../context/notebookVariableContext';
810

911

1012
class VariableInspectorSidebarWidget extends ReactWidget {
@@ -25,14 +27,18 @@ class VariableInspectorSidebarWidget extends ReactWidget {
2527
<div
2628
className='mljar-sidebar-container'
2729
>
28-
<VariableListComponent/>
29-
<button
30-
onClick={() => this.commands.execute('custom:open-variable-inspector')}
31-
>
32-
Hello
33-
</button>
34-
30+
3531
<NotebookPanelContextProvider notebookWatcher={this.notebookWatcher}>
32+
<NotebookKernelContextProvider notebookWatcher={this.notebookWatcher}>
33+
<VariableContextProvider>
34+
<VariableListComponent/>
35+
<button
36+
onClick={() => this.commands.execute('custom:open-variable-inspector')}
37+
>
38+
Hello
39+
</button>
40+
</VariableContextProvider>
41+
</NotebookKernelContextProvider>
3642
</NotebookPanelContextProvider>
3743
</div>
3844
);

‎src/components/variableItem.tsx

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,32 @@
1-
import React from 'react'
1+
import React from 'react';
22

33
interface VariableInfo {
4-
name: string
5-
type: string
6-
shape: string
4+
name: string;
5+
type: string;
6+
shape: string;
77
}
88

99
interface VariableItemProps {
10-
vrb: VariableInfo
10+
vrb: VariableInfo;
1111
}
1212

13-
export const PackageItem: React.FC<VariableItemProps> = ({ vrb }) => {
14-
15-
13+
export const VariableItem: React.FC<VariableItemProps> = ({ vrb }) => {
14+
const handleButtonClick = () => {
15+
console.log(`Variable clicked: ${vrb.name}`);
16+
};
1617

1718
return (
18-
<li className='package-item'>
19-
<span className='package-name'> {vrb.name}</span>
20-
<span className='package-version'>{vrb.type}</span>
21-
<span className='package-version'>{vrb.shape}</span>
19+
<li className='mljar-variable-item'>
20+
<span className='mljar-variable-name'>{vrb.name}</span>
21+
<span className='mljar-variable-version'>{vrb.type}</span>
22+
<span className='mljar-variable-shape'>{vrb.shape}</span>
2223
<button
2324
className='mljar-show-variable-button'
25+
onClick={handleButtonClick}
26+
aria-label={`Show details for ${vrb.name}`}
2427
>
28+
Show
2529
</button>
2630
</li>
27-
)
28-
}
29-
31+
);
32+
};

‎src/components/variableList.tsx

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,32 @@
11
import React from 'react';
2+
import { useVariableContext } from '../context/notebookVariableContext';
3+
import { VariableItem } from './variableItem';
24

35
export const VariableList: React.FC = () => {
6+
const { variables, searchTerm } = useVariableContext();
47

8+
const filteredVariables = variables.filter(variable =>
9+
variable.name.toLowerCase().includes(searchTerm.toLowerCase())
10+
);
511

612
return (
713
<ul className='mljar-variable-list'>
8-
<li className='mljar-variable-header-list'>
9-
<span className='mljar-variable-header-name'>Name</span>
10-
<span className='mljar-variable-header-version'>Type</span>
11-
<span className='mljar-variable-header-version'>Shape</span>
12-
<span className='mljar-variable-header-blank'>&nbsp;</span>
13-
</li>
14+
<li className='mljar-variable-header-list'>
15+
<span className='mljar-variable-header-name'>Name</span>
16+
<span className='mljar-variable-header-version'>Type</span>
17+
<span className='mljar-variable-header-version'>Shape</span>
18+
<span className='mljar-variable-header-blank'>&nbsp;</span>
19+
</li>
20+
{filteredVariables.map((variable, index) => (
21+
<VariableItem
22+
key={index}
23+
vrb={{
24+
name: variable.name,
25+
type: variable.type,
26+
shape: variable.shape || 'N/A',
27+
}}
28+
/>
29+
))}
1430
</ul>
1531
);
1632
};

‎src/components/variableListComponent.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { VariableList } from './variableList';
3+
import { SearchBar } from './searchBar';
34

45

56
export const VariableListComponent: React.FC = () => {
@@ -9,6 +10,7 @@ export const VariableListComponent: React.FC = () => {
910
<div className="mljar-variable-container">
1011
<div className="mljar-variable-header-container">
1112
<h3 className="mljar-variable-header">Variable Inspector</h3>
13+
<SearchBar />
1214
<VariableList/>
1315
</div>
1416
</div>

‎src/context/notebookVariableContext.tsx

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
// src/contexts/VariableContext.tsx
2+
import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
3+
import { useNotebookPanelContext } from './notebookPanelContext';
4+
import { useNotebookKernelContext } from './notebookKernelContext';
5+
import { KernelMessage } from '@jupyterlab/services';
6+
import { variableDict } from "../pcode/utils"
7+
8+
interface VariableInfo {
9+
name: string;
10+
type: string;
11+
shape: string;
12+
}
13+
14+
interface VariableContextProps {
15+
variables: VariableInfo[];
16+
loading: boolean;
17+
error: string | null;
18+
searchTerm: string;
19+
setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
20+
refreshVariables: () => void;
21+
}
22+
23+
const VariableContext = createContext<VariableContextProps | undefined>(undefined);
24+
25+
export const VariableContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
26+
const notebookPanel = useNotebookPanelContext();
27+
const kernel = useNotebookKernelContext();
28+
const [variables, setVariables] = useState<VariableInfo[]>([]);
29+
const [loading, setLoading] = useState<boolean>(false);
30+
const [error, setError] = useState<string | null>(null);
31+
const [searchTerm, setSearchTerm] = useState<string>('');
32+
33+
const executeCode = useCallback(async () => {
34+
setVariables([]);
35+
setLoading(true);
36+
setError(null);
37+
38+
39+
if (!notebookPanel || !kernel) {
40+
setLoading(false);
41+
return;
42+
}
43+
44+
45+
try {
46+
const future = notebookPanel.sessionContext?.session?.kernel?.requestExecute({
47+
code: variableDict,
48+
store_history: false,
49+
});
50+
51+
if (future) {
52+
future.onIOPub = (msg: KernelMessage.IIOPubMessage) => {
53+
const msgType = msg.header.msg_type;
54+
55+
if (
56+
msgType === 'execute_result' ||
57+
msgType === 'display_data' ||
58+
msgType === 'update_display_data'
59+
) {
60+
const content = msg.content as any;
61+
62+
const jsonData = content.data['application/json'];
63+
const textData = content.data['text/plain'];
64+
65+
if (jsonData) {
66+
if (Array.isArray(jsonData)) {
67+
} else {
68+
console.warn('Data is not JSON:', jsonData);
69+
}
70+
setLoading(false);
71+
} else if (textData) {
72+
try {
73+
const cleanedData = textData.replace(/^['"]|['"]$/g, '');
74+
const doubleQuotedData = cleanedData.replace(/'/g, '"');
75+
const parsedData: VariableInfo[] = JSON.parse(doubleQuotedData);
76+
if (Array.isArray(parsedData)) {
77+
const mappedVariables: VariableInfo[] = parsedData.map((item: any) => ({
78+
name: item.varName,
79+
type: item.varType,
80+
shape: item.varShape || 'N/A',
81+
}));
82+
setVariables(mappedVariables);
83+
} else {
84+
throw new Error('Error during parsing.');
85+
}
86+
setLoading(false);
87+
} catch (err) {
88+
setError('Error during export JSON.');
89+
setLoading(false);
90+
}
91+
}
92+
}
93+
};
94+
}
95+
} catch (err) {
96+
console.error('Unexpected error:', err);
97+
setError('Unexpected error.');
98+
setLoading(false);
99+
}
100+
}, [notebookPanel, kernel]);
101+
102+
useEffect(() => {
103+
executeCode();
104+
}, [executeCode]);
105+
106+
return (
107+
<VariableContext.Provider
108+
value={{ variables, loading, error, searchTerm, setSearchTerm, refreshVariables: executeCode }}
109+
>
110+
{children}
111+
</VariableContext.Provider>
112+
);
113+
};
114+
115+
export const useVariableContext = (): VariableContextProps => {
116+
const context = useContext(VariableContext);
117+
if (context === undefined) {
118+
throw new Error('useVariableContext must be used within a VariableProvider');
119+
}
120+
return context;
121+
};
122+
123+

‎src/pcode/utils.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,4 +239,6 @@ def _jupyterlab_variableinspector_default(o):
239239
def _jupyterlab_variableinspector_deletevariable(x):
240240
exec("del %s" % x, globals())
241241
242+
_jupyterlab_variableinspector_dict_list()
243+
242244
`

0 commit comments

Comments
 (0)