Get very basic widget functionality working

examples/lab/webpack.conf.js

@@ -14,6 +14,15 @@ module.exports = {
     loaders: [
       { test: /\.css$/, loader: 'style-loader!css-loader' },
       { test: /\.json$/, loader: 'json-loader' },
+      // jquery-ui loads some images
+      { test: /\.(jpg|png|gif)$/, loader: "file" },
+      // required to load font-awesome
+      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
+      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/font-woff" },
+      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=application/octet-stream" },
+      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
+      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&minetype=image/svg+xml" }
+
     ]
   },
     externals: {

package.json

@@ -9,7 +9,7 @@
     "jupyter-js-cells": "^0.2.5",
     "jupyter-js-filebrowser": "^0.4.9",
     "jupyter-js-notebook": "^0.3.7",
-    "jupyter-js-services": "^0.4.1",
+    "jupyter-js-services": "^0.4.2",
     "jupyter-js-terminal": "^0.1.12",
     "jupyter-js-utils": "^0.2.7",
     "jupyter-js-widgets": "^0.0.2",
@@ -23,6 +23,7 @@
   "devDependencies": {
     "css-loader": "^0.23.1",
     "expect.js": "^0.3.1",
+    "file-loader": "^0.8.5",
     "fs-extra": "^0.26.4",
     "istanbul-instrumenter-loader": "^0.1.3",
     "json-loader": "^0.5.4",
@@ -38,6 +39,7 @@
     "style-loader": "^0.13.0",
     "typedoc": "^0.3.12",
     "typescript": "^1.7.5",
+    "url-loader": "^0.5.7",
     "webpack": "^1.12.11"
   },
   "scripts": {

src/notebook/plugin.ts

@@ -144,6 +144,12 @@ class NotebookFileHandler extends AbstractFileHandler {
     let button = new Widget();
     let b = document.createElement('button');
     b.appendChild(document.createTextNode('Execute Current Cell'))
+    button.node.appendChild(b);
+
+    
+    let widgetarea = new Widget();
+    let manager = new WidgetManager(widgetarea.node);    
+    
     this.session.startNew({notebookPath: path}).then(s => {
       b.addEventListener('click', ev=> {
         executeSelectedCell(model, s);
@@ -157,10 +163,12 @@ class NotebookFileHandler extends AbstractFileHandler {
         let comm = kernel.connectToComm('jupyter.widget', content.comm_id);
         console.log('comm message', msg);
         
+        let modelPromise = manager.handle_comm_open(comm, msg);
         
+
         comm.onMsg = (msg) => {
-          // TODO: create a widget and hand it the comm
-          // render the widget to the widget display area
+          manager.handle_comm_open(comm, msg)
+          // create the widget model and (if needed) the view
           console.log('comm widget message', msg);
         }
         comm.onClose = (msg) => {
@@ -168,10 +176,7 @@ class NotebookFileHandler extends AbstractFileHandler {
         }
       })
     })
-    button.node.appendChild(b);
 
-    let widgetarea = new Widget();
-    var manager = new WidgetManager(widgetarea.node);
     
     
 

src/notebook/widgetmanager.ts

@@ -0,0 +1,45 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+'use strict';
+
+import {
+    ManagerBase, Comm//, shims
+} from 'jupyter-js-widgets';
+
+//require('jupyter-js-widgets/static/components/bootstrap/css/bootstrap.css')
+require('jupyter-js-widgets/node_modules/jquery-ui/themes/smoothness/jquery-ui.min.css')
+require("jupyter-js-widgets/static/widgets/css/widgets.min.css");
+
+export
+class WidgetManager extends ManagerBase {
+    constructor(el: HTMLElement) {
+        super()
+        this.el = el;
+
+    }
+   
+    display_view(msg: any, view: any, options: any) {
+        return Promise.resolve(view).then(view => {
+            this.el.appendChild(view.el)
+            view.on('remove', () => {
+                console.log('View removed', view);
+            });
+            return view;
+        });
+    }
+    
+    
+    /**
+     * Handle when a comm is opened.
+     */
+    handle_comm_open(comm: any, msg: any) {
+        // Convert jupyter-js-services comm to old comm
+        // so that widget models use it compatibly
+        
+        let oldComm = new Comm(comm);
+        return super.handle_comm_open(oldComm, msg);        
+    };
+
+    
+    el: HTMLElement;
+}

typings/widgets.d.ts

@@ -0,0 +1,16 @@
+// 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: Comm, msg: any): Promise<any>;
+    }
+    export class Comm {
+        constructor(comm: any);
+    }
+}
+
+declare module "jupyter-js-widgets" {
+    export = Widgets;
+}