Return the spatial index ID as a property to be available for widgets (…

…#440)

CHANGELOG.md

@@ -1,7 +1,7 @@
 # CHANGELOG
 
 ## Not released
-
+- Return the spatial index ID as a property to be available for widgets [#440](https://github.com/CartoDB/carto-react/pull/440)
 - Fix CategoryWidget search if there are null values [#439](https://github.com/CartoDB/carto-react/pull/439)
 - Layout improvements in BarWidgetUI [#438](https://github.com/CartoDB/carto-react/pull/438)
 - Fix FormulaWidget column check [#437](https://github.com/CartoDB/carto-react/pull/437)

packages/react-api/src/hooks/useTileFeatures.js

@@ -28,6 +28,7 @@ export default function useTileFeatures({
 
   const [tileFormat, setTileFormat] = useState('');
   const [spatialIndex, setSpatialIndex] = useState();
+  const [geoColumName, setGeoColumName] = useState();
 
   const sourceId = source?.id;
 
@@ -44,6 +45,7 @@ export default function useTileFeatures({
         geometry: spatialFilter,
         uniqueIdProperty,
         tileFormat,
+        geoColumName,
         spatialIndex
       })
         .then(() => {
@@ -52,7 +54,14 @@ export default function useTileFeatures({
         .catch(throwError)
         .finally(clearDebounce);
     },
-    [tileFormat, setSourceFeaturesReady, sourceId, spatialIndex, clearDebounce]
+    [
+      tileFormat,
+      setSourceFeaturesReady,
+      sourceId,
+      geoColumName,
+      spatialIndex,
+      clearDebounce
+    ]
   );
 
   const loadTiles = useCallback(
@@ -133,8 +142,14 @@ export default function useTileFeatures({
   );
 
   const onDataLoad = useCallback(({ tiles: [tile], scheme }) => {
-    const tilesFormat = new URL(tile).searchParams.get('formatTiles');
+    const url = new URL(tile);
+    const tilesFormat = url.searchParams.get('formatTiles');
     setTileFormat(tilesFormat || TILE_FORMATS.MVT);
+    const geoColum = url.searchParams.get('geo_column');
+
+    if (geoColum) {
+      setGeoColumName(getColumnNameFromGeoColumn(geoColum));
+    }
     setSpatialIndex(Object.values(SpatialIndex).includes(scheme) ? scheme : undefined);
   }, []);
 
@@ -153,3 +168,8 @@ const customFetch = async (url, { layer, loaders, loadOptions, signal }) => {
   const result = await parse(response, loaders, loadOptions);
   return result ? { ...result, isDroppingFeatures } : null;
 };
+
+const getColumnNameFromGeoColumn = (geoColumn) => {
+  const parts = geoColumn.split(':');
+  return parts.length === 1 ? parts[0] : parts.length === 2 ? parts[1] : null;
+};

packages/react-core/src/filters/tileFeatures.js

@@ -13,6 +13,7 @@ export function tileFeatures({
   geometry,
   uniqueIdProperty,
   tileFormat,
+  geoColumName,
   spatialIndex
 }) {
   const geometryToIntersect = getGeometryToIntersect(viewport, geometry);
@@ -22,7 +23,12 @@ export function tileFeatures({
   }
 
   if (spatialIndex) {
-    return tileFeaturesSpatialIndex({ tiles, geometryToIntersect, spatialIndex });
+    return tileFeaturesSpatialIndex({
+      tiles,
+      geometryToIntersect,
+      geoColumName,
+      spatialIndex
+    });
   }
   return tileFeaturesGeometries({
     tiles,

packages/react-core/src/filters/tileFeaturesSpatialIndex.d.ts

@@ -5,5 +5,6 @@ import { TileFeaturesResponse } from "../types";
 export default function tileFeaturesSpatialIndex(arg: {
   tiles: any;
   geometryToIntersect: Feature<Polygon | MultiPolygon>;
+  geoColumName: string;
   spatialIndex: SpatialIndex;
 }): TileFeaturesResponse;

packages/react-core/src/filters/tileFeaturesSpatialIndex.js

@@ -9,10 +9,12 @@ import { SpatialIndex } from '../operations/constants/SpatialIndexTypes';
 export default function tileFeaturesSpatialIndex({
   tiles,
   geometryToIntersect,
+  geoColumName,
   spatialIndex
 }) {
   const map = new Map();
   const resolution = getResolution(tiles, spatialIndex);
+  const spatialIndexIDName = geoColumName ? geoColumName : spatialIndex;
 
   if (!resolution) {
     return [];
@@ -39,7 +41,7 @@ export default function tileFeaturesSpatialIndex({
 
     tile.data.forEach((d) => {
       if (cellsDictionary[d.id]) {
-        map.set(d.id, d.properties);
+        map.set(d.id, { ...d.properties, [spatialIndexIDName]: d.id });
       }
     });
   }

packages/react-core/src/operations/constants/SpatialIndexTypes.d.ts

@@ -2,5 +2,6 @@ export enum SpatialIndex {
   H3 = 'h3',
   S2 = 's2',
   QUADKEY = 'quadkey',
-  QUADINT = 'quadint'
+  QUADINT = 'quadint',
+  QUADBIN = 'quadbin'
 }

packages/react-core/src/operations/constants/SpatialIndexTypes.js

@@ -2,5 +2,6 @@ export const SpatialIndex = Object.freeze({
   H3: 'h3',
   S2: 's2',
   QUADKEY: 'quadkey',
-  QUADINT: 'quadint'
+  QUADINT: 'quadint',
+  QUADBIN: 'quadbin'
 });

packages/react-core/src/types.d.ts

@@ -26,12 +26,13 @@ export type ScatterPlotFeature = [number, number][];
 export type Viewport = [number, number, number, number];
 
 export type TileFeatures = {
-  tiles: any; // TODO: add proper deck.gl type
+  tiles?: any; // TODO: add proper deck.gl type
   viewport: Viewport;
   geometry?: Geometry;
   uniqueIdProperty?: string;
   tileFormat: TILE_FORMATS;
-  spatialIndex?: SpatialIndex
+  geoColumName?: string;
+  spatialIndex?: SpatialIndex;
 };
 
 export type TileFeaturesResponse = Record<string, unknown>[] | [];

packages/react-workers/src/workers/features.worker.js

@@ -59,6 +59,7 @@ function getTileFeatures({
   geometry,
   uniqueIdProperty,
   tileFormat,
+  geoColumName,
   spatialIndex
 }) {
   currentFeatures = tileFeatures({
@@ -67,6 +68,7 @@ function getTileFeatures({
     geometry,
     uniqueIdProperty,
     tileFormat,
+    geoColumName,
     spatialIndex
   });
   postMessage({ result: true });