Add support for ipywidgets (#125)

* Add support for ipywidgets

* Use SimplifiedOutputArea for widgets

* Fix DummyHandler

* Section and screenshot about ipywidgets in README.md

* Move widget check to check_imported

* Check isAttached before recreating the table

* Add ipywidgets to Binder

Author: jtpio

README.md

@@ -14,6 +14,7 @@ For the time being, this project is still in its first steps. Contributions in a
 
 - Allows inspection of variables for both python consoles and python notebooks
 - Allows inspection of matrices in a datagrid-viewer. This might not work for large matrices.
+- Allows an inline and interactive inspection of Jupyter Widgets.
 
 ## Prerequisites
 
@@ -25,6 +26,17 @@ For the time being, this project is still in its first steps. Contributions in a
 - `pyspark` for spark support.
 - `tensorflow` and `keras` to allow inspection of tf objects.
 
+### Requirements for `ipywidgets` functionality
+
+The variable inspector can also display Jupyter interactive widgets:
+
+![ipywidgets](./ipywidgets.png)
+
+The requirements for this functionality are:
+
+- `ipywidgets`
+- Support for widgets in JupyterLab: `jupyter labextension install @jupyter-widgets/jupyterlab-manager`
+
 ### Requirements for R functionality
 
 - The `repr` library.

binder/environment.yml

@@ -2,6 +2,7 @@ name: jupyterlab-variable-inspector
 channels:
 - conda-forge
 dependencies:
+- ipywidgets=7
 - jupyterlab=1
 - numpy
 - pandas

ipywidgets.png

@@ -1,3 +1,7 @@
+import {
+    IRenderMimeRegistry
+} from '@jupyterlab/rendermime';
+
 import {
     IDisposable
 } from '@phosphor/disposable';
@@ -15,7 +19,7 @@ import {
 } from "@jupyterlab/apputils";
 
 import {
-    KernelMessage
+    KernelMessage, Kernel
 } from "@jupyterlab/services";
 
 import {
@@ -37,9 +41,11 @@ export
     class VariableInspectionHandler implements IDisposable, IVariableInspector.IInspectable {
 
     private _connector: KernelConnector;
-    private _queryCommand: string;
+    private _rendermime: IRenderMimeRegistry;
     private _initScript: string;
+    private _queryCommand: string;
     private _matrixQueryCommand: string;
+    private _widgetQueryCommand: string;
     private _deleteCommand: string;
     private _disposed = new Signal<this, void>( this );
     private _inspected = new Signal<this, IVariableInspector.IVariableInspectorUpdate>( this );
@@ -49,10 +55,12 @@ export
 
 
     constructor( options: VariableInspectionHandler.IOptions ) {
-        this._connector = options.connector;
         this._id = options.id;
+        this._connector = options.connector;
+        this._rendermime = options.rendermime;
         this._queryCommand = options.queryCommand;
         this._matrixQueryCommand = options.matrixQueryCommand;
+        this._widgetQueryCommand = options.widgetQueryCommand;
         this._deleteCommand = options.deleteCommand;
         this._initScript = options.initScript;
 
@@ -84,6 +92,10 @@ export
     get id():string{
         return this._id;
     }
+
+    get rendermime() {
+        return this._rendermime;
+    }
 
     /**
      * A signal emitted when the handler is disposed.
@@ -120,6 +132,18 @@ export
         this._connector.fetch( content, this._handleQueryResponse );
     }
 
+    /**
+     * Performs an inspection of a Jupyter Widget
+     */
+    public performWidgetInspection(varName: string) {
+        const request: KernelMessage.IExecuteRequestMsg['content'] = {
+            code: this._widgetQueryCommand + "(" + varName + ")",
+            stop_on_error: false,
+            store_history: false
+        };
+        return this._connector.execute(request);
+    }
+
     /**
      * Performs an inspection of the specified matrix.
      */
@@ -259,7 +283,7 @@ export
         switch ( msgType ) {
             case 'execute_input':
                 let code = msg.content.code;
-                if ( !( code == this._queryCommand ) && !( code == this._matrixQueryCommand ) ) {
+                if ( !( code == this._queryCommand ) && !( code == this._matrixQueryCommand ) && !( code.startsWith(this._widgetQueryCommand) ) ) {
                     this.performInspection();
                 }
                 break;
@@ -280,8 +304,10 @@ namespace VariableInspectionHandler {
     export
         interface IOptions {
         connector: KernelConnector;
+        rendermime?: IRenderMimeRegistry;
         queryCommand: string;
         matrixQueryCommand: string;
+        widgetQueryCommand: string;
         deleteCommand: string;
         initScript: string;
         id : string;
@@ -294,6 +320,7 @@ export
         private _disposed = new Signal<this,void>( this );
         private _inspected = new Signal<this, IVariableInspector.IVariableInspectorUpdate>( this );
         private _connector : KernelConnector;
+        private _rendermime : IRenderMimeRegistry = null;
 
         constructor(connector : KernelConnector) {
             this._connector = connector;
@@ -310,6 +337,10 @@ export
         get inspected() : ISignal<DummyHandler, IVariableInspector.IVariableInspectorUpdate>{
             return this._inspected;
         }
+
+        get rendermime(): IRenderMimeRegistry {
+            return this._rendermime;
+        }
 
         dispose(): void {
             if ( this.isDisposed ) {
@@ -334,5 +365,14 @@ export
             return new Promise(function(resolve, reject) { reject("Cannot inspect matrices w/ the DummyHandler!") });
         }
 
+        public performWidgetInspection( varName: string ): Kernel.IShellFuture<KernelMessage.IExecuteRequestMsg, KernelMessage.IExecuteReplyMsg> {
+            const request: KernelMessage.IExecuteRequestMsg['content'] = {
+                code: "",
+                stop_on_error: false,
+                store_history: false
+            };
+            return this._connector.execute(request);
+        }
+
         public performDelete(varName: string){}
 }

src/handler.ts

@@ -36,8 +36,6 @@ import {
 } from '@jupyterlab/notebook';
 
 
-
-
 namespace CommandIDs {
     export
     const open = "variableinspector:open";
@@ -144,11 +142,13 @@ const consoles: JupyterFrontEndPlugin<void> = {
                             let initScript = result.initScript;
                             let queryCommand = result.queryCommand;
                             let matrixQueryCommand = result.matrixQueryCommand;
+                            let widgetQueryCommand = result.widgetQueryCommand;
                             let deleteCommand = result.deleteCommand;
 
                             const options: VariableInspectionHandler.IOptions = {
                                     queryCommand: queryCommand,
                                     matrixQueryCommand: matrixQueryCommand,
+                                    widgetQueryCommand,
                                     deleteCommand: deleteCommand,
                                     connector: connector,
                                     initScript: initScript,
@@ -175,6 +175,7 @@ const consoles: JupyterFrontEndPlugin<void> = {
                                 delete handlers[consolePanel.id];
                                 handler.dispose();
                             } );
+
                             resolve( handler );                        
                         } )
                         } );
@@ -233,6 +234,7 @@ const notebooks: JupyterFrontEndPlugin<void> = {
 
                     const session = nbPanel.session;
                     const connector = new KernelConnector( { session } );
+                    const rendermime = nbPanel.content.rendermime;
 
                     connector.ready.then(() => { // Create connector and init w script if it exists for kernel type.
                         let kerneltype: string = connector.kernelType;
@@ -242,13 +244,16 @@ const notebooks: JupyterFrontEndPlugin<void> = {
                         let initScript = result.initScript;
                         let queryCommand = result.queryCommand;
                         let matrixQueryCommand = result.matrixQueryCommand;
+                        let widgetQueryCommand = result.widgetQueryCommand;
                         let deleteCommand = result.deleteCommand;
 
                         const options: VariableInspectionHandler.IOptions = {
                                 queryCommand: queryCommand,
                                 matrixQueryCommand: matrixQueryCommand,
+                                widgetQueryCommand,
                                 deleteCommand: deleteCommand,
                                 connector: connector,
+                                rendermime,
                                 initScript: initScript,
                                 id: session.path  //Using the sessions path as an identifier for now.
                         };

src/index.ts

@@ -5,6 +5,7 @@ namespace Languages {
             initScript: string;
             queryCommand: string;
             matrixQueryCommand: string;
+            widgetQueryCommand: string;
             deleteCommand: string;
         }
 }
@@ -29,10 +30,11 @@ np = None
 pd = None
 pyspark = None
 tf = None
+ipywidgets = None
 
 
 def _check_imported():
-    global np, pd, pyspark, tf
+    global np, pd, pyspark, tf, ipywidgets
     if 'numpy' in sys.modules:
         # don't really need the try
         try:
@@ -59,6 +61,12 @@ def _check_imported():
         except ImportError:
             tf = None
 
+    if 'ipywidgets' in sys.modules:
+        try:
+            import ipywidgets
+        except ImportError:
+            ipywidgets = None
+
 
 def _jupyterlab_variableinspector_getsizeof(x):
     if type(x).__name__ in ['ndarray', 'Series']:
@@ -135,6 +143,10 @@ def _jupyterlab_variableinspector_is_matrix(x):
     return False
 
 
+def _jupyterlab_variableinspector_is_widget(x):
+    return ipywidgets and issubclass(x, ipywidgets.DOMWidget)
+
+
 def _jupyterlab_variableinspector_dict_list():
     _check_imported()
     def keep_cond(v):
@@ -159,13 +171,18 @@ def _jupyterlab_variableinspector_dict_list():
         except:
             return False
     values = _jupyterlab_variableinspector_nms.who_ls()
-    vardic = [{'varName': _v, 
-    'varType': type(eval(_v)).__name__, 
-    'varSize': str(_jupyterlab_variableinspector_getsizeof(eval(_v))), 
-    'varShape': str(_jupyterlab_variableinspector_getshapeof(eval(_v))) if _jupyterlab_variableinspector_getshapeof(eval(_v)) else '', 
-    'varContent': str(_jupyterlab_variableinspector_getcontentof(eval(_v))), 
-    'isMatrix': _jupyterlab_variableinspector_is_matrix(eval(_v))}
-            for _v in values if keep_cond(_v)]
+    vardic = [
+        {
+            'varName': _v,
+            'varType': type(eval(_v)).__name__, 
+            'varSize': str(_jupyterlab_variableinspector_getsizeof(eval(_v))), 
+            'varShape': str(_jupyterlab_variableinspector_getshapeof(eval(_v))) if _jupyterlab_variableinspector_getshapeof(eval(_v)) else '', 
+            'varContent': str(_jupyterlab_variableinspector_getcontentof(eval(_v))), 
+            'isMatrix': _jupyterlab_variableinspector_is_matrix(eval(_v)),
+            'isWidget': _jupyterlab_variableinspector_is_widget(type(eval(_v)))
+        }
+        for _v in values if keep_cond(_v)
+    ]
     return json.dumps(vardic, ensure_ascii=False)
 
 
@@ -196,6 +213,10 @@ def _jupyterlab_variableinspector_getmatrixcontent(x, max_rows=10000):
         return _jupyterlab_variableinspector_getmatrixcontent(s)
 
 
+def _jupyterlab_variableinspector_displaywidget(widget):
+    display(widget)
+
+
 def _jupyterlab_variableinspector_default(o):
     if isinstance(o, np.number): return int(o)  
     raise TypeError
@@ -281,24 +302,28 @@ def _jupyterlab_variableinspector_deletevariable(x):
             initScript: Languages.py_script,
             queryCommand: "_jupyterlab_variableinspector_dict_list()",
             matrixQueryCommand: "_jupyterlab_variableinspector_getmatrixcontent",
+            widgetQueryCommand: "_jupyterlab_variableinspector_displaywidget",
             deleteCommand: "_jupyterlab_variableinspector_deletevariable"
         },
         "python2": {
             initScript: Languages.py_script,
             queryCommand: "_jupyterlab_variableinspector_dict_list()",
             matrixQueryCommand: "_jupyterlab_variableinspector_getmatrixcontent",
+            widgetQueryCommand: "_jupyterlab_variableinspector_displaywidget",
             deleteCommand: "_jupyterlab_variableinspector_deletevariable"
         },
         "python": {
             initScript: Languages.py_script,
             queryCommand: "_jupyterlab_variableinspector_dict_list()",
             matrixQueryCommand: "_jupyterlab_variableinspector_getmatrixcontent",
+            widgetQueryCommand: "_jupyterlab_variableinspector_displaywidget",
             deleteCommand: "_jupyterlab_variableinspector_deletevariable"
         },
         "R": {
             initScript: Languages.r_script,
             queryCommand: ".ls.objects()",
             matrixQueryCommand: ".ls.objects",
+            widgetQueryCommand: "TODO",
             deleteCommand: ".deleteVariable"
         }
     };

src/inspectorscripts.ts

@@ -77,7 +77,7 @@ export
         }
 
         return kernel.ready.then(() => {
-            let future = kernel.requestExecute( content, false );
+            let future = kernel.requestExecute( content );
 
             future.onIOPub = ( ( msg: KernelMessage.IIOPubMessage ) => {
                 ioCallback( msg );
@@ -86,6 +86,10 @@ export
         } );
     }
 
+    execute( content: KernelMessage.IExecuteRequestMsg['content']) {
+        return this._session.kernel.requestExecute(content);
+    }
+
 }
 
 export