refactor table,body variables

src/variables/body/index.ts

@@ -1,6 +1,59 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-export * from './variablesTable';
-export * from './variablesBody';
-export * from './useTbody';
+import { Widget, SplitPanel, Panel } from '@phosphor/widgets';
+
+import { Variables } from '../index';
+
+import { Table } from './table';
+
+import { Search } from './search';
+
+export class Body extends Panel {
+  constructor(model: Variables.IModel) {
+    super();
+    this.model = model;
+    this.addClass('jp-DebuggerVariables-body');
+
+    const searchParams = new Search(this.model);
+    const splitPanel = new SplitPanel();
+    const table = new Table(this.model);
+    const description = new Description(this.model);
+
+    splitPanel.orientation = 'vertical';
+    splitPanel.node.style.height = `100%`;
+    splitPanel.addWidget(table);
+    splitPanel.addWidget(description);
+
+    this.addWidget(searchParams);
+    this.addWidget(splitPanel);
+  }
+
+  model: Variables.IModel;
+}
+
+class Description extends Widget {
+  constructor(model: Variables.IModel) {
+    super();
+    this.addClass('jp-DebuggerVariables-description');
+    this.model = model;
+
+    this.model.currentChanged.connect(
+      (model: Variables.IModel, variable: Variables.IVariable) => {
+        this.node.innerHTML = this.renderDescription(this.model.current);
+      }
+    );
+  }
+
+  model: Variables.IModel;
+
+  // Still in progres: rendering description
+
+  protected renderDescription(variable: Variables.IVariable) {
+    const descriptionElementDOM = `<b>name: ${variable.name}</b>
+                                       <p>type: ${variable.type} </p>
+                                       Description:
+                                       <p>${variable.description}</p> `;
+    return descriptionElementDOM;
+  }
+}

src/variables/body/variablesSearch.tsx → src/variables/body/search.tsx

@@ -5,22 +5,20 @@ import { ReactWidget } from '@jupyterlab/apputils';
 
 import { Widget, PanelLayout } from '@phosphor/widgets';
 
-import React, { useState, useRef } from 'react';
-
-import useOutsideClick from './useOutsideClick';
+import React, { useState, useRef, useEffect } from 'react';
 
 import { Variables } from '../index';
 
-export class VariablesSearch extends Widget {
+export class Search extends Widget {
   constructor(model: any) {
     super();
-    this.addClass('jp-DebuggerVariables-Search');
+    this.addClass('jp-DebuggerVariables-search');
 
     const layout = new PanelLayout();
     this.layout = layout;
     this.node.style.overflow = 'visible';
-    this.scope = new VariableScopeSearch();
-    this.search = new VariableSearchInput(model);
+    this.scope = new ScopeSearch();
+    this.search = new SearchInput(model);
 
     layout.addWidget(this.scope);
     layout.addWidget(this.search);
@@ -44,7 +42,7 @@ const SearchComponent = ({ model }: any) => {
   );
 };
 
-class VariableSearchInput extends ReactWidget {
+class SearchInput extends ReactWidget {
   search: string;
   model: Variables.IModel;
   constructor(model: Variables.IModel) {
@@ -52,7 +50,7 @@ class VariableSearchInput extends ReactWidget {
     this.model = model;
     this.search = model.filter;
     this.node.style;
-    this.addClass('jp-SearchInput');
+    this.addClass('jp-DebuggerVariables-input');
   }
 
   render() {
@@ -60,7 +58,36 @@ class VariableSearchInput extends ReactWidget {
   }
 }
 
-const VariablesMenu = ({ config }: any) => {
+class ScopeSearch extends ReactWidget {
+  constructor() {
+    super();
+    this.node.style.overflow = 'visible';
+    this.node.style.width = '100px';
+    this.addClass('jp-DebuggerVariables-scope');
+  }
+
+  render() {
+    return <ScopeMenuComponent />;
+  }
+}
+
+const useOutsideClick = (ref: any, callback: any) => {
+  const handleClickOutside = (e: Event) => {
+    if (ref.current && !ref.current.contains(e.target)) {
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      //unbind
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  });
+};
+
+const ScopeMenuComponent = ({ config }: any) => {
   const [toggleState, setToggle] = useState(false);
   const [scope, setScope] = useState('local');
   const wrapperRef = useRef(null);
@@ -84,22 +111,10 @@ const VariablesMenu = ({ config }: any) => {
   };
 
   const List = (
-    <ul className="jp-MenuComponent">
-      <li onClick={e => changeScope('local')} className="jp-menu-item">
-        local
-      </li>
-      <li
-        className="jp-MenuComponent-item"
-        onClick={e => changeScope('global')}
-      >
-        global
-      </li>
-      <li
-        className="jp-MenuComponent-item"
-        onClick={e => changeScope('built-in')}
-      >
-        built-in
-      </li>
+    <ul>
+      <li onClick={e => changeScope('local')}>local</li>
+      <li onClick={e => changeScope('global')}>global</li>
+      <li onClick={e => changeScope('built-in')}>built-in</li>
     </ul>
   );
 
@@ -111,16 +126,3 @@ const VariablesMenu = ({ config }: any) => {
     </div>
   );
 };
-
-class VariableScopeSearch extends ReactWidget {
-  constructor() {
-    super();
-    this.node.style.overflow = 'visible';
-    this.node.style.width = '100px';
-    this.addClass('jp-SearchScope');
-  }
-
-  render() {
-    return <VariablesMenu />;
-  }
-}

src/variables/body/variablesTable.tsx → src/variables/body/table.tsx

@@ -11,9 +11,7 @@ import React, { useState } from 'react';
 
 import { Variables } from '../index';
 
-import useTbody from './useTbody';
-
-export class VariablesTable extends ReactWidget {
+export class Table extends ReactWidget {
   constructor(model: Variables.IModel) {
     super();
     this.model = model;
@@ -84,3 +82,39 @@ const TableComponent = ({ model }: { model: Variables.IModel }) => {
     </div>
   );
 };
+
+const useTbody = (items: Array<any>, defaultState: any, id: string = '') => {
+  const [state, setState] = useState(defaultState);
+
+  const setClassIcon = (typeOf: string) => {
+    return typeOf === 'class' ? 'jp-ClassIcon' : 'jp-VariableIcon';
+  };
+
+  const List = () => (
+    <div style={{ overflow: 'auto' }}>
+      <table>
+        <tbody>
+          {items.map(item => (
+            <tr
+              key={item.name}
+              onClick={e => setState(item)}
+              className={id + (state === item ? ' selected' : '')}
+            >
+              <td style={{ paddingLeft: `${12}px`, width: `${25}%` }}>
+                <span
+                  className={`jp-Icon jp-Icon-16 ${setClassIcon(item.value)}`}
+                ></span>
+                {item.name}
+              </td>
+              <td style={{ paddingLeft: `${12}px`, width: `${75}%` }}>
+                {item.value}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  return [state, List, setState];
+};

src/variables/body/useOutsideClick.tsx

@@ -1,19 +0,0 @@
-import { useEffect } from 'react';
-
-const useOutsideClick = (ref: any, callback: any) => {
-  const handleClickOutside = (e: Event) => {
-    if (ref.current && !ref.current.contains(e.target)) {
-      callback();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      //unbind
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  });
-};
-
-export default useOutsideClick;

src/variables/body/useTbody.tsx

@@ -1,42 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import React, { useState } from 'react';
-
-const useTbody = (items: Array<any>, defaultState: any, id: string = '') => {
-  const [state, setState] = useState(defaultState);
-
-  const setClassIcon = (typeOf: string) => {
-    return typeOf === 'class' ? 'jp-ClassIcon' : 'jp-VariableIcon';
-  };
-
-  const List = () => (
-    <div style={{ overflow: 'auto' }}>
-      <table>
-        <tbody>
-          {items.map(item => (
-            <tr
-              key={item.name}
-              onClick={e => setState(item)}
-              className={id + (state === item ? ' selected' : '')}
-            >
-              <td style={{ paddingLeft: `${12}px`, width: `${25}%` }}>
-                <span
-                  className={`jp-Icon jp-Icon-16 ${setClassIcon(item.value)}`}
-                ></span>
-                {item.name}
-              </td>
-              <td style={{ paddingLeft: `${12}px`, width: `${75}%` }}>
-                {item.value}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-
-  return [state, List, setState];
-};
-
-export default useTbody;

src/variables/body/variablesBody.ts

@@ -1,59 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { Widget, SplitPanel, Panel } from '@phosphor/widgets';
-
-import { Variables } from '../index';
-
-import { VariablesTable } from './variablesTable';
-
-import { VariablesSearch } from './variablesSearch';
-
-export class VariablesBody extends Panel {
-  constructor(model: Variables.IModel) {
-    super();
-    this.model = model;
-    this.addClass('jp-DebuggerVariables-body');
-
-    const searchParams = new VariablesSearch(this.model);
-    const splitPanel = new SplitPanel();
-    const table = new VariablesTable(this.model);
-    const description = new VariablesDescription(this.model);
-
-    splitPanel.orientation = 'vertical';
-    splitPanel.node.style.height = `100%`;
-    splitPanel.addWidget(table);
-    splitPanel.addWidget(description);
-
-    this.addWidget(searchParams);
-    this.addWidget(splitPanel);
-  }
-
-  model: Variables.IModel;
-}
-
-class VariablesDescription extends Widget {
-  constructor(model: Variables.IModel) {
-    super();
-    this.addClass('jp-DebuggerVariables-description');
-    this.model = model;
-
-    this.model.currentChanged.connect(
-      (model: Variables.IModel, variable: Variables.IVariable) => {
-        this.node.innerHTML = this.renderDescription(this.model.current);
-      }
-    );
-  }
-
-  model: Variables.IModel;
-
-  // Still in progres: rendering description
-
-  protected renderDescription(variable: Variables.IVariable) {
-    const descriptionElementDOM = `<b>name: ${variable.name}</b>
-                                       <p>type: ${variable.type} </p>
-                                       Description:
-                                       <p>${variable.description}</p> `;
-    return descriptionElementDOM;
-  }
-}

src/variables/index.ts

@@ -3,7 +3,7 @@
 
 import { Panel, Widget, PanelLayout } from '@phosphor/widgets';
 
-import { VariablesBody } from './body';
+import { Body } from './body';
 
 import { Signal, ISignal } from '@phosphor/signaling';
 
@@ -18,7 +18,7 @@ export class Variables extends Panel {
     this.title.label = 'Variables';
 
     const header = new VariablesHeader(this.title.label);
-    this.body = new VariablesBody(this.model);
+    this.body = new Body(this.model);
 
     this.addWidget(header);
     this.addWidget(this.body);
@@ -99,7 +99,10 @@ export namespace Variables {
 
     private _filterVariables(): IVariable[] {
       return this._state.filter(
-        ele => ele.name.indexOf(this._filterState) !== -1
+        ele =>
+          ele.name
+            .toLocaleLowerCase()
+            .indexOf(this._filterState.toLocaleLowerCase()) !== -1
       );
     }
 

style/variables.css

@@ -70,7 +70,7 @@
   margin-bottom: 1rem;
 }
 
-.jp-DebuggerVariables-Search {
+.jp-DebuggerVariables-search {
   color: var(--jp-ui-font-color1);
   flex: 0 0 auto;
   display: flex;
@@ -79,7 +79,7 @@
   align-items: center;
 }
 
-.jp-DebuggerVariables-Search > div {
+.jp-DebuggerVariables-search > div {
   padding-left: 8px;
   padding-right: 8px;
   vertical-align: middle;
@@ -87,15 +87,15 @@
   line-height: 23px;
 }
 
-.jp-DebuggerVariables-Search > .jp-SearchInput {
+.jp-DebuggerVariables-search > .jp-DebuggerVariables-input {
   flex: 1 0 auto;
 }
 
-.jp-DebuggerVariables-Search > .jp-SearchScope {
+.jp-DebuggerVariables-search > .jp-DebuggerVariables-scope {
   flex: 0 0 auto;
 }
 
-.jp-DebuggerVariables-Search input {
+.jp-DebuggerVariables-search input {
   min-height: 22px;
   vertical-align: top;
   width: 100%;
@@ -103,7 +103,23 @@
   border: none;
 }
 
-.jp-DebuggerVariables-Search .jp-SearchScope span.label {
+.jp-DebuggerVariables-search .jp-DebuggerVariables-scope span.label {
   padding-left: 10px;
   padding-right: 5px;
 }
+
+.jp-DebuggerVariables ul {
+  position: absolute;
+  list-style: none;
+  left: 0;
+  right: 0;
+  margin: 0;
+  top: 25px;
+  z-index: 10000;
+  padding: 10px 10px;
+  background: var(--jp-layout-color1);
+  color: var(--jp-ui-font-color1);
+  border: var(--jp-border-width) solid var(--jp-border-color1);
+  font-size: var(--jp-ui-font-size1);
+  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+}