add model of variable, and observer method of variable

src/variables/model.ts

@@ -0,0 +1,66 @@
+import { IVariable } from './variable';
+import { Signal, ISignal } from '@phosphor/signaling';
+
+
+export interface IVariablesModel {
+    changeCurrentVariable: any;
+    getCurrentDescription(): string;
+    variable: IVariable;
+
+}
+
+
+
+export namespace IVariablesModel {
+    export function create(model: IVariable[]) {
+        return new Model(model);
+    }
+}
+
+export class Model implements IVariablesModel {
+   
+
+    constructor(model: IVariable[]) {
+        this.variables = model;
+    }
+
+    get changeCurrentVariable(): ISignal<this, IVariable>{
+        return this._chenageCurrentVariable;
+    }
+
+    get variables(): IVariable[] {
+       return this._state;
+    }
+
+    set variables(variables: IVariable[]) {
+        this._state = variables;
+    }
+
+    get variable(): IVariable {
+        return this._currentVariabile;
+    }
+
+    set variable(variable: IVariable) {
+        if(this._currentVariabile === variable) {
+            return
+        }
+        this._currentVariabile = variable;
+        this._chenageCurrentVariable.emit(variable);
+    }
+
+    getCurrentVariables(): IVariable[] {
+        return this.variables;
+    }
+
+    getCurrentDescription(): IVariable["description"] {
+        return (this.variable)? this.variable.description:'none';
+    }
+
+  
+
+    private _currentVariabile: IVariable;
+    private _state: IVariable[];
+    private _chenageCurrentVariable = new Signal<this , IVariable>(this);
+
+
+}

src/variables/utils/variableDescription.ts

@@ -1,20 +1,46 @@
 import { Panel } from "@phosphor/widgets";
 import { VariableTableDescription } from './variableTableDescription';
+import { IVariablesModel } from '../model';
+import { IVariable } from "../variable";
+
 
 
 export class VariableDescription extends Panel {
     
     readonly table: Panel;
     readonly descriptionBox: Panel; 
+    model: IVariablesModel;
+    currentVariable: any;
 
-    constructor(){
+    constructor(model: IVariablesModel){
         super();
-        this.table = new VariableTableDescription();
+        this.model = model;
+        this.currentVariable = this.model.variable;
+        this.table = new VariableTableDescription(this.model);
         this.table.addClass('debugger-variable__table');
         this.addWidget(this.table);
 
         this.descriptionBox = new Panel();
         this.descriptionBox.addClass('debugger-variable__description');
         this.addWidget(this.descriptionBox);
+        this.descriptionBox.node.innerHTML = '<b> Select Variable </b>';
+        
+        //observable change current variable
+        this.model.changeCurrentVariable.connect( (model: IVariablesModel , variable: IVariable) => {
+            console.log(variable);
+            this.descriptionBox.node.innerHTML = this.renderDescription(this.model.variable);
+        }); 
+    }
+
+
+
+    // consider 
+
+    protected renderDescription(variable : IVariable) {
+        const descriptionElementDOM = `<b>name: ${variable.name}</b>
+                                       <p>type: ${variable.type} </p>
+                                       Description:
+                                       <p>${variable.description}</p> `
+        return descriptionElementDOM;
     }
 }

src/variables/utils/variableTableDescription.ts

@@ -1,29 +1,19 @@
 import { h, VirtualDOM, VirtualElement } from "@phosphor/virtualdom";
 import { SplitPanel } from '@phosphor/widgets';
 
-const MOCK_DATA_ROW = {
-    variables: [
-        {
-            name: 'test 1',
-            value: 'function()',
-            desription:'def test1(): return 0'
-        },
-        {
-            name: 'test 2',
-            value: 'function()',
-            desription:'def test2(): return 0'
-        }
-    ]
-}
+
+
+const ROW_CLASS = 'debugger-variables_table-row';
+const SELECTED_CLASS = '-selected';
 
 
 export class VariableTableDescription extends SplitPanel {
 
-    private _modelRow: any;
+    private _model: any;
 
-    constructor() {
+    constructor(model: any) {
         super();
-        this._modelRow = MOCK_DATA_ROW;
+        this._model = model;
         this.renderHead();
         this.renderBody();
     }
@@ -53,13 +43,14 @@ export class VariableTableDescription extends SplitPanel {
         const body = h.div(
             h.table(
                 this.renderVariableNodes({
-                    variables: this._modelRow.variables,
+                    variables: this._model.variables,
                     nodes: [],
                     indent: 0
                 })
             )
         );
-        this.node.appendChild(VirtualDOM.realize(body));
+        // this.node.appendChild(VirtualDOM.realize(body));
+        VirtualDOM.render(body,this.node);
     }
 
 
@@ -79,8 +70,8 @@ export class VariableTableDescription extends SplitPanel {
 
     protected renderRow(variable: any, indent: number) {
         return h.tr({
-            className: '',
-            onmousedown: () => { },
+            className: this.createVariableNodeClass(variable)  ,
+            onmousedown: (scope) => this.setCurrentVariable(variable, scope),
             ondblclick: () => { }
         },
             h.td({
@@ -104,4 +95,21 @@ export class VariableTableDescription extends SplitPanel {
     }
 
 
+    protected createVariableNodeClass(variable: any): string {
+        return (variable === this._model.variable)? `${ROW_CLASS}${SELECTED_CLASS}`:ROW_CLASS;
+    }
+
+    protected clearClassName(rowNodes: Array<any>) {
+        rowNodes.forEach( ele => {
+            ele.className = `${ROW_CLASS}`;
+        });
+    };
+
+    protected setCurrentVariable(variable: any, scope:any) {
+        this._model.variable = variable;
+        this.clearClassName(scope.path[2].childNodes);
+        scope.path[1].className = `${ROW_CLASS}${SELECTED_CLASS}`;
+    }
+
+
 }

src/variables/variable.ts

@@ -0,0 +1,29 @@
+
+
+
+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/widget.ts

@@ -1,8 +1,30 @@
 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: 'test 2',
+            value: 'function()',
+            type:'function',
+            description:'def test2(): return 0'
+        }
+    ]
+}
+
+
 export class VariablesWidget extends Panel {
     
+    readonly model: IVariablesModel;
+
     readonly header: Panel;
     readonly label: Panel;
     readonly body: Panel;
@@ -16,6 +38,10 @@ export class VariablesWidget extends Panel {
 
     constructor(){
         super();
+
+        this.model = IVariablesModel.create(MOCK_DATA_ROW.variables);
+
+
         // header
         this.header = new Panel();
         this.header.addClass(this.model_header.class);
@@ -27,7 +53,7 @@ export class VariablesWidget extends Panel {
         this.header.addWidget(this.label);
 
         //body
-        this.variableDescription = new VariableDescription();
+        this.variableDescription = new VariableDescription(this.model);
         this.variableDescription.addClass('debugger-variables__body')
         this.addWidget(this.variableDescription);
 

style/index.css

@@ -22,12 +22,15 @@
 
 
 
+.jp-DebuggerSidebar  div:not(:first-child) .debugger-variables__header{
+  border-bottom: solid var(--jp-border-width) var(--jp-border-color1);
+  border-top: solid var(--jp-border-width) var(--jp-border-color1);
+}
+
 .debugger-variables__header {
   display: flex;
   flex-direction: row;
   align-items: center;
-  border-bottom: solid var(--jp-border-width) var(--jp-border-color1);
-  border-top: solid var(--jp-border-width) var(--jp-border-color1);
   background-color: var(--jp-layout-color2);
   height: 24px;
 }
@@ -45,11 +48,15 @@
 .debugger-variables__body {
   border-bottom: solid var(--jp-border-width) var(--jp-border-color2);
   min-height: 24px;
+  height: 99%;
+  display: flex;
+  flex-direction: column;
 }
 
 
 .debugger-variable__table {
   min-height: 50px;
+  flex-basis: 30%;
 }
 
 .debugger-variable__table table {
@@ -67,10 +74,15 @@
   text-align: left;
 }
 
-.debugger-variables_table-head:hover {
+.debugger-variables_table-head:hover , .debugger-variables_table-row:hover {
   background: var(--jp-layout-color2);
 }
 
+.debugger-variables_table-row-selected {
+  color: white;
+  background: var(--jp-brand-color1);
+}
+
 .debugger-variables_table-head + .debugger-variables_table-head {
   border-left: var(--jp-border-width) solid var(--jp-border-color2);
 }
@@ -80,5 +92,10 @@
 .debugger-variable__description {
   border-top: var(--jp-border-width) solid var(--jp-border-color2);
   min-height: 25px;
+  padding: 10px;
 }
 
+.debugger-variable__description p {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}