Embed side panels in map view (#784)

* Embedded panels

* Add shadow

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

Co-authored-by: martinRenou <[email protected]>

* Made suggested changes

* Solve a bug with identify panel

* Make suggested changes

* Made suggested changes

* Lint

* Solve a bug and made suggested changes

* Made suggested changes

* Add panels to notebook view

* Made suggested changes

* Solve annotations tests

* Update Playwright Snapshots

* Update Playwright Snapshots

* Solved integration tests

* Update Playwright Snapshots

---------

Co-authored-by: martinRenou <[email protected]>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: 3 people

packages/base/src/annotations/components/Annotation.tsx

@@ -9,37 +9,25 @@ import { showDialog, Dialog } from '@jupyterlab/apputils';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useMemo, useState } from 'react';
 
-import { IControlPanelModel } from '@/src/types';
 import { Message } from './Message';
 
 export interface IAnnotationProps {
   itemId: string;
   annotationModel: IAnnotationModel;
-  rightPanelModel?: IControlPanelModel;
+  jgisModel?: IJupyterGISModel;
   children?: JSX.Element[] | JSX.Element;
 }
 
 const Annotation: React.FC<IAnnotationProps> = ({
   itemId,
   annotationModel,
-  rightPanelModel,
+  jgisModel,
   children,
 }) => {
   const [messageContent, setMessageContent] = useState('');
-  const [jgisModel, setJgisModel] = useState<IJupyterGISModel | undefined>(
-    rightPanelModel?.jGISModel,
-  );
-
   const annotation = annotationModel.getAnnotation(itemId);
   const contents = useMemo(() => annotation?.contents ?? [], [annotation]);
 
-  /**
-   * Update the model when it changes.
-   */
-  rightPanelModel?.documentChanged.connect((_, widget) => {
-    setJgisModel(widget?.model);
-  });
-
   const handleSubmit = () => {
     annotationModel.addContent(itemId, messageContent);
     setMessageContent('');
@@ -98,7 +86,7 @@ const Annotation: React.FC<IAnnotationProps> = ({
         <Button className="jp-mod-styled jp-mod-warn" onClick={handleDelete}>
           <FontAwesomeIcon icon={faTrash} />
         </Button>
-        {rightPanelModel && (
+        {jgisModel && (
           <Button
             className="jp-mod-styled jp-mod-accept"
             onClick={centerOnAnnotation}

packages/base/src/index.ts

@@ -8,8 +8,8 @@ export * from './icons';
 export * from './mainview';
 export * from './menus';
 export * from './panelview';
-export * from './stacBrowser';
 export * from './store';
+export * from './stacBrowser';
 export * from './toolbar';
 export * from './tools';
 export * from './types';

packages/base/src/keybindings.json

@@ -37,7 +37,7 @@
   {
     "command": "jupytergis:renameLayer",
     "keys": ["F2"],
-    "selector": ".data-jgis-keybinding .jp-gis-layerItem"
+    "selector": ".jp-gis-layerItem"
   },
   {
     "command": "jupytergis:removeGroup",
@@ -47,7 +47,7 @@
   {
     "command": "jupytergis:renameGroup",
     "keys": ["F2"],
-    "selector": ".data-jgis-keybinding .jp-gis-layerGroupHeader"
+    "selector": ".jp-gis-layerGroupHeader"
   },
   {
     "command": "jupytergis:executeConsole",

packages/base/src/mainview/mainView.tsx

@@ -1,13 +1,15 @@
 import { MapChange } from '@jupyter/ydoc';
 import {
   IAnnotation,
+  IAnnotationModel,
   IDict,
   IGeoTiffSource,
   IHeatmapLayer,
   IHillshadeLayer,
   IImageLayer,
   IImageSource,
   IJGISFilterItem,
+  IJGISFormSchemaRegistry,
   IJGISLayer,
   IJGISLayerDocChange,
   IJGISLayerTreeDocChange,
@@ -34,6 +36,7 @@ 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 } from '@lumino/widgets';
@@ -90,6 +93,7 @@ import CollaboratorPointers, { ClientPointer } from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
 import { MainViewModel } from './mainviewmodel';
+import { LeftPanel, RightPanel } from '../panelview';
 
 type OlLayerTypes =
   | TileLayer
@@ -102,6 +106,9 @@ type OlLayerTypes =
   | ImageLayer<any>;
 interface IProps {
   viewModel: MainViewModel;
+  state?: IStateDB;
+  formSchemaRegistry?: IJGISFormSchemaRegistry;
+  annotationModel?: IAnnotationModel;
 }
 
 interface IStates {
@@ -123,6 +130,11 @@ 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');
@@ -2220,6 +2232,21 @@ export class MainView extends React.Component<IProps, IStates> {
             scale={this.state.scale}
           />
         </div>
+
+        {this._state && (
+          <LeftPanel
+            model={this._model}
+            commands={this._mainViewModel.commands}
+            state={this._state}
+          ></LeftPanel>
+        )}
+        {this._formSchemaRegistry && this._annotationModel && (
+          <RightPanel
+            model={this._model}
+            formSchemaRegistry={this._formSchemaRegistry}
+            annotationModel={this._annotationModel}
+          ></RightPanel>
+        )}
       </>
     );
   }
@@ -2240,4 +2267,7 @@ export class MainView extends React.Component<IProps, IStates> {
   private _originalFeatures: IDict<Feature<Geometry>[]> = {};
   private _highlightLayer: VectorLayer<VectorSource>;
   private _updateCenter: CallableFunction;
+  private _state?: IStateDB;
+  private _formSchemaRegistry?: IJGISFormSchemaRegistry;
+  private _annotationModel?: IAnnotationModel;
 }

packages/base/src/mainview/mainviewwidget.tsx

@@ -1,22 +1,40 @@
+import { IAnnotationModel, IJGISFormSchemaRegistry } from '@jupytergis/schema';
 import { ReactWidget } from '@jupyterlab/apputils';
+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 }) {
+  constructor(options: IOptions) {
     super();
-    this._mainViewModel = options.mainViewModel;
+    this._state = options.state;
     this.addClass('jp-jupytergis-panel');
+    this._options = options;
   }
 
   render(): JSX.Element {
-    return <MainView viewModel={this._mainViewModel} />;
+    return (
+      <MainView
+        state={this._state}
+        viewModel={this._options.mainViewModel}
+        formSchemaRegistry={this._options.formSchemaRegistry}
+        annotationModel={this._options.annotationModel}
+      />
+    );
   }
 
-  private _mainViewModel: MainViewModel;
+  private _state?: IStateDB;
+  private _options: IOptions;
 }

packages/base/src/panelview/annotationPanel.tsx

@@ -1,13 +1,11 @@
-import { IAnnotationModel } from '@jupytergis/schema';
-import { PanelWithToolbar, ReactWidget } from '@jupyterlab/ui-components';
+import { IAnnotationModel, IJupyterGISModel } from '@jupytergis/schema';
 import React, { Component } from 'react';
 
 import Annotation from '@/src/annotations/components/Annotation';
-import { IControlPanelModel } from '@/src/types';
 
 interface IAnnotationPanelProps {
   annotationModel: IAnnotationModel;
-  rightPanelModel: IControlPanelModel;
+  jgisModel: IJupyterGISModel;
 }
 
 export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
@@ -19,20 +17,10 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
     };
 
     this._annotationModel = props.annotationModel;
-    this._rightPanelModel = props.rightPanelModel;
+    this._jgisModel = props.jgisModel;
 
-    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 {
@@ -46,7 +34,7 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
       return (
         <div>
           <Annotation
-            rightPanelModel={this._rightPanelModel}
+            jgisModel={this._jgisModel}
             annotationModel={this._annotationModel}
             itemId={id}
           />
@@ -59,37 +47,5 @@ export class AnnotationsPanel extends Component<IAnnotationPanelProps> {
   }
 
   private _annotationModel: IAnnotationModel;
-  private _rightPanelModel: IControlPanelModel;
-}
-
-export class Annotations extends PanelWithToolbar {
-  constructor(options: Annotations.IOptions) {
-    super({});
-
-    this.title.label = 'Annotations';
-    this.addClass('jgis-scrollable');
-
-    this._annotationModel = options.annotationModel;
-    this._rightPanelModel = options.rightPanelModel;
-
-    this._widget = ReactWidget.create(
-      <AnnotationsPanel
-        rightPanelModel={this._rightPanelModel}
-        annotationModel={this._annotationModel}
-      />,
-    );
-
-    this.addWidget(this._widget);
-  }
-
-  private _widget: ReactWidget;
-  private _annotationModel: IAnnotationModel;
-  private _rightPanelModel: IControlPanelModel;
-}
-
-export namespace Annotations {
-  export interface IOptions {
-    annotationModel: IAnnotationModel;
-    rightPanelModel: IControlPanelModel;
-  }
+  private _jgisModel: IJupyterGISModel;
 }