Skip to content

Commit a4771e0

Browse files
committed
first version in progress
1 parent 7b6edd5 commit a4771e0

10 files changed

+482
-8
lines changed
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Widget } from '@lumino/widgets';
2+
import { ILabShell } from '@jupyterlab/application';
3+
4+
5+
class VariableInspectorPanel extends Widget {
6+
constructor() {
7+
super();
8+
this.addClass('jp-VarInspector');
9+
10+
const hello = document.createElement('div');
11+
hello.textContent = 'Hello World';
12+
hello.style.padding = '10px';
13+
hello.style.fontSize = '16px';
14+
this.node.appendChild(hello);
15+
}
16+
}
17+
18+
export function createEmptyVariableInspectorPanel(labShell: ILabShell): void {
19+
const panel = new VariableInspectorPanel();
20+
21+
panel.id = 'custom-variableinspector';
22+
panel.title.label = 'Custom Variable Inspector';
23+
panel.title.closable = true;
24+
25+
26+
labShell.add(panel, 'main');
27+
labShell.activateById(panel.id);
28+
}
29+

src/components/variableInspectorSidebar.tsx

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,17 @@ import { ReactWidget } from '@jupyterlab/ui-components';
33
import { pluginIcon } from '../icons/pluginIcon';
44
import { NotebookWatcher } from '../watchers/notebookWatcher'
55
import { NotebookPanelContextProvider } from '../context/notebookPanelContext';
6+
import { CommandRegistry } from '@lumino/commands';
7+
import { VariableListComponent } from './variableListComponent';
68

79

810
class VariableInspectorSidebarWidget extends ReactWidget {
911
private notebookWatcher: NotebookWatcher;
10-
constructor(notebookWatcher:NotebookWatcher) {
12+
private commands: CommandRegistry;
13+
constructor(notebookWatcher:NotebookWatcher, commands: CommandRegistry) {
1114
super();
1215
this.notebookWatcher = notebookWatcher;
16+
this.commands = commands;
1317
this.id = 'my-plugin::empty-sidebar';
1418
this.title.icon = pluginIcon;
1519
this.title.caption ='My Plugin';
@@ -19,18 +23,24 @@ class VariableInspectorSidebarWidget extends ReactWidget {
1923
render(): JSX.Element {
2024
return (
2125
<div
22-
className='sidebar-container'
26+
className='mljar-sidebar-container'
2327
>
24-
Siema
28+
<VariableListComponent/>
29+
<button
30+
onClick={() => this.commands.execute('custom:open-variable-inspector')}
31+
>
32+
Hello
33+
</button>
34+
2535
<NotebookPanelContextProvider notebookWatcher={this.notebookWatcher}>
2636
</NotebookPanelContextProvider>
2737
</div>
2838
);
2939
}
3040
}
3141

32-
export function createVariableInspectorSidebar(notebookWatcher:NotebookWatcher): VariableInspectorSidebarWidget {
33-
return new VariableInspectorSidebarWidget(notebookWatcher);
42+
export function createVariableInspectorSidebar(notebookWatcher: NotebookWatcher, commands: CommandRegistry): VariableInspectorSidebarWidget {
43+
return new VariableInspectorSidebarWidget(notebookWatcher, commands);
3444
}
3545

3646

src/components/variableItem.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
3+
interface VariableInfo {
4+
name: string
5+
type: string
6+
shape: string
7+
}
8+
9+
interface VariableItemProps {
10+
vrb: VariableInfo
11+
}
12+
13+
export const PackageItem: React.FC<VariableItemProps> = ({ vrb }) => {
14+
15+
16+
17+
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>
22+
<button
23+
className='mljar-show-variable-button'
24+
>
25+
</button>
26+
</li>
27+
)
28+
}
29+

src/components/variableList.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
3+
export const VariableList: React.FC = () => {
4+
5+
6+
return (
7+
<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+
</ul>
15+
);
16+
};
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { VariableList } from './variableList';
3+
4+
5+
export const VariableListComponent: React.FC = () => {
6+
7+
8+
return (
9+
<div className="mljar-variable-container">
10+
<div className="mljar-variable-header-container">
11+
<h3 className="mljar-variable-header">Variable Inspector</h3>
12+
<VariableList/>
13+
</div>
14+
</div>
15+
);
16+
};

src/context/notebookKernelContext.tsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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<NotebookKernelContextType>(null);
7+
8+
export function useNotebookKernelContext(): NotebookKernelContextType {
9+
return useContext(NotebookKernelContext);
10+
}
11+
12+
type NotebookKernelContextProviderProps = {
13+
children: React.ReactNode;
14+
notebookWatcher: NotebookWatcher;
15+
};
16+
17+
export function NotebookKernelContextProvider({
18+
children,
19+
notebookWatcher
20+
}: NotebookKernelContextProviderProps) {
21+
const [kernelInfo, setKernelInfo] = useState<KernelInfo | null>(
22+
notebookWatcher.kernelInfo
23+
);
24+
25+
useEffect(() => {
26+
const onKernelChanged = (
27+
sender: NotebookWatcher,
28+
newKernelInfo: KernelInfo | null
29+
) => {
30+
setKernelInfo(newKernelInfo);
31+
};
32+
33+
notebookWatcher.kernelChanged.connect(onKernelChanged);
34+
35+
setKernelInfo(notebookWatcher.kernelInfo);
36+
37+
return () => {
38+
notebookWatcher.kernelChanged.disconnect(onKernelChanged);
39+
};
40+
}, [notebookWatcher]);
41+
42+
return (
43+
<NotebookKernelContext.Provider value={kernelInfo}>
44+
{children}
45+
</NotebookKernelContext.Provider>
46+
);
47+
}
48+
49+

src/context/notebookVariableContext.tsx

Whitespace-only changes.

src/index.ts

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import {
22
JupyterFrontEnd,
3-
JupyterFrontEndPlugin
3+
JupyterFrontEndPlugin,
4+
ILabShell,
45
} from '@jupyterlab/application';
56

7+
import { ICommandPalette } from '@jupyterlab/apputils';
8+
import { createEmptyVariableInspectorPanel } from './components/variableInspectorPanel';
69
import { createVariableInspectorSidebar } from './components/variableInspectorSidebar';
710
import { NotebookWatcher } from './watchers/notebookWatcher';
811

12+
913
const leftTab: JupyterFrontEndPlugin<void> = {
1014
id: 'package-manager:plugin',
1115
description: 'A JupyterLab extension to list, remove and install python packages from pip.',
@@ -16,11 +20,29 @@ const leftTab: JupyterFrontEndPlugin<void> = {
1620

1721
notebookWatcher.selectionChanged.connect((sender, selections) => {});
1822

19-
let widget = createVariableInspectorSidebar(notebookWatcher);
23+
let widget = createVariableInspectorSidebar(notebookWatcher, app.commands);
2024

2125
app.shell.add(widget, 'left',{rank: 1999});
2226
}
2327
};
2428

25-
export default leftTab;
29+
30+
const customVariableInspectorPlugin: JupyterFrontEndPlugin<void> = {
31+
id: 'custom-variableinspector',
32+
autoStart: true,
33+
requires: [ICommandPalette, ILabShell],
34+
activate: (app: JupyterFrontEnd, palette: ICommandPalette, labShell: ILabShell) => {
35+
const command = 'custom:open-variable-inspector';
36+
app.commands.addCommand(command, {
37+
label: 'Open Custom Variable Inspector',
38+
execute: () => {
39+
createEmptyVariableInspectorPanel(labShell);
40+
}
41+
});
42+
43+
palette.addItem({ command, category: 'Custom Extensions' });
44+
}
45+
};
46+
47+
export default [customVariableInspectorPlugin, leftTab];
2648

0 commit comments

Comments
 (0)