@theia/notebook 1.54.0 → 1.55.0-next.14

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

@@ -17,12 +17,11 @@
 import { inject, injectable } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { MonacoEditorServices } from '@theia/monaco/lib/browser/monaco-editor';
-import { CellOutputWebviewFactory, CellOutputWebview } from '../renderers/cell-output-webview';
 import { NotebookRendererRegistry } from '../notebook-renderer-registry';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { NotebookModel } from '../view-model/notebook-model';
 import { CellEditor } from './notebook-cell-editor';
-import { CellRenderer } from './notebook-cell-list-view';
+import { CellRenderer, observeCellHeight } from './notebook-cell-list-view';
 import { NotebookCellToolbarFactory } from './notebook-cell-toolbar-factory';
 import { NotebookCellActionContribution, NotebookCellCommands } from '../contributions/notebook-cell-actions-contribution';
 import { CellExecution, NotebookExecutionStateService } from '../service/notebook-execution-state-service';
@@ -36,6 +35,7 @@ import { NotebookOptionsService } from '../service/notebook-options';
 import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
 import { MarkdownString } from '@theia/monaco-editor-core/esm/vs/base/common/htmlContent';
 import { NotebookCellEditorService } from '../service/notebook-cell-editor-service';
+import { CellOutputWebview } from '../renderers/cell-output-webview';
 
 @injectable()
 export class NotebookCodeCellRenderer implements CellRenderer {
@@ -45,9 +45,6 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(NotebookRendererRegistry)
     protected readonly notebookRendererRegistry: NotebookRendererRegistry;
 
-    @inject(CellOutputWebviewFactory)
-    protected readonly cellOutputWebviewFactory: CellOutputWebviewFactory;
-
     @inject(NotebookCellToolbarFactory)
     protected readonly notebookCellToolbarFactory: NotebookCellToolbarFactory;
 
@@ -75,40 +72,39 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(MarkdownRenderer)
     protected readonly markdownRenderer: MarkdownRenderer;
 
+    @inject(CellOutputWebview)
+    protected readonly outputWebview: CellOutputWebview;
+
     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, cell, {
-                        contextMenuArgs: () => [cell], commandArgs: () => [notebookModel, cell]
-                    })
-                    }
-                    <CodeCellExecutionOrder cell={cell} />
-                </div>
-                <div className='theia-notebook-cell-editor-container'>
-                    <CellEditor notebookModel={notebookModel} cell={cell}
-                        monacoServices={this.monacoServices}
-                        notebookContextManager={this.notebookContextManager}
-                        notebookViewportService={this.notebookViewportService}
-                        notebookCellEditorService={this.notebookCellEditorService}
-                        fontInfo={this.notebookOptionsService.editorFontInfo} />
-                    <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
-                        commandRegistry={this.commandRegistry}
-                        executionStateService={this.executionStateService}
-                        onClick={() => cell.requestFocusEditor()} />
-                </div >
+        return <div className='theia-notebook-cell-with-sidebar' ref={ref => observeCellHeight(ref, cell)}>
+            <div className='theia-notebook-cell-editor-container'>
+                <CellEditor notebookModel={notebookModel} cell={cell}
+                    monacoServices={this.monacoServices}
+                    notebookContextManager={this.notebookContextManager}
+                    notebookViewportService={this.notebookViewportService}
+                    notebookCellEditorService={this.notebookCellEditorService}
+                    fontInfo={this.notebookOptionsService.editorFontInfo} />
+                <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
+                    commandRegistry={this.commandRegistry}
+                    executionStateService={this.executionStateService}
+                    onClick={() => cell.requestFocusEditor()} />
             </div >
-            <div className='theia-notebook-cell-with-sidebar'>
-                <NotebookCodeCellOutputs cell={cell} notebook={notebookModel} outputWebviewFactory={this.cellOutputWebviewFactory}
-                    renderSidebar={() =>
-                        this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, cell, {
-                            contextMenuArgs: () => [notebookModel, cell, cell.outputs[0]]
-                        })
-                    } />
-            </div>
         </div >;
     }
 
+    renderSidebar(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
+        return <div>
+            <NotebookCodeCellSidebar cell={cell} notebook={notebookModel} notebookCellToolbarFactory={this.notebookCellToolbarFactory} />
+            <NotebookCodeCellOutputs cell={cell} notebook={notebookModel} outputWebview={this.outputWebview}
+                renderSidebar={() =>
+                    this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, cell, {
+                        contextMenuArgs: () => [notebookModel, cell, cell.outputs[0]]
+                    })
+                } />
+        </div>;
+
+    }
+
     renderDragImage(cell: NotebookCellModel): HTMLElement {
         const dragImage = document.createElement('div');
         dragImage.className = 'theia-notebook-drag-image';
@@ -151,6 +147,37 @@ export class NotebookCodeCellRenderer implements CellRenderer {
 
 }
 
+export interface NotebookCodeCellSidebarProps {
+    cell: NotebookCellModel;
+    notebook: NotebookModel;
+    notebookCellToolbarFactory: NotebookCellToolbarFactory
+}
+
+export class NotebookCodeCellSidebar extends React.Component<NotebookCodeCellSidebarProps> {
+
+    protected toDispose = new DisposableCollection();
+
+    constructor(props: NotebookCodeCellSidebarProps) {
+        super(props);
+
+        this.toDispose.push(props.cell.onDidCellHeightChange(() => this.forceUpdate()));
+    }
+
+    override componentWillUnmount(): void {
+        this.toDispose.dispose();
+    }
+
+    override render(): React.ReactNode {
+        return <div className='theia-notebook-cell-sidebar-actions' style={{ height: `${this.props.cell.cellHeight}px` }}>
+            {this.props.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, this.props.cell, {
+                contextMenuArgs: () => [this.props.cell], commandArgs: () => [this.props.notebook, this.props.cell]
+            })
+            }
+            <CodeCellExecutionOrder cell={this.props.cell} />
+        </div>;
+    }
+}
+
 export interface NotebookCodeCellStatusProps {
     notebook: NotebookModel;
     cell: NotebookCellModel;
@@ -260,79 +287,42 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
 interface NotebookCellOutputProps {
     cell: NotebookCellModel;
     notebook: NotebookModel;
-    outputWebviewFactory: CellOutputWebviewFactory;
+    outputWebview: CellOutputWebview;
     renderSidebar: () => React.ReactNode;
 }
 
 export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputProps> {
 
-    protected outputsWebview: CellOutputWebview | undefined;
-    protected outputsWebviewPromise: Promise<CellOutputWebview> | undefined;
-
     protected toDispose = new DisposableCollection();
 
-    constructor(props: NotebookCellOutputProps) {
-        super(props);
-    }
+    protected outputHeight: number = 0;
 
     override async componentDidMount(): Promise<void> {
-        const { cell, notebook, outputWebviewFactory } = this.props;
-        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;
+        const { cell } = this.props;
+        this.toDispose.push(cell.onDidChangeOutputs(() => this.forceUpdate()));
+        this.toDispose.push(this.props.cell.onDidChangeOutputVisibility(() => this.forceUpdate()));
+        this.toDispose.push(this.props.outputWebview.onDidRenderOutput(event => {
+            if (event.cellHandle === this.props.cell.handle) {
+                this.outputHeight = event.outputHeight;
                 this.forceUpdate();
-            } else {
-                this.updateOutputs();
             }
         }));
-        if (cell.outputs.length > 0) {
-            this.outputsWebviewPromise = outputWebviewFactory(cell, notebook).then(webview => {
-                this.outputsWebview = webview;
-                this.forceUpdate();
-                return webview;
-            });
-        }
     }
 
-    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();
-        }
-    }
-
-    override async componentWillUnmount(): Promise<void> {
+    override componentWillUnmount(): void {
         this.toDispose.dispose();
-        (await this.outputsWebviewPromise)?.dispose();
     }
 
     override render(): React.ReactNode {
-        return this.outputsWebview && this.props.cell.outputVisible ?
-            <>
+        if (!this.props.cell.outputs?.length) {
+            return <></>;
+        }
+        if (this.props.cell.outputVisible) {
+            return <div style={{ minHeight: this.outputHeight }}>
                 {this.props.renderSidebar()}
-                {this.outputsWebview.render()}
-            </> :
-            this.props.cell.outputs?.length ? <i className='theia-notebook-collapsed-output'>{nls.localizeByDefault('Outputs are collapsed')}</i> : <></>;
-
+            </div>;
+        }
+        return <div className='theia-notebook-collapsed-output-container'><i className='theia-notebook-collapsed-output'>{nls.localizeByDefault('Outputs are collapsed')}</i></div>;
     }
 
 }

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

@@ -18,7 +18,7 @@ import * as React from '@theia/core/shared/react';
 import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
 import { MarkdownStringImpl } from '@theia/core/lib/common/markdown-rendering/markdown-string';
 import { NotebookModel } from '../view-model/notebook-model';
-import { CellRenderer } from './notebook-cell-list-view';
+import { CellRenderer, observeCellHeight } from './notebook-cell-list-view';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { CellEditor } from './notebook-cell-editor';
 import { inject, injectable } from '@theia/core/shared/inversify';
@@ -63,6 +63,10 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
             notebookCellEditorService={this.notebookCellEditorService} />;
     }
 
+    renderSidebar(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
+        return <div className='theia-notebook-markdown-sidebar'></div>;
+    }
+
     renderDragImage(cell: NotebookCellModel): HTMLElement {
         const dragImage = document.createElement('div');
         dragImage.style.width = this.notebookContextManager.context?.clientWidth + 'px';
@@ -135,7 +139,7 @@ function MarkdownCell({
     }
 
     return editMode ?
-        (<div className='theia-notebook-markdown-editor-container' key="code">
+        (<div className='theia-notebook-markdown-editor-container' key="code" ref={ref => observeCellHeight(ref, cell)}>
             <CellEditor notebookModel={notebookModel} cell={cell}
                 monacoServices={monacoServices}
                 notebookContextManager={notebookContextManager}
@@ -147,7 +151,10 @@ function MarkdownCell({
         </div >) :
         (<div className='theia-notebook-markdown-content' key="markdown"
             onDoubleClick={() => cell.requestEdit()}
-            ref={node => node?.replaceChildren(...markdownContent)}
+            ref={node => {
+                node?.replaceChildren(...markdownContent);
+                observeCellHeight(node, cell);
+            }}
         />);
 }
 

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

@@ -129,6 +129,9 @@ export class NotebookCellModel implements NotebookCell, Disposable {
     protected onDidRequestCenterEditorEmitter = new Emitter<void>();
     readonly onDidRequestCenterEditor = this.onDidRequestCenterEditorEmitter.event;
 
+    protected onDidCellHeightChangeEmitter = new Emitter<number>();
+    readonly onDidCellHeightChange = this.onDidCellHeightChangeEmitter.event;
+
     @inject(NotebookCellModelProps)
     protected readonly props: NotebookCellModelProps;
 
@@ -251,6 +254,16 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         }
     }
 
+    protected _cellheight: number = 0;
+    get cellHeight(): number {
+        return this._cellheight;
+    }
+
+    set cellHeight(height: number) {
+        this.onDidCellHeightChangeEmitter.fire(height);
+        this._cellheight = height;
+    }
+
     @postConstruct()
     protected init(): void {
         this._outputs = this.props.outputs.map(op => new NotebookCellOutputModel(op));

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

@@ -23,9 +23,6 @@ export class NotebookCellOutputModel implements Disposable {
     private didChangeDataEmitter = new Emitter<void>();
     readonly onDidChangeData = this.didChangeDataEmitter.event;
 
-    private requestOutputPresentationChangeEmitter = new Emitter<void>();
-    readonly onRequestOutputPresentationChange = this.requestOutputPresentationChangeEmitter.event;
-
     get outputId(): string {
         return this.rawOutput.outputId;
     }
@@ -54,11 +51,6 @@ export class NotebookCellOutputModel implements Disposable {
 
     dispose(): void {
         this.didChangeDataEmitter.dispose();
-        this.requestOutputPresentationChangeEmitter.dispose();
-    }
-
-    requestOutputPresentationUpdate(): void {
-        this.requestOutputPresentationChangeEmitter.fire();
     }
 
     getData(): CellOutput {

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

@@ -509,10 +509,14 @@ export class NotebookModel implements Saveable, Disposable {
         return true;
     }
 
-    protected getCellIndexByHandle(handle: number): number {
+    getCellIndexByHandle(handle: number): number {
         return this.cells.findIndex(c => c.handle === handle);
     }
 
+    getCellByHandle(handle: number): NotebookCellModel | undefined {
+        return this.cells.find(c => c.handle === handle);
+    }
+
     protected isCellMetadataChanged(a: NotebookCellMetadata, b: NotebookCellMetadata): boolean {
         const keys = new Set<keyof NotebookCellMetadata>([...Object.keys(a || {}), ...Object.keys(b || {})]);
         for (const key of keys) {