Backport PR #11457: Only show the head of the outputs and ensure iopub outputs are correctly displayed

packages/notebook-extension/schema/tracker.json

@@ -813,8 +813,8 @@
       "default": "1000px"
     },
     "maxNumberOutputs": {
-      "title": "The maximum number of output cells to to be rendered in the output area. Set to 0 to have the complete display.",
-      "description": "Defines the maximum number of output cells to to to be rendered in the output area for cells with many outputs. The output area will have a head and a tail, and the outputs between will be trimmed and not displayed unless the user clicks on the information message.",
+      "title": "The maximum number of output cells to be rendered in the output area. Set to 0 to have the complete display.",
+      "description": "Defines the maximum number of output cells to be rendered in the output area for cells with many outputs. The output area will have a head and the remaining outputs will be trimmed and not displayed unless the user clicks on the information message.",
       "type": "number",
       "default": 50
     },

packages/outputarea/src/widget.ts

@@ -97,8 +97,7 @@ export class OutputArea extends Widget {
     this.layout = new PanelLayout();
     this.trimmedOutputModels = new Array<IOutputModel>();
     this.maxNumberOutputs = options.maxNumberOutputs || 0;
-    this.headTailNumberOutputs = Math.round(this.maxNumberOutputs / 2);
-    this.headEndIndex = this.headTailNumberOutputs;
+    this.headEndIndex = this.maxNumberOutputs;
     for (let i = 0; i < model.length; i++) {
       const output = model.get(i);
       this._insertOutput(i, output);
@@ -133,12 +132,6 @@ export class OutputArea extends Widget {
    */
   private maxNumberOutputs: number;
 
-  /*
-   * The maximum outputs to show in the trimmed
-   * output head and tail areas.
-   */
-  private headTailNumberOutputs: number;
-
   /*
    * The index for the end of the head in case of trim mode.
    */
@@ -402,6 +395,10 @@ export class OutputArea extends Widget {
    * Update an output in the layout in place.
    */
   private _setOutput(index: number, model: IOutputModel): void {
+    if (index >= this.headEndIndex && this.maxNumberOutputs !== 0) {
+      this.trimmedOutputModels[index - this.headEndIndex] = model;
+      return;
+    }
     const layout = this.layout as PanelLayout;
     const panel = layout.widgets[index] as Panel;
     const renderer = (panel.widgets
@@ -444,17 +441,16 @@ export class OutputArea extends Widget {
           output_type: 'display_data',
           data: {
             'text/html': `
-              <a style="margin: 10px; text-decoration: none;">
+              <a style="margin: 10px; text-decoration: none; cursor: pointer;">
                 <pre>Output of this cell has been trimmed on the initial display.</pre>
-                <pre>Displaying the first ${this.maxNumberOutputs} top and last bottom outputs.</pre>
+                <pre>Displaying the first ${this.maxNumberOutputs} top outputs.</pre>
                 <pre>Click on this message to get the complete output.</pre>
               </a>
               `
           }
         }
       });
-      const onClick = () =>
-        this._showTrimmedOutputs(this.headTailNumberOutputs);
+      const onClick = () => this._showTrimmedOutputs();
       const separator = this.createOutputItem(separatorModel);
       separator!.node.addEventListener('click', onClick);
       const layout = this.layout as PanelLayout;
@@ -464,11 +460,8 @@ export class OutputArea extends Widget {
     const layout = this.layout as PanelLayout;
     if (index < this.maxNumberOutputs || this.maxNumberOutputs === 0) {
       layout.insertWidget(index, output);
-    } else if (index >= this.maxNumberOutputs) {
-      layout.removeWidgetAt(this.headTailNumberOutputs + 1);
-      layout.insertWidget(index, output);
     }
-    if (index >= this.headTailNumberOutputs && this.maxNumberOutputs !== 0) {
+    if (index >= this.maxNumberOutputs && this.maxNumberOutputs !== 0) {
       this.trimmedOutputModels.push(model);
     }
     if (!this._outputTracker.has(output)) {
@@ -497,16 +490,12 @@ export class OutputArea extends Widget {
    * Remove the information message related to the trimmed output
    * and show all previously trimmed outputs.
    */
-  private _showTrimmedOutputs(headTailNumberOutputs: number) {
+  private _showTrimmedOutputs() {
     const layout = this.layout as PanelLayout;
-    layout.removeWidgetAt(headTailNumberOutputs);
-    for (
-      let i = 0;
-      i < this.trimmedOutputModels.length - this.headTailNumberOutputs;
-      i++
-    ) {
+    layout.removeWidgetAt(this.headEndIndex);
+    for (let i = 0; i < this.trimmedOutputModels.length; i++) {
       const output = this._createOutput(this.trimmedOutputModels[i]);
-      layout.insertWidget(headTailNumberOutputs + i, output);
+      layout.insertWidget(this.headEndIndex + i, output);
     }
   }