add list and model for callstack

src/breakpoints/body/index.tsx → src/breakpoints/body.tsx

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
-import { Breakpoints } from '..';
-import { ReactWidget } from '@jupyterlab/apputils';
-
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
+import React, { useState } from 'react';
+import { Breakpoints } from '.';
+import { ReactWidget } from '@jupyterlab/apputils';
+
 export class Body extends ReactWidget {
   constructor(model: Breakpoints.IModel) {
     super();

src/callstack/body.tsx

@@ -0,0 +1,42 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import React, { useState } from 'react';
+import { Callstack } from '.';
+import { ReactWidget } from '@jupyterlab/apputils';
+
+export class Body extends ReactWidget {
+  constructor(model: Callstack.IModel) {
+    super();
+    this.model = model;
+    this.addClass('jp-DebuggerCallstack-body');
+  }
+
+  render() {
+    return <FramesComponent model={this.model} />;
+  }
+
+  readonly model: Callstack.IModel;
+}
+
+const FramesComponent = ({ model }: { model: Callstack.IModel }) => {
+  const [frames] = useState(model.frames);
+  const [selected, setSelected] = useState();
+  const onSelected = (frame: any) => {
+    setSelected(frame);
+  };
+
+  return (
+    <ul>
+      {frames.map(ele => (
+        <li
+          key={ele.id}
+          onClick={() => onSelected(ele)}
+          className={selected === ele ? 'selected' : ''}
+        >
+          {ele.name} at {ele.source.name}:{ele.line}
+        </li>
+      ))}
+    </ul>
+  );
+};

src/callstack/index.ts

@@ -4,19 +4,22 @@
 import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
 
 import { Widget, Panel, PanelLayout } from '@phosphor/widgets';
+import { Body } from './body';
+import { DebugProtocol } from 'vscode-debugprotocol';
 
 export class Callstack extends Panel {
   constructor(options: Callstack.IOptions = {}) {
     super();
 
-    this.model = {};
+    this.model = new Callstack.IModel(MOCK_FRAMES);
     this.addClass('jp-DebuggerCallstack');
     this.title.label = 'Callstack';
 
     const header = new CallstackHeader(this.title.label);
+    const body = new Body(this.model);
 
     this.addWidget(header);
-    this.addWidget(this.body);
+    this.addWidget(body);
 
     header.toolbar.addItem(
       'continue',
@@ -70,8 +73,6 @@ export class Callstack extends Panel {
     );
   }
 
-  readonly body = new Panel();
-
   readonly model: Callstack.IModel;
 }
 
@@ -92,7 +93,46 @@ class CallstackHeader extends Widget {
 }
 
 export namespace Callstack {
+  export interface IFrame extends DebugProtocol.StackFrame {}
+
   export interface IModel {}
 
+  export class IModel implements IModel {
+    constructor(model: IFrame[]) {
+      this.state = model;
+    }
+
+    set frames(newFrames: IFrame[]) {
+      this.state = newFrames;
+    }
+
+    get frames(): IFrame[] {
+      return this.state;
+    }
+
+    private state: IFrame[];
+  }
+
   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
+  }
+];

style/callstack.css

@@ -2,3 +2,22 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+.jp-DebuggerCallstack-body ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  font-size: var(--jp-ui-font-size1);
+}
+
+.jp-DebuggerCallstack-body ul li {
+  padding: 5px;
+  padding-left: 8px;
+}
+
+.jp-DebuggerCallstack-body ul li.selected {
+  color: white;
+  background: var(--jp-brand-color1);
+}