Improved UX for cell output view. (#3415)

* Improved UX for cell output view.

* Fix code style.

* cleanup and use addSibling

packages/cells/src/widget.ts

@@ -632,6 +632,17 @@ class CodeCell extends Cell {
     });
   }
 
+  /**
+   * Clone the OutputArea alone, using the same model.
+   */
+  cloneOutputArea(): OutputArea {
+    return new OutputArea({
+      model: this.model.outputs,
+      contentFactory: this.contentFactory,
+      rendermime: this._rendermime,
+    });
+  }
+
   /**
    * Dispose of the resources used by the widget.
    */

packages/docmanager-extension/src/index.ts

@@ -95,9 +95,11 @@ const plugin: JupyterLabPlugin<IDocumentManager> = {
           app.shell.addToMainArea(widget);
 
           // Add a loading spinner, and remove it when the widget is ready.
-          let spinner = new Spinner();
-          widget.node.appendChild(spinner.node);
-          widget.ready.then(() => { widget.node.removeChild(spinner.node); });
+          if (widget.ready !== undefined) {
+            let spinner = new Spinner();
+            widget.node.appendChild(spinner.node);
+            widget.ready.then(() => { widget.node.removeChild(spinner.node); });
+          }
         }
         app.shell.activateById(widget.id);
 

packages/notebook-extension/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@jupyterlab/application": "^0.13.1",
     "@jupyterlab/apputils": "^0.13.1",
+    "@jupyterlab/cells": "^0.13.0",
     "@jupyterlab/codeeditor": "^0.13.0",
     "@jupyterlab/coreutils": "^0.13.0",
     "@jupyterlab/filebrowser": "^0.13.2",

packages/notebook-extension/src/index.ts

@@ -9,6 +9,10 @@ import {
   Dialog, ICommandPalette, MainAreaWidget, showDialog
 } from '@jupyterlab/apputils';
 
+import {
+  CodeCell
+} from '@jupyterlab/cells';
+
 import {
   IEditorServices
 } from '@jupyterlab/codeeditor';
@@ -85,7 +89,7 @@ namespace CommandIDs {
   const createConsole = 'notebook:create-console';
 
   export
-  const createCellView = 'notebook:create-cell-view';
+  const createOutputView = 'notebook:create-output-view';
 
   export
   const clearAllOutputs = 'notebook:clear-all-cell-outputs';
@@ -496,7 +500,7 @@ function activateNotebookHandler(app: JupyterLab, mainMenu: IMainMenu, palette:
     selector: '.jp-Notebook .jp-Cell'
   });
   app.contextMenu.addItem({
-    command: CommandIDs.createCellView,
+    command: CommandIDs.createOutputView,
     selector: '.jp-Notebook .jp-Cell'
   });
   app.contextMenu.addItem({
@@ -1136,23 +1140,32 @@ function addCommands(app: JupyterLab, services: ServiceManager, tracker: Noteboo
     },
     isEnabled
   });
-  commands.addCommand(CommandIDs.createCellView, {
-    label: 'Create New View for Cell',
+  commands.addCommand(CommandIDs.createOutputView, {
+    label: 'Create New View for Output',
     execute: args => {
+      // Clone the OutputArea
       const current = getCurrent(args);
       const nb = current.notebook;
-      const newCell = nb.activeCell.clone();
+      const outputAreaView = (nb.activeCell as CodeCell).cloneOutputArea();
+      // Create an empty toolbar
+      const toolbar = new Widget();
+      toolbar.addClass('jp-Toolbar');
+      toolbar.addClass('jp-LinkedOutputView-toolbar');
+      // Create a MainAreaWidget
       const layout = new PanelLayout();
-      const p = new MainAreaWidget({layout: layout});
-      p.id = `Cell-${uuid()}`;
-      p.title.closable = true;
-      p.title.label = current.title.label ? `Cell: ${current.title.label}` : 'Cell';
-      p.title.icon = NOTEBOOK_ICON_CLASS;
-      // Add the notebook class to give it all the styles of a cell in a notebook.
-      p.addClass('jp-Notebook');
-      p.addClass('jp-CellView');
-      layout.addWidget(newCell);
-      shell.addToMainArea(p);
+      const widget = new MainAreaWidget({ layout });
+      widget.id = `LinkedOutputView-${uuid()}`;
+      widget.title.label = 'Output View';
+      widget.title.icon = NOTEBOOK_ICON_CLASS;
+      widget.title.caption = current.title.label ? `For Notebook: ${current.title.label}` : 'For Notebook:';
+      widget.addClass('jp-LinkedOutputView');
+      layout.addWidget(toolbar);
+      layout.addWidget(outputAreaView);
+      current.context.addSibling(widget);
+      // Remove the output view if the parent notebook is closed.
+      nb.disposed.connect(
+        () => { widget.dispose(); }
+      );
     },
     isEnabled
   });

packages/notebook/style/index.css

@@ -273,3 +273,27 @@
 .jp-KeySelector label {
   line-height: 1.4;
 }
+
+
+/*-----------------------------------------------------------------------------
+| Output Area View
+|----------------------------------------------------------------------------*/
+
+
+.jp-LinkedOutputView .jp-OutputArea-prompt {
+  display: none;
+}
+
+
+.jp-LinkedOutputView .jp-OutputArea {
+  height: 100%;
+  padding: var(--jp-notebook-padding) 0px var(--jp-notebook-padding) var(--jp-notebook-padding);
+}
+
+
+.jp-LinkedOutputView-toolbar {
+  box-shadow: var(--jp-toolbar-box-shadow);
+  background: var(--jp-toolbar-background);
+  height: var(--jp-toolbar-micro-height);
+  z-index: 1;
+}