Calculation of widget using maps API under FF (#658)

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Calculation of widget using maps API under FF [#658](https://github.com/CartoDB/carto-react/pull/658)
+
 ## 1.5
 
 ### 1.5.1 (2023-02-06)

package.json

@@ -37,7 +37,7 @@
     "lint-staged": "^10.5.3",
     "nyc": "^15.1.0",
     "patch-package": "6.4.7",
-    "quadbin": "^0.1.5",
+    "quadbin": "^0.1.9",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",

packages/react-api/src/api/model.js

@@ -9,10 +9,12 @@ const AVAILABLE_MODELS = ['category', 'histogram', 'formula', 'timeseries', 'ran
 /**
  * Execute a SQL model request.
  *
+ * @typedef { import('geojson').Polygon | import('geojson').MultiPolygon } SpatialFilter
  * @param { object } props
  * @param { string } props.model - widget's model that we want to get the data for
  * @param { object } props.source - source that owns the column
  * @param { object } props.params - widget's props
+ * @param { SpatialFilter= } props.spatialFilter - restrict widget calculation to an area
  * @param { object= } props.opts - Additional options for the HTTP request
  */
 export function executeModel(props) {
@@ -27,7 +29,7 @@ export function executeModel(props) {
     )}`
   );
 
-  const { source, model, params, opts } = props;
+  const { source, model, params, spatialFilter, opts } = props;
 
   checkCredentials(source.credentials);
 
@@ -52,13 +54,21 @@ export function executeModel(props) {
     filtersLogicalOperator
   };
 
+  if (spatialFilter) {
+    queryParams.spatialFilter = JSON.stringify(spatialFilter);
+  }
+
   const isGet = url.length + JSON.stringify(queryParams).length <= URL_LENGTH;
   if (isGet) {
     url += '?' + new URLSearchParams(queryParams).toString();
   } else {
+    // undo the JSON.stringify, @todo find a better pattern
     queryParams.params = params;
     queryParams.filters = filters;
     queryParams.queryParameters = source.queryParameters;
+    if (spatialFilter) {
+      queryParams.spatialFilter = spatialFilter;
+    }
   }
   return makeCall({
     url,

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

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
-import { selectSpatialFilter } from '@carto/react-redux';
+import { selectSpatialFilter, selectViewport } from '@carto/react-redux';
 import useGeojsonFeatures from './useGeojsonFeatures';
 import useTileFeatures from './useTileFeatures';
 import { getDataFilterExtensionProps } from './dataFilterExtensionUtil';
@@ -15,7 +15,7 @@ export default function useCartoLayerProps({
   viewportFeatures = true,
   viewporFeaturesDebounceTimeout = 250
 }) {
-  const viewport = useSelector((state) => state.carto.viewport);
+  const viewport = useSelector(selectViewport);
   const spatialFilter = useSelector((state) => selectSpatialFilter(state, source?.id));
 
   const [onDataLoadForGeojson] = useGeojsonFeatures({

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

@@ -43,27 +43,31 @@ export default function useGeojsonFeatures({
     [computeFeatures]
   );
 
-  useEffect(() => {
-    if (sourceId && isGeoJsonLoaded) {
-      clearDebounce();
-      setSourceFeaturesReady(false);
-      debounceIdRef.current = debouncedComputeFeatures({
-        viewport,
-        spatialFilter,
-        uniqueIdProperty
-      });
-    }
-  }, [
-    viewport,
-    spatialFilter,
-    uniqueIdProperty,
-    sourceId,
-    isGeoJsonLoaded,
-    debouncedComputeFeatures,
-    setSourceFeaturesReady,
-    clearDebounce,
-    debounceIdRef
-  ]);
+  useEffect(
+    () => {
+      if (sourceId && isGeoJsonLoaded) {
+        clearDebounce();
+        setSourceFeaturesReady(false);
+        debounceIdRef.current = debouncedComputeFeatures({
+          viewport,
+          spatialFilter,
+          uniqueIdProperty
+        });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      spatialFilter ? spatialFilter : viewport,
+      uniqueIdProperty,
+      sourceId,
+      isGeoJsonLoaded,
+      debouncedComputeFeatures,
+      setSourceFeaturesReady,
+      clearDebounce,
+      debounceIdRef
+    ]
+  );
 
   const onDataLoad = useCallback(
     (geojson) => {

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

@@ -97,27 +97,31 @@ export default function useTileFeatures({
     loadTiles
   ]);
 
-  useEffect(() => {
-    if (sourceId && isTilesetLoaded) {
-      clearDebounce();
-      setSourceFeaturesReady(false);
-      debounceIdRef.current = debouncedComputeFeatures({
-        viewport,
-        spatialFilter,
-        uniqueIdProperty
-      });
-    }
-  }, [
-    viewport,
-    spatialFilter,
-    uniqueIdProperty,
-    debouncedComputeFeatures,
-    sourceId,
-    isTilesetLoaded,
-    setSourceFeaturesReady,
-    clearDebounce,
-    debounceIdRef
-  ]);
+  useEffect(
+    () => {
+      if (sourceId && isTilesetLoaded) {
+        clearDebounce();
+        setSourceFeaturesReady(false);
+        debounceIdRef.current = debouncedComputeFeatures({
+          viewport,
+          spatialFilter,
+          uniqueIdProperty
+        });
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      spatialFilter ? spatialFilter : viewport,
+      uniqueIdProperty,
+      debouncedComputeFeatures,
+      sourceId,
+      isTilesetLoaded,
+      setSourceFeaturesReady,
+      clearDebounce,
+      debounceIdRef
+    ]
+  );
 
   const onViewportLoad = useCallback(
     (tiles) => {

packages/react-core/__tests__/utils/geo.test.js

@@ -0,0 +1,63 @@
+import bboxPolygon from '@turf/bbox-polygon';
+import { isGlobalViewport, getGeometryToIntersect } from '../../src/utils/geo';
+
+/** @type { import('../../src').Viewport } */
+const viewport = [-10, -10, 10, 10]; // west - south - east - north
+const viewportGeometry = bboxPolygon(viewport).geometry;
+
+/** @type { import('geojson').Polygon } */
+const filterGeometry = {
+  type: 'Polygon',
+  coordinates: [
+    [
+      [-1, -1],
+      [1, -1],
+      [1, 1],
+      [-1, 1],
+      [-1, -1]
+    ]
+  ]
+};
+
+describe('isGlobalViewport', () => {
+  const normalViewports = [
+    { v: null },
+    { v: viewport },
+    {
+      v: [-344.2596303029739, -75.05112877980663, 230.26452782294038, 75.05112877980655]
+    },
+    { v: [-125.2596303029739, -85.05112877980663, 230.26452782294038, 85.05112877980655] }
+  ];
+  const globalViewports = [
+    { v: [-344.2596303029739, -85.05112877980663, 230.26452782294038, 85.05112877980655] }
+  ];
+
+  test.each(normalViewports)('return false for normal viewports', ({ v }) => {
+    expect(!isGlobalViewport(v));
+  });
+
+  test.each(globalViewports)('return true for global viewports', ({ v }) => {
+    console.log(viewport);
+    expect(isGlobalViewport(v));
+  });
+});
+
+describe('getGeometryToIntersect', () => {
+  test('returns null in case no or invalid viewport or geometry is present', () => {
+    expect(getGeometryToIntersect(null, null)).toStrictEqual(null);
+    expect(getGeometryToIntersect([], null)).toStrictEqual(null);
+    expect(getGeometryToIntersect(null, {})).toStrictEqual(null);
+    expect(getGeometryToIntersect([], {})).toStrictEqual(null);
+  });
+
+  test('returns the viewport as geometry', () => {
+    expect(getGeometryToIntersect(viewport, null)).toStrictEqual(viewportGeometry);
+  });
+
+  test('returns the filter as geometry', () => {
+    expect(getGeometryToIntersect(null, filterGeometry)).toStrictEqual(filterGeometry);
+    expect(getGeometryToIntersect(viewport, filterGeometry)).toStrictEqual(
+      filterGeometry
+    );
+  });
+});

packages/react-core/package.json

@@ -71,6 +71,6 @@
     "@turf/boolean-within": "^6.3.0",
     "@turf/intersect": "^6.3.0",
     "h3-js": "^3.7.2",
-    "quadbin": "^0.1.5"
+    "quadbin": "^0.1.9"
   }
 }

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

@@ -1,5 +1,5 @@
 import intersects from '@turf/boolean-intersects';
-import { getGeometryToIntersect } from './tileFeatures';
+import { getGeometryToIntersect } from '../utils/geo';
 
 export function geojsonFeatures({ geojson, viewport, geometry, uniqueIdProperty }) {
   let uniqueIdx = 0;

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

@@ -1,5 +1,2 @@
 import { TileFeatures, TileFeaturesResponse } from '../types';
-import { Geometry, Feature, Polygon, MultiPolygon } from 'geojson';
-
-export function getGeometryToIntersect(viewport: number[], geometry: Geometry | null): Feature<Polygon | MultiPolygon> | null;
 export function tileFeatures(arg: TileFeatures): TileFeaturesResponse;

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

@@ -1,12 +1,7 @@
-import bboxPolygon from '@turf/bbox-polygon';
-import intersect from '@turf/intersect';
+import { getGeometryToIntersect } from '../utils/geo';
 import tileFeaturesGeometries from './tileFeaturesGeometries';
 import tileFeaturesSpatialIndex from './tileFeaturesSpatialIndex';
 
-export function getGeometryToIntersect(viewport, geometry) {
-  return geometry ? intersect(bboxPolygon(viewport), geometry) : bboxPolygon(viewport);
-}
-
 export function tileFeatures({
   tiles,
   viewport,

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

@@ -41,7 +41,7 @@ export default function tileFeaturesSpatialIndex({
     }
 
     tile.data.forEach((d) => {
-      if (cellsDictionary[d.id]) {
+      if (d.id in cellsDictionary) {
         map.set(d.id, { ...d.properties, [spatialIndexIDName]: d.id });
       }
     });

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

@@ -1,3 +1,5 @@
+import { _FeatureFlags } from '.';
+
 export {
   getRequest,
   postRequest,
@@ -13,6 +15,7 @@ export { debounce } from './utils/debounce';
 export { throttle } from './utils/throttle';
 export { randomString } from './utils/randomString';
 export { assert as _assert } from './utils/assert';
+export { getGeometryToIntersect, isGlobalViewport } from './utils/geo';
 
 export { makeIntervalComplete } from './utils/makeIntervalComplete';
 
@@ -36,3 +39,10 @@ export { groupValuesByDateColumn } from './operations/groupByDate';
 export { SpatialIndex } from './operations/constants/SpatialIndexTypes'
 
 export { FEATURE_SELECTION_MODES, EDIT_MODES, MASK_ID } from './utils/featureSelectionConstants';
+
+export {
+  Flags as _FeatureFlags,
+  hasFlag as _hasFeatureFlag,
+  setFlags as _setFeatureFlags,
+  clearFlags as _clearFeatureFlags
+} from './utils/featureFlags';

packages/react-core/src/index.js

@@ -13,6 +13,7 @@ export { debounce } from './utils/debounce';
 export { throttle } from './utils/throttle';
 export { randomString } from './utils/randomString';
 export { assert as _assert } from './utils/assert';
+export { getGeometryToIntersect, isGlobalViewport } from './utils/geo';
 
 export { makeIntervalComplete } from './utils/makeIntervalComplete';
 
@@ -47,3 +48,10 @@ export {
   EDIT_MODES,
   MASK_ID
 } from './utils/featureSelectionConstants';
+
+export {
+  Flags as _FeatureFlags,
+  hasFlag as _hasFeatureFlag,
+  setFlags as _setFeatureFlags,
+  clearFlags as _clearFeatureFlags
+} from './utils/featureFlags';

packages/react-core/src/utils/featureFlags.d.ts

@@ -0,0 +1,6 @@
+export enum Flags {
+  REMOTE_WIDGETS = '2023-remote-widgets'
+}
+export function setFlags(flags: Record<string, any> | string[]): void
+export function clearFlags(): void
+export function hasFlag(flag: string): boolean

packages/react-core/src/utils/featureFlags.js

@@ -0,0 +1,34 @@
+let featureFlags = [];
+
+export const Flags = Object.freeze({
+  REMOTE_WIDGETS: '2023-remote-widgets'
+});
+
+export function setFlags(flags) {
+  const isValidFlag = (f) => typeof f === 'string' && f;
+
+  if (Array.isArray(flags) && flags.every(isValidFlag)) {
+    featureFlags = flags;
+  } else if (
+    !Array.isArray(flags) &&
+    typeof flags === 'object' &&
+    Object.keys(flags).every(isValidFlag)
+  ) {
+    featureFlags = [];
+    for (const [flag, value] of Object.entries(flags)) {
+      if (value) {
+        featureFlags.push(flag);
+      }
+    }
+  } else {
+    throw new Error(`Invalid feature flags: ${flags}`);
+  }
+}
+
+export function clearFlags() {
+  featureFlags = [];
+}
+
+export function hasFlag(flag) {
+  return featureFlags.includes(flag);
+}

packages/react-core/src/utils/geo.d.ts

@@ -0,0 +1,6 @@
+import { Viewport } from '../types';
+import { Polygon, MultiPolygon } from 'geojson';
+
+export function getGeometryToIntersect(viewport: Viewport | null, geometry: Polygon | MultiPolygon | null): Polygon | MultiPolygon | null;
+
+export function isGlobalViewport(viewport: Viewport | null): boolean;