Improved URL scheme, state, interactions for single document mode

jupyterlab/browser_check.py

@@ -175,6 +175,7 @@ def initialize_settings(self):
         self.settings.setdefault('page_config_data', dict())
         self.settings['page_config_data']['browserTest'] = True
         self.settings['page_config_data']['buildAvailable'] = False
+        self.settings['page_config_data']['exposeAppInBrowser'] = True
         super().initialize_settings()
 
     def initialize_handlers(self):

jupyterlab/chrome-test.js

@@ -6,7 +6,10 @@ async function main() {
   /* eslint-disable no-console */
   console.info('Starting Chrome Headless');
 
-  const browser = await puppeteer.launch({ args: ['--no-sandbox'] });
+  const browser = await puppeteer.launch({
+    headless: true,
+    args: ['--no-sandbox']
+  });
   const page = await browser.newPage();
 
   console.info('Navigating to page:', URL);

packages/application-extension/src/index.tsx

@@ -7,6 +7,7 @@ import {
   ILabStatus,
   ILayoutRestorer,
   IRouter,
+  ITreePathUpdater,
   ConnectionLost,
   JupyterFrontEnd,
   JupyterFrontEndPlugin,
@@ -24,7 +25,7 @@ import {
   showErrorMessage
 } from '@jupyterlab/apputils';
 
-import { PathExt, URLExt } from '@jupyterlab/coreutils';
+import { URLExt, PageConfig } from '@jupyterlab/coreutils';
 
 import {
   IPropertyInspectorProvider,
@@ -43,7 +44,7 @@ import { PromiseDelegate } from '@lumino/coreutils';
 
 import { DisposableDelegate, DisposableSet } from '@lumino/disposable';
 
-import { Widget, DockLayout } from '@lumino/widgets';
+import { Widget, DockLayout, DockPanel } from '@lumino/widgets';
 
 import * as React from 'react';
 
@@ -88,9 +89,10 @@ namespace CommandIDs {
 /**
  * The main extension.
  */
-const main: JupyterFrontEndPlugin<void> = {
+const main: JupyterFrontEndPlugin<ITreePathUpdater> = {
   id: '@jupyterlab/application-extension:main',
   requires: [IRouter, IWindowResolver],
+  provides: ITreePathUpdater,
   optional: [ICommandPalette, IConnectionLost],
   activate: (
     app: JupyterFrontEnd,
@@ -103,6 +105,22 @@ const main: JupyterFrontEndPlugin<void> = {
       throw new Error(`${main.id} must be activated in JupyterLab.`);
     }
 
+    // These two internal state variables are used to manage the two source
+    // of the tree part of the URL being updated: 1) path of the active document,
+    // 2) path of the default browser if the active main area widget isn't a document.
+    let _docTreePath = '';
+    let _defaultBrowserTreePath = '';
+
+    function updateTreePath(treePath: string) {
+      _defaultBrowserTreePath = treePath;
+      if (!_docTreePath) {
+        const path = PageConfig.getUrl({ treePath });
+        router.navigate(path, { skipRouting: true });
+        // Persist the new tree path to PageConfig as it is used elsewhere at runtime.
+        PageConfig.setOption('treePath', treePath);
+      }
+    }
+
     // Requiring the window resolver guarantees that the application extension
     // only loads if there is a viable window name. Otherwise, the application
     // will short-circuit and ask the user to navigate away.
@@ -127,6 +145,27 @@ const main: JupyterFrontEndPlugin<void> = {
       app.commands.notifyCommandChanged();
     });
 
+    // Watch the mode and update the page URL to /lab or /doc to reflect the
+    // change.
+    app.shell.modeChanged.connect((_, args: DockPanel.Mode) => {
+      const path = PageConfig.getUrl({ mode: args as string });
+      router.navigate(path, { skipRouting: true });
+      // Persist this mode change to PageConfig as it is used elsewhere at runtime.
+      PageConfig.setOption('mode', args as string);
+    });
+
+    // Watch the path of the current widget in the main area and update the page
+    // URL to reflect the change.
+    app.shell.currentPathChanged.connect((_, args) => {
+      const maybeTreePath = args.newValue as string;
+      const treePath = maybeTreePath || _defaultBrowserTreePath;
+      const path = PageConfig.getUrl({ treePath: treePath });
+      router.navigate(path, { skipRouting: true });
+      // Persist the new tree path to PageConfig as it is used elsewhere at runtime.
+      PageConfig.setOption('treePath', treePath);
+      _docTreePath = maybeTreePath;
+    });
+
     // If the connection to the server is lost, handle it with the
     // connection lost handler.
     connectionLost = connectionLost || ConnectionLost;
@@ -219,6 +258,7 @@ const main: JupyterFrontEndPlugin<void> = {
         return ((event as any).returnValue = message);
       }
     });
+    return updateTreePath;
   },
   autoStart: true
 };
@@ -229,13 +269,21 @@ const main: JupyterFrontEndPlugin<void> = {
 const layout: JupyterFrontEndPlugin<ILayoutRestorer> = {
   id: '@jupyterlab/application-extension:layout',
   requires: [IStateDB, ILabShell],
-  activate: (app: JupyterFrontEnd, state: IStateDB, labShell: ILabShell) => {
+  activate: (
+    app: JupyterFrontEnd,
+    state: IStateDB,
+    labShell: ILabShell,
+    info: JupyterLab.IInfo
+  ) => {
     const first = app.started;
     const registry = app.commands;
     const restorer = new LayoutRestorer({ connector: state, first, registry });
 
     void restorer.fetch().then(saved => {
-      labShell.restoreLayout(saved);
+      labShell.restoreLayout(
+        PageConfig.getOption('mode') as DockPanel.Mode,
+        saved
+      );
       labShell.layoutModified.connect(() => {
         void restorer.save(labShell.saveLayout());
       });
@@ -289,55 +337,36 @@ const tree: JupyterFrontEndPlugin<JupyterFrontEnd.ITreeResolver> = {
     resolver: IWindowResolver
   ): JupyterFrontEnd.ITreeResolver => {
     const { commands } = app;
-    const treePattern = new RegExp(`^${paths.urls.tree}([^?]+)`);
-    const workspacePattern = new RegExp(
-      `^${paths.urls.workspaces}/[^?/]+/tree/([^?]+)`
-    );
     const set = new DisposableSet();
     const delegate = new PromiseDelegate<JupyterFrontEnd.ITreeResolver.Paths>();
 
+    const treePattern = new RegExp(
+      '/(lab|doc)(/workspaces/[a-zA-Z0-9-_]+)?(/tree/.*)?'
+    );
+
     set.add(
       commands.addCommand(CommandIDs.tree, {
         execute: async (args: IRouter.ILocation) => {
           if (set.isDisposed) {
             return;
           }
 
-          const treeMatch = args.path.match(treePattern);
-          const workspaceMatch = args.path.match(workspacePattern);
-          const match = treeMatch || workspaceMatch;
-          const file = match ? decodeURI(match[1]) : '';
-          const workspace = PathExt.basename(resolver.name);
           const query = URLExt.queryStringToObject(args.search ?? '');
           const browser = query['file-browser-path'] || '';
 
           // Remove the file browser path from the query string.
           delete query['file-browser-path'];
 
-          // Remove the tree portion of the URL.
-          const url =
-            (workspaceMatch
-              ? URLExt.join(paths.urls.workspaces, workspace)
-              : paths.urls.app) +
-            URLExt.objectToQueryString(query) +
-            args.hash;
-
-          // Route to the cleaned URL.
-          router.navigate(url);
-
           // Clean up artifacts immediately upon routing.
           set.dispose();
 
-          delegate.resolve({ browser, file });
+          delegate.resolve({ browser, file: PageConfig.getOption('treePath') });
         }
       })
     );
     set.add(
       router.register({ command: CommandIDs.tree, pattern: treePattern })
     );
-    set.add(
-      router.register({ command: CommandIDs.tree, pattern: workspacePattern })
-    );
 
     // If a route is handled by the router without the tree command being
     // invoked, resolve to `null` and clean up artifacts.
@@ -433,7 +462,8 @@ const sidebar: JupyterFrontEndPlugin<void> = {
   activate: (
     app: JupyterFrontEnd,
     settingRegistry: ISettingRegistry,
-    labShell: ILabShell
+    labShell: ILabShell,
+    info: JupyterLab.IInfo
   ) => {
     type overrideMap = { [id: string]: 'left' | 'right' };
     let overrides: overrideMap = {};
@@ -567,7 +597,7 @@ function addCommands(app: JupyterLab, palette: ICommandPalette | null): void {
   // Find the tab area for a widget within the main dock area.
   const tabAreaFor = (widget: Widget): DockLayout.ITabAreaConfig | null => {
     const { mainArea } = shell.saveLayout();
-    if (!mainArea || mainArea.mode !== 'multiple-document') {
+    if (!mainArea || PageConfig.getOption('mode') !== 'multiple-document') {
       return null;
     }
     const area = mainArea.dock?.main;

packages/application/src/frontend.ts

@@ -303,6 +303,22 @@ export namespace JupyterFrontEnd {
     widgets(area?: string): IIterator<Widget>;
   }
 
+  /**
+   * Is JupyterLab in document mode?
+   *
+   * @param path - Full URL of JupyterLab
+   * @param paths - The current IPaths object hydrated from PageConfig.
+   */
+  export function inDocMode(path: string, paths: IPaths) {
+    const docPattern = new RegExp(`^${paths.urls.doc}`);
+    const match = path.match(docPattern);
+    if (match) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   /**
    * The application paths dictionary token.
    */
@@ -319,11 +335,10 @@ export namespace JupyterFrontEnd {
       readonly base: string;
       readonly notFound?: string;
       readonly app: string;
+      readonly doc: string;
       readonly static: string;
       readonly settings: string;
       readonly themes: string;
-      readonly tree: string;
-      readonly workspaces: string;
       readonly hubPrefix?: string;
       readonly hubHost?: string;
       readonly hubUser?: string;

packages/application/src/index.ts

@@ -17,4 +17,6 @@ export { ILabShell, LabShell } from './shell';
 
 export { ILabStatus } from './status';
 
+export { ITreePathUpdater } from './treepathupdater';
+
 export * from './tokens';

packages/application/src/lab.ts

@@ -94,11 +94,6 @@ export class JupyterLab extends JupyterFrontEnd<ILabShell> {
           this.shell.collapseRight();
           return;
         }
-        if (this.shell.mode === 'single-document') {
-          this.shell.collapseLeft();
-        } else {
-          this.shell.expandLeft();
-        }
       }, this);
       Private.setFormat(this);
     });
@@ -269,11 +264,10 @@ export namespace JupyterLab {
       base: PageConfig.getOption('baseUrl'),
       notFound: PageConfig.getOption('notFoundUrl'),
       app: PageConfig.getOption('appUrl'),
+      doc: PageConfig.getOption('docUrl'),
       static: PageConfig.getOption('staticUrl'),
       settings: PageConfig.getOption('settingsUrl'),
       themes: PageConfig.getOption('themesUrl'),
-      tree: PageConfig.getOption('treeUrl'),
-      workspaces: PageConfig.getOption('workspacesUrl'),
       hubHost: PageConfig.getOption('hubHost') || undefined,
       hubPrefix: PageConfig.getOption('hubPrefix') || undefined,
       hubUser: PageConfig.getOption('hubUser') || undefined,

packages/application/src/layoutrestorer.ts

@@ -582,7 +582,6 @@ namespace Private {
       dock: (area && area.dock && serializeArea(area.dock.main)) || null
     };
     if (area) {
-      dehydrated.mode = area.mode;
       if (area.currentWidget) {
         const current = Private.nameProperty.get(area.currentWidget);
         if (current) {
@@ -675,13 +674,10 @@ namespace Private {
 
     const name = (area as any).current || null;
     const dock = (area as any).dock || null;
-    const mode = (area as any).mode || null;
 
     return {
       currentWidget: (name && names.has(name) && names.get(name)) || null,
-      dock: dock ? { main: deserializeArea(dock, names) } : null,
-      mode:
-        mode === 'multiple-document' || mode === 'single-document' ? mode : null
+      dock: dock ? { main: deserializeArea(dock, names) } : null
     };
   }
 }

packages/application/src/router.ts

@@ -88,11 +88,13 @@ export class Router implements IRouter {
       return this.reload();
     }
 
-    // Because a `route()` call may still be in the stack after having received
-    // a `stop` token, wait for the next stack frame before calling `route()`.
-    requestAnimationFrame(() => {
-      void this.route();
-    });
+    if (!options.skipRouting) {
+      // Because a `route()` call may still be in the stack after having received
+      // a `stop` token, wait for the next stack frame before calling `route()`.
+      requestAnimationFrame(() => {
+        void this.route();
+      });
+    }
   }
 
   /**