show all scopes table

src/service.ts

@@ -392,6 +392,8 @@ export class DebuggerService implements IDebugger, IDisposable {
       this
     );
 
+    // this._model.variables.variableCliked.connect(this._onVariableClicked, this);
+
     const stackFrames = await this._getFrames(this._currentThread());
     this._model.callstack.frames = stackFrames;
   }
@@ -424,7 +426,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
@@ -434,10 +435,18 @@ export class DebuggerService implements IDebugger, IDisposable {
     });
 
     this._model.variables.scopes = [...newScopes];
-
     return reply.body.variables;
   }
 
+  // private async _onVariableClicked(_: any, variable: DebugProtocol.Variable) {
+  //   console.log('clicked');
+  //   const reply = await this.session.sendRequest('variables', {
+  //     variablesReference: variable.variablesReference
+  //   });
+  //   this._model.variables.details = reply.body.variables;
+  //   return reply.body.variables;
+  // }
+
   /**
    * Get all the frames for the given thread id.
    * @param threadId The thread id.

src/variables/index.ts

@@ -5,7 +5,7 @@ import { Panel, Widget } from '@lumino/widgets';
 
 // import { VariablesBody } from './body';
 
-import { VariablesBodyTable } from './table';
+import { VariablesBody } from './body';
 
 import { VariablesHeader } from './header';
 
@@ -22,7 +22,7 @@ export class Variables extends Panel {
   constructor(options: Variables.IOptions) {
     super();
     this._header = new VariablesHeader();
-    this._body = new VariablesBodyTable(options.model);
+    this._body = new VariablesBody(options.model);
 
     this.addWidget(this._header);
     this.addWidget(this._body);

src/variables/model.ts

@@ -24,6 +24,15 @@ export class VariablesModel {
     this._changed.emit();
   }
 
+  set details(variables: VariablesModel.IVariable[]) {
+    console.log({ variables });
+    this._details = variables;
+  }
+
+  get details(): VariablesModel.IVariable[] {
+    return this._details;
+  }
+
   /**
    * Signal emitted when the current variable has changed.
    */
@@ -38,6 +47,10 @@ export class VariablesModel {
     return this._variableExpanded;
   }
 
+  get variableCliked(): ISignal<this, VariablesModel.IVariable> {
+    return this._variableCliked;
+  }
+
   /**
    * Expand a variable.
    * @param variable The variable to expand.
@@ -46,9 +59,15 @@ export class VariablesModel {
     this._variableExpanded.emit(variable);
   }
 
+  variableGetDetails(variable: VariablesModel.IVariable) {
+    this._variableCliked.emit(variable);
+  }
+
   private _state: VariablesModel.IScope[] = [];
   private _variableExpanded = new Signal<this, VariablesModel.IVariable>(this);
+  private _variableCliked = new Signal<this, VariablesModel.IVariable>(this);
   private _changed = new Signal<this, void>(this);
+  private _details: VariablesModel.IVariable[];
 }
 
 /**

src/variables/table.tsx

@@ -3,14 +3,14 @@
 
 import { ReactWidget } from '@jupyterlab/apputils';
 
-import { ArrayExt } from '@phosphor/algorithm';
+import { ArrayExt } from '@lumino/algorithm';
 
 import React, { useEffect, useState } from 'react';
 
 import { VariablesModel } from './model';
 
-/**
- * The body for a Variables Panel.
+/**VariablesComponent
+ * The body for a Va    console.log({ self });riables Panel.
  */
 export class VariablesBodyTable extends ReactWidget {
   /**
@@ -21,54 +21,61 @@ export class VariablesBodyTable extends ReactWidget {
     super();
     this._model = model;
     this.addClass('jp-DebuggerVariables-body');
+    this._model.changed.connect(this.updateScopes, this);
+  }
+
+  private updateScopes(self: VariablesModel) {
+    if (ArrayExt.shallowEqual(this._scopes, self.scopes)) {
+      return;
+    }
+    this._scopes = self.scopes;
+    this.update();
   }
 
   /**
    * Render the VariablesComponent.
    */
   render() {
-    return <VariablesComponent model={this._model} />;
+    return (
+      <>
+        {this._scopes.map(scope => (
+          <VariablesComponent
+            key={scope.name}
+            data={scope.variables}
+            model={this._model}
+          />
+        ))}
+      </>
+    );
   }
 
   private _model: VariablesModel;
+  private _scopes: VariablesModel.IScope[] = [];
 }
 
-/**
- * A React component to display a list of variables.
- * @param model The model for the variables.
- */
-const VariablesComponent = ({ model }: { model: VariablesModel }) => {
-  const [data, setData] = useState(model.scopes);
+const VariablesComponent = ({
+  data,
+  model
+}: {
+  data: VariablesModel.IVariable[];
+  model: VariablesModel;
+}) => {
+  const [variables, setVariables] = useState(data);
   const [selected, setSelected] = useState('');
 
   useEffect(() => {
-    const updateScopes = (self: VariablesModel) => {
-      if (ArrayExt.shallowEqual(data, self.scopes)) {
-        return;
-      }
-      setData(self.scopes);
-    };
-
-    model.changed.connect(updateScopes);
-
-    return () => {
-      model.changed.disconnect(updateScopes);
-    };
-  });
+    setVariables(data);
+  }, [data]);
 
-  const checkIsSelected = (variable: VariablesModel.IVariable) => {
-    if (selected === variable.evaluateName) {
-      alert(JSON.stringify(variable));
-      return;
-    }
+  const onClickVariable = (variable: VariablesModel.IVariable) => {
     setSelected(variable.evaluateName);
   };
 
   const Tbody = () => (
     <tbody>
-      {data[0]?.variables.map(variable => (
+      {variables?.map(variable => (
         <tr
-          onClick={() => checkIsSelected(variable)}
+          onClick={() => onClickVariable(variable)}
           key={variable.evaluateName}
         >
           <td>{variable.name}</td>

style/variables.css

@@ -10,23 +10,28 @@
 
 .jp-DebuggerVariables-body table {
   width: 100%;
+  border-spacing: 0px;
 }
 
+.jp-DebuggerVariables-body table tbody,
 .jp-DebuggerVariables-body table thead {
-  background: var(--jp-layout-color4);
+  background: var(--jp-layout-color2);
+  text-align: left;
 }
 
-.jp-DebuggerVariables-body table tbody {
-  background: var(--jp-layout-color3);
+.jp-DebuggerVariables-body table tbody tr:nth-child(2n + 1) {
+  background-color: var(--jp-layout-color1);
 }
 
-.jp-DebuggerVariables-body table tbody tr td:first-child {
-  background: var(--jp-layout-color2);
+.jp-DebuggerVariables-body table tbody td,
+.jp-DebuggerVariables-body table thead th {
+  padding: 5px;
+  border-right: 1px solid var(--jp-layout-color3);
 }
 
-.jp-DebuggerVariables-body table tbody td {
-  padding-left: 10px;
-  padding-right: 10px;
+.jp-DebuggerVariables-body table tbody td:last-child,
+.jp-DebuggerVariables-body table thead th:last-child {
+  border-right: none;
 }
 
 .jp-DebuggerVariables-body table tbody td.selected {