Merge pull request #3159 from jasongrout/createnewcellview

Create new view of cell in cell context menu

packages/cells/src/widget.ts

@@ -311,6 +311,17 @@ class Cell extends Widget {
     return;
   }
 
+  /**
+   * Clone the cell, using the same model.
+   */
+  clone(): Cell {
+    let constructor = this.constructor as typeof Cell;
+    return new constructor({
+      model: this.model,
+      contentFactory: this.contentFactory
+    });
+  }
+
   /**
    * Dispose of the resources held by the widget.
    */
@@ -609,6 +620,18 @@ class CodeCell extends Cell {
     }
   }
 
+  /**
+   * Clone the cell, using the same model.
+   */
+  clone(): CodeCell {
+    let constructor = this.constructor as typeof CodeCell;
+    return new constructor({
+      model: this.model,
+      contentFactory: this.contentFactory,
+      rendermime: this._rendermime
+    });
+  }
+
   /**
    * Dispose of the resources used by the widget.
    */
@@ -849,6 +872,18 @@ class MarkdownCell extends Cell {
     return Promise.resolve(void 0);
   }
 
+  /**
+   * Clone the cell, using the same model.
+   */
+  clone(): MarkdownCell {
+    let constructor = this.constructor as typeof MarkdownCell;
+    return new constructor({
+      model: this.model,
+      contentFactory: this.contentFactory,
+      rendermime: this._rendermime
+    });
+  }
+
   private _monitor: ActivityMonitor<any, any> = null;
   private _renderer: IRenderMime.IRenderer = null;
   private _rendermime: RenderMime;
@@ -900,6 +935,17 @@ class RawCell extends Cell {
     this.addClass(RAW_CELL_CLASS);
   }
 
+  /**
+   * Clone the cell, using the same model.
+   */
+  clone(): RawCell {
+    let constructor = this.constructor as typeof RawCell;
+    return new constructor({
+      model: this.model,
+      contentFactory: this.contentFactory
+    });
+  }
+
   /**
    * The model used by the widget.
    */

packages/codeeditor/src/widget.ts

@@ -76,7 +76,7 @@ class CodeEditorWrapper extends Widget {
   protected onAfterAttach(msg: Message): void {
     super.onAfterAttach(msg);
     if (this.isVisible) {
-      this.editor.refresh();
+      this.update();
     }
   }
 
@@ -84,7 +84,7 @@ class CodeEditorWrapper extends Widget {
    * A message handler invoked on an `'after-show'` message.
    */
   protected onAfterShow(msg: Message): void {
-    this.editor.refresh();
+    this.update();
   }
 
   /**
@@ -98,6 +98,13 @@ class CodeEditorWrapper extends Widget {
     }
   }
 
+  /**
+   * A message handler invoked on an `'update-request'` message.
+   */
+  protected onUpdateRequest(msg: Message): void {
+      this.editor.refresh();
+  }
+
   /**
    * Handle a change in model selections.
    */

packages/notebook-extension/src/index.ts

@@ -14,7 +14,7 @@ import {
 } from '@jupyterlab/codeeditor';
 
 import {
-  IStateDB, PageConfig, URLExt
+  IStateDB, PageConfig, URLExt, uuid
 } from '@jupyterlab/coreutils';
 
 import {
@@ -39,7 +39,7 @@ import {
 } from '@phosphor/messaging';
 
 import {
-  Menu, Widget
+  Menu, Panel, Widget
 } from '@phosphor/widgets';
 
 
@@ -69,6 +69,9 @@ namespace CommandIDs {
   export
   const createConsole = 'notebook:create-console';
 
+  export
+  const createCellView = 'notebook:create-cell-view';
+
   export
   const clearAllOutputs = 'notebook:clear-all-cell-outputs';
 
@@ -463,6 +466,10 @@ function activateNotebookHandler(app: JupyterLab, mainMenu: IMainMenu, palette:
     command: CommandIDs.split,
     selector: '.jp-Notebook .jp-Cell'
   });
+  app.contextMenu.addItem({
+    command: CommandIDs.createCellView,
+    selector: '.jp-Notebook .jp-Cell'
+  });
   app.contextMenu.addItem({
     type: 'separator',
     selector: '.jp-Notebook',
@@ -1006,6 +1013,27 @@ function addCommands(app: JupyterLab, services: ServiceManager, tracker: Noteboo
     },
     isEnabled: hasWidget
   });
+  commands.addCommand(CommandIDs.createCellView, {
+    label: 'Create New View for Cell',
+    execute: args => {
+      const current = getCurrent(args);
+      const nb = current.notebook;
+      const newCell = nb.activeCell.clone();
+
+      const CellPanel = class extends Panel {
+        protected onCloseRequest(msg: Message): void {
+          this.dispose();
+        }
+      };
+      const p = new CellPanel();
+      p.id = `Cell-${uuid()}`;
+      p.title.closable = true;
+      p.title.label = current.title.label ? `Cell: ${current.title.label}` : 'Cell';
+      p.addWidget(newCell);
+      shell.addToMainArea(p);
+    },
+    isEnabled: hasWidget
+  });
   commands.addCommand(CommandIDs.createConsole, {
     label: 'Create Console for Notebook',
     execute: args => {

test/src/codeeditor/widget.spec.ts

@@ -178,24 +178,30 @@ describe('CodeEditorWrapper', () => {
 
   describe('#onAfterAttach()', () => {
 
-    it('should refresh the editor', () => {
+    it('should refresh the editor', (done) => {
       Widget.attach(widget, document.body);
       let editor = widget.editor as LogEditor;
-      expect(editor.methods).to.contain('refresh');
+      requestAnimationFrame(() => {
+        expect(editor.methods).to.contain('refresh');
+        done();
+      });
     });
 
   });
 
   describe('#onAfterShow()', () => {
 
-    it('should refresh the editor', () => {
+    it('should refresh the editor', (done) => {
       widget.hide();
       Widget.attach(widget, document.body);
       let editor = widget.editor as LogEditor;
       expect(editor.methods).to.not.contain('refresh');
       widget.show();
       expect(widget.methods).to.contain('onAfterShow');
-      expect(editor.methods).to.contain('refresh');
+      requestAnimationFrame(() => {
+        expect(editor.methods).to.contain('refresh');
+        done();
+      });
     });
 
   });

test/src/completer/widget.spec.ts

@@ -589,6 +589,7 @@ describe('completer/widget', () => {
 
           panel.addWidget(code);
           Widget.attach(panel, document.body);
+          editor.refresh();
 
           let position = code.editor.getPositionAt(text.length);
           let coords = code.editor.getCoordinateForPosition(position);