work in progress - initial render of API response

package.json

@@ -8,7 +8,7 @@
     "codemirror": "^5.11.0",
     "diff-match-patch": "^1.0.0",
     "file-loader": "^0.8.5",
-    "jupyter-js-services": "^0.9.2",
+    "jupyter-js-services": "^0.10.1",
     "jupyter-js-ui": "^0.11.0",
     "jupyter-js-utils": "^0.4.0",
     "marked": "^0.3.5",

src/notebook/console/model.ts

@@ -3,7 +3,7 @@
 'use strict';
 
 import {
-  INotebookSession
+  INotebookSession, IInspectReply
 } from 'jupyter-js-services';
 
 import {
@@ -73,9 +73,9 @@ interface ITooltipModel {
   change: ITextChange;
 
   /**
-   * The text of the tooltip.
+   * The API inspect request data payload.
    */
-  text: string;
+  bundle: { [mimetype: string]: string };
 }
 
 
@@ -376,6 +376,7 @@ class ConsoleModel implements IConsoleModel {
   run(): void {
     let prompt = this._cells.get(this._cells.length - 1) as ICodeCellModel;
     let session = this.session;
+    this.tooltip = null;
     if (!session || !session.kernel) {
       return;
     }
@@ -385,7 +386,6 @@ class ConsoleModel implements IConsoleModel {
       this._prompt = this.createPrompt()
       this._cells.add(this._prompt);
     };
-    this.tooltip = null;
     // Whether the code cell executes or not, create a new prompt.
     executeCodeCell(prompt, session.kernel).then(newPrompt, newPrompt);
   }
@@ -420,9 +420,21 @@ class ConsoleModel implements IConsoleModel {
       return;
     }
 
-    let { top, left } = args.coords;
-    let text = `tooltip popover:\n\ttop: ${top}\n\tleft: ${left}`;
-    this.tooltip = { text, change: args };
+    let pendingInspect = ++this._pendingInspect;
+
+    this._session.kernel.inspect({
+      code: args.newValue,
+      cursor_pos: args.ch,
+      detail_level: 0
+    }).then((value: IInspectReply) => {
+      if (pendingInspect !== this._pendingInspect || !value.found) {
+        return;
+      }
+      console.log('value', value)
+      let change = args;
+      let bundle = value.data;
+      this.tooltip = { change, bundle };
+    });
   }
 
   /**
@@ -454,6 +466,7 @@ class ConsoleModel implements IConsoleModel {
   private _defaultMimetype = 'text/x-ipython';
   private _history: IConsoleHistory = null;
   private _metadata: { [key: string]: string } = Object.create(null);
+  private _pendingInspect: number = 0;
   private _prompt: ICodeCellModel = null;
   private _tooltip: ITooltipModel = null;
   private _session: INotebookSession = null;
@@ -517,7 +530,7 @@ namespace Private {
     if (t1 === t2 || !t1 && !t2) return true;
     // If one item is null or undefined, items don't match.
     if (!t1 || !t2) return false;
-    return matchTextChanges(t1.change, t2.change) && t1.text === t2.text;
+    return matchTextChanges(t1.change, t2.change);
   }
 
   /**

src/notebook/console/tooltip.ts

@@ -6,6 +6,10 @@ import {
   Message
 } from 'phosphor-messaging';
 
+import {
+  Panel
+} from 'phosphor-panel';
+
 import {
   Widget
 } from 'phosphor-widget';
@@ -21,7 +25,7 @@ const TOOLTIP_CLASS = 'jp-ConsoleTooltip';
 const CONTENT_CLASS = 'jp-ConsoleTooltip-content';
 
 export
-class ConsoleTooltip extends Widget {
+class ConsoleTooltip extends Panel {
   /**
    * Create the DOM node for a console tooltip.
    */
@@ -36,10 +40,9 @@ class ConsoleTooltip extends Widget {
   /**
    * Construct a console tooltip widget.
    */
-  constructor(text: string, rect: ClientRect) {
+  constructor(rect: ClientRect) {
     super();
     this.addClass(TOOLTIP_CLASS);
-    this.text = text;
     this.rect = rect;
   }
 
@@ -74,15 +77,19 @@ class ConsoleTooltip extends Widget {
   /**
    * The text of the tooltip.
    */
-  get text(): string {
-    return this._text;
+  get content(): Widget {
+    return this._content;
   }
-  set text(newValue: string) {
-    if (newValue === this._text) {
+  set content(newValue: Widget) {
+    if (newValue === this._content) {
       return;
     }
-    this._text = newValue;
-    this.node.getElementsByTagName('pre')[0].textContent = this._text;
+    if (this._content) {
+      this._content.dispose();
+    }
+    this._content = newValue;
+    this.node.textContent = '';
+    this.addChild(this._content);
   }
 
   /**
@@ -159,7 +166,7 @@ class ConsoleTooltip extends Widget {
 
   private _rect: ClientRect = null;
   private _reference: Widget = null;
-  private _text = '';
+  private _content: Widget = null;
 }
 
 

src/notebook/console/widget.ts

@@ -131,15 +131,15 @@ class ConsoleWidget extends Widget {
   /**
    * Create a new tooltip widget.
    *
-   * @param x The x position of the current cursor.
+   * @param top The top position of the tooltip.
    *
-   * @param y The y position of the current cursor.
+   * @param left The left position of the tooltip.
    *
-   * @param text The text of the tooltip.
+   * @returns A ConsoleTooltip widget.
    */
-  static createTooltip(top: number, left: number, text = '...'): ConsoleTooltip {
+  static createTooltip(top: number, left: number): ConsoleTooltip {
     let rect = { top, left, width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT };
-    return new ConsoleTooltip(text, rect as ClientRect);
+    return new ConsoleTooltip(rect as ClientRect);
   }
 
   /*
@@ -255,7 +255,6 @@ class ConsoleWidget extends Widget {
       }
 
       let {top, left} = model.change.coords;
-      let text = model.text;
 
       // Offset the height of the tooltip by the height of cursor characters.
       top += model.change.chHeight;
@@ -264,16 +263,21 @@ class ConsoleWidget extends Widget {
 
       let rect = {top, left, width: TOOLTIP_WIDTH, height: TOOLTIP_HEIGHT};
 
-      if (!this._tooltip) {
-        this._tooltip = constructor.createTooltip(top, left, text);
+      if (this._tooltip) {
+        this._tooltip.rect = rect as ClientRect;
+      } else {
+        this._tooltip = constructor.createTooltip(top, left);
         this._tooltip.reference = this;
         this._tooltip.attach(document.body);
-      } else {
-        this._tooltip.rect = rect as ClientRect;
-        this._tooltip.text = model.text;
       }
 
-      if (this._tooltip.isHidden) this._tooltip.show();
+      let content = this._rendermime.render(model.bundle) || new Widget();
+      this._tooltip.content = content;
+
+      if (this._tooltip.isHidden) {
+        this._tooltip.show();
+      }
+
       return;
     }
   }