@theia/notebook 1.55.0-next.14 → 1.55.0-next.25

package/src/browser/notebook-frontend-module.ts

@@ -51,6 +51,7 @@ import { NotebookOptionsService } from './service/notebook-options';
 import { NotebookUndoRedoHandler } from './contributions/notebook-undo-redo-handler';
 import { NotebookStatusBarContribution } from './contributions/notebook-status-bar-contribution';
 import { NotebookCellEditorService } from './service/notebook-cell-editor-service';
+import { NotebookCellStatusBarService } from './service/notebook-cell-status-bar-service';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(NotebookColorContribution).toSelf().inSingletonScope();
@@ -74,6 +75,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(NotebookKernelQuickPickService).toSelf().inSingletonScope();
     bind(NotebookClipboardService).toSelf().inSingletonScope();
     bind(NotebookCellEditorService).toSelf().inSingletonScope();
+    bind(NotebookCellStatusBarService).toSelf().inSingletonScope();
 
     bind(NotebookCellResourceResolver).toSelf().inSingletonScope();
     bind(ResourceResolver).toService(NotebookCellResourceResolver);

package/src/browser/service/notebook-cell-status-bar-service.ts

@@ -0,0 +1,94 @@
+// *****************************************************************************
+// Copyright (C) 2024 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { CancellationToken, Command, Disposable, Emitter, Event, URI } from '@theia/core';
+import { CellStatusbarAlignment } from '../../common';
+import { ThemeColor } from '@theia/core/lib/common/theme';
+import { AccessibilityInformation } from '@theia/core/lib/common/accessibility';
+import { injectable } from '@theia/core/shared/inversify';
+import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
+
+export interface NotebookCellStatusBarItem {
+    readonly alignment: CellStatusbarAlignment;
+    readonly priority?: number;
+    readonly text: string;
+    readonly color?: string | ThemeColor;
+    readonly backgroundColor?: string | ThemeColor;
+    readonly tooltip?: string | MarkdownString;
+    readonly command?: string | (Command & { arguments?: unknown[] });
+    readonly accessibilityInformation?: AccessibilityInformation;
+    readonly opacity?: string;
+    readonly onlyShowWhenActive?: boolean;
+}
+export interface NotebookCellStatusBarItemList {
+    items: NotebookCellStatusBarItem[];
+    dispose?(): void;
+}
+
+export interface NotebookCellStatusBarItemProvider {
+    viewType: string;
+    onDidChangeStatusBarItems?: Event<void>;
+    provideCellStatusBarItems(uri: URI, index: number, token: CancellationToken): Promise<NotebookCellStatusBarItemList | undefined>;
+}
+
+@injectable()
+export class NotebookCellStatusBarService implements Disposable {
+
+    protected readonly onDidChangeProvidersEmitter = new Emitter<void>();
+    readonly onDidChangeProviders: Event<void> = this.onDidChangeProvidersEmitter.event;
+
+    protected readonly onDidChangeItemsEmitter = new Emitter<void>();
+    readonly onDidChangeItems: Event<void> = this.onDidChangeItemsEmitter.event;
+
+    protected readonly providers: NotebookCellStatusBarItemProvider[] = [];
+
+    registerCellStatusBarItemProvider(provider: NotebookCellStatusBarItemProvider): Disposable {
+        this.providers.push(provider);
+        let changeListener: Disposable | undefined;
+        if (provider.onDidChangeStatusBarItems) {
+            changeListener = provider.onDidChangeStatusBarItems(() => this.onDidChangeItemsEmitter.fire());
+        }
+
+        this.onDidChangeProvidersEmitter.fire();
+
+        return Disposable.create(() => {
+            changeListener?.dispose();
+            const idx = this.providers.findIndex(p => p === provider);
+            this.providers.splice(idx, 1);
+        });
+    }
+
+    async getStatusBarItemsForCell(notebookUri: URI, cellIndex: number, viewType: string, token: CancellationToken): Promise<NotebookCellStatusBarItemList[]> {
+        const providers = this.providers.filter(p => p.viewType === viewType || p.viewType === '*');
+        return Promise.all(providers.map(async p => {
+            try {
+                return await p.provideCellStatusBarItems(notebookUri, cellIndex, token) ?? { items: [] };
+            } catch (e) {
+                console.error(e);
+                return { items: [] };
+            }
+        }));
+    }
+
+    dispose(): void {
+        this.onDidChangeItemsEmitter.dispose();
+        this.onDidChangeProvidersEmitter.dispose();
+    }
+}

package/src/browser/style/index.css

@@ -508,3 +508,22 @@ mark.theia-find-match.theia-find-match-selected {
   color: var(--theia-editor-findMatchForeground);
   background-color: var(--theia-editor-findMatchBackground);
 }
+
+.cell-status-bar-item {
+  align-items: center;
+  display: flex;
+  height: 16px;
+  margin: 0 3px;
+  overflow: hidden;
+  padding: 0 3px;
+  text-overflow: clip;
+  white-space: pre;
+}
+
+.cell-status-item-has-command {
+  cursor: pointer;
+}
+
+.cell-status-item-has-command:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}

package/src/browser/view/notebook-cell-editor.tsx

@@ -103,15 +103,7 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_LAST_LINE, currentLine === lineCount);
         }));
 
-        this.toDispose.push(this.props.cell.onWillBlurCellEditor(() => {
-            let parent = this.container?.parentElement;
-            while (parent && !parent.classList.contains('theia-notebook-cell')) {
-                parent = parent.parentElement;
-            }
-            if (parent) {
-                parent.focus();
-            }
-        }));
+        this.toDispose.push(this.props.cell.onWillBlurCellEditor(() => this.blurEditor()));
 
         this.toDispose.push(this.props.cell.onDidChangeEditorOptions(options => {
             this.editor?.getControl().updateOptions(options);
@@ -130,7 +122,7 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
 
         this.toDispose.push(this.props.notebookModel.onDidChangeSelectedCell(e => {
             if (e.cell !== this.props.cell && this.editor?.getControl().hasTextFocus()) {
-                this.props.notebookContextManager.context?.focus();
+                this.blurEditor();
             }
         }));
         if (!this.props.notebookViewportService || (this.container && this.props.notebookViewportService.isElementInViewport(this.container))) {
@@ -212,6 +204,11 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
 
             this.toDispose.push(this.editor.getControl().onDidChangeCursorSelection(e => {
                 const selectedText = this.editor!.getControl().getModel()!.getValueInRange(e.selection);
+                // TODO handle secondary selections
+                this.props.cell.selection = {
+                    start: { line: e.selection.startLineNumber - 1, character: e.selection.startColumn - 1 },
+                    end: { line: e.selection.endLineNumber - 1, character: e.selection.endColumn - 1 }
+                };
                 this.props.notebookModel.selectedText = selectedText;
             }));
             this.toDispose.push(this.editor.getControl().onDidChangeCursorPosition(e => {
@@ -226,7 +223,7 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             }));
             this.props.notebookCellEditorService.editorCreated(uri, this.editor);
             this.setMatches();
-            if (cell.editing && notebookModel.selectedCell === cell) {
+            if (notebookModel.selectedCell === cell) {
                 this.editor.getControl().focus();
             }
         }
@@ -273,4 +270,14 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
         </div >;
     }
 
+    protected blurEditor(): void {
+        let parent = this.container?.parentElement;
+        while (parent && !parent.classList.contains('theia-notebook-cell')) {
+            parent = parent.parentElement;
+        }
+        if (parent) {
+            parent.focus();
+        }
+    }
+
 }

package/src/browser/view/notebook-cell-toolbar.tsx

@@ -48,7 +48,7 @@ abstract class NotebookCellActionBar extends React.Component<NotebookCellToolbar
     }
 
     protected renderItem(item: NotebookCellToolbarItem): React.ReactNode {
-        return <div key={item.id} title={item.label} onClick={item.onClick} className={`${item.icon} ${ACTION_ITEM} theia-notebook-cell-toolbar-item`} />;
+        return <div key={item.id} id={item.id} title={item.label} onClick={item.onClick} className={`${item.icon} ${ACTION_ITEM} theia-notebook-cell-toolbar-item`} />;
     }
 
 }

package/src/browser/view/notebook-code-cell-view.tsx

@@ -27,7 +27,7 @@ import { NotebookCellActionContribution, NotebookCellCommands } from '../contrib
 import { CellExecution, NotebookExecutionStateService } from '../service/notebook-execution-state-service';
 import { codicon } from '@theia/core/lib/browser';
 import { NotebookCellExecutionState } from '../../common';
-import { CommandRegistry, DisposableCollection, nls } from '@theia/core';
+import { CancellationToken, CommandRegistry, DisposableCollection, nls } from '@theia/core';
 import { NotebookContextManager } from '../service/notebook-context-manager';
 import { NotebookViewportService } from './notebook-viewport-service';
 import { EditorPreferences } from '@theia/editor/lib/browser';
@@ -36,6 +36,8 @@ import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/mar
 import { MarkdownString } from '@theia/monaco-editor-core/esm/vs/base/common/htmlContent';
 import { NotebookCellEditorService } from '../service/notebook-cell-editor-service';
 import { CellOutputWebview } from '../renderers/cell-output-webview';
+import { NotebookCellStatusBarItem, NotebookCellStatusBarItemList, NotebookCellStatusBarService } from '../service/notebook-cell-status-bar-service';
+import { LabelParser } from '@theia/core/lib/browser/label-parser';
 
 @injectable()
 export class NotebookCodeCellRenderer implements CellRenderer {
@@ -75,6 +77,12 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(CellOutputWebview)
     protected readonly outputWebview: CellOutputWebview;
 
+    @inject(NotebookCellStatusBarService)
+    protected readonly notebookCellStatusBarService: NotebookCellStatusBarService;
+
+    @inject(LabelParser)
+    protected readonly labelParser: LabelParser;
+
     render(notebookModel: NotebookModel, cell: NotebookCellModel, handle: number): React.ReactNode {
         return <div className='theia-notebook-cell-with-sidebar' ref={ref => observeCellHeight(ref, cell)}>
             <div className='theia-notebook-cell-editor-container'>
@@ -87,6 +95,8 @@ export class NotebookCodeCellRenderer implements CellRenderer {
                 <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
                     commandRegistry={this.commandRegistry}
                     executionStateService={this.executionStateService}
+                    cellStatusBarService={this.notebookCellStatusBarService}
+                    labelParser={this.labelParser}
                     onClick={() => cell.requestFocusEditor()} />
             </div >
         </div >;
@@ -182,7 +192,9 @@ export interface NotebookCodeCellStatusProps {
     notebook: NotebookModel;
     cell: NotebookCellModel;
     commandRegistry: CommandRegistry;
+    cellStatusBarService: NotebookCellStatusBarService;
     executionStateService?: NotebookExecutionStateService;
+    labelParser: LabelParser;
     onClick: () => void;
 }
 
@@ -195,6 +207,8 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
 
     protected toDispose = new DisposableCollection();
 
+    protected statusBarItems: NotebookCellStatusBarItemList[] = [];
+
     constructor(props: NotebookCodeCellStatusProps) {
         super(props);
 
@@ -225,6 +239,19 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         this.toDispose.push(props.cell.onDidChangeLanguage(() => {
             this.forceUpdate();
         }));
+
+        this.updateStatusBarItems();
+        this.props.cellStatusBarService.onDidChangeItems(() => this.updateStatusBarItems());
+        this.props.notebook.onContentChanged(() => this.updateStatusBarItems());
+    }
+
+    async updateStatusBarItems(): Promise<void> {
+        this.statusBarItems = await this.props.cellStatusBarService.getStatusBarItemsForCell(
+            this.props.notebook.uri,
+            this.props.notebook.cells.indexOf(this.props.cell),
+            this.props.notebook.viewType,
+            CancellationToken.None);
+        this.forceUpdate();
     }
 
     override componentWillUnmount(): void {
@@ -235,6 +262,7 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         return <div className='notebook-cell-status' onClick={() => this.props.onClick()}>
             <div className='notebook-cell-status-left'>
                 {this.props.executionStateService && this.renderExecutionState()}
+                {this.statusBarItems?.length && this.renderStatusBarItems()}
             </div>
             <div className='notebook-cell-status-right'>
                 <span className='notebook-cell-language-label' onClick={() => {
@@ -244,7 +272,7 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         </div>;
     }
 
-    private renderExecutionState(): React.ReactNode {
+    protected renderExecutionState(): React.ReactNode {
         const state = this.state.currentExecution?.state;
         const { lastRunSuccess } = this.props.cell.internalMetadata;
 
@@ -270,7 +298,7 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         </>;
     }
 
-    private getExecutionTime(): number {
+    protected getExecutionTime(): number {
         const { runStartTime, runEndTime } = this.props.cell.internalMetadata;
         const { executionTime } = this.state;
         if (runStartTime !== undefined && runEndTime !== undefined) {
@@ -279,9 +307,42 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         return executionTime;
     }
 
-    private renderTime(ms: number): string {
+    protected renderTime(ms: number): string {
         return `${(ms / 1000).toLocaleString(undefined, { maximumFractionDigits: 1, minimumFractionDigits: 1 })}s`;
     }
+
+    protected renderStatusBarItems(): React.ReactNode {
+        return <>
+            {
+                this.statusBarItems.flatMap((itemList, listIndex) =>
+                    itemList.items.map((item, index) => this.renderStatusBarItem(item, `${listIndex}-${index}`)
+                    )
+                )
+            }
+        </>;
+    }
+
+    protected renderStatusBarItem(item: NotebookCellStatusBarItem, key: string): React.ReactNode {
+        const content = this.props.labelParser.parse(item.text).map(part => {
+            if (typeof part === 'string') {
+                return part;
+            } else {
+                return <span key={part.name} className={`codicon codicon-${part.name}`}></span>;
+            }
+        });
+        return <div key={key} className={`cell-status-bar-item ${item.command ? 'cell-status-item-has-command' : ''}`} onClick={async () => {
+            if (item.command) {
+                if (typeof item.command === 'string') {
+                    this.props.commandRegistry.executeCommand(item.command);
+                } else {
+                    this.props.commandRegistry.executeCommand(item.command.id, ...(item.command.arguments ?? []));
+                }
+            }
+        }}>
+            {content}
+        </div>;
+    }
+
 }
 
 interface NotebookCellOutputProps {

package/src/browser/view/notebook-main-toolbar.tsx

@@ -152,17 +152,17 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
 
     override render(): React.ReactNode {
         const menuItems = this.getMenuItems();
-        return <div className='theia-notebook-main-toolbar'>
+        return <div className='theia-notebook-main-toolbar' id='notebook-main-toolbar'>
             {menuItems.slice(0, menuItems.length - this.calculateNumberOfHiddenItems(menuItems)).map(item => this.renderMenuItem(item))}
             {
                 this.state.numberOfHiddenItems > 0 &&
                 <span className={`${codicon('ellipsis')} action-label theia-notebook-main-toolbar-item`} onClick={e => this.renderContextMenu(e.nativeEvent, menuItems)} />
             }
             <div ref={element => this.gapElementChanged(element)} style={{ flexGrow: 1 }}></div>
-            <div className='theia-notebook-main-toolbar-item action-label'
+            <div className='theia-notebook-main-toolbar-item action-label' id={NotebookCommands.SELECT_KERNEL_COMMAND.id}
                 onClick={() => this.props.commandRegistry.executeCommand(NotebookCommands.SELECT_KERNEL_COMMAND.id, this.props.notebookModel)}>
                 <span className={codicon('server-environment')} />
-                <span className=' theia-notebook-main-toolbar-item-text'>
+                <span className=' theia-notebook-main-toolbar-item-text' id='kernel-text'>
                     {this.state.selectedKernelLabel ?? nls.localizeByDefault('Select Kernel')}
                 </span>
             </div>
@@ -195,7 +195,7 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
             const command = this.props.commandRegistry.getCommand(item.command ?? '') as NotebookCommand | undefined;
             const label = command?.shortTitle ?? item.label;
             const title = command?.tooltip ?? item.label;
-            return <div key={item.id} title={title} className={`theia-notebook-main-toolbar-item action-label${this.getAdditionalClasses(item)}`}
+            return <div key={item.id} id={item.id} title={title} className={`theia-notebook-main-toolbar-item action-label${this.getAdditionalClasses(item)}`}
                 onClick={() => {
                     if (item.command && (!item.when || this.props.contextKeyService.match(item.when, this.props.editorNode))) {
                         this.props.commandRegistry.executeCommand(item.command, this.props.notebookModel.uri);

package/src/browser/view/notebook-markdown-cell-view.tsx

@@ -30,6 +30,8 @@ import { NotebookCodeCellStatus } from './notebook-code-cell-view';
 import { NotebookEditorFindMatch, NotebookEditorFindMatchOptions } from './notebook-find-widget';
 import * as mark from 'advanced-mark.js';
 import { NotebookCellEditorService } from '../service/notebook-cell-editor-service';
+import { NotebookCellStatusBarService } from '../service/notebook-cell-status-bar-service';
+import { LabelParser } from '@theia/core/lib/browser/label-parser';
 
 @injectable()
 export class NotebookMarkdownCellRenderer implements CellRenderer {
@@ -51,6 +53,12 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
     @inject(NotebookCellEditorService)
     protected readonly notebookCellEditorService: NotebookCellEditorService;
 
+    @inject(NotebookCellStatusBarService)
+    protected readonly notebookCellStatusBarService: NotebookCellStatusBarService;
+
+    @inject(LabelParser)
+    protected readonly labelParser: LabelParser;
+
     render(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
         return <MarkdownCell
             markdownRenderer={this.markdownRenderer}
@@ -60,7 +68,10 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
             cell={cell}
             notebookModel={notebookModel}
             notebookContextManager={this.notebookContextManager}
-            notebookCellEditorService={this.notebookCellEditorService} />;
+            notebookCellEditorService={this.notebookCellEditorService}
+            notebookCellStatusBarService={this.notebookCellStatusBarService}
+            labelParser={this.labelParser}
+        />;
     }
 
     renderSidebar(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
@@ -86,11 +97,15 @@ interface MarkdownCellProps {
     notebookModel: NotebookModel;
     notebookContextManager: NotebookContextManager;
     notebookOptionsService: NotebookOptionsService;
-    notebookCellEditorService: NotebookCellEditorService
+    notebookCellEditorService: NotebookCellEditorService;
+    notebookCellStatusBarService: NotebookCellStatusBarService;
+    labelParser: LabelParser;
 }
 
 function MarkdownCell({
-    markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager, notebookOptionsService, commandRegistry, notebookCellEditorService
+    markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager,
+    notebookOptionsService, commandRegistry, notebookCellEditorService, notebookCellStatusBarService,
+    labelParser
 }: MarkdownCellProps): React.JSX.Element {
     const [editMode, setEditMode] = React.useState(cell.editing);
     let empty = false;
@@ -147,6 +162,8 @@ function MarkdownCell({
                 fontInfo={notebookOptionsService.editorFontInfo} />
             <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
                 commandRegistry={commandRegistry}
+                cellStatusBarService={notebookCellStatusBarService}
+                labelParser={labelParser}
                 onClick={() => cell.requestFocusEditor()} />
         </div >) :
         (<div className='theia-notebook-markdown-content' key="markdown"

package/src/browser/view-model/notebook-cell-model.ts

@@ -62,6 +62,10 @@ export interface NotebookCell {
     metadata: NotebookCellMetadata;
     internalMetadata: NotebookCellInternalMetadata;
     text: string;
+    /**
+     * The selection of the cell. Zero-based line/character coordinates.
+     */
+    selection: Range | undefined;
     onDidChangeOutputs?: Event<NotebookCellOutputsSplice>;
     onDidChangeOutputItems?: Event<CellOutput>;
     onDidChangeLanguage: Event<string>;
@@ -254,14 +258,26 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         }
     }
 
+    protected _selection: Range | undefined = undefined;
+
+    get selection(): Range | undefined {
+        return this._selection;
+    }
+
+    set selection(selection: Range | undefined) {
+        this._selection = selection;
+    }
+
     protected _cellheight: number = 0;
     get cellHeight(): number {
         return this._cellheight;
     }
 
     set cellHeight(height: number) {
-        this.onDidCellHeightChangeEmitter.fire(height);
-        this._cellheight = height;
+        if (height !== this._cellheight) {
+            this.onDidCellHeightChangeEmitter.fire(height);
+            this._cellheight = height;
+        }
     }
 
     @postConstruct()