Identify tool

packages/base/src/commands.ts

@@ -19,6 +19,7 @@ import { CreationFormDialog } from './dialogs/formdialog';
 import { LayerBrowserWidget } from './dialogs/layerBrowserDialog';
 import { SymbologyWidget } from './dialogs/symbology/symbologyDialog';
 import { JupyterGISWidget } from './widget';
+import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 
 interface ICreateEntry {
   tracker: WidgetTracker<JupyterGISWidget>;
@@ -91,7 +92,7 @@ export function addCommands(
         ? tracker.currentWidget.context.model.sharedModel.editable
         : false;
     },
-    execute: args => {
+    execute: () => {
       const current = tracker.currentWidget;
 
       if (current) {
@@ -108,7 +109,7 @@ export function addCommands(
         ? tracker.currentWidget.context.model.sharedModel.editable
         : false;
     },
-    execute: args => {
+    execute: () => {
       const current = tracker.currentWidget;
 
       if (current) {
@@ -118,6 +119,43 @@ export function addCommands(
     ...icons.get(CommandIDs.undo)
   });
 
+  commands.addCommand(CommandIDs.identify, {
+    label: trans.__('Identify'),
+    isToggled: () => {
+      return tracker.currentWidget?.context.model.isIdentifying || false;
+    },
+    isEnabled: () => {
+      return tracker.currentWidget
+        ? tracker.currentWidget.context.model.sharedModel.editable
+        : false;
+    },
+    execute: args => {
+      const current = tracker.currentWidget;
+      if (!current) {
+        return;
+      }
+
+      const luminoEvent = args['_luminoEvent'] as
+        | ReadonlyPartialJSONObject
+        | undefined;
+
+      if (luminoEvent) {
+        const keysPressed = luminoEvent.keys as string[] | undefined;
+        if (keysPressed?.includes('Escape')) {
+          current.context.model.isIdentifying = false;
+          current.node.classList.remove('jGIS-identify-tool');
+          commands.notifyCommandChanged(CommandIDs.identify);
+          return;
+        }
+      }
+
+      current.node.classList.toggle('jGIS-identify-tool');
+      current.context.model.toggleIdentify();
+      commands.notifyCommandChanged(CommandIDs.identify);
+    },
+    ...icons.get(CommandIDs.identify)
+  });
+
   /**
    * SOURCES and LAYERS creation commands.
    */

packages/base/src/constants.ts

@@ -9,6 +9,7 @@ export namespace CommandIDs {
   export const redo = 'jupytergis:redo';
   export const undo = 'jupytergis:undo';
   export const symbology = 'jupytergis:symbology';
+  export const identify = 'jupytergis:identify';
 
   // Layers and sources creation commands
   export const openLayerBrowser = 'jupytergis:openLayerBrowser';
@@ -95,7 +96,8 @@ const iconObject = {
   [CommandIDs.newVideoEntry]: { iconClass: 'fa fa-video' },
   [CommandIDs.newShapefileLayer]: { iconClass: 'fa fa-file' },
   [CommandIDs.newGeoTiffEntry]: { iconClass: 'fa fa-image' },
-  [CommandIDs.symbology]: { iconClass: 'fa fa-brush' }
+  [CommandIDs.symbology]: { iconClass: 'fa fa-brush' },
+  [CommandIDs.identify]: { iconClass: 'fa fa-info' }
 };
 
 /**

packages/base/src/mainview/mainView.tsx

@@ -29,10 +29,10 @@ import {
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
 import { User } from '@jupyterlab/services';
 import { JSONValue, UUID } from '@lumino/coreutils';
-import { Collection, Map as OlMap, View } from 'ol';
+import { Collection, MapBrowserEvent, Map as OlMap, View } from 'ol';
 import { ScaleLine } from 'ol/control';
 import { GeoJSON, MVT } from 'ol/format';
-import DragAndDrop from 'ol/interaction/DragAndDrop';
+import { DragAndDrop, Select } from 'ol/interaction';
 import {
   Image as ImageLayer,
   Layer,
@@ -72,6 +72,8 @@ import AnnotationFloater from '../annotations/components/AnnotationFloater';
 import { CommandIDs } from '../constants';
 import { FollowIndicator } from './FollowIndicator';
 import CollaboratorPointers, { ClientPointer } from './CollaboratorPointers';
+import { Circle, Fill, Stroke, Style } from 'ol/style';
+import { singleClick } from 'ol/events/condition';
 
 interface IProps {
   viewModel: MainViewModel;
@@ -179,6 +181,7 @@ export class MainView extends React.Component<IProps, IStates> {
         controls: [new ScaleLine()]
       });
 
+      // Add map interactions
       const dragAndDropInteraction = new DragAndDrop({
         formatConstructors: [GeoJSON]
       });
@@ -216,6 +219,51 @@ export class MainView extends React.Component<IProps, IStates> {
 
       this._Map.addInteraction(dragAndDropInteraction);
 
+      const selectInteraction = new Select({
+        hitTolerance: 5,
+        multi: true,
+        layers: layer => {
+          const localState = this._model?.sharedModel.awareness.getLocalState();
+          const selectedLayers = localState?.selected?.value;
+
+          if (!selectedLayers) {
+            return false;
+          }
+          const selectedLayerId = Object.keys(selectedLayers)[0];
+
+          return layer === this.getLayer(selectedLayerId);
+        },
+        condition: (event: MapBrowserEvent<any>) => {
+          return singleClick(event) && this._model.isIdentifying;
+        },
+        style: new Style({
+          image: new Circle({
+            radius: 5,
+            fill: new Fill({
+              color: '#C52707'
+            }),
+            stroke: new Stroke({
+              color: '#171717',
+              width: 2
+            })
+          })
+        })
+      });
+
+      selectInteraction.on('select', event => {
+        const identifiedFeatures: IDict<any> = [];
+        selectInteraction.getFeatures().forEach(feature => {
+          identifiedFeatures.push(feature.getProperties());
+        });
+
+        this._model.syncIdentifiedFeatures(
+          identifiedFeatures,
+          this._mainViewModel.id
+        );
+      });
+
+      this._Map.addInteraction(selectInteraction);
+
       const view = this._Map.getView();
 
       // TODO: Note for the future, will need to update listeners if view changes
@@ -276,6 +324,8 @@ export class MainView extends React.Component<IProps, IStates> {
         });
       });
 
+      this._Map.on('click', this._identifyFeature.bind(this));
+
       this._Map
         .getViewport()
         .addEventListener('pointermove', this._onPointerMove.bind(this));
@@ -1349,6 +1399,52 @@ export class MainView extends React.Component<IProps, IStates> {
     this._model.syncPointer(pointer);
   });
 
+  private _identifyFeature(e: MapBrowserEvent<any>) {
+    if (!this._model.isIdentifying) {
+      return;
+    }
+
+    const localState = this._model?.sharedModel.awareness.getLocalState();
+    const selectedLayer = localState?.selected?.value;
+
+    if (!selectedLayer) {
+      console.warn('Layer must be selected to use identify tool');
+      return;
+    }
+
+    const layerId = Object.keys(selectedLayer)[0];
+    const jgisLayer = this._model.getLayer(layerId);
+
+    switch (jgisLayer?.type) {
+      case 'WebGlLayer': {
+        const layer = this.getLayer(layerId) as WebGlTileLayer;
+        const data = layer.getData(e.pixel);
+
+        // TODO: Handle dataviews?
+        if (!data || data instanceof DataView) {
+          return;
+        }
+
+        const bandValues: IDict<number> = {};
+
+        // Data is an array of band values
+        for (let i = 0; i < data.length - 1; i++) {
+          bandValues[`Band ${i + 1}`] = data[i];
+        }
+
+        // last element is alpha
+        bandValues['Alpha'] = data[data.length - 1];
+
+        this._model.syncIdentifiedFeatures(
+          [bandValues],
+          this._mainViewModel.id
+        );
+
+        break;
+      }
+    }
+  }
+
   private _handleThemeChange = (): void => {
     const lightTheme = isLightTheme();
 

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

@@ -2,7 +2,6 @@ import {
   GeoJSONFeature1,
   IDict,
   IJGISFilterItem,
-  IJGISFormSchemaRegistry,
   IJupyterGISModel,
   IJupyterGISTracker
 } from '@jupytergis/schema';
@@ -44,7 +43,6 @@ export namespace FilterPanel {
   export interface IOptions {
     model: IControlPanelModel;
     tracker: IJupyterGISTracker;
-    formSchemaRegistry: IJGISFormSchemaRegistry;
   }
 }