Merge pull request #347 from KsavinN/table_view

Switch to Table View

package.json

@@ -64,7 +64,6 @@
     "@lumino/disposable": "^1.2.0",
     "@lumino/widgets": "^1.8.0",
     "murmurhash-js": "^1.0.0",
-    "react-inspector": "^2.0.0",
     "vscode-debugprotocol": "^1.37.0"
   },
   "devDependencies": {

src/debugger.ts

@@ -43,7 +43,11 @@ export namespace Debugger {
       this.service = service as DebuggerService;
       this.service.model = this.model;
 
-      this.variables = new Variables({ model: this.model.variables });
+      this.variables = new Variables({
+        model: this.model.variables,
+        commands: callstackCommands.registry,
+        service
+      });
 
       this.callstack = new Callstack({
         commands: callstackCommands,
@@ -145,7 +149,6 @@ export namespace Debugger {
        * The callstack toolbar commands.
        */
       callstackCommands: Callstack.ICommands;
-
       /**
        * The editor services.
        */

src/index.ts

@@ -8,7 +8,11 @@ import {
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 
-import { ICommandPalette } from '@jupyterlab/apputils';
+import {
+  ICommandPalette,
+  MainAreaWidget,
+  WidgetTracker
+} from '@jupyterlab/apputils';
 
 import { IEditorServices } from '@jupyterlab/codeeditor';
 
@@ -32,6 +36,10 @@ import { DebuggerHandler } from './handler';
 
 import { IDebugger } from './tokens';
 
+import { VariableDetails } from './variables/table';
+
+import { DebuggerModel } from './model';
+
 /**
  * The command IDs used by the debugger plugin.
  */
@@ -49,6 +57,8 @@ export namespace CommandIDs {
   export const stepIn = 'debugger:stepIn';
 
   export const stepOut = 'debugger:stepOut';
+
+  export const variableDetails = 'debugger:variable-details';
 }
 
 /**
@@ -244,6 +254,61 @@ const tracker: JupyterFrontEndPlugin<void> = {
   }
 };
 
+/*
+ * A plugin to open detailed views for variables.
+ */
+const variables: JupyterFrontEndPlugin<void> = {
+  id: '@jupyterlab/debugger:variables',
+  autoStart: true,
+  requires: [IDebugger],
+  activate: (app: JupyterFrontEnd, service: IDebugger) => {
+    const { commands, shell } = app;
+    const tracker = new WidgetTracker<MainAreaWidget<VariableDetails>>({
+      namespace: 'variableDetails'
+    });
+
+    commands.addCommand(CommandIDs.variableDetails, {
+      label: 'Variable Details',
+      caption: 'Variable Details',
+      execute: async args => {
+        const { variableReference } = args;
+        if (!variableReference || variableReference === 0) {
+          return;
+        }
+        const details = await service.getVariableDetails(
+          variableReference as number
+        );
+
+        const title = args.title as string;
+        const id = `jp-debugger-details-${title}`;
+        if (
+          !details ||
+          details.length === 0 ||
+          tracker.find(widget => widget.id === id)
+        ) {
+          return;
+        }
+
+        const model = (service.model as DebuggerModel).variables;
+        const widget = new MainAreaWidget<VariableDetails>({
+          content: new VariableDetails({
+            commands,
+            service,
+            details,
+            model,
+            title
+          })
+        });
+        widget.id = id;
+        void tracker.add(widget);
+        shell.add(widget, 'main', {
+          mode: tracker.currentWidget ? 'split-right' : 'split-bottom'
+        });
+      }
+    });
+  }
+};
+
 /**
  * A plugin providing a tracker code debuggers.
  */
@@ -380,6 +445,7 @@ const plugins: JupyterFrontEndPlugin<any>[] = [
   files,
   notebooks,
   tracker,
+  variables,
   main
 ];
 

src/service.ts

@@ -383,6 +383,19 @@ export class DebuggerService implements IDebugger, IDisposable {
     return reply.body;
   }
 
+  /**
+   * Request details for a variable.
+   * @param variable The variable for which to request details.
+   */
+  async getVariableDetails(
+    variablesReference: number
+  ): Promise<DebugProtocol.Variable[]> {
+    const reply = await this.session.sendRequest('variables', {
+      variablesReference
+    });
+    return reply.body.variables;
+  }
+
   /**
    * Get all the frames from the kernel.
    */
@@ -428,7 +441,6 @@ export class DebuggerService implements IDebugger, IDisposable {
     reply.body.variables.forEach((variable: DebugProtocol.Variable) => {
       newVariable = { [variable.name]: variable, ...newVariable };
     });
-
     const newScopes = this._model.variables.scopes.map(scope => {
       const findIndex = scope.variables.findIndex(
         ele => ele.variablesReference === variable.variablesReference
@@ -438,7 +450,6 @@ export class DebuggerService implements IDebugger, IDisposable {
     });
 
     this._model.variables.scopes = [...newScopes];
-
     return reply.body.variables;
   }
 

src/tokens.ts

@@ -123,6 +123,14 @@ export interface IDebugger {
    */
   clearBreakpoints(): Promise<void>;
 
+  /**
+   * Request details for a variable.
+   * @param variable The variable for which to request details.
+   */
+  getVariableDetails(
+    variablesReference: number
+  ): Promise<DebugProtocol.Variable[]>;
+
   /**
    * Retrieve the content of a source file.
    * @param source The source object containing the path to the file.