Add error indicator in Table of Contents

galata/test/jupyterlab/toc-running.test.ts

@@ -1,4 +1,4 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 import { expect, test } from '@jupyterlab/galata';
@@ -14,6 +14,8 @@
     await page.notebook.addCell('code', 'sleep(2)');
     await page.notebook.addCell('markdown', '## Title 1.2');
     await page.notebook.addCell('code', 'sleep(1)');
+    await page.notebook.addCell('markdown', '## Title 1.3');
+    await page.notebook.addCell('code', 'raise ValueError("Test error")');
 
     await page.sidebar.openTab('table-of-contents');
     await page.waitForSelector(
@@ -27,13 +29,26 @@
     );
     const executed = page.notebook.run();
     await tocPanel.waitForSelector('[data-running="1"]');
     expect(await tocPanel.screenshot()).toMatchSnapshot(
       'toc-running-indicators.png'
     );
 
     await executed;
   });
 
+  test('should display error indicators', async ({ page }) => {
+    const tocPanel = await page.sidebar.getContentPanel(
+      await page.sidebar.getTabPosition('table-of-contents')
+    );
+    const executed = page.notebook.run();
+    await tocPanel.waitForSelector('[data-running="-1"]');
+    expect(await tocPanel.screenshot()).toMatchSnapshot(
+      'toc-running-indicator-error.png'
+    );
+
+    await executed;
+  });
+
   test('should display running indicator on first visible top level', async ({
     page
   }) => {

packages/notebook/src/actions.tsx

@@ -109,6 +109,13 @@ export class NotebookActions {
     return Private.selectionExecuted;
   }
 
+  /**
+   * A signal that emits when a cell's output is cleared.
+   */
+  static get outputCleared(): ISignal<any, { notebook: Notebook; cell: Cell }> {
+    return Private.outputCleared;
+  }
+
   /**
    * A private constructor for the `NotebookActions` class.
    *
@@ -1420,6 +1427,7 @@ export namespace NotebookActions {
           (cell as ICodeCellModel).clearExecution();
           (child as CodeCell).outputHidden = false;
         }, false);
+        Private.outputCleared.emit({ notebook, cell: child });
       }
     }
     Private.handleState(notebook, state, true);
@@ -1448,6 +1456,7 @@ export namespace NotebookActions {
           (cell as ICodeCellModel).clearExecution();
           (child as CodeCell).outputHidden = false;
         }, false);
+        Private.outputCleared.emit({ notebook, cell: child });
       }
     }
     Private.handleState(notebook, state, true);
@@ -2111,6 +2120,14 @@ namespace Private {
     { notebook: Notebook; lastCell: Cell }
   >({});
 
+  /**
+   * A signal that emits when one notebook's cells are all executed.
+   */
+  export const outputCleared = new Signal<
+    any,
+    { notebook: Notebook; cell: Cell }
+  >({});
+
   /**
    * The interface for a widget state.
    */

packages/notebook/src/toc.ts

@@ -9,7 +9,7 @@ import {
   TableOfContentsModel,
   TableOfContentsUtils
 } from '@jupyterlab/toc';
-import { NotebookActions } from './actions';
+import { KernelError, NotebookActions } from './actions';
 import { NotebookPanel } from './panel';
 import { INotebookTracker } from './tokens';
 import { Notebook } from './widget';
@@ -21,7 +21,11 @@ export enum RunningStatus {
   /**
    * Cell is idle
    */
-  Idle = -1,
+  Idle = -2,
+  /**
+   * Cell execution is unsuccessful
+   */
+  Error = -1,
   /**
    * Cell execution is scheduled
    */
@@ -80,6 +84,7 @@ export class NotebookToCModel extends TableOfContentsModel<
   ) {
     super(widget, configuration);
     this._runningCells = new Array<Cell>();
+    this._errorCells = new Array<Cell>();
     this._cellToHeadingIndex = new WeakMap<Cell, number>();
 
     void widget.context.ready.then(() => {
@@ -97,6 +102,7 @@ export class NotebookToCModel extends TableOfContentsModel<
     );
     NotebookActions.executionScheduled.connect(this.onExecutionScheduled, this);
     NotebookActions.executed.connect(this.onExecuted, this);
+    NotebookActions.outputCleared.connect(this.onOutputCleared, this);
     this.headingsChanged.connect(this.onHeadingsChanged, this);
   }
 
@@ -180,8 +186,10 @@ export class NotebookToCModel extends TableOfContentsModel<
       this
     );
     NotebookActions.executed.disconnect(this.onExecuted, this);
+    NotebookActions.outputCleared.disconnect(this.onOutputCleared, this);
 
     this._runningCells.length = 0;
+    this._errorCells.length = 0;
 
     super.dispose();
   }
@@ -344,7 +352,12 @@ export class NotebookToCModel extends TableOfContentsModel<
 
   protected onExecuted(
     _: unknown,
-    args: { notebook: Notebook; cell: Cell }
+    args: {
+      notebook: Notebook;
+      cell: Cell;
+      success: boolean;
+      error: KernelError | null;
+    }
   ): void {
     this._runningCells.forEach((cell, index) => {
       if (cell === args.cell) {
@@ -353,7 +366,16 @@ export class NotebookToCModel extends TableOfContentsModel<
         const headingIndex = this._cellToHeadingIndex.get(cell);
         if (headingIndex !== undefined) {
           const heading = this.headings[headingIndex];
-          heading.isRunning = RunningStatus.Idle;
+          // when the execution is not successful but errorName is undefined,
+          // the execution is interrupted by previous cells
+          if (args.success || args.error?.errorName === undefined) {
+            heading.isRunning = RunningStatus.Idle;
+            return;
+          }
+          heading.isRunning = RunningStatus.Error;
+          if (!this._errorCells.includes(cell)) {
+            this._errorCells.push(cell);
+          }
         }
       }
     });
@@ -374,6 +396,25 @@ export class NotebookToCModel extends TableOfContentsModel<
     this.stateChanged.emit();
   }
 
+  protected onOutputCleared(
+    _: unknown,
+    args: { notebook: Notebook; cell: Cell }
+  ): void {
+    this._errorCells.forEach((cell, index) => {
+      if (cell === args.cell) {
+        this._errorCells.splice(index, 1);
+
+        const headingIndex = this._cellToHeadingIndex.get(cell);
+        if (headingIndex !== undefined) {
+          const heading = this.headings[headingIndex];
+          heading.isRunning = RunningStatus.Idle;
+        }
+      }
+    });
+    this.updateRunningStatus(this.headings);
+    this.stateChanged.emit();
+  }
+
   protected onMetadataChanged(): void {
     this.setConfiguration({});
   }
@@ -384,10 +425,24 @@ export class NotebookToCModel extends TableOfContentsModel<
       const headingIndex = this._cellToHeadingIndex.get(cell);
       if (headingIndex !== undefined) {
         const heading = this.headings[headingIndex];
-        heading.isRunning = Math.max(
-          index > 0 ? RunningStatus.Scheduled : RunningStatus.Running,
-          heading.isRunning
-        );
+        // Running is prioritized over Scheduled, so if a heading is
+        // running don't change status
+        if (heading.isRunning !== RunningStatus.Running) {
+          heading.isRunning =
+            index > 0 ? RunningStatus.Scheduled : RunningStatus.Running;
+        }
+      }
+    });
+
+    this._errorCells.forEach((cell, index) => {
+      const headingIndex = this._cellToHeadingIndex.get(cell);
+      if (headingIndex !== undefined) {
+        const heading = this.headings[headingIndex];
+        // Running and Scheduled are prioritized over Error, so only if
+        // a heading is idle will it be set to Error
+        if (heading.isRunning === RunningStatus.Idle) {
+          heading.isRunning = RunningStatus.Error;
+        }
       }
     });
 
@@ -463,6 +518,7 @@ export class NotebookToCModel extends TableOfContentsModel<
   };
 
   private _runningCells: Cell[];
+  private _errorCells: Cell[];
   private _cellToHeadingIndex: WeakMap<Cell, number>;
 }
 

packages/notebook/style/toc.css

@@ -30,7 +30,14 @@
   background-color: var(--jp-inverse-layout-color3);
 }
 
+.jp-tocItem-content[data-running='-1']::after {
+  border-radius: 50%;
+  border: var(--jp-border-width) solid var(--jp-error-color2);
+  background-color: var(--jp-error-color2);
+}
+
 .jp-tocItem-content[data-running='0'],
-.jp-tocItem-content[data-running='1'] {
+.jp-tocItem-content[data-running='1'],
+.jp-tocItem-content[data-running='-1'] {
   margin-right: 12px;
 }