breakpoints list and model

src/breakpoints/body/index.tsx

@@ -0,0 +1,71 @@
+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.
+
+export class Body extends ReactWidget {
+  constructor(model: Breakpoints.IModel) {
+    super();
+    this.model = model;
+    this.addClass('jp-DebuggerBreakpoints-body');
+  }
+
+  render() {
+    return <BreakpointsComponent model={this.model} />;
+  }
+
+  readonly model: Breakpoints.IModel;
+}
+
+const BreakpointsComponent = ({ model }: { model: Breakpoints.IModel }) => {
+  const [breakpoints] = useState(model.breakpoints);
+  const [active, setActive] = useState(model.isActive);
+
+  model.activesChange.connect((_: Breakpoints.IModel, update: boolean) => {
+    console.log(update);
+    setActive(update);
+  });
+
+  return (
+    <div>
+      {breakpoints.map((breakpoint: any) => (
+        <BreakpointComponent
+          key={breakpoint.id}
+          breakpoint={breakpoint}
+          active={active}
+        />
+      ))}
+    </div>
+  );
+};
+
+const BreakpointComponent = ({
+  breakpoint,
+  active
+}: {
+  breakpoint: any;
+  active: any;
+}) => {
+  const [checkState, setCheck] = useState(breakpoint.verified);
+  breakpoint.verified = checkState;
+  const setBreakpointEnabled = (breakpoint: any, state: boolean) => {
+    setCheck(state);
+  };
+
+  return (
+    <div className={`breakpoint ${active ? '' : 'disabled'}`}>
+      <input
+        onChange={() => {
+          setBreakpointEnabled(breakpoint, !checkState);
+        }}
+        type="checkbox"
+        checked={checkState}
+      />
+      <span>
+        {breakpoint.source.name} : {breakpoint.line}
+      </span>
+    </div>
+  );
+};

src/breakpoints/index.ts

@@ -4,16 +4,20 @@
 import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
 
 import { Widget, Panel, PanelLayout } from '@phosphor/widgets';
+import { DebugProtocol } from 'vscode-debugprotocol';
+import { Body } from './body';
+import { Signal, ISignal } from '@phosphor/signaling';
 
 export class Breakpoints extends Panel {
   constructor(options: Breakpoints.IOptions = {}) {
     super();
 
-    this.model = {};
+    this.model = new Breakpoints.IModel(MOCK_BREAKPOINTS);
     this.addClass('jp-DebuggerBreakpoints');
     this.title.label = 'Breakpoints';
 
     const header = new BreakpointsHeader(this.title.label);
+    this.body = new Body(this.model);
 
     this.addWidget(header);
     this.addWidget(this.body);
@@ -23,14 +27,14 @@ export class Breakpoints extends Panel {
       new ToolbarButton({
         iconClassName: 'jp-DebuggerDeactivateIcon',
         onClick: () => {
-          console.log('`deactivate` was clicked');
+          this.model.onActive = !this.model.isActive;
         },
         tooltip: 'Deactivate Breakpoints'
       })
     );
   }
 
-  readonly body = new Panel();
+  readonly body: Widget;
 
   readonly model: Breakpoints.IModel;
 }
@@ -52,13 +56,76 @@ class BreakpointsHeader extends Widget {
 }
 
 export namespace Breakpoints {
+  export interface IBreakpoint extends DebugProtocol.Breakpoint {}
+
   /**
    * The breakpoints UI model.
    */
   export interface IModel {}
 
+  export class IModel implements IModel {
+    constructor(model: IBreakpoint[]) {
+      this._state = model;
+    }
+
+    get breakpointsChanged(): ISignal<this, IBreakpoint[]> {
+      return this._breakpointsChanged;
+    }
+
+    get activesChange(): ISignal<this, boolean> {
+      return this._activeChange;
+    }
+
+    get breakpoints(): IBreakpoint[] {
+      return this._state;
+    }
+
+    get isActive(): boolean {
+      return this._activeBreakpoints;
+    }
+
+    set onActive(value: boolean) {
+      this._activeBreakpoints = value;
+      this._activeChange.emit(value);
+    }
+
+    set breakpoints(breakpoints: IBreakpoint[]) {
+      this._state = breakpoints;
+      this._breakpointsChanged.emit(this._state);
+    }
+
+    set breakpoint(breakpoint: IBreakpoint) {
+      const index = this._state.findIndex(ele => ele.id === breakpoint.id);
+      if (index !== -1) this._state[index] = breakpoint;
+    }
+
+    private _state: IBreakpoint[];
+    private _activeBreakpoints: boolean = true;
+    private _breakpointsChanged = new Signal<this, IBreakpoint[]>(this);
+    private _activeChange = new Signal<this, boolean>(this);
+  }
+
   /**
    * Instantiation options for `Breakpoints`;
    */
   export interface IOptions extends Panel.IOptions {}
 }
+
+const MOCK_BREAKPOINTS = [
+  {
+    id: 0,
+    verified: true,
+    source: {
+      name: 'untitled.py'
+    },
+    line: 6
+  },
+  {
+    id: 1,
+    verified: true,
+    source: {
+      name: 'untitled.py'
+    },
+    line: 7
+  }
+];

style/breakpoints.css

@@ -2,3 +2,11 @@
 | Copyright (c) Jupyter Development Team.
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
+
+.jp-DebuggerBreakpoints-body {
+  padding: 10px;
+}
+
+.jp-DebuggerBreakpoints .breakpoint.disabled {
+  opacity: 0.4;
+}