create VariableDetialsGrid

src/index.ts

@@ -46,10 +46,10 @@ import { DebuggerHandler } from './handler';
 
 import { IDebugger } from './tokens';
 
-import { VariableDetails } from './variables/table';
-
 import { DebuggerModel } from './model';
 
+import { VariableDetailsGrid } from './variables/grid';
+
 /**
  * The command IDs used by the debugger plugin.
  */
@@ -273,7 +273,7 @@ const variables: JupyterFrontEndPlugin<void> = {
   requires: [IDebugger],
   activate: (app: JupyterFrontEnd, service: IDebugger) => {
     const { commands, shell } = app;
-    const tracker = new WidgetTracker<MainAreaWidget<VariableDetails>>({
+    const tracker = new WidgetTracker<MainAreaWidget<VariableDetailsGrid>>({
       namespace: 'variableDetails'
     });
 
@@ -300,8 +300,8 @@ const variables: JupyterFrontEndPlugin<void> = {
         }
 
         const model = (service.model as DebuggerModel).variables;
-        const widget = new MainAreaWidget<VariableDetails>({
-          content: new VariableDetails({
+        const widget = new MainAreaWidget<VariableDetailsGrid>({
+          content: new VariableDetailsGrid({
             commands,
             service,
             details,

src/variables/grid.ts

@@ -6,76 +6,127 @@ import {
   BasicMouseHandler,
   BasicSelectionModel,
   DataGrid,
-  DataModel
+  DataModel,
+  SelectionModel
 } from '@lumino/datagrid';
 
 import { CommandRegistry } from '@lumino/commands';
 
 import { Panel } from '@lumino/widgets';
 
+import { variableIcon } from '../icons';
+
 import { VariablesModel } from './model';
 
-export class DataGridTable extends Panel {
-  constructor(options: DataGridTable.IOptions) {
+import { CommandIDs } from '..';
+
+import { IDebugger } from '../tokens';
+
+export class VariablesBodyGrid extends Panel {
+  constructor(options: VariablesBodyGrid.IOptions) {
+    super();
+    this.node.style.height = '100%';
+    const { model, commands } = options;
+    this._grid = new VariableGrid({ commands });
+    this._model = model;
+    const updated = (model: VariablesModel) => {
+      this._grid.dataModel.setData(model.scopes);
+    };
+
+    this._model.changed.connect(updated, this);
+    this.addWidget(this._grid);
+    this.addClass('jp-DebuggerVariables-body');
+  }
+
+  /**
+   * Set the variable filter list.
+   */
+  set filter(filter: Set<string>) {
+    (this._grid.dataModel as VariableDataGridModel).filter = filter;
+    this._grid.dataModel.setData(this._model.scopes);
+  }
+
+  private _grid: VariableGrid;
+  private _model: VariablesModel;
+}
+
+export class VariableGrid extends Panel {
+  constructor(options: VariableGrid.IOptions) {
     super();
     const grid = new DataGrid();
-    const dataModel = new VariableDataModel(options.model);
+    const { commands } = options;
+    const dataModel = new VariableDataGridModel(commands);
     grid.dataModel = dataModel;
     grid.keyHandler = new BasicKeyHandler();
     grid.mouseHandler = new BasicMouseHandler();
-    grid.selectionModel = new BasicSelectionModel({ dataModel });
+    grid.selectionModel = new VariableSelection({ dataModel });
     grid.stretchLastColumn = true;
-    this.node.style.height = '100%';
     grid.node.style.height = '100%';
+    this.node.style.height = '90%';
     this._grid = grid;
     this.addWidget(grid);
-    this.addClass('jp-DebuggerVariables-body');
   }
 
   /**
    * Set the variable filter list.
    */
   set filter(filter: Set<string>) {
-    (this._grid.dataModel as VariableDataModel).filter = filter;
+    (this._grid.dataModel as VariableDataGridModel).filter = filter;
     this.update();
   }
 
+  get dataModel(): VariableDataGridModel {
+    return this._grid.dataModel as VariableDataGridModel;
+  }
+
   private _grid: DataGrid;
 }
 
 /**
- * A namespace for DataGridTable `statics`.
+ * A widget to display details for a variable.
  */
-namespace DataGridTable {
+export class VariableDetailsGrid extends Panel {
   /**
-   * Instantiation options for `DataGridTable`.
+   * Instantiate a new Body for the detail table of the selected variable.
+   * @param options The instantiation options for VariableDetails.
    */
-  export interface IOptions {
-    /**
-     * The variables model.
-     */
-    model: VariablesModel;
-    /**
-     * The commands registry.
-     */
-    commands: CommandRegistry;
+  constructor(options: VariablesDetails.IOptions) {
+    super();
+    const { details, commands, model, service, title } = options;
+
+    this.title.icon = variableIcon;
+    this.title.label = `${service.session?.connection?.name} - details of ${title}`;
+    this._grid = new VariableGrid({ commands });
+    const detailsScope = {
+      name: 'TEst',
+      variables: details
+    };
+    this._grid.dataModel.setData([detailsScope]);
+    this.node.style.height = '90%';
+    model.changed.connect(this._onModelChanged, this);
+
+    this.addWidget(this._grid);
+    this.addClass('jp-DebuggerVariableDetails');
+  }
+
+  /**
+   * Handle when the debug model changes.
+   */
+  private _onModelChanged() {
+    this.dispose();
   }
+
+  private _grid: VariableGrid;
 }
 
-export class VariableDataModel extends DataModel {
-  constructor(model: VariablesModel) {
+export class VariableDataGridModel extends DataModel {
+  constructor(commands: CommandRegistry) {
     super();
-    this._model = model;
-    const updated = (model: VariablesModel) => {
-      this.setData(model.scopes);
-    };
-
-    model.changed.connect(updated, this);
+    this._commands = commands;
   }
 
   set filter(filter: Set<string>) {
     this._filter = filter;
-    this.setData(this._model.scopes);
   }
 
   rowCount(region: DataModel.RowRegion): number {
@@ -101,7 +152,20 @@ export class VariableDataModel extends DataModel {
     return column === 1 ? this._data.value[row] : this._data.type[row];
   }
 
-  private setData(scopes: VariablesModel.IScope[]) {
+  async getVariableReference(row: number) {
+    const variablesReference = this._data.variablesReference[row];
+    const name = this._data.name[row];
+    if (!variablesReference) {
+      return;
+    }
+
+    await this._commands.execute(CommandIDs.variableDetails, {
+      variableReference: variablesReference,
+      title: name
+    });
+  }
+
+  setData(scopes: VariablesModel.IScope[]) {
     if (!scopes || scopes.length === 0) {
       this.clearData();
       this.emitChanged({
@@ -116,10 +180,10 @@ export class VariableDataModel extends DataModel {
       let index = 0;
       scope.variables.forEach(variable => {
         if (!this._filter.has(variable.evaluateName)) {
-          console.log(variable);
-          this._data.name[index] = variable.name;
+          this._data.name[index] = variable.evaluateName;
           this._data.type[index] = variable.type;
           this._data.value[index] = variable.value;
+          this._data.variablesReference[index] = variable.variablesReference;
           this.emitChanged({
             type: 'rows-inserted',
             region: 'body',
@@ -136,15 +200,102 @@ export class VariableDataModel extends DataModel {
     this._data = {
       name: [],
       type: [],
-      value: []
+      value: [],
+      variablesReference: []
     };
   }
 
+  private _commands: CommandRegistry;
   private _filter = new Set<string>();
-  private _model: VariablesModel;
-  private _data: { name: string[]; type: string[]; value: string[] } = {
+  private _data: {
+    name: string[];
+    type: string[];
+    value: string[];
+    variablesReference: number[];
+  } = {
     name: [],
     type: [],
-    value: []
+    value: [],
+    variablesReference: []
   };
 }
+
+export class VariableSelection extends BasicSelectionModel {
+  constructor(options: VariableSelection.IOptions) {
+    super(options);
+    this.changed.connect(slot =>
+      options.dataModel.getVariableReference(slot.cursorRow)
+    );
+  }
+}
+
+export namespace VariableSelection {
+  export interface IOptions extends SelectionModel.IOptions {
+    dataModel: VariableDataGridModel;
+  }
+}
+
+/**
+ * A namespace for VariablesDetails `statics`.
+ */
+namespace VariablesDetails {
+  /**
+   * Instantiation options for `VariablesDetails`.
+   */
+  export interface IOptions {
+    /**
+     * The variables model.
+     */
+    model: VariablesModel;
+    /**
+     * The details of the selected variable.
+     */
+    details: VariablesModel.IVariable[];
+    /**
+     * The debugger service.
+     */
+    service: IDebugger;
+    /**
+     * The commands registry.
+     */
+    commands: CommandRegistry;
+    /**
+     * The name of the selected variable.
+     */
+    title: string;
+  }
+}
+
+/**
+ * A namespace for DataGridTable `statics`.
+ */
+namespace VariablesBodyGrid {
+  /**
+   * Instantiation options for `DataGridTable`.
+   */
+  export interface IOptions {
+    /**
+     * The variables model.
+     */
+    model: VariablesModel;
+    /**
+     * The commands registry.
+     */
+    commands: CommandRegistry;
+  }
+}
+
+/**
+ * A namespace for DataGridTable `statics`.
+ */
+namespace VariableGrid {
+  /**
+   * Instantiation options for `DataGridTable`.
+   */
+  export interface IOptions {
+    /**
+     * The commands registry.
+     */
+    commands: CommandRegistry;
+  }
+}

src/variables/index.ts

@@ -3,7 +3,7 @@
 
 import { CommandRegistry } from '@lumino/commands';
 
-import { DataGridTable } from './grid';
+import { VariablesBodyGrid } from './grid';
 
 import { IDebugger } from '../tokens';
 
@@ -32,7 +32,7 @@ export class Variables extends Panel {
 
     this._header = new VariablesHeader();
     this._tree = new VariablesBodyTree({ model, service });
-    this._table = new DataGridTable({ model, commands });
+    this._table = new VariablesBodyGrid({ model, commands });
     this._table.hide();
 
     const onClick = () => {
@@ -91,7 +91,7 @@ export class Variables extends Panel {
 
   private _header: VariablesHeader;
   private _tree: VariablesBodyTree;
-  private _table: DataGridTable;
+  private _table: VariablesBodyGrid;
 }
 
 /**