Implement picking (#47)

* Implement picking

* polygon app autohighlight

* Correct multi-polygon offsets when picking

Author: kylebarron

examples/linestring/app.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer } from "deck.gl/typed";
+import DeckGL, { Layer, PickingInfo } from "deck.gl/typed";
 import { GeoArrowPathLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
 
@@ -25,12 +25,9 @@ const NAV_CONTROL_STYLE = {
 };
 
 function Root() {
-  const onClick = (info) => {
+  const onClick = (info: PickingInfo) => {
     if (info.object) {
-      // eslint-disable-next-line
-      alert(
-        `${info.object.properties.name} (${info.object.properties.abbrev})`
-      );
+      console.log(JSON.stringify(info.object.toJSON()));
     }
   };
 
@@ -59,6 +56,7 @@ function Root() {
         data: table,
         getColor: [255, 0, 0],
         widthMinPixels: 1,
+        pickable: true,
       })
     );
 
@@ -68,6 +66,7 @@ function Root() {
       controller={true}
       layers={layers}
       ContextProvider={MapContext.Provider}
+      onClick={onClick}
       glOptions={{
         powerPreference: "high-performance",
       }}

examples/multipolygon/app.tsx

@@ -59,8 +59,8 @@ function Root() {
         extruded: true,
         getPolygon: table.getChild("geometry")!,
         getFillColor: table.getChild("pop_colors")!,
-        // pickable: true,
-        // autoHighlight: true,
+        pickable: true,
+        autoHighlight: true,
       })
     );
 
@@ -70,7 +70,7 @@ function Root() {
       controller={true}
       layers={layers}
       ContextProvider={MapContext.Provider}
-      // onClick={onClick}
+      onClick={onClick}
     >
       <StaticMap mapStyle={MAP_STYLE} />
       <NavigationControl style={NAV_CONTROL_STYLE} />

examples/multipolygon/generate_data.py

@@ -1,5 +1,6 @@
 import geopandas as gpd
 import numpy as np
+import pandas as pd
 import pyarrow as pa
 import pyarrow.feather as feather
 from lonboard.colormap import apply_continuous_cmap
@@ -9,6 +10,16 @@
 
 def main():
     gdf = gpd.read_file("ne_10m_admin_0_countries.zip", engine="pyogrio")
+
+    # Downcast because the NE_ID defaulted to int64, which the default arrow js json
+    # serializer doesn't know how to handle
+    for col in gdf.select_dtypes(np.signedinteger).columns:
+        gdf[col] = pd.to_numeric(gdf[col], downcast="signed")
+    for col in gdf.select_dtypes(np.unsignedinteger).columns:
+        gdf[col] = pd.to_numeric(gdf[col], downcast="unsigned")
+    for col in gdf.select_dtypes(np.floating).columns:
+        gdf[col] = pd.to_numeric(gdf[col], downcast="float")
+
     table = geopandas_to_geoarrow(gdf)
 
     log_pop_est = np.where(gdf["POP_EST"] == 0, 0, np.log10(gdf["POP_EST"]))

examples/point/app.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer } from "deck.gl/typed";
+import DeckGL, { Layer, PickingInfo } from "deck.gl/typed";
 import { GeoArrowScatterplotLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
 
@@ -25,12 +25,9 @@ const NAV_CONTROL_STYLE = {
 };
 
 function Root() {
-  const onClick = (info) => {
+  const onClick = (info: PickingInfo) => {
     if (info.object) {
-      // eslint-disable-next-line
-      alert(
-        `${info.object.properties.name} (${info.object.properties.abbrev})`
-      );
+      console.log(JSON.stringify(info.object.toJSON()));
     }
   };
 
@@ -57,11 +54,11 @@ function Root() {
       new GeoArrowScatterplotLayer({
         id: "geoarrow-points",
         data: table,
-        // getFillColor: [255, 0, 0],
-        getFillColor: table.getChild("colors"),
-        radiusMinPixels: 1,
+        getFillColor: table.getChild("colors")!,
+        radiusMinPixels: 1.5,
         getPointRadius: 10,
         pointRadiusMinPixels: 0.8,
+        pickable: true,
       })
     );
 
@@ -71,6 +68,7 @@ function Root() {
       controller={true}
       layers={layers}
       ContextProvider={MapContext.Provider}
+      onClick={onClick}
     >
       <StaticMap mapStyle={MAP_STYLE} />
       <NavigationControl style={NAV_CONTROL_STYLE} />

examples/polygon/app.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer } from "deck.gl/typed";
+import DeckGL, { Layer, PickingInfo } from "deck.gl/typed";
 import { GeoArrowSolidPolygonLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
 
@@ -24,12 +24,9 @@ const NAV_CONTROL_STYLE = {
 };
 
 function Root() {
-  const onClick = (info) => {
+  const onClick = (info: PickingInfo) => {
     if (info.object) {
-      // eslint-disable-next-line
-      alert(
-        `${info.object.properties.name} (${info.object.properties.abbrev})`
-      );
+      console.log(JSON.stringify(info.object.toJSON()));
     }
   };
 
@@ -57,6 +54,8 @@ function Root() {
         id: "geoarrow-polygons",
         data: table,
         getFillColor: [0, 100, 60, 160],
+        pickable: true,
+        autoHighlight: true,
       })
     );
 
@@ -66,6 +65,7 @@ function Root() {
       controller={true}
       layers={layers}
       ContextProvider={MapContext.Provider}
+      onClick={onClick}
     >
       <StaticMap mapStyle={MAP_STYLE} />
       <NavigationControl style={NAV_CONTROL_STYLE} />

src/path-layer.ts

@@ -4,8 +4,10 @@ import {
   CompositeLayer,
   CompositeLayerProps,
   DefaultProps,
+  GetPickingInfoParams,
   Layer,
   LayersList,
+  PickingInfo,
   Unit,
 } from "@deck.gl/core/typed";
 import { PathLayer } from "@deck.gl/layers/typed";
@@ -18,6 +20,7 @@ import {
   getMultiLineStringChild,
   getMultiLineStringResolvedOffsets,
   getPointChild,
+  invertOffsets,
   isLineStringVector,
   isMultiLineStringVector,
   validateColorVector,
@@ -138,6 +141,37 @@ export class GeoArrowPathLayer<
   static defaultProps = defaultProps;
   static layerName = "GeoArrowPathLayer";
 
+  getPickingInfo({ info, sourceLayer }: GetPickingInfoParams): PickingInfo {
+    const { data: table } = this.props;
+
+    // Geometry index as rendered
+    let index = info.index;
+
+    // if a MultiLineString dataset, map from the rendered index back to the
+    // feature index
+    // @ts-expect-error `invertedGeomOffsets` is manually set on layer props
+    if (sourceLayer.props.invertedGeomOffsets) {
+      // @ts-expect-error `invertedGeomOffsets` is manually set on layer props
+      index = sourceLayer.props.invertedGeomOffsets[index];
+    }
+
+    // @ts-expect-error `recordBatchIdx` is manually set on layer props
+    const recordBatchIdx: number = sourceLayer.props.recordBatchIdx;
+    const batch = table.batches[recordBatchIdx];
+    const row = batch.get(index);
+
+    // @ts-expect-error hack: using private method to avoid recomputing via
+    // batch lengths on each iteration
+    const offsets: number[] = table._offsets;
+    const currentBatchOffset = offsets[recordBatchIdx];
+
+    info.object = row;
+    // Update index to be _global_ index, not within the specific record batch
+    index += currentBatchOffset;
+    info.index = index;
+    return info;
+  }
+
   renderLayers(): Layer<{}> | LayersList | null {
     const { data: table } = this.props;
 
@@ -206,6 +240,9 @@ export class GeoArrowPathLayer<
       const flatCoordinateArray = coordData.values;
 
       const props: PathLayerProps = {
+        // used for picking purposes
+        recordBatchIdx,
+
         id: `${this.props.id}-geoarrow-path-${recordBatchIdx}`,
         widthUnits: this.props.widthUnits,
         widthScale: this.props.widthScale,
@@ -282,6 +319,7 @@ export class GeoArrowPathLayer<
       const pointData = getLineStringChild(lineStringData);
       const coordData = getPointChild(pointData);
 
+      const geomOffsets = multiLineStringData.valueOffsets;
       const ringOffsets = lineStringData.valueOffsets;
 
       const nDim = pointData.type.listSize;
@@ -290,6 +328,10 @@ export class GeoArrowPathLayer<
         getMultiLineStringResolvedOffsets(multiLineStringData);
 
       const props: PathLayerProps = {
+        // used for picking purposes
+        recordBatchIdx,
+        invertedGeomOffsets: invertOffsets(geomOffsets),
+
         id: `${this.props.id}-geoarrow-path-${recordBatchIdx}`,
         widthUnits: this.props.widthUnits,
         widthScale: this.props.widthScale,

src/scatterplot-layer.ts

@@ -4,8 +4,10 @@ import {
   CompositeLayer,
   CompositeLayerProps,
   DefaultProps,
+  GetPickingInfoParams,
   Layer,
   LayersList,
+  PickingInfo,
   Unit,
 } from "@deck.gl/core/typed";
 import { ScatterplotLayer } from "@deck.gl/layers/typed";
@@ -16,6 +18,7 @@ import {
   getGeometryVector,
   getMultiPointChild,
   getPointChild,
+  invertOffsets,
   isMultiPointVector,
   isPointVector,
   validateColorVector,
@@ -168,6 +171,37 @@ export class GeoArrowScatterplotLayer<
   static defaultProps = defaultProps;
   static layerName = "GeoArrowScatterplotLayer";
 
+  getPickingInfo({ info, sourceLayer }: GetPickingInfoParams): PickingInfo {
+    const { data: table } = this.props;
+
+    // Geometry index as rendered
+    let index = info.index;
+
+    // if a MultiPoint dataset, map from the rendered index back to the feature
+    // index
+    // @ts-expect-error `invertedGeomOffsets` is manually set on layer props
+    if (sourceLayer.props.invertedGeomOffsets) {
+      // @ts-expect-error `invertedGeomOffsets` is manually set on layer props
+      index = sourceLayer.props.invertedGeomOffsets[index];
+    }
+
+    // @ts-expect-error `recordBatchIdx` is manually set on layer props
+    const recordBatchIdx: number = sourceLayer.props.recordBatchIdx;
+    const batch = table.batches[recordBatchIdx];
+    const row = batch.get(index);
+
+    // @ts-expect-error hack: using private method to avoid recomputing via
+    // batch lengths on each iteration
+    const offsets: number[] = table._offsets;
+    const currentBatchOffset = offsets[recordBatchIdx];
+
+    info.object = row;
+    // Update index to be _global_ index, not within the specific record batch
+    index += currentBatchOffset;
+    info.index = index;
+    return info;
+  }
+
   renderLayers(): Layer<{}> | LayersList | null {
     const { data: table } = this.props;
 
@@ -235,6 +269,9 @@ export class GeoArrowScatterplotLayer<
       const flatCoordinateArray = geometryData.children[0].values;
 
       const props: ScatterplotLayerProps = {
+        // @ts-expect-error used for picking purposes
+        recordBatchIdx,
+
         id: `${this.props.id}-geoarrow-scatterplot-${recordBatchIdx}`,
         radiusUnits: this.props.radiusUnits,
         radiusScale: this.props.radiusScale,
@@ -335,6 +372,10 @@ export class GeoArrowScatterplotLayer<
       const flatCoordinateArray = flatCoordsData.values;
 
       const props: ScatterplotLayerProps = {
+        // @ts-expect-error used for picking purposes
+        recordBatchIdx,
+        invertedGeomOffsets: invertOffsets(geomOffsets),
+
         id: `${this.props.id}-geoarrow-scatterplot-${recordBatchIdx}`,
         radiusUnits: this.props.radiusUnits,
         radiusScale: this.props.radiusScale,