@jupyterlab/notebook 4.7.0-alpha.1 → 4.7.0-alpha.2

package/src/executionindicator.tsx

@@ -154,7 +154,9 @@ export function ExecutionIndicatorComponent(
     return reactElement('busy', progressBar(percentage), [
       <span key={0}>
         {trans.__(
-          `Executed ${executedCellNumber}/${scheduledCellNumber} cells`
+          'Executed %1/%2 cells',
+          executedCellNumber,
+          scheduledCellNumber
         )}
       </span>,
       <span key={1}>
@@ -230,6 +232,22 @@ export class ExecutionIndicator extends VDomRenderer<ExecutionIndicator.Model> {
     this.addClass('jp-mod-highlighted');
   }
 
+  /**
+   * Dispose the widget and its model.
+   *
+   * `VDomRenderer.dispose` drops its reference to the model without
+   * disposing it; undisposed, the model stays connected to the session
+   * context (which outlives this widget) and its current notebook stays
+   * reachable. The model is owned here: it is created in the constructor.
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this.model?.dispose();
+    super.dispose();
+  }
+
   /**
    * Render the execution status item.
    */
@@ -378,13 +396,17 @@ export namespace ExecutionIndicator {
             this
           );
 
+          // The cleanup handlers are registered with this model as receiver:
+          // without one they would sit on the context until it is disposed,
+          // keeping the notebook captured by this scope reachable even after
+          // the model itself is disposed and cleared.
           context.disposed.connect(ctx => {
             ctx.connectionStatusChanged.disconnect(
               contextConnectionStatusChanged,
               this
             );
             ctx.statusChanged.disconnect(contextStatusChanged, this);
-          });
+          }, this);
           const handleKernelMsg = (
             sender: Kernel.IKernelConnection,
             msg: Kernel.IAnyMessageArgs
@@ -413,9 +435,10 @@ export namespace ExecutionIndicator {
               this._startTimer(nb);
             }
           };
-          context.session?.kernel?.anyMessage.connect(handleKernelMsg);
-          context.session?.kernel?.disposed.connect(kernel =>
-            kernel.anyMessage.disconnect(handleKernelMsg)
+          context.session?.kernel?.anyMessage.connect(handleKernelMsg, this);
+          context.session?.kernel?.disposed.connect(
+            kernel => kernel.anyMessage.disconnect(handleKernelMsg, this),
+            this
           );
           const kernelChangedSlot = (
             _: ISessionContext,
@@ -429,13 +452,14 @@ export namespace ExecutionIndicator {
               this._resetTime(state);
               this.stateChanged.emit(void 0);
               if (kernelData.newValue) {
-                kernelData.newValue.anyMessage.connect(handleKernelMsg);
+                kernelData.newValue.anyMessage.connect(handleKernelMsg, this);
               }
             }
           };
-          context.kernelChanged.connect(kernelChangedSlot);
-          context.disposed.connect(ctx =>
-            ctx.kernelChanged.disconnect(kernelChangedSlot)
+          context.kernelChanged.connect(kernelChangedSlot, this);
+          context.disposed.connect(
+            ctx => ctx.kernelChanged.disconnect(kernelChangedSlot, this),
+            this
           );
         }
       }
@@ -583,6 +607,15 @@ export namespace ExecutionIndicator {
      * @param  data - the state to be updated.
      */
     private _tick(data: IExecutionState): void {
+      if (this.isDisposed) {
+        // The slots that would clear this interval are disconnected when the
+        // model is disposed, so the interval has to terminate itself
+        // (`_notebookExecutionProgress` is a `WeakMap`, so `dispose` cannot
+        // enumerate the states to clear them there).
+        clearInterval(data.interval);
+        clearTimeout(data.timeout);
+        return;
+      }
       data.totalTime += 1;
       this.stateChanged.emit(void 0);
     }

package/src/notebooklspadapter.ts

@@ -32,15 +32,28 @@ export class NotebookAdapter extends WidgetLSPAdapter<NotebookPanel> {
     this.editor = editorWidget.content;
     this._cellToEditor = new WeakMap();
     this.isReady = this.isReady.bind(this);
-    Promise.all([
-      this.widget.context.sessionContext.ready,
-      this.connectionManager.ready
-    ])
+    const sessionContextReady = this.widget.context.sessionContext.ready;
+    const connectionManagerReady = this.connectionManager.ready;
+    const adapter: { current: NotebookAdapter | null } = { current: this };
+    this.disposed.connect(() => {
+      adapter.current = null;
+    });
+    void Promise.all([sessionContextReady, connectionManagerReady])
       .then(async () => {
-        await this.initOnceReady();
-        this._readyDelegate.resolve();
+        const currentAdapter = adapter.current;
+        if (!currentAdapter) {
+          return;
+        }
+        await currentAdapter.initOnceReady();
+        currentAdapter._readyDelegate.resolve();
       })
-      .catch(console.error);
+      .catch(reason => {
+        const currentAdapter = adapter.current;
+        if (!currentAdapter || currentAdapter.isDisposed) {
+          return;
+        }
+        console.error(reason);
+      });
   }
 
   /**
@@ -185,8 +198,14 @@ export class NotebookAdapter extends WidgetLSPAdapter<NotebookPanel> {
     try {
       // note: we need to wait until ready before updating language info
       const oldLanguageInfo = this._languageInfo;
-      await untilReady(this.isReady, -1);
+      await untilReady(() => this.isDisposed || this.isReady(), -1);
+      if (this.isDisposed) {
+        return;
+      }
       await this._updateLanguageInfo();
+      if (this.isDisposed) {
+        return;
+      }
       const newLanguageInfo = this._languageInfo;
       if (
         oldLanguageInfo?.name != newLanguageInfo.name ||
@@ -350,8 +369,14 @@ export class NotebookAdapter extends WidgetLSPAdapter<NotebookPanel> {
    * connect various signals.
    */
   protected async initOnceReady(): Promise<void> {
-    await untilReady(this.isReady.bind(this), -1);
+    await untilReady(() => this.isDisposed || this.isReady(), -1);
+    if (this.isDisposed) {
+      return;
+    }
     await this._updateLanguageInfo();
+    if (this.isDisposed) {
+      return;
+    }
     this.initVirtual();
 
     // connect the document, but do not open it as the adapter will handle this

package/src/panel.ts

@@ -6,6 +6,7 @@ import { isMarkdownCellModel } from '@jupyterlab/cells';
 import { PageConfig } from '@jupyterlab/coreutils';
 import type { DocumentRegistry } from '@jupyterlab/docregistry';
 import { DocumentWidget } from '@jupyterlab/docregistry';
+import type * as nbformat from '@jupyterlab/nbformat';
 import type { Kernel, KernelMessage, Session } from '@jupyterlab/services';
 import type { ITranslator } from '@jupyterlab/translation';
 import { Token } from '@lumino/coreutils';
@@ -250,10 +251,15 @@ export class NotebookPanel extends DocumentWidget<Notebook, INotebookModel> {
     if (this.isDisposed) {
       return;
     }
+    const oldSpec = this.model!.getMetadata(
+      'kernelspec'
+    ) as nbformat.IKernelspecMetadata;
+    const preserved = oldSpec?.name === kernel.name ? oldSpec : undefined;
     this.model!.setMetadata('kernelspec', {
       name: kernel.name,
-      display_name: spec?.display_name,
-      language: spec?.language
+      display_name:
+        spec?.display_name ?? preserved?.display_name ?? kernel.name,
+      language: spec?.language ?? preserved?.language
     });
   }
 

package/src/searchprovider.ts

@@ -24,6 +24,7 @@ import type { IObservableList, IObservableMap } from '@jupyterlab/observables';
 import type { ITranslator } from '@jupyterlab/translation';
 import { nullTranslator } from '@jupyterlab/translation';
 import { ArrayExt } from '@lumino/algorithm';
+import { Debouncer } from '@lumino/polling';
 import type { Widget } from '@lumino/widgets';
 import type { CellList } from './celllist';
 import { NotebookPanel } from './panel';
@@ -66,18 +67,9 @@ export class NotebookSearchProvider extends SearchProvider<NotebookPanel> {
 
   private _onNotebookStateChanged(_: Notebook, args: IChangedArgs<unknown>) {
     if (args.name === 'mode') {
-      // Delay the update to ensure that `document.activeElement` settled.
-      window.setTimeout(() => {
-        if (
-          args.newValue === 'command' &&
-          document.activeElement?.closest('.jp-DocumentSearch-overlay')
-        ) {
-          // Do not request updating mode when user switched focus to search overlay.
-          return;
-        }
-        this._updateSelectionMode();
-        this._filtersChanged.emit();
-      }, 0);
+      // Debounce to ensure that `document.activeElement` settled, and to keep
+      // only the most recent mode transition.
+      void this._modeChangeDebouncer.invoke();
     }
   }
 
@@ -206,6 +198,8 @@ export class NotebookSearchProvider extends SearchProvider<NotebookPanel> {
     );
     this._stopObservingLastCell();
 
+    this._modeChangeDebouncer.dispose();
+
     super.dispose();
 
     const index = this.widget.content.activeCellIndex;
@@ -794,7 +788,8 @@ export class NotebookSearchProvider extends SearchProvider<NotebookPanel> {
         return;
       }
       const currentMatch = searchEngine.getCurrentMatch();
-      if (!currentMatch && this.matchesCount) {
+      const matchesCount = this.matchesCount;
+      if (!currentMatch && matchesCount !== null && matchesCount > 0) {
         // Select a match as current by highlighting next (with looping) from
         // the selection start, to prevent "current" match from jumping around.
         await this.highlightNext(true, {
@@ -930,6 +925,19 @@ export class NotebookSearchProvider extends SearchProvider<NotebookPanel> {
   protected delayedActiveCellChangeHandlerReady: Promise<void>;
   private _currentProviderIndex: number | null = null;
   private _delayedActiveCellChangeHandler: number | null = null;
+  private _modeChangeDebouncer = new Debouncer(() => {
+    // The mode can change again before this handler runs; check the
+    // current mode because this is what `_updateSelectionMode()` acts on.
+    if (
+      this.widget.content.mode === 'command' &&
+      document.activeElement?.closest('.jp-DocumentSearch-overlay')
+    ) {
+      // Do not request updating mode when user switched focus to search overlay.
+      return;
+    }
+    this._updateSelectionMode();
+    this._filtersChanged.emit();
+  }, 0);
   private _filters: IFilters | undefined;
   private _onSelection = false;
   private _selectedCells: number = 1;

package/src/testutils.ts

@@ -5,6 +5,7 @@
 import type { ISessionContext } from '@jupyterlab/apputils';
 import {
   Clipboard,
+  Sanitizer,
   SessionContextDialogs,
   SystemClipboard
 } from '@jupyterlab/apputils';
@@ -202,10 +203,17 @@ export namespace NBTestUtils {
           kernelHistory: new NotebookHistory({ sessionContext: sessionContext })
         }
       : {};
+    // Render textual outputs synchronously in tests: the incremental
+    // (animation-frame based) pipeline bails out immediately for hosts that
+    // are not attached to the document, which is the norm in unit tests that
+    // never call `Widget.attach`.
+    const sanitizer = new Sanitizer();
+    sanitizer.setIncrementalAutolink(false);
     return new Notebook({
       rendermime: new RenderMimeRegistry({
         markdownParser: parser,
-        initialFactories: standardRendererFactories
+        initialFactories: standardRendererFactories,
+        sanitizer
       }),
       contentFactory: createNotebookFactory(),
       mimeTypeService,

package/src/widget.ts

@@ -386,6 +386,12 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
       this._contentVisibilityObserver = null;
     }
     super.dispose();
+    // Dispose cells that windowing modes may have detached from the layout.
+    for (const cell of this.cellsArray) {
+      cell.dispose();
+    }
+    this.cellsArray.length = 0;
+    this.viewModel.dispose();
   }
 
   protected onBeforeDetach(msg: Message): void {
@@ -620,7 +626,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     for (const cell of cells) {
       this._insertCell(++index, cell);
     }
-    this._syncMarkdownCellTrust();
+    this._syncCellTrust();
     newValue.cells.changed.connect(this._onCellsChanged, this);
     newValue.metadataChanged.connect(this.onMetadataChanged, this);
     newValue.contentChanged.connect(this.onModelContentChanged, this);
@@ -682,7 +688,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
       this.addHeader();
     }
 
-    this._syncMarkdownCellTrust();
+    this._syncCellTrust();
     this.update();
   }
 
@@ -710,7 +716,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     widget.addClass(NB_CELL_CLASS);
 
     ArrayExt.insert(this.cellsArray, index, widget);
-    this._syncMarkdownCellTrust(widget);
+    this._syncCellTrust(widget);
     this.onCellInserted(index, widget);
 
     this._scheduleCellRenderOnIdle();
@@ -821,8 +827,8 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     widget.dispose();
   }
 
-  private _shouldTrustMarkdown(): boolean {
-    // Note: this returns false in a notebook without trsuted code cells;
+  private _shouldTrustCell(): boolean {
+    // Note: this returns false in a notebook without trusted code cells;
     // This is intended since only Code cells carry trust status on disk.
     if (!this._notebookModel) {
       return false;
@@ -839,13 +845,19 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     return hasCodeCell;
   }
 
-  private _syncMarkdownCellTrust(cell?: Cell): void {
-    const trusted = this._shouldTrustMarkdown();
+  private _syncCellTrust(cell?: Cell): void {
+    const trusted = this._shouldTrustCell();
     const trustHandler = this.rendermime.trustHandler;
     if (!trustHandler) {
       return;
     }
 
+    if (trusted) {
+      trustHandler.markTrusted(this.node);
+    } else {
+      trustHandler.unmarkTrusted(this.node);
+    }
+
     const cells = cell ? [cell] : this.widgets;
     for (const widget of cells) {
       if (!(widget instanceof MarkdownCell)) {
@@ -864,7 +876,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
     args: IChangedArgs<any>
   ): void {
     if (args.name === 'trusted') {
-      this._syncMarkdownCellTrust();
+      this._syncCellTrust();
     }
   }
 
@@ -970,7 +982,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
 
   private _scheduleCellRenderOnIdle() {
     if (this.notebookConfig.windowingMode !== 'none' && !this.isDisposed) {
-      if (!this._idleCallBack) {
+      if (this._idleCallBack === null) {
         this._idleCallBack = requestIdleCallback(
           (deadline: IdleDeadline) => {
             this._idleCallBack = null;
@@ -1073,7 +1085,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
         this._scheduleCellRenderOnIdle();
       }
     } else {
-      if (this._idleCallBack) {
+      if (this._idleCallBack !== null) {
         window.cancelIdleCallback(this._idleCallBack);
         this._idleCallBack = null;
       }
@@ -1206,7 +1218,7 @@ export class StaticNotebook extends WindowedList<NotebookViewModel> {
           this._contentVisibilityObserver!.observe(cell.node);
         });
       });
-    });
+    }, this);
   }
 
   protected cellsArray: Array<Cell>;
@@ -1678,7 +1690,7 @@ class ScrollbarItem implements WindowedList.IRenderer.IScrollbarItem {
       state = 'error';
     } else if (model.executionState == 'running') {
       content = '[*]';
-    } else if (model.executionCount) {
+    } else if (model.executionCount !== null) {
       content = `[${model.executionCount}]`;
     } else {
       content = '[ ]';
@@ -2922,16 +2934,84 @@ export class Notebook extends StaticNotebook {
     }
   }
 
+  /**
+   * Find the cell containing a node, traversing open shadow roots.
+   *
+   * Returned cell is `null` if the node is not in a cell of this notebook.
+   */
+  private _cellContaining(node: Node | null): Cell | null {
+    let current = node;
+    while (current) {
+      const element =
+        current instanceof Element ? current : current.parentElement;
+      if (element) {
+        const index = this._findCell(element);
+        if (index !== -1) {
+          return this.widgets[index];
+        }
+      }
+      const root = (element ?? current).getRootNode();
+      current = root instanceof ShadowRoot ? root.host : null;
+    }
+    return null;
+  }
+
+  /**
+   * Whether a shift-click on `target` should be left to the browser to handle
+   * as an extension of the current text selection, rather than be turned into
+   * a cell range selection.
+   *
+   * This is the case when the click lands in a region of a cell whose text the
+   * browser selects - the output area of a code cell, or the rendered input of
+   * a rendered markdown cell - and the current selection starts in such a
+   * region too; see https://github.com/jupyterlab/jupyterlab/issues/4800. A
+   * click on a cell prompt, on cell chrome, or on a cell without such a region
+   * (an unrendered markdown cell, a code cell without outputs) always selects
+   * cells.
+   *
+   * #### Notes
+   * Only the anchor of the selection is considered, because a shift-click
+   * moves the focus and leaves the anchor in place. The anchor may sit in a
+   * different cell than the one clicked, which is what allows a selection to
+   * be extended across the outputs of several cells; and disregarding the
+   * focus keeps this working when a drag overshot the edge of an output and
+   * left the focus outside of it.
+   *
+   * This trade-off between extending the text selection and extending the cell
+   * selection can be adjusted in the future. For now the text selection wins to
+   * preserve the behaviour from before refactor that users may be accustomed to.
+   */
+  private _isExtendingTextSelection(
+    selection: Selection | null,
+    targetCell: Cell,
+    target: Node
+  ): boolean {
+    if (!selection || selection.isCollapsed) {
+      return false;
+    }
+    if (!Private.isInTextRegion(targetCell, target)) {
+      return false;
+    }
+    const { anchorNode } = selection;
+    // The selection usually starts in the very cell which was clicked, which
+    // can be checked without having to locate the cell of the anchor.
+    if (Private.isInTextRegion(targetCell, anchorNode)) {
+      return true;
+    }
+    const anchorCell = this._cellContaining(anchorNode);
+    return !!anchorCell && Private.isInTextRegion(anchorCell, anchorNode);
+  }
+
   /**
    * Find the cell index containing the target html element.
    *
    * #### Notes
    * Returns -1 if the cell is not found.
    */
-  private _findCell(node: HTMLElement): number {
+  private _findCell(node: Element): number {
     // Trace up the DOM hierarchy to find the root cell node.
     // Then find the corresponding child and select it.
-    let n: HTMLElement | null = node;
+    let n: Element | null = node;
     while (n && n !== this.node) {
       if (n.classList.contains(NB_CELL_CLASS)) {
         const i = ArrayExt.findFirstIndex(
@@ -3165,18 +3245,22 @@ export class Notebook extends StaticNotebook {
     if (targetArea === 'notebook') {
       this.deselectAll();
     } else if (targetArea === 'prompt' || targetArea === 'cell') {
-      // We don't want to prevent the default selection behavior
-      // if there is currently text selected in an output.
-      const hasSelection = (window.getSelection() ?? '').toString() !== '';
       if (
         button === 0 &&
         shiftKey &&
-        !hasSelection &&
-        !['INPUT', 'OPTION'].includes(target.tagName)
+        !['INPUT', 'OPTION'].includes(target.tagName) &&
+        // We don't want to prevent the default selection behavior when the
+        // user is extending a text selection into the clicked region.
+        !this._isExtendingTextSelection(window.getSelection(), widget, target)
       ) {
         // Prevent browser selecting text in prompt or output
         event.preventDefault();
 
+        // Preventing the default also stops the browser from collapsing any
+        // text selection which is already there; drop it explicitly so that
+        // stale highlighted text is not left over the new cell selection.
+        window.getSelection()?.removeAllRanges();
+
         // Shift-click - extend selection
         try {
           this.extendContiguousSelectionTo(index);
@@ -3474,7 +3558,7 @@ export class Notebook extends StaticNotebook {
       const executionCount = (activeCell.model as ICodeCellModel)
         .executionCount;
       countString = ' ';
-      if (executionCount) {
+      if (executionCount !== null) {
         countString = executionCount.toString();
       }
     } else {
@@ -3829,6 +3913,62 @@ namespace Private {
     }
   }
 
+  /**
+   * Check whether `node` is `parent` or a descendant of it.
+   *
+   * Unlike `Node.contains()` this traverses out of open shadow roots, so a
+   * node rendered by a widget library which attaches a shadow root (such as
+   * Panel or Bokeh) is still recognised as belonging to its host subtree.
+   */
+  function containsDeep(parent: Node, node: Node | null): boolean {
+    let current = node;
+    while (current) {
+      if (parent.contains(current)) {
+        return true;
+      }
+      const root = current.getRootNode();
+      current = root instanceof ShadowRoot ? root.host : null;
+    }
+    return false;
+  }
+
+  /**
+   * Whether a cell exposes an output area.
+   *
+   * #### Notes
+   * This is a structural check rather than `instanceof CodeCell` so that it
+   * still holds when a federated extension loads its own copy of
+   * `@jupyterlab/cells`.
+   */
+  function hasOutputArea(cell: Cell): cell is CodeCell {
+    return 'outputArea' in cell;
+  }
+
+  /**
+   * The regions of a cell whose text the browser, rather than the notebook,
+   * is responsible for selecting: the output area of a code cell and the
+   * rendered input of a cell which renders it, such as a rendered markdown
+   * cell.
+   */
+  function textRegionsOf(cell: Cell): Node[] {
+    const regions: Node[] = [];
+    if (hasOutputArea(cell)) {
+      regions.push(cell.outputArea.node);
+    }
+    const rendered = cell.inputArea?.renderedInput;
+    if (rendered) {
+      regions.push(rendered.node);
+    }
+    return regions;
+  }
+
+  /**
+   * Whether a node is in a region of a cell whose text the browser selects.
+   */
+  export function isInTextRegion(cell: Cell, node: Node | null): boolean {
+    return textRegionsOf(cell).some(region => containsDeep(region, node));
+  }
+
   /**
    * Create a cell drag image.
    */

package/style/base.css

@@ -281,6 +281,42 @@
   white-space: normal;
 }
 
+.jp-CellIdField {
+  padding: 12px 0;
+}
+
+.jp-CellIdField label {
+  display: block;
+  line-height: 1.4;
+}
+
+.jp-CellIdField-row {
+  display: flex;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.jp-CellIdField .jp-CellIdField-input {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  font-family: var(--jp-code-font-family);
+  font-size: var(--jp-code-font-size);
+}
+
+.jp-CellIdField .jp-CellIdField-button {
+  flex: 0 0 28px;
+  width: 28px;
+  padding: 2px;
+  margin: 0;
+  color: var(--jp-ui-font-color2);
+  transition: color 120ms ease;
+}
+
+.jp-CellIdField .jp-CellIdField-button.jp-mod-copied {
+  color: var(--jp-success-color1);
+}
+
 .jp-MetadataEditorTool {
   flex-direction: column;
   padding: 12px 0;