debug getResponse when no data

src/callstack/body.tsx

@@ -1,10 +1,14 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+
 import { Callstack } from '.';
+
 import { ReactWidget } from '@jupyterlab/apputils';
 
+import { ArrayExt } from '@phosphor/algorithm';
+
 export class Body extends ReactWidget {
   constructor(model: Callstack.IModel) {
     super();
@@ -20,12 +24,28 @@ export class Body extends ReactWidget {
 }
 
 const FramesComponent = ({ model }: { model: Callstack.IModel }) => {
-  const [frames] = useState(model.frames);
+  const [frames, setFrames] = useState(model.frames);
   const [selected, setSelected] = useState();
+
   const onSelected = (frame: any) => {
     setSelected(frame);
+    model.frame = frame;
   };
 
+  useEffect(() => {
+    const updateFrames = (_: Callstack.IModel, updates: Callstack.IFrame[]) => {
+      if (ArrayExt.shallowEqual(frames, updates)) {
+        return;
+      }
+      setFrames(updates);
+    };
+    model.framesChanged.connect(updateFrames);
+
+    return () => {
+      model.framesChanged.disconnect(updateFrames);
+    };
+  });
+
   return (
     <ul>
       {frames.map(ele => (

src/callstack/index.ts

@@ -6,6 +6,7 @@ import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
 import { Widget, Panel, PanelLayout } from '@phosphor/widgets';
 import { Body } from './body';
 import { DebugProtocol } from 'vscode-debugprotocol';
+import { Signal, ISignal } from '@phosphor/signaling';
 
 export class Callstack extends Panel {
   constructor(options: Callstack.IOptions = {}) {
@@ -99,40 +100,40 @@ export namespace Callstack {
 
   export class IModel implements IModel {
     constructor(model: IFrame[]) {
-      this.state = model;
+      this._state = model;
     }
 
     set frames(newFrames: IFrame[]) {
-      this.state = newFrames;
+      this._state = newFrames;
+      this._framesChanged.emit(newFrames);
     }
 
     get frames(): IFrame[] {
-      return this.state;
+      return this._state;
     }
 
-    private state: IFrame[];
+    set frame(frame: IFrame) {
+      this._currentFrame = frame;
+      this._currentFrameChanged.emit(frame);
+    }
+
+    get frame(): IFrame {
+      return this._currentFrame;
+    }
+
+    get framesChanged(): ISignal<this, IFrame[]> {
+      return this._framesChanged;
+    }
+
+    get currentFrameChanged(): ISignal<this, IFrame> {
+      return this._currentFrameChanged;
+    }
+
+    private _state: IFrame[];
+    private _currentFrame: IFrame;
+    private _framesChanged = new Signal<this, IFrame[]>(this);
+    private _currentFrameChanged = new Signal<this, IFrame>(this);
   }
 
   export interface IOptions extends Panel.IOptions {}
 }
-
-// const MOCK_FRAMES: Callstack.IFrame[] = [
-//   {
-//     id: 0,
-//     name: 'test',
-//     source: {
-//       name: 'untitled.py'
-//     },
-//     line: 6,
-//     column: 1
-//   },
-//   {
-//     id: 1,
-//     name: '<module>',
-//     source: {
-//       name: 'untitled.py'
-//     },
-//     line: 7,
-//     column: 1
-//   }
-// ];

src/service.ts

@@ -1,18 +1,21 @@
 import { DebugSession } from './session';
-import { IDebugger } from './tokens';
+
 import { DebugProtocol } from 'vscode-debugprotocol';
+
 import { Debugger } from './debugger';
+
+import { IDebugger } from './tokens';
+
 import { Variables } from './variables';
 
 export class DebugService {
   constructor(session: DebugSession | null, debuggerModel: Debugger.Model) {
     this.session = session;
-    this.model = debuggerModel;
+    this._model = debuggerModel;
   }
 
   private _session: DebugSession;
-  // private _currentFrame: DebugProtocol.StackFrame;
-  private model: Debugger.Model;
+  private _model: Debugger.Model;
 
   set session(session: DebugSession) {
     this._session = session;
@@ -50,11 +53,14 @@ export class DebugService {
 
     this.session.client.kernel.requestExecute({ code });
 
-    const stackFrame = await this.getFrames(threadId);
-    const scopes = await this.getScopes(stackFrame);
+    const stackFrames = await this.getFrames(threadId);
+    const scopes = await this.getScopes(stackFrames);
     const variables = await this.getVariables(scopes);
 
-    this.model.sidebar.variables.model.scopes = this.convertData(
+    if (!!stackFrames) {
+      this._model.sidebar.callstack.model.frames = stackFrames;
+    }
+    this._model.sidebar.variables.model.scopes = this.convertScope(
       scopes,
       variables
     );
@@ -68,14 +74,20 @@ export class DebugService {
     return stackFrames;
   };
 
-  getScopes = async (frame: DebugProtocol.StackFrame[]) => {
+  getScopes = async (frames: DebugProtocol.StackFrame[]) => {
+    if (!frames || frames.length === 0) {
+      return;
+    }
     const reply = await this.session.sendRequest('scopes', {
-      frameId: frame[0].id
+      frameId: frames[0].id
     });
     return reply.body.scopes;
   };
 
   getVariables = async (scopes: DebugProtocol.Scope[]) => {
+    if (!scopes || scopes.length === 0) {
+      return;
+    }
     const reply = await this.session.sendRequest('variables', {
       variablesReference: scopes[0].variablesReference
     });
@@ -83,17 +95,21 @@ export class DebugService {
   };
 
   setBreakpoints = (): DebugProtocol.SourceBreakpoint[] => {
-    return this.model.sidebar.breakpoints.model.breakpoints.map(breakpoint => {
+    return this._model.sidebar.breakpoints.model.breakpoints.map(breakpoint => {
       return {
         line: breakpoint.line
       };
     });
   };
 
-  protected convertData = (
+  protected convertScope = (
     scopes: DebugProtocol.Scope[],
     variables: DebugProtocol.Variable[]
   ): Variables.IScope[] => {
+    console.log({ variables });
+    if (!variables || !scopes) {
+      return;
+    }
     return scopes.map(scope => {
       return {
         name: scope.name,

src/variables/body/search.tsx

@@ -100,11 +100,17 @@ const ScopeMenuComponent = ({ model }: { model: Variables.IModel }) => {
   const [scope, setScope] = useState(model.currentScope);
   const wrapperRef = useRef(null);
 
-  model.scopesChanged.connect((_, update) => {
-    if (!!update && update.length > 0) {
-      setScopes(update);
-      setScope(update[0]);
-    }
+  useEffect(() => {
+    const updateScopes = (_: Variables.IModel, updates: Variables.IScope[]) => {
+      const scope = !!updates && updates.length > 0 ? updates[0] : null;
+      setScopes(updates);
+      setScope(scope);
+    };
+    model.scopesChanged.connect(updateScopes);
+
+    return () => {
+      model.scopesChanged.disconnect(updateScopes);
+    };
   });
 
   const onClickOutSide = () => {

src/variables/body/table.tsx

@@ -7,7 +7,7 @@ import { ArrayExt } from '@phosphor/algorithm';
 
 import { Widget, PanelLayout } from '@phosphor/widgets';
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { Variables } from '../index';
 
@@ -60,11 +60,21 @@ const TableComponent = ({ model }: { model: Variables.IModel }) => {
   const [variables, setVariables] = useState(model.variables);
   const [variable, TableBody] = useTbody(variables, model.currentVariable);
 
-  model.variablesChanged.connect((_: any, updates) => {
-    if (ArrayExt.shallowEqual(variables, updates)) {
-      return;
-    }
-    setVariables(updates);
+  useEffect(() => {
+    const updateVariables = (
+      _: Variables.IModel,
+      updates: Variables.IVariable[]
+    ) => {
+      if (ArrayExt.shallowEqual(variables, updates)) {
+        return;
+      }
+      setVariables(updates);
+    };
+    model.variablesChanged.connect(updateVariables);
+
+    return () => {
+      model.variablesChanged.disconnect(updateVariables);
+    };
   });
 
   model.currentVariable = variable;

src/variables/index.ts

@@ -68,7 +68,8 @@ export namespace Variables {
         return;
       }
       this._currentScope = value;
-      this._variablesChanged.emit(value.variables);
+      const variables = !!value ? value.variables : [];
+      this._variablesChanged.emit(variables);
     }
 
     get currentChanged(): ISignal<this, IVariable> {
@@ -108,11 +109,9 @@ export namespace Variables {
     }
 
     set scopes(scopes: IScope[]) {
-      if (!!scopes && scopes.length > 0) {
-        this._state = scopes;
-        this._scopesChanged.emit(scopes);
-        this.currentScope = scopes[0];
-      }
+      this._state = scopes;
+      this._scopesChanged.emit(scopes);
+      this.currentScope = !!scopes ? scopes[0] : null;
     }
 
     get variables(): IVariable[] {