@theia/notebook 1.48.2 → 1.49.0

package/src/browser/notebook-type-registry.ts

@@ -13,22 +13,42 @@
 //
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
-import { Disposable } from '@theia/core';
-import { injectable } from '@theia/core/shared/inversify';
+
+import { Disposable, DisposableCollection } from '@theia/core';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { OpenWithService } from '@theia/core/lib/browser';
 import { NotebookTypeDescriptor } from '../common/notebook-protocol';
+import { NotebookOpenHandler } from './notebook-open-handler';
 
 @injectable()
 export class NotebookTypeRegistry {
+
+    @inject(OpenWithService)
+    protected readonly openWithService: OpenWithService;
+
+    @inject(NotebookOpenHandler)
+    protected readonly notebookOpenHandler: NotebookOpenHandler;
+
     private readonly _notebookTypes: NotebookTypeDescriptor[] = [];
 
     get notebookTypes(): readonly NotebookTypeDescriptor[] {
         return this._notebookTypes;
     }
 
-    registerNotebookType(type: NotebookTypeDescriptor): Disposable {
-        this._notebookTypes.push(type);
-        return Disposable.create(() => {
+    registerNotebookType(type: NotebookTypeDescriptor, providerName: string): Disposable {
+        const toDispose = new DisposableCollection();
+        toDispose.push(Disposable.create(() => {
             this._notebookTypes.splice(this._notebookTypes.indexOf(type), 1);
-        });
+        }));
+        this._notebookTypes.push(type);
+        toDispose.push(this.notebookOpenHandler.registerNotebookType(type));
+        toDispose.push(this.openWithService.registerHandler({
+            id: type.type,
+            label: type.displayName,
+            providerName,
+            canHandle: uri => this.notebookOpenHandler.canHandleType(uri, type),
+            open: uri => this.notebookOpenHandler.open(uri, { notebookType: type.type })
+        }));
+        return toDispose;
     }
 }

package/src/browser/notebook-types.ts

@@ -111,6 +111,7 @@ export interface CellOutputEdit {
     editType: CellEditType.Output;
     index: number;
     outputs: CellOutput[];
+    deleteCount?: number;
     append?: boolean;
 }
 
@@ -118,6 +119,7 @@ export interface CellOutputEditByHandle {
     editType: CellEditType.Output;
     handle: number;
     outputs: CellOutput[];
+    deleteCount?: number;
     append?: boolean;
 }
 

package/src/browser/service/notebook-clipboard-service.ts

@@ -0,0 +1,43 @@
+// *****************************************************************************
+// 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
+// *****************************************************************************
+
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
+import { NotebookCellModel } from '../view-model/notebook-cell-model';
+import { environment } from '@theia/core';
+import { CellData } from '../../common';
+
+@injectable()
+export class NotebookClipboardService {
+
+    protected copiedCell: CellData | undefined;
+
+    @inject(ClipboardService)
+    protected readonly clipboardService: ClipboardService;
+
+    copyCell(cell: NotebookCellModel): void {
+        this.copiedCell = cell.getData();
+
+        if (environment.electron.is()) {
+            this.clipboardService.writeText(cell.text);
+        }
+    }
+
+    getCell(): CellData | undefined {
+        return this.copiedCell;
+    }
+
+}

package/src/browser/service/notebook-context-manager.ts

@@ -15,19 +15,19 @@
 // *****************************************************************************
 
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { ContextKeyChangeEvent, ContextKeyService, ScopedValueStore } from '@theia/core/lib/browser/context-key-service';
+import { ContextKeyChangeEvent, ContextKeyService, ContextMatcher, ScopedValueStore } from '@theia/core/lib/browser/context-key-service';
 import { DisposableCollection, Emitter } from '@theia/core';
 import { NotebookKernelService } from './notebook-kernel-service';
 import {
     NOTEBOOK_CELL_EDITABLE,
     NOTEBOOK_CELL_EXECUTING, NOTEBOOK_CELL_EXECUTION_STATE,
     NOTEBOOK_CELL_FOCUSED, NOTEBOOK_CELL_MARKDOWN_EDIT_MODE,
-    NOTEBOOK_CELL_TYPE, NOTEBOOK_KERNEL, NOTEBOOK_KERNEL_SELECTED,
+    NOTEBOOK_CELL_TYPE, NOTEBOOK_HAS_OUTPUTS, NOTEBOOK_KERNEL, NOTEBOOK_KERNEL_SELECTED,
     NOTEBOOK_VIEW_TYPE
 } from '../contributions/notebook-context-keys';
 import { NotebookEditorWidget } from '../notebook-editor-widget';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
-import { CellKind } from '../../common';
+import { CellKind, NotebookCellsChangeType } from '../../common';
 import { NotebookExecutionStateService } from './notebook-execution-state-service';
 
 @injectable()
@@ -53,6 +53,8 @@ export class NotebookContextManager {
         return this._context;
     }
 
+    protected cellContexts: Map<number, Record<string, unknown>> = new Map();
+
     init(widget: NotebookEditorWidget): void {
         this._context = widget.node;
         this.scopedStore = this.contextKeyService.createScoped(widget.node);
@@ -73,6 +75,15 @@ export class NotebookContextManager {
             }
         }));
 
+        widget.model?.onDidChangeContent(events => {
+            if (events.some(e => e.kind === NotebookCellsChangeType.ModelChange || e.kind === NotebookCellsChangeType.Output)) {
+                this.scopedStore.setContext(NOTEBOOK_HAS_OUTPUTS, widget.model?.cells.some(cell => cell.outputs.length > 0));
+                this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_HAS_OUTPUTS]));
+            }
+        });
+
+        this.scopedStore.setContext(NOTEBOOK_HAS_OUTPUTS, !!widget.model?.cells.find(cell => cell.outputs.length > 0));
+
         // Cell Selection realted keys
         this.scopedStore.setContext(NOTEBOOK_CELL_FOCUSED, !!widget.model?.selectedCell);
         widget.model?.onDidChangeSelectedCell(e => {
@@ -80,6 +91,14 @@ export class NotebookContextManager {
             this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_FOCUSED]));
         });
 
+        this.toDispose.push(this.executionStateService.onDidChangeExecution(e => {
+            if (e.notebook.toString() === widget.model?.uri.toString()) {
+                this.setCellContext(e.cellHandle, NOTEBOOK_CELL_EXECUTING, !!e.changed);
+                this.setCellContext(e.cellHandle, NOTEBOOK_CELL_EXECUTION_STATE, e.changed?.state ?? 'idle');
+                this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_EXECUTING, NOTEBOOK_CELL_EXECUTION_STATE]));
+            }
+        }));
+
         widget.model?.onDidChangeSelectedCell(e => this.selectedCellChanged(e));
 
         this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_VIEW_TYPE, NOTEBOOK_KERNEL_SELECTED, NOTEBOOK_KERNEL]));
@@ -100,19 +119,26 @@ export class NotebookContextManager {
                 this.scopedStore.setContext(NOTEBOOK_CELL_EDITABLE, cell.cellKind === CellKind.Markup && !cellEdit);
                 this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_MARKDOWN_EDIT_MODE]));
             }));
-            this.cellDisposables.push(this.executionStateService.onDidChangeExecution(e => {
-                if (cell && e.affectsCell(cell.uri)) {
-                    this.scopedStore.setContext(NOTEBOOK_CELL_EXECUTING, !!e.changed);
-                    this.scopedStore.setContext(NOTEBOOK_CELL_EXECUTION_STATE, e.changed?.state ?? 'idle');
-                    this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_EXECUTING, NOTEBOOK_CELL_EXECUTION_STATE]));
-                }
-            }));
         }
 
         this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_TYPE]));
 
     }
 
+    protected setCellContext(cellHandle: number, key: string, value: unknown): void {
+        let cellContext = this.cellContexts.get(cellHandle);
+        if (!cellContext) {
+            cellContext = {};
+            this.cellContexts.set(cellHandle, cellContext);
+        }
+
+        cellContext[key] = value;
+    }
+
+    getCellContext(cellHandle: number): ContextMatcher {
+        return this.contextKeyService.createOverlay(Object.entries(this.cellContexts.get(cellHandle) ?? {}));
+    }
+
     onDidEditorTextFocus(focus: boolean): void {
         this.scopedStore.setContext('inputFocus', focus);
     }

package/src/browser/service/notebook-service.ts

@@ -121,6 +121,10 @@ export class NotebookService implements Disposable {
         // This ensures that all text models are available in the plugin host
         this.textModelService.createTextModelsForNotebook(model);
         this.didAddNotebookDocumentEmitter.fire(model);
+        model.onDidDispose(() => {
+            this.notebookModels.delete(resource.uri.toString());
+            this.didRemoveNotebookDocumentEmitter.fire(model);
+        });
         return model;
     }
 

package/src/browser/style/index.css

@@ -109,8 +109,13 @@
   flex-grow: 1;
 }
 
-.notebook-cell-status-right {
-  margin: 0 5px;
+.notebook-cell-language-label {
+  padding: 0 5px;
+}
+
+.notebook-cell-language-label:hover {
+  cursor: pointer;
+  background-color: var(--theia-toolbar-hoverBackground);
 }
 
 .notebook-cell-status-item {
@@ -213,8 +218,9 @@
   cursor: pointer;
 }
 
-.theia-notebook-main-toolbar-item:hover {
-  background-color: var(--theia-toolbar-hoverBackground);
+.theia-notebook-main-toolbar-item.theia-mod-disabled:hover {
+  background-color: transparent;
+  cursor: default;
 }
 
 .theia-notebook-main-toolbar-item-text {
@@ -265,3 +271,12 @@
   background-color: var(--theia-notebook-focusedCellBorder);
   width: 100%;
 }
+
+.theia-notebook-collapsed-output {
+  padding: 4px 8px;
+  color: var(--theia-foreground);
+  margin-left: 30px;
+  font-size: 14px;
+  line-height: 22px;
+  opacity: 0.7;
+}

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

@@ -42,7 +42,8 @@ const DEFAULT_EDITOR_OPTIONS: MonacoEditor.IOptions = {
     scrollbar: {
         ...MonacoEditorProvider.inlineOptions.scrollbar,
         alwaysConsumeMouseWheel: false
-    }
+    },
+    lineDecorationsWidth: 10,
 };
 
 export class CellEditor extends React.Component<CellEditorProps, {}> {
@@ -56,6 +57,15 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
         this.toDispose.push(this.props.cell.onWillFocusCellEditor(() => {
             this.editor?.getControl().focus();
         }));
+
+        this.toDispose.push(this.props.cell.onDidChangeEditorOptions(options => {
+            this.editor?.getControl().updateOptions(options);
+        }));
+
+        this.toDispose.push(this.props.cell.onDidChangeLanguage(language => {
+            this.editor?.setLanguage(language);
+        }));
+
         this.toDispose.push(this.props.notebookModel.onDidChangeSelectedCell(() => {
             if (this.props.notebookModel.selectedCell !== this.props.cell && this.editor?.getControl().hasTextFocus()) {
                 if (document.activeElement && 'blur' in document.activeElement) {
@@ -96,7 +106,7 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
                 editorModel,
                 editorNode,
                 monacoServices,
-                DEFAULT_EDITOR_OPTIONS,
+                { ...DEFAULT_EDITOR_OPTIONS, ...cell.editorOptions },
                 [[IContextKeyService, this.props.notebookContextManager.scopedStore]]);
             this.toDispose.push(this.editor);
             this.editor.setLanguage(cell.language);

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

@@ -45,7 +45,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
 
     constructor(props: CellListProps) {
         super(props);
-        this.state = { selectedCell: undefined, dragOverIndicator: undefined };
+        this.state = { selectedCell: props.notebookModel.selectedCell, dragOverIndicator: undefined };
         this.toDispose.push(props.notebookModel.onDidAddOrRemoveCell(e => {
             if (e.newCellIds && e.newCellIds.length > 0) {
                 this.setState({ ...this.state, selectedCell: this.props.notebookModel.cells.find(model => model.handle === e.newCellIds![e.newCellIds!.length - 1]) });
@@ -89,7 +89,10 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                                 {this.renderCellContent(cell, index)}
                             </div>
                             {this.state.selectedCell === cell &&
-                                this.props.toolbarRenderer.renderCellToolbar(NotebookCellActionContribution.ACTION_MENU, this.props.notebookModel, cell)}
+                                this.props.toolbarRenderer.renderCellToolbar(NotebookCellActionContribution.ACTION_MENU, cell, {
+                                    contextMenuArgs: () => [cell], commandArgs: () => [this.props.notebookModel]
+                                })
+                            }
                         </li>
                         {this.shouldRenderDragOverIndicator(cell, 'bottom') && <CellDropIndicator />}
                     </React.Fragment>

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

@@ -20,9 +20,7 @@ import { inject, injectable } from '@theia/core/shared/inversify';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { NotebookCellSidebar, NotebookCellToolbar } from './notebook-cell-toolbar';
 import { ContextMenuRenderer } from '@theia/core/lib/browser';
-import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
-import { NotebookCellOutputModel } from '../view-model/notebook-cell-output-model';
 import { NotebookContextManager } from '../service/notebook-context-manager';
 
 export interface NotebookCellToolbarItem {
@@ -34,6 +32,11 @@ export interface NotebookCellToolbarItem {
     contextKeys?: Set<string>
 }
 
+export interface toolbarItemOptions {
+    contextMenuArgs?: () => unknown[];
+    commandArgs?: () => unknown[];
+}
+
 @injectable()
 export class NotebookCellToolbarFactory {
 
@@ -52,32 +55,31 @@ export class NotebookCellToolbarFactory {
     @inject(NotebookContextManager)
     protected readonly notebookContextManager: NotebookContextManager;
 
-    renderCellToolbar(menuPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
-        return <NotebookCellToolbar getMenuItems={() => this.getMenuItems(menuPath, notebookModel, cell)}
+    renderCellToolbar(menuPath: string[], cell: NotebookCellModel, itemOptions: toolbarItemOptions): React.ReactNode {
+        return <NotebookCellToolbar getMenuItems={() => this.getMenuItems(menuPath, cell, itemOptions)}
             onContextKeysChanged={this.notebookContextManager.onDidChangeContext} />;
     }
 
-    renderSidebar(menuPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): React.ReactNode {
-        return <NotebookCellSidebar getMenuItems={() => this.getMenuItems(menuPath, notebookModel, cell, output)}
+    renderSidebar(menuPath: string[], cell: NotebookCellModel, itemOptions: toolbarItemOptions): React.ReactNode {
+        return <NotebookCellSidebar getMenuItems={() => this.getMenuItems(menuPath, cell, itemOptions)}
             onContextKeysChanged={this.notebookContextManager.onDidChangeContext} />;
     }
 
-    private getMenuItems(menuItemPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): NotebookCellToolbarItem[] {
+    private getMenuItems(menuItemPath: string[], cell: NotebookCellModel, itemOptions: toolbarItemOptions): NotebookCellToolbarItem[] {
         const inlineItems: NotebookCellToolbarItem[] = [];
-
         for (const menuNode of this.menuRegistry.getMenu(menuItemPath).children) {
-            if (!menuNode.when || this.contextKeyService.match(menuNode.when, this.notebookContextManager.context)) {
+            if (!menuNode.when || this.notebookContextManager.getCellContext(cell.handle).match(menuNode.when, this.notebookContextManager.context)) {
                 if (menuNode.role === CompoundMenuNodeRole.Flat) {
-                    inlineItems.push(...menuNode.children?.map(child => this.createToolbarItem(child, notebookModel, cell, output)) ?? []);
+                    inlineItems.push(...menuNode.children?.map(child => this.createToolbarItem(child, itemOptions)) ?? []);
                 } else {
-                    inlineItems.push(this.createToolbarItem(menuNode, notebookModel, cell, output));
+                    inlineItems.push(this.createToolbarItem(menuNode, itemOptions));
                 }
             }
         }
         return inlineItems;
     }
 
-    private createToolbarItem(menuNode: MenuNode, notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): NotebookCellToolbarItem {
+    private createToolbarItem(menuNode: MenuNode, itemOptions: toolbarItemOptions): NotebookCellToolbarItem {
         const menuPath = menuNode.role === CompoundMenuNodeRole.Submenu ? this.menuRegistry.getPath(menuNode) : undefined;
         return {
             id: menuNode.id,
@@ -89,11 +91,11 @@ export class NotebookCellToolbarFactory {
                         anchor: e.nativeEvent,
                         menuPath,
                         includeAnchorArg: false,
-                        args: [cell],
+                        args: itemOptions.contextMenuArgs?.(),
                         context: this.notebookContextManager.context
                     }) :
-                () => this.commandRegistry.executeCommand(menuNode.command!, notebookModel, cell, output),
-            isVisible: () => menuPath ? true : Boolean(this.commandRegistry.getVisibleHandler(menuNode.command!, notebookModel, cell, output)),
+                () => this.commandRegistry.executeCommand(menuNode.command!, ...(itemOptions.commandArgs?.() ?? [])),
+            isVisible: () => menuPath ? true : Boolean(this.commandRegistry.getVisibleHandler(menuNode.command!, ...(itemOptions.commandArgs?.() ?? []))),
             contextKeys: menuNode.when ? this.contextKeyService.parseKeys(menuNode.when) : undefined
         };
     }

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

@@ -35,8 +35,9 @@ abstract class NotebookCellActionBar extends React.Component<NotebookCellToolbar
     constructor(props: NotebookCellToolbarProps) {
         super(props);
         this.toDispose.push(props.onContextKeysChanged(e => {
-            if (this.props.getMenuItems().some(item => item.contextKeys ? e.affects(item.contextKeys) : false)) {
-                this.setState({ inlineItems: this.props.getMenuItems() });
+            const menuItems = this.props.getMenuItems();
+            if (menuItems.some(item => item.contextKeys ? e.affects(item.contextKeys) : false)) {
+                this.setState({ inlineItems: menuItems });
             }
         }));
         this.state = { inlineItems: this.props.getMenuItems() };

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

@@ -24,11 +24,11 @@ import { NotebookModel } from '../view-model/notebook-model';
 import { CellEditor } from './notebook-cell-editor';
 import { CellRenderer } from './notebook-cell-list-view';
 import { NotebookCellToolbarFactory } from './notebook-cell-toolbar-factory';
-import { NotebookCellActionContribution } from '../contributions/notebook-cell-actions-contribution';
+import { NotebookCellActionContribution, NotebookCellCommands } from '../contributions/notebook-cell-actions-contribution';
 import { CellExecution, NotebookExecutionStateService } from '../service/notebook-execution-state-service';
 import { codicon } from '@theia/core/lib/browser';
 import { NotebookCellExecutionState } from '../../common';
-import { DisposableCollection } from '@theia/core';
+import { 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';
@@ -61,13 +61,19 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(EditorPreferences)
     protected readonly editorPreferences: EditorPreferences;
 
+    @inject(CommandRegistry)
+    protected readonly commandRegistry: CommandRegistry;
+
     protected fontInfo: BareFontInfo | undefined;
 
     render(notebookModel: NotebookModel, cell: NotebookCellModel, handle: number): React.ReactNode {
         return <div>
             <div className='theia-notebook-cell-with-sidebar'>
                 <div className='theia-notebook-cell-sidebar'>
-                    {this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, notebookModel, cell)}
+                    {this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, cell, {
+                        contextMenuArgs: () => [cell], commandArgs: () => [notebookModel, cell]
+                    })
+                    }
                     <CodeCellExecutionOrder cell={cell} />
                 </div>
                 <div className='theia-notebook-cell-editor-container'>
@@ -76,13 +82,19 @@ export class NotebookCodeCellRenderer implements CellRenderer {
                         notebookContextManager={this.notebookContextManager}
                         notebookViewportService={this.notebookViewportService}
                         fontInfo={this.getOrCreateMonacoFontInfo()} />
-                    <NotebookCodeCellStatus cell={cell} executionStateService={this.executionStateService} onClick={() => cell.requestFocusEditor()}></NotebookCodeCellStatus>
+                    <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
+                        commandRegistry={this.commandRegistry}
+                        executionStateService={this.executionStateService}
+                        onClick={() => cell.requestFocusEditor()} />
                 </div >
             </div >
             <div className='theia-notebook-cell-with-sidebar'>
                 <NotebookCodeCellOutputs cell={cell} notebook={notebookModel} outputWebviewFactory={this.cellOutputWebviewFactory}
                     renderSidebar={() =>
-                        this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, notebookModel, cell, cell.outputs[0])} />
+                        this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, cell, {
+                            contextMenuArgs: () => [notebookModel, cell, cell.outputs[0]]
+                        })
+                    } />
             </div>
         </div >;
     }
@@ -108,7 +120,9 @@ export class NotebookCodeCellRenderer implements CellRenderer {
 }
 
 export interface NotebookCodeCellStatusProps {
+    notebook: NotebookModel;
     cell: NotebookCellModel;
+    commandRegistry: CommandRegistry;
     executionStateService: NotebookExecutionStateService;
     onClick: () => void;
 }
@@ -146,6 +160,10 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
                 }
             }
         }));
+
+        this.toDispose.push(props.cell.onDidChangeLanguage(() => {
+            this.forceUpdate();
+        }));
     }
 
     override componentWillUnmount(): void {
@@ -158,7 +176,9 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
                 {this.renderExecutionState()}
             </div>
             <div className='notebook-cell-status-right'>
-                <span>{this.props.cell.language}</span>
+                <span className='notebook-cell-language-label' onClick={() => {
+                    this.props.commandRegistry.executeCommand(NotebookCellCommands.CHANGE_CELL_LANGUAGE.id, this.props.notebook, this.props.cell);
+                }}>{this.props.cell.languageName}</span>
             </div>
         </div>;
     }
@@ -223,19 +243,15 @@ export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputP
 
     override async componentDidMount(): Promise<void> {
         const { cell, notebook, outputWebviewFactory } = this.props;
-        this.toDispose.push(cell.onDidChangeOutputs(async () => {
-            if (!this.outputsWebviewPromise && cell.outputs.length > 0) {
-                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();
+        this.toDispose.push(cell.onDidChangeOutputs(() => this.updateOutputs()));
+        this.toDispose.push(cell.onDidChangeOutputVisibility(visible => {
+            if (!visible && this.outputsWebview) {
+                this.outputsWebview?.dispose();
                 this.outputsWebview = undefined;
                 this.outputsWebviewPromise = undefined;
                 this.forceUpdate();
+            } else {
+                this.updateOutputs();
             }
         }));
         if (cell.outputs.length > 0) {
@@ -247,6 +263,23 @@ export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputP
         }
     }
 
+    protected async updateOutputs(): Promise<void> {
+        const { cell, notebook, outputWebviewFactory } = this.props;
+        if (!this.outputsWebviewPromise && cell.outputs.length > 0) {
+            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();
+            this.outputsWebview = undefined;
+            this.outputsWebviewPromise = undefined;
+            this.forceUpdate();
+        }
+    }
+
     override async componentDidUpdate(): Promise<void> {
         if (!(await this.outputsWebviewPromise)?.isAttached()) {
             (await this.outputsWebviewPromise)?.attachWebview();
@@ -259,12 +292,12 @@ export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputP
     }
 
     override render(): React.ReactNode {
-        return this.outputsWebview ?
+        return this.outputsWebview && this.props.cell.outputVisible ?
             <>
                 {this.props.renderSidebar()}
                 {this.outputsWebview.render()}
             </> :
-            <></>;
+            this.props.cell.outputs?.length ? <i className='theia-notebook-collapsed-output'>{nls.localizeByDefault('Outputs are collapsed')}</i> : <></>;
 
     }
 

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

@@ -57,6 +57,10 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
 
     protected toDispose = new DisposableCollection();
 
+    protected nativeSubmenus = [
+        NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_CELL_ADD_GROUP[NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_CELL_ADD_GROUP.length - 1],
+        NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_EXECUTION_GROUP[NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_EXECUTION_GROUP.length - 1]];
+
     constructor(props: NotebookMainToolbarProps) {
         super(props);
 
@@ -107,41 +111,46 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
         </div>;
     }
 
-    protected renderMenuItem(item: MenuNode): React.ReactNode {
+    protected renderMenuItem(item: MenuNode, submenu?: string): React.ReactNode {
         if (item.role === CompoundMenuNodeRole.Group) {
-            const itemNodes = ArrayUtils.coalesce(item.children?.map(child => this.renderMenuItem(child)) ?? []);
+            const itemNodes = ArrayUtils.coalesce(item.children?.map(child => this.renderMenuItem(child, item.id)) ?? []);
             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, this.props.editorNode)) {
+        } else if ((this.nativeSubmenus.includes(submenu ?? '')) || !item.when || this.props.contextKeyService.match(item.when, this.props.editorNode)) {
             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'
+            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)}`}
                 onClick={() => {
-                    if (item.command) {
-                        this.props.commandRegistry.executeCommand(item.command, this.props.notebookModel);
+                    if (item.command && (!item.when || this.props.contextKeyService.match(item.when, this.props.editorNode))) {
+                        this.props.commandRegistry.executeCommand(item.command, this.props.notebookModel.uri);
                     }
                 }}>
                 <span className={item.icon} />
-                <span className='theia-notebook-main-toolbar-item-text'>{item.label}</span>
+                <span className='theia-notebook-main-toolbar-item-text'>{label}</span>
             </div>;
         }
         return undefined;
     }
 
-    private getMenuItems(): readonly MenuNode[] {
+    protected getMenuItems(): readonly MenuNode[] {
         const menuPath = NotebookMenus.NOTEBOOK_MAIN_TOOLBAR;
         const pluginCommands = this.props.menuRegistry.getMenuNode(menuPath).children;
         const theiaCommands = this.props.menuRegistry.getMenu([menuPath]).children;
-        // TODO add specifc arguments to commands
         return theiaCommands.concat(pluginCommands);
     }
 
-    private getAllContextKeys(menus: readonly MenuNode[], keySet: Set<string>): void {
+    protected getAdditionalClasses(item: MenuNode): string {
+        return !item.when || this.props.contextKeyService.match(item.when, this.props.editorNode) ? '' : ' theia-mod-disabled';
+    }
+
+    protected getAllContextKeys(menus: readonly MenuNode[], keySet: Set<string>): void {
         menus.filter(item => item.when)
             .forEach(item => this.props.contextKeyService.parseKeys(item.when!)?.forEach(key => keySet.add(key)));