Draft rework left panel to be a react component

Author: martinRenou

packages/base/src/mainview/mainView.tsx

@@ -1,3 +1,4 @@
+import { IStateDB } from '@jupyterlab/statedb';
 import { MapChange } from '@jupyter/ydoc';
 import {
   IAnnotation,
@@ -91,6 +92,7 @@ import CollaboratorPointers, { ClientPointer } from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
 import { MainViewModel } from './mainviewmodel';
+import { LeftPanelComponent } from '../panelview';
 
 type OlLayerTypes =
   | TileLayer
@@ -103,7 +105,7 @@ type OlLayerTypes =
   | ImageLayer<any>;
 interface IProps {
   viewModel: MainViewModel;
-  leftPanel?: Widget;
+  state?: IStateDB;
   rightPanel?: Widget;
 }
 
@@ -127,6 +129,8 @@ export class MainView extends React.Component<IProps, IStates> {
   constructor(props: IProps) {
     super(props);
 
+    this._state = props.state;
+
     // Enforce the map to take the full available width in the case of Jupyter Notebook viewer
     const el = document.getElementById('main-panel');
 
@@ -156,7 +160,6 @@ export class MainView extends React.Component<IProps, IStates> {
       resizeObserver.observe(el);
     }
 
-    this._leftPanel = props.leftPanel;
     this._rightPanel = props.rightPanel;
     this._mainViewModel = this.props.viewModel;
     this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
@@ -2202,7 +2205,22 @@ export class MainView extends React.Component<IProps, IStates> {
             scale={this.state.scale}
           />
         </div>
-        {this._leftPanel && (
+        {this._state &&
+        <Rnd
+            default={{
+              x: 400,
+              y: 0,
+              width: 200,
+              height: 600,
+            }}
+            bounds="window"
+            minWidth={100}
+            minHeight={100}
+          >
+            <LeftPanelComponent model={this._model} commands={this._commands} state={this._state}></LeftPanelComponent>
+          </Rnd>
+        }
+        {/* {this._leftPanel && (
           <Rnd
             default={{
               x: 0,
@@ -2216,7 +2234,7 @@ export class MainView extends React.Component<IProps, IStates> {
           >
             <Lumino>{this._leftPanel}</Lumino>
           </Rnd>
-        )}
+        )} */}
 
         {this._rightPanel && (
           <Rnd
@@ -2253,6 +2271,6 @@ export class MainView extends React.Component<IProps, IStates> {
   private _originalFeatures: IDict<Feature<Geometry>[]> = {};
   private _highlightLayer: VectorLayer<VectorSource>;
   private _updateCenter: CallableFunction;
-  private _leftPanel?: Widget;
+  private _state?: IStateDB;
   private _rightPanel?: Widget;
 }

packages/base/src/mainview/mainviewwidget.tsx

@@ -1,3 +1,4 @@
+import { IStateDB } from '@jupyterlab/statedb';
 import { ReactWidget } from '@jupyterlab/apputils';
 import { Widget } from '@lumino/widgets';
 import * as React from 'react';
@@ -10,28 +11,27 @@ export class JupyterGISMainViewPanel extends ReactWidget {
    * Construct a `JupyterGISPanel`.
    */
   constructor(
-    options: { mainViewModel: MainViewModel },
-    leftPanel?: Widget,
+    options: { mainViewModel: MainViewModel, state?: IStateDB },
     rightPanel?: Widget,
   ) {
     super();
     this._mainViewModel = options.mainViewModel;
+    this._state = options.state;
     this.addClass('jp-jupytergis-panel');
-    this._leftPanel = leftPanel;
     this._rightPanel = rightPanel;
   }
 
   render(): JSX.Element {
     return (
       <MainView
-        leftPanel={this._leftPanel}
+        state={this._state}
         rightPanel={this._rightPanel}
         viewModel={this._mainViewModel}
       />
     );
   }
 
+  private _state?: IStateDB;
   private _mainViewModel: MainViewModel;
-  private _leftPanel?: Widget;
   private _rightPanel?: Widget;
 }

packages/base/src/panelview/components/identify-panel/IdentifyPanel.tsx

@@ -38,13 +38,13 @@ interface IIdentifyComponentProps {
   model: IJupyterGISModel;
 }
 
-const IdentifyPanelComponent = ({ model: model }: IIdentifyComponentProps) => {
+const IdentifyPanelComponent = (options: IIdentifyComponentProps) => {
   const [features, setFeatures] = useState<IDict<any>>();
   const [visibleFeatures, setVisibleFeatures] = useState<IDict<any>>({
     0: true,
   });
   const [remoteUser, setRemoteUser] = useState<User.IIdentity | null>(null);
-  const jgisModel = model;
+  const jgisModel = options.model;
 
   const featuresRef = useRef(features);