@theia/notebook 1.46.1 → 1.47.0

package/src/browser/notebook-editor-widget.tsx

@@ -16,7 +16,7 @@
 
 import * as React from '@theia/core/shared/react';
 import { CommandRegistry, MenuModelRegistry, URI } from '@theia/core';
-import { ReactWidget, Navigatable, SaveableSource, Message, DelegatingSaveable } from '@theia/core/lib/browser';
+import { ReactWidget, Navigatable, SaveableSource, Message, DelegatingSaveable, lock, unlock } from '@theia/core/lib/browser';
 import { ReactNode } from '@theia/core/shared/react';
 import { CellKind } from '../common';
 import { CellRenderer as CellRenderer, NotebookCellListView } from './view/notebook-cell-list-view';
@@ -29,6 +29,9 @@ import { Emitter } from '@theia/core/shared/vscode-languageserver-protocol';
 import { NotebookEditorWidgetService } from './service/notebook-editor-widget-service';
 import { NotebookMainToolbarRenderer } from './view/notebook-main-toolbar';
 import { Deferred } from '@theia/core/lib/common/promise-util';
+import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
+
+const PerfectScrollbar = require('react-perfect-scrollbar');
 
 export const NotebookEditorWidgetContainerFactory = Symbol('NotebookEditorWidgetContainerFactory');
 
@@ -43,6 +46,11 @@ export function createNotebookEditorWidgetContainer(parent: interfaces.Container
 
 const NotebookEditorProps = Symbol('NotebookEditorProps');
 
+interface RenderMessage {
+    rendererId: string;
+    message: unknown;
+}
+
 export interface NotebookEditorProps {
     uri: URI,
     readonly notebookType: string,
@@ -81,6 +89,21 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
     protected readonly onDidChangeModelEmitter = new Emitter<void>();
     readonly onDidChangeModel = this.onDidChangeModelEmitter.event;
 
+    protected readonly onDidChangeReadOnlyEmitter = new Emitter<boolean | MarkdownString>();
+    readonly onDidChangeReadOnly = this.onDidChangeReadOnlyEmitter.event;
+
+    protected readonly onPostKernelMessageEmitter = new Emitter<unknown>();
+    readonly onPostKernelMessage = this.onPostKernelMessageEmitter.event;
+
+    protected readonly onDidPostKernelMessageEmitter = new Emitter<unknown>();
+    readonly onDidPostKernelMessage = this.onDidPostKernelMessageEmitter.event;
+
+    protected readonly onPostRendererMessageEmitter = new Emitter<RenderMessage>();
+    readonly onPostRendererMessage = this.onPostRendererMessageEmitter.event;
+
+    protected readonly onDidReceiveKernelMessageEmitter = new Emitter<unknown>();
+    readonly onDidRecieveKernelMessage = this.onDidReceiveKernelMessageEmitter.event;
+
     protected readonly renderers = new Map<CellKind, CellRenderer>();
     protected _model?: NotebookModel;
     protected _ready: Deferred<NotebookModel> = new Deferred();
@@ -102,10 +125,15 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         this.id = NOTEBOOK_EDITOR_ID_PREFIX + this.props.uri.toString();
         this.node.tabIndex = -1;
 
+        this.scrollOptions = {
+            suppressScrollY: true
+        };
+
         this.title.closable = true;
         this.update();
 
         this.toDispose.push(this.onDidChangeModelEmitter);
+        this.toDispose.push(this.onDidChangeReadOnlyEmitter);
 
         this.renderers.set(CellKind.Markup, this.markdownCellRenderer);
         this.renderers.set(CellKind.Code, this.codeCellRenderer);
@@ -116,6 +144,18 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         this._model = await this.props.notebookData;
         this.saveable.delegate = this._model;
         this.toDispose.push(this._model);
+        this.toDispose.push(this._model.onDidChangeReadOnly(readOnly => {
+            if (readOnly) {
+                lock(this.title);
+            } else {
+                unlock(this.title);
+            }
+            this.onDidChangeReadOnlyEmitter.fire(readOnly);
+            this.update();
+        }));
+        if (this._model.readOnly) {
+            lock(this.title);
+        }
         // Ensure that the model is loaded before adding the editor
         this.notebookEditorService.addNotebookEditor(this);
         this.update();
@@ -145,12 +185,14 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
 
     protected render(): ReactNode {
         if (this._model) {
-            return <div>
+            return <div className='theia-notebook-main-container'>
                 {this.notebookMainToolbarRenderer.render(this._model)}
-                <NotebookCellListView renderers={this.renderers}
-                    notebookModel={this._model}
-                    toolbarRenderer={this.cellToolbarFactory}
-                    commandRegistry={this.commandRegistry} />
+                <PerfectScrollbar className='theia-notebook-scroll-container'>
+                    <NotebookCellListView renderers={this.renderers}
+                        notebookModel={this._model}
+                        toolbarRenderer={this.cellToolbarFactory}
+                        commandRegistry={this.commandRegistry} />
+                </PerfectScrollbar>
             </div>;
         } else {
             return <div></div>;
@@ -165,4 +207,24 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         super.onAfterDetach(msg);
         this.notebookEditorService.removeNotebookEditor(this);
     }
+
+    postKernelMessage(message: unknown): void {
+        this.onDidPostKernelMessageEmitter.fire(message);
+    }
+
+    postRendererMessage(rendererId: string, message: unknown): void {
+        this.onPostRendererMessageEmitter.fire({ rendererId, message });
+    }
+
+    recieveKernelMessage(message: unknown): void {
+        this.onDidReceiveKernelMessageEmitter.fire(message);
+    }
+
+    override dispose(): void {
+        this.onDidChangeModelEmitter.dispose();
+        this.onDidPostKernelMessageEmitter.dispose();
+        this.onDidReceiveKernelMessageEmitter.dispose();
+        this.onPostRendererMessageEmitter.dispose();
+        super.dispose();
+    }
 }

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

@@ -30,6 +30,11 @@ export interface NotebookRendererInfo {
     readonly requiresMessaging: boolean;
 }
 
+export interface NotebookPreloadInfo {
+    readonly type: string;
+    readonly entrypoint: string;
+}
+
 @injectable()
 export class NotebookRendererRegistry {
 
@@ -39,6 +44,12 @@ export class NotebookRendererRegistry {
         return this._notebookRenderers;
     }
 
+    private readonly _staticNotebookPreloads: NotebookPreloadInfo[] = [];
+
+    get staticNotebookPreloads(): readonly NotebookPreloadInfo[] {
+        return this._staticNotebookPreloads;
+    }
+
     registerNotebookRenderer(type: NotebookRendererDescriptor, basePath: string): Disposable {
         let entrypoint;
         if (typeof type.entrypoint === 'string') {
@@ -62,5 +73,13 @@ export class NotebookRendererRegistry {
             this._notebookRenderers.splice(this._notebookRenderers.findIndex(renderer => renderer.id === type.id), 1);
         });
     }
+
+    registerStaticNotebookPreload(type: string, entrypoint: string, basePath: string): Disposable {
+        const staticPreload = { type, entrypoint: new Path(basePath).join(entrypoint).toString() };
+        this._staticNotebookPreloads.push(staticPreload);
+        return Disposable.create(() => {
+            this._staticNotebookPreloads.splice(this._staticNotebookPreloads.indexOf(staticPreload), 1);
+        });
+    }
 }
 

package/src/browser/renderers/cell-output-webview.ts

@@ -16,10 +16,11 @@
 
 import { Disposable } from '@theia/core';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
+import { NotebookModel } from '../view-model/notebook-model';
 
 export const CellOutputWebviewFactory = Symbol('outputWebviewFactory');
 
-export type CellOutputWebviewFactory = (cell: NotebookCellModel) => Promise<CellOutputWebview>;
+export type CellOutputWebviewFactory = (cell: NotebookCellModel, notebook: NotebookModel) => Promise<CellOutputWebview>;
 
 export interface CellOutputWebview extends Disposable {
 

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

@@ -67,7 +67,6 @@ export class NotebookCellContextManager implements NotebookCellContextManager, D
 
     dispose(): void {
         this.toDispose.dispose();
-        this.currentStore?.dispose();
         this.onDidChangeContextEmitter.dispose();
     }
 }

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

@@ -18,7 +18,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Disposable, DisposableCollection, Emitter, URI } from '@theia/core';
+import { Disposable, DisposableCollection, Emitter, URI, generateUuid } from '@theia/core';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { NotebookService } from './notebook-service';
 import {
@@ -27,7 +27,6 @@ import {
 } from '../../common';
 import { CellPartialInternalMetadataEditByHandle, CellEditOperation } from '../notebook-types';
 import { NotebookModel } from '../view-model/notebook-model';
-import { v4 } from 'uuid';
 
 export type CellExecuteUpdate = CellExecuteOutputEdit | CellExecuteOutputItemEdit | CellExecutionStateUpdate;
 
@@ -178,7 +177,7 @@ export class CellExecution implements Disposable {
             editType: CellEditType.PartialInternalMetadata,
             handle: this.cellHandle,
             internalMetadata: {
-                executionId: v4(),
+                executionId: generateUuid(),
                 runStartTime: undefined,
                 runEndTime: undefined,
                 lastRunSuccess: undefined,

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

@@ -54,6 +54,11 @@ export interface NotebookKernel {
     // ID of the extension providing this kernel
     readonly extensionId: string;
 
+    readonly localResourceRoot: URI;
+    readonly preloadUris: URI[];
+    readonly preloadProvides: string[];
+
+    readonly handle: number;
     label: string;
     description?: string;
     detail?: string;
@@ -144,7 +149,7 @@ export class SourceCommand implements Disposable {
 
 const NOTEBOOK_KERNEL_BINDING_STORAGE_KEY = 'notebook.kernel.bindings';
 @injectable()
-export class NotebookKernelService implements Disposable {
+export class NotebookKernelService {
 
     @inject(NotebookService)
     protected notebookService: NotebookService;
@@ -152,33 +157,34 @@ export class NotebookKernelService implements Disposable {
     @inject(StorageService)
     protected storageService: StorageService;
 
-    private readonly kernels = new Map<string, KernelInfo>();
+    protected readonly kernels = new Map<string, KernelInfo>();
 
-    private notebookBindings: { [key: string]: string } = {};
+    protected notebookBindings: Record<string, string> = {};
 
-    private readonly kernelDetectionTasks = new Map<string, string[]>();
-    private readonly onDidChangeKernelDetectionTasksEmitter = new Emitter<string>();
+    protected readonly kernelDetectionTasks = new Map<string, string[]>();
+    protected readonly onDidChangeKernelDetectionTasksEmitter = new Emitter<string>();
     readonly onDidChangeKernelDetectionTasks = this.onDidChangeKernelDetectionTasksEmitter.event;
 
-    private readonly onDidChangeSourceActionsEmitter = new Emitter<NotebookSourceActionChangeEvent>();
-    private readonly kernelSourceActionProviders = new Map<string, KernelSourceActionProvider[]>();
+    protected readonly onDidChangeSourceActionsEmitter = new Emitter<NotebookSourceActionChangeEvent>();
+    protected readonly kernelSourceActionProviders = new Map<string, KernelSourceActionProvider[]>();
     readonly onDidChangeSourceActions: Event<NotebookSourceActionChangeEvent> = this.onDidChangeSourceActionsEmitter.event;
 
-    private readonly onDidAddKernelEmitter = new Emitter<NotebookKernel>();
+    protected readonly onDidAddKernelEmitter = new Emitter<NotebookKernel>();
     readonly onDidAddKernel: Event<NotebookKernel> = this.onDidAddKernelEmitter.event;
 
-    private readonly onDidRemoveKernelEmitter = new Emitter<NotebookKernel>();
+    protected readonly onDidRemoveKernelEmitter = new Emitter<NotebookKernel>();
     readonly onDidRemoveKernel: Event<NotebookKernel> = this.onDidRemoveKernelEmitter.event;
 
-    private readonly onDidChangeSelectedNotebookKernelBindingEmitter = new Emitter<SelectedNotebookKernelChangeEvent>();
+    protected readonly onDidChangeSelectedNotebookKernelBindingEmitter = new Emitter<SelectedNotebookKernelChangeEvent>();
     readonly onDidChangeSelectedKernel: Event<SelectedNotebookKernelChangeEvent> = this.onDidChangeSelectedNotebookKernelBindingEmitter.event;
 
-    private readonly onDidChangeNotebookAffinityEmitter = new Emitter<void>();
+    protected readonly onDidChangeNotebookAffinityEmitter = new Emitter<void>();
     readonly onDidChangeNotebookAffinity: Event<void> = this.onDidChangeNotebookAffinityEmitter.event;
 
     @postConstruct()
     init(): void {
-        this.storageService.getData(NOTEBOOK_KERNEL_BINDING_STORAGE_KEY).then((value: { [key: string]: string } | undefined) => {
+        this.notebookService.onDidAddNotebookDocument(model => this.tryAutoBindNotebook(model));
+        this.storageService.getData(NOTEBOOK_KERNEL_BINDING_STORAGE_KEY).then((value: Record<string, string> | undefined) => {
             if (value) {
                 this.notebookBindings = value;
             }
@@ -344,13 +350,4 @@ export class NotebookKernelService implements Disposable {
         const allActions = await Promise.all(promises);
         return allActions.flat();
     }
-
-    dispose(): void {
-        this.onDidChangeKernelDetectionTasksEmitter.dispose();
-        this.onDidChangeSourceActionsEmitter.dispose();
-        this.onDidAddKernelEmitter.dispose();
-        this.onDidRemoveKernelEmitter.dispose();
-        this.onDidChangeSelectedNotebookKernelBindingEmitter.dispose();
-        this.onDidChangeNotebookAffinityEmitter.dispose();
-    }
 }

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

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Emitter, URI } from '@theia/core';
+import { Emitter, Resource, ResourceProvider, URI } from '@theia/core';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { UriComponents } from '@theia/core/lib/common/uri';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
@@ -34,6 +34,9 @@ export class NotebookModelResolverService {
     @inject(FileService)
     protected fileService: FileService;
 
+    @inject(ResourceProvider)
+    protected resourceProvider: ResourceProvider;
+
     @inject(NotebookService)
     protected notebookService: NotebookService;
 
@@ -60,9 +63,9 @@ export class NotebookModelResolverService {
             throw new Error(`Missing viewType for '${resource}'`);
         }
 
-        const notebookData = await this.resolveExistingNotebookData(resource, viewType!);
-
-        const notebookModel = await this.notebookService.createNotebookModel(notebookData, viewType, resource);
+        const actualResource = await this.resourceProvider(resource);
+        const notebookData = await this.resolveExistingNotebookData(actualResource, viewType!);
+        const notebookModel = await this.notebookService.createNotebookModel(notebookData, viewType, actualResource);
 
         notebookModel.onDirtyChanged(() => this.onDidChangeDirtyEmitter.fire(notebookModel));
         notebookModel.onDidSaveNotebook(() => this.onDidSaveNotebookEmitter.fire(notebookModel.uri.toComponents()));
@@ -103,8 +106,8 @@ export class NotebookModelResolverService {
         return this.resolve(resource, viewType);
     }
 
-    protected async resolveExistingNotebookData(resource: URI, viewType: string): Promise<NotebookData> {
-        if (resource.scheme === 'untitled') {
+    protected async resolveExistingNotebookData(resource: Resource, viewType: string): Promise<NotebookData> {
+        if (resource.uri.scheme === 'untitled') {
 
             return {
                 cells: [
@@ -118,10 +121,11 @@ export class NotebookModelResolverService {
                 metadata: {}
             };
         } else {
-            const file = await this.fileService.readFile(resource);
-
-            const dataProvider = await this.notebookService.getNotebookDataProvider(viewType);
-            const notebook = await dataProvider.serializer.toNotebook(file.value);
+            const [dataProvider, contents] = await Promise.all([
+                this.notebookService.getNotebookDataProvider(viewType),
+                this.fileService.readFile(resource.uri)
+            ]);
+            const notebook = await dataProvider.serializer.toNotebook(contents.value);
 
             return notebook;
         }

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

@@ -19,8 +19,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { Emitter } from '@theia/core';
-import { injectable } from '@theia/core/shared/inversify';
+import { inject, injectable } from '@theia/core/shared/inversify';
 import { Disposable } from '@theia/core/shared/vscode-languageserver-protocol';
+import { NotebookEditorWidgetService } from './notebook-editor-widget-service';
 
 interface RendererMessage {
     editorId: string;
@@ -50,6 +51,9 @@ export class NotebookRendererMessagingService implements Disposable {
     private readonly willActivateRendererEmitter = new Emitter<string>();
     readonly onWillActivateRenderer = this.willActivateRendererEmitter.event;
 
+    @inject(NotebookEditorWidgetService)
+    private readonly editorWidgetService: NotebookEditorWidgetService;
+
     private readonly activations = new Map<string /* rendererId */, undefined | RendererMessage[]>();
     private readonly scopedMessaging = new Map<string /* editorId */, RendererMessaging>();
 
@@ -86,6 +90,10 @@ export class NotebookRendererMessagingService implements Disposable {
 
         const messaging: RendererMessaging = {
             postMessage: (rendererId, message) => this.postMessage(editorId, rendererId, message),
+            receiveMessage: async (rendererId, message) => {
+                this.editorWidgetService.getNotebookEditor(editorId)?.postRendererMessage(rendererId, message);
+                return true;
+            },
             dispose: () => this.scopedMessaging.delete(editorId),
         };
 

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

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Disposable, DisposableCollection, Emitter, URI } from '@theia/core';
+import { Disposable, DisposableCollection, Emitter, Resource, URI } from '@theia/core';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { BinaryBuffer } from '@theia/core/lib/common/buffer';
 import { NotebookData, TransientOptions } from '../../common';
@@ -101,14 +101,14 @@ export class NotebookService implements Disposable {
         });
     }
 
-    async createNotebookModel(data: NotebookData, viewType: string, uri: URI): Promise<NotebookModel> {
+    async createNotebookModel(data: NotebookData, viewType: string, resource: Resource): Promise<NotebookModel> {
         const serializer = this.notebookProviders.get(viewType)?.serializer;
         if (!serializer) {
             throw new Error('no notebook serializer for ' + viewType);
         }
 
-        const model = this.notebookModelFactory({ data, uri, viewType, serializer });
-        this.notebookModels.set(uri.toString(), model);
+        const model = this.notebookModelFactory({ data, resource, viewType, serializer });
+        this.notebookModels.set(resource.uri.toString(), model);
         // Resolve cell text models right after creating the notebook model
         // This ensures that all text models are available in the plugin host
         await Promise.all(model.cells.map(e => e.resolveTextModel()));

package/src/browser/style/index.css

@@ -26,11 +26,14 @@
 }
 
 .theia-notebook-cell {
-  cursor: grab;
   display: flex;
   margin: 10px 0px;
 }
 
+.theia-notebook-cell.draggable {
+  cursor: grab;
+}
+
 .theia-notebook-cell:hover .theia-notebook-cell-marker {
   visibility: visible;
 }
@@ -161,9 +164,20 @@
   flex-direction: column;
 }
 
+.theia-notebook-main-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.theia-notebook-scroll-container {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
 .theia-notebook-main-toolbar {
-  position: sticky;
-  top: 0;
   background: var(--theia-editor-background);
   display: flex;
   flex-direction: row;

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

@@ -64,11 +64,13 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
             {this.props.notebookModel.cells
                 .map((cell, index) =>
                     <React.Fragment key={'cell-' + cell.handle}>
-                        <NotebookCellDivider onAddNewCell={(kind: CellKind) => this.onAddNewCell(kind, index)}
+                        <NotebookCellDivider
+                            isVisible={() => this.isEnabled()}
+                            onAddNewCell={(kind: CellKind) => this.onAddNewCell(kind, index)}
                             onDrop={e => this.onDrop(e, index)}
                             onDragOver={e => this.onDragOver(e, cell, 'top')} />
                         {this.shouldRenderDragOverIndicator(cell, 'top') && <CellDropIndicator />}
-                        <li className={'theia-notebook-cell' + (this.state.selectedCell === cell ? ' focused' : '')}
+                        <li className={'theia-notebook-cell' + (this.state.selectedCell === cell ? ' focused' : '') + (this.isEnabled() ? ' draggable' : '')}
                             onClick={() => {
                                 this.setState({ selectedCell: cell });
                                 this.props.notebookModel.setSelectedCell(cell);
@@ -89,7 +91,9 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                     </React.Fragment>
                 )
             }
-            <NotebookCellDivider onAddNewCell={(kind: CellKind) => this.onAddNewCell(kind, this.props.notebookModel.cells.length)}
+            <NotebookCellDivider
+                isVisible={() => this.isEnabled()}
+                onAddNewCell={(kind: CellKind) => this.onAddNewCell(kind, this.props.notebookModel.cells.length)}
                 onDrop={e => this.onDrop(e, this.props.notebookModel.cells.length - 1)}
                 onDragOver={e => this.onDragOver(e, this.props.notebookModel.cells[this.props.notebookModel.cells.length - 1], 'bottom')} />
         </ul>;
@@ -105,18 +109,33 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
 
     protected onDragStart(event: React.DragEvent<HTMLLIElement>, index: number): void {
         event.stopPropagation();
+        if (!this.isEnabled()) {
+            event.preventDefault();
+            return;
+        }
         event.dataTransfer.setData('text/theia-notebook-cell-index', index.toString());
         event.dataTransfer.setData('text/plain', this.props.notebookModel.cells[index].source);
     }
 
     protected onDragOver(event: React.DragEvent<HTMLLIElement>, cell: NotebookCellModel, position?: 'top' | 'bottom'): void {
+        if (!this.isEnabled()) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         // show indicator
         this.setState({ ...this.state, dragOverIndicator: { cell, position: position ?? event.nativeEvent.offsetY < event.currentTarget.clientHeight / 2 ? 'top' : 'bottom' } });
     }
 
+    protected isEnabled(): boolean {
+        return !Boolean(this.props.notebookModel.readOnly);
+    }
+
     protected onDrop(event: React.DragEvent<HTMLLIElement>, dropElementIndex: number): void {
+        if (!this.isEnabled()) {
+            this.setState({ dragOverIndicator: undefined });
+            return;
+        }
         const index = parseInt(event.dataTransfer.getData('text/theia-notebook-cell-index'));
         const isTargetBelow = index < dropElementIndex;
         let newIdx = this.state.dragOverIndicator?.position === 'top' ? dropElementIndex : dropElementIndex + 1;
@@ -133,15 +152,18 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
     }
 
     protected onAddNewCell(kind: CellKind, index: number): void {
-        this.props.commandRegistry.executeCommand(NotebookCommands.ADD_NEW_CELL_COMMAND.id,
-            this.props.notebookModel,
-            kind,
-            index
-        );
+        if (this.isEnabled()) {
+            this.props.commandRegistry.executeCommand(NotebookCommands.ADD_NEW_CELL_COMMAND.id,
+                this.props.notebookModel,
+                kind,
+                index
+            );
+        }
     }
 
     protected shouldRenderDragOverIndicator(cell: NotebookCellModel, position: 'top' | 'bottom'): boolean {
-        return this.state.dragOverIndicator !== undefined &&
+        return this.isEnabled() &&
+            this.state.dragOverIndicator !== undefined &&
             this.state.dragOverIndicator.cell === cell &&
             this.state.dragOverIndicator.position === position;
     }
@@ -149,16 +171,17 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
 }
 
 export interface NotebookCellDividerProps {
+    isVisible: () => boolean;
     onAddNewCell: (type: CellKind) => void;
     onDrop: (event: React.DragEvent<HTMLLIElement>) => void;
     onDragOver: (event: React.DragEvent<HTMLLIElement>) => void;
 }
 
-export function NotebookCellDivider({ onAddNewCell, onDrop, onDragOver }: NotebookCellDividerProps): React.JSX.Element {
+export function NotebookCellDivider({ isVisible, onAddNewCell, onDrop, onDragOver }: NotebookCellDividerProps): React.JSX.Element {
     const [hover, setHover] = React.useState(false);
 
     return <li className='theia-notebook-cell-divider' onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onDrop={onDrop} onDragOver={onDragOver}>
-        {hover && <div className='theia-notebook-add-cell-buttons'>
+        {hover && isVisible() && <div className='theia-notebook-add-cell-buttons'>
             <button className='theia-notebook-add-cell-button' onClick={() => onAddNewCell(CellKind.Code)} title={nls.localizeByDefault('Add Code Cell')}>
                 <div className={codicon('add') + ' theia-notebook-add-cell-button-icon'} />
                 {nls.localizeByDefault('Code')}

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

@@ -29,6 +29,7 @@ export interface NotebookCellToolbarItem {
     icon?: string;
     label?: string;
     onClick: (e: React.MouseEvent) => void;
+    isVisible: () => boolean;
     contextKeys?: Set<string>
 }
 
@@ -87,6 +88,7 @@ export class NotebookCellToolbarFactory {
                         args: [notebookModel, cell, output]
                     }) :
                 () => this.commandRegistry.executeCommand(menuNode.command!, notebookModel, cell, output),
+            isVisible: () => menuPath ? true : Boolean(this.commandRegistry.getVisibleHandler(menuNode.command!, notebookModel, cell, output)),
             contextKeys: menuNode.when ? this.contextKeyService.parseKeys(menuNode.when) : undefined
         };
     }

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

@@ -56,7 +56,7 @@ export class NotebookCellToolbar extends NotebookCellActionBar {
 
     override render(): React.ReactNode {
         return <div className='theia-notebook-cell-toolbar'>
-            {this.state.inlineItems.map(item => this.renderItem(item))}
+            {this.state.inlineItems.filter(e => e.isVisible()).map(item => this.renderItem(item))}
         </div>;
     }
 
@@ -66,7 +66,7 @@ export class NotebookCellSidebar extends NotebookCellActionBar {
 
     override render(): React.ReactNode {
         return <div className='theia-notebook-cell-sidebar'>
-            {this.state.inlineItems.map(item => this.renderItem(item))}
+            {this.state.inlineItems.filter(e => e.isVisible()).map(item => this.renderItem(item))}
         </div>;
     }
 }