@codingame/monaco-vscode-api 1.85.0 → 1.85.1

package/vscode/src/vs/workbench/contrib/notebook/browser/view/cellParts/cellOutput.js

@@ -0,0 +1,652 @@
+import { __decorate, __param } from '../../../../../../../../../external/tslib/tslib.es6.js';
+import * as dom from 'monaco-editor/esm/vs/base/browser/dom.js';
+import { renderMarkdown } from 'monaco-editor/esm/vs/base/browser/markdownRenderer.js';
+import { Action } from 'monaco-editor/esm/vs/base/common/actions.js';
+import { Disposable, DisposableStore } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
+import * as nls from 'monaco-editor/esm/vs/nls.js';
+import { createAndFillInActionBarActions } from 'monaco-editor/esm/vs/platform/actions/browser/menuEntryActionViewItem.js';
+import { WorkbenchToolBar } from 'monaco-editor/esm/vs/platform/actions/browser/toolbar.js';
+import { MenuId, IMenuService } from 'monaco-editor/esm/vs/platform/actions/common/actions.js';
+import { IContextKeyService } from 'monaco-editor/esm/vs/platform/contextkey/common/contextkey.js';
+import { IInstantiationService } from 'monaco-editor/esm/vs/platform/instantiation/common/instantiation.js';
+import { IOpenerService } from 'monaco-editor/esm/vs/platform/opener/common/opener.js';
+import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput.js';
+import { ThemeIcon } from 'monaco-editor/esm/vs/base/common/themables.js';
+import { VIEWLET_ID } from '../../../../extensions/common/extensions.js';
+import { JUPYTER_EXTENSION_ID } from '../../notebookBrowser.js';
+import { mimetypeIcon } from '../../notebookIcons.js';
+import { CellContentPart } from '../cellPart.js';
+import { NotebookCellExecutionState, CellUri, isTextStreamMime, RENDERER_NOT_AVAILABLE } from '../../../common/notebookCommon.js';
+import { INotebookExecutionStateService } from '../../../common/notebookExecutionStateService.js';
+import { INotebookService } from '../../../common/notebookService.js';
+import { IPaneCompositePartService } from '../../../../../services/panecomposite/browser/panecomposite.js';
+import { COPY_OUTPUT_COMMAND_ID } from '../../controller/cellOutputActions.js';
+import { CLEAR_CELL_OUTPUTS_COMMAND_ID } from '../../controller/editActions.js';
+import { TEXT_BASED_MIMETYPES } from '../../contrib/clipboard/cellOutputClipboard.js';
+let CellOutputElement = class CellOutputElement extends Disposable {
+    constructor(notebookEditor, viewCell, cellOutputContainer, outputContainer, output, notebookService, quickInputService, parentContextKeyService, menuService, paneCompositeService, instantiationService) {
+        super();
+        this.notebookEditor = notebookEditor;
+        this.viewCell = viewCell;
+        this.cellOutputContainer = cellOutputContainer;
+        this.outputContainer = outputContainer;
+        this.output = output;
+        this.notebookService = notebookService;
+        this.quickInputService = quickInputService;
+        this.menuService = menuService;
+        this.paneCompositeService = paneCompositeService;
+        this.instantiationService = instantiationService;
+        this._renderDisposableStore = this._register(( new DisposableStore()));
+        this._outputHeightTimer = null;
+        this.contextKeyService = parentContextKeyService;
+        this._register(this.output.model.onDidChangeData(() => {
+            this.rerender();
+        }));
+        this._register(this.output.onDidResetRenderer(() => {
+            this.rerender();
+        }));
+    }
+    detach() {
+        this.renderedOutputContainer?.parentElement?.removeChild(this.renderedOutputContainer);
+        let count = 0;
+        if (this.innerContainer) {
+            for (let i = 0; i < this.innerContainer.childNodes.length; i++) {
+                if (this.innerContainer.childNodes[i].className === 'rendered-output') {
+                    count++;
+                }
+                if (count > 1) {
+                    break;
+                }
+            }
+            if (count === 0) {
+                this.innerContainer.parentElement?.removeChild(this.innerContainer);
+            }
+        }
+        this.notebookEditor.removeInset(this.output);
+    }
+    updateDOMTop(top) {
+        if (this.innerContainer) {
+            this.innerContainer.style.top = `${top}px`;
+        }
+    }
+    rerender() {
+        if (this.notebookEditor.hasModel() &&
+            this.innerContainer &&
+            this.renderResult &&
+            this.renderResult.type === 1 ) {
+            const [mimeTypes, pick] = this.output.resolveMimeTypes(this.notebookEditor.textModel, this.notebookEditor.activeKernel?.preloadProvides);
+            const pickedMimeType = mimeTypes[pick];
+            if (pickedMimeType.mimeType === this.renderResult.mimeType && pickedMimeType.rendererId === this.renderResult.renderer.id) {
+                const index = this.viewCell.outputsViewModels.indexOf(this.output);
+                this.notebookEditor.updateOutput(this.viewCell, this.renderResult, this.viewCell.getOutputOffset(index));
+                return;
+            }
+        }
+        if (!this.innerContainer) {
+            const currOutputIndex = this.cellOutputContainer.renderedOutputEntries.findIndex(entry => entry.element === this);
+            const previousSibling = currOutputIndex > 0 && !!(this.cellOutputContainer.renderedOutputEntries[currOutputIndex - 1].element.innerContainer?.parentElement)
+                ? this.cellOutputContainer.renderedOutputEntries[currOutputIndex - 1].element.innerContainer
+                : undefined;
+            this.render(previousSibling);
+        }
+        else {
+            const nextElement = this.innerContainer.nextElementSibling;
+            this._renderDisposableStore.clear();
+            const element = this.innerContainer;
+            if (element) {
+                element.parentElement?.removeChild(element);
+                this.notebookEditor.removeInset(this.output);
+            }
+            this.render(nextElement);
+        }
+        this._relayoutCell();
+    }
+    _generateInnerOutputContainer(previousSibling, pickedMimeTypeRenderer) {
+        this.innerContainer = dom.$('.output-inner-container');
+        if (previousSibling && previousSibling.nextElementSibling) {
+            this.outputContainer.domNode.insertBefore(this.innerContainer, previousSibling.nextElementSibling);
+        }
+        else {
+            this.outputContainer.domNode.appendChild(this.innerContainer);
+        }
+        this.innerContainer.setAttribute('output-mime-type', pickedMimeTypeRenderer.mimeType);
+        return this.innerContainer;
+    }
+    render(previousSibling) {
+        const index = this.viewCell.outputsViewModels.indexOf(this.output);
+        if (this.viewCell.isOutputCollapsed || !this.notebookEditor.hasModel()) {
+            return undefined;
+        }
+        const notebookUri = CellUri.parse(this.viewCell.uri)?.notebook;
+        if (!notebookUri) {
+            return undefined;
+        }
+        const notebookTextModel = this.notebookEditor.textModel;
+        const [mimeTypes, pick] = this.output.resolveMimeTypes(notebookTextModel, this.notebookEditor.activeKernel?.preloadProvides);
+        if (!mimeTypes.find(mimeType => mimeType.isTrusted) || mimeTypes.length === 0) {
+            this.viewCell.updateOutputHeight(index, 0, 'CellOutputElement#noMimeType');
+            return undefined;
+        }
+        const pickedMimeTypeRenderer = mimeTypes[pick];
+        const innerContainer = this._generateInnerOutputContainer(previousSibling, pickedMimeTypeRenderer);
+        this._attachToolbar(innerContainer, notebookTextModel, this.notebookEditor.activeKernel, index, mimeTypes);
+        this.renderedOutputContainer = dom.append(innerContainer, dom.$('.rendered-output'));
+        const renderer = this.notebookService.getRendererInfo(pickedMimeTypeRenderer.rendererId);
+        this.renderResult = renderer
+            ? { type: 1 , renderer, source: this.output, mimeType: pickedMimeTypeRenderer.mimeType }
+            : this._renderMissingRenderer(this.output, pickedMimeTypeRenderer.mimeType);
+        this.output.pickedMimeType = pickedMimeTypeRenderer;
+        if (!this.renderResult) {
+            this.viewCell.updateOutputHeight(index, 0, 'CellOutputElement#renderResultUndefined');
+            return undefined;
+        }
+        this.notebookEditor.createOutput(this.viewCell, this.renderResult, this.viewCell.getOutputOffset(index), false);
+        innerContainer.classList.add('background');
+        return { initRenderIsSynchronous: false };
+    }
+    _renderMissingRenderer(viewModel, preferredMimeType) {
+        if (!viewModel.model.outputs.length) {
+            return this._renderMessage(viewModel, ( nls.localizeWithPath(
+                'vs/workbench/contrib/notebook/browser/view/cellParts/cellOutput',
+                'empty',
+                "Cell has no output"
+            )));
+        }
+        if (!preferredMimeType) {
+            const mimeTypes = ( viewModel.model.outputs.map(op => op.mime));
+            const mimeTypesMessage = mimeTypes.join(', ');
+            return this._renderMessage(viewModel, ( nls.localizeWithPath(
+                'vs/workbench/contrib/notebook/browser/view/cellParts/cellOutput',
+                'noRenderer.2',
+                "No renderer could be found for output. It has the following mimetypes: {0}",
+                mimeTypesMessage
+            )));
+        }
+        return this._renderSearchForMimetype(viewModel, preferredMimeType);
+    }
+    _renderSearchForMimetype(viewModel, mimeType) {
+        const query = `@tag:notebookRenderer ${mimeType}`;
+        const p = dom.$('p', undefined, `No renderer could be found for mimetype "${mimeType}", but one might be available on the Marketplace.`);
+        const a = dom.$('a', { href: `command:workbench.extensions.search?%22${query}%22`, class: 'monaco-button monaco-text-button', tabindex: 0, role: 'button', style: 'padding: 8px; text-decoration: none; color: rgb(255, 255, 255); background-color: rgb(14, 99, 156); max-width: 200px;' }, `Search Marketplace`);
+        return {
+            type: 0 ,
+            source: viewModel,
+            htmlContent: p.outerHTML + a.outerHTML
+        };
+    }
+    _renderMessage(viewModel, message) {
+        const el = dom.$('p', undefined, message);
+        return { type: 0 , source: viewModel, htmlContent: el.outerHTML };
+    }
+    shouldEnableCopy(mimeTypes) {
+        if (!mimeTypes.find(mimeType => TEXT_BASED_MIMETYPES.indexOf(mimeType.mimeType) || mimeType.mimeType.startsWith('image/'))) {
+            return false;
+        }
+        if (isTextStreamMime(mimeTypes[0].mimeType)) {
+            const cellViewModel = this.output.cellViewModel;
+            const index = cellViewModel.outputsViewModels.indexOf(this.output);
+            if (index > 0) {
+                const previousOutput = cellViewModel.model.outputs[index - 1];
+                return !isTextStreamMime(previousOutput.outputs[0].mime);
+            }
+        }
+        return true;
+    }
+    async _attachToolbar(outputItemDiv, notebookTextModel, kernel, index, mimeTypes) {
+        const hasMultipleMimeTypes = mimeTypes.filter(mimeType => mimeType.isTrusted).length > 1;
+        const isCopyEnabled = this.shouldEnableCopy(mimeTypes);
+        if (index > 0 && !hasMultipleMimeTypes && !isCopyEnabled) {
+            return;
+        }
+        if (!this.notebookEditor.hasModel()) {
+            return;
+        }
+        const useConsolidatedButton = this.notebookEditor.notebookOptions.getDisplayOptions().consolidatedOutputButton;
+        outputItemDiv.style.position = 'relative';
+        const mimeTypePicker = dom.$('.cell-output-toolbar');
+        outputItemDiv.appendChild(mimeTypePicker);
+        const toolbar = this._renderDisposableStore.add(this.instantiationService.createInstance(WorkbenchToolBar, mimeTypePicker, {
+            renderDropdownAsChildElement: false
+        }));
+        toolbar.context = {
+            ui: true,
+            cell: this.output.cellViewModel,
+            outputViewModel: this.output,
+            notebookEditor: this.notebookEditor,
+            $mid: 13
+        };
+        const pickAction = ( new Action('notebook.output.pickMimetype', ( nls.localizeWithPath(
+            'vs/workbench/contrib/notebook/browser/view/cellParts/cellOutput',
+            'pickMimeType',
+            "Change Presentation"
+        )), ThemeIcon.asClassName(mimetypeIcon), undefined, async (_context) => this._pickActiveMimeTypeRenderer(outputItemDiv, notebookTextModel, kernel, this.output)));
+        const menu = this._renderDisposableStore.add(this.menuService.createMenu(MenuId.NotebookOutputToolbar, this.contextKeyService));
+        const updateMenuToolbar = () => {
+            const primary = [];
+            let secondary = [];
+            const result = { primary, secondary };
+            createAndFillInActionBarActions(menu, { shouldForwardArgs: true }, result, () => false);
+            if (index > 0 || !useConsolidatedButton) {
+                secondary = secondary.filter((action) => action.id !== CLEAR_CELL_OUTPUTS_COMMAND_ID);
+            }
+            if (!isCopyEnabled) {
+                secondary = secondary.filter((action) => action.id !== COPY_OUTPUT_COMMAND_ID);
+            }
+            if (hasMultipleMimeTypes) {
+                secondary = [pickAction, ...secondary];
+            }
+            toolbar.setActions([], secondary);
+        };
+        updateMenuToolbar();
+        this._renderDisposableStore.add(menu.onDidChange(updateMenuToolbar));
+    }
+    async _pickActiveMimeTypeRenderer(outputItemDiv, notebookTextModel, kernel, viewModel) {
+        const [mimeTypes, currIndex] = viewModel.resolveMimeTypes(notebookTextModel, kernel?.preloadProvides);
+        const items = [];
+        const unsupportedItems = [];
+        mimeTypes.forEach((mimeType, index) => {
+            if (mimeType.isTrusted) {
+                const arr = mimeType.rendererId === RENDERER_NOT_AVAILABLE ?
+                    unsupportedItems :
+                    items;
+                arr.push({
+                    label: mimeType.mimeType,
+                    id: mimeType.mimeType,
+                    index: index,
+                    picked: index === currIndex,
+                    detail: this._generateRendererInfo(mimeType.rendererId),
+                    description: index === currIndex ? ( nls.localizeWithPath(
+                        'vs/workbench/contrib/notebook/browser/view/cellParts/cellOutput',
+                        'curruentActiveMimeType',
+                        "Currently Active"
+                    )) : undefined
+                });
+            }
+        });
+        if (( unsupportedItems.some(m => JUPYTER_RENDERER_MIMETYPES.includes(m.id)))) {
+            unsupportedItems.push({
+                label: ( nls.localizeWithPath(
+                    'vs/workbench/contrib/notebook/browser/view/cellParts/cellOutput',
+                    'installJupyterPrompt',
+                    "Install additional renderers from the marketplace"
+                )),
+                id: 'installRenderers',
+                index: mimeTypes.length
+            });
+        }
+        const picker = this.quickInputService.createQuickPick();
+        picker.items = [
+            ...items,
+            { type: 'separator' },
+            ...unsupportedItems
+        ];
+        picker.activeItems = items.filter(item => !!item.picked);
+        picker.placeholder = items.length !== mimeTypes.length
+            ? ( nls.localizeWithPath(
+            'vs/workbench/contrib/notebook/browser/view/cellParts/cellOutput',
+            'promptChooseMimeTypeInSecure.placeHolder',
+            "Select mimetype to render for current output"
+        ))
+            : ( nls.localizeWithPath(
+            'vs/workbench/contrib/notebook/browser/view/cellParts/cellOutput',
+            'promptChooseMimeType.placeHolder',
+            "Select mimetype to render for current output"
+        ));
+        const pick = await ( new Promise(resolve => {
+            picker.onDidAccept(() => {
+                resolve(picker.selectedItems.length === 1 ? picker.selectedItems[0] : undefined);
+                picker.dispose();
+            });
+            picker.show();
+        }));
+        if (pick === undefined || pick.index === currIndex) {
+            return;
+        }
+        if (pick.id === 'installRenderers') {
+            this._showJupyterExtension();
+            return;
+        }
+        const nextElement = outputItemDiv.nextElementSibling;
+        this._renderDisposableStore.clear();
+        const element = this.innerContainer;
+        if (element) {
+            element.parentElement?.removeChild(element);
+            this.notebookEditor.removeInset(viewModel);
+        }
+        viewModel.pickedMimeType = mimeTypes[pick.index];
+        this.viewCell.updateOutputMinHeight(this.viewCell.layoutInfo.outputTotalHeight);
+        const { mimeType, rendererId } = mimeTypes[pick.index];
+        this.notebookService.updateMimePreferredRenderer(notebookTextModel.viewType, mimeType, rendererId, ( mimeTypes.map(m => m.mimeType)));
+        this.render(nextElement);
+        this._validateFinalOutputHeight(false);
+        this._relayoutCell();
+    }
+    async _showJupyterExtension() {
+        const viewlet = await this.paneCompositeService.openPaneComposite(VIEWLET_ID, 0 , true);
+        const view = viewlet?.getViewPaneContainer();
+        view?.search(`@id:${JUPYTER_EXTENSION_ID}`);
+    }
+    _generateRendererInfo(renderId) {
+        const renderInfo = this.notebookService.getRendererInfo(renderId);
+        if (renderInfo) {
+            const displayName = renderInfo.displayName !== '' ? renderInfo.displayName : renderInfo.id;
+            return `${displayName} (${renderInfo.extensionId.value})`;
+        }
+        return ( nls.localizeWithPath(
+            'vs/workbench/contrib/notebook/browser/view/cellParts/cellOutput',
+            'unavailableRenderInfo',
+            "renderer not available"
+        ));
+    }
+    _validateFinalOutputHeight(synchronous) {
+        if (this._outputHeightTimer !== null) {
+            clearTimeout(this._outputHeightTimer);
+        }
+        if (synchronous) {
+            this.viewCell.unlockOutputHeight();
+        }
+        else {
+            this._outputHeightTimer = setTimeout(() => {
+                this.viewCell.unlockOutputHeight();
+            }, 1000);
+        }
+    }
+    _relayoutCell() {
+        this.notebookEditor.layoutNotebookCell(this.viewCell, this.viewCell.layoutInfo.totalHeight);
+    }
+    dispose() {
+        if (this._outputHeightTimer) {
+            this.viewCell.unlockOutputHeight();
+            clearTimeout(this._outputHeightTimer);
+        }
+        super.dispose();
+    }
+};
+CellOutputElement = ( __decorate([
+    ( __param(5, INotebookService)),
+    ( __param(6, IQuickInputService)),
+    ( __param(7, IContextKeyService)),
+    ( __param(8, IMenuService)),
+    ( __param(9, IPaneCompositePartService)),
+    ( __param(10, IInstantiationService))
+], CellOutputElement));
+class OutputEntryViewHandler {
+    constructor(model, element) {
+        this.model = model;
+        this.element = element;
+    }
+}
+let CellOutputContainer = class CellOutputContainer extends CellContentPart {
+    get renderedOutputEntries() {
+        return this._outputEntries;
+    }
+    constructor(notebookEditor, viewCell, templateData, options, openerService, _notebookExecutionStateService, instantiationService) {
+        super();
+        this.notebookEditor = notebookEditor;
+        this.viewCell = viewCell;
+        this.templateData = templateData;
+        this.options = options;
+        this.openerService = openerService;
+        this._notebookExecutionStateService = _notebookExecutionStateService;
+        this.instantiationService = instantiationService;
+        this._outputEntries = [];
+        this._outputHeightTimer = null;
+        this._register(viewCell.onDidStartExecution(() => {
+            viewCell.updateOutputMinHeight(viewCell.layoutInfo.outputTotalHeight);
+        }));
+        this._register(viewCell.onDidStopExecution(() => {
+            this._validateFinalOutputHeight(false);
+        }));
+        this._register(viewCell.onDidChangeOutputs(splice => {
+            const executionState = this._notebookExecutionStateService.getCellExecution(viewCell.uri);
+            const context = executionState ? 1  : 2 ;
+            this._updateOutputs(splice, context);
+        }));
+        this._register(viewCell.onDidChangeLayout(() => {
+            this.updateInternalLayoutNow(viewCell);
+        }));
+    }
+    updateInternalLayoutNow(viewCell) {
+        this.templateData.outputContainer.setTop(viewCell.layoutInfo.outputContainerOffset);
+        this.templateData.outputShowMoreContainer.setTop(viewCell.layoutInfo.outputShowMoreContainerOffset);
+        this._outputEntries.forEach(entry => {
+            const index = this.viewCell.outputsViewModels.indexOf(entry.model);
+            if (index >= 0) {
+                const top = this.viewCell.getOutputOffsetInContainer(index);
+                entry.element.updateDOMTop(top);
+            }
+        });
+    }
+    render() {
+        try {
+            this._doRender();
+        }
+        finally {
+            this._relayoutCell();
+        }
+    }
+    _doRender() {
+        if (this.viewCell.outputsViewModels.length > 0) {
+            if (this.viewCell.layoutInfo.outputTotalHeight !== 0) {
+                this.viewCell.updateOutputMinHeight(this.viewCell.layoutInfo.outputTotalHeight);
+            }
+            dom.show(this.templateData.outputContainer.domNode);
+            for (let index = 0; index < Math.min(this.options.limit, this.viewCell.outputsViewModels.length); index++) {
+                const currOutput = this.viewCell.outputsViewModels[index];
+                const entry = this.instantiationService.createInstance(CellOutputElement, this.notebookEditor, this.viewCell, this, this.templateData.outputContainer, currOutput);
+                this._outputEntries.push(( new OutputEntryViewHandler(currOutput, entry)));
+                entry.render(undefined);
+            }
+            if (this.viewCell.outputsViewModels.length > this.options.limit) {
+                dom.show(this.templateData.outputShowMoreContainer.domNode);
+                this.viewCell.updateOutputShowMoreContainerHeight(46);
+            }
+            this._validateFinalOutputHeight(false);
+        }
+        else {
+            dom.hide(this.templateData.outputContainer.domNode);
+        }
+        this.templateData.outputShowMoreContainer.domNode.innerText = '';
+        if (this.viewCell.outputsViewModels.length > this.options.limit) {
+            this.templateData.outputShowMoreContainer.domNode.appendChild(this._generateShowMoreElement(this.templateData.templateDisposables));
+        }
+        else {
+            dom.hide(this.templateData.outputShowMoreContainer.domNode);
+            this.viewCell.updateOutputShowMoreContainerHeight(0);
+        }
+    }
+    viewUpdateShowOutputs(initRendering) {
+        for (let index = 0; index < this._outputEntries.length; index++) {
+            const viewHandler = this._outputEntries[index];
+            const outputEntry = viewHandler.element;
+            if (outputEntry.renderResult) {
+                this.notebookEditor.createOutput(this.viewCell, outputEntry.renderResult, this.viewCell.getOutputOffset(index), false);
+            }
+            else {
+                outputEntry.render(undefined);
+            }
+        }
+        this._relayoutCell();
+    }
+    viewUpdateHideOuputs() {
+        for (let index = 0; index < this._outputEntries.length; index++) {
+            this.notebookEditor.hideInset(this._outputEntries[index].model);
+        }
+    }
+    _validateFinalOutputHeight(synchronous) {
+        if (this._outputHeightTimer !== null) {
+            clearTimeout(this._outputHeightTimer);
+        }
+        const executionState = this._notebookExecutionStateService.getCellExecution(this.viewCell.uri);
+        if (synchronous) {
+            this.viewCell.unlockOutputHeight();
+        }
+        else if (executionState?.state !== NotebookCellExecutionState.Executing) {
+            this._outputHeightTimer = setTimeout(() => {
+                this.viewCell.unlockOutputHeight();
+            }, 200);
+        }
+    }
+    _updateOutputs(splice, context = 2 ) {
+        const previousOutputHeight = this.viewCell.layoutInfo.outputTotalHeight;
+        this.viewCell.updateOutputMinHeight(previousOutputHeight);
+        if (this.viewCell.outputsViewModels.length) {
+            dom.show(this.templateData.outputContainer.domNode);
+        }
+        else {
+            dom.hide(this.templateData.outputContainer.domNode);
+        }
+        this.viewCell.spliceOutputHeights(splice.start, splice.deleteCount, ( splice.newOutputs.map(_ => 0)));
+        this._renderNow(splice, context);
+    }
+    _renderNow(splice, context) {
+        if (splice.start >= this.options.limit) {
+            return;
+        }
+        const firstGroupEntries = this._outputEntries.slice(0, splice.start);
+        const deletedEntries = this._outputEntries.slice(splice.start, splice.start + splice.deleteCount);
+        const secondGroupEntries = this._outputEntries.slice(splice.start + splice.deleteCount);
+        let newlyInserted = this.viewCell.outputsViewModels.slice(splice.start, splice.start + splice.newOutputs.length);
+        if (firstGroupEntries.length + newlyInserted.length + secondGroupEntries.length > this.options.limit) {
+            if (firstGroupEntries.length + newlyInserted.length > this.options.limit) {
+                [...deletedEntries, ...secondGroupEntries].forEach(entry => {
+                    entry.element.detach();
+                    entry.element.dispose();
+                });
+                newlyInserted = newlyInserted.slice(0, this.options.limit - firstGroupEntries.length);
+                const newlyInsertedEntries = ( newlyInserted.map(insert => {
+                    return ( new OutputEntryViewHandler(
+                        insert,
+                        this.instantiationService.createInstance(CellOutputElement, this.notebookEditor, this.viewCell, this, this.templateData.outputContainer, insert)
+                    ));
+                }));
+                this._outputEntries = [...firstGroupEntries, ...newlyInsertedEntries];
+                for (let i = firstGroupEntries.length; i < this._outputEntries.length; i++) {
+                    this._outputEntries[i].element.render(undefined);
+                }
+            }
+            else {
+                const elementsPushedOutOfView = secondGroupEntries.slice(this.options.limit - firstGroupEntries.length - newlyInserted.length);
+                [...deletedEntries, ...elementsPushedOutOfView].forEach(entry => {
+                    entry.element.detach();
+                    entry.element.dispose();
+                });
+                const reRenderRightBoundary = firstGroupEntries.length + newlyInserted.length;
+                const newlyInsertedEntries = ( newlyInserted.map(insert => {
+                    return ( new OutputEntryViewHandler(
+                        insert,
+                        this.instantiationService.createInstance(CellOutputElement, this.notebookEditor, this.viewCell, this, this.templateData.outputContainer, insert)
+                    ));
+                }));
+                this._outputEntries = [...firstGroupEntries, ...newlyInsertedEntries, ...secondGroupEntries.slice(0, this.options.limit - firstGroupEntries.length - newlyInserted.length)];
+                for (let i = firstGroupEntries.length; i < reRenderRightBoundary; i++) {
+                    const previousSibling = i - 1 >= 0 && this._outputEntries[i - 1] && !!(this._outputEntries[i - 1].element.innerContainer?.parentElement) ? this._outputEntries[i - 1].element.innerContainer : undefined;
+                    this._outputEntries[i].element.render(previousSibling);
+                }
+            }
+        }
+        else {
+            deletedEntries.forEach(entry => {
+                entry.element.detach();
+                entry.element.dispose();
+            });
+            const reRenderRightBoundary = firstGroupEntries.length + newlyInserted.length;
+            const newlyInsertedEntries = ( newlyInserted.map(insert => {
+                return ( new OutputEntryViewHandler(
+                    insert,
+                    this.instantiationService.createInstance(CellOutputElement, this.notebookEditor, this.viewCell, this, this.templateData.outputContainer, insert)
+                ));
+            }));
+            let outputsNewlyAvailable = [];
+            if (firstGroupEntries.length + newlyInsertedEntries.length + secondGroupEntries.length < this.viewCell.outputsViewModels.length) {
+                const last = Math.min(this.options.limit, this.viewCell.outputsViewModels.length);
+                outputsNewlyAvailable = ( this.viewCell.outputsViewModels.slice(firstGroupEntries.length + newlyInsertedEntries.length + secondGroupEntries.length, last).map(output => {
+                    return ( new OutputEntryViewHandler(
+                        output,
+                        this.instantiationService.createInstance(CellOutputElement, this.notebookEditor, this.viewCell, this, this.templateData.outputContainer, output)
+                    ));
+                }));
+            }
+            this._outputEntries = [...firstGroupEntries, ...newlyInsertedEntries, ...secondGroupEntries, ...outputsNewlyAvailable];
+            for (let i = firstGroupEntries.length; i < reRenderRightBoundary; i++) {
+                const previousSibling = i - 1 >= 0 && this._outputEntries[i - 1] && !!(this._outputEntries[i - 1].element.innerContainer?.parentElement) ? this._outputEntries[i - 1].element.innerContainer : undefined;
+                this._outputEntries[i].element.render(previousSibling);
+            }
+            for (let i = 0; i < outputsNewlyAvailable.length; i++) {
+                this._outputEntries[firstGroupEntries.length + newlyInserted.length + secondGroupEntries.length + i].element.render(undefined);
+            }
+        }
+        if (this.viewCell.outputsViewModels.length > this.options.limit) {
+            dom.show(this.templateData.outputShowMoreContainer.domNode);
+            if (!this.templateData.outputShowMoreContainer.domNode.hasChildNodes()) {
+                this.templateData.outputShowMoreContainer.domNode.appendChild(this._generateShowMoreElement(this.templateData.templateDisposables));
+            }
+            this.viewCell.updateOutputShowMoreContainerHeight(46);
+        }
+        else {
+            dom.hide(this.templateData.outputShowMoreContainer.domNode);
+        }
+        this._relayoutCell();
+        this._validateFinalOutputHeight(context === 2  && this.viewCell.outputsViewModels.length === 0);
+    }
+    _generateShowMoreElement(disposables) {
+        const md = {
+            value: `There are more than ${this.options.limit} outputs, [show more (open the raw output data in a text editor) ...](command:workbench.action.openLargeOutput)`,
+            isTrusted: true,
+            supportThemeIcons: true
+        };
+        const rendered = renderMarkdown(md, {
+            actionHandler: {
+                callback: (content) => {
+                    if (content === 'command:workbench.action.openLargeOutput') {
+                        this.openerService.open(CellUri.generateCellOutputUri(this.notebookEditor.textModel.uri));
+                    }
+                    return;
+                },
+                disposables
+            }
+        });
+        disposables.add(rendered);
+        rendered.element.classList.add('output-show-more');
+        return rendered.element;
+    }
+    _relayoutCell() {
+        this.notebookEditor.layoutNotebookCell(this.viewCell, this.viewCell.layoutInfo.totalHeight);
+    }
+    dispose() {
+        this.viewCell.updateOutputMinHeight(0);
+        if (this._outputHeightTimer) {
+            clearTimeout(this._outputHeightTimer);
+        }
+        this._outputEntries.forEach(entry => {
+            entry.element.dispose();
+        });
+        super.dispose();
+    }
+};
+CellOutputContainer = ( __decorate([
+    ( __param(4, IOpenerService)),
+    ( __param(5, INotebookExecutionStateService)),
+    ( __param(6, IInstantiationService))
+], CellOutputContainer));
+const JUPYTER_RENDERER_MIMETYPES = [
+    'application/geo+json',
+    'application/vdom.v1+json',
+    'application/vnd.dataresource+json',
+    'application/vnd.plotly.v1+json',
+    'application/vnd.vega.v2+json',
+    'application/vnd.vega.v3+json',
+    'application/vnd.vega.v4+json',
+    'application/vnd.vega.v5+json',
+    'application/vnd.vegalite.v1+json',
+    'application/vnd.vegalite.v2+json',
+    'application/vnd.vegalite.v3+json',
+    'application/vnd.vegalite.v4+json',
+    'application/x-nteract-model-debug+json',
+    'image/svg+xml',
+    'text/latex',
+    'text/vnd.plotly.v1+html',
+    'application/vnd.jupyter.widget-view+json',
+    'application/vnd.code.notebook.error'
+];
+export { CellOutputContainer };