@theia/notebook 1.54.0 → 1.55.0-next.14

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

@@ -18,7 +18,7 @@ import * as React from '@theia/core/shared/react';
 import { CommandRegistry, MenuModelRegistry, URI } from '@theia/core';
 import { ReactWidget, Navigatable, SaveableSource, Message, DelegatingSaveable, lock, unlock, animationFrame } from '@theia/core/lib/browser';
 import { ReactNode } from '@theia/core/shared/react';
-import { CellKind } from '../common';
+import { CellKind, NotebookCellsChangeType } from '../common';
 import { CellRenderer as CellRenderer, NotebookCellListView } from './view/notebook-cell-list-view';
 import { NotebookCodeCellRenderer } from './view/notebook-code-cell-view';
 import { NotebookMarkdownCellRenderer } from './view/notebook-markdown-cell-view';
@@ -35,6 +35,8 @@ import { NotebookViewportService } from './view/notebook-viewport-service';
 import { NotebookCellCommands } from './contributions/notebook-cell-actions-contribution';
 import { NotebookFindWidget } from './view/notebook-find-widget';
 import debounce = require('lodash/debounce');
+import { CellOutputWebview, CellOutputWebviewFactory } from './renderers/cell-output-webview';
+import { NotebookCellOutputModel } from './view-model/notebook-cell-output-model';
 const PerfectScrollbar = require('react-perfect-scrollbar');
 
 export const NotebookEditorWidgetContainerFactory = Symbol('NotebookEditorWidgetContainerFactory');
@@ -44,6 +46,9 @@ export function createNotebookEditorWidgetContainer(parent: interfaces.Container
 
     child.bind(NotebookEditorProps).toConstantValue(props);
 
+    const cellOutputWebviewFactory: CellOutputWebviewFactory = parent.get(CellOutputWebviewFactory);
+    child.bind(CellOutputWebview).toConstantValue(cellOutputWebviewFactory());
+
     child.bind(NotebookContextManager).toSelf().inSingletonScope();
     child.bind(NotebookMainToolbarRenderer).toSelf().inSingletonScope();
     child.bind(NotebookCellToolbarFactory).toSelf().inSingletonScope();
@@ -104,6 +109,9 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
     @inject(NotebookViewportService)
     protected readonly viewportService: NotebookViewportService;
 
+    @inject(CellOutputWebview)
+    protected readonly cellOutputWebview: CellOutputWebview;
+
     protected readonly onDidChangeModelEmitter = new Emitter<void>();
     readonly onDidChangeModel = this.onDidChangeModelEmitter.event;
 
@@ -173,11 +181,18 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
                 this.commandRegistry.executeCommand(NotebookCellCommands.EDIT_COMMAND.id, model, model.cells[0]);
                 model.setSelectedCell(model.cells[0]);
             }
+            model.onDidChangeContent(changeEvents => {
+                const cellEvent = changeEvents.filter(event => event.kind === NotebookCellsChangeType.Move || event.kind === NotebookCellsChangeType.ModelChange);
+                if (cellEvent.length > 0) {
+                    this.cellOutputWebview.cellsChanged(cellEvent);
+                }
+            });
         });
     }
 
     protected async waitForData(): Promise<NotebookModel> {
         this._model = await this.props.notebookData;
+        this.cellOutputWebview.init(this._model, this);
         this.saveable.delegate = this._model;
         this.toDispose.push(this._model);
         this.toDispose.push(this._model.onDidChangeContent(() => {
@@ -212,7 +227,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
 
     protected override onActivateRequest(msg: Message): void {
         super.onActivateRequest(msg);
-        this.node.focus();
+        (this.node.getElementsByClassName('theia-notebook-main-container')[0] as HTMLDivElement)?.focus();
     }
 
     getResourceUri(): URI | undefined {
@@ -261,17 +276,20 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
                     <PerfectScrollbar className='theia-notebook-scroll-container'
                         ref={this.scrollBarRef}
                         onScrollY={(e: HTMLDivElement) => this.viewportService.onScroll(e)}>
-                        <NotebookCellListView renderers={this.renderers}
-                            notebookModel={this._model}
-                            notebookContext={this.notebookContextManager}
-                            toolbarRenderer={this.cellToolbarFactory}
-                            commandRegistry={this.commandRegistry}
-                            menuRegistry={this.menuRegistry} />
+                        <div className='theia-notebook-scroll-area'>
+                            {this.cellOutputWebview.render()}
+                            <NotebookCellListView renderers={this.renderers}
+                                notebookModel={this._model}
+                                notebookContext={this.notebookContextManager}
+                                toolbarRenderer={this.cellToolbarFactory}
+                                commandRegistry={this.commandRegistry}
+                                menuRegistry={this.menuRegistry} />
+                        </div>
                     </PerfectScrollbar>
                 </div>
             </div>;
         } else {
-            return <div className='theia-notebook-main-container'>
+            return <div className='theia-notebook-main-container' tabIndex={-1}>
                 <div className='theia-notebook-main-loading-indicator'></div>
             </div>;
         }
@@ -282,6 +300,12 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         this.notebookEditorService.removeNotebookEditor(this);
     }
 
+    requestOuputPresentationChange(cellHandle: number, output?: NotebookCellOutputModel): void {
+        if (output) {
+            this.cellOutputWebview.requestOutputPresentationUpdate(cellHandle, output);
+        }
+    }
+
     postKernelMessage(message: unknown): void {
         this.onDidPostKernelMessageEmitter.fire(message);
     }
@@ -307,6 +331,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
     }
 
     override dispose(): void {
+        this.cellOutputWebview.dispose();
         this.notebookContextManager.dispose();
         this.onDidChangeModelEmitter.dispose();
         this.onDidPostKernelMessageEmitter.dispose();

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

@@ -16,7 +16,9 @@
 import '../../src/browser/style/index.css';
 
 import { ContainerModule } from '@theia/core/shared/inversify';
-import { FrontendApplicationContribution, KeybindingContribution, LabelProviderContribution, OpenHandler, UndoRedoHandler, WidgetFactory } from '@theia/core/lib/browser';
+import {
+    FrontendApplicationContribution, KeybindingContribution, LabelProviderContribution, OpenHandler, UndoRedoHandler, WidgetFactory, WidgetStatusBarContribution
+} from '@theia/core/lib/browser';
 import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
 import { NotebookOpenHandler } from './notebook-open-handler';
 import { CommandContribution, MenuContribution, ResourceResolver, } from '@theia/core';
@@ -117,5 +119,5 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(UndoRedoHandler).toService(NotebookUndoRedoHandler);
 
     bind(NotebookStatusBarContribution).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(NotebookStatusBarContribution);
+    bind(WidgetStatusBarContribution).toService(NotebookStatusBarContribution);
 });

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

@@ -14,20 +14,38 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Disposable } from '@theia/core';
-import { NotebookCellModel } from '../view-model/notebook-cell-model';
+import { Disposable, Event } from '@theia/core';
 import { NotebookModel } from '../view-model/notebook-model';
+import { NotebookEditorWidget } from '../notebook-editor-widget';
+import { NotebookContentChangedEvent } from '../notebook-types';
+import { NotebookCellOutputModel } from '../view-model/notebook-cell-output-model';
+import { NotebookCellModel } from '../view-model/notebook-cell-model';
 
 export const CellOutputWebviewFactory = Symbol('outputWebviewFactory');
+export const CellOutputWebview = Symbol('outputWebview');
 
-export type CellOutputWebviewFactory = (cell: NotebookCellModel, notebook: NotebookModel) => Promise<CellOutputWebview>;
+export type CellOutputWebviewFactory = () => Promise<CellOutputWebview>;
+
+export interface OutputRenderEvent {
+    cellHandle: number;
+    outputId: string;
+    outputHeight: number;
+}
 
 export interface CellOutputWebview extends Disposable {
 
     readonly id: string;
 
+    init(notebook: NotebookModel, editor: NotebookEditorWidget): void;
+
     render(): React.ReactNode;
 
+    setCellHeight(cell: NotebookCellModel, height: number): void;
+    cellsChanged(cellEvent: NotebookContentChangedEvent[]): void;
+    onDidRenderOutput: Event<OutputRenderEvent>
+
+    requestOutputPresentationUpdate(cellHandle: number, output: NotebookCellOutputModel): void;
+
     attachWebview(): void;
     isAttached(): boolean
 }

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

@@ -15,12 +15,17 @@
 // *****************************************************************************
 
 import { Emitter, URI } from '@theia/core';
-import { injectable } from '@theia/core/shared/inversify';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
+import { NotebookEditorWidgetService } from './notebook-editor-widget-service';
+import { CellUri } from '../../common';
 
 @injectable()
 export class NotebookCellEditorService {
 
+    @inject(NotebookEditorWidgetService)
+    protected readonly notebookEditorWidgetService: NotebookEditorWidgetService;
+
     protected onDidChangeCellEditorsEmitter = new Emitter<void>();
     readonly onDidChangeCellEditors = this.onDidChangeCellEditorsEmitter.event;
 
@@ -31,6 +36,17 @@ export class NotebookCellEditorService {
 
     protected currentCellEditors: Map<string, SimpleMonacoEditor> = new Map();
 
+    @postConstruct()
+    protected init(): void {
+        this.notebookEditorWidgetService.onDidChangeCurrentEditor(editor => {
+            // if defocus notebook editor or another notebook editor is focused, clear the active cell
+            if (!editor || (this.currentActiveCell && CellUri.parse(this.currentActiveCell.uri)?.notebook.toString() !== editor?.model?.uri.toString())) {
+                this.currentActiveCell = undefined;
+                this.onDidChangeFocusedCellEditorEmitter.fire(undefined);
+            }
+        });
+    }
+
     get allCellEditors(): SimpleMonacoEditor[] {
         return Array.from(this.currentCellEditors.values());
     }
@@ -46,8 +62,10 @@ export class NotebookCellEditorService {
     }
 
     editorFocusChanged(editor?: SimpleMonacoEditor): void {
-        this.currentActiveCell = editor;
-        this.onDidChangeFocusedCellEditorEmitter.fire(editor);
+        if (editor) {
+            this.currentActiveCell = editor;
+            this.onDidChangeFocusedCellEditorEmitter.fire(editor);
+        }
     }
 
     getActiveCell(): SimpleMonacoEditor | undefined {

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

@@ -45,13 +45,23 @@ export class NotebookEditorWidgetService {
     protected readonly onDidChangeFocusedEditorEmitter = new Emitter<NotebookEditorWidget | undefined>();
     readonly onDidChangeFocusedEditor = this.onDidChangeFocusedEditorEmitter.event;
 
+    protected readonly onDidChangeCurrentEditorEmitter = new Emitter<NotebookEditorWidget | undefined>();
+    readonly onDidChangeCurrentEditor = this.onDidChangeCurrentEditorEmitter.event;
+
     focusedEditor?: NotebookEditorWidget = undefined;
 
+    currentEditor?: NotebookEditorWidget = undefined;
+
     @postConstruct()
     protected init(): void {
         this.applicationShell.onDidChangeActiveWidget(event => {
             this.notebookEditorFocusChanged(event.newValue as NotebookEditorWidget, event.newValue instanceof NotebookEditorWidget);
         });
+        this.applicationShell.onDidChangeCurrentWidget(event => {
+            if (event.newValue instanceof NotebookEditorWidget || event.oldValue instanceof NotebookEditorWidget) {
+                this.currentNotebookEditorChanged(event.newValue);
+            }
+        });
     }
 
     // --- editor management
@@ -98,4 +108,14 @@ export class NotebookEditorWidgetService {
         }
     }
 
+    currentNotebookEditorChanged(newEditor: unknown): void {
+        if (newEditor instanceof NotebookEditorWidget) {
+            this.currentEditor = newEditor;
+            this.onDidChangeCurrentEditorEmitter.fire(newEditor);
+        } else if (this.currentEditor?.isDisposed || !this.currentEditor?.isVisible) {
+            this.currentEditor = undefined;
+            this.onDidChangeCurrentEditorEmitter.fire(undefined);
+        }
+    }
+
 }

package/src/browser/style/index.css

@@ -20,10 +20,24 @@
 }
 
 .theia-notebook-cell-list {
+  position: absolute;
+  top: 0;
+  width: 100%;
   overflow-y: auto;
   list-style: none;
   padding-left: 0px;
   background-color: var(--theia-notebook-editorBackground);
+  z-index: 0;
+  pointer-events: none;
+}
+
+
+.theia-notebook-cell-output-webview {
+  padding: 5px 0px;
+  margin: 0px 15px 0px 50px;
+  width: calc(100% - 60px);
+  position: absolute;
+  z-index: 0;
 }
 
 .theia-notebook-cell {
@@ -69,7 +83,8 @@
 /* Rendered Markdown Content */
 
 .theia-notebook-markdown-content {
-  padding: 8px 16px 8px 36px;
+  pointer-events: all;
+  padding: 8px 16px 8px 0px;
   font-size: var(--theia-notebook-markdown-size);
 }
 
@@ -87,9 +102,13 @@
   padding-bottom: 0;
 }
 
+.theia-notebook-markdown-sidebar {
+  width: 35px;
+}
+
 /* Markdown cell edit mode */
 .theia-notebook-cell-content:has(.theia-notebook-markdown-editor-container>.theia-notebook-cell-editor) {
-  margin-left: 36px;
+  pointer-events: all;
   margin-right: var(--theia-notebook-cell-editor-margin-right);
   outline: 1px solid var(--theia-notebook-cellBorderColor);
 }
@@ -108,6 +127,7 @@
 }
 
 .theia-notebook-cell-editor-container {
+  pointer-events: all;
   width: calc(100% - 46px);
   flex: 1;
   outline: 1px solid var(--theia-notebook-cellBorderColor);
@@ -149,6 +169,7 @@
 }
 
 .theia-notebook-cell-toolbar {
+  pointer-events: all;
   border: 1px solid var(--theia-notebook-cellToolbarSeparator);
   display: flex;
   position: absolute;
@@ -161,11 +182,15 @@
   display: flex;
   flex-direction: column;
   padding: 2px;
-  background-color: var(--theia-editor-background);
   flex-grow: 1;
 }
 
 .theia-notebook-cell-sidebar {
+  pointer-events: all;
+  display: flex;
+}
+
+.theia-notebook-cell-sidebar-actions {
   display: flex;
   flex-direction: column;
 }
@@ -194,6 +219,7 @@
 }
 
 .theia-notebook-cell-divider {
+  pointer-events: all;
   height: 25px;
   width: 100%;
 }
@@ -303,19 +329,19 @@
   margin: 1px 0 0 4px;
 }
 
-.theia-notebook-cell-output-webview {
-  padding: 5px 0px;
-  margin: 0px 15px 0px 9px;
-  width: 100%;
-}
-
 .theia-notebook-cell-drop-indicator {
   height: 2px;
   background-color: var(--theia-notebook-focusedCellBorder);
   width: 100%;
 }
 
+.theia-notebook-collapsed-output-container {
+  width: 0;
+  overflow: visible;
+}
+
 .theia-notebook-collapsed-output {
+  text-wrap: nowrap;
   padding: 4px 8px;
   color: var(--theia-foreground);
   margin-left: 30px;

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

@@ -26,9 +26,19 @@ import { NotebookContextManager } from '../service/notebook-context-manager';
 
 export interface CellRenderer {
     render(notebookData: NotebookModel, cell: NotebookCellModel, index: number): React.ReactNode
+    renderSidebar(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode
     renderDragImage(cell: NotebookCellModel): HTMLElement
 }
 
+export function observeCellHeight(ref: HTMLDivElement | null, cell: NotebookCellModel): void {
+    if (ref) {
+        cell.cellHeight = ref?.getBoundingClientRect().height ?? 0;
+        new ResizeObserver(entries =>
+            cell.cellHeight = ref?.getBoundingClientRect().height ?? 0
+        ).observe(ref);
+    }
+}
+
 interface CellListProps {
     renderers: Map<CellKind, CellRenderer>;
     notebookModel: NotebookModel;
@@ -109,7 +119,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
     }
 
     override render(): React.ReactNode {
-        return <ul className='theia-notebook-cell-list' ref={this.cellListRef}>
+        return <ul className='theia-notebook-cell-list' ref={this.cellListRef} onDragStart={e => this.onDragStart(e)}>
             {this.props.notebookModel.cells
                 .map((cell, index) =>
                     <React.Fragment key={'cell-' + cell.handle}>
@@ -119,13 +129,8 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                             onAddNewCell={(commandId: string) => this.onAddNewCell(commandId, index)}
                             onDrop={e => this.onDrop(e, index)}
                             onDragOver={e => this.onDragOver(e, cell, 'top')} />
-                        {this.shouldRenderDragOverIndicator(cell, 'top') && <CellDropIndicator />}
+                        <CellDropIndicator visible={this.shouldRenderDragOverIndicator(cell, 'top')} />
                         <li className={'theia-notebook-cell' + (this.state.selectedCell === cell ? ' focused' : '') + (this.isEnabled() ? ' draggable' : '')}
-                            onClick={e => {
-                                this.setState({ ...this.state, selectedCell: cell });
-                                this.props.notebookModel.setSelectedCell(cell, false);
-                            }}
-                            onDragStart={e => this.onDragStart(e, index, cell)}
                             onDragEnd={e => {
                                 NotebookCellListView.dragGhost?.remove();
                                 this.setState({ ...this.state, dragOverIndicator: undefined });
@@ -134,6 +139,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                             onDrop={e => this.onDrop(e, index)}
                             draggable={true}
                             tabIndex={-1}
+                            data-cell-handle={cell.handle}
                             ref={ref => {
                                 if (ref && cell === this.state.selectedCell && this.state.scrollIntoView) {
                                     ref.scrollIntoView({ block: 'nearest' });
@@ -141,8 +147,16 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                                         ref.focus();
                                     }
                                 }
-                            }}>
-                            <div className={'theia-notebook-cell-marker' + (this.state.selectedCell === cell ? ' theia-notebook-cell-marker-selected' : '')}></div>
+                            }}
+                            onClick={e => {
+                                this.setState({ ...this.state, selectedCell: cell });
+                                this.props.notebookModel.setSelectedCell(cell, false);
+                            }}
+                        >
+                            <div className='theia-notebook-cell-sidebar'>
+                                <div className={'theia-notebook-cell-marker' + (this.state.selectedCell === cell ? ' theia-notebook-cell-marker-selected' : '')}></div>
+                                {this.renderCellSidebar(cell)}
+                            </div>
                             <div className='theia-notebook-cell-content'>
                                 {this.renderCellContent(cell, index)}
                             </div>
@@ -152,7 +166,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                                 })
                             }
                         </li>
-                        {this.shouldRenderDragOverIndicator(cell, 'bottom') && <CellDropIndicator />}
+                        <CellDropIndicator visible={this.shouldRenderDragOverIndicator(cell, 'bottom')} />
                     </React.Fragment>
                 )
             }
@@ -173,13 +187,30 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
         return renderer.render(this.props.notebookModel, cell, index);
     }
 
-    protected onDragStart(event: React.DragEvent<HTMLLIElement>, index: number, cell: NotebookCellModel): void {
+    renderCellSidebar(cell: NotebookCellModel): React.ReactNode {
+        const renderer = this.props.renderers.get(cell.cellKind);
+        if (!renderer) {
+            throw new Error(`No renderer found for cell type ${cell.cellKind}`);
+        }
+        return renderer.renderSidebar(this.props.notebookModel, cell);
+    }
+
+    protected onDragStart(event: React.DragEvent<HTMLElement>): void {
         event.stopPropagation();
         if (!this.isEnabled()) {
             event.preventDefault();
             return;
         }
 
+        const cellHandle = (event.target as HTMLLIElement).getAttribute('data-cell-handle');
+
+        if (!cellHandle) {
+            throw new Error('Cell handle not found in element for cell drag event');
+        }
+
+        const index = this.props.notebookModel.getCellIndexByHandle(parseInt(cellHandle));
+        const cell = this.props.notebookModel.cells[index];
+
         NotebookCellListView.dragGhost = document.createElement('div');
         NotebookCellListView.dragGhost.classList.add('theia-notebook-drag-ghost-image');
         NotebookCellListView.dragGhost.appendChild(this.props.renderers.get(cell.cellKind)?.renderDragImage(cell) ?? document.createElement('div'));
@@ -274,6 +305,6 @@ export function NotebookCellDivider({ isVisible, onAddNewCell, onDrop, onDragOve
     </li>;
 }
 
-function CellDropIndicator(): React.JSX.Element {
-    return <div className='theia-notebook-cell-drop-indicator' />;
+function CellDropIndicator(props: { visible: boolean }): React.JSX.Element {
+    return <div className='theia-notebook-cell-drop-indicator' style={{ visibility: props.visible ? 'visible' : 'hidden' }} />;
 }