convert response for UI

src/service.ts

@@ -2,6 +2,7 @@ import { DebugSession } from './session';
 import { IDebugger } from './tokens';
 import { DebugProtocol } from 'vscode-debugprotocol';
 import { Debugger } from './debugger';
+import { Variables } from './variables';
 
 export class DebugService {
   constructor(session: DebugSession | null, debuggerModel: Debugger.Model) {
@@ -11,7 +12,7 @@ export class DebugService {
 
   private _session: DebugSession;
   // private _currentFrame: DebugProtocol.StackFrame;
-  private _debuggerModel: Debugger.Model;
+  private model: Debugger.Model;
 
   set session(session: DebugSession) {
     this._session = session;
@@ -21,14 +22,6 @@ export class DebugService {
     return this._session;
   }
 
-  get model() {
-    return this._debuggerModel;
-  }
-
-  set model(model: Debugger.Model) {
-    this._debuggerModel = model;
-  }
-
   // this will change for after execute cell
   async launch(code: string): Promise<void> {
     let threadId: number = 1;
@@ -44,11 +37,9 @@ export class DebugService {
     );
 
     const breakpoints: DebugProtocol.SourceBreakpoint[] = this.setBreakpoints();
-    const reply = await this.session
-      .sendRequest('dumpCell', {
-        code
-      })
-      .catch(error => error);
+    const reply = await this.session.sendRequest('dumpCell', {
+      code
+    });
 
     await this.session.sendRequest('setBreakpoints', {
       breakpoints: breakpoints,
@@ -59,11 +50,14 @@ export class DebugService {
 
     this.session.client.kernel.requestExecute({ code });
 
-    const stackFrameReply = await this.getFrames(threadId);
-    const scopeReply = await this.getScopes(stackFrameReply);
-    const variablesReply = await this.getVariables(scopeReply);
+    const stackFrame = await this.getFrames(threadId);
+    const scopes = await this.getScopes(stackFrame);
+    const variables = await this.getVariables(scopes);
 
-    console.log({ variablesReply, scopeReply, stackFrameReply });
+    this.model.sidebar.variables.model.scopes = this.convertData(
+      scopes,
+      variables
+    );
   }
 
   getFrames = async (threadId: number) => {
@@ -95,4 +89,18 @@ export class DebugService {
       };
     });
   };
+
+  protected convertData = (
+    scopes: DebugProtocol.Scope[],
+    variables: DebugProtocol.Variable[]
+  ): Variables.IScope[] => {
+    return scopes.map(scope => {
+      return {
+        name: scope.name,
+        variables: variables.map(variable => {
+          return { ...variable, description: '' };
+        })
+      };
+    });
+  };
 }

src/variables/body/search.tsx

@@ -76,7 +76,10 @@ class ScopeSearch extends ReactWidget {
   }
 }
 
-const useOutsideClick = (ref: any, callback: any) => {
+const useOutsideClick = (
+  ref: React.MutableRefObject<any>,
+  callback: Function
+) => {
   const handleClickOutside = (e: Event) => {
     if (ref.current && !ref.current.contains(e.target)) {
       callback();
@@ -93,22 +96,22 @@ const useOutsideClick = (ref: any, callback: any) => {
 
 const ScopeMenuComponent = ({ model }: { model: Variables.IModel }) => {
   const [toggleState, setToggle] = useState(false);
+  const [scopes, setScopes] = useState(model.scopes);
   const [scope, setScope] = useState(model.currentScope);
   const wrapperRef = useRef(null);
-  const scopes = model.scopes;
 
-  const ListScopes = () =>
-    scopes.map(scope => (
-      <li key={scope.name} onClick={e => changeScope(scope)}>
-        {scope.name}
-      </li>
-    ));
+  model.scopesChanged.connect((_, update) => {
+    if (!!update && update.length > 0) {
+      setScopes(update);
+      setScope(update[0]);
+    }
+  });
 
   const onClickOutSide = () => {
     setToggle(false);
   };
 
-  const toggle = (e: any) => {
+  const toggle = () => {
     if (!!scopes) {
       setToggle(!toggleState);
     }
@@ -125,10 +128,20 @@ const ScopeMenuComponent = ({ model }: { model: Variables.IModel }) => {
     setToggle(false);
   };
 
-  const List = <ul>{!!scopes ? ListScopes : null}</ul>;
+  const List = (
+    <ul>
+      {!!scopes
+        ? scopes.map(scope => (
+            <li key={scope.name} onClick={e => changeScope(scope)}>
+              {scope.name}
+            </li>
+          ))
+        : null}
+    </ul>
+  );
 
   return (
-    <div onClick={e => toggle(e)} ref={wrapperRef}>
+    <div onClick={e => toggle()} ref={wrapperRef}>
       <span className="label">{scope ? scope.name : '-'}</span>
       <span className="fa fa-caret-down"></span>
       {toggleState ? List : null}

src/variables/body/table.tsx

@@ -103,12 +103,12 @@ const useTbody = (items: Array<any>, defaultState: any) => {
             >
               <td style={{ paddingLeft: `${12}px`, width: `${25}%` }}>
                 <span
-                  className={`jp-Icon jp-Icon-16 ${setClassIcon(item.value)}`}
+                  className={`jp-Icon jp-Icon-16 ${setClassIcon(item.type)}`}
                 ></span>
                 {item.name}
               </td>
               <td style={{ paddingLeft: `${12}px`, width: `${75}%` }}>
-                {item.value}
+                {item.type}
               </td>
             </tr>
           ))}

src/variables/index.ts

@@ -75,6 +75,10 @@ export namespace Variables {
       return this._currentChanged;
     }
 
+    get scopesChanged(): ISignal<this, IScope[]> {
+      return this._scopesChanged;
+    }
+
     get currentVariable(): IVariable {
       return this._currentVariable;
     }
@@ -103,6 +107,14 @@ export namespace Variables {
       return this._state;
     }
 
+    set scopes(scopes: IScope[]) {
+      if (!!scopes && scopes.length > 0) {
+        this._state = scopes;
+        this._scopesChanged.emit(scopes);
+        this.currentScope = scopes[0];
+      }
+    }
+
     get variables(): IVariable[] {
       if (this._filterState) {
         return this._filterVariables();
@@ -137,6 +149,7 @@ export namespace Variables {
     private _filterState: string = '';
     protected _state: IScope[];
     private _currentScope: IScope;
+    private _scopesChanged = new Signal<this, IScope[]>(this);
   }
 
   export interface IOptions extends Panel.IOptions {}