@jupyter-notebook/application 7.0.0-alpha.6 → 7.0.0-alpha.8

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';
@@ -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/shell.d.ts

@@ -2,7 +2,7 @@ import { JupyterFrontEnd } from '@jupyterlab/application';
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { Token } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
-import { Widget } from '@lumino/widgets';
+import { Panel, Widget } from '@lumino/widgets';
 /**
  * The Jupyter Notebook application shell token.
  */
@@ -33,6 +33,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(): SideBarHandler;
+    /**
+     * Get the right area handler
+     */
+    get rightHandler(): SideBarHandler;
+    /**
+     * 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,13 +83,32 @@ export declare class NotebookShell extends Widget implements JupyterFrontEnd.ISh
      * @param area The area
      */
     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
@@ -78,5 +117,113 @@ 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';
+}
+/**
+ * A name space for SideBarPanel functions.
+ */
+export declare namespace SideBarPanel {
+    /**
+     * The areas of the sidebar panel
+     */
+    type Area = 'left' | 'right';
+}
+/**
+ * A class which manages a side bar that can show at most one widget at a time.
+ */
+export declare class SideBarHandler {
+    /**
+     * Construct a new side bar handler.
+     */
+    constructor(area: SideBarPanel.Area);
+    /**
+     * Get the current widget in the sidebar panel.
+     */
+    get currentWidget(): Widget | null;
+    /**
+     * Get the area of the side panel
+     */
+    get area(): SideBarPanel.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<SideBarHandler, Widget>;
+    /**
+     * Signal fired when a widget is removed from the panel
+     */
+    get widgetRemoved(): ISignal<SideBarHandler, 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 _items;
+    private _panel;
+    private _widgetPanel;
+    private _currentWidget;
+    private _lastCurrentWidget;
+    private _widgetAdded;
+    private _widgetRemoved;
 }

package/lib/shell.js

@@ -1,10 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-import { ArrayExt } from '@lumino/algorithm';
-import { Token } from '@lumino/coreutils';
+import { closeIcon } from '@jupyterlab/ui-components';
+import { ArrayExt, find } from '@lumino/algorithm';
+import { PromiseDelegate, Token } from '@lumino/coreutils';
 import { MessageLoop } from '@lumino/messaging';
 import { Signal } from '@lumino/signaling';
-import { Panel, Widget, BoxLayout } from '@lumino/widgets';
+import { BoxLayout, Panel, SplitPanel, StackedPanel, Widget } from '@lumino/widgets';
 /**
  * The Jupyter Notebook application shell token.
  */
@@ -20,31 +21,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._leftHandler = new SideBarHandler('left');
+        this._rightHandler = new SideBarHandler('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 +105,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 = this._main.widgets.find(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 +169,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}`);
         }
     }
     /**
@@ -141,11 +223,238 @@ export class NotebookShell extends Widget {
             case 'main':
                 yield* this._main.widgets;
                 return;
+            case 'left':
+                yield* this._leftHandler.widgets;
+                return;
+            case 'right':
+                yield* this._rightHandler.widgets;
+                return;
             default:
                 console.error(`This shell has no area called "${area}"`);
                 return;
         }
     }
+    /**
+     * 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();
+    }
+    /**
+     * 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();
+    }
+}
+/**
+ * A class which manages a side bar that can show at most one widget at a time.
+ */
+export class SideBarHandler {
+    /**
+     * Construct a new side bar handler.
+     */
+    constructor(area) {
+        this._isHiddenByUser = false;
+        this._items = new Array();
+        this._widgetAdded = new Signal(this);
+        this._widgetRemoved = new Signal(this);
+        this._area = area;
+        this._panel = new Panel();
+        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 namespace for private module data.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter-notebook/application",
-  "version": "7.0.0-alpha.6",
+  "version": "7.0.0-alpha.8",
   "description": "Jupyter Notebook - Application",
   "homepage": "https://github.com/jupyter/notebook",
   "bugs": {
@@ -43,11 +43,11 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyterlab/application": "^4.0.0-alpha.14",
-    "@jupyterlab/coreutils": "^6.0.0-alpha.14",
-    "@jupyterlab/docregistry": "^4.0.0-alpha.14",
-    "@jupyterlab/rendermime-interfaces": "^3.8.0-alpha.14",
-    "@jupyterlab/ui-components": "^4.0.0-alpha.29",
+    "@jupyterlab/application": "^4.0.0-alpha.15",
+    "@jupyterlab/coreutils": "^6.0.0-alpha.15",
+    "@jupyterlab/docregistry": "^4.0.0-alpha.15",
+    "@jupyterlab/rendermime-interfaces": "^3.8.0-alpha.15",
+    "@jupyterlab/ui-components": "^4.0.0-alpha.30",
     "@lumino/algorithm": "^2.0.0-alpha.6",
     "@lumino/coreutils": "^2.0.0-alpha.6",
     "@lumino/messaging": "^2.0.0-alpha.6",
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@babel/preset-env": "^7.12.1",
-    "@jupyterlab/testutils": "^4.0.0-alpha.14",
+    "@jupyterlab/testutils": "^4.0.0-alpha.15",
     "@types/jest": "^26.0.10",
     "jest": "^26.4.2",
     "rimraf": "^3.0.2",

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;
+}