get moreDetials of variable

src/breakpoints/body.tsx

@@ -1,11 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import React, { useEffect, useState } from 'react';
-import { Breakpoints } from '.';
 import { ReactWidget } from '@jupyterlab/apputils';
 import { ArrayExt } from '@phosphor/algorithm';
 import { ISignal } from '@phosphor/signaling';
+import React, { useEffect, useState } from 'react';
+import { Breakpoints } from '.';
 
 export class Body extends ReactWidget {
   constructor(model: Breakpoints.Model) {

src/breakpoints/index.ts

@@ -3,11 +3,11 @@
 
 import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
 
-import { Widget, Panel, PanelLayout } from '@phosphor/widgets';
-import { DebugProtocol } from 'vscode-debugprotocol';
-import { Body } from './body';
 import { Signal } from '@phosphor/signaling';
+import { Panel, PanelLayout, Widget } from '@phosphor/widgets';
+import { DebugProtocol } from 'vscode-debugprotocol';
 import { ILineInfo } from '../handlers/cell';
+import { Body } from './body';
 
 export class Breakpoints extends Panel {
   constructor(options: Breakpoints.IOptions) {

src/callstack/index.ts

@@ -3,10 +3,10 @@
 
 import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
 
-import { Widget, Panel, PanelLayout } from '@phosphor/widgets';
-import { Body } from './body';
+import { ISignal, Signal } from '@phosphor/signaling';
+import { Panel, PanelLayout, Widget } from '@phosphor/widgets';
 import { DebugProtocol } from 'vscode-debugprotocol';
-import { Signal, ISignal } from '@phosphor/signaling';
+import { Body } from './body';
 
 export class Callstack extends Panel {
   constructor(options: Callstack.IOptions) {

src/editors/index.ts

@@ -3,7 +3,7 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
-import { CodeEditorWrapper, CodeEditor } from '@jupyterlab/codeeditor';
+import { CodeEditor, CodeEditorWrapper } from '@jupyterlab/codeeditor';
 
 import { ISignal, Signal } from '@phosphor/signaling';
 

src/handlers/console.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { IConsoleTracker, CodeConsole } from '@jupyterlab/console';
+import { CodeConsole, IConsoleTracker } from '@jupyterlab/console';
 
 import { CellManager } from '../handlers/cell';
 
@@ -11,9 +11,9 @@ import { Breakpoints } from '../breakpoints';
 
 import { IDebugger } from '../tokens';
 
-import { Debugger } from '../debugger';
 import { IDisposable } from '@phosphor/disposable';
 import { Signal } from '@phosphor/signaling';
+import { Debugger } from '../debugger';
 
 export class DebuggerConsoleHandler implements IDisposable {
   constructor(options: DebuggerConsoleHandler.IOptions) {

src/service.ts

@@ -143,6 +143,7 @@ export class DebugService implements IDebugger {
     this.session.client.kernel.requestExecute({ code });
 
     await this.getAllFrames();
+    this._model.variablesModel.variableExapnded.connect(this.getVariable);
   }
 
   getAllFrames = async () => {
@@ -199,6 +200,23 @@ export class DebugService implements IDebugger {
     return reply.body.scopes;
   };
 
+  getVariable = async (_: any, variable: DebugProtocol.Variable) => {
+    if (!variable && variable.variablesReference !== 0) {
+      return;
+    }
+    const reply = await this.session.sendRequest('variables', {
+      variablesReference: variable.variablesReference
+    });
+    let newVariable = { ...variable };
+    reply.body.variables.forEach((ele: DebugProtocol.Variable) => {
+      newVariable = { [ele.evaluateName]: ele, ...newVariable };
+    });
+
+    this._model.variablesModel.currentVariable = newVariable;
+
+    return reply.body.variables;
+  };
+
   getVariables = async (scopes: DebugProtocol.Scope[]) => {
     if (!scopes || scopes.length === 0) {
       return;

src/variables/body/index.tsx

@@ -3,11 +3,12 @@
 
 import { Variables } from '../index';
 
-import { ObjectInspector, ObjectLabel, ITheme } from 'react-inspector';
+import { ITheme, ObjectInspector, ObjectLabel } from 'react-inspector';
 
 import { ReactWidget } from '@jupyterlab/apputils';
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+
 import { ArrayExt } from '@phosphor/algorithm';
 
 export class Body extends ReactWidget {
@@ -28,11 +29,29 @@ const VariableComponent = ({ model }: { model: Variables.Model }) => {
   const [data, setData] = useState(model.scopes);
 
   useEffect(() => {
+    const convert = (scopes: Variables.IScope[]) => {
+      const convertet = scopes.map(scope => {
+        scope.variables = scope.variables.map(variable => {
+          const func = () => {
+            void model.getMoreDataOfVariable(variable);
+          };
+          if (variable.haveMoreDetails) {
+            return { ...variable };
+          } else {
+            return { getMoreDetails: func, ...variable };
+          }
+        });
+        return { ...scope };
+      });
+      return convertet;
+    };
+
     const updateScopes = (_: Variables.Model, update: Variables.IScope[]) => {
       if (ArrayExt.shallowEqual(data, update)) {
         return;
       }
-      setData(update);
+      const newData = convert(update);
+      setData(newData);
     };
 
     model.scopesChanged.connect(updateScopes);
@@ -77,8 +96,14 @@ const defaultNodeRenderer = ({
 }) => {
   const label = data.name === '' || data.name == null ? name : data.name;
   const value = data.value;
+  let dontDisplay = false;
+
+  if (data instanceof Function) {
+    data();
+    dontDisplay = true;
+  }
 
-  return depth === 0 ? (
+  return dontDisplay ? null : depth === 0 ? (
     <span>
       <span>{label}</span>
       <span>: </span>

src/variables/index.ts

@@ -1,11 +1,11 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import { Panel, Widget, PanelLayout } from '@phosphor/widgets';
+import { Panel, PanelLayout, Widget } from '@phosphor/widgets';
 
 import { Body } from './body';
 
-import { Signal, ISignal } from '@phosphor/signaling';
+import { ISignal, Signal } from '@phosphor/signaling';
 
 import { DebugProtocol } from 'vscode-debugprotocol';
 
@@ -52,7 +52,10 @@ class VariablesHeader extends Widget {
 }
 
 export namespace Variables {
-  export interface IVariable extends DebugProtocol.Variable {}
+  export interface IVariable extends DebugProtocol.Variable {
+    getMoreDetails?: any;
+    haveMoreDetails?: boolean;
+  }
 
   export interface IScope {
     name: string;
@@ -76,8 +79,19 @@ export namespace Variables {
       if (this._currentVariable === variable) {
         return;
       }
+
+      variable.haveMoreDetails = true;
       this._currentVariable = variable;
       this._currentChanged.emit(variable);
+
+      const newScope = this.scopes.map(scope => {
+        const findIndex = scope.variables.findIndex(
+          ele => ele.variablesReference === variable.variablesReference
+        );
+        scope.variables[findIndex] = variable;
+        return { ...scope };
+      });
+      this.scopes = [...newScope];
     }
 
     get scopes(): IScope[] {
@@ -101,10 +115,18 @@ export namespace Variables {
       return this._variablesChanged;
     }
 
+    get variableExapnded(): ISignal<this, IVariable> {
+      return this._variableExapnded;
+    }
+
     getCurrentVariables(): IVariable[] {
       return this.variables;
     }
 
+    async getMoreDataOfVariable(variable: IVariable) {
+      this._variableExapnded.emit(variable);
+    }
+
     protected _state: IScope[];
 
     private _currentVariable: IVariable;
@@ -113,6 +135,7 @@ export namespace Variables {
     private _currentChanged = new Signal<this, IVariable>(this);
     private _variablesChanged = new Signal<this, IVariable[]>(this);
     private _scopesChanged = new Signal<this, IScope[]>(this);
+    private _variableExapnded = new Signal<this, IVariable>(this);
   }
 
   export interface IOptions extends Panel.IOptions {