@theia/notebook 1.41.0

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

@@ -0,0 +1,91 @@
+// *****************************************************************************
+// Copyright (C) 2023 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 * as React from '@theia/core/shared/react';
+import { CommandRegistry, CompoundMenuNodeRole, MenuModelRegistry, MenuNode } from '@theia/core';
+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';
+
+export interface NotebookCellToolbarItem {
+    id: string;
+    icon?: string;
+    label?: string;
+    onClick: (e: React.MouseEvent) => void;
+}
+
+@injectable()
+export class NotebookCellToolbarFactory {
+
+    @inject(MenuModelRegistry)
+    protected menuRegistry: MenuModelRegistry;
+
+    @inject(ContextKeyService)
+    protected contextKeyService: ContextKeyService;
+
+    @inject(ContextMenuRenderer)
+    protected readonly contextMenuRenderer: ContextMenuRenderer;
+
+    @inject(CommandRegistry)
+    protected readonly commandRegistry: CommandRegistry;
+
+    renderCellToolbar(menuPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
+        return <NotebookCellToolbar getMenuItems={() => this.getMenuItems(menuPath, notebookModel, cell)}
+            onContextKeysChanged={cell.notebookCellContextManager.onDidChangeContext} />;
+    }
+
+    renderSidebar(menuPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): React.ReactNode {
+        return <NotebookCellSidebar getMenuItems={() => this.getMenuItems(menuPath, notebookModel, cell, output)}
+            onContextKeysChanged={cell.notebookCellContextManager.onDidChangeContext} />;
+    }
+
+    private getMenuItems(menuItemPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): NotebookCellToolbarItem[] {
+        const inlineItems: NotebookCellToolbarItem[] = [];
+
+        for (const menuNode of this.menuRegistry.getMenu(menuItemPath).children) {
+            if (!menuNode.when || this.contextKeyService.match(menuNode.when, cell.context ?? undefined)) {
+                if (menuNode.role === CompoundMenuNodeRole.Flat) {
+                    inlineItems.push(...menuNode.children?.map(child => this.createToolbarItem(child, notebookModel, cell, output)) ?? []);
+                } else {
+                    inlineItems.push(this.createToolbarItem(menuNode, notebookModel, cell, output));
+                }
+            }
+        }
+        return inlineItems;
+    }
+
+    private createToolbarItem(menuNode: MenuNode, notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): NotebookCellToolbarItem {
+        const menuPath = menuNode.role === CompoundMenuNodeRole.Submenu ? this.menuRegistry.getPath(menuNode) : undefined;
+        return {
+            id: menuNode.id,
+            icon: menuNode.icon,
+            label: menuNode.label,
+            onClick: menuPath ?
+                e => this.contextMenuRenderer.render(
+                    {
+                        anchor: e.nativeEvent,
+                        menuPath,
+                        includeAnchorArg: false,
+                        args: [notebookModel, cell, output]
+                    }) :
+                () => this.commandRegistry.executeCommand(menuNode.command!, notebookModel, cell, output)
+        };
+    }
+}

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

@@ -0,0 +1,70 @@
+// *****************************************************************************
+// Copyright (C) 2023 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 * as React from '@theia/core/shared/react';
+import { ACTION_ITEM } from '@theia/core/lib/browser';
+import { NotebookCellToolbarItem } from './notebook-cell-toolbar-factory';
+import { DisposableCollection, Event } from '@theia/core';
+
+export interface NotebookCellToolbarProps {
+    getMenuItems: () => NotebookCellToolbarItem[];
+    onContextKeysChanged: Event<void>;
+}
+
+interface NotebookCellToolbarState {
+    inlineItems: NotebookCellToolbarItem[];
+}
+
+abstract class NotebookCellActionItems extends React.Component<NotebookCellToolbarProps, NotebookCellToolbarState> {
+
+    protected toDispose = new DisposableCollection();
+
+    constructor(props: NotebookCellToolbarProps) {
+        super(props);
+        this.toDispose.push(props.onContextKeysChanged(e => {
+            this.setState({ inlineItems: this.props.getMenuItems() });
+        }));
+        this.state = { inlineItems: this.props.getMenuItems() };
+    }
+
+    override componentWillUnmount(): void {
+        this.toDispose.dispose();
+    }
+
+    protected renderItem(item: NotebookCellToolbarItem): React.ReactNode {
+        return <div key={item.id} title={item.label} onClick={item.onClick} className={`${item.icon} ${ACTION_ITEM} theia-notebook-cell-toolbar-item`} />;
+    }
+
+}
+
+export class NotebookCellToolbar extends NotebookCellActionItems {
+
+    override render(): React.ReactNode {
+        return <div className='theia-notebook-cell-toolbar'>
+            {this.state.inlineItems.map(item => this.renderItem(item))}
+        </div>;
+    }
+
+}
+
+export class NotebookCellSidebar extends NotebookCellActionItems {
+
+    override render(): React.ReactNode {
+        return <div className='theia-notebook-cell-sidebar'>
+            {this.state.inlineItems.map(item => this.renderItem(item))}
+        </div>;
+    }
+}
+

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

@@ -0,0 +1,190 @@
+// *****************************************************************************
+// Copyright (C) 2023 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 * 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 { NotebookCellToolbarFactory } from './notebook-cell-toolbar-factory';
+import { NotebookCellActionContribution } 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';
+
+@injectable()
+export class NotebookCodeCellRenderer implements CellRenderer {
+    @inject(MonacoEditorServices)
+    protected readonly monacoServices: MonacoEditorServices;
+
+    @inject(NotebookRendererRegistry)
+    protected readonly notebookRendererRegistry: NotebookRendererRegistry;
+
+    @inject(CellOutputWebviewFactory)
+    protected readonly cellOutputWebviewFactory: CellOutputWebviewFactory;
+
+    @inject(NotebookCellToolbarFactory)
+    protected readonly notebookCellToolbarFactory: NotebookCellToolbarFactory;
+
+    @inject(NotebookExecutionStateService)
+    protected readonly executionStateService: NotebookExecutionStateService;
+
+    render(notebookModel: NotebookModel, cell: NotebookCellModel, handle: number): React.ReactNode {
+        return <div>
+            <div className='theia-notebook-cell-with-sidebar'>
+                <div>
+                    {this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, notebookModel, cell)}
+                    {/* cell-execution-order needs an own component. Could be a little more complicated
+                    <p className='theia-notebook-code-cell-execution-order'>{`[${cell.exec ?? ' '}]`}</p> */}
+                </div>
+                <div className='theia-notebook-cell-editor-container'>
+                    <CellEditor notebookModel={notebookModel} cell={cell} monacoServices={this.monacoServices} />
+                    <NotebookCodeCellStatus cell={cell} executionStateService={this.executionStateService}></NotebookCodeCellStatus>
+                </div>
+            </div>
+            <div className='theia-notebook-cell-with-sidebar'>
+                <NotebookCodeCellOutputs cell={cell} outputWebviewFactory={this.cellOutputWebviewFactory}
+                    renderSidebar={() =>
+                        this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, notebookModel, cell, cell.outputs[0])} />
+            </div>
+        </div >;
+    }
+}
+
+export interface NotebookCodeCellStatusProps {
+    cell: NotebookCellModel;
+    executionStateService: NotebookExecutionStateService
+}
+
+export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStatusProps, { currentExecution?: CellExecution }> {
+
+    protected toDispose = new DisposableCollection();
+
+    constructor(props: NotebookCodeCellStatusProps) {
+        super(props);
+
+        this.state = {};
+
+        this.toDispose.push(props.executionStateService.onDidChangeExecution(event => {
+            if (event.affectsCell(this.props.cell.uri)) {
+                this.setState({ currentExecution: event.changed });
+            }
+        }));
+    }
+
+    override componentWillUnmount(): void {
+        this.toDispose.dispose();
+    }
+
+    override render(): React.ReactNode {
+        return <div className='notebook-cell-status'>
+            <div className='notebook-cell-status-left'>
+                {this.renderExecutionState()}
+            </div>
+            <div className='notebook-cell-status-right'>
+                <span>{this.props.cell.language}</span>
+            </div>
+        </div>;
+    }
+
+    private renderExecutionState(): React.ReactNode {
+        const state = this.state.currentExecution?.state;
+        const { lastRunSuccess } = this.props.cell.internalMetadata;
+
+        let iconClasses: string | undefined = undefined;
+        let color: string | undefined = undefined;
+        if (!state && lastRunSuccess) {
+            iconClasses = codicon('check');
+            color = 'green';
+        } else if (!state && lastRunSuccess === false) {
+            iconClasses = codicon('error');
+            color = 'red';
+        } else if (state === NotebookCellExecutionState.Pending || state === NotebookCellExecutionState.Unconfirmed) {
+            iconClasses = codicon('clock');
+        } else if (state === NotebookCellExecutionState.Executing) {
+            iconClasses = `${codicon('sync')} theia-animation-spin`;
+        }
+        return <>
+            {iconClasses &&
+                <>
+                    <span className={`${iconClasses} notebook-cell-status-item`} style={{ color }}></span>
+                    <div className='notebook-cell-status-item'>{this.getExecutionTime()}</div>
+                </>}
+        </>;
+    }
+
+    private getExecutionTime(): string {
+        const { runStartTime, runEndTime } = this.props.cell.internalMetadata;
+        if (runStartTime && runEndTime) {
+            return `${((runEndTime - runStartTime) / 1000).toLocaleString(undefined, { maximumFractionDigits: 1, minimumFractionDigits: 1 })}s`;
+        }
+        return '0.0s';
+    }
+}
+
+interface NotebookCellOutputProps {
+    cell: NotebookCellModel;
+    outputWebviewFactory: CellOutputWebviewFactory;
+    renderSidebar: () => React.ReactNode;
+}
+
+export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputProps> {
+
+    protected outputsWebview: CellOutputWebview | undefined;
+
+    constructor(props: NotebookCellOutputProps) {
+        super(props);
+    }
+
+    override async componentDidMount(): Promise<void> {
+        const { cell, outputWebviewFactory } = this.props;
+        cell.onDidChangeOutputs(async () => {
+            if (!this.outputsWebview && cell.outputs.length > 0) {
+                this.outputsWebview = await outputWebviewFactory(cell);
+            } else if (this.outputsWebview && cell.outputs.length === 0) {
+                this.outputsWebview.dispose();
+                this.outputsWebview = undefined;
+            }
+            this.forceUpdate();
+        });
+        if (cell.outputs.length > 0) {
+            this.outputsWebview = await outputWebviewFactory(cell);
+            this.forceUpdate();
+        }
+    }
+
+    override componentDidUpdate(): void {
+        if (!this.outputsWebview?.isAttached()) {
+            this.outputsWebview?.attachWebview();
+        }
+    }
+
+    override render(): React.ReactNode {
+        return this.outputsWebview ?
+            <>
+                {this.props.renderSidebar()}
+                {this.outputsWebview.render()}
+            </> :
+            <></>;
+
+    }
+
+}

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

@@ -0,0 +1,115 @@
+// *****************************************************************************
+// Copyright (C) 2023 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 { CommandRegistry, CompoundMenuNodeRole, DisposableCollection, MenuModelRegistry, MenuNode, nls } from '@theia/core';
+import * as React from '@theia/core/shared/react';
+import { codicon } from '@theia/core/lib/browser';
+import { NotebookCommands, NotebookMenus } from '../contributions/notebook-actions-contribution';
+import { NotebookModel } from '../view-model/notebook-model';
+import { NotebookKernelService } from '../service/notebook-kernel-service';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+
+export interface NotebookMainToolbarProps {
+    notebookModel: NotebookModel
+    menuRegistry: MenuModelRegistry;
+    notebookKernelService: NotebookKernelService;
+    commandRegistry: CommandRegistry;
+    contextKeyService: ContextKeyService;
+}
+
+@injectable()
+export class NotebookMainToolbarRenderer {
+    @inject(NotebookKernelService) protected readonly notebookKernelService: NotebookKernelService;
+    @inject(CommandRegistry) protected readonly commandRegistry: CommandRegistry;
+    @inject(MenuModelRegistry) protected readonly menuRegistry: MenuModelRegistry;
+    @inject(ContextKeyService) protected readonly contextKeyService: ContextKeyService;
+
+    render(notebookModel: NotebookModel): React.ReactNode {
+        return <NotebookMainToolbar notebookModel={notebookModel}
+            menuRegistry={this.menuRegistry}
+            notebookKernelService={this.notebookKernelService}
+            commandRegistry={this.commandRegistry}
+            contextKeyService={this.contextKeyService}
+        />;
+    }
+}
+
+export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProps, { selectedKernelLabel?: string }> {
+
+    protected toDispose = new DisposableCollection();
+
+    constructor(props: NotebookMainToolbarProps) {
+        super(props);
+
+        this.state = { selectedKernelLabel: props.notebookKernelService.getSelectedOrSuggestedKernel(props.notebookModel)?.label };
+        this.toDispose.push(props.notebookKernelService.onDidChangeSelectedKernel(event => {
+            if (props.notebookModel.uri.isEqual(event.notebook)) {
+                this.setState({ selectedKernelLabel: props.notebookKernelService.getKernel(event.newKernel ?? '')?.label });
+            }
+        }));
+        // in case the selected kernel is added after the notebook is loaded
+        this.toDispose.push(props.notebookKernelService.onDidAddKernel(() => {
+            if (!this.state.selectedKernelLabel) {
+                this.setState({ selectedKernelLabel: props.notebookKernelService.getSelectedOrSuggestedKernel(props.notebookModel)?.label });
+            }
+        }));
+    }
+
+    override componentWillUnmount(): void {
+        this.toDispose.dispose();
+    }
+
+    override render(): React.ReactNode {
+        return <div className='theia-notebook-main-toolbar'>
+            {this.getMenuItems().map(item => this.renderMenuItem(item))}
+            <div style={{ flexGrow: 1 }}></div>
+            <div className='theia-notebook-main-toolbar-item'
+                onClick={() => this.props.commandRegistry.executeCommand(NotebookCommands.SELECT_KERNEL_COMMAND.id, this.props.notebookModel)}>
+                <span className={codicon('server-environment')} />
+                <span className=' theia-notebook-main-toolbar-item-text'>
+                    {this.state.selectedKernelLabel ?? nls.localizeByDefault('Select Kernel')}
+                </span>
+            </div>
+        </div>;
+    }
+
+    protected renderMenuItem(item: MenuNode): React.ReactNode {
+        if (item.role === CompoundMenuNodeRole.Group) {
+            const itemNodes = item.children?.map(child => this.renderMenuItem(child)).filter(child => !!child);
+            return <React.Fragment key={item.id}>
+                {itemNodes}
+                {itemNodes && itemNodes.length > 0 && <span key={`${item.id}-separator`} className='theia-notebook-toolbar-separator'></span>}
+            </React.Fragment>;
+        } else if (!item.when || this.props.contextKeyService.match(item.when)) {
+            return <div key={item.id} title={item.id} className='theia-notebook-main-toolbar-item'
+                onClick={() => {
+                    if (item.command) {
+                        this.props.commandRegistry.executeCommand(item.command, this.props.notebookModel);
+                    }
+                }}>
+                <span className={item.icon} />
+                <span className='theia-notebook-main-toolbar-item-text'>{item.label}</span>
+            </div>;
+        }
+        return undefined;
+    }
+
+    private getMenuItems(): readonly MenuNode[] {
+        const menuPath = NotebookMenus.NOTEBOOK_MAIN_TOOLBAR;
+        const pluginCommands = this.props.menuRegistry.getMenuNode(menuPath).children;
+        return this.props.menuRegistry.getMenu([menuPath]).children.concat(pluginCommands);
+    }
+}

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

@@ -0,0 +1,73 @@
+// *****************************************************************************
+// Copyright (C) 2023 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 * 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 { NotebookCellModel } from '../view-model/notebook-cell-model';
+import { CellEditor } from './notebook-cell-editor';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { MonacoEditorServices } from '@theia/monaco/lib/browser/monaco-editor';
+import { nls } from '@theia/core';
+
+@injectable()
+export class NotebookMarkdownCellRenderer implements CellRenderer {
+
+    @inject(MarkdownRenderer)
+    private readonly markdownRenderer: MarkdownRenderer;
+    @inject(MonacoEditorServices)
+    protected readonly monacoServices: MonacoEditorServices;
+
+    render(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
+        return <MarkdownCell markdownRenderer={this.markdownRenderer} monacoServices={this.monacoServices}
+            cell={cell} notebookModel={notebookModel} />;
+    }
+
+}
+
+interface MarkdownCellProps {
+    markdownRenderer: MarkdownRenderer,
+    monacoServices: MonacoEditorServices
+
+    cell: NotebookCellModel,
+    notebookModel: NotebookModel
+}
+
+function MarkdownCell({ markdownRenderer, monacoServices, cell, notebookModel }: MarkdownCellProps): React.JSX.Element {
+    const [editMode, setEditMode] = React.useState(false);
+
+    React.useEffect(() => {
+        const listener = cell.onDidRequestCellEditChange(cellEdit => setEditMode(cellEdit));
+        return () => listener.dispose();
+    }, [editMode]);
+
+    let markdownContent = React.useMemo(() => markdownRenderer.render(new MarkdownStringImpl(cell.source)).element.innerHTML, [cell, editMode]);
+    if (markdownContent.length === 0) {
+        markdownContent = `<i class="theia-notebook-empty-markdown">${nls.localizeByDefault('Empty markdown cell, double-click or press enter to edit.')}</i>`;
+    }
+
+    return editMode ?
+        <CellEditor cell={cell} notebookModel={notebookModel} monacoServices={monacoServices} /> :
+        <div className='theia-notebook-markdown-content'
+            onDoubleClick={() => cell.requestEdit()}
+            // This sets the non React HTML node from the markdown renderers output as a child node to this react component
+            // This is currently sadly the best way we have to combine React (Virtual Nodes) and normal dom nodes
+            // the HTML is allready sanitized by the markdown renderer, so we don't need to sanitize it again
+            dangerouslySetInnerHTML={{ __html: markdownContent }} // eslint-disable-line react/no-danger
+        />;
+}