Merge branch 'response' into debugger-ui

src/callstack/body.tsx

@@ -25,7 +25,7 @@ export class Body extends ReactWidget {
 
 const FramesComponent = ({ model }: { model: Callstack.IModel }) => {
   const [frames, setFrames] = useState(model.frames);
-  const [selected, setSelected] = useState();
+  const [selected, setSelected] = useState(model.frame);
 
   const onSelected = (frame: any) => {
     setSelected(frame);
@@ -38,6 +38,7 @@ const FramesComponent = ({ model }: { model: Callstack.IModel }) => {
         return;
       }
       setFrames(updates);
+      setSelected(updates[0]);
     };
     model.framesChanged.connect(updateFrames);
 

src/service.ts

@@ -7,6 +7,7 @@ import { Debugger } from './debugger';
 import { IDebugger } from './tokens';
 
 import { Variables } from './variables';
+import { Callstack } from './callstack';
 
 export class DebugService {
   constructor(session: DebugSession | null, debuggerModel: Debugger.Model) {
@@ -16,6 +17,7 @@ export class DebugService {
 
   private _session: DebugSession;
   private _model: Debugger.Model;
+  frames: any[];
 
   set session(session: DebugSession) {
     this._session = session;
@@ -28,7 +30,7 @@ export class DebugService {
   // this will change for after execute cell
   async launch(code: string): Promise<void> {
     let threadId: number = 1;
-
+    this.frames = [];
     this.session.eventMessage.connect(
       (sender: DebugSession, event: IDebugger.ISession.Event) => {
         const eventName = event.event;
@@ -54,18 +56,36 @@ export class DebugService {
     this.session.client.kernel.requestExecute({ code });
 
     const stackFrames = await this.getFrames(threadId);
-    const scopes = await this.getScopes(stackFrames);
-    const variables = await this.getVariables(scopes);
+
+    stackFrames.forEach(async (frame, index) => {
+      const scopes = await this.getScopes(frame);
+      const variables = await this.getVariables(scopes);
+      const values = this.convertScope(scopes, variables);
+      this.frames.push({
+        id: frame.id,
+        value: values
+      });
+      if (index === 0) {
+        this._model.sidebar.variables.model.scopes = values;
+      }
+    });
 
     if (!!stackFrames) {
       this._model.sidebar.callstack.model.frames = stackFrames;
     }
-    this._model.sidebar.variables.model.scopes = this.convertScope(
-      scopes,
-      variables
+
+    this._model.sidebar.callstack.model.currentFrameChanged.connect(
+      this.onChangeFrame
     );
   }
 
+  onChangeFrame = (_: Callstack.IModel, update: Callstack.IFrame) => {
+    const frame = this.frames.find(ele => ele.id === update.id);
+    if (frame && frame.value) {
+      this._model.sidebar.variables.model.scopes = frame.value;
+    }
+  };
+
   getFrames = async (threadId: number) => {
     const reply = await this.session.sendRequest('stackTrace', {
       threadId
@@ -74,12 +94,12 @@ export class DebugService {
     return stackFrames;
   };
 
-  getScopes = async (frames: DebugProtocol.StackFrame[]) => {
-    if (!frames || frames.length === 0) {
+  getScopes = async (frame: DebugProtocol.StackFrame) => {
+    if (!frame) {
       return;
     }
     const reply = await this.session.sendRequest('scopes', {
-      frameId: frames[0].id
+      frameId: frame.id
     });
     return reply.body.scopes;
   };
@@ -106,7 +126,6 @@ export class DebugService {
     scopes: DebugProtocol.Scope[],
     variables: DebugProtocol.Variable[]
   ): Variables.IScope[] => {
-    console.log({ variables });
     if (!variables || !scopes) {
       return;
     }

src/variables/body/table.tsx

@@ -43,7 +43,7 @@ export class Table extends ReactWidget {
     }
   }
 
-  protected resizeBody(msg: Widget.ResizeMessage): void {
+  resizeBody(msg: Widget.ResizeMessage): void {
     const head = this.getHead();
     const body = this.getBody();
     if (body && head) {
@@ -58,7 +58,12 @@ export class Table extends ReactWidget {
 
 const TableComponent = ({ model }: { model: Variables.IModel }) => {
   const [variables, setVariables] = useState(model.variables);
-  const [variable, TableBody] = useTbody(variables, model.currentVariable);
+  const [longHeader, setLongHeader] = useState('value');
+  const [variable, TableBody] = useTbody(
+    variables,
+    model.currentVariable,
+    longHeader
+  );
 
   useEffect(() => {
     const updateVariables = (
@@ -77,6 +82,10 @@ const TableComponent = ({ model }: { model: Variables.IModel }) => {
     };
   });
 
+  const setWidth = (headerName: string): string => {
+    return headerName === longHeader ? '75%' : '25%';
+  };
+
   model.currentVariable = variable;
 
   return (
@@ -84,8 +93,18 @@ const TableComponent = ({ model }: { model: Variables.IModel }) => {
       <table>
         <thead>
           <tr>
-            <th style={{ width: '25%' }}>Name</th>
-            <th style={{ width: '75%' }}>Value</th>
+            <th
+              onClick={() => setLongHeader('name')}
+              style={{ width: setWidth('name') }}
+            >
+              Name
+            </th>
+            <th
+              onClick={() => setLongHeader('value')}
+              style={{ width: setWidth('value') }}
+            >
+              Value
+            </th>
           </tr>
         </thead>
       </table>
@@ -94,13 +113,17 @@ const TableComponent = ({ model }: { model: Variables.IModel }) => {
   );
 };
 
-const useTbody = (items: Array<any>, defaultState: any) => {
+const useTbody = (items: Array<any>, defaultState: any, header: any) => {
   const [state, setState] = useState(defaultState);
 
   const setClassIcon = (typeOf: string) => {
     return typeOf === 'class' ? 'jp-ClassIcon' : 'jp-VariableIcon';
   };
 
+  const setWidth = (headerName: string): string => {
+    return headerName === header ? '75%' : '25%';
+  };
+
   const List = () => (
     <div style={{ overflow: 'auto' }}>
       <table>
@@ -111,14 +134,14 @@ const useTbody = (items: Array<any>, defaultState: any) => {
               onClick={e => setState(item)}
               className={state === item ? ' selected' : ''}
             >
-              <td style={{ paddingLeft: `${12}px`, width: `${25}%` }}>
+              <td style={{ paddingLeft: `${12}px`, width: setWidth('name') }}>
                 <span
                   className={`jp-Icon jp-Icon-16 ${setClassIcon(item.type)}`}
                 ></span>
                 {item.name}
               </td>
-              <td style={{ paddingLeft: `${12}px`, width: `${75}%` }}>
-                {item.type}
+              <td style={{ paddingLeft: `${12}px`, width: setWidth('value') }}>
+                {item.value}
               </td>
             </tr>
           ))}