Get widgets to work

examples/lab/index.js

@@ -23,6 +23,7 @@ var app = new phosphide.Application({
     require('jupyter-js-plugins/lib/landing/plugin').landingExtension,
     require('jupyter-js-plugins/lib/console/plugin').consoleExtension,
     require('jupyter-js-plugins/lib/main/plugin').mainExtension,
+    require('jupyter-js-plugins/lib/widgets/index').widgetManagerExtension,
   ],
   providers: [
     require('jupyter-js-plugins/lib/clipboard/plugin').clipboardProvider,

package.json

@@ -12,7 +12,7 @@
     "jquery-ui": "^1.10.5",
     "jupyter-js-notebook": "^0.21.0",
     "jupyter-js-services": "^0.10.4",
-    "jupyter-js-ui": "^0.13.0",
+    "jupyter-js-ui": "^0.14.0",
     "jupyter-js-utils": "^0.4.0",
     "jupyter-js-widgets": "0.0.17",
     "phosphide": "^0.9.4",

src/backboneviewwrapper/plugin.ts

@@ -1,37 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-'use strict';
-
-import * as Backbone from 'backbone';
-
-import {
-  Widget
-} from 'phosphor-widget';
-
-
-/**
- * The class name added to an BackboneViewWrapper widget.
- */
-const BACKBONEVIEWWRAPPER_CLASS = 'jp-BackboneViewWrapper';
-
-
-/**
- * A phosphor widget which wraps a `Backbone` view instance.
- */
-export
-class BackboneViewWrapper extends Widget {
-  /**
-   * Construct a new `Backbone` wrapper widget.
-   *
-   * @param view - The `Backbone.View` instance being wrapped.
-   */
-  constructor(view: Backbone.View<any>) {
-    super();
-    view.on('remove', () => {
-      this.dispose();
-      console.log('View removed', view);
-    });
-    this.addClass(BACKBONEVIEWWRAPPER_CLASS);
-    this.node.appendChild(view.el);
-  }
-}

src/widgets/index.ts

@@ -0,0 +1,69 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  IWidgetExtension, IDocumentContext, IDocumentModel, DocumentRegistry
+} from 'jupyter-js-ui/lib/docmanager';
+
+import {
+  IDisposable, DisposableDelegate
+} from 'phosphor-disposable';
+
+import {
+  Widget
+} from 'phosphor-widget';
+
+import {
+  NotebookPanel
+} from 'jupyter-js-notebook/lib/notebook/panel';
+
+import {
+  Application
+} from 'phosphide/lib/core/application';
+
+import {
+  WidgetManager, WidgetRenderer
+} from 'jupyter-js-ui/lib/widgets';
+
+import {
+  IKernel
+} from 'jupyter-js-services';
+
+const WIDGET_MIMETYPE = 'application/vnd.jupyter.widget';
+
+
+/**
+ * The widget manager provider.
+ */
+export
+const widgetManagerExtension = {
+  id: 'jupyter.extensions.widgetManager',
+  requires: [DocumentRegistry],
+  activate: activateWidgetExtension
+};
+
+export
+class IPyWidgetExtension implements IWidgetExtension<NotebookPanel>{
+  /**
+   * Create a new extension object.
+   */
+  createNew(nb: NotebookPanel, model: IDocumentModel, 
+            context: IDocumentContext): IDisposable {
+    let wManager = new WidgetManager(context);
+    let wRenderer = new WidgetRenderer(wManager);
+
+    nb.content.rendermime.addRenderer(WIDGET_MIMETYPE, wRenderer, 0)
+    return new DisposableDelegate(() => {
+      nb.content.rendermime.removeRenderer(WIDGET_MIMETYPE);
+      wRenderer.dispose();
+      wManager.dispose();
+    })
+  }
+}
+
+/**
+ * Activate the widget extension.
+ */
+function activateWidgetExtension(app: Application, registry: DocumentRegistry) {
+  registry.registerExtension('Notebook', new IPyWidgetExtension());
+}

typings/jupyter-js-widgets/jupyter-js-widgets.d.ts

@@ -1,21 +1,26 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-declare module Widgets {
-    export class ManagerBase {
-        display_view(msg: any, view: any, options: any): Promise<any>;
-        handle_comm_open(comm: shims.services.Comm, msg: any): Promise<any>;
-    }
-    
-    export module shims {
-        export module services {
-            export class Comm {
-                constructor(comm: any);
-            }            
-        }
-    }
-}
+/// <reference path="../backbone/backbone-global.d.ts" />
+
 
 declare module "jupyter-js-widgets" {
-    export = Widgets;
+  import * as services from 'jupyter-js-services';
+
+  export class ManagerBase<T> {
+    display_view(msg: services.IKernelMessage, view: Backbone.View<Backbone.Model>, options: any): T;
+    handle_comm_open(comm: shims.services.Comm, msg: services.IKernelIOPubCommOpenMessage): Promise<Backbone.Model>;
+    display_model(msg: services.IKernelMessage, model: Backbone.Model, options: any): Promise<T>;
+    get_model(id: string): Promise<Backbone.Model>;
+    validateVersion(): Promise<boolean>;
+    comm_target_name: string;
+  }
+
+  export namespace shims {
+    export namespace services {
+      export class Comm {
+        constructor(comm: any);
+      }
+    }
+  }
 }