Automatically switch to identify panel when identifying (#900)

* Automatically switch to identify panel when identifying

* Introduce model.currentMode + activate tab everytime the identified
features change

---------

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

Author: arjxn-py

packages/base/src/commands/index.ts

@@ -160,15 +160,14 @@ export function addCommands(
         'WebGlLayer',
         'VectorTileLayer',
       ].includes(selectedLayer.type);
-      const isIdentifying = current.model.isIdentifying;
 
-      if (isIdentifying && !canIdentify) {
-        current.model.isIdentifying = false;
+      if (current.model.currentMode === 'identifying' && !canIdentify) {
+        current.model.currentMode = 'panning';
         current.node.classList.remove('jGIS-identify-tool');
         return false;
       }
 
-      return isIdentifying;
+      return current.model.currentMode === 'identifying';
     },
     isEnabled: () => {
       if (tracker.currentWidget?.model.jgisSettings.identifyDisabled) {
@@ -198,7 +197,7 @@ export function addCommands(
       if (luminoEvent) {
         const keysPressed = luminoEvent.keys as string[] | undefined;
         if (keysPressed?.includes('Escape')) {
-          current.model.isIdentifying = false;
+          current.model.currentMode = 'panning';
           current.node.classList.remove('jGIS-identify-tool');
           commands.notifyCommandChanged(CommandIDs.identify);
           return;
@@ -207,6 +206,7 @@ export function addCommands(
 
       current.node.classList.toggle('jGIS-identify-tool');
       current.model.toggleIdentify();
+
       commands.notifyCommandChanged(CommandIDs.identify);
     },
     ...icons.get(CommandIDs.identify),

packages/base/src/mainview/mainView.tsx

@@ -211,8 +211,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
     // Watch isIdentifying and clear the highlight when Identify Tool is turned off
     this._model.sharedModel.awareness.on('change', () => {
-      const isIdentifying = this._model.isIdentifying;
-      if (!isIdentifying && this._highlightLayer) {
+      if (this._model.currentMode !== 'identifying' && this._highlightLayer) {
         this._highlightLayer.getSource()?.clear();
       }
     });
@@ -519,7 +518,7 @@ export class MainView extends React.Component<IProps, IStates> {
         return layer === this.getLayer(selectedLayerId);
       },
       condition: (event: MapBrowserEvent<any>) => {
-        return singleClick(event) && this._model.isIdentifying;
+        return singleClick(event) && this._model.currentMode === 'identifying';
       },
       style: styleFunction,
     });
@@ -2086,7 +2085,7 @@ export class MainView extends React.Component<IProps, IStates> {
   });
 
   private _identifyFeature(e: MapBrowserEvent<any>) {
-    if (!this._model.isIdentifying) {
+    if (this._model.currentMode !== 'identifying') {
       return;
     }
 

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

@@ -58,7 +58,10 @@ export const IdentifyPanelComponent: React.FC<IIdentifyComponentProps> = ({
         return;
       }
 
-      if (model.isIdentifying && featuresRef.current !== identifiedFeatures) {
+      if (
+        model.currentMode === 'identifying' &&
+        featuresRef.current !== identifiedFeatures
+      ) {
         setFeatures(identifiedFeatures);
       }
     };

packages/base/src/panelview/rightpanel.tsx

@@ -1,6 +1,7 @@
 import {
   IAnnotationModel,
   IJGISFormSchemaRegistry,
+  IJupyterGISClientState,
   IJupyterGISModel,
 } from '@jupytergis/schema';
 import * as React from 'react';
@@ -23,15 +24,50 @@ interface IRightPanelProps {
 
 export const RightPanel: React.FC<IRightPanelProps> = props => {
   const [settings, setSettings] = React.useState(props.model.jgisSettings);
+  const tabInfo = [
+    !settings.objectPropertiesDisabled
+      ? { name: 'objectProperties', title: 'Object Properties' }
+      : false,
+    !settings.annotationsDisabled
+      ? { name: 'annotations', title: 'Annotations' }
+      : false,
+    !settings.identifyDisabled
+      ? { name: 'identifyPanel', title: 'Identified Features' }
+      : false,
+  ].filter(Boolean) as { name: string; title: string }[];
+
+  const [curTab, setCurTab] = React.useState<string | undefined>(
+    tabInfo.length > 0 ? tabInfo[0].name : undefined,
+  );
 
   React.useEffect(() => {
     const onSettingsChanged = () => {
       setSettings({ ...props.model.jgisSettings });
     };
+    let currentlyIdentifiedFeatures: any = undefined;
+    const onAwerenessChanged = (
+      _: IJupyterGISModel,
+      clients: Map<number, IJupyterGISClientState>,
+    ) => {
+      const clientId = props.model.getClientId();
+      const localState = clientId ? clients.get(clientId) : null;
+
+      if (
+        localState &&
+        localState.identifiedFeatures?.value &&
+        localState.identifiedFeatures.value !== currentlyIdentifiedFeatures
+      ) {
+        currentlyIdentifiedFeatures = localState.identifiedFeatures.value;
+        setCurTab('identifyPanel');
+      }
+    };
 
     props.model.settingsChanged.connect(onSettingsChanged);
+    props.model.clientStateChanged.connect(onAwerenessChanged);
+
     return () => {
       props.model.settingsChanged.disconnect(onSettingsChanged);
+      props.model.clientStateChanged.disconnect(onAwerenessChanged);
     };
   }, [props.model]);
 
@@ -43,22 +79,6 @@ export const RightPanel: React.FC<IRightPanelProps> = props => {
   const rightPanelVisible =
     !settings.rightPanelDisabled && !allRightTabsDisabled;
 
-  const tabInfo = [
-    !settings.objectPropertiesDisabled
-      ? { name: 'objectProperties', title: 'Object Properties' }
-      : false,
-    !settings.annotationsDisabled
-      ? { name: 'annotations', title: 'Annotations' }
-      : false,
-    !settings.identifyDisabled
-      ? { name: 'identifyPanel', title: 'Identified Features' }
-      : false,
-  ].filter(Boolean) as { name: string; title: string }[];
-
-  const [curTab, setCurTab] = React.useState<string | undefined>(
-    tabInfo.length > 0 ? tabInfo[0].name : undefined,
-  );
-
   const [selectedObjectProperties, setSelectedObjectProperties] =
     React.useState(undefined);
 

packages/schema/src/interfaces.ts

@@ -162,6 +162,9 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel {
   localState: IJupyterGISClientState | null;
   annotationModel?: IAnnotationModel;
 
+  // TODO Add more modes: "annotating"
+  currentMode: 'panning' | 'identifying';
+
   themeChanged: Signal<
     IJupyterGISModel,
     IChangedArgs<string, string | null, string>
@@ -244,7 +247,6 @@ export interface IJupyterGISModel extends DocumentRegistry.IModel {
   centerOnPosition(id: string): void;
 
   toggleIdentify(): void;
-  isIdentifying: boolean;
 
   isTemporalControllerActive: boolean;
   toggleTemporalController(): void;

packages/schema/src/model.ts

@@ -291,14 +291,6 @@ export class JupyterGISModel implements IJupyterGISModel {
     return this._zoomToPositionSignal;
   }
 
-  set isIdentifying(isIdentifying: boolean) {
-    this._isIdentifying = isIdentifying;
-  }
-
-  get isIdentifying(): boolean {
-    return this._isIdentifying;
-  }
-
   set isTemporalControllerActive(isActive: boolean) {
     this._isTemporalControllerActive = isActive;
   }
@@ -767,7 +759,19 @@ export class JupyterGISModel implements IJupyterGISModel {
   }
 
   toggleIdentify() {
-    this._isIdentifying = !this._isIdentifying;
+    if (this._currentMode === 'identifying') {
+      this._currentMode = 'panning';
+    } else {
+      this._currentMode = 'identifying';
+    }
+  }
+
+  get currentMode(): 'panning' | 'identifying' {
+    return this._currentMode;
+  }
+
+  set currentMode(value: 'panning' | 'identifying') {
+    this._currentMode = value;
   }
 
   toggleTemporalController() {
@@ -865,6 +869,8 @@ export class JupyterGISModel implements IJupyterGISModel {
   private _settingsChanged: Signal<JupyterGISModel, string>;
   private _jgisSettings: IJupyterGISSettings;
 
+  private _currentMode: 'panning' | 'identifying';
+
   private _sharedModel: IJupyterGISDoc;
   private _filePath: string;
   private _contentsManager?: Contents.IManager;
@@ -892,7 +898,6 @@ export class JupyterGISModel implements IJupyterGISModel {
 
   private _updateLayerSignal = new Signal<this, string>(this);
 
-  private _isIdentifying = false;
   private _isTemporalControllerActive = false;
 
   static worker: Worker;

python/jupytergis_lab/src/notebookrenderer.ts

@@ -20,12 +20,12 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin,
 } from '@jupyterlab/application';
-import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { showErrorMessage } from '@jupyterlab/apputils';
 import { ConsolePanel } from '@jupyterlab/console';
 import { PathExt } from '@jupyterlab/coreutils';
 import { NotebookPanel } from '@jupyterlab/notebook';
 import { Contents } from '@jupyterlab/services';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import { IStateDB } from '@jupyterlab/statedb';
 import { Toolbar } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';