jupyter-specta 0.1.2 → 0.1.4

package/lib/app.js

@@ -8,7 +8,7 @@ export class SpectaApp extends JupyterFrontEnd {
         /**
          * The name of the application.
          */
-        this.name = 'Voila';
+        this.name = 'specta';
         /**
          * A namespace/prefix plugins may use to denote their provenance.
          */

package/lib/components/cellSkeleton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare function SkeletonBarChart({ bars }: {
+    bars?: number;
+}): React.JSX.Element;
+export declare function SkeletonLineChart(): React.JSX.Element;
+export declare function RandomSkeleton(): React.JSX.Element;

package/lib/components/cellSkeleton.js

@@ -0,0 +1,19 @@
+import React from 'react';
+export function SkeletonBarChart({ bars = 5 }) {
+    return (React.createElement("div", { className: "skeleton-bar-chart vertical" },
+        React.createElement("div", { className: "skeleton-label" }, "Executing cell"),
+        Array.from({ length: bars }).map((_, i) => (React.createElement("div", { key: i, className: "bar vertical-bar", style: { animationDelay: `${i * 0.4}s` } })))));
+}
+export function SkeletonLineChart() {
+    return (React.createElement("div", { className: "skeleton-line-chart" },
+        React.createElement("div", { className: "skeleton-label" }, "Executing cell"),
+        React.createElement("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none" },
+            React.createElement("polyline", { points: "0,30 20,20 40,25 60,15 80,10 100,20" }))));
+}
+export function RandomSkeleton() {
+    const random = Math.random();
+    if (random < 0.5) {
+        return React.createElement(SkeletonLineChart, null);
+    }
+    return React.createElement(SkeletonBarChart, null);
+}

package/lib/components/divider.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Divider: () => React.JSX.Element;

package/lib/components/divider.js

@@ -0,0 +1,4 @@
+import React from 'react';
+export const Divider = () => {
+    return React.createElement("div", { className: "specta-divider" });
+};

package/lib/components/icon/gear.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GearIcon: ({ ...props }: React.SVGProps<SVGSVGElement>) => React.JSX.Element;

package/lib/components/icon/gear.js

@@ -0,0 +1,17 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+export const GearIcon = (_a) => {
+    var props = __rest(_a, []);
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px" }, props),
+        React.createElement("path", { d: "m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" })));
+};

package/lib/components/iconButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const IconButton: React.ForwardRefExoticComponent<{
+    icon: JSX.Element;
+    onClick: () => void;
+    title?: string | undefined;
+    disabled?: boolean | undefined;
+    className?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

package/lib/components/iconButton.js

@@ -0,0 +1,4 @@
+import React, { forwardRef } from 'react';
+export const IconButton = forwardRef(({ icon, onClick, title, disabled, className }, ref) => {
+    return (React.createElement("button", { ref: ref, className: `jp-Button specta-icon-button ${className !== null && className !== void 0 ? className : ''}`, title: title, disabled: disabled, onClick: onClick }, icon));
+});

package/lib/create_notebook_panel.d.ts

@@ -1,7 +1,13 @@
+import { ISessionContext } from '@jupyterlab/apputils';
 import { IEditorServices } from '@jupyterlab/codeeditor';
-import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { Context, DocumentRegistry } from '@jupyterlab/docregistry';
 import { INotebookModel, NotebookPanel } from '@jupyterlab/notebook';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
+import { ServiceManager } from '@jupyterlab/services';
+export declare function createNotebookContext(options: {
+    manager: ServiceManager.IManager;
+    kernelPreference: ISessionContext.IKernelPreference;
+}): Promise<Context<INotebookModel>>;
 export declare function createNotebookPanel(options: {
     context: DocumentRegistry.IContext<INotebookModel>;
     rendermime: IRenderMimeRegistry;

package/lib/create_notebook_panel.js

@@ -1,4 +1,40 @@
-import { Notebook, NotebookPanel } from '@jupyterlab/notebook';
+import { Context } from '@jupyterlab/docregistry';
+import { Notebook, NotebookModelFactory, NotebookPanel } from '@jupyterlab/notebook';
+import { UUID } from '@lumino/coreutils';
+class CustomContext extends Context {
+    /**
+     * Save the document contents to disk.
+     */
+    async save() {
+        await this.ready;
+        return;
+    }
+    async saveAs() {
+        await this.ready;
+        return;
+    }
+    async revert() {
+        await this.ready;
+        return;
+    }
+}
+export async function createNotebookContext(options) {
+    const factory = new NotebookModelFactory({
+        disableDocumentWideUndoRedo: false
+    });
+    const { manager, kernelPreference } = options;
+    const path = UUID.uuid4() + '.ipynb';
+    await manager.ready;
+    await manager.kernelspecs.ready;
+    const context = new CustomContext({
+        manager,
+        factory,
+        path,
+        kernelPreference: kernelPreference
+    });
+    await context.sessionContext.initialize();
+    return context;
+}
 export function createNotebookPanel(options) {
     const { context, rendermime, editorServices } = options;
     const editorFactory = editorServices.factoryService.newInlineEditor;

package/lib/document/factory.d.ts

@@ -1,9 +1,13 @@
+import { IThemeManager } from '@jupyterlab/apputils';
 import { ABCWidgetFactory, DocumentRegistry } from '@jupyterlab/docregistry';
-import { NotebookSpectaDocWidget } from './widget';
 import { INotebookModel } from '@jupyterlab/notebook';
 import { SpectaWidgetFactory } from '../specta_widget_factory';
+import { ISpectaLayoutRegistry } from '../token';
+import { NotebookSpectaDocWidget } from './widget';
 interface IOptions extends DocumentRegistry.IWidgetFactoryOptions {
     spectaWidgetFactory: SpectaWidgetFactory;
+    layoutRegistry?: ISpectaLayoutRegistry;
+    themeManager?: IThemeManager;
 }
 export declare class NotebookGridWidgetFactory extends ABCWidgetFactory<NotebookSpectaDocWidget, INotebookModel> {
     constructor(options: IOptions);

package/lib/document/factory.js

@@ -1,20 +1,30 @@
 import { ABCWidgetFactory } from '@jupyterlab/docregistry';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { Panel } from '@lumino/widgets';
+import * as React from 'react';
+import { isSpectaApp, readSpectaConfig } from '../tool';
+import { TopbarElement } from '../topbar/widget';
 import { NotebookSpectaDocWidget } from './widget';
-import { Widget } from '@lumino/widgets';
 export class NotebookGridWidgetFactory extends ABCWidgetFactory {
     constructor(options) {
         super(options);
         this._spectaWidgetFactory = options.spectaWidgetFactory;
     }
     createNewWidget(context) {
-        const content = new Widget();
+        const content = new Panel();
         content.addClass('jp-specta-notebook-panel');
+        const spectaConfig = readSpectaConfig(context.model.metadata);
+        if (!isSpectaApp() && !spectaConfig.hideTopbar) {
+            // Not a specta app, add topbar to document widget
+            const topbar = ReactWidget.create(React.createElement(TopbarElement, null));
+            content.addWidget(topbar);
+        }
         context.ready.then(async () => {
             const spectaWidget = await this._spectaWidgetFactory.createNew({
                 context
             });
             if (spectaWidget) {
-                Widget.attach(spectaWidget, content.node);
+                content.addWidget(spectaWidget);
             }
         });
         const widget = new NotebookSpectaDocWidget({

package/lib/extension_plugins.js

@@ -1,5 +1,14 @@
 import { spectaDocument, spectaOpener } from './document/plugin';
-import { spectaLayoutRegistry } from './layout/plugin';
+import { spectaLayoutRegistry } from './layout';
+import { appMeta, cellMeta } from './metadata';
+import { topbarPlugin } from './topbar';
 export * from './tool';
 export * from './token';
-export default [spectaDocument, spectaOpener, spectaLayoutRegistry];
+export default [
+    spectaDocument,
+    spectaOpener,
+    spectaLayoutRegistry,
+    topbarPlugin,
+    appMeta,
+    cellMeta
+];

package/lib/layout/article.d.ts

@@ -0,0 +1,12 @@
+import { Panel } from '@lumino/widgets';
+import { SpectaCellOutput } from '../specta_cell_output';
+import * as nbformat from '@jupyterlab/nbformat';
+import { ISpectaLayout } from '../token';
+export declare class ArticleLayout implements ISpectaLayout {
+    render(options: {
+        host: Panel;
+        items: SpectaCellOutput[];
+        notebook: nbformat.INotebookContent;
+        readyCallback: () => Promise<void>;
+    }): Promise<void>;
+}

package/lib/layout/article.js

@@ -0,0 +1,35 @@
+import { Panel } from '@lumino/widgets';
+class HostPanel extends Panel {
+    constructor() {
+        super();
+        this.addClass('specta-article-host-widget');
+        this._outputs = new Panel();
+        this._outputs.addClass('specta-article-outputs-panel');
+        this.addWidget(this._outputs);
+    }
+    addOutput(widget) {
+        this._outputs.addWidget(widget);
+    }
+}
+export class ArticleLayout {
+    async render(options) {
+        const { host, items, readyCallback } = options;
+        const hostPanel = new HostPanel();
+        for (const el of items) {
+            const cellModel = el.info.cellModel;
+            const info = el.info;
+            if ((cellModel === null || cellModel === void 0 ? void 0 : cellModel.cell_type) === 'code') {
+                if (!info.hidden) {
+                    hostPanel.addOutput(el);
+                }
+            }
+            else {
+                if (!info.hidden) {
+                    hostPanel.addOutput(el);
+                }
+            }
+        }
+        host.addWidget(hostPanel);
+        await readyCallback();
+    }
+}

package/lib/layout/default.js

@@ -2,14 +2,11 @@ export class DefaultLayout {
     async render(options) {
         const { host, items, readyCallback } = options;
         for (const el of items) {
-            const outputNode = el.cellOutput.node;
             const cellModel = el.info.cellModel;
             const info = el.info;
             if ((cellModel === null || cellModel === void 0 ? void 0 : cellModel.cell_type) === 'code') {
-                if (outputNode.childNodes.length > 0) {
-                    if (!info.hidden) {
-                        host.addWidget(el);
-                    }
+                if (!info.hidden) {
+                    host.addWidget(el);
                 }
             }
             else {

package/lib/layout/{plugin.js → index.js}

@@ -1,11 +1,16 @@
 import { SpectaLayoutRegistry } from './layout_registry';
 import { ISpectaLayoutRegistry } from '../token';
+import { readSpectaConfig } from '../tool';
 export const spectaLayoutRegistry = {
     id: 'specta:layout-registry',
     autoStart: true,
     provides: ISpectaLayoutRegistry,
     activate: (app) => {
+        var _a;
         const layoutRegistry = new SpectaLayoutRegistry();
+        const spectaConfig = readSpectaConfig();
+        const defaultLayout = (_a = spectaConfig.defaultLayout) !== null && _a !== void 0 ? _a : 'default';
+        layoutRegistry.setSelectedLayout(defaultLayout);
         return layoutRegistry;
     }
 };

package/lib/layout/layout_registry.d.ts

@@ -12,6 +12,7 @@ export declare class SpectaLayoutRegistry implements ISpectaLayoutRegistry {
         layout: ISpectaLayout;
     }>;
     get(name: string): ISpectaLayout | undefined;
+    getDefaultLayout(): ISpectaLayout;
     setSelectedLayout(name: string): void;
     register(name: string, layout: ISpectaLayout): void;
     allLayouts(): string[];

package/lib/layout/layout_registry.js

@@ -1,5 +1,6 @@
 import { Signal } from '@lumino/signaling';
 import { DefaultLayout } from './default';
+import { ArticleLayout } from './article';
 export class SpectaLayoutRegistry {
     constructor() {
         this._registry = new Map();
@@ -8,6 +9,7 @@ export class SpectaLayoutRegistry {
         const defaultLayout = new DefaultLayout();
         this._registry = new Map();
         this._registry.set('default', defaultLayout);
+        this._registry.set('article', new ArticleLayout());
         this._selectedLayout = {
             name: 'default',
             layout: defaultLayout
@@ -25,11 +27,15 @@ export class SpectaLayoutRegistry {
     get(name) {
         return this._registry.get(name);
     }
+    getDefaultLayout() {
+        return this._registry.get('default');
+    }
     setSelectedLayout(name) {
         if (!this._registry.has(name)) {
             throw new Error(`Layout with name ${name} does not exist`);
         }
         this._selectedLayout = { name, layout: this._registry.get(name) };
+        this._selectedLayoutChanged.emit(this._selectedLayout);
     }
     register(name, layout) {
         if (this._registry.has(name)) {

package/lib/metadata/index.d.ts

@@ -0,0 +1,3 @@
+import { JupyterFrontEndPlugin } from '@jupyterlab/application';
+export declare const cellMeta: JupyterFrontEndPlugin<void>;
+export declare const appMeta: JupyterFrontEndPlugin<void>;

package/lib/metadata/index.js

@@ -0,0 +1,14 @@
+export const cellMeta = {
+    id: 'jupyter-specta:cell-meta',
+    autoStart: true,
+    activate: (app) => {
+        // no-op
+    }
+};
+export const appMeta = {
+    id: 'jupyter-specta:app-meta',
+    autoStart: true,
+    activate: (app) => {
+        // no-op
+    }
+};

package/lib/shell.js

@@ -30,7 +30,6 @@ export class SpectaShell extends Widget {
         topHandler.panel.id = 'specta-top-panel';
         topHandler.panel.node.setAttribute('role', 'banner');
         BoxLayout.setStretch(topHandler.panel, 0);
-        topHandler.panel.hide();
         rootLayout.addWidget(topHandler.panel);
         const hboxPanel = (this._mainPanel = new BoxPanel());
         hboxPanel.id = 'jp-main-content-panel';

package/lib/specta_cell_output.d.ts

@@ -1,14 +1,23 @@
-import { Panel, Widget } from '@lumino/widgets';
 import * as nbformat from '@jupyterlab/nbformat';
+import { Panel, Widget } from '@lumino/widgets';
+import { ISpectaCellConfig } from './token';
 export interface ICellInfo {
     hidden?: boolean;
     cellModel?: nbformat.ICell;
 }
 export declare class SpectaCellOutput extends Panel {
-    constructor(cellIdentity: string, cell: Widget, info: ICellInfo);
+    constructor({ cellIdentity, cell, sourceCell, info, cellConfig }: {
+        cellIdentity: string;
+        cell: Widget;
+        sourceCell?: Widget;
+        info: ICellInfo;
+        cellConfig: Required<ISpectaCellConfig>;
+    });
     readonly cellIdentity: string;
     get cellOutput(): Widget;
     get info(): ICellInfo;
+    removePlaceholder(): void;
     private _info;
     private _cellOutput;
+    private _placeholder?;
 }

package/lib/specta_cell_output.js

@@ -1,19 +1,34 @@
+import { ReactWidget } from '@jupyterlab/ui-components';
 import { Panel } from '@lumino/widgets';
+import React from 'react';
+import { RandomSkeleton } from './components/cellSkeleton';
 export class SpectaCellOutput extends Panel {
-    constructor(cellIdentity, cell, info) {
+    constructor({ cellIdentity, cell, sourceCell, info, cellConfig }) {
+        var _a;
         super();
         this._info = {};
+        this._placeholder = undefined;
         this.removeClass('lm-Widget');
         this.removeClass('p-Widget');
         this.addClass('specta-cell-output');
         const content = new Panel();
         content.addClass('specta-cell-content');
         cell.addClass('specta-item-widget');
+        if (sourceCell) {
+            content.addWidget(sourceCell);
+        }
         content.addWidget(cell);
         this.addWidget(content);
         this._cellOutput = cell;
         this.cellIdentity = cellIdentity;
         this._info = info !== null && info !== void 0 ? info : {};
+        if (((_a = info.cellModel) === null || _a === void 0 ? void 0 : _a.cell_type) === 'code') {
+            if (cellConfig.showOutput) {
+                this._placeholder = ReactWidget.create(React.createElement(RandomSkeleton, null));
+                this._placeholder.addClass('specta-cell-placeholder');
+                this.addWidget(this._placeholder);
+            }
+        }
     }
     get cellOutput() {
         return this._cellOutput;
@@ -21,4 +36,10 @@ export class SpectaCellOutput extends Panel {
     get info() {
         return this._info;
     }
+    removePlaceholder() {
+        var _a;
+        if (this._placeholder) {
+            (_a = this._placeholder) === null || _a === void 0 ? void 0 : _a.dispose();
+        }
+    }
 }

package/lib/specta_model.d.ts

@@ -2,7 +2,6 @@ import { ICellModel } from '@jupyterlab/cells';
 import { IEditorMimeTypeService, IEditorServices } from '@jupyterlab/codeeditor';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { CellList, INotebookModel, INotebookTracker, NotebookPanel, StaticNotebook } from '@jupyterlab/notebook';
-import { SimplifiedOutputArea } from '@jupyterlab/outputarea';
 import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { ServiceManager } from '@jupyterlab/services';
 import { IExecuteReplyMsg } from '@jupyterlab/services/lib/kernel/messages';
@@ -18,14 +17,17 @@ export declare class AppModel {
     dispose(): void;
     get rendermime(): IRenderMimeRegistry;
     get cells(): CellList | undefined;
-    get context(): DocumentRegistry.IContext<INotebookModel>;
+    get context(): DocumentRegistry.IContext<INotebookModel> | undefined;
     get panel(): NotebookPanel | undefined;
     initialize(): Promise<void>;
     createCell(cellModel: ICellModel): SpectaCellOutput;
-    executeCell(cell: ICellModel, output: SimplifiedOutputArea): Promise<IExecuteReplyMsg | undefined>;
+    executeCell(cell: ICellModel, outputWrapper: SpectaCellOutput): Promise<IExecuteReplyMsg | undefined>;
     private _notebookPanel?;
-    private _context;
+    private _context?;
+    private _notebookModelJson;
     private _isDisposed;
+    private _manager;
+    private _kernelPreference;
 }
 export declare namespace AppModel {
     interface IOptions {

package/lib/specta_model.js

@@ -1,13 +1,24 @@
-import { MarkdownCell, RawCell } from '@jupyterlab/cells';
+import { CodeCell, MarkdownCell, RawCell } from '@jupyterlab/cells';
 import { OutputAreaModel, SimplifiedOutputArea } from '@jupyterlab/outputarea';
-import { createNotebookPanel } from './create_notebook_panel';
+import { createNotebookContext, createNotebookPanel } from './create_notebook_panel';
 import { SpectaCellOutput } from './specta_cell_output';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { readCellConfig } from './tool';
 export const VIEW = 'grid_default';
 export class AppModel {
     constructor(options) {
         this.options = options;
         this._isDisposed = false;
-        this._context = options.context;
+        this._notebookModelJson = options.context.model.toJSON();
+        this._kernelPreference = {
+            shouldStart: true,
+            canStart: true,
+            shutdownOnDispose: true,
+            name: options.context.model.defaultKernelName,
+            autoStartDefault: true,
+            language: options.context.model.defaultKernelLanguage
+        };
+        this._manager = options.manager;
     }
     /**
      * Whether the handler is disposed.
@@ -39,13 +50,40 @@ export class AppModel {
     }
     async initialize() {
         var _a;
-        await ((_a = this._context) === null || _a === void 0 ? void 0 : _a.sessionContext.ready);
-        this._notebookPanel = createNotebookPanel({
-            context: this._context,
-            rendermime: this.options.rendermime,
-            editorServices: this.options.editorServices
+        const pd = new PromiseDelegate();
+        this._context = await createNotebookContext({
+            manager: this._manager,
+            kernelPreference: this._kernelPreference
         });
-        this.options.tracker.widgetAdded.emit(this._notebookPanel);
+        this._context.model.fromJSON(this._notebookModelJson);
+        const connectKernel = () => {
+            pd.resolve();
+            this._notebookPanel = createNotebookPanel({
+                context: this._context,
+                rendermime: this.options.rendermime,
+                editorServices: this.options.editorServices
+            });
+            this.options.tracker.widgetAdded.emit(this._notebookPanel);
+        };
+        const kernel = (_a = this._context.sessionContext.session) === null || _a === void 0 ? void 0 : _a.kernel;
+        if (kernel) {
+            const status = kernel.status;
+            if (status !== 'unknown') {
+                // Connected to an existing kernel.
+                connectKernel();
+                return;
+            }
+        }
+        this._context.sessionContext.connectionStatusChanged.connect((_, status) => {
+            var _a;
+            if (status === 'connected') {
+                const kernel = (_a = this._context.sessionContext.session) === null || _a === void 0 ? void 0 : _a.kernel;
+                if (kernel) {
+                    connectKernel();
+                }
+            }
+        }, this);
+        return pd.promise;
     }
     createCell(cellModel) {
         let item;
@@ -53,14 +91,37 @@ export class AppModel {
         const info = {
             cellModel: cellModelJson
         };
+        const cellConfig = readCellConfig(cellModelJson);
         switch (cellModel.type) {
             case 'code': {
+                let sourceCell;
+                if (cellConfig.showSource) {
+                    sourceCell = new CodeCell({
+                        model: cellModel,
+                        rendermime: this.options.rendermime,
+                        contentFactory: this.options.contentFactory,
+                        editorConfig: {
+                            lineNumbers: false,
+                            lineWrap: false,
+                            tabFocusable: false,
+                            editable: false
+                        }
+                    });
+                    sourceCell.syncEditable = false;
+                    sourceCell.readOnly = true;
+                }
                 const outputareamodel = new OutputAreaModel({ trusted: true });
                 const out = new SimplifiedOutputArea({
                     model: outputareamodel,
                     rendermime: this.options.rendermime
                 });
-                item = new SpectaCellOutput(cellModel.id, out, info);
+                item = new SpectaCellOutput({
+                    cellIdentity: cellModel.id,
+                    cell: out,
+                    sourceCell,
+                    cellConfig,
+                    info
+                });
                 break;
             }
             case 'markdown': {
@@ -70,11 +131,17 @@ export class AppModel {
                     contentFactory: this.options.contentFactory,
                     editorConfig: this.options.editorConfig.markdown
                 });
+                markdownCell.initializeState();
                 markdownCell.inputHidden = false;
                 markdownCell.rendered = true;
                 Private.removeElements(markdownCell.node, 'jp-Collapser');
                 Private.removeElements(markdownCell.node, 'jp-InputPrompt');
-                item = new SpectaCellOutput(cellModel.id, markdownCell, info);
+                item = new SpectaCellOutput({
+                    cellIdentity: cellModel.id,
+                    cell: markdownCell,
+                    info,
+                    cellConfig
+                });
                 break;
             }
             default: {
@@ -86,18 +153,27 @@ export class AppModel {
                 rawCell.inputHidden = false;
                 Private.removeElements(rawCell.node, 'jp-Collapser');
                 Private.removeElements(rawCell.node, 'jp-InputPrompt');
-                item = new SpectaCellOutput(cellModel.id, rawCell, info);
+                item = new SpectaCellOutput({
+                    cellIdentity: cellModel.id,
+                    cell: rawCell,
+                    info,
+                    cellConfig
+                });
                 break;
             }
         }
         return item;
     }
-    async executeCell(cell, output) {
+    async executeCell(cell, outputWrapper) {
         if (cell.type !== 'code' || !this._context) {
             return;
         }
+        const output = outputWrapper.cellOutput;
         const source = cell.sharedModel.source;
         const rep = await SimplifiedOutputArea.execute(source, output, this._context.sessionContext);
+        output.future.done.then(() => {
+            outputWrapper.removePlaceholder();
+        });
         return rep;
     }
 }