set namespaces for Variables

src/breakpoints/widget.ts → src/breakpoints/breakpoints.ts

@@ -5,7 +5,7 @@ import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
 
 import { Widget, Panel } from '@phosphor/widgets';
 
-export class BreakPointsWidget extends Panel {
+export class BreakPoints extends Panel {
   readonly body: Panel;
 
   readonly header: Panel;
@@ -41,3 +41,5 @@ export class BreakPointsWidget extends Panel {
     this.header.addWidget(this.toolbar);
   }
 }
+
+export namespace BreakPoints {}

src/breakpoints/index.ts

@@ -1,4 +1,4 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export * from './widget';
+export * from './breakpoints';

src/callstack/widget.ts → src/callstack/callstack.ts

@@ -5,7 +5,7 @@ import { Toolbar, ToolbarButton } from '@jupyterlab/apputils';
 
 import { Widget, Panel } from '@phosphor/widgets';
 
-export class CallstackWidget extends Panel {
+export class Callstack extends Panel {
   readonly header: Panel;
 
   readonly label: Widget;
@@ -53,3 +53,5 @@ export class CallstackWidget extends Panel {
     this.header.addWidget(this.toolbar);
   }
 }
+
+export namespace Callstack {}

src/callstack/index.ts

@@ -1,4 +1,4 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export * from './widget';
+export * from './callstack';

src/sidebar.ts

@@ -3,13 +3,13 @@
 
 import { SplitPanel } from '@phosphor/widgets';
 
-import { BreakPointsWidget } from './breakpoints';
+import { BreakPoints } from './breakpoints';
 
 import { Debugger } from './debugger';
 
-import { CallstackWidget } from './callstack';
+import { Callstack } from './callstack';
 
-import { VariablesWidget } from './variables';
+import { Variables } from './variables';
 
 export class DebuggerSidebar extends SplitPanel {
   constructor(model: Debugger.Model | null) {
@@ -18,20 +18,20 @@ export class DebuggerSidebar extends SplitPanel {
     this.orientation = 'vertical';
     this.addClass('jp-DebuggerSidebar');
 
-    this.variables = new VariablesWidget();
-    this.callstack = new CallstackWidget();
-    this.breakPoints = new BreakPointsWidget();
+    this.variables = new Variables();
+    this.callstack = new Callstack();
+    this.breakPoints = new BreakPoints();
 
     this.addWidget(this.variables);
     this.addWidget(this.callstack);
     this.addWidget(this.breakPoints);
   }
 
-  readonly variables: VariablesWidget;
+  readonly variables: Variables;
 
-  readonly callstack: CallstackWidget;
+  readonly callstack: Callstack;
 
-  readonly breakPoints: BreakPointsWidget;
+  readonly breakPoints: BreakPoints;
 
   get model(): Debugger.Model | null {
     return this._model;

src/utils/index.ts

@@ -1 +0,0 @@
-export * from './useOutsideClick';

src/variables/utils/variableDescription.ts → src/variables/description/variableDescription.ts

@@ -3,9 +3,7 @@
 
 import { Panel, SplitPanel, Widget } from '@phosphor/widgets';
 
-import { IVariablesModel } from '../model';
-
-import { IVariable } from '../variable';
+import { Variables } from '../variables';
 
 import { VariableTableDescription } from './variableTableDescription';
 
@@ -14,10 +12,10 @@ export class VariableDescription extends SplitPanel {
   readonly table: Widget;
   readonly descriptionBox: Panel;
 
-  model: IVariablesModel;
+  model: Variables.IVariablesModel;
   currentVariable: any;
 
-  constructor(model: IVariablesModel) {
+  constructor(model: Variables.IVariablesModel) {
     super();
     this.orientation = 'vertical';
     this.model = model;
@@ -34,7 +32,7 @@ export class VariableDescription extends SplitPanel {
     this.descriptionBox.node.innerHTML = '<b> Select Variable </b>';
 
     this.model.currentChanged.connect(
-      (model: IVariablesModel, variable: IVariable) => {
+      (model: Variables.IVariablesModel, variable: Variables.IVariable) => {
         this.descriptionBox.node.innerHTML = this.renderDescription(
           this.model.current
         );
@@ -44,7 +42,7 @@ export class VariableDescription extends SplitPanel {
 
   // Still in progres: rendering description
 
-  protected renderDescription(variable: IVariable) {
+  protected renderDescription(variable: Variables.IVariable) {
     const descriptionElementDOM = `<b>name: ${variable.name}</b>
                                        <p>type: ${variable.type} </p>
                                        Description:

src/variables/utils/variableTableDescription.tsx → src/variables/description/variableTableDescription.tsx

@@ -9,9 +9,9 @@ import { Widget, Panel } from '@phosphor/widgets';
 
 import React, { useState } from 'react';
 
-import { IVariablesModel } from '../model';
+import { Variables } from '../variables';
 
-import { VariablesSearch } from './toggle';
+import { VariablesSearch } from './../toggle';
 
 import useTbody from './useTbody';
 
@@ -19,7 +19,7 @@ const ROW_CLASS = 'jp-DebuggerSidebarVariables-table-row';
 
 const HEAD_CLASS = 'jp-DebuggerSidebarVariables-table-head';
 
-const Table = ({ model }: { model: IVariablesModel }) => {
+const Table = ({ model }: { model: Variables.IVariablesModel }) => {
   const [variables, setVariables] = useState(model.variables);
   const [variable, TableBody] = useTbody(variables, model.current, ROW_CLASS);
 
@@ -49,7 +49,7 @@ const Table = ({ model }: { model: IVariablesModel }) => {
 };
 
 class TableVariableWidget extends ReactWidget {
-  state: IVariablesModel;
+  state: Variables.IVariablesModel;
 
   constructor(props: any) {
     super(props);
@@ -62,10 +62,10 @@ class TableVariableWidget extends ReactWidget {
 }
 
 export class VariableTableDescription extends Panel {
-  private _model: IVariablesModel;
+  private _model: Variables.IVariablesModel;
   private searchParams: Widget;
   private myWidget: Widget;
-  constructor(model: IVariablesModel) {
+  constructor(model: Variables.IVariablesModel) {
     super();
     this._model = model;
     this.searchParams = new VariablesSearch(this._model);

src/variables/index.ts

@@ -1,4 +1,4 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export * from './widget';
+export * from './variables';

src/variables/model.ts

@@ -1,89 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { Signal, ISignal } from '@phosphor/signaling';
-
-import { IVariable } from './variable';
-
-export interface IVariablesModel {
-  current: IVariable;
-  filter: string;
-  variables: IVariable[];
-  currentChanged: ISignal<Model, IVariable>;
-  variablesChanged: ISignal<Model, IVariable[]>;
-}
-
-export namespace IVariablesModel {
-  export function create(model: IVariable[]) {
-    return new Model(model);
-  }
-}
-
-export class Model implements IVariablesModel {
-  constructor(model: IVariable[]) {
-    this._state = model;
-  }
-
-  get currentChanged(): ISignal<this, IVariable> {
-    return this._currentChanged;
-  }
-
-  get current(): IVariable {
-    return this._current;
-  }
-  set current(variable: IVariable) {
-    if (this._current === variable) {
-      return;
-    }
-    this._current = variable;
-    this._currentChanged.emit(variable);
-  }
-
-  get filter() {
-    return this._filterState;
-  }
-  set filter(value) {
-    if (this._filterState === value) {
-      return;
-    }
-    this._filterState = value;
-    this._variablesChanged.emit(this._filterVariables());
-  }
-
-  get variables(): IVariable[] {
-    if (this._filterState) {
-      return this._filterVariables();
-    }
-    return this._state;
-  }
-  set variables(variables: IVariable[]) {
-    this._state = variables;
-  }
-
-  get variablesChanged(): ISignal<this, IVariable[]> {
-    return this._variablesChanged;
-  }
-
-  getCurrentVariables(): IVariable[] {
-    return this.variables;
-  }
-
-  fstFil(name: string): boolean {
-    return (
-      this._filterState
-        .split('')
-        .filter((ele: string, index: number) => name[index] === ele)
-        .join('') === this._filterState
-    );
-  }
-
-  private _filterVariables(): IVariable[] {
-    return this._state.filter(ele => this.fstFil(ele.name));
-  }
-
-  private _current: IVariable;
-  private _currentChanged = new Signal<this, IVariable>(this);
-  private _variablesChanged = new Signal<this, IVariable[]>(this);
-  private _filterState: string = '';
-  private _state: IVariable[];
-}

src/variables/utils/toggle/variableSearch.tsx → src/variables/toggle/variableSearch.tsx

@@ -3,12 +3,12 @@
 
 import { ReactWidget } from '@jupyterlab/apputils';
 
-import { Panel, Widget } from '@phosphor/widgets';
+import { Widget, Panel } from '@phosphor/widgets';
 
 import React, { useState, useRef } from 'react';
 
-import { IVariablesModel } from '../../model';
-import useOutsideClick from '../../../utils/useOutsideClick';
+import { Variables } from './../variables';
+import useOutsideClick from './useOutsideClick';
 
 const SEARCH_ITEM = 'jp-Search-item';
 
@@ -50,8 +50,8 @@ const SearchComponent = ({ model }: any) => {
 
 class VariableSearchInput extends ReactWidget {
   search: string;
-  model: IVariablesModel;
-  constructor(model: IVariablesModel) {
+  model: Variables.IVariablesModel;
+  constructor(model: Variables.IVariablesModel) {
     super();
     this.model = model;
     this.search = model.filter;

src/variables/variable.ts

@@ -1,29 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-export interface IVariable {
-  /**
-   * The name of this variable.
-   */
-  readonly name: string;
-  /**
-   * The value of this variable.
-   */
-  readonly value: string;
-  /**
-   * The type of this variable.
-   */
-  readonly type: string | undefined;
-  /**
-   * The description of the variable.
-   */
-  readonly description: string | undefined;
-  /**
-   * a data URI or null.
-   */
-  readonly dataUri?: string;
-  /**
-   * a data URI or null.
-   */
-  readonly sourceUri?: string;
-}

src/variables/variables.ts

@@ -0,0 +1,194 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { Panel } from '@phosphor/widgets';
+
+import { VariableDescription } from './description';
+
+import { Signal, ISignal } from '@phosphor/signaling';
+
+export class Variables extends Panel {
+  constructor() {
+    super();
+
+    this.model = Variables.IVariablesModel.create(MOCK_DATA_ROW.variables);
+
+    this.header = new Panel();
+    this.header.addClass('jp-DebuggerSidebarVariables-header');
+    this.addWidget(this.header);
+
+    this.label = new Panel();
+    this.label.node.textContent = 'Variables';
+    this.label.addClass('jp-DebuggerSidebarVariables-header-label');
+    this.header.addWidget(this.label);
+    this.variablesDescription = new VariableDescription(this.model);
+    this.variablesDescription.addClass('jp-DebuggerSidebarVariables-body');
+    this.addWidget(this.variablesDescription);
+  }
+
+  readonly body: Panel;
+
+  readonly header: Panel;
+
+  readonly label: Panel;
+
+  readonly model: Variables.IVariablesModel;
+
+  readonly searcher: Panel;
+
+  readonly variablesDescription: Panel;
+}
+
+export namespace Variables {
+  // will be change for DebugProtoclVariable
+  export interface IVariable {
+    /**
+     * The name of this variable.
+     */
+    readonly name: string;
+    /**
+     * The value of this variable.
+     */
+    readonly value: string;
+    /**
+     * The type of this variable.
+     */
+    readonly type: string | undefined;
+    /**
+     * The description of the variable.
+     */
+    readonly description: string | undefined;
+    /**
+     * a data URI or null.
+     */
+    readonly dataUri?: string;
+    /**
+     * a data URI or null.
+     */
+    readonly sourceUri?: string;
+  }
+
+  export interface IVariablesModel {
+    current: IVariable;
+    filter: string;
+    variables: IVariable[];
+    currentChanged: ISignal<Model, IVariable>;
+    variablesChanged: ISignal<Model, IVariable[]>;
+  }
+
+  export namespace IVariablesModel {
+    export function create(model: IVariable[]) {
+      return new Model(model);
+    }
+  }
+
+  export class Model implements IVariablesModel {
+    constructor(model: IVariable[]) {
+      this._state = model;
+    }
+
+    get currentChanged(): ISignal<this, IVariable> {
+      return this._currentChanged;
+    }
+
+    get current(): IVariable {
+      return this._current;
+    }
+    set current(variable: IVariable) {
+      if (this._current === variable) {
+        return;
+      }
+      this._current = variable;
+      this._currentChanged.emit(variable);
+    }
+
+    get filter() {
+      return this._filterState;
+    }
+    set filter(value) {
+      if (this._filterState === value) {
+        return;
+      }
+      this._filterState = value;
+      this._variablesChanged.emit(this._filterVariables());
+    }
+
+    get variables(): IVariable[] {
+      if (this._filterState) {
+        return this._filterVariables();
+      }
+      return this._state;
+    }
+    set variables(variables: IVariable[]) {
+      this._state = variables;
+    }
+
+    get variablesChanged(): ISignal<this, IVariable[]> {
+      return this._variablesChanged;
+    }
+
+    getCurrentVariables(): IVariable[] {
+      return this.variables;
+    }
+
+    fstFil(name: string): boolean {
+      return (
+        this._filterState
+          .split('')
+          .filter((ele: string, index: number) => name[index] === ele)
+          .join('') === this._filterState
+      );
+    }
+
+    private _filterVariables(): IVariable[] {
+      return this._state.filter(ele => this.fstFil(ele.name));
+    }
+
+    private _current: IVariable;
+    private _currentChanged = new Signal<this, IVariable>(this);
+    private _variablesChanged = new Signal<this, IVariable[]>(this);
+    private _filterState: string = '';
+    private _state: IVariable[];
+  }
+}
+
+const MOCK_DATA_ROW = {
+  variables: [
+    {
+      name: 'test 1',
+      value: 'function()',
+      type: 'function',
+      description: 'def test1(): return 0'
+    },
+    {
+      name: 'Classtest',
+      value: 'class',
+      type: 'class',
+      description: 'def test2(): return 0'
+    },
+    {
+      name: 'test 3',
+      value: 'function()',
+      type: 'function',
+      description: 'def test1(): return 0'
+    },
+    {
+      name: 'test 4',
+      value: 'function()',
+      type: 'function',
+      description: 'def test2(): return 0'
+    },
+    {
+      name: 'test 5',
+      value: 'function()',
+      type: 'function',
+      description: 'def test1(): return 0'
+    },
+    {
+      name: 'test 6',
+      value: 'function()',
+      type: 'function',
+      description: 'def test2(): return 0'
+    }
+  ]
+};

src/variables/widget.ts

@@ -1,82 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { Panel } from '@phosphor/widgets';
-
-import { IVariablesModel } from './model';
-
-import { VariableDescription } from './utils';
-
-const MOCK_DATA_ROW = {
-  variables: [
-    {
-      name: 'test 1',
-      value: 'function()',
-      type: 'function',
-      description: 'def test1(): return 0'
-    },
-    {
-      name: 'Classtest',
-      value: 'class',
-      type: 'class',
-      description: 'def test2(): return 0'
-    },
-    {
-      name: 'test 3',
-      value: 'function()',
-      type: 'function',
-      description: 'def test1(): return 0'
-    },
-    {
-      name: 'test 4',
-      value: 'function()',
-      type: 'function',
-      description: 'def test2(): return 0'
-    },
-    {
-      name: 'test 5',
-      value: 'function()',
-      type: 'function',
-      description: 'def test1(): return 0'
-    },
-    {
-      name: 'test 6',
-      value: 'function()',
-      type: 'function',
-      description: 'def test2(): return 0'
-    }
-  ]
-};
-
-export class VariablesWidget extends Panel {
-  constructor() {
-    super();
-
-    this.model = IVariablesModel.create(MOCK_DATA_ROW.variables);
-
-    this.header = new Panel();
-    this.header.addClass('jp-DebuggerSidebarVariables-header');
-    this.addWidget(this.header);
-
-    this.label = new Panel();
-    this.label.node.textContent = 'Variables';
-    this.label.addClass('jp-DebuggerSidebarVariables-header-label');
-    this.header.addWidget(this.label);
-
-    this.variables = new VariableDescription(this.model);
-    this.variables.addClass('jp-DebuggerSidebarVariables-body');
-    this.addWidget(this.variables);
-  }
-
-  readonly body: Panel;
-
-  readonly header: Panel;
-
-  readonly label: Panel;
-
-  readonly model: IVariablesModel;
-
-  readonly searcher: Panel;
-
-  readonly variables: Panel;
-}