Refactor of Notebook and Console Content Factories

examples/console/package.json

@@ -5,7 +5,7 @@
     "build": "tsc --project src && webpack --config webpack.conf.js",
     "clean": "rimraf build && rimraf node_modules",
     "postinstall": "node ../../scripts/dedupe.js && npm run build",
-    "update": "rimraf node_modules/jupyterlab || npm install",
+    "update": "(rimraf node_modules/jupyterlab || true) && npm install",
     "watch": "watch \"npm run update && npm run build\" ../../src src --wait 10"
   },
   "dependencies": {

examples/console/src/index.ts

@@ -94,8 +94,14 @@ function startApp(session: Session.ISession) {
   }
   let sanitizer = defaultSanitizer;
   let rendermime = new RenderMime({ renderers, order, sanitizer });
-  let renderer = new ConsolePanel.Renderer({ editorServices });
-  let consolePanel = renderer.createConsole(rendermime, session);
+  let editorFactory = editorServices.factoryService.newInlineEditor;
+  let contentFactory = new ConsolePanel.ContentFactory({ editorFactory });
+  let consolePanel = new ConsolePanel({
+    rendermime,
+    session,
+    contentFactory,
+    mimeTypeService: editorServices.mimeTypeService
+  });
   consolePanel.title.label = TITLE;
 
   let palette = new CommandPalette({ commands, keymap });
@@ -119,30 +125,30 @@ function startApp(session: Session.ISession) {
   command = 'console:clear';
   commands.addCommand(command, {
     label: 'Clear',
-    execute: () => { consolePanel.content.clear(); }
+    execute: () => { consolePanel.console.clear(); }
   });
   palette.addItem({ command, category });
 
   command = 'console:execute';
   commands.addCommand(command, {
     label: 'Execute Prompt',
-    execute: () => { consolePanel.content.execute(); }
+    execute: () => { consolePanel.console.execute(); }
   });
   palette.addItem({ command, category });
   keymap.addBinding({ command,  selector,  keys: ['Enter'] });
 
   command = 'console:execute-forced';
   commands.addCommand(command, {
     label: 'Execute Cell (forced)',
-    execute: () => { consolePanel.content.execute(true); }
+    execute: () => { consolePanel.console.execute(true); }
   });
   palette.addItem({ command, category });
   keymap.addBinding({ command,  selector,  keys: ['Shift Enter'] });
 
   command = 'console:linebreak';
   commands.addCommand(command, {
     label: 'Insert Line Break',
-    execute: () => { consolePanel.content.insertLinebreak(); }
+    execute: () => { consolePanel.console.insertLinebreak(); }
   });
   palette.addItem({ command, category });
   keymap.addBinding({ command,  selector,  keys: ['Ctrl Enter'] });

examples/filebrowser/package.json

@@ -5,7 +5,7 @@
     "build": "tsc --project src && webpack --config webpack.conf.js",
     "clean": "rimraf build && rimraf node_modules",
     "postinstall": "node ../../scripts/dedupe.js && npm run build",
-    "update": "rimraf node_modules/jupyterlab || npm install",
+    "update": "(rimraf node_modules/jupyterlab || true) && npm install",
     "watch": "watch \"npm run update && npm run build\" ../../src src --wait 10"
   },
   "dependencies": {

examples/lab/package.json

@@ -5,7 +5,7 @@
     "build": "webpack --config webpack.conf.js",
     "clean": "rimraf build && rimraf node_modules",
     "postinstall": "node ../../scripts/dedupe.js && npm run build",
-    "update": "rimraf node_modules/jupyterlab || npm install",
+    "update": "(rimraf node_modules/jupyterlab || true) && npm install",
     "watch": "watch \"npm run update && npm run build\" ../../src --wait 10"
   },
   "dependencies": {

examples/notebook/package.json

@@ -5,7 +5,7 @@
     "build": "tsc --project src && webpack --config webpack.conf.js",
     "clean": "rimraf build && rimraf node_modules",
     "postinstall": "node ../../scripts/dedupe.js && npm run build",
-    "update": "rimraf node_modules/jupyterlab || npm install",
+    "update": "(rimraf node_modules/jupyterlab || true) && npm install",
     "watch": "watch \"npm run update && npm run build\" ../../src src --wait 10"
   },
   "dependencies": {

examples/notebook/src/index.ts

@@ -129,8 +129,8 @@ function createApp(manager: ServiceManager.IManager): void {
   });
   let mFactory = new NotebookModelFactory();
   let clipboard = new MimeData();
-  let notebookRenderer = new Notebook.Renderer({ editorServices });
-  let renderer = new NotebookPanel.Renderer({ notebookRenderer });
+  let editorFactory = editorServices.factoryService.newInlineEditor;
+  let contentFactory = new NotebookPanel.ContentFactory({ editorFactory });
 
   let wFactory = new NotebookWidgetFactory({
     name: 'Notebook',
@@ -139,7 +139,8 @@ function createApp(manager: ServiceManager.IManager): void {
     defaultFor: ['.ipynb'],
     preferKernel: true,
     canStartKernel: true,
-    rendermime, clipboard, renderer
+    rendermime, clipboard, contentFactory,
+    mimeTypeService: editorServices.mimeTypeService
   });
   docRegistry.addModelFactory(mFactory);
   docRegistry.addWidgetFactory(wFactory);
@@ -182,48 +183,48 @@ function createApp(manager: ServiceManager.IManager): void {
   commands.addCommand(cmdIds.runAndAdvance, {
     label: 'Run and Advance',
     execute: () => {
-      NotebookActions.runAndAdvance(nbWidget.content, nbWidget.context.kernel);
+      NotebookActions.runAndAdvance(nbWidget.notebook, nbWidget.context.kernel);
     }
   });
   commands.addCommand(cmdIds.editMode, {
     label: 'Edit Mode',
-    execute: () => { nbWidget.content.mode = 'edit'; }
+    execute: () => { nbWidget.notebook.mode = 'edit'; }
   });
   commands.addCommand(cmdIds.commandMode, {
     label: 'Command Mode',
-    execute: () => { nbWidget.content.mode = 'command'; }
+    execute: () => { nbWidget.notebook.mode = 'command'; }
   });
   commands.addCommand(cmdIds.selectBelow, {
     label: 'Select Below',
-    execute: () => NotebookActions.selectBelow(nbWidget.content)
+    execute: () => NotebookActions.selectBelow(nbWidget.notebook)
   });
   commands.addCommand(cmdIds.selectAbove, {
     label: 'Select Above',
-    execute: () => NotebookActions.selectAbove(nbWidget.content)
+    execute: () => NotebookActions.selectAbove(nbWidget.notebook)
   });
   commands.addCommand(cmdIds.extendAbove, {
     label: 'Extend Above',
-    execute: () => NotebookActions.extendSelectionAbove(nbWidget.content)
+    execute: () => NotebookActions.extendSelectionAbove(nbWidget.notebook)
   });
   commands.addCommand(cmdIds.extendBelow, {
     label: 'Extend Below',
-    execute: () => NotebookActions.extendSelectionBelow(nbWidget.content)
+    execute: () => NotebookActions.extendSelectionBelow(nbWidget.notebook)
   });
   commands.addCommand(cmdIds.merge, {
     label: 'Merge Cells',
-    execute: () => NotebookActions.mergeCells(nbWidget.content)
+    execute: () => NotebookActions.mergeCells(nbWidget.notebook)
   });
   commands.addCommand(cmdIds.split, {
     label: 'Split Cell',
-    execute: () => NotebookActions.splitCell(nbWidget.content)
+    execute: () => NotebookActions.splitCell(nbWidget.notebook)
   });
   commands.addCommand(cmdIds.undo, {
     label: 'Undo',
-    execute: () => NotebookActions.undo(nbWidget.content)
+    execute: () => NotebookActions.undo(nbWidget.notebook)
   });
   commands.addCommand(cmdIds.redo, {
     label: 'Redo',
-    execute: () => NotebookActions.redo(nbWidget.content)
+    execute: () => NotebookActions.redo(nbWidget.notebook)
   });
 
   let category = 'Notebook Operations';

examples/terminal/package.json

@@ -5,7 +5,7 @@
     "build": "tsc --project src && webpack --config webpack.conf.js",
     "clean": "rimraf build && rimraf node_modules",
     "postinstall": "node ../../scripts/dedupe.js && npm run build",
-    "update": "rimraf node_modules/jupyterlab || npm install",
+    "update": "(rimraf node_modules/jupyterlab || true) && npm install",
     "watch": "watch \"npm run update && npm run build\" ../../src src --wait 10"
   },
   "dependencies": {

scripts/travis_install.sh

@@ -2,17 +2,17 @@
 
 # Copyright (c) Jupyter Development Team.
 # Distributed under the terms of the Modified BSD License.
+set -x
 
-npm install
+npm update
 wget https://repo.continuum.io/miniconda/Miniconda3-latest-Linux-x86_64.sh -O miniconda.sh;
 bash miniconda.sh -b -p $HOME/miniconda
 export PATH="$HOME/miniconda/bin:$PATH"
 hash -r
 conda config --set always_yes yes --set changeps1 no
 conda update -q conda
 conda info -a
-conda install jupyter pytest
-conda install -c conda-forge notebook
+conda install -c conda-forge notebook pytest
 
 # create jupyter base dir (needed for config retreival)
 mkdir ~/.jupyter

src/codeeditor/editor.ts

@@ -684,8 +684,8 @@ namespace CodeEditor {
     readOnly?: boolean;
 
    /**
-     * The default selection style for the editor.
-     */
+    * The default selection style for the editor.
+    */
     selectionStyle?: CodeEditor.ISelectionStyle;
   }
 }

src/codeeditor/widget.ts

@@ -24,7 +24,14 @@ class CodeEditorWidget extends Widget {
    */
   constructor(options: CodeEditorWidget.IOptions) {
     super();
-    this._editor = options.factory({ host: this.node, model: options.model });
+    this._editor = options.factory({
+      host: this.node,
+      model: options.model,
+      uuid: options.uuid,
+      wordWrap: options.wordWrap,
+      readOnly: options.readOnly,
+      selectionStyle: options.selectionStyle
+    });
   }
 
   /**
@@ -175,5 +182,30 @@ namespace CodeEditorWidget {
      * The model used to initialize the code editor.
      */
     model: CodeEditor.IModel;
+
+    /**
+     * The desired uuid for the editor.
+     */
+    uuid?: string;
+
+    /**
+     * Whether line numbers should be displayed. Defaults to `false`.
+     */
+    lineNumbers?: boolean;
+
+    /**
+     * Set to false for horizontal scrolling. Defaults to `true`.
+     */
+    wordWrap?: boolean;
+
+    /**
+     * Whether the editor is read-only. Defaults to `false`.
+     */
+    readOnly?: boolean;
+
+   /**
+    * The default selection style for the editor.
+    */
+    selectionStyle?: CodeEditor.ISelectionStyle;
   }
 }

src/completer/handler.ts

@@ -134,7 +134,7 @@ class CellCompleterHandler implements IDisposable {
       coords,
       line: position.line,
       column: position.column
-    }
+    };
   }
 
   /**

src/completer/widget.ts

@@ -86,7 +86,7 @@ class CompleterWidget extends Widget {
     super({ node: document.createElement('ul') });
     this._renderer = options.renderer || CompleterWidget.defaultRenderer;
     this.anchor = options.anchor || null;
-    this.model = options.model || null;
+    this.model = options.model;
     this.addClass(COMPLETER_CLASS);
 
     // Completer widgets are hidden until they are populated.

src/console/foreign.ts

@@ -25,7 +25,7 @@ class ForeignHandler implements IDisposable {
    */
   constructor(options: ForeignHandler.IOptions) {
     this.kernel = options.kernel;
-    this._renderer = options.renderer.createCell;
+    this._factory = options.cellFactory;
     this._parent = options.parent;
   }
 
@@ -149,7 +149,7 @@ class ForeignHandler implements IDisposable {
    * Create a new code cell for an input originated from a foreign session.
    */
   private _newCell(parentMsgId: string): CodeCellWidget {
-    let cell = this._renderer();
+    let cell = this._factory();
     this._cells.set(parentMsgId, cell);
     this._parent.addCell(cell);
     return cell;
@@ -160,7 +160,7 @@ class ForeignHandler implements IDisposable {
   private _isDisposed = false;
   private _kernel: Kernel.IKernel = null;
   private _parent: ForeignHandler.IReceiver = null;
-  private _renderer: () => CodeCellWidget = null;
+  private _factory: () => CodeCellWidget = null;
 }
 
 
@@ -185,20 +185,9 @@ namespace ForeignHandler {
     parent: IReceiver;
 
     /**
-     * The renderer for creating cells to inject into the parent.
+     * The cell factory for foreign handlers.
      */
-    renderer: IRenderer;
-  }
-
-  /**
-   * A renderer for foreign handlers.
-   */
-  export
-  interface IRenderer {
-    /**
-     * Create a code cell.
-     */
-    createCell: () => CodeCellWidget;
+    cellFactory: () => CodeCellWidget;
   }
 
   /**

src/console/index.css

@@ -18,34 +18,34 @@
 }
 
 
-.jp-ConsoleContent {
+.jp-CodeConsole {
   height: 100%;
   padding: 0;
   display: flex;
   flex-direction: column;
 }
 
 
-.jp-ConsoleContent-content {
+.jp-CodeConsole-content {
   background-color: var(--jp-layout-color2);
   flex: 1 1 auto;
   overflow: auto;
 }
 
 
-.jp-ConsoleContent-content .jp-Cell.jp-ConsoleContent-foreignCell {
+.jp-CodeConsole-content .jp-Cell.jp-CodeConsole-foreignCell {
   background-color: var(--jp-layout-color3);
   flex: 1 1 auto;
   overflow: auto;
 }
 
 
-.jp-ConsoleContent-content .jp-Cell.jp-CodeCell.jp-mod-collapsed.jp-mod-readOnly {
+.jp-CodeConsole-content .jp-Cell.jp-CodeCell.jp-mod-collapsed.jp-mod-readOnly {
   padding-left: calc(2*var(--jp-private-console-cell-padding))
 }
 
 
-.jp-ConsoleContent-input {
+.jp-CodeConsole-input {
   max-height: 80%;
   flex: 0 0 auto;
   overflow: auto;
@@ -59,26 +59,26 @@
 }
 
 
-.jp-ConsoleContent-content .jp-InputArea-editor.jp-CellEditor {
+.jp-CodeConsole-content .jp-InputArea-editor.jp-CellEditor {
   background: transparent;
   border-color: transparent;
 }
 
 
 /* TODO: we should be able to use notebook styles for this */
-.jp-ConsoleContent-input .jp-ConsoleContent-prompt.jp-Cell {
+.jp-CodeConsole-input .jp-CodeConsole-prompt.jp-Cell {
   background: linear-gradient(to right, #66BB6A -40px, #66BB6A 5px, transparent 5px, transparent 100%);
   border-color: #66BB6A;
   border-left-width: var(--jp-border-width);
 }
 
 
-.jp-ConsoleContent-input .jp-ConsoleContent-prompt .jp-InputArea {
+.jp-CodeConsole-input .jp-CodeConsole-prompt .jp-InputArea {
   height: 100%;
   min-height: 100%;
 }
 
 
-.jp-ConsoleContent-content .jp-ConsoleContent-banner .jp-Cell-prompt {
+.jp-CodeConsole-content .jp-CodeConsole-banner .jp-Cell-prompt {
   display: none;
 }