@theia/notebook 1.46.1 → 1.47.0

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

@@ -61,7 +61,7 @@ export class NotebookCodeCellRenderer implements CellRenderer {
                 </div>
             </div>
             <div className='theia-notebook-cell-with-sidebar'>
-                <NotebookCodeCellOutputs cell={cell} outputWebviewFactory={this.cellOutputWebviewFactory}
+                <NotebookCodeCellOutputs cell={cell} notebook={notebookModel} outputWebviewFactory={this.cellOutputWebviewFactory}
                     renderSidebar={() =>
                         this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, notebookModel, cell, cell.outputs[0])} />
             </div>
@@ -71,21 +71,40 @@ export class NotebookCodeCellRenderer implements CellRenderer {
 
 export interface NotebookCodeCellStatusProps {
     cell: NotebookCellModel;
-    executionStateService: NotebookExecutionStateService
+    executionStateService: NotebookExecutionStateService;
 }
 
-export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStatusProps, { currentExecution?: CellExecution }> {
+export interface NotebookCodeCellStatusState {
+    currentExecution?: CellExecution;
+    executionTime: number;
+}
+
+export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStatusProps, NotebookCodeCellStatusState> {
 
     protected toDispose = new DisposableCollection();
 
     constructor(props: NotebookCodeCellStatusProps) {
         super(props);
 
-        this.state = {};
+        this.state = {
+            executionTime: 0
+        };
 
+        let currentInterval: NodeJS.Timeout | undefined;
         this.toDispose.push(props.executionStateService.onDidChangeExecution(event => {
             if (event.affectsCell(this.props.cell.uri)) {
-                this.setState({ currentExecution: event.changed });
+                this.setState({ currentExecution: event.changed, executionTime: 0 });
+                clearInterval(currentInterval);
+                if (event.changed?.state === NotebookCellExecutionState.Executing) {
+                    const startTime = Date.now();
+                    // The resolution of the time display is only a single digit after the decimal point.
+                    // Therefore, we only need to update the display every 100ms.
+                    currentInterval = setInterval(() => {
+                        this.setState({
+                            executionTime: Date.now() - startTime
+                        });
+                    }, 100);
+                }
             }
         }));
     }
@@ -126,22 +145,28 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
             {iconClasses &&
                 <>
                     <span className={`${iconClasses} notebook-cell-status-item`} style={{ color }}></span>
-                    <div className='notebook-cell-status-item'>{this.getExecutionTime()}</div>
+                    <div className='notebook-cell-status-item'>{this.renderTime(this.getExecutionTime())}</div>
                 </>}
         </>;
     }
 
-    private getExecutionTime(): string {
+    private getExecutionTime(): number {
         const { runStartTime, runEndTime } = this.props.cell.internalMetadata;
-        if (runStartTime && runEndTime) {
-            return `${((runEndTime - runStartTime) / 1000).toLocaleString(undefined, { maximumFractionDigits: 1, minimumFractionDigits: 1 })}s`;
+        const { executionTime } = this.state;
+        if (runStartTime !== undefined && runEndTime !== undefined) {
+            return runEndTime - runStartTime;
         }
-        return '0.0s';
+        return executionTime;
+    }
+
+    private renderTime(ms: number): string {
+        return `${(ms / 1000).toLocaleString(undefined, { maximumFractionDigits: 1, minimumFractionDigits: 1 })}s`;
     }
 }
 
 interface NotebookCellOutputProps {
     cell: NotebookCellModel;
+    notebook: NotebookModel;
     outputWebviewFactory: CellOutputWebviewFactory;
     renderSidebar: () => React.ReactNode;
 }
@@ -158,14 +183,14 @@ export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputP
     }
 
     override async componentDidMount(): Promise<void> {
-        const { cell, outputWebviewFactory } = this.props;
+        const { cell, notebook, outputWebviewFactory } = this.props;
         this.toDispose.push(cell.onDidChangeOutputs(async () => {
             if (!this.outputsWebviewPromise && cell.outputs.length > 0) {
-                this.outputsWebviewPromise = outputWebviewFactory(cell).then(webview => {
+                this.outputsWebviewPromise = outputWebviewFactory(cell, notebook).then(webview => {
                     this.outputsWebview = webview;
                     this.forceUpdate();
                     return webview;
-                    });
+                });
                 this.forceUpdate();
             } else if (this.outputsWebviewPromise && cell.outputs.length === 0 && cell.internalMetadata.runEndTime) {
                 (await this.outputsWebviewPromise).dispose();
@@ -175,7 +200,7 @@ export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputP
             }
         }));
         if (cell.outputs.length > 0) {
-            this.outputsWebviewPromise = outputWebviewFactory(cell).then(webview => {
+            this.outputsWebviewPromise = outputWebviewFactory(cell, notebook).then(webview => {
                 this.outputsWebview = webview;
                 this.forceUpdate();
                 return webview;

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

@@ -13,7 +13,7 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { CommandRegistry, CompoundMenuNodeRole, DisposableCollection, MenuModelRegistry, MenuNode, nls } from '@theia/core';
+import { ArrayUtils, CommandRegistry, CompoundMenuNodeRole, DisposableCollection, MenuModelRegistry, MenuNode, nls } from '@theia/core';
 import * as React from '@theia/core/shared/react';
 import { codicon } from '@theia/core/lib/browser';
 import { NotebookCommands, NotebookMenus } from '../contributions/notebook-actions-contribution';
@@ -21,6 +21,7 @@ import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookKernelService } from '../service/notebook-kernel-service';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+import { NotebookCommand } from '../../common';
 
 export interface NotebookMainToolbarProps {
     notebookModel: NotebookModel
@@ -85,7 +86,7 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
         return <div className='theia-notebook-main-toolbar'>
             {this.getMenuItems().map(item => this.renderMenuItem(item))}
             <div style={{ flexGrow: 1 }}></div>
-            <div className='theia-notebook-main-toolbar-item'
+            <div className='theia-notebook-main-toolbar-item action-label'
                 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'>
@@ -97,13 +98,18 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
 
     protected renderMenuItem(item: MenuNode): React.ReactNode {
         if (item.role === CompoundMenuNodeRole.Group) {
-            const itemNodes = item.children?.map(child => this.renderMenuItem(child)).filter(child => !!child);
+            const itemNodes = ArrayUtils.coalesce(item.children?.map(child => this.renderMenuItem(child)) ?? []);
             return <React.Fragment key={item.id}>
                 {itemNodes}
                 {itemNodes && itemNodes.length > 0 && <span key={`${item.id}-separator`} className='theia-notebook-toolbar-separator'></span>}
             </React.Fragment>;
         } else if (!item.when || this.props.contextKeyService.match(item.when)) {
-            return <div key={item.id} title={item.id} className='theia-notebook-main-toolbar-item'
+            const visibleCommand = Boolean(this.props.commandRegistry.getVisibleHandler(item.command ?? '', this.props.notebookModel));
+            if (!visibleCommand) {
+                return undefined;
+            }
+            const title = (this.props.commandRegistry.getCommand(item.command ?? '') as NotebookCommand)?.tooltip ?? item.label;
+            return <div key={item.id} title={title} className='theia-notebook-main-toolbar-item action-label'
                 onClick={() => {
                     if (item.command) {
                         this.props.commandRegistry.executeCommand(item.command, this.props.notebookModel);

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

@@ -150,7 +150,7 @@ export class NotebookCellModel implements NotebookCell, Disposable {
 
     }
 
-    textModel: MonacoEditorModel;
+    protected textModel?: MonacoEditorModel;
 
     protected htmlContext: HTMLLIElement;
 
@@ -220,12 +220,14 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         this.onDidChangeInternalMetadataEmitter.dispose();
         this.onDidChangeLanguageEmitter.dispose();
         this.notebookCellContextManager.dispose();
-        this.textModel.dispose();
+        this.textModel?.dispose();
         this.toDispose.dispose();
     }
 
     requestEdit(): void {
-        this.onDidRequestCellEditChangeEmitter.fire(true);
+        if (!this.textModel || !this.textModel.readOnly) {
+            this.onDidRequestCellEditChangeEmitter.fire(true);
+        }
     }
 
     requestStopEdit(): void {

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

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Disposable, Emitter, URI } from '@theia/core';
+import { Disposable, Emitter, Event, Resource, URI } from '@theia/core';
 import { Saveable, SaveOptions } from '@theia/core/lib/browser';
 import {
     CellData, CellEditType, CellUri, NotebookCellInternalMetadata,
@@ -28,6 +28,7 @@ import { NotebookCellModel, NotebookCellModelFactory } from './notebook-cell-mod
 import { MonacoTextModelService } from '@theia/monaco/lib/browser/monaco-text-model-service';
 import { inject, injectable, interfaces, postConstruct } from '@theia/core/shared/inversify';
 import { UndoRedoService } from '@theia/editor/lib/browser/undo-redo-service';
+import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
 
 export const NotebookModelFactory = Symbol('NotebookModelFactory');
 
@@ -42,10 +43,10 @@ export function createNotebookModelContainer(parent: interfaces.Container, props
 
 const NotebookModelProps = Symbol('NotebookModelProps');
 export interface NotebookModelProps {
-    data: NotebookData,
-    uri: URI,
-    viewType: string,
-    serializer: NotebookSerializer,
+    data: NotebookData;
+    resource: Resource;
+    viewType: string;
+    serializer: NotebookSerializer;
 }
 
 @injectable()
@@ -63,6 +64,10 @@ export class NotebookModel implements Saveable, Disposable {
     protected readonly onDidChangeContentEmitter = new Emitter<NotebookContentChangedEvent[]>();
     readonly onDidChangeContent = this.onDidChangeContentEmitter.event;
 
+    get onDidChangeReadOnly(): Event<boolean | MarkdownString> {
+        return this.props.resource.onDidChangeReadOnly ?? Event.None;
+    }
+
     @inject(FileService)
     protected readonly fileService: FileService;
 
@@ -81,7 +86,7 @@ export class NotebookModel implements Saveable, Disposable {
 
     protected nextHandle: number = 0;
 
-    protected _dirty: boolean = false;
+    protected _dirty = false;
 
     set dirty(dirty: boolean) {
         this._dirty = dirty;
@@ -92,13 +97,17 @@ export class NotebookModel implements Saveable, Disposable {
         return this._dirty;
     }
 
+    get readOnly(): boolean | MarkdownString {
+        return this.props.resource.readOnly ?? false;
+    }
+
     selectedCell?: NotebookCellModel;
     protected dirtyCells: NotebookCellModel[] = [];
 
     cells: NotebookCellModel[];
 
     get uri(): URI {
-        return this.props.uri;
+        return this.props.resource.uri;
     }
 
     get viewType(): string {
@@ -112,7 +121,7 @@ export class NotebookModel implements Saveable, Disposable {
         this.dirty = false;
 
         this.cells = this.props.data.cells.map((cell, index) => this.cellModelFactory({
-            uri: CellUri.generate(this.props.uri, index),
+            uri: CellUri.generate(this.props.resource.uri, index),
             handle: index,
             source: cell.source,
             language: cell.language,
@@ -294,7 +303,7 @@ export class NotebookModel implements Saveable, Disposable {
         }
     }
 
-    private replaceCells(start: number, deleteCount: number, newCells: CellData[], computeUndoRedo: boolean): void {
+    protected async replaceCells(start: number, deleteCount: number, newCells: CellData[], computeUndoRedo: boolean): Promise<void> {
         const cells = newCells.map(cell => {
             const handle = this.nextHandle++;
             return this.cellModelFactory({
@@ -325,11 +334,15 @@ export class NotebookModel implements Saveable, Disposable {
                 async () => this.replaceCells(start, deleteCount, newCells, false));
         }
 
+        // Ensure that all text model have been created
+        // Otherwise we run into a race condition once we fire `onDidChangeContent`
+        await Promise.all(cells.map(cell => cell.resolveTextModel()));
+
         this.onDidAddOrRemoveCellEmitter.fire({ rawEvent: { kind: NotebookCellsChangeType.ModelChange, changes }, newCellIds: cells.map(cell => cell.handle) });
         this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ModelChange, changes }]);
     }
 
-    private changeCellInternalMetadataPartial(cell: NotebookCellModel, internalMetadata: NullablePartialNotebookCellInternalMetadata): void {
+    protected changeCellInternalMetadataPartial(cell: NotebookCellModel, internalMetadata: NullablePartialNotebookCellInternalMetadata): void {
         const newInternalMetadata: NotebookCellInternalMetadata = {
             ...cell.internalMetadata
         };
@@ -345,7 +358,7 @@ export class NotebookModel implements Saveable, Disposable {
         ]);
     }
 
-    private updateNotebookMetadata(metadata: NotebookDocumentMetadata, computeUndoRedo: boolean): void {
+    protected updateNotebookMetadata(metadata: NotebookDocumentMetadata, computeUndoRedo: boolean): void {
         const oldMetadata = this.metadata;
         if (computeUndoRedo) {
             this.undoRedoService.pushElement(this.uri,
@@ -358,7 +371,7 @@ export class NotebookModel implements Saveable, Disposable {
         this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ChangeDocumentMetadata, metadata: this.metadata }]);
     }
 
-    private changeCellLanguage(cell: NotebookCellModel, languageId: string, computeUndoRedo: boolean): void {
+    protected changeCellLanguage(cell: NotebookCellModel, languageId: string, computeUndoRedo: boolean): void {
         if (cell.language === languageId) {
             return;
         }
@@ -368,7 +381,7 @@ export class NotebookModel implements Saveable, Disposable {
         this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ChangeCellLanguage, index: this.cells.indexOf(cell), language: languageId }]);
     }
 
-    private moveCellToIndex(fromIndex: number, length: number, toIndex: number, computeUndoRedo: boolean): boolean {
+    protected moveCellToIndex(fromIndex: number, length: number, toIndex: number, computeUndoRedo: boolean): boolean {
         if (computeUndoRedo) {
             this.undoRedoService.pushElement(this.uri,
                 async () => { this.moveCellToIndex(toIndex, length, fromIndex, false); },
@@ -383,7 +396,7 @@ export class NotebookModel implements Saveable, Disposable {
         return true;
     }
 
-    private getCellIndexByHandle(handle: number): number {
+    protected getCellIndexByHandle(handle: number): number {
         return this.cells.findIndex(c => c.handle === handle);
     }
 }

package/src/common/notebook-common.ts

@@ -19,8 +19,7 @@ import { MarkdownString } from '@theia/core/lib/common/markdown-rendering/markdo
 import { BinaryBuffer } from '@theia/core/lib/common/buffer';
 import { UriComponents } from '@theia/core/lib/common/uri';
 
-export interface NotebookCommand {
-    id: string;
+export interface NotebookCommand extends Command {
     title?: string;
     tooltip?: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any