@jupyter-notebook/application 7.0.0-alpha.1 → 7.0.0-alpha.10

package/lib/app.d.ts

@@ -24,6 +24,10 @@ export declare class NotebookApp extends JupyterFrontEnd<INotebookShell> {
      * The application busy and dirty status signals and flags.
      */
     readonly status: LabStatus;
+    /**
+     * Promise that resolves when the state is first restored
+     */
+    readonly restored: Promise<void>;
     /**
      * The version of the application.
      */

package/lib/app.js

@@ -1,6 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 import { JupyterFrontEnd } from '@jupyterlab/application';
+import { Base64ModelFactory } from '@jupyterlab/docregistry';
 import { createRendermimePlugins } from '@jupyterlab/application/lib/mimerenderers';
 import { LabStatus } from '@jupyterlab/application/lib/status';
 import { PageConfig } from '@jupyterlab/coreutils';
@@ -17,7 +18,7 @@ export class NotebookApp extends JupyterFrontEnd {
      */
     constructor(options = { shell: new NotebookShell() }) {
         var _a, _b;
-        super(Object.assign(Object.assign({}, options), { shell: (_a = options.shell) !== null && _a !== void 0 ? _a : new NotebookShell() }));
+        super({ ...options, shell: (_a = options.shell) !== null && _a !== void 0 ? _a : new NotebookShell() });
         /**
          * The name of the application.
          */
@@ -37,11 +38,14 @@ export class NotebookApp extends JupyterFrontEnd {
         this._formatter = new Throttler(() => {
             Private.setFormat(this);
         }, 250);
+        // Add initial model factory.
+        this.docRegistry.addModelFactory(new Base64ModelFactory());
         if (options.mimeExtensions) {
             for (const plugin of createRendermimePlugins(options.mimeExtensions)) {
                 this.registerPlugin(plugin);
             }
         }
+        this.restored = this.shell.restored;
         this.restored.then(() => this._formatter.invoke());
     }
     /**

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 export * from './app';
 export * from './shell';
+export * from './panelhandler';

package/lib/index.js

@@ -2,3 +2,4 @@
 // Distributed under the terms of the Modified BSD License.
 export * from './app';
 export * from './shell';
+export * from './panelhandler';

package/lib/panelhandler.d.ts

@@ -0,0 +1,212 @@
+import { ICommandPalette } from '@jupyterlab/apputils';
+import { IDisposable } from '@lumino/disposable';
+import { ISignal } from '@lumino/signaling';
+import { Panel, Widget } from '@lumino/widgets';
+/**
+ * A class which manages a panel and sorts its widgets by rank.
+ */
+export declare class PanelHandler {
+    constructor();
+    /**
+     * Get the panel managed by the handler.
+     */
+    get panel(): Panel;
+    /**
+     * Add a widget to the panel.
+     *
+     * If the widget is already added, it will be moved.
+     */
+    addWidget(widget: Widget, rank: number): void;
+    /**
+     * A message hook for child add/remove messages on the main area dock panel.
+     */
+    private _panelChildHook;
+    protected _items: Private.IRankItem[];
+    protected _panel: Panel;
+}
+/**
+ * A class which manages a side panel that can show at most one widget at a time.
+ */
+export declare class SidePanelHandler extends PanelHandler {
+    /**
+     * Construct a new side panel handler.
+     */
+    constructor(area: SidePanel.Area);
+    /**
+     * Get the current widget in the sidebar panel.
+     */
+    get currentWidget(): Widget | null;
+    /**
+     * Get the area of the side panel
+     */
+    get area(): SidePanel.Area;
+    /**
+     * Whether the panel is visible
+     */
+    get isVisible(): boolean;
+    /**
+     * Get the stacked panel managed by the handler
+     */
+    get panel(): Panel;
+    /**
+     * Get the widgets list.
+     */
+    get widgets(): Readonly<Widget[]>;
+    /**
+     * Signal fired when a widget is added to the panel
+     */
+    get widgetAdded(): ISignal<SidePanelHandler, Widget>;
+    /**
+     * Signal fired when a widget is removed from the panel
+     */
+    get widgetRemoved(): ISignal<SidePanelHandler, Widget>;
+    /**
+     * Expand the sidebar.
+     *
+     * #### Notes
+     * This will open the most recently used widget, or the first widget
+     * if there is no most recently used.
+     */
+    expand(id?: string): void;
+    /**
+     * Activate a widget residing in the stacked panel by ID.
+     *
+     * @param id - The widget's unique ID.
+     */
+    activate(id: string): void;
+    /**
+     * Test whether the sidebar has the given widget by id.
+     */
+    has(id: string): boolean;
+    /**
+     * Collapse the sidebar so no items are expanded.
+     */
+    collapse(): void;
+    /**
+     * Add a widget and its title to the stacked panel.
+     *
+     * If the widget is already added, it will be moved.
+     */
+    addWidget(widget: Widget, rank: number): void;
+    /**
+     * Hide the side panel
+     */
+    hide(): void;
+    /**
+     * Show the side panel
+     */
+    show(): void;
+    /**
+     * Find the insertion index for a rank item.
+     */
+    private _findInsertIndex;
+    /**
+     * Find the index of the item with the given widget, or `-1`.
+     */
+    private _findWidgetIndex;
+    /**
+     * Find the widget with the given id, or `null`.
+     */
+    private _findWidgetByID;
+    /**
+     * Refresh the visibility of the stacked panel.
+     */
+    private _refreshVisibility;
+    private _onWidgetRemoved;
+    private _area;
+    private _isHiddenByUser;
+    private _widgetPanel;
+    private _currentWidget;
+    private _lastCurrentWidget;
+    private _widgetAdded;
+    private _widgetRemoved;
+}
+/**
+ * A name space for SideBarPanel functions.
+ */
+export declare namespace SidePanel {
+    /**
+     * The areas of the sidebar panel
+     */
+    type Area = 'left' | 'right';
+}
+/**
+ * A class to manages the palette entries associated to the side panels.
+ */
+export declare class SidePanelPalette {
+    /**
+     * Construct a new side panel palette.
+     */
+    constructor(options: SidePanelPaletteOption);
+    /**
+     * Get a command palette item from the widget id and the area.
+     */
+    getItem(widget: Readonly<Widget>, area: 'left' | 'right'): SidePanelPaletteItem | null;
+    /**
+     * Add an item to the command palette.
+     */
+    addItem(widget: Readonly<Widget>, area: 'left' | 'right'): void;
+    /**
+     * Remove an item from the command palette.
+     */
+    removeItem(widget: Readonly<Widget>, area: 'left' | 'right'): void;
+    _command: string;
+    _commandPalette: ICommandPalette;
+    _items: SidePanelPaletteItem[];
+}
+type SidePanelPaletteItem = {
+    /**
+     * The ID of the widget associated to the command palette.
+     */
+    widgetId: string;
+    /**
+     * The area of the panel associated to the command palette.
+     */
+    area: 'left' | 'right';
+    /**
+     * The disposable object to remove the item from command palette.
+     */
+    disposable: IDisposable;
+};
+/**
+ * An interface for the options to include in SideBarPalette constructor.
+ */
+type SidePanelPaletteOption = {
+    /**
+     * The commands palette.
+     */
+    commandPalette: ICommandPalette;
+    /**
+     * The command to call from each side panel menu entry.
+     *
+     * ### Notes
+     * That command required 3 args :
+     *      side: 'left' | 'right', the area to toggle
+     *      title: string, label of the command
+     *      id: string, id of the widget to activate
+     */
+    command: string;
+};
+/**
+ * A namespace for private module data.
+ */
+declare namespace Private {
+    /**
+     * An object which holds a widget and its sort rank.
+     */
+    interface IRankItem {
+        /**
+         * The widget for the item.
+         */
+        widget: Widget;
+        /**
+         * The sort rank of the widget.
+         */
+        rank: number;
+    }
+    /**
+     * A less-than comparison function for side bar rank items.
+     */
+    function itemCmp(first: IRankItem, second: IRankItem): number;
+}
+export {};

package/lib/panelhandler.js

@@ -0,0 +1,329 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+import { closeIcon } from '@jupyterlab/ui-components';
+import { ArrayExt, find } from '@lumino/algorithm';
+import { MessageLoop } from '@lumino/messaging';
+import { Signal } from '@lumino/signaling';
+import { Panel, StackedPanel, Widget } from '@lumino/widgets';
+/**
+ * A class which manages a panel and sorts its widgets by rank.
+ */
+export class PanelHandler {
+    constructor() {
+        /**
+         * A message hook for child add/remove messages on the main area dock panel.
+         */
+        this._panelChildHook = (handler, msg) => {
+            switch (msg.type) {
+                case 'child-added':
+                    {
+                        const widget = msg.child;
+                        // If we already know about this widget, we're done
+                        if (this._items.find(v => v.widget === widget)) {
+                            break;
+                        }
+                        // Otherwise, add to the end by default
+                        const rank = this._items[this._items.length - 1].rank;
+                        this._items.push({ widget, rank });
+                    }
+                    break;
+                case 'child-removed':
+                    {
+                        const widget = msg.child;
+                        ArrayExt.removeFirstWhere(this._items, v => v.widget === widget);
+                    }
+                    break;
+                default:
+                    break;
+            }
+            return true;
+        };
+        this._items = new Array();
+        this._panel = new Panel();
+        MessageLoop.installMessageHook(this._panel, this._panelChildHook);
+    }
+    /**
+     * Get the panel managed by the handler.
+     */
+    get panel() {
+        return this._panel;
+    }
+    /**
+     * Add a widget to the panel.
+     *
+     * If the widget is already added, it will be moved.
+     */
+    addWidget(widget, rank) {
+        widget.parent = null;
+        const item = { widget, rank };
+        const index = ArrayExt.upperBound(this._items, item, Private.itemCmp);
+        ArrayExt.insert(this._items, index, item);
+        this._panel.insertWidget(index, widget);
+    }
+}
+/**
+ * A class which manages a side panel that can show at most one widget at a time.
+ */
+export class SidePanelHandler extends PanelHandler {
+    /**
+     * Construct a new side panel handler.
+     */
+    constructor(area) {
+        super();
+        this._isHiddenByUser = false;
+        this._widgetAdded = new Signal(this);
+        this._widgetRemoved = new Signal(this);
+        this._area = area;
+        this._panel.hide();
+        this._currentWidget = null;
+        this._lastCurrentWidget = null;
+        this._widgetPanel = new StackedPanel();
+        this._widgetPanel.widgetRemoved.connect(this._onWidgetRemoved, this);
+        const closeButton = document.createElement('button');
+        closeIcon.element({
+            container: closeButton,
+            height: '16px',
+            width: 'auto'
+        });
+        closeButton.onclick = () => {
+            this.collapse();
+            this.hide();
+        };
+        closeButton.className = 'jp-Button jp-SidePanel-collapse';
+        const icon = new Widget({ node: closeButton });
+        this._panel.addWidget(icon);
+        this._panel.addWidget(this._widgetPanel);
+    }
+    /**
+     * Get the current widget in the sidebar panel.
+     */
+    get currentWidget() {
+        return (this._currentWidget ||
+            this._lastCurrentWidget ||
+            (this._items.length > 0 ? this._items[0].widget : null));
+    }
+    /**
+     * Get the area of the side panel
+     */
+    get area() {
+        return this._area;
+    }
+    /**
+     * Whether the panel is visible
+     */
+    get isVisible() {
+        return this._panel.isVisible;
+    }
+    /**
+     * Get the stacked panel managed by the handler
+     */
+    get panel() {
+        return this._panel;
+    }
+    /**
+     * Get the widgets list.
+     */
+    get widgets() {
+        return this._items.map(obj => obj.widget);
+    }
+    /**
+     * Signal fired when a widget is added to the panel
+     */
+    get widgetAdded() {
+        return this._widgetAdded;
+    }
+    /**
+     * Signal fired when a widget is removed from the panel
+     */
+    get widgetRemoved() {
+        return this._widgetRemoved;
+    }
+    /**
+     * Expand the sidebar.
+     *
+     * #### Notes
+     * This will open the most recently used widget, or the first widget
+     * if there is no most recently used.
+     */
+    expand(id) {
+        if (this._currentWidget) {
+            this.collapse();
+        }
+        if (id) {
+            this.activate(id);
+        }
+        else {
+            const visibleWidget = this.currentWidget;
+            if (visibleWidget) {
+                this._currentWidget = visibleWidget;
+                this.activate(visibleWidget.id);
+            }
+        }
+    }
+    /**
+     * Activate a widget residing in the stacked panel by ID.
+     *
+     * @param id - The widget's unique ID.
+     */
+    activate(id) {
+        const widget = this._findWidgetByID(id);
+        if (widget) {
+            this._currentWidget = widget;
+            widget.show();
+            widget.activate();
+        }
+    }
+    /**
+     * Test whether the sidebar has the given widget by id.
+     */
+    has(id) {
+        return this._findWidgetByID(id) !== null;
+    }
+    /**
+     * Collapse the sidebar so no items are expanded.
+     */
+    collapse() {
+        var _a;
+        (_a = this._currentWidget) === null || _a === void 0 ? void 0 : _a.hide();
+        this._currentWidget = null;
+    }
+    /**
+     * Add a widget and its title to the stacked panel.
+     *
+     * If the widget is already added, it will be moved.
+     */
+    addWidget(widget, rank) {
+        widget.parent = null;
+        widget.hide();
+        const item = { widget, rank };
+        const index = this._findInsertIndex(item);
+        ArrayExt.insert(this._items, index, item);
+        this._widgetPanel.insertWidget(index, widget);
+        this._refreshVisibility();
+        this._widgetAdded.emit(widget);
+    }
+    /**
+     * Hide the side panel
+     */
+    hide() {
+        this._isHiddenByUser = true;
+        this._refreshVisibility();
+    }
+    /**
+     * Show the side panel
+     */
+    show() {
+        this._isHiddenByUser = false;
+        this._refreshVisibility();
+    }
+    /**
+     * Find the insertion index for a rank item.
+     */
+    _findInsertIndex(item) {
+        return ArrayExt.upperBound(this._items, item, Private.itemCmp);
+    }
+    /**
+     * Find the index of the item with the given widget, or `-1`.
+     */
+    _findWidgetIndex(widget) {
+        return ArrayExt.findFirstIndex(this._items, i => i.widget === widget);
+    }
+    /**
+     * Find the widget with the given id, or `null`.
+     */
+    _findWidgetByID(id) {
+        const item = find(this._items, value => value.widget.id === id);
+        return item ? item.widget : null;
+    }
+    /**
+     * Refresh the visibility of the stacked panel.
+     */
+    _refreshVisibility() {
+        this._panel.setHidden(this._isHiddenByUser);
+    }
+    /*
+     * Handle the `widgetRemoved` signal from the panel.
+     */
+    _onWidgetRemoved(sender, widget) {
+        if (widget === this._lastCurrentWidget) {
+            this._lastCurrentWidget = null;
+        }
+        ArrayExt.removeAt(this._items, this._findWidgetIndex(widget));
+        this._refreshVisibility();
+        this._widgetRemoved.emit(widget);
+    }
+}
+/**
+ * A class to manages the palette entries associated to the side panels.
+ */
+export class SidePanelPalette {
+    /**
+     * Construct a new side panel palette.
+     */
+    constructor(options) {
+        this._items = [];
+        this._commandPalette = options.commandPalette;
+        this._command = options.command;
+    }
+    /**
+     * Get a command palette item from the widget id and the area.
+     */
+    getItem(widget, area) {
+        const itemList = this._items;
+        for (let i = 0; i < itemList.length; i++) {
+            const item = itemList[i];
+            if (item.widgetId === widget.id && item.area === area) {
+                return item;
+            }
+        }
+        return null;
+    }
+    /**
+     * Add an item to the command palette.
+     */
+    addItem(widget, area) {
+        // Check if the item does not already exist.
+        if (this.getItem(widget, area)) {
+            return;
+        }
+        // Add a new item in command palette.
+        const disposableDelegate = this._commandPalette.addItem({
+            command: this._command,
+            category: 'View',
+            args: {
+                side: area,
+                title: `Show ${widget.title.caption}`,
+                id: widget.id
+            }
+        });
+        // Keep the disposableDelegate objet to be able to dispose of the item if the widget
+        // is remove from the side panel.
+        this._items.push({
+            widgetId: widget.id,
+            area: area,
+            disposable: disposableDelegate
+        });
+    }
+    /**
+     * Remove an item from the command palette.
+     */
+    removeItem(widget, area) {
+        const item = this.getItem(widget, area);
+        if (item) {
+            item.disposable.dispose();
+        }
+    }
+}
+/**
+ * A namespace for private module data.
+ */
+var Private;
+(function (Private) {
+    /**
+     * A less-than comparison function for side bar rank items.
+     */
+    function itemCmp(first, second) {
+        return first.rank - second.rank;
+    }
+    Private.itemCmp = itemCmp;
+})(Private || (Private = {}));

package/lib/shell.d.ts

@@ -1,9 +1,9 @@
 import { JupyterFrontEnd } from '@jupyterlab/application';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
-import { IIterator } from '@lumino/algorithm';
 import { Token } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
 import { Widget } from '@lumino/widgets';
+import { SidePanelHandler } from './panelhandler';
 /**
  * The Jupyter Notebook application shell token.
  */
@@ -34,6 +34,26 @@ export declare class NotebookShell extends Widget implements JupyterFrontEnd.ISh
      * Get the menu area wrapper panel
      */
     get menu(): Widget;
+    /**
+     * Get the left area handler
+     */
+    get leftHandler(): SidePanelHandler;
+    /**
+     * Get the right area handler
+     */
+    get rightHandler(): SidePanelHandler;
+    /**
+     * Is the left sidebar visible?
+     */
+    get leftCollapsed(): boolean;
+    /**
+     * Is the right sidebar visible?
+     */
+    get rightCollapsed(): boolean;
+    /**
+     * Promise that resolves when the main widget is loaded
+     */
+    get restored(): Promise<void>;
     /**
      * Activate a widget in its area.
      */
@@ -63,14 +83,33 @@ export declare class NotebookShell extends Widget implements JupyterFrontEnd.ISh
      *
      * @param area The area
      */
-    widgets(area: Shell.Area): IIterator<Widget>;
+    widgets(area: Shell.Area): IterableIterator<Widget>;
+    /**
+     * Expand the left panel to show the sidebar with its widget.
+     */
+    expandLeft(id?: string): void;
+    /**
+     * Collapse the left panel
+     */
+    collapseLeft(): void;
+    /**
+     * Expand the right panel to show the sidebar with its widget.
+     */
+    expandRight(id?: string): void;
+    /**
+     * Collapse the right panel
+     */
+    collapseRight(): void;
     private _topWrapper;
     private _topHandler;
     private _menuWrapper;
     private _menuHandler;
+    private _leftHandler;
+    private _rightHandler;
     private _spacer;
     private _main;
     private _currentChanged;
+    private _mainWidgetLoaded;
 }
 /**
  * A namespace for Shell statics
@@ -79,5 +118,5 @@ export declare namespace Shell {
     /**
      * The areas of the application shell where widgets can reside.
      */
-    type Area = 'main' | 'top' | 'menu';
+    type Area = 'main' | 'top' | 'left' | 'right' | 'menu';
 }

package/lib/shell.js

@@ -1,10 +1,10 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-import { ArrayExt, find, iter } from '@lumino/algorithm';
-import { Token } from '@lumino/coreutils';
-import { MessageLoop } from '@lumino/messaging';
+import { find } from '@lumino/algorithm';
+import { PromiseDelegate, Token } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
-import { Panel, Widget, BoxLayout } from '@lumino/widgets';
+import { BoxLayout, Panel, SplitPanel, Widget } from '@lumino/widgets';
+import { PanelHandler, SidePanelHandler } from './panelhandler';
 /**
  * The Jupyter Notebook application shell token.
  */
@@ -20,31 +20,63 @@ export class NotebookShell extends Widget {
     constructor() {
         super();
         this._currentChanged = new Signal(this);
+        this._mainWidgetLoaded = new PromiseDelegate();
         this.id = 'main';
-        const rootLayout = new BoxLayout();
-        this._topHandler = new Private.PanelHandler();
-        this._menuHandler = new Private.PanelHandler();
+        this._topHandler = new PanelHandler();
+        this._menuHandler = new PanelHandler();
+        this._leftHandler = new SidePanelHandler('left');
+        this._rightHandler = new SidePanelHandler('right');
         this._main = new Panel();
+        const topWrapper = (this._topWrapper = new Panel());
+        const menuWrapper = (this._menuWrapper = new Panel());
         this._topHandler.panel.id = 'top-panel';
         this._menuHandler.panel.id = 'menu-panel';
         this._main.id = 'main-panel';
+        this._spacer = new Widget();
+        this._spacer.id = 'spacer-widget';
         // create wrappers around the top and menu areas
-        const topWrapper = (this._topWrapper = new Panel());
         topWrapper.id = 'top-panel-wrapper';
         topWrapper.addWidget(this._topHandler.panel);
-        const menuWrapper = (this._menuWrapper = new Panel());
         menuWrapper.id = 'menu-panel-wrapper';
         menuWrapper.addWidget(this._menuHandler.panel);
-        BoxLayout.setStretch(topWrapper, 0);
-        BoxLayout.setStretch(menuWrapper, 0);
+        const rootLayout = new BoxLayout();
+        const leftHandler = this._leftHandler;
+        const rightHandler = this._rightHandler;
+        leftHandler.panel.id = 'jp-left-stack';
+        rightHandler.panel.id = 'jp-right-stack';
+        // Hide the side panels by default.
+        leftHandler.hide();
+        rightHandler.hide();
+        const middleLayout = new BoxLayout({
+            spacing: 0,
+            direction: 'top-to-bottom'
+        });
+        BoxLayout.setStretch(this._topWrapper, 0);
+        BoxLayout.setStretch(this._menuWrapper, 0);
         BoxLayout.setStretch(this._main, 1);
-        this._spacer = new Widget();
-        this._spacer.id = 'spacer-widget';
+        const middlePanel = new Panel({ layout: middleLayout });
+        middlePanel.addWidget(this._topWrapper);
+        middlePanel.addWidget(this._menuWrapper);
+        middlePanel.addWidget(this._spacer);
+        middlePanel.addWidget(this._main);
+        middlePanel.layout = middleLayout;
+        // TODO: Consider storing this as an attribute this._hsplitPanel if saving/restoring layout needed
+        const hsplitPanel = new SplitPanel();
+        hsplitPanel.id = 'main-split-panel';
+        hsplitPanel.spacing = 1;
+        BoxLayout.setStretch(hsplitPanel, 1);
+        SplitPanel.setStretch(leftHandler.panel, 0);
+        SplitPanel.setStretch(rightHandler.panel, 0);
+        SplitPanel.setStretch(middlePanel, 1);
+        hsplitPanel.addWidget(leftHandler.panel);
+        hsplitPanel.addWidget(middlePanel);
+        hsplitPanel.addWidget(rightHandler.panel);
+        // Use relative sizing to set the width of the side panels.
+        // This will still respect the min-size of children widget in the stacked
+        // panel.
+        hsplitPanel.setRelativeSizes([1, 2.5, 1]);
         rootLayout.spacing = 0;
-        rootLayout.addWidget(topWrapper);
-        rootLayout.addWidget(menuWrapper);
-        rootLayout.addWidget(this._spacer);
-        rootLayout.addWidget(this._main);
+        rootLayout.addWidget(hsplitPanel);
         this.layout = rootLayout;
     }
     /**
@@ -72,13 +104,54 @@ export class NotebookShell extends Widget {
     get menu() {
         return this._menuWrapper;
     }
+    /**
+     * Get the left area handler
+     */
+    get leftHandler() {
+        return this._leftHandler;
+    }
+    /**
+     * Get the right area handler
+     */
+    get rightHandler() {
+        return this._rightHandler;
+    }
+    /**
+     * Is the left sidebar visible?
+     */
+    get leftCollapsed() {
+        return !(this._leftHandler.isVisible && this._leftHandler.panel.isVisible);
+    }
+    /**
+     * Is the right sidebar visible?
+     */
+    get rightCollapsed() {
+        return !(this._rightHandler.isVisible && this._rightHandler.panel.isVisible);
+    }
+    /**
+     * Promise that resolves when the main widget is loaded
+     */
+    get restored() {
+        return this._mainWidgetLoaded.promise;
+    }
     /**
      * Activate a widget in its area.
      */
     activateById(id) {
-        const widget = find(this.widgets('main'), w => w.id === id);
-        if (widget) {
-            widget.activate();
+        // Search all areas that can have widgets for this widget, starting with main.
+        for (const area of ['main', 'top', 'left', 'right', 'menu']) {
+            const widget = find(this.widgets(area), w => w.id === id);
+            if (widget) {
+                if (area === 'left') {
+                    this.expandLeft(id);
+                }
+                else if (area === 'right') {
+                    this.expandRight(id);
+                }
+                else {
+                    widget.activate();
+                }
+            }
         }
     }
     /**
@@ -95,20 +168,28 @@ export class NotebookShell extends Widget {
     add(widget, area, options) {
         var _a;
         const rank = (_a = options === null || options === void 0 ? void 0 : options.rank) !== null && _a !== void 0 ? _a : DEFAULT_RANK;
-        if (area === 'top') {
-            return this._topHandler.addWidget(widget, rank);
-        }
-        if (area === 'menu') {
-            return this._menuHandler.addWidget(widget, rank);
-        }
-        if (area === 'main' || area === undefined) {
-            if (this._main.widgets.length > 0) {
-                // do not add the widget if there is already one
-                return;
-            }
-            this._main.addWidget(widget);
-            this._main.update();
-            this._currentChanged.emit(void 0);
+        switch (area) {
+            case 'top':
+                return this._topHandler.addWidget(widget, rank);
+            case 'menu':
+                return this._menuHandler.addWidget(widget, rank);
+            case 'main':
+            case undefined:
+                if (this._main.widgets.length > 0) {
+                    // do not add the widget if there is already one
+                    return;
+                }
+                this._main.addWidget(widget);
+                this._main.update();
+                this._currentChanged.emit(void 0);
+                this._mainWidgetLoaded.resolve();
+                break;
+            case 'left':
+                return this._leftHandler.addWidget(widget, rank);
+            case 'right':
+                return this._rightHandler.addWidget(widget, rank);
+            default:
+                console.warn(`Cannot add widget to area: ${area}`);
         }
     }
     /**
@@ -130,86 +211,54 @@ export class NotebookShell extends Widget {
      *
      * @param area The area
      */
-    widgets(area) {
+    *widgets(area) {
         switch (area !== null && area !== void 0 ? area : 'main') {
             case 'top':
-                return iter(this._topHandler.panel.widgets);
+                yield* this._topHandler.panel.widgets;
+                return;
             case 'menu':
-                return iter(this._menuHandler.panel.widgets);
+                yield* this._menuHandler.panel.widgets;
+                return;
             case 'main':
-                return iter(this._main.widgets);
+                yield* this._main.widgets;
+                return;
+            case 'left':
+                yield* this._leftHandler.widgets;
+                return;
+            case 'right':
+                yield* this._rightHandler.widgets;
+                return;
             default:
-                throw new Error(`Invalid area: ${area}`);
+                console.error(`This shell has no area called "${area}"`);
+                return;
         }
     }
-}
-/**
- * A namespace for private module data.
- */
-var Private;
-(function (Private) {
-    /**
-     * A less-than comparison function for side bar rank items.
-     */
-    function itemCmp(first, second) {
-        return first.rank - second.rank;
-    }
-    Private.itemCmp = itemCmp;
-    /**
-     * A class which manages a panel and sorts its widgets by rank.
-     */
-    class PanelHandler {
-        constructor() {
-            /**
-             * A message hook for child add/remove messages on the main area dock panel.
-             */
-            this._panelChildHook = (handler, msg) => {
-                switch (msg.type) {
-                    case 'child-added':
-                        {
-                            const widget = msg.child;
-                            // If we already know about this widget, we're done
-                            if (this._items.find(v => v.widget === widget)) {
-                                break;
-                            }
-                            // Otherwise, add to the end by default
-                            const rank = this._items[this._items.length - 1].rank;
-                            this._items.push({ widget, rank });
-                        }
-                        break;
-                    case 'child-removed':
-                        {
-                            const widget = msg.child;
-                            ArrayExt.removeFirstWhere(this._items, v => v.widget === widget);
-                        }
-                        break;
-                    default:
-                        break;
-                }
-                return true;
-            };
-            this._items = new Array();
-            this._panel = new Panel();
-            MessageLoop.installMessageHook(this._panel, this._panelChildHook);
-        }
-        /**
-         * Get the panel managed by the handler.
-         */
-        get panel() {
-            return this._panel;
-        }
-        /**
-         * Add a widget to the panel.
-         *
-         * If the widget is already added, it will be moved.
-         */
-        addWidget(widget, rank) {
-            widget.parent = null;
-            const item = { widget, rank };
-            const index = ArrayExt.upperBound(this._items, item, Private.itemCmp);
-            ArrayExt.insert(this._items, index, item);
-            this._panel.insertWidget(index, widget);
-        }
+    /**
+     * Expand the left panel to show the sidebar with its widget.
+     */
+    expandLeft(id) {
+        this._leftHandler.panel.show();
+        this._leftHandler.expand(id); // Show the current widget, if any
+    }
+    /**
+     * Collapse the left panel
+     */
+    collapseLeft() {
+        this._leftHandler.collapse();
+        this._leftHandler.panel.hide();
     }
-    Private.PanelHandler = PanelHandler;
-})(Private || (Private = {}));
+    /**
+     * Expand the right panel to show the sidebar with its widget.
+     */
+    expandRight(id) {
+        this._rightHandler.panel.show();
+        this._rightHandler.expand(id); // Show the current widget, if any
+    }
+    /**
+     * Collapse the right panel
+     */
+    collapseRight() {
+        this._rightHandler.collapse();
+        this._rightHandler.panel.hide();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter-notebook/application",
-  "version": "7.0.0-alpha.1",
+  "version": "7.0.0-alpha.10",
   "description": "Jupyter Notebook - Application",
   "homepage": "https://github.com/jupyter/notebook",
   "bugs": {
@@ -43,27 +43,27 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^4.0.0-alpha.5",
-    "@jupyterlab/coreutils": "^6.0.0-alpha.5",
-    "@jupyterlab/docregistry": "^4.0.0-alpha.5",
-    "@jupyterlab/rendermime-interfaces": "^4.0.0-alpha.5",
-    "@jupyterlab/ui-components": "^4.0.0-alpha.19",
-    "@lumino/algorithm": "^1.9.1",
-    "@lumino/coreutils": "^1.12.0",
-    "@lumino/messaging": "^1.10.1",
-    "@lumino/polling": "^1.10.0",
-    "@lumino/signaling": "^1.10.1",
-    "@lumino/widgets": "^1.31.1"
+    "@jupyterlab/application": "^4.0.0-alpha.17",
+    "@jupyterlab/coreutils": "^6.0.0-alpha.17",
+    "@jupyterlab/docregistry": "^4.0.0-alpha.17",
+    "@jupyterlab/rendermime-interfaces": "^3.8.0-alpha.17",
+    "@jupyterlab/ui-components": "^4.0.0-alpha.32",
+    "@lumino/algorithm": "^2.0.0-alpha.7",
+    "@lumino/coreutils": "^2.0.0-alpha.7",
+    "@lumino/messaging": "^2.0.0-alpha.7",
+    "@lumino/polling": "^2.0.0-alpha.7",
+    "@lumino/signaling": "^2.0.0-alpha.7",
+    "@lumino/widgets": "^2.0.0-alpha.7"
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@babel/preset-env": "^7.12.1",
-    "@jupyterlab/testutils": "^4.0.0-alpha.5",
-    "@types/jest": "^26.0.10",
-    "jest": "^26.4.2",
-    "rimraf": "~3.0.0",
-    "ts-jest": "^26.3.0",
-    "typescript": "~4.1.3"
+    "@jupyterlab/testutils": "^4.0.0-alpha.17",
+    "@types/jest": "^29.2.5",
+    "jest": "^29.3.1",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^29.0.3",
+    "typescript": "~4.9.3"
   },
   "publishConfig": {
     "access": "public"

package/style/index.css

@@ -8,3 +8,4 @@
 @import url('~@jupyterlab/ui-components/style/index.css');
 
 @import url('./base.css');
+@import url('./sidepanel.css');

package/style/index.js

@@ -8,3 +8,4 @@ import '@jupyterlab/mainmenu/style/index.js';
 import '@jupyterlab/ui-components/style/index.js';
 
 import './base.css';
+import './sidepanel.css';

package/style/sidepanel.css

@@ -0,0 +1,48 @@
+/*-----------------------------------------------------------------------------
+| Copyright (c) Jupyter Development Team.
+| Distributed under the terms of the Modified BSD License.
+|
+| Adapted from JupyterLab's packages/application/style/sidepanel.css.
+|----------------------------------------------------------------------------*/
+
+/*-----------------------------------------------------------------------------
+| Variables
+|----------------------------------------------------------------------------*/
+
+:root {
+  --jp-private-sidebar-tab-width: 32px;
+}
+
+/*-----------------------------------------------------------------------------
+| SideBar
+|----------------------------------------------------------------------------*/
+
+/* Stack panels */
+
+#jp-right-stack,
+#jp-left-stack {
+  display: flex;
+  flex-direction: column;
+  min-width: var(--jp-sidebar-min-width);
+}
+
+#jp-left-stack .jp-SidePanel-collapse,
+#jp-right-stack .jp-SidePanel-collapse {
+  display: flex;
+  flex: 0 0 auto;
+  min-height: 0;
+  padding: 0;
+}
+
+#jp-left-stack .jp-SidePanel-collapse {
+  justify-content: right;
+}
+
+#jp-right-stack .jp-SidePanel-collapse {
+  justify-content: left;
+}
+
+#jp-left-stack .lm-StackedPanel,
+#jp-right-stack .lm-StackedPanel {
+  flex: 1 1 auto;
+}