useWidgetFetch: adapt spatialFiltersResolution to current zoom level

CartoDB · Jul 31, 2024 · 5ccc4d7 · 5ccc4d7
1 parent 88e003b
commit 5ccc4d7
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
diff --git a/packages/react-api/src/api/model.js b/packages/react-api/src/api/model.js
@@ -101,7 +101,6 @@ export function executeModel(props) {
     queryParams.spatialFilters = JSON.stringify(spatialFilters);
     queryParams.spatialDataType = spatialDataType;
     if (spatialDataType !== 'geo') {
-      // TODO: any sane default (?)
       if (source.spatialFiltersResolution !== undefined) {
         queryParams.spatialFiltersResolution = source.spatialFiltersResolution;
       }

diff --git a/packages/react-api/src/types.d.ts b/packages/react-api/src/types.d.ts
@@ -43,6 +43,7 @@ export type SourceProps = {
   type: MapTypesType['QUERY'] | MapTypesType['TABLE'] | MapTypesType['TILESET'];
   connection: string;
   geoColumn?: string;
+  dataResoultion?: number;
   spatialDataType?: string;
   spatialDataColumn?: string;
   spatialFiltersResolution?: number;

diff --git a/packages/react-redux/src/slices/cartoSlice.js b/packages/react-redux/src/slices/cartoSlice.js
@@ -204,6 +204,8 @@ export const createCartoSlice = (initialState) => {
  * @param {FiltersLogicalOperators=} data.filtersLogicalOperator - logical operator that defines how filters for different columns are joined together.
  * @param {import('@deck.gl/carto').QueryParameters} data.queryParameters - SQL query parameters.
  * @param {string=} data.geoColumn - (optional) name of column containing geometries or spatial index data.
+ * @param {number=} data.dataResolution - data resolution for spatial index data.
+ * @param {number=} data.spatialFiltersResolution - spatial filters resolution for spatial index data.
  * @param {string=} data.aggregationExp - (optional) for spatial index data.
  * @param {string=} data.provider - (optional) type of the data warehouse.
  */
@@ -219,6 +221,7 @@ export const addSource = ({
   geoColumn,
   spatialDataType,
   spatialDataColumn,
+  dataResolution,
   spatialFiltersResolution,
   aggregationExp,
   provider
@@ -234,6 +237,7 @@ export const addSource = ({
     filtersLogicalOperator,
     queryParameters,
     geoColumn,
+    dataResolution,
     spatialDataType,
     spatialDataColumn,
     spatialFiltersResolution,

diff --git a/packages/react-widgets/src/hooks/useWidgetFetch.js b/packages/react-widgets/src/hooks/useWidgetFetch.js
@@ -57,6 +57,19 @@ export function selectGeometryToIntersect(global, viewport, spatialFilter) {
   }
 }
 
+// stolen from deck.gl/modules/carto/src/layers/h3-tileset-2d.ts
+const BIAS = 2;
+export function getHexagonResolution(viewport, tileSize) {
+  // Difference in given tile size compared to deck's internal 512px tile size,
+  // expressed as an offset to the viewport zoom.
+  const zoomOffset = Math.log2(tileSize / 512);
+  const hexagonScaleFactor = (2 / 3) * (viewport.zoom - zoomOffset);
+  const latitudeScaleFactor = Math.log(1 / Math.cos((Math.PI * viewport.latitude) / 180));
+
+  // Clip and bias
+  return Math.max(0, Math.floor(hexagonScaleFactor + latitudeScaleFactor - BIAS));
+}
+
 export default function useWidgetFetch(
   modelFn,
   {
@@ -85,6 +98,7 @@ export default function useWidgetFetch(
   );
 
   const viewport = useSelector(selectViewport);
+  const viewState = useSelector((state) => state.carto.viewState);
   const spatialFilter = useSelector((state) =>
     selectValidSpatialFilter(state, dataSource)
   );
@@ -93,6 +107,35 @@ export default function useWidgetFetch(
     [global, viewport, spatialFilter]
   );
 
+  const source2 = useMemo(() => {
+    if (
+      !geometryToIntersect ||
+      !source.dataResolution ||
+      source.spatialDataType === 'geo'
+    ) {
+      return source;
+    }
+
+    if (source.spatialDataType === 'h3') {
+      const hexagonResolution = getHexagonResolution(
+        { zoom: viewState.zoom, latitude: viewState.latitude },
+        source.dataResolution
+      );
+      return {
+        ...source,
+        spatialFiltersResolution: Math.min(source.dataResolution, hexagonResolution)
+      };
+    }
+    if (source.spatialDataType === 'quadbin') {
+      const quadsResolution = viewState.zoom;
+      return {
+        ...source,
+        spatialFiltersResolution: Math.min(source.dataResolution, quadsResolution)
+      };
+    }
+    return source;
+  }, [geometryToIntersect, source, viewState.zoom, viewState.latitude]);
+
   useCustomCompareEffect(
     () => {
       let outdated = false;
@@ -106,7 +149,7 @@ export default function useWidgetFetch(
       onStateChange?.({ state: WidgetStateType.Loading });
 
       modelFn({
-        source,
+        source: source2,
         ...params,
         global,
         remoteCalculation,
@@ -141,7 +184,7 @@ export default function useWidgetFetch(
     },
     [
       params,
-      source,
+      source2,
       onError,
       isSourceReady,
       global,