Made panels use tab , fixe them to the edge of the map.

Author: Gauss-Taylor-Euler

packages/base/src/mainview/mainView.tsx

@@ -1,14 +1,15 @@
-import { IStateDB } from '@jupyterlab/statedb';
 import { MapChange } from '@jupyter/ydoc';
 import {
   IAnnotation,
+  IAnnotationModel,
   IDict,
   IGeoTiffSource,
   IHeatmapLayer,
   IHillshadeLayer,
   IImageLayer,
   IImageSource,
   IJGISFilterItem,
+  IJGISFormSchemaRegistry,
   IJGISLayer,
   IJGISLayerDocChange,
   IJGISLayerTreeDocChange,
@@ -34,9 +35,10 @@ import {
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
 import { User } from '@jupyterlab/services';
+import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import { JSONValue, UUID } from '@lumino/coreutils';
-import { ContextMenu, Widget } from '@lumino/widgets';
+import { ContextMenu } from '@lumino/widgets';
 import { Collection, MapBrowserEvent, Map as OlMap, View, getUid } from 'ol';
 import Feature, { FeatureLike } from 'ol/Feature';
 import { FullScreen, ScaleLine } from 'ol/control';
@@ -80,19 +82,17 @@ import StacLayer from 'ol-stac';
 import proj4 from 'proj4';
 import proj4list from 'proj4-list';
 import * as React from 'react';
-import { Rnd } from 'react-rnd';
 
 import AnnotationFloater from '@/src/annotations/components/AnnotationFloater';
 import { CommandIDs } from '@/src/constants';
 import { LoadingOverlay } from '@/src/shared/components/loading';
 import StatusBar from '@/src/statusbar/StatusBar';
-import { isLightTheme, loadFile, throttle } from '@/src/tools';
-import Lumino from '../Lumino';
+import { debounce, isLightTheme, loadFile, throttle } from '@/src/tools';
 import CollaboratorPointers, { ClientPointer } from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
 import { MainViewModel } from './mainviewmodel';
-import { LeftPanelComponent } from '../panelview';
+import { LeftPanelComponent, RightPanelComponent } from '../panelview';
 
 type OlLayerTypes =
   | TileLayer
@@ -106,7 +106,8 @@ type OlLayerTypes =
 interface IProps {
   viewModel: MainViewModel;
   state?: IStateDB;
-  rightPanel?: Widget;
+  formSchemaRegistry?: IJGISFormSchemaRegistry;
+  annotationModel?: IAnnotationModel;
 }
 
 interface IStates {
@@ -128,9 +129,12 @@ interface IStates {
 export class MainView extends React.Component<IProps, IStates> {
   constructor(props: IProps) {
     super(props);
-
     this._state = props.state;
 
+    this._formSchemaRegistry = props.formSchemaRegistry;
+
+    this._annotationModel = props.annotationModel;
+
     // Enforce the map to take the full available width in the case of Jupyter Notebook viewer
     const el = document.getElementById('main-panel');
 
@@ -160,7 +164,6 @@ export class MainView extends React.Component<IProps, IStates> {
       resizeObserver.observe(el);
     }
 
-    this._rightPanel = props.rightPanel;
     this._mainViewModel = this.props.viewModel;
     this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
 
@@ -225,6 +228,7 @@ export class MainView extends React.Component<IProps, IStates> {
     this._contextMenu = new ContextMenu({
       commands: this._commands,
     });
+    this._updateCenter = debounce(this.updateCenter, 100);
   }
 
   async componentDidMount(): Promise<void> {
@@ -2205,51 +2209,20 @@ export class MainView extends React.Component<IProps, IStates> {
             scale={this.state.scale}
           />
         </div>
-        {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,
-              y: 0,
-              width: 200,
-              height: 600,
-            }}
-            bounds="window"
-            minWidth={100}
-            minHeight={100}
-          >
-            <Lumino>{this._leftPanel}</Lumino>
-          </Rnd>
-        )} */}
-
-        {this._rightPanel && (
-          <Rnd
-            default={{
-              x: 400,
-              y: 0,
-              width: 200,
-              height: 600,
-            }}
-            bounds="window"
-            minWidth={100}
-            minHeight={100}
-          >
-            <Lumino>{this._rightPanel}</Lumino>
-          </Rnd>
+
+        {this._state && (
+          <LeftPanelComponent
+            model={this._model}
+            commands={this._commands}
+            state={this._state}
+          ></LeftPanelComponent>
+        )}
+        {this._formSchemaRegistry && this._annotationModel && (
+          <RightPanelComponent
+            model={this._model}
+            formSchemaRegistry={this._formSchemaRegistry}
+            annotationModel={this._annotationModel}
+          ></RightPanelComponent>
         )}
       </>
     );
@@ -2272,5 +2245,6 @@ export class MainView extends React.Component<IProps, IStates> {
   private _highlightLayer: VectorLayer<VectorSource>;
   private _updateCenter: CallableFunction;
   private _state?: IStateDB;
-  private _rightPanel?: Widget;
+  private _formSchemaRegistry?: IJGISFormSchemaRegistry;
+  private _annotationModel?: IAnnotationModel;
 }

packages/base/src/mainview/mainviewwidget.tsx

@@ -1,37 +1,40 @@
-import { IStateDB } from '@jupyterlab/statedb';
+import { IAnnotationModel, IJGISFormSchemaRegistry } from '@jupytergis/schema';
 import { ReactWidget } from '@jupyterlab/apputils';
-import { Widget } from '@lumino/widgets';
+import { IStateDB } from '@jupyterlab/statedb';
 import * as React from 'react';
 
 import { MainView } from './mainView';
 import { MainViewModel } from './mainviewmodel';
 
+export interface IOptions {
+  mainViewModel: MainViewModel;
+  state?: IStateDB;
+  formSchemaRegistry?: IJGISFormSchemaRegistry;
+  annotationModel?: IAnnotationModel;
+}
+
 export class JupyterGISMainViewPanel extends ReactWidget {
   /**
    * Construct a `JupyterGISPanel`.
    */
-  constructor(
-    options: { mainViewModel: MainViewModel, state?: IStateDB },
-    rightPanel?: Widget,
-  ) {
+  constructor(options: IOptions) {
     super();
-    this._mainViewModel = options.mainViewModel;
     this._state = options.state;
     this.addClass('jp-jupytergis-panel');
-    this._rightPanel = rightPanel;
+    this._options = options;
   }
 
   render(): JSX.Element {
     return (
       <MainView
         state={this._state}
-        rightPanel={this._rightPanel}
-        viewModel={this._mainViewModel}
+        viewModel={this._options.mainViewModel}
+        formSchemaRegistry={this._options.formSchemaRegistry}
+        annotationModel={this._options.annotationModel}
       />
     );
   }
 
   private _state?: IStateDB;
-  private _mainViewModel: MainViewModel;
-  private _rightPanel?: Widget;
+  private _options: IOptions;
 }

packages/base/src/panelview/annotationPanel.tsx

@@ -13,25 +13,17 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
   constructor(props: IAnnotationPanelProps) {
     super(props);
 
+    console.log(props.annotationModel);
+
     const updateCallback = () => {
       this.forceUpdate();
     };
 
     this._annotationModel = props.annotationModel;
     this._rightPanelModel = props.rightPanelModel;
 
-    this._annotationModel.modelChanged.connect(async () => {
-      // await this._annotationModel?.context?.ready;
-
-      this._annotationModel?.model?.sharedMetadataChanged.disconnect(
-        updateCallback,
-      );
-      this._annotationModel = props.annotationModel;
-      this._annotationModel?.model?.sharedMetadataChanged.connect(
-        updateCallback,
-      );
-      this.forceUpdate();
-    });
+    this._annotationModel?.model?.sharedMetadataChanged.connect(updateCallback);
+    this.forceUpdate();
   }
 
   render(): JSX.Element {

packages/base/src/panelview/components/filter-panel/Filter.tsx

@@ -285,6 +285,9 @@ const FilterComponent: React.FC<IFilterComponentProps> = props => {
           </div>
         </div>
       )}
+      {!shouldDisplay && (
+        <div style={{ textAlign: 'center' }}>No layer selected</div>
+      )}
     </>
   );
 };

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

@@ -38,7 +38,7 @@ interface IIdentifyComponentProps {
   model: IJupyterGISModel;
 }
 
-const IdentifyPanelComponent = (options: IIdentifyComponentProps) => {
+export const IdentifyPanelComponent = (options: IIdentifyComponentProps) => {
   const [features, setFeatures] = useState<IDict<any>>();
   const [visibleFeatures, setVisibleFeatures] = useState<IDict<any>>({
     0: true,

packages/base/src/panelview/components/layers.tsx

@@ -8,11 +8,8 @@ import {
 } from '@jupytergis/schema';
 import { DOMUtils } from '@jupyterlab/apputils';
 import { IStateDB } from '@jupyterlab/statedb';
-import {
-  Button,
-  LabIcon,
-  caretDownIcon,
-} from '@jupyterlab/ui-components';
+import { Button, LabIcon, caretDownIcon } from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
 import { ReadonlyPartialJSONObject, UUID } from '@lumino/coreutils';
 import React, {
   MouseEvent as ReactMouseEvent,
@@ -22,10 +19,7 @@ import React, {
 
 import { CommandIDs, icons } from '@/src/constants';
 import { nonVisibilityIcon, visibilityIcon } from '@/src/icons';
-import {
-  ILeftPanelClickHandlerParams,
-} from '@/src/panelview/leftpanel';
-import { CommandRegistry } from '@lumino/commands';
+import { ILeftPanelClickHandlerParams } from '@/src/panelview/leftpanel';
 
 // const LAYERS_PANEL_CLASS = 'jp-gis-layerPanel';
 const LAYER_GROUP_CLASS = 'jp-gis-layerGroup';
@@ -37,7 +31,6 @@ const LAYER_TITLE_CLASS = 'jp-gis-layerTitle';
 const LAYER_ICON_CLASS = 'jp-gis-layerIcon';
 const LAYER_TEXT_CLASS = 'jp-gis-layerText data-jgis-keybinding';
 
-
 // /**
 //  * The layers panel widget.
 //  */
@@ -156,7 +149,7 @@ export function LayersBodyComponent(props: IBodyProps): JSX.Element {
     // Notify commands that need updating
     props.commands.notifyCommandChanged(CommandIDs.identify);
     props.commands.notifyCommandChanged(CommandIDs.temporalController);
-  }
+  };
 
   const onSelect = ({
     type,
@@ -219,7 +212,11 @@ export function LayersBodyComponent(props: IBodyProps): JSX.Element {
     }
   };
 
-  const resetSelected = (type: SelectionType, nodeId?: string, item?: string) => {
+  const resetSelected = (
+    type: SelectionType,
+    nodeId?: string,
+    item?: string,
+  ) => {
     const selection: { [key: string]: ISelection } = {};
     if (item && nodeId) {
       selection[item] = {
@@ -230,7 +227,7 @@ export function LayersBodyComponent(props: IBodyProps): JSX.Element {
     props.model.syncSelected(selection, id);
 
     notifyCommands();
-  }
+  };
 
   /**
    * Propagate the layer selection.