jupyter-specta 0.1.1 → 0.1.3

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/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,29 @@
 import { ABCWidgetFactory } from '@jupyterlab/docregistry';
+import { ReactWidget } from '@jupyterlab/ui-components';
+import { Panel } from '@lumino/widgets';
+import * as React from 'react';
+import { isSpectaApp } 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');
+        if (!isSpectaApp()) {
+            // 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/document/plugin.js

@@ -6,9 +6,12 @@ import { IDocumentManager } from '@jupyterlab/docmanager';
 import { createFileBrowser, hideAppLoadingIndicator, isSpectaApp, registerDocumentFactory } from '../tool';
 import { ISpectaDocTracker, ISpectaLayoutRegistry } from '../token';
 import { IKernelSpecManager } from '@jupyterlab/services';
+import { PageConfig } from '@jupyterlab/coreutils';
 const activate = (app, rendermime, tracker, editorServices, contentFactory, spectaLayoutRegistry) => {
+    var _a;
     const namespace = 'specta';
     const spectaTracker = new WidgetTracker({ namespace });
+    const spectaConfig = JSON.parse((_a = PageConfig.getOption('spectaConfig')) !== null && _a !== void 0 ? _a : '{}');
     registerDocumentFactory({
         factoryName: 'specta',
         app,
@@ -17,7 +20,8 @@ const activate = (app, rendermime, tracker, editorServices, contentFactory, spec
         editorServices,
         contentFactory,
         spectaTracker,
-        spectaLayoutRegistry
+        spectaLayoutRegistry,
+        spectaConfig
     });
     return spectaTracker;
 };

package/lib/extension_plugins.js

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

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/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/layout/plugin.js

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

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,21 @@
-import { Panel, Widget } from '@lumino/widgets';
 import * as nbformat from '@jupyterlab/nbformat';
+import { Panel, Widget } from '@lumino/widgets';
 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 }: {
+        cellIdentity: string;
+        cell: Widget;
+        sourceCell?: Widget;
+        info: ICellInfo;
+    });
     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,32 @@
+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 }) {
+        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') {
+            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 +34,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';
@@ -22,7 +21,7 @@ export declare class AppModel {
     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 _isDisposed;

package/lib/specta_model.js

@@ -1,7 +1,9 @@
-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 { SpectaCellOutput } from './specta_cell_output';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { SPECTA_CELL_VISIBLE_TAG } from './tool';
 export const VIEW = 'grid_default';
 export class AppModel {
     constructor(options) {
@@ -38,16 +40,40 @@ export class AppModel {
         return this._notebookPanel;
     }
     async initialize() {
-        var _a;
+        var _a, _b;
+        const pd = new PromiseDelegate();
         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
-        });
-        this.options.tracker.widgetAdded.emit(this._notebookPanel);
+        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 = (_b = this._context.sessionContext.session) === null || _b === void 0 ? void 0 : _b.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) {
+        var _a, _b;
         let item;
         const cellModelJson = cellModel.toJSON();
         const info = {
@@ -55,12 +81,35 @@ export class AppModel {
         };
         switch (cellModel.type) {
             case 'code': {
+                cellModel.setMetadata('editable', false);
+                const codeCell = new CodeCell({
+                    model: cellModel,
+                    rendermime: this.options.rendermime,
+                    contentFactory: this.options.contentFactory,
+                    editorConfig: {
+                        lineNumbers: false,
+                        lineWrap: false,
+                        tabFocusable: false,
+                        editable: false
+                    }
+                });
+                codeCell.loadEditableState();
                 const outputareamodel = new OutputAreaModel({ trusted: true });
                 const out = new SimplifiedOutputArea({
                     model: outputareamodel,
                     rendermime: this.options.rendermime
                 });
-                item = new SpectaCellOutput(cellModel.id, out, info);
+                const tags = ((_b = (_a = cellModel === null || cellModel === void 0 ? void 0 : cellModel.metadata) === null || _a === void 0 ? void 0 : _a.tags) !== null && _b !== void 0 ? _b : []);
+                let sourceCell;
+                if (tags.includes(SPECTA_CELL_VISIBLE_TAG)) {
+                    sourceCell = codeCell;
+                }
+                item = new SpectaCellOutput({
+                    cellIdentity: cellModel.id,
+                    cell: out,
+                    sourceCell,
+                    info
+                });
                 break;
             }
             case 'markdown': {
@@ -70,11 +119,16 @@ 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
+                });
                 break;
             }
             default: {
@@ -86,18 +140,26 @@ 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
+                });
                 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;
     }
 }

package/lib/specta_widget.d.ts

@@ -1,7 +1,7 @@
 import { Message } from '@lumino/messaging';
 import { Panel } from '@lumino/widgets';
 import { AppModel } from './specta_model';
-import { ISpectaLayoutRegistry } from './token';
+import { ISpectaAppConfig, ISpectaLayoutRegistry } from './token';
 export declare class AppWidget extends Panel {
     constructor(options: AppWidget.IOptions);
     /**
@@ -13,11 +13,14 @@ export declare class AppWidget extends Panel {
     dispose(): void;
     render(): Promise<void>;
     protected onCloseRequest(msg: Message): void;
+    private _onSelectedLayoutChanged;
     private _model;
     private _ready;
     private _host;
     private _layoutRegistry;
     private _loaderHost?;
+    private _outputs;
+    private _spectaAppConfig;
 }
 export declare namespace AppWidget {
     interface IOptions {
@@ -25,5 +28,6 @@ export declare namespace AppWidget {
         label: string;
         model: AppModel;
         layoutRegistry: ISpectaLayoutRegistry;
+        spectaConfig: ISpectaAppConfig;
     }
 }

package/lib/specta_widget.js

@@ -5,12 +5,13 @@ export class AppWidget extends Panel {
     constructor(options) {
         super();
         this._ready = new PromiseDelegate();
+        this._outputs = [];
         this.node.id = options.id;
         this.title.label = options.label;
         this.title.closable = true;
         this._model = options.model;
+        this._spectaAppConfig = options.spectaConfig;
         this._layoutRegistry = options.layoutRegistry;
-        this.node.style.padding = '5px';
         this._host = new Panel();
         this._host.addClass('specta-output-host');
         this.addWidget(this._host);
@@ -24,6 +25,7 @@ export class AppWidget extends Panel {
                 .catch(console.error)
                 .then(() => window.dispatchEvent(new Event('resize')));
         });
+        this._layoutRegistry.selectedLayoutChanged.connect(this._onSelectedLayoutChanged, this);
     }
     /**
      * A promise that is fulfilled when the model is ready.
@@ -54,17 +56,17 @@ export class AppWidget extends Panel {
         super.dispose();
     }
     async render() {
-        var _a;
+        var _a, _b, _c, _d;
         const cellList = (_a = this._model.cells) !== null && _a !== void 0 ? _a : [];
-        const outputs = [];
+        const layout = (_c = (_b = this._spectaAppConfig) === null || _b === void 0 ? void 0 : _b.layout) !== null && _c !== void 0 ? _c : 'default';
         for (const cell of cellList) {
             const src = cell.sharedModel.source;
             if (src.length === 0) {
                 continue;
             }
             const el = this._model.createCell(cell);
-            await this._model.executeCell(cell, el.cellOutput);
-            outputs.push(el);
+            this._model.executeCell(cell, el);
+            this._outputs.push(el);
         }
         const readyCallback = async () => {
             if (this._loaderHost) {
@@ -78,9 +80,10 @@ export class AppWidget extends Panel {
                 hideAppLoadingIndicator();
             }
         };
-        await this._layoutRegistry.selectedLayout.layout.render({
+        const spectaLayout = (_d = this._layoutRegistry.get(layout)) !== null && _d !== void 0 ? _d : this._layoutRegistry.getDefaultLayout();
+        await spectaLayout.render({
             host: this._host,
-            items: outputs,
+            items: this._outputs,
             notebook: this._model.context.model.toJSON(),
             readyCallback
         });
@@ -89,4 +92,17 @@ export class AppWidget extends Panel {
         this._model.dispose();
         super.onCloseRequest(msg);
     }
+    _onSelectedLayoutChanged(sender, args) {
+        const currentEls = [...this._host.widgets];
+        currentEls.forEach(el => {
+            var _a;
+            (_a = this._host.layout) === null || _a === void 0 ? void 0 : _a.removeWidget(el);
+        });
+        args.layout.render({
+            host: this._host,
+            items: this._outputs,
+            notebook: this._model.context.model.toJSON(),
+            readyCallback: async () => { }
+        });
+    }
 }