Skip to content

Commit 6290e8f

Browse files
feat: add notebook variable inspector panel (#4186)
* feat: add notebook variable inspector panel * fix: dispose event * chore: simplify create logic Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix: lint * fix: missing deps --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent 50dcecd commit 6290e8f

File tree

13 files changed

+1032
-38
lines changed

13 files changed

+1032
-38
lines changed

packages/i18n/src/common/en-US.lang.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1513,6 +1513,12 @@ export const localizationBundle = {
15131513
'notebook.kernel.panel.opened.pages': 'Opened Pages',
15141514
'notebook.kernel.panel.running.kernels': 'Running Kernels',
15151515
'notebook.kernel.close.all.confirmation': 'Are you sure you want to close all?',
1516+
'notebook.variable.panel.title': 'Variable Inspector',
1517+
'notebook.variable.panel.unsupported': 'The file format is not supported for variable inspection',
1518+
'notebook.variable.panel.refresh.success': 'Variable refresh successful',
1519+
'notebook.variable.panel.refresh.error': 'Variable refresh failed',
1520+
'notebook.variable.panel.search.placeholder': 'Please enter the variable name to search',
1521+
'notebook.variable.panel.show.detail': 'View details',
15161522
// #endregion notebook
15171523

15181524
...browserViews,

packages/i18n/src/common/zh-CN.lang.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1274,6 +1274,12 @@ export const localizationBundle = {
12741274
'notebook.kernel.panel.opened.pages': '已开启的标签页',
12751275
'notebook.kernel.panel.running.kernels': '运行的内核',
12761276
'notebook.kernel.close.all.confirmation': '你确定要关闭全部吗?',
1277+
'notebook.variable.panel.title': '变量检查器',
1278+
'notebook.variable.panel.unsupported': '该文件格式暂不支持变量检查',
1279+
'notebook.variable.panel.refresh.success': '变量刷新成功',
1280+
'notebook.variable.panel.refresh.error': '变量刷新失败',
1281+
'notebook.variable.panel.search.placeholder': '请输入变量名称搜索',
1282+
'notebook.variable.panel.show.detail': '查看详情',
12771283
// #endregion notebook
12781284

12791285
...browserViews,

packages/notebook/src/browser/index.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Injectable, Provider } from '@opensumi/di';
22
import { BrowserModule } from '@opensumi/ide-core-browser';
33
import { INotebookService } from '@opensumi/ide-editor';
44

5-
import { KernelPanelContribution } from './kernel-panel/kernel.panel.contribution';
65
import { LibroKeybindContribution } from './libro-keybind-contribution';
76
import { LibroCommandContribution } from './libro.command';
87
import { LibroContribution } from './libro.contribution';
@@ -33,6 +32,5 @@ export class NotebookModule extends BrowserModule {
3332
useClass: NotebookServiceOverride,
3433
override: true,
3534
},
36-
KernelPanelContribution,
3735
];
3836
}
Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
export * from './kernel-panel-view';
22
export * from './kernel.panel.color.tokens';
3-
export * from './kernel.panel.contribution';
43
export * from './kernel.panel.protocol';

packages/notebook/src/browser/kernel-panel/kernel.panel.contribution.ts

Lines changed: 0 additions & 32 deletions
This file was deleted.

packages/notebook/src/browser/libro.contribution.tsx

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,16 @@ import {
1515
ClientAppContribution,
1616
CommandContribution,
1717
type CommandRegistry,
18+
ComponentContribution,
19+
ComponentRegistry,
1820
Disposable,
1921
Domain,
2022
IClientApp,
2123
IOpenerService,
2224
OpenerContribution,
2325
Schemes,
2426
URI,
27+
localize,
2528
} from '@opensumi/ide-core-browser';
2629
import { message } from '@opensumi/ide-core-browser/lib/components';
2730
import {
@@ -36,7 +39,7 @@ import { IEditorDocumentModelContentRegistry } from '@opensumi/ide-editor/lib/br
3639
import { IconService } from '@opensumi/ide-theme/lib/browser';
3740
import { IThemeService, IconType } from '@opensumi/ide-theme/lib/common';
3841

39-
import { initKernelPanelColorToken } from './kernel-panel';
42+
import { KERNEL_PANEL_ID, KernelPanel, initKernelPanelColorToken } from './kernel-panel';
4043
import { LibroOpensumiModule } from './libro';
4144
import { LibroOpener } from './libro-opener';
4245
import { initLibroColorToken } from './libro.color.tokens';
@@ -46,6 +49,9 @@ import { ManaContainer, initLibroOpensumi, manaContainer } from './mana/index';
4649
import { NotebookDocumentContentProvider } from './notebook-document-content-provider';
4750
import { NotebookServiceOverride } from './notebook.service';
4851
import { initTocPanelColorToken } from './toc';
52+
import { LibroVariableModule } from './variables/libro-variable-module';
53+
import { VariablePanel } from './variables/variable-panel';
54+
import { VARIABLE_ID } from './variables/variable-protocol';
4955

5056
const LIBRO_COMPONENTS_VIEW_COMMAND = {
5157
id: 'opensumi-libro',
@@ -56,7 +62,7 @@ const LayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
5662
return (
5763
<ManaComponents.Application
5864
context={{ container: manaContainer }}
59-
modules={[ManaAppPreset, LibroJupyterNoEditorModule, LibroTOCModule, LibroOpensumiModule]}
65+
modules={[ManaAppPreset, LibroJupyterNoEditorModule, LibroTOCModule, LibroOpensumiModule, LibroVariableModule]}
6066
renderChildren
6167
onReady={() => setIsReady(true)}
6268
>
@@ -65,12 +71,15 @@ const LayoutWrapper: React.FC<React.PropsWithChildren> = ({ children }) => {
6571
);
6672
};
6773

74+
export const NOTE_BOOK_PANEL_ID = 'notebook-panel';
75+
6876
@Domain(
6977
ClientAppContribution,
7078
BrowserEditorContribution,
7179
ClientAppContextContribution,
7280
CommandContribution,
7381
OpenerContribution,
82+
ComponentContribution,
7483
)
7584
export class LibroContribution
7685
extends Disposable
@@ -79,7 +88,8 @@ export class LibroContribution
7988
BrowserEditorContribution,
8089
ClientAppContextContribution,
8190
CommandContribution,
82-
OpenerContribution
91+
OpenerContribution,
92+
ComponentContribution
8393
{
8494
@Autowired(ManaContainer)
8595
private readonly manaContainer: Container;
@@ -115,6 +125,40 @@ export class LibroContribution
115125
initLibroOpensumi(app.injector, manaContainer);
116126
}
117127

128+
registerComponent(registry: ComponentRegistry) {
129+
const iconClass = this.iconService.fromIcon(
130+
'',
131+
{
132+
dark: 'https://mdn.alipayobjects.com/huamei_rm3rgy/afts/img/A*tFyaRbqux_4AAAAAAAAAAAAADr2GAQ/original',
133+
light: 'https://mdn.alipayobjects.com/huamei_rm3rgy/afts/img/A*ebL7T4dWefUAAAAAAAAAAAAADr2GAQ/original',
134+
},
135+
IconType.Background,
136+
);
137+
registry.register(
138+
'@opensumi/ide-notebook',
139+
[
140+
{
141+
id: KERNEL_PANEL_ID,
142+
name: localize('notebook.kernel.panel.title'),
143+
component: KernelPanel,
144+
priority: 0,
145+
},
146+
{
147+
id: VARIABLE_ID,
148+
name: localize('notebook.variable.panel.title'),
149+
weight: 2,
150+
priority: 1,
151+
component: VariablePanel,
152+
},
153+
],
154+
{
155+
activateKeyBinding: 'ctrlcmd+shift+k',
156+
containerId: NOTE_BOOK_PANEL_ID,
157+
iconClass,
158+
},
159+
);
160+
}
161+
118162
registerClientAppContext(Layout: React.FC, injector: Injector): React.FC {
119163
initLibroColorToken();
120164
initKernelPanelColorToken();
Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
.libro-variable-content {
2+
height: calc(100% - 40px);
3+
4+
.libro-variable-list {
5+
height: 100%;
6+
overflow-y: auto;
7+
8+
.ant-list-item {
9+
padding: 4px 12px 0;
10+
border-bottom: none;
11+
12+
&:hover {
13+
border-radius: 6px;
14+
background-color: var(--mana-libro-variable-background-hover-color);
15+
}
16+
17+
.ant-list-item-meta {
18+
border-bottom: 1px solid var(--mana-libro-variable-border-color);
19+
}
20+
21+
.ant-list-item-meta-title {
22+
color: var(--mana-libro-variable-title-color);
23+
24+
.libro-variable-title {
25+
display: flex;
26+
align-items: center;
27+
justify-content: space-between;
28+
29+
.libro-variable-type-tag {
30+
font-size: 10px;
31+
margin-left: 8px;
32+
color: var(--mana-libro-variable-tag-text-color);
33+
background-color: var(--mana-libro-variable-tag-background-color);
34+
border-radius: 4px;
35+
}
36+
37+
.libro-variable-extra {
38+
color: var(--mana-libro-variable-icon-color);
39+
transform: rotate(90deg);
40+
41+
:hover {
42+
color: #1890ff;
43+
cursor: pointer;
44+
}
45+
}
46+
}
47+
48+
.libro-variable-name {
49+
color: var(--mana-libro-variable-name-color);
50+
}
51+
}
52+
53+
.ant-list-item-meta-description {
54+
overflow: hidden;
55+
color: var(--mana-libro-variable-description-color);
56+
text-overflow: ellipsis;
57+
white-space: nowrap;
58+
}
59+
}
60+
}
61+
62+
.libro-variable-search {
63+
display: flex;
64+
align-items: center;
65+
padding: 4px 12px 8px;
66+
67+
&-input {
68+
background: var(--mana-libro-variable-search-background-color);
69+
border: none;
70+
border-radius: 6px;
71+
height: 28px;
72+
73+
input {
74+
color: var(--mana-libro-variable-title-color);
75+
background: transparent;
76+
}
77+
78+
.ant-input-prefix {
79+
color: var(--mana-libro-variable-icon-color);
80+
}
81+
}
82+
83+
&-extra {
84+
margin-left: 8px;
85+
color: var(--mana-libro-variable-icon-color);
86+
87+
:hover {
88+
color: #1890ff;
89+
cursor: pointer;
90+
}
91+
}
92+
}
93+
}
94+
95+
.libro-variable-empty {
96+
display: flex;
97+
flex-direction: column;
98+
align-items: center;
99+
justify-content: center;
100+
height: 100%;
101+
margin: unset !important;
102+
}

0 commit comments

Comments
 (0)