refactor objectInspector, add information about typing react-inspector

src/service.ts

@@ -67,7 +67,6 @@ export class DebugService {
         scopes: values
       });
       if (index === 0) {
-        console.log({ values });
         this._model.sidebar.variables.model.scopes = values;
       }
     });

src/variables/body/index.tsx

@@ -45,13 +45,13 @@ const defaultNodeRenderer = ({
   return depth === 0 ? (
     <span>
       <span>{label}</span>
-      <span>:</span>
+      <span>: </span>
       <span>{data.length}</span>
     </span>
   ) : depth === 1 ? (
     <span>
       <span style={{ color: 'rgb(136, 19, 145)' }}>{label}</span>
-      <span>:</span>
+      <span>: </span>
       <span>{value}</span>
     </span>
   ) : (
@@ -60,7 +60,7 @@ const defaultNodeRenderer = ({
 };
 
 const VariableComponent = ({ model }: { model: Variables.IModel }) => {
-  const [data, setData] = useState(model.scopes || []);
+  const [data, setData] = useState(model.scopes);
 
   useEffect(() => {
     const updateScopes = (_: Variables.IModel, update: Variables.IScope[]) => {
@@ -86,6 +86,7 @@ const VariableComponent = ({ model }: { model: Variables.IModel }) => {
           name={scopes.name}
           nodeRenderer={defaultNodeRenderer}
           theme={theme}
+          expandLevel={1}
         />
       ))}
     </>
@@ -99,7 +100,7 @@ const theme = {
   BASE_FONT_SIZE: 'var(--jp-code-font-size)',
   BASE_LINE_HEIGHT: 'var(--jp-code-line-height)',
 
-  BASE_BACKGROUND_COLOR: 'var(--jp-layout-color0)',
+  BASE_BACKGROUND_COLOR: 'var(--jp-layout-color1)',
   BASE_COLOR: 'var(--jp-content-font-color1)',
 
   OBJECT_NAME_COLOR: 'var(--jp-mirror-editor-attribute-color)',

src/variables/body/search.tsx

@@ -1,58 +0,0 @@
-// Copyright (c) Jupyter Development Team.
-// Distributed under the terms of the Modified BSD License.
-
-import { ReactWidget } from '@jupyterlab/apputils';
-
-import { Widget, PanelLayout } from '@phosphor/widgets';
-
-import React, { useState } from 'react';
-
-import { Variables } from '../index';
-
-export class Search extends Widget {
-  constructor(model: Variables.IModel) {
-    super();
-    this.addClass('jp-DebuggerVariables-search');
-
-    const layout = new PanelLayout();
-    this.layout = layout;
-    this.search = new SearchInput(model);
-
-    // layout.addWidget(this.search);
-  }
-
-  readonly search: Widget;
-}
-
-const SearchComponent = ({ model }: any) => {
-  const [state, setState] = useState('');
-  model.filter = state;
-  return (
-    <div>
-      <span className="fa fa-search"></span>
-      <input
-        placeholder="Search..."
-        value={state}
-        onChange={e => {
-          setState(e.target.value);
-        }}
-      />
-    </div>
-  );
-};
-
-class SearchInput extends ReactWidget {
-  search: string;
-  model: Variables.IModel;
-  constructor(model: Variables.IModel) {
-    super();
-    this.model = model;
-    this.search = model.filter;
-    this.node.style;
-    this.addClass('jp-DebuggerVariables-input');
-  }
-
-  render() {
-    return <SearchComponent model={this.model} />;
-  }
-}

src/variables/index.ts

@@ -96,7 +96,7 @@ export namespace Variables {
     }
 
     get scopes(): IScope[] {
-      return this._state;
+      return this._state || [];
     }
 
     set scopes(scopes: IScope[]) {

typings/react-inspector/react-inspector.d.ts

@@ -2,6 +2,7 @@
 // Project: https://github.com/xyc/react-inspector
 // Definitions by: vidartf <https://github.com/vidartf>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// From  https://github.com/vidartf/jupyterlab-kernelspy
 
 declare module 'react-inspector' {
   import * as React from 'react';