Connect Breakpoints widget with NoteBook

package.json

@@ -52,6 +52,7 @@
     "@phosphor/coreutils": "^1.3.1",
     "@phosphor/disposable": "^1.2.0",
     "@phosphor/widgets": "^1.8.0",
+    "@types/codemirror": "0.0.76",
     "vscode-debugprotocol": "1.35.0"
   },
   "devDependencies": {

src/breakpoints/body.tsx

@@ -8,7 +8,7 @@ import { ArrayExt } from '@phosphor/algorithm';
 import { ISignal } from '@phosphor/signaling';
 
 export class Body extends ReactWidget {
-  constructor(model: Breakpoints.IModel) {
+  constructor(model: Breakpoints.Model) {
     super();
     this.model = model;
     this.addClass('jp-DebuggerBreakpoints-body');
@@ -18,14 +18,14 @@ export class Body extends ReactWidget {
     return <BreakpointsComponent model={this.model} />;
   }
 
-  readonly model: Breakpoints.IModel;
+  readonly model: Breakpoints.Model;
 }
 
-const BreakpointsComponent = ({ model }: { model: Breakpoints.IModel }) => {
+const BreakpointsComponent = ({ model }: { model: Breakpoints.Model }) => {
   const [breakpoints, setBreakpoints] = useState(model.breakpoints);
 
   model.breakpointsChanged.connect(
-    (_: Breakpoints.IModel, updates: Breakpoints.IBreakpoint[]) => {
+    (_: Breakpoints.Model, updates: Breakpoints.IBreakpoint[]) => {
       if (ArrayExt.shallowEqual(breakpoints, updates)) {
         return;
       }
@@ -35,9 +35,9 @@ const BreakpointsComponent = ({ model }: { model: Breakpoints.IModel }) => {
 
   return (
     <div>
-      {breakpoints.map((breakpoint: any) => (
+      {breakpoints.map((breakpoint: Breakpoints.IBreakpoint) => (
         <BreakpointComponent
-          key={breakpoint.id}
+          key={breakpoint.line}
           breakpoint={breakpoint}
           breakpointChanged={model.breakpointChanged}
         />
@@ -51,13 +51,13 @@ const BreakpointComponent = ({
   breakpointChanged
 }: {
   breakpoint: Breakpoints.IBreakpoint;
-  breakpointChanged: ISignal<Breakpoints.IModel, Breakpoints.IBreakpoint>;
+  breakpointChanged: ISignal<Breakpoints.Model, Breakpoints.IBreakpoint>;
 }) => {
   const [active, setActive] = useState(breakpoint.active);
   breakpoint.active = active;
 
   breakpointChanged.connect(
-    (_: Breakpoints.IModel, updates: Breakpoints.IBreakpoint) => {
+    (_: Breakpoints.Model, updates: Breakpoints.IBreakpoint) => {
       setActive(updates.active);
     }
   );

src/breakpoints/index.ts

@@ -6,13 +6,15 @@ 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';
+import { Signal } from '@phosphor/signaling';
+import { LineInfo } from '../handlers/cell';
+
+// import { BreakpointsService } from '../breakpointsService';
 
 export class Breakpoints extends Panel {
-  constructor(options: Breakpoints.IOptions = {}) {
+  constructor(options: Breakpoints.IOptions) {
     super();
-
-    this.model = new Breakpoints.IModel(MOCK_BREAKPOINTS);
+    this.model = new Breakpoints.Model([]);
     this.addClass('jp-DebuggerBreakpoints');
     this.title.label = 'Breakpoints';
 
@@ -42,7 +44,7 @@ export class Breakpoints extends Panel {
       new ToolbarButton({
         iconClassName: 'jp-CloseAllIcon',
         onClick: () => {
-          this.model.breakpoints = [];
+          this.model.clearSelectedBreakpoints();
         },
         tooltip: 'Remove All Breakpoints'
       })
@@ -51,7 +53,7 @@ export class Breakpoints extends Panel {
 
   private isAllActive = true;
   readonly body: Widget;
-  readonly model: Breakpoints.IModel;
+  readonly model: Breakpoints.Model;
 }
 
 class BreakpointsHeader extends Widget {
@@ -75,44 +77,94 @@ export namespace Breakpoints {
     active: boolean;
   }
 
-  /**
-   * The breakpoints UI model.
-   */
-  export interface IModel {}
-
-  export class IModel implements IModel {
+  export class Model {
     constructor(model: IBreakpoint[]) {
-      this._state = model;
-    }
-
-    get breakpointsChanged(): ISignal<this, IBreakpoint[]> {
-      return this._breakpointsChanged;
+      this._breakpoints = model;
     }
 
     get breakpoints(): IBreakpoint[] {
-      return this._state;
+      return this._breakpoints;
     }
 
-    get breakpointChanged(): ISignal<this, IBreakpoint> {
+    get breakpointChanged(): Signal<this, IBreakpoint> {
       return this._breakpointChanged;
     }
 
     set breakpoints(breakpoints: IBreakpoint[]) {
-      this._state = breakpoints;
-      this._breakpointsChanged.emit(this._state);
+      this._breakpoints = [...breakpoints];
+      this.breakpointsChanged.emit(this._breakpoints);
     }
 
     set breakpoint(breakpoint: IBreakpoint) {
-      const index = this._state.findIndex(ele => ele.id === breakpoint.id);
+      const index = this._breakpoints.findIndex(
+        ele => ele.line === breakpoint.line
+      );
       if (index !== -1) {
-        this._state[index] = breakpoint;
+        this._breakpoints[index] = breakpoint;
         this._breakpointChanged.emit(breakpoint);
+      } else {
+        this.breakpoints = [...this.breakpoints, breakpoint];
+      }
+    }
+
+    addBreakpoint(session: string, type: string, lineInfo: LineInfo) {
+      const breakpoint: Breakpoints.IBreakpoint = {
+        line: lineInfo.line + 1,
+        active: true,
+        verified: true,
+        source: {
+          name: session
+        }
+      };
+      this.breakpoints = [...this._breakpoints, breakpoint];
+    }
+
+    set type(newType: SessionTypes) {
+      if (newType === this.selectedType) {
+        return;
       }
+      this.state[this.selectedType] = this.breakpoints;
+      this.selectedType = newType;
+      this.breakpoints = this.state[newType];
+    }
+
+    removeBreakpoint(lineInfo: any) {
+      const breakpoints = this.breakpoints.filter(
+        ele => ele.line !== lineInfo.line + 1
+      );
+      this.breakpoints = breakpoints;
+    }
+
+    clearSelectedBreakpoints() {
+      this.breakpoints = [];
+      this.clearedBreakpoints.emit(this.selectedType);
     }
 
-    private _state: IBreakpoint[];
-    private _breakpointsChanged = new Signal<this, IBreakpoint[]>(this);
+    changeLines(linesInfo: LineInfo[]) {
+      if (!linesInfo && this.breakpoints.length === 0) {
+        return;
+      }
+      if (linesInfo.length === 0) {
+        this.breakpoints = [];
+      } else {
+        const breakpoint = { ...this.breakpoints[0] };
+        let breakpoints: Breakpoints.IBreakpoint[] = [];
+        linesInfo.forEach(ele => {
+          breakpoints.push({ ...breakpoint, line: ele.line + 1 });
+        });
+        this.breakpoints = [...breakpoints];
+      }
+    }
+
+    private _breakpoints: IBreakpoint[];
+    breakpointsChanged = new Signal<this, IBreakpoint[]>(this);
+    clearedBreakpoints = new Signal<this, SessionTypes | null>(this);
+    private selectedType: SessionTypes;
     private _breakpointChanged = new Signal<this, IBreakpoint>(this);
+    private state = {
+      console: [] as Breakpoints.IBreakpoint[],
+      notebook: [] as Breakpoints.IBreakpoint[]
+    };
   }
 
   /**
@@ -121,23 +173,4 @@ export namespace Breakpoints {
   export interface IOptions extends Panel.IOptions {}
 }
 
-const MOCK_BREAKPOINTS = [
-  {
-    id: 0,
-    active: true,
-    verified: true,
-    source: {
-      name: 'untitled.py'
-    },
-    line: 6
-  },
-  {
-    id: 1,
-    verified: true,
-    active: false,
-    source: {
-      name: 'untitled.py'
-    },
-    line: 7
-  }
-];
+export type SessionTypes = 'console' | 'notebook';

src/debugger.ts

@@ -3,33 +3,35 @@
 
 import { IDataConnector } from '@jupyterlab/coreutils';
 
-import { BoxPanel, TabPanel } from '@phosphor/widgets';
+import { ReadonlyJSONValue } from '@phosphor/coreutils';
 
-import { ReadonlyJSONValue, UUID } from '@phosphor/coreutils';
+import { INotebookTracker } from '@jupyterlab/notebook';
+
+import { IClientSession } from '@jupyterlab/apputils';
 
 import { IDisposable } from '@phosphor/disposable';
 
-import { DebuggerSidebar } from './sidebar';
+import { ISignal, Signal } from '@phosphor/signaling';
 
-export class Debugger extends BoxPanel {
-  readonly model: Debugger.Model;
+import { BoxPanel } from '@phosphor/widgets';
 
-  readonly tabs = new TabPanel();
+import { DebugSession } from './session';
 
-  readonly sidebar: DebuggerSidebar;
+import { IDebuggerSidebar } from './tokens';
 
+export class Debugger extends BoxPanel {
   constructor(options: Debugger.IOptions) {
     super({ direction: 'left-to-right' });
-
     this.model = new Debugger.Model(options);
-    this.sidebar = new DebuggerSidebar(this.model);
-    this.title.label = 'Debugger';
+    // this.sidebar = new DebuggerSidebar(this.model);
+    this.title.label = 'Debugger-' + options.id;
 
     this.addClass('jp-Debugger');
-    this.addWidget(this.tabs);
-    this.addWidget(this.sidebar);
+    // this.addWidget(this.sidebar);
   }
 
+  readonly model: Debugger.Model;
+
   dispose(): void {
     if (this.isDisposed) {
       return;
@@ -45,25 +47,58 @@ export class Debugger extends BoxPanel {
 export namespace Debugger {
   export interface IOptions {
     connector?: IDataConnector<ReadonlyJSONValue>;
-
     id?: string;
+    session?: IClientSession;
+    sidebar?: IDebuggerSidebar;
   }
 
   export class Model implements IDisposable {
     constructor(options: Debugger.Model.IOptions) {
       this.connector = options.connector || null;
-      this.id = options.id || UUID.uuid4();
+      this.session = new DebugSession({ client: options.session });
+      this.id = options.id;
       void this._populate();
     }
 
     readonly connector: IDataConnector<ReadonlyJSONValue> | null;
 
     readonly id: string;
 
+    get sidebar() {
+      return this._sidebar;
+    }
+
+    set sidebar(newSidebar: IDebuggerSidebar) {
+      this._sidebar = newSidebar;
+    }
+
+    get session() {
+      return this._session;
+    }
+
+    set session(session: DebugSession | null) {
+      if (this._session === session) {
+        return;
+      }
+      if (this._session) {
+        this._session.dispose();
+      }
+      this._session = session;
+      this._sessionChanged.emit(undefined);
+    }
+
+    get sessionChanged(): ISignal<this, void> {
+      return this._sessionChanged;
+    }
+
     get isDisposed(): boolean {
       return this._isDisposed;
     }
 
+    get notebookTracker() {
+      return this._notebook;
+    }
+
     dispose(): void {
       this._isDisposed = true;
     }
@@ -77,6 +112,10 @@ export namespace Debugger {
     }
 
     private _isDisposed = false;
+    private _notebook: INotebookTracker;
+    private _session: DebugSession | null;
+    private _sessionChanged = new Signal<this, void>(this);
+    private _sidebar: IDebuggerSidebar;
   }
 
   export namespace Model {