@jupyter-notebook/application-extension 7.0.0-alpha.5 → 7.0.0-alpha.7

package/lib/index.js

@@ -1,6 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-import { ILabStatus, IRouter, ITreePathUpdater, JupyterFrontEnd, Router } from '@jupyterlab/application';
+import { ILabStatus, IRouter, ITreePathUpdater, JupyterFrontEnd } from '@jupyterlab/application';
 import { sessionContextDialogs, ISessionContextDialogs, DOMUtils, ICommandPalette, IToolbarWidgetRegistry } from '@jupyterlab/apputils';
 import { ConsolePanel } from '@jupyterlab/console';
 import { PageConfig, PathExt, URLExt } from '@jupyterlab/coreutils';
@@ -13,7 +13,8 @@ import { NotebookApp, NotebookShell, INotebookShell } from '@jupyter-notebook/ap
 import { jupyterIcon } from '@jupyter-notebook/ui-components';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { DisposableDelegate, DisposableSet } from '@lumino/disposable';
-import { Widget } from '@lumino/widgets';
+import { Menu, Widget } from '@lumino/widgets';
+import { SideBarPalette } from './sidebarpalette';
 /**
  * A regular expression to match path to notebooks and documents
  */
@@ -31,6 +32,10 @@ var CommandIDs;
      * Toggle Top Bar visibility
      */
     CommandIDs.toggleTop = 'application:toggle-top';
+    /**
+     * Toggle sidebar visibility
+     */
+    CommandIDs.togglePanel = 'application:toggle-panel';
     /**
      * Toggle the Zen mode
      */
@@ -90,7 +95,8 @@ const logo = {
             elementPosition: 'center',
             padding: '2px 2px 2px 8px',
             height: '28px',
-            width: 'auto'
+            width: 'auto',
+            cursor: 'pointer'
         });
         logo.id = 'jp-NotebookLogo';
         app.shell.add(logo, 'top', { rank: 0 });
@@ -118,7 +124,7 @@ const opener = {
                 const file = decodeURIComponent(path);
                 const urlParams = new URLSearchParams(parsed.search);
                 const factory = (_b = urlParams.get('factory')) !== null && _b !== void 0 ? _b : 'default';
-                app.restored.then(async () => {
+                app.started.then(async () => {
                     docManager.open(file, factory, undefined, {
                         ref: '_noref'
                     });
@@ -130,8 +136,6 @@ const opener = {
 };
 /**
  * A plugin to customize menus
- *
- * TODO: use this plugin to customize the menu items and their order
  */
 const menus = {
     id: '@jupyter-notebook/application-extension:menus',
@@ -215,29 +219,6 @@ const paths = {
         return app.paths;
     }
 };
-/**
- * The default URL router provider.
- */
-const router = {
-    id: '@jupyter-notebook/application-extension:router',
-    autoStart: true,
-    provides: IRouter,
-    requires: [JupyterFrontEnd.IPaths],
-    activate: (app, paths) => {
-        const { commands } = app;
-        const base = paths.urls.base;
-        const router = new Router({ base, commands });
-        void app.started.then(() => {
-            // Route the very first request on load.
-            void router.route();
-            // Route all pop state events.
-            window.addEventListener('popstate', () => {
-                void router.route();
-            });
-        });
-        return router;
-    }
-};
 /**
  * The default session dialogs plugin
  */
@@ -351,11 +332,11 @@ const title = {
                 label: () => trans.__('Rename…'),
                 isEnabled,
                 execute: async () => {
-                    var _a, _b;
+                    var _a;
                     if (!isEnabled()) {
                         return;
                     }
-                    const result = await renameDialog(docManager, current.context.path);
+                    const result = await renameDialog(docManager, current.context);
                     // activate the current widget to bring the focus
                     if (current) {
                         current.activate();
@@ -363,13 +344,13 @@ const title = {
                     if (result === null) {
                         return;
                     }
-                    const newPath = (_a = current.context.path) !== null && _a !== void 0 ? _a : result.path;
+                    const newPath = current.context.path;
                     const basename = PathExt.basename(newPath);
                     h.textContent = basename.replace(STRIP_IPYNB, '');
                     if (!router) {
                         return;
                     }
-                    const matches = (_b = router.current.path.match(TREE_PATTERN)) !== null && _b !== void 0 ? _b : [];
+                    const matches = (_a = router.current.path.match(TREE_PATTERN)) !== null && _a !== void 0 ? _a : [];
                     const [, route, path] = matches;
                     if (!route || !path) {
                         return;
@@ -449,6 +430,190 @@ const topVisibility = {
     },
     autoStart: true
 };
+/**
+ * Plugin to toggle the left or right sidebar's visibility.
+ */
+const sidebarVisibility = {
+    id: '@jupyter-notebook/application-extension:sidebar',
+    requires: [INotebookShell, ITranslator],
+    optional: [IMainMenu, ICommandPalette],
+    autoStart: true,
+    activate: (app, notebookShell, translator, menu, palette) => {
+        const trans = translator.load('notebook');
+        /* Arguments for togglePanel command:
+         * side, left or right area
+         * title, widget title to show in the menu
+         * id, widget ID to activate in the sidebar
+         */
+        app.commands.addCommand(CommandIDs.togglePanel, {
+            label: args => args['title'],
+            caption: args => {
+                // We do not substitute the parameter into the string because the parameter is not
+                // localized (e.g., it is always 'left') even though the string is localized.
+                if (args['side'] === 'left') {
+                    return trans.__('Show %1 in the left sidebar', args['title']);
+                }
+                else if (args['side'] === 'right') {
+                    return trans.__('Show %1 in the right sidebar', args['title']);
+                }
+                return trans.__('Show %1 in the sidebar', args['title']);
+            },
+            execute: args => {
+                var _a, _b;
+                switch (args['side']) {
+                    case 'left':
+                        if (notebookShell.leftCollapsed) {
+                            notebookShell.expandLeft(args.id);
+                        }
+                        else if (((_a = notebookShell.leftHandler.currentWidget) === null || _a === void 0 ? void 0 : _a.id) !== args.id) {
+                            notebookShell.expandLeft(args.id);
+                        }
+                        else {
+                            notebookShell.collapseLeft();
+                            if (notebookShell.currentWidget) {
+                                notebookShell.activateById(notebookShell.currentWidget.id);
+                            }
+                        }
+                        break;
+                    case 'right':
+                        if (notebookShell.rightCollapsed) {
+                            notebookShell.expandRight(args.id);
+                        }
+                        else if (((_b = notebookShell.rightHandler.currentWidget) === null || _b === void 0 ? void 0 : _b.id) !== args.id) {
+                            notebookShell.expandRight(args.id);
+                        }
+                        else {
+                            notebookShell.collapseRight();
+                            if (notebookShell.currentWidget) {
+                                notebookShell.activateById(notebookShell.currentWidget.id);
+                            }
+                        }
+                        break;
+                }
+            },
+            isToggled: args => {
+                switch (args['side']) {
+                    case 'left': {
+                        if (notebookShell.leftCollapsed) {
+                            return false;
+                        }
+                        const currentWidget = notebookShell.leftHandler.currentWidget;
+                        if (!currentWidget) {
+                            return false;
+                        }
+                        return currentWidget.id === args['id'];
+                    }
+                    case 'right': {
+                        if (notebookShell.rightCollapsed) {
+                            return false;
+                        }
+                        const currentWidget = notebookShell.rightHandler.currentWidget;
+                        if (!currentWidget) {
+                            return false;
+                        }
+                        return currentWidget.id === args['id'];
+                    }
+                }
+                return false;
+            }
+        });
+        const sideBarMenu = {
+            left: null,
+            right: null
+        };
+        /**
+         * The function which adds entries to the View menu for each widget of a sidebar.
+         *
+         * @param area - 'left' or 'right', the area of the side bar.
+         * @param entryLabel - the name of the main entry in the View menu for that sidebar.
+         * @returns - The disposable menu added to the View menu or null.
+         */
+        const updateMenu = (area, entryLabel) => {
+            var _a;
+            if (menu === null) {
+                return null;
+            }
+            // Remove the previous menu entry for this sidebar.
+            (_a = sideBarMenu[area]) === null || _a === void 0 ? void 0 : _a.dispose();
+            // Creates a new menu entry and populates it with sidebar widgets.
+            const newMenu = new Menu({ commands: app.commands });
+            newMenu.title.label = entryLabel;
+            const widgets = notebookShell.widgets(area);
+            let menuToAdd = false;
+            for (let widget of widgets) {
+                newMenu.addItem({
+                    command: CommandIDs.togglePanel,
+                    args: {
+                        side: area,
+                        title: `Show ${widget.title.caption}`,
+                        id: widget.id
+                    }
+                });
+                menuToAdd = true;
+            }
+            // If there are widgets, add the menu to the main menu entry.
+            if (menuToAdd) {
+                sideBarMenu[area] = menu.viewMenu.addItem({
+                    type: 'submenu',
+                    submenu: newMenu
+                });
+            }
+        };
+        app.restored.then(() => {
+            // Create menu entries for the left and right panel.
+            if (menu) {
+                const getSideBarLabel = (area) => {
+                    if (area === 'left') {
+                        return trans.__(`Left Sidebar`);
+                    }
+                    else {
+                        return trans.__(`Right Sidebar`);
+                    }
+                };
+                const leftArea = notebookShell.leftHandler.area;
+                const leftLabel = getSideBarLabel(leftArea);
+                updateMenu(leftArea, leftLabel);
+                const rightArea = notebookShell.rightHandler.area;
+                const rightLabel = getSideBarLabel(rightArea);
+                updateMenu(rightArea, rightLabel);
+                const handleSideBarChange = (sidebar, widget) => {
+                    const label = getSideBarLabel(sidebar.area);
+                    updateMenu(sidebar.area, label);
+                };
+                notebookShell.leftHandler.widgetAdded.connect(handleSideBarChange);
+                notebookShell.leftHandler.widgetRemoved.connect(handleSideBarChange);
+                notebookShell.rightHandler.widgetAdded.connect(handleSideBarChange);
+                notebookShell.rightHandler.widgetRemoved.connect(handleSideBarChange);
+            }
+            // Add palette entries for side panels.
+            if (palette) {
+                const sideBarPalette = new SideBarPalette({
+                    commandPalette: palette,
+                    command: CommandIDs.togglePanel
+                });
+                notebookShell.leftHandler.widgets.forEach(widget => {
+                    sideBarPalette.addItem(widget, notebookShell.leftHandler.area);
+                });
+                notebookShell.rightHandler.widgets.forEach(widget => {
+                    sideBarPalette.addItem(widget, notebookShell.rightHandler.area);
+                });
+                // Update menu and palette when widgets are added or removed from sidebars.
+                notebookShell.leftHandler.widgetAdded.connect((sidebar, widget) => {
+                    sideBarPalette.addItem(widget, sidebar.area);
+                });
+                notebookShell.leftHandler.widgetRemoved.connect((sidebar, widget) => {
+                    sideBarPalette.removeItem(widget, sidebar.area);
+                });
+                notebookShell.rightHandler.widgetAdded.connect((sidebar, widget) => {
+                    sideBarPalette.addItem(widget, sidebar.area);
+                });
+                notebookShell.rightHandler.widgetRemoved.connect((sidebar, widget) => {
+                    sideBarPalette.removeItem(widget, sidebar.area);
+                });
+            }
+        });
+    }
+};
 /**
  * The default tree route resolver plugin.
  */
@@ -568,9 +733,9 @@ const plugins = [
     opener,
     pages,
     paths,
-    router,
     sessionDialogs,
     shell,
+    sidebarVisibility,
     status,
     tabTitle,
     title,

package/lib/sidebarpalette.d.ts

@@ -0,0 +1,61 @@
+import { ICommandPalette } from '@jupyterlab/apputils';
+import { IDisposable } from '@lumino/disposable';
+import { Widget } from '@lumino/widgets';
+/**
+ * A class to manages the palette entries associated to the side bar.
+ */
+export declare class SideBarPalette {
+    /**
+     * Construct a new side bar palette.
+     */
+    constructor(options: SideBarPaletteOption);
+    /**
+     * Get a command palette item from the widget id and the area.
+     */
+    getItem(widget: Readonly<Widget>, area: 'left' | 'right'): SideBarPaletteItem | 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: SideBarPaletteItem[];
+}
+declare type SideBarPaletteItem = {
+    /**
+     * 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.
+ */
+declare type SideBarPaletteOption = {
+    /**
+     * The commands palette.
+     */
+    commandPalette: ICommandPalette;
+    /**
+     * The command to call from each sidebar 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;
+};
+export {};

package/lib/sidebarpalette.js

@@ -0,0 +1,61 @@
+/**
+ * A class to manages the palette entries associated to the side bar.
+ */
+export class SideBarPalette {
+    /**
+     * Construct a new side bar 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 bar.
+        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();
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter-notebook/application-extension",
-  "version": "7.0.0-alpha.5",
+  "version": "7.0.0-alpha.7",
   "description": "Jupyter Notebook - Application Extension",
   "homepage": "https://github.com/jupyter/notebook",
   "bugs": {
@@ -39,27 +39,26 @@
     "watch": "tsc -b --watch"
   },
   "dependencies": {
-    "@jupyter-notebook/application": "^7.0.0-alpha.5",
-    "@jupyter-notebook/ui-components": "^7.0.0-alpha.5",
-    "@jupyterlab/application": "^4.0.0-alpha.10",
-    "@jupyterlab/apputils": "^4.0.0-alpha.10",
-    "@jupyterlab/celltags": "^4.0.0-alpha.10",
-    "@jupyterlab/codeeditor": "^4.0.0-alpha.10",
-    "@jupyterlab/codemirror": "^4.0.0-alpha.10",
-    "@jupyterlab/console": "^4.0.0-alpha.10",
-    "@jupyterlab/coreutils": "^6.0.0-alpha.10",
-    "@jupyterlab/docmanager": "^4.0.0-alpha.10",
-    "@jupyterlab/docregistry": "^4.0.0-alpha.10",
-    "@jupyterlab/mainmenu": "^4.0.0-alpha.10",
-    "@jupyterlab/settingregistry": "^4.0.0-alpha.10",
-    "@jupyterlab/translation": "^4.0.0-alpha.10",
-    "@lumino/coreutils": "^1.12.0",
-    "@lumino/disposable": "^1.10.1",
-    "@lumino/widgets": "^1.32.0"
+    "@jupyter-notebook/application": "^7.0.0-alpha.7",
+    "@jupyter-notebook/ui-components": "^7.0.0-alpha.7",
+    "@jupyterlab/application": "^4.0.0-alpha.15",
+    "@jupyterlab/apputils": "^4.0.0-alpha.15",
+    "@jupyterlab/celltags": "^4.0.0-alpha.15",
+    "@jupyterlab/codeeditor": "^4.0.0-alpha.15",
+    "@jupyterlab/console": "^4.0.0-alpha.15",
+    "@jupyterlab/coreutils": "^6.0.0-alpha.15",
+    "@jupyterlab/docmanager": "^4.0.0-alpha.15",
+    "@jupyterlab/docregistry": "^4.0.0-alpha.15",
+    "@jupyterlab/mainmenu": "^4.0.0-alpha.15",
+    "@jupyterlab/settingregistry": "^4.0.0-alpha.15",
+    "@jupyterlab/translation": "^4.0.0-alpha.15",
+    "@lumino/coreutils": "^2.0.0-alpha.6",
+    "@lumino/disposable": "^2.0.0-alpha.6",
+    "@lumino/widgets": "^2.0.0-alpha.6"
   },
   "devDependencies": {
-    "rimraf": "~3.0.0",
-    "typescript": "~4.6.3"
+    "rimraf": "^3.0.2",
+    "typescript": "~4.7.3"
   },
   "publishConfig": {
     "access": "public"

package/style/base.css

@@ -16,3 +16,10 @@
 .jp-Toolbar > .jp-Toolbar-item {
   height: unset;
 }
+
+#jp-UserMenu {
+  flex: 0 0 auto;
+  display: flex;
+  text-align: center;
+  margin-top: 8px;
+}