refactor , suggest by Jeremy

src/breakpoints/body.tsx

@@ -37,7 +37,7 @@ const BreakpointsComponent = ({ model }: { model: Breakpoints.IModel }) => {
     <div>
       {breakpoints.map((breakpoint: Breakpoints.IBreakpoint) => (
         <BreakpointComponent
-          key={breakpoint.id}
+          key={breakpoint.line}
           breakpoint={breakpoint}
           breakpointChanged={model.breakpointChanged}
         />

src/breakpoints/index.ts

@@ -16,7 +16,7 @@ export class Breakpoints extends Panel {
   constructor(options: Breakpoints.IOptions) {
     super();
 
-    this.model = new Breakpoints.IModel([] as Breakpoints.IBreakpoint[]);
+    this.model = new Breakpoints.IModel([]);
     this.addClass('jp-DebuggerBreakpoints');
     this.title.label = 'Breakpoints';
 
@@ -47,26 +47,29 @@ export class Breakpoints extends Panel {
         iconClassName: 'jp-CloseAllIcon',
         onClick: () => {
           this.model.breakpoints = [];
-          this.cellsBreakpoints[this.getCell().id] = {};
+          this.cellsBreakpoints[this.getCell().id] = [];
           this.removeAllGutterBreakpoints(this.getCell());
         },
         tooltip: 'Remove All Breakpoints'
       })
     );
 
-    this.notebook = options.notebook;
-    if (this.notebook) {
-      this.notebook.activeCellChanged.connect(this.onActiveCellChanged, this);
+    this.noteTracker = options.noteTracker;
+    if (this.noteTracker) {
+      this.noteTracker.activeCellChanged.connect(
+        this.onActiveCellChanged,
+        this
+      );
     }
   }
 
   private isAllActive = true;
   readonly body: Widget;
   readonly model: Breakpoints.IModel;
-  notebook: INotebookTracker;
+  noteTracker: INotebookTracker;
   previousCell: CodeCell;
   previousLineCount: number;
-  cellsBreakpoints: any = {};
+  cellsBreakpoints: { [id: string]: Breakpoints.IBreakpoint[] } = {};
 
   protected onActiveCellChanged() {
     const activeCell = this.getCell();
@@ -85,7 +88,7 @@ export class Breakpoints extends Panel {
   }
 
   protected getCell(): CodeCell {
-    return this.notebook.activeCell as CodeCell;
+    return this.noteTracker.activeCell as CodeCell;
   }
 
   protected removeAllGutterBreakpoints(cell: CodeCell) {
@@ -100,7 +103,7 @@ export class Breakpoints extends Panel {
     this.cellsBreakpoints[cell.model.id] = this.model.breakpoints;
     this.model.breakpoints = [];
     editor.setOption('lineNumbers', false);
-    editor.editor.off('gutterClick', this.addBreakpoint);
+    editor.editor.off('gutterClick', this.onGutterClick);
     editor.editor.off('renderLine', this.onNewRenderLine);
   }
 
@@ -116,7 +119,7 @@ export class Breakpoints extends Panel {
       'breakpoints'
     ]);
 
-    editor.editor.on('gutterClick', this.addBreakpoint);
+    editor.editor.on('gutterClick', this.onGutterClick);
     editor.editor.on('renderLine', this.onNewRenderLine);
   }
 
@@ -154,36 +157,40 @@ export class Breakpoints extends Panel {
     }
   };
 
-  protected addBreakpoint = (editor: Editor, lineNumber: number) => {
+  private addBreakpoint(line: number) {
+    this.model.breakpoint = {
+      id: this.model.breakpoints.length + 1,
+      active: true,
+      verified: true,
+      source: {
+        // TODO: need get filename
+        name: 'untitled.py'
+      },
+      line: line
+    };
+  }
+
+  protected onGutterClick = (editor: Editor, lineNumber: number) => {
     const info = editor.lineInfo(lineNumber);
     if (!info) {
       return;
     }
-    const removeGutter = !!info.gutterMarkers;
+    const isRemoveGutter = !!info.gutterMarkers;
 
     const breakpoint: Breakpoints.IBreakpoint = this.model.getBreakpointByLineNumber(
       lineNumber
     );
 
-    if (!breakpoint && !removeGutter) {
-      this.model.breakpoint = {
-        id: this.model.breakpoints.length + 1,
-        active: true,
-        verified: true,
-        source: {
-          // TODO: need get filename
-          name: 'untitled.py'
-        },
-        line: lineNumber
-      };
-    } else if (removeGutter) {
+    if (!breakpoint && !isRemoveGutter) {
+      this.addBreakpoint(lineNumber);
+    } else if (isRemoveGutter) {
       this.model.removeBreakpoint(breakpoint);
     }
 
     editor.setGutterMarker(
       lineNumber,
       'breakpoints',
-      removeGutter ? null : this.createMarkerNode()
+      isRemoveGutter ? null : this.createMarkerNode()
     );
   };
 
@@ -243,15 +250,12 @@ export namespace Breakpoints {
     }
 
     set breakpoint(breakpoint: IBreakpoint) {
-      const index = this._state.findIndex(ele => ele.id === breakpoint.id);
+      const index = this._state.findIndex(ele => ele.line === breakpoint.line);
       if (index !== -1) {
         this._state[index] = breakpoint;
         this._breakpointChanged.emit(breakpoint);
       } else {
-        const breakpoints = this.breakpoints;
-        breakpoints.push(breakpoint);
-        this.breakpoints = [];
-        this.breakpoints = breakpoints;
+        this.breakpoints = [...this.breakpoints, breakpoint];
       }
     }
 
@@ -259,7 +263,6 @@ export namespace Breakpoints {
       const breakpoints = this.breakpoints.filter(
         ele => ele.line !== breakpoint.line
       );
-      this.breakpoints = [];
       this.breakpoints = breakpoints;
     }
 
@@ -268,7 +271,6 @@ export namespace Breakpoints {
         ele.line = lineEnter <= ele.line ? ele.line + howMany : ele.line;
         return ele;
       });
-      this.breakpoints = [];
       this.breakpoints = breakpoints;
     }
 
@@ -285,6 +287,6 @@ export namespace Breakpoints {
    * Instantiation options for `Breakpoints`;
    */
   export interface IOptions extends Panel.IOptions {
-    notebook?: INotebookTracker;
+    noteTracker?: INotebookTracker;
   }
 }

src/debugger.ts

@@ -17,7 +17,7 @@ import { IEditorTracker } from '@jupyterlab/fileeditor';
 export class Debugger extends BoxPanel {
   constructor(options: Debugger.IOptions) {
     super({ direction: 'left-to-right' });
-    this.notebook = options.notebook;
+
     this.model = new Debugger.Model(options);
     this.sidebar = new DebuggerSidebar(this.model);
     this.title.label = 'Debugger';
@@ -30,8 +30,6 @@ export class Debugger extends BoxPanel {
 
   readonly sidebar: DebuggerSidebar;
 
-  editor: IEditorTracker;
-  notebook: INotebookTracker;
   previousCell: CodeCell;
 
   dispose(): void {
@@ -49,8 +47,8 @@ export class Debugger extends BoxPanel {
 export namespace Debugger {
   export interface IOptions {
     connector?: IDataConnector<ReadonlyJSONValue>;
-    notebook?: INotebookTracker;
-    editor?: IEditorTracker;
+    noteTracker?: INotebookTracker;
+    editorTracker?: IEditorTracker;
     id?: string;
   }
 
@@ -58,7 +56,7 @@ export namespace Debugger {
     constructor(options: Debugger.Model.IOptions) {
       this.connector = options.connector || null;
       this.id = options.id || UUID.uuid4();
-      this._notebook = options.notebook;
+      this._notebook = options.noteTracker;
       void this._populate();
     }
 

src/index.ts

@@ -17,7 +17,7 @@ import { IStateDB } from '@jupyterlab/coreutils';
 
 import { IEditorTracker } from '@jupyterlab/fileeditor';
 
-import { INotebookTracker } from '@jupyterlab/notebook';
+import { INotebookTracker, NotebookPanel } from '@jupyterlab/notebook';
 
 import { Debugger } from './debugger';
 
@@ -27,8 +27,6 @@ import { IDebugger, IDebuggerSidebar } from './tokens';
 
 // import { ClientSession, IClientSession } from '@jupyterlab/apputils';
 
-import { Session } from '@jupyterlab/services';
-
 // import { DebugSession } from './session';
 
 /**
@@ -95,47 +93,19 @@ const notebooks: JupyterFrontEndPlugin<void> = {
   activate: (
     app: JupyterFrontEnd,
     debug,
-    tracker: INotebookTracker,
+    notebook: INotebookTracker,
     palette: ICommandPalette
   ) => {
-    Session.listRunning().then(sessionModels => {
-      console.log(sessionModels);
-      // const session = Session.connectTo(sessionModels[0]);
-
-      // session.shutdown();
-    });
-    // console.log(client);
-    // if (false) {
-    // const test = async () => {
-
-    //   await (client as ClientSession).initialize();
-    //   await client.kernel.ready;
-    // };
-    // const debugSession = new DebugSession({ client });
-    // console.log(debugSession, test);
-    // }
+    notebook.widgetAdded.connect((sender, notePanel: NotebookPanel) => {});
 
+    // this exist only for my test in futre will be removed
     const command: string = CommandIDs.debugNotebook;
     app.commands.addCommand(command, {
-      label: 'A',
-      execute: () => {
-        let options = {
-          kernelName: 'python',
-          path: '/tmp/foo.ipynb',
-          name: 'foo.ipynb'
-        };
-        Session.startNew(options).then(session => {
-          // Execute and handle replies on the kernel.
-          let future = session.kernel.requestExecute({ code: 'a = 1' });
-          future.done.then(res => {
-            console.log('Future is fulfilled', res);
-          });
-        });
-      }
+      label: 'test',
+      execute: () => {}
     });
 
-    // Add the command to the palette.
-    palette.addItem({ command, category: 'A' });
+    palette.addItem({ command, category: 'dev test' });
   }
 };
 
@@ -155,7 +125,7 @@ const sidebar: JupyterFrontEndPlugin<Debugger> = {
     const label = 'Environment';
     const namespace = 'jp-debugger-sidebar';
     const sidebar = new Debugger({
-      notebook: notebookTracker
+      noteTracker: notebookTracker
     });
 
     sidebar.id = namespace;

src/sidebar.ts

@@ -22,7 +22,7 @@ export class DebuggerSidebar extends SplitPanel {
 
     this.variables = new Variables();
     this.callstack = new Callstack();
-    this.breakpoints = new Breakpoints({ notebook: notebook });
+    this.breakpoints = new Breakpoints({ noteTracker: notebook });
 
     this.addWidget(this.variables);
     this.addWidget(this.callstack);