@jupyterlab/application 4.0.0-alpha.9 → 4.0.0-beta.0

package/lib/shell.js

@@ -2,9 +2,9 @@
 // Distributed under the terms of the Modified BSD License.
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { nullTranslator } from '@jupyterlab/translation';
-import { classes, DockPanelSvg, LabIcon, TabPanelSvg } from '@jupyterlab/ui-components';
-import { ArrayExt, find, iter, toArray } from '@lumino/algorithm';
-import { PromiseDelegate, Token } from '@lumino/coreutils';
+import { classes, DockPanelSvg, LabIcon, TabBarSvg, tabIcon, TabPanelSvg } from '@jupyterlab/ui-components';
+import { ArrayExt, find, map } from '@lumino/algorithm';
+import { JSONExt, PromiseDelegate, Token } from '@lumino/coreutils';
 import { MessageLoop } from '@lumino/messaging';
 import { Debouncer } from '@lumino/polling';
 import { Signal } from '@lumino/signaling';
@@ -75,11 +75,15 @@ export class LabShell extends Widget {
         this._restored = new PromiseDelegate();
         this._tracker = new FocusTracker();
         this._topHandlerHiddenByUser = false;
+        this._idTypeMap = new Map();
         this._mainOptionsCache = new Map();
         this._sideOptionsCache = new Map();
+        this._delayedWidget = new Array();
         this.addClass(APPLICATION_SHELL_CLASS);
         this.id = 'main';
-        const trans = ((options && options.translator) || nullTranslator).load('jupyterlab');
+        if ((options === null || options === void 0 ? void 0 : options.waitForRestore) === false) {
+            this._userLayout = { 'multiple-document': {}, 'single-document': {} };
+        }
         // Skip Links
         const skipLinkWidget = (this._skipLinkWidget = new Private.SkipLinkWidget(this));
         this._skipLinkWidget.show();
@@ -90,19 +94,19 @@ export class LabShell extends Widget {
         const headerPanel = (this._headerPanel = new BoxPanel());
         const menuHandler = (this._menuHandler = new Private.PanelHandler());
         menuHandler.panel.node.setAttribute('role', 'navigation');
-        menuHandler.panel.node.setAttribute('aria-label', trans.__('main'));
         const topHandler = (this._topHandler = new Private.PanelHandler());
         topHandler.panel.node.setAttribute('role', 'banner');
         const bottomPanel = (this._bottomPanel = new BoxPanel());
         bottomPanel.node.setAttribute('role', 'contentinfo');
         const hboxPanel = new BoxPanel();
-        const vsplitPanel = (this._vsplitPanel = new Private.RestorableSplitPanel());
+        const vsplitPanel = (this._vsplitPanel =
+            new Private.RestorableSplitPanel());
         const dockPanel = (this._dockPanel = new DockPanelSvg({
-            hiddenMode: Widget.HiddenMode.Scale,
-            translator: options === null || options === void 0 ? void 0 : options.translator
+            hiddenMode: Widget.HiddenMode.Display
         }));
         MessageLoop.installMessageHook(dockPanel, this._dockChildHook);
-        const hsplitPanel = (this._hsplitPanel = new Private.RestorableSplitPanel());
+        const hsplitPanel = (this._hsplitPanel =
+            new Private.RestorableSplitPanel());
         const downPanel = (this._downPanel = new TabPanelSvg({
             tabsMovable: true
         }));
@@ -120,14 +124,10 @@ export class LabShell extends Widget {
         downPanel.id = 'jp-down-stack';
         leftHandler.sideBar.addClass(SIDEBAR_CLASS);
         leftHandler.sideBar.addClass('jp-mod-left');
-        leftHandler.sideBar.node.setAttribute('aria-label', trans.__('main sidebar'));
-        leftHandler.sideBar.contentNode.setAttribute('aria-label', trans.__('main sidebar'));
         leftHandler.sideBar.node.setAttribute('role', 'complementary');
         leftHandler.stackedPanel.id = 'jp-left-stack';
         rightHandler.sideBar.addClass(SIDEBAR_CLASS);
         rightHandler.sideBar.addClass('jp-mod-right');
-        rightHandler.sideBar.node.setAttribute('aria-label', trans.__('alternate sidebar'));
-        rightHandler.sideBar.contentNode.setAttribute('aria-label', trans.__('alternate sidebar'));
         rightHandler.sideBar.node.setAttribute('role', 'complementary');
         rightHandler.stackedPanel.id = 'jp-right-stack';
         dockPanel.node.setAttribute('role', 'main');
@@ -204,6 +204,7 @@ export class LabShell extends Widget {
         else {
             rootLayout.insertWidget(3, this._menuHandler.panel);
         }
+        this.translator = nullTranslator;
         // Wire up signals to update the title panel of the simple interface mode to
         // follow the title of this.currentWidget
         this.currentChanged.connect((sender, args) => {
@@ -237,16 +238,25 @@ export class LabShell extends Widget {
         return this._tracker.activeWidget;
     }
     /**
-     * A signal emitted when main area's current focus changes.
+     * Whether the add buttons for each main area tab bar are enabled.
      */
-    get currentChanged() {
-        return this._currentChanged;
+    get addButtonEnabled() {
+        return this._dockPanel.addButtonEnabled;
+    }
+    set addButtonEnabled(value) {
+        this._dockPanel.addButtonEnabled = value;
     }
     /**
-     * A signal emitted when the shell/dock panel change modes (single/multiple document).
+     * A signal emitted when the add button on a main area tab bar is clicked.
      */
-    get modeChanged() {
-        return this._modeChanged;
+    get addRequested() {
+        return this._dockPanel.addRequested;
+    }
+    /**
+     * A signal emitted when main area's current focus changes.
+     */
+    get currentChanged() {
+        return this._currentChanged;
     }
     /**
      * A signal emitted when the path of the current document changes.
@@ -287,10 +297,6 @@ export class LabShell extends Widget {
     get presentationMode() {
         return this.hasClass('jp-mod-presentationMode');
     }
-    /**
-     * Enable/disable presentation mode (`jp-mod-presentationMode` CSS class) with
-     * a boolean.
-     */
     set presentationMode(value) {
         this.toggleClass('jp-mod-presentationMode', value);
     }
@@ -326,15 +332,35 @@ export class LabShell extends Widget {
         else {
             // Cache a reference to every widget currently in the dock panel before
             // changing its mode.
-            const widgets = toArray(dock.widgets());
+            const widgets = Array.from(dock.widgets());
             dock.mode = mode;
-            // Restore the original layout.
+            // Restore cached layout if possible.
             if (this._cachedLayout) {
                 // Remove any disposed widgets in the cached layout and restore.
                 Private.normalizeAreaConfig(dock, this._cachedLayout.main);
                 dock.restoreLayout(this._cachedLayout);
                 this._cachedLayout = null;
             }
+            // If layout restoration has been deferred, restore layout now.
+            if (this._layoutRestorer.isDeferred) {
+                this._layoutRestorer
+                    .restoreDeferred()
+                    .then(mainArea => {
+                    if (mainArea) {
+                        const { currentWidget, dock } = mainArea;
+                        if (dock) {
+                            this._dockPanel.restoreLayout(dock);
+                        }
+                        if (currentWidget) {
+                            this.activateById(currentWidget.id);
+                        }
+                    }
+                })
+                    .catch(reason => {
+                    console.error('Failed to restore the deferred layout.');
+                    console.error(reason);
+                });
+            }
             // Add any widgets created during single document mode, which have
             // subsequently been removed from the dock panel after the multiple document
             // layout has been restored. If the widget has add options cached for
@@ -342,7 +368,10 @@ export class LabShell extends Widget {
             // then take that into account.
             widgets.forEach(widget => {
                 if (!widget.parent) {
-                    this._addToMainArea(widget, Object.assign(Object.assign({}, this._mainOptionsCache.get(widget)), { activate: false }));
+                    this._addToMainArea(widget, {
+                        ...this._mainOptionsCache.get(widget),
+                        activate: false
+                    });
                 }
             });
             this._mainOptionsCache.clear();
@@ -353,7 +382,6 @@ export class LabShell extends Widget {
             }
             // Adjust menu and title
             this.add(this._menuHandler.panel, 'top', { rank: 100 });
-            // this._topHandler.addWidget(this._menuHandler.panel, 100)
             this._titleHandler.hide();
         }
         // Set the mode data attribute on the applications shell node.
@@ -362,6 +390,12 @@ export class LabShell extends Widget {
         // Emit the mode changed signal
         this._modeChanged.emit(mode);
     }
+    /**
+     * A signal emitted when the shell/dock panel change modes (single/multiple document).
+     */
+    get modeChanged() {
+        return this._modeChanged;
+    }
     /**
      * Promise that resolves when state is first restored, returning layout
      * description.
@@ -369,6 +403,29 @@ export class LabShell extends Widget {
     get restored() {
         return this._restored.promise;
     }
+    get translator() {
+        var _a;
+        return (_a = this._translator) !== null && _a !== void 0 ? _a : nullTranslator;
+    }
+    set translator(value) {
+        if (value !== this._translator) {
+            this._translator = value;
+            // Set translator for tab bars
+            TabBarSvg.translator = value;
+            const trans = value.load('jupyterlab');
+            this._menuHandler.panel.node.setAttribute('aria-label', trans.__('main'));
+            this._leftHandler.sideBar.node.setAttribute('aria-label', trans.__('main sidebar'));
+            this._leftHandler.sideBar.contentNode.setAttribute('aria-label', trans.__('main sidebar'));
+            this._rightHandler.sideBar.node.setAttribute('aria-label', trans.__('alternate sidebar'));
+            this._rightHandler.sideBar.contentNode.setAttribute('aria-label', trans.__('alternate sidebar'));
+        }
+    }
+    /**
+     * User customized shell layout.
+     */
+    get userLayout() {
+        return JSONExt.deepCopy(this._userLayout);
+    }
     /**
      * Activate a widget in its area.
      */
@@ -392,7 +449,7 @@ export class LabShell extends Widget {
             dock.activateWidget(widget);
         }
     }
-    /*
+    /**
      * Activate the next Tab in the active TabBar.
      */
     activateNextTab() {
@@ -421,22 +478,7 @@ export class LabShell extends Widget {
             }
         }
     }
-    /*
-     * Whether the add buttons for each main area tab bar are enabled.
-     */
-    get addButtonEnabled() {
-        return this._dockPanel.addButtonEnabled;
-    }
-    set addButtonEnabled(value) {
-        this._dockPanel.addButtonEnabled = value;
-    }
-    /*
-     * A signal emitted when the add button on a main area tab bar is clicked.
-     */
-    get addRequested() {
-        return this._dockPanel.addRequested;
-    }
-    /*
+    /**
      * Activate the previous Tab in the active TabBar.
      */
     activatePreviousTab() {
@@ -466,7 +508,7 @@ export class LabShell extends Widget {
             }
         }
     }
-    /*
+    /**
      * Activate the next TabBar.
      */
     activateNextTabBar() {
@@ -477,7 +519,7 @@ export class LabShell extends Widget {
             }
         }
     }
-    /*
+    /**
      * Activate the next TabBar.
      */
     activatePreviousTabBar() {
@@ -488,7 +530,41 @@ export class LabShell extends Widget {
             }
         }
     }
+    /**
+     * Add a widget to the JupyterLab shell
+     *
+     * @param widget Widget
+     * @param area Area
+     * @param options Options
+     */
     add(widget, area = 'main', options) {
+        var _a;
+        if (!this._userLayout) {
+            this._delayedWidget.push({ widget, area, options });
+            return;
+        }
+        let userPosition;
+        if ((options === null || options === void 0 ? void 0 : options.type) && this._userLayout[this.mode][options.type]) {
+            userPosition = this._userLayout[this.mode][options.type];
+            this._idTypeMap.set(widget.id, options.type);
+        }
+        else {
+            userPosition = this._userLayout[this.mode][widget.id];
+        }
+        if (options === null || options === void 0 ? void 0 : options.type) {
+            this._idTypeMap.set(widget.id, options.type);
+            widget.disposed.connect(() => {
+                this._idTypeMap.delete(widget.id);
+            });
+        }
+        area = (_a = userPosition === null || userPosition === void 0 ? void 0 : userPosition.area) !== null && _a !== void 0 ? _a : area;
+        options =
+            options || (userPosition === null || userPosition === void 0 ? void 0 : userPosition.options)
+                ? {
+                    ...options,
+                    ...userPosition === null || userPosition === void 0 ? void 0 : userPosition.options
+                }
+                : undefined;
         switch (area || 'main') {
             case 'bottom':
                 return this._addToBottomArea(widget, options);
@@ -510,6 +586,32 @@ export class LabShell extends Widget {
                 throw new Error(`Invalid area: ${area}`);
         }
     }
+    /**
+     * Move a widget type to a new area.
+     *
+     * The type is determined from the `widget.id` and fallback to `widget.id`.
+     *
+     * #### Notes
+     * If `mode` is undefined, both mode are updated.
+     * The new layout is now persisted.
+     *
+     * @param widget Widget to move
+     * @param area New area
+     * @param mode Mode to change
+     * @returns The new user layout
+     */
+    move(widget, area, mode) {
+        var _a;
+        const type = (_a = this._idTypeMap.get(widget.id)) !== null && _a !== void 0 ? _a : widget.id;
+        for (const m of ['single-document', 'multiple-document'].filter(c => !mode || c === mode)) {
+            this._userLayout[m][type] = {
+                ...this._userLayout[m][type],
+                area
+            };
+        }
+        this.add(widget, area);
+        return this._userLayout;
+    }
     /**
      * Collapse the left area.
      */
@@ -560,10 +662,10 @@ export class LabShell extends Widget {
      * Close all widgets in the main and down area.
      */
     closeAll() {
-        // Make a copy of all the widget in the dock panel (using `toArray()`)
+        // Make a copy of all the widget in the dock panel (using `Array.from()`)
         // before removing them because removing them while iterating through them
         // modifies the underlying data of the iterator.
-        toArray(this._dockPanel.widgets()).forEach(widget => widget.close());
+        Array.from(this._dockPanel.widgets()).forEach(widget => widget.close());
         this._downPanel.stackedPanel.widgets.forEach(widget => widget.close());
     }
     /**
@@ -614,15 +716,31 @@ export class LabShell extends Widget {
         }
     }
     /**
-     * Restore the layout state for the application shell.
+     * Restore the layout state and configuration for the application shell.
+     *
+     * #### Notes
+     * This should only be called once.
      */
-    restoreLayout(mode, layout) {
-        var _a, _b;
+    async restoreLayout(mode, layoutRestorer, configuration = {}) {
+        var _a, _b, _c, _d;
+        // Set the configuration and add widgets added before the shell was ready.
+        this._userLayout = {
+            'single-document': (_a = configuration['single-document']) !== null && _a !== void 0 ? _a : {},
+            'multiple-document': (_b = configuration['multiple-document']) !== null && _b !== void 0 ? _b : {}
+        };
+        this._delayedWidget.forEach(({ widget, area, options }) => {
+            this.add(widget, area, options);
+        });
+        this._delayedWidget.length = 0;
+        this._layoutRestorer = layoutRestorer;
+        // Get the layout from the restorer
+        const layout = await layoutRestorer.fetch();
+        // Reset the layout
         const { mainArea, downArea, leftArea, rightArea, topArea, relativeSizes } = layout;
         // Rehydrate the main area.
         if (mainArea) {
             const { currentWidget, dock } = mainArea;
-            if (dock) {
+            if (dock && mode === 'multiple-document') {
                 this._dockPanel.restoreLayout(dock);
             }
             if (mode) {
@@ -647,7 +765,7 @@ export class LabShell extends Widget {
         // Rehydrate the down area
         if (downArea) {
             const { currentWidget, widgets, size } = downArea;
-            const widgetIds = (_a = widgets === null || widgets === void 0 ? void 0 : widgets.map(widget => widget.id)) !== null && _a !== void 0 ? _a : [];
+            const widgetIds = (_c = widgets === null || widgets === void 0 ? void 0 : widgets.map(widget => widget.id)) !== null && _c !== void 0 ? _c : [];
             // Remove absent widgets
             this._downPanel.tabBar.titles
                 .filter(title => !widgetIds.includes(title.owner.id))
@@ -668,7 +786,7 @@ export class LabShell extends Widget {
                 const index = this._downPanel.stackedPanel.widgets.findIndex(widget => widget.id === currentWidget.id);
                 if (index) {
                     this._downPanel.currentIndex = index;
-                    (_b = this._downPanel.currentWidget) === null || _b === void 0 ? void 0 : _b.activate();
+                    (_d = this._downPanel.currentWidget) === null || _d === void 0 ? void 0 : _d.activate();
                 }
             }
             if (size && size > 0.0) {
@@ -725,7 +843,7 @@ export class LabShell extends Widget {
             },
             downArea: {
                 currentWidget: this._downPanel.currentWidget,
-                widgets: toArray(this._downPanel.stackedPanel.widgets),
+                widgets: Array.from(this._downPanel.stackedPanel.widgets),
                 size: this._vsplitPanel.relativeSizes()[1]
             },
             leftArea: this._leftHandler.dehydrate(),
@@ -784,10 +902,17 @@ export class LabShell extends Widget {
      */
     updateConfig(config) {
         if (config.hiddenMode) {
-            this._dockPanel.hiddenMode =
-                config.hiddenMode === 'display'
-                    ? Widget.HiddenMode.Display
-                    : Widget.HiddenMode.Scale;
+            switch (config.hiddenMode) {
+                case 'display':
+                    this._dockPanel.hiddenMode = Widget.HiddenMode.Display;
+                    break;
+                case 'scale':
+                    this._dockPanel.hiddenMode = Widget.HiddenMode.Scale;
+                    break;
+                case 'contentVisibility':
+                    this._dockPanel.hiddenMode = Widget.HiddenMode.ContentVisibility;
+                    break;
+            }
         }
     }
     /**
@@ -798,9 +923,9 @@ export class LabShell extends Widget {
             case 'main':
                 return this._dockPanel.widgets();
             case 'left':
-                return iter(this._leftHandler.sideBar.titles.map(t => t.owner));
+                return map(this._leftHandler.sideBar.titles, t => t.owner);
             case 'right':
-                return iter(this._rightHandler.sideBar.titles.map(t => t.owner));
+                return map(this._rightHandler.sideBar.titles, t => t.owner);
             case 'header':
                 return this._headerPanel.children();
             case 'top':
@@ -886,7 +1011,7 @@ export class LabShell extends Widget {
         const { title } = widget;
         // Add widget ID to tab so that we can get a handle on the tab's widget
         // (for context menu support)
-        title.dataset = Object.assign(Object.assign({}, title.dataset), { id: widget.id });
+        title.dataset = { ...title.dataset, id: widget.id };
         if (title.icon instanceof LabIcon) {
             // bind an appropriate style to the icon
             title.icon = title.icon.bindprops({
@@ -1011,7 +1136,7 @@ export class LabShell extends Widget {
         const { title } = widget;
         // Add widget ID to tab so that we can get a handle on the tab's widget
         // (for context menu support)
-        title.dataset = Object.assign(Object.assign({}, title.dataset), { id: widget.id });
+        title.dataset = { ...title.dataset, id: widget.id };
         if (title.icon instanceof LabIcon) {
             // bind an appropriate style to the icon
             title.icon = title.icon.bindprops({
@@ -1036,7 +1161,7 @@ export class LabShell extends Widget {
         if (!current) {
             return null;
         }
-        const bars = toArray(this._dockPanel.tabBars());
+        const bars = Array.from(this._dockPanel.tabBars());
         const len = bars.length;
         const index = bars.indexOf(current);
         if (direction === 'previous') {
@@ -1292,10 +1417,16 @@ var Private;
                     stylesheet: 'sideBar'
                 });
             }
-            else if (typeof title.icon === 'string' || !title.icon) {
+            else if (typeof title.icon === 'string' && title.icon != '') {
                 // add some classes to help with displaying css background imgs
                 title.iconClass = classes(title.iconClass, 'jp-Icon', 'jp-Icon-20');
             }
+            else if (!title.icon && !title.label) {
+                // add a fallback icon if there is no title label nor icon
+                title.icon = tabIcon.bindprops({
+                    stylesheet: 'sideBar'
+                });
+            }
             this._refreshVisibility();
         }
         /**
@@ -1303,7 +1434,7 @@ var Private;
          */
         dehydrate() {
             const collapsed = this._sideBar.currentTitle === null;
-            const widgets = toArray(this._stackedPanel.widgets);
+            const widgets = Array.from(this._stackedPanel.widgets);
             const currentWidget = widgets[this._sideBar.currentIndex];
             return {
                 collapsed,