add searchInput and conect with model of Variables

src/variables/model.ts

@@ -2,9 +2,10 @@ import { IVariable } from './variable';
 import { Signal, ISignal } from '@phosphor/signaling';
 
 export interface IVariablesModel {
+  filter: string;
   variables: IVariable[];
   changeCurrentVariable: ISignal<Model, IVariable>;
-  getCurrentDescription(): string;
+  changeVariables: ISignal<Model, IVariable[]>;
   variable: IVariable;
 }
 
@@ -16,14 +17,21 @@ export namespace IVariablesModel {
 
 export class Model implements IVariablesModel {
   constructor(model: IVariable[]) {
-    this.variables = model;
+    this._state = model;
   }
 
   get changeCurrentVariable(): ISignal<this, IVariable> {
     return this._changeCurrentVariable;
   }
 
+  get changeVariables(): ISignal<this, IVariable[]> {
+    return this._changeVariables;
+  }
+
   get variables(): IVariable[] {
+    if (this._filterState) {
+      return this._filterVariabiles();
+    }
     return this._state;
   }
 
@@ -43,15 +51,38 @@ export class Model implements IVariablesModel {
     this._changeCurrentVariable.emit(variable);
   }
 
+  get filter() {
+    return this._filterState;
+  }
+
+  set filter(value) {
+    if (this._filterState === value) {
+      return;
+    }
+    this._filterState = value;
+    this._changeVariables.emit(this._filterVariabiles());
+  }
+
   getCurrentVariables(): IVariable[] {
     return this.variables;
   }
 
-  getCurrentDescription(): IVariable['description'] {
-    return this.variable ? this.variable.description : 'none';
+  fstFil = function(item_name: string) {
+    return (
+      this._filterState
+        .split('')
+        .filter((ele: string, index: number) => item_name[index] === ele)
+        .join('') === this._filterState
+    );
+  };
+
+  private _filterVariabiles(): IVariable[] {
+    return this._state.filter(ele => this.fstFil(ele.name));
   }
 
   private _currentVariabile: IVariable;
   private _state: IVariable[];
+  private _filterState: string = '';
   private _changeCurrentVariable = new Signal<this, IVariable>(this);
+  private _changeVariables = new Signal<this, IVariable[]>(this);
 }

src/variables/utils/toogle/index.ts

@@ -1 +1,2 @@
 export * from './variableSearch';
+export * from './useSearch';

src/variables/utils/toogle/useSearch.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+
+const useSearch = (defaultState: string) => {
+  const [state, setState] = useState(defaultState);
+
+  const List = () => (
+    <div>
+      <input
+        placeholder="Search..."
+        className="jp-DebuggerSidebarVariable-Search-input"
+        value={state}
+        onChange={e => {
+          setState(e.target.value);
+        }}
+      />
+    </div>
+  );
+
+  return [List];
+};
+
+export default useSearch;

src/variables/utils/toogle/variableSearch.tsx

@@ -1,6 +1,7 @@
 import { Panel, Widget } from '@phosphor/widgets';
-import * as React from 'react';
+import React, { useState } from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
+import { IVariablesModel } from '../../model';
 
 const SEARCH_ITEM = 'jp-Search-item';
 
@@ -8,11 +9,11 @@ export class VariablesSearch extends Panel {
   scope: Widget;
   search: Widget;
 
-  constructor() {
+  constructor(model: any) {
     super();
     this.addClass('jp-DebuggerSidebarVariable-Search');
     this.scope = new VariableScopeSearch();
-    this.search = new VariableSearchInput();
+    this.search = new VariableSearchInput(model);
     this.scope.addClass(SEARCH_ITEM);
     this.search.addClass(SEARCH_ITEM);
     this.addWidget(this.scope);
@@ -20,20 +21,34 @@ export class VariablesSearch extends Panel {
   }
 }
 
+const SearchComponent = ({ model }: any) => {
+  const [state, setState] = useState('');
+  model.filter = state;
+  return (
+    <div>
+      <input
+        placeholder="Search..."
+        className="jp-DebuggerSidebarVariable-Search-input"
+        value={state}
+        onChange={e => {
+          setState(e.target.value);
+        }}
+      />
+    </div>
+  );
+};
+
 class VariableSearchInput extends ReactWidget {
-  constructor() {
+  search: string;
+  model: IVariablesModel;
+  constructor(model: IVariablesModel) {
     super();
+    this.model = model;
+    this.search = model.filter;
   }
 
   render() {
-    return (
-      <div>
-        <input
-          placeholder="Search..."
-          className="jp-DebuggerSidebarVariable-Search-input"
-        />
-      </div>
-    );
+    return <SearchComponent model={this.model} />;
   }
 }
 
@@ -41,13 +56,39 @@ class VariableScopeSearch extends ReactWidget {
   constructor() {
     super();
   }
+  open: boolean = false;
+  menu: ReactWidget;
+  widget: Widget;
+
+  showMenu = function() {
+    this.open = !this.open;
+    if (this.open) {
+    } else {
+    }
+  };
 
   render() {
     return (
-      <div>
-        <span className="jp-DebuggerSidebarVariable-Scope-label">local</span>{' '}
+      <div onClick={() => this.showMenu()}>
+        <span className="jp-DebuggerSidebarVariable-Scope-label">local</span>
         <span className="fa fa-caret-down"></span>
       </div>
     );
   }
 }
+
+// namespace Internal {
+//   export function createOptionsNode(): HTMLElement {
+//     const optionsIcon = document.createElement('span');
+//     optionsIcon.className = 'fa fa-caret-down';
+//     const optionLabel = document.createElement('span');
+
+//     const options = document.createElement('div');
+//     options.title = 'Options';
+//     optionLabel.innerText = 'local';
+//     optionLabel.className = 'jp-DebuggerSidebarVariable-Scope-label';
+//     options.appendChild(optionLabel);
+//     options.appendChild(optionsIcon);
+//     return options;
+//   }
+// }

src/variables/utils/variableDescription.ts

@@ -17,7 +17,7 @@ export class VariableDescription extends Panel {
     this.model = model;
     this.currentVariable = this.model.variable;
 
-    this.searchParams = new VariablesSearch();
+    this.searchParams = new VariablesSearch(this.model);
     this.addWidget(this.searchParams);
 
     this.table = new VariableTableDescription(this.model);

src/variables/utils/variableTableDescription.tsx

@@ -1,6 +1,6 @@
 import { SplitPanel, Widget } from '@phosphor/widgets';
 import { IVariablesModel } from '../model';
-import * as React from 'react';
+import React, { useState } from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
 import useTbody from './useTbody';
 
@@ -31,8 +31,16 @@ const TableHead = () => {
 };
 
 const Table = ({ model }: any) => {
-  const variables = model.variables;
+  const [variables, setVariables] = useState(model.variables);
   const [variable, TableBody] = useTbody(variables, model.variable, ROW_CLASS);
+
+  model.changeVariables.connect((model: any, new_variables: any) => {
+    if (new_variables === variables) {
+      return;
+    }
+    setVariables(new_variables);
+  });
+
   model.variable = variable;
   return (
     <table>

style/index.css

@@ -120,6 +120,11 @@
   border: none;
 }
 
+.jp-DebuggerSidebarVariable-Scope-label {
+  padding-left: 10px;
+  padding-right: 5px;
+}
+
 .fa {
   display: inline-block;
   font: normal normal normal 14px/1 FontAwesome;