debug clickoutside in scope menu, add overflow in table

src/variables/utils/toogle/variableSearch.tsx

@@ -61,23 +61,25 @@ const MenuReact = ({ config }: any) => {
   const [scope, setScope] = useState('local');
   const wrapperRef = useRef(null);
 
-  const callback = () => {
+  const onClickOutSide = () => {
     setToggle(false);
   };
 
-  useOutsideClick(wrapperRef, callback);
-
   const toogle = (e: React.MouseEvent) => {
     setToggle(!toggleState);
   };
+
+  useOutsideClick(wrapperRef, onClickOutSide);
+
   const changeScope = (newScope: string) => {
+    console.log(newScope);
     if (newScope === scope) return;
     setScope(newScope);
     setToggle(false);
   };
 
   const List = (
-    <ul ref={wrapperRef} className="jp-MenuComponent">
+    <ul className="jp-MenuComponent">
       <li onClick={e => changeScope('local')} className="jp-menu-item">
         local
       </li>
@@ -97,7 +99,7 @@ const MenuReact = ({ config }: any) => {
   );
 
   return (
-    <div>
+    <div ref={wrapperRef}>
       <span
         onClick={(e: React.MouseEvent) => {
           toogle(e);

src/variables/utils/useTbody.tsx

@@ -13,18 +13,22 @@ const useTbody = (items: Array<any>, defaultState: any, id: string) => {
   };
 
   const List = () => (
-    <tbody>
-      {items.map(item => (
-        <tr
-          key={item.name}
-          onClick={e => setState(item)}
-          className={id + (state === item ? ' selected' : '')}
-        >
-          <td style={style}> {item.name} </td>
-          <td style={style_2}> {item.value} </td>
-        </tr>
-      ))}
-    </tbody>
+    <div style={{ overflowY: 'auto' }}>
+      <table>
+        <tbody>
+          {items.map(item => (
+            <tr
+              key={item.name}
+              onClick={e => setState(item)}
+              className={id + (state === item ? ' selected' : '')}
+            >
+              <td style={style}> {item.name} </td>
+              <td style={style_2}> {item.value} </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 
   return [state, List, setState];

src/variables/utils/variableDescription.ts

@@ -2,11 +2,10 @@ import { Panel, SplitPanel, Widget } from '@phosphor/widgets';
 import { VariableTableDescription } from './variableTableDescription';
 import { IVariablesModel } from '../model';
 import { IVariable } from '../variable';
-import { VariablesSearch } from './toogle';
 
-export class VariableDescription extends Panel {
+export class VariableDescription extends SplitPanel {
   readonly searchParams: Widget;
-  readonly table: Panel;
+  readonly table: Widget;
   readonly descriptionBox: Panel;
 
   model: IVariablesModel;
@@ -14,18 +13,17 @@ export class VariableDescription extends Panel {
 
   constructor(model: IVariablesModel) {
     super();
+    this.orientation = 'vertical';
     this.model = model;
     this.currentVariable = this.model.variable;
 
-    this.searchParams = new VariablesSearch(this.model);
-    this.addWidget(this.searchParams);
-
     this.table = new VariableTableDescription(this.model);
     this.table.addClass('jp-DebuggerSidebarVariable-table');
     this.addWidget(this.table);
 
-    this.descriptionBox = new SplitPanel();
+    this.descriptionBox = new Panel();
     this.descriptionBox.addClass('jp-DebuggerSidebarVariable-description');
+
     this.addWidget(this.descriptionBox);
     this.descriptionBox.node.innerHTML = '<b> Select Variable </b>';
 

src/variables/utils/variableTableDescription.tsx

@@ -1,8 +1,9 @@
-import { SplitPanel, Widget } from '@phosphor/widgets';
+import { Widget, Panel } from '@phosphor/widgets';
 import { IVariablesModel } from '../model';
 import React, { useState } from 'react';
 import { ReactWidget } from '@jupyterlab/apputils';
 import useTbody from './useTbody';
+import { VariablesSearch } from './toogle';
 
 const ROW_CLASS = 'jp-DebuggerSidebarVariables-table-row';
 const HEAD_CLASS = 'jp-DebuggerSidebarVariables-table-head';
@@ -15,16 +16,18 @@ const TableHead = () => {
     width: '75%'
   };
   const element = (
-    <thead>
-      <tr>
-        <th style={styleElement_1} className={HEAD_CLASS}>
-          Name
-        </th>
-        <th style={styleElement_2} className={HEAD_CLASS}>
-          Value
-        </th>
-      </tr>
-    </thead>
+    <table>
+      <thead>
+        <tr>
+          <th style={styleElement_1} className={HEAD_CLASS}>
+            Name
+          </th>
+          <th style={styleElement_2} className={HEAD_CLASS}>
+            Value
+          </th>
+        </tr>
+      </thead>
+    </table>
   );
 
   return element;
@@ -43,10 +46,10 @@ const Table = ({ model }: any) => {
 
   model.variable = variable;
   return (
-    <table>
+    <div>
       <TableHead />
       <TableBody />
-    </table>
+    </div>
   );
 };
 
@@ -63,13 +66,48 @@ class TableVariableWidget extends ReactWidget {
   }
 }
 
-export class VariableTableDescription extends SplitPanel {
+export class VariableTableDescription extends Panel {
   private _model: IVariablesModel;
-
+  private searchParams: Widget;
+  private myWidget: Widget;
   constructor(model: IVariablesModel) {
     super();
     this._model = model;
-    const myWidget: Widget = new TableVariableWidget(this._model);
-    this.addWidget(myWidget);
+    this.searchParams = new VariablesSearch(this._model);
+    this.addWidget(this.searchParams);
+    this.myWidget = new TableVariableWidget(this._model);
+    this.addWidget(this.myWidget);
+  }
+
+  protected onResize(msg: Widget.ResizeMessage): void {
+    super.onResize(msg);
+    this.resizeBody(msg);
+  }
+
+  protected getBody() {
+    if (this.myWidget && this.myWidget.node && this.myWidget.node.childNodes) {
+      return (
+        (this.myWidget.node.children[0].children[1] as HTMLElement) || null
+      );
+    }
+  }
+
+  protected getHead() {
+    if (this.myWidget && this.myWidget.node && this.myWidget.node.childNodes) {
+      return (
+        (this.myWidget.node.children[0].children[0] as HTMLElement) || null
+      );
+    }
+  }
+
+  protected resizeBody(msg: Widget.ResizeMessage): void {
+    const head = this.getHead();
+    const body = this.getBody();
+    if (body && head) {
+      const totalHeight = msg.height;
+      const headHeight = head.offsetHeight;
+      const bodyHeight = totalHeight - headHeight - 20;
+      body.style.height = `${bodyHeight}px`;
+    }
   }
 }

src/variables/widget.ts

@@ -15,6 +15,30 @@ const MOCK_DATA_ROW = {
       value: 'function()',
       type: 'function',
       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'
     }
   ]
 };