Widgets work on either mask or viewport

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Not released
 
+- Changed the way widget are calculated when a mask is set: use just the mask, no more intersection between mask and viewport [#661](https://github.com/CartoDB/carto-react/pull/661)
 - LegendCategories component migrated from makeStyles to styled-components + cleanup [#634](https://github.com/CartoDB/carto-react/pull/634)
 - LegendProportion component migrated from makeStyles to styled-components + cleanup [#635](https://github.com/CartoDB/carto-react/pull/635)
 - LegendRamp component migrated from makeStyles to styled-components + cleanup [#636](https://github.com/CartoDB/carto-react/pull/636)

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

@@ -7,6 +7,7 @@ import { getDataFilterExtensionProps } from './dataFilterExtensionUtil';
 import { getMaskExtensionProps } from './maskExtensionUtil';
 import FeaturesDroppedLoader from './FeaturesDroppedLoader';
 import { CLIENT_ID } from '../api/common';
+import { getGeometryToIntersect } from '@carto/react-core';
 
 const LOADERS = [FeaturesDroppedLoader];
 
@@ -19,19 +20,18 @@ export default function useCartoLayerProps({
 }) {
   const viewport = useSelector((state) => state.carto.viewport);
   const spatialFilter = useSelector((state) => selectSpatialFilter(state, source?.id));
+  const geometryToIntersect = getGeometryToIntersect(viewport, spatialFilter);
 
   const [onDataLoadForGeojson] = useGeojsonFeatures({
     source,
-    viewport,
-    spatialFilter,
+    geometryToIntersect,
     uniqueIdProperty,
     debounceTimeout: viewporFeaturesDebounceTimeout
   });
 
   const [onDataLoadForTile, onViewportLoad, fetch] = useTileFeatures({
     source,
-    viewport,
-    spatialFilter,
+    geometryToIntersect,
     uniqueIdProperty,
     debounceTimeout: viewporFeaturesDebounceTimeout
   });

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

@@ -6,8 +6,7 @@ import useFeaturesCommons from './useFeaturesCommons';
 
 export default function useGeojsonFeatures({
   source,
-  viewport,
-  spatialFilter,
+  geometryToIntersect,
   uniqueIdProperty,
   debounceTimeout = 250
 }) {
@@ -23,11 +22,11 @@ export default function useGeojsonFeatures({
   const sourceId = source?.id;
 
   const computeFeatures = useCallback(
-    ({ viewport, spatialFilter, uniqueIdProperty }) => {
+    ({ geometryToIntersect, uniqueIdProperty }) => {
       executeTask(sourceId, Methods.GEOJSON_FEATURES, {
-        viewport,
-        geometry: spatialFilter,
-        uniqueIdProperty
+        geometryToIntersect,
+        uniqueIdProperty,
+        tileFormat: undefined
       })
         .then(() => {
           setSourceFeaturesReady(true);
@@ -48,14 +47,12 @@ export default function useGeojsonFeatures({
       clearDebounce();
       setSourceFeaturesReady(false);
       debounceIdRef.current = debouncedComputeFeatures({
-        viewport,
-        spatialFilter,
+        geometryToIntersect,
         uniqueIdProperty
       });
     }
   }, [
-    viewport,
-    spatialFilter,
+    geometryToIntersect,
     uniqueIdProperty,
     sourceId,
     isGeoJsonLoaded,

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

@@ -10,8 +10,7 @@ import { useDispatch } from 'react-redux';
 
 export default function useTileFeatures({
   source,
-  viewport,
-  spatialFilter,
+  geometryToIntersect,
   uniqueIdProperty,
   debounceTimeout = 250
 }) {
@@ -32,16 +31,15 @@ export default function useTileFeatures({
   const sourceId = source?.id;
 
   const computeFeatures = useCallback(
-    ({ viewport, spatialFilter, uniqueIdProperty }) => {
+    ({ geometryToIntersect, uniqueIdProperty }) => {
       if (!tileFormat) {
         return null;
       }
 
       setSourceFeaturesReady(false);
 
       executeTask(sourceId, Methods.TILE_FEATURES, {
-        viewport,
-        geometry: spatialFilter,
+        geometryToIntersect,
         uniqueIdProperty,
         tileFormat,
         geoColumName,
@@ -101,14 +99,12 @@ export default function useTileFeatures({
       clearDebounce();
       setSourceFeaturesReady(false);
       debounceIdRef.current = debouncedComputeFeatures({
-        viewport,
-        spatialFilter,
+        geometryToIntersect,
         uniqueIdProperty
       });
     }
   }, [
-    viewport,
-    spatialFilter,
+    geometryToIntersect,
     uniqueIdProperty,
     debouncedComputeFeatures,
     sourceId,

packages/react-core/__tests__/filters/geojsonFeatures.test.js

@@ -1,18 +1,22 @@
+import bboxPolygon from '@turf/bbox-polygon';
 import { geojsonFeatures } from '../../src/filters/geojsonFeatures';
 
 describe('viewport features with geojson data', () => {
+  /** @type { import('../../src').Viewport } */
   const viewport = [-10, -10, 10, 10]; // west - south - east - north
+  const viewportGeometry = bboxPolygon(viewport).geometry;
 
   describe('return no data', () => {
     test('should return an empty array if no geojson features present', () => {
+      /** @type { import('geojson').FeatureCollection } */
       const geojson = {
         type: 'FeatureCollection',
         features: []
       };
 
       const properties = geojsonFeatures({
         geojson,
-        viewport
+        geometryToIntersect: viewportGeometry
       });
 
       expect(properties).toEqual([]);
@@ -21,6 +25,7 @@ describe('viewport features with geojson data', () => {
 
   describe('correctly returns data', () => {
     test('should handle linestrings correctly fwsf', () => {
+      /** @type { import('geojson').FeatureCollection } */
       const linestrings = {
         type: 'FeatureCollection',
         features: [...Array(3)].map((_, i) => ({
@@ -39,7 +44,7 @@ describe('viewport features with geojson data', () => {
 
       const properties = geojsonFeatures({
         geojson: linestrings,
-        viewport,
+        geometryToIntersect: viewportGeometry,
         uniqueIdProperty: 'cartodb_id'
       });
 
@@ -52,6 +57,7 @@ describe('viewport features with geojson data', () => {
     });
 
     test('should handle multilinestrings correctly', () => {
+      /** @type { import('geojson').FeatureCollection } */
       const multilinestrings = {
         type: 'FeatureCollection',
         features: [...Array(3)].map((_, i) => ({
@@ -70,7 +76,7 @@ describe('viewport features with geojson data', () => {
 
       const properties = geojsonFeatures({
         geojson: multilinestrings,
-        viewport,
+        geometryToIntersect: viewportGeometry,
         uniqueIdProperty: 'cartodb_id'
       });
 
@@ -83,6 +89,7 @@ describe('viewport features with geojson data', () => {
     });
 
     test('should handle polygons correctly', () => {
+      /** @type { import('geojson').FeatureCollection } */
       const polygons = {
         type: 'FeatureCollection',
         features: [...Array(3)].map((_, i) => ({
@@ -101,7 +108,7 @@ describe('viewport features with geojson data', () => {
 
       const properties = geojsonFeatures({
         geojson: polygons,
-        viewport,
+        geometryToIntersect: viewportGeometry,
         uniqueIdProperty: 'cartodb_id'
       });
 
@@ -114,6 +121,7 @@ describe('viewport features with geojson data', () => {
     });
 
     test('should handle multilipolygons correctly', () => {
+      /** @type { import('geojson').FeatureCollection } */
       const multipolygons = {
         type: 'FeatureCollection',
         features: [...Array(3)].map((_, i) => ({
@@ -135,7 +143,7 @@ describe('viewport features with geojson data', () => {
 
       const properties = geojsonFeatures({
         geojson: multipolygons,
-        viewport,
+        geometryToIntersect: viewportGeometry,
         uniqueIdProperty: 'cartodb_id'
       });
 
@@ -150,6 +158,7 @@ describe('viewport features with geojson data', () => {
 
   describe('with repeated features', () => {
     test('should handle points correctly', () => {
+      /** @type { import('geojson').FeatureCollection } */
       const points = {
         type: 'FeatureCollection',
         features: [...Array(4)].map(() => ({
@@ -167,14 +176,15 @@ describe('viewport features with geojson data', () => {
 
       const properties = geojsonFeatures({
         geojson: points,
-        viewport,
+        geometryToIntersect: viewportGeometry,
         uniqueIdProperty: 'cartodb_id'
       });
 
       expect(properties).toEqual([{ cartodb_id: 1, other_prop: 1 }]);
     });
 
     test('should handle linestrings correctly', () => {
+      /** @type { import('geojson').FeatureCollection } */
       const linestrings = {
         type: 'FeatureCollection',
         features: [...Array(4)].map(() => ({
@@ -193,14 +203,15 @@ describe('viewport features with geojson data', () => {
 
       const properties = geojsonFeatures({
         geojson: linestrings,
-        viewport,
+        geometryToIntersect: viewportGeometry,
         uniqueIdProperty: 'cartodb_id'
       });
 
       expect(properties).toEqual([{ cartodb_id: 1, other_prop: 1 }]);
     });
 
     test('should handle multilinestrings correctly', () => {
+      /** @type { import('geojson').FeatureCollection } */
       const multilinestrings = {
         type: 'FeatureCollection',
         features: [...Array(4)].map(() => ({
@@ -219,14 +230,15 @@ describe('viewport features with geojson data', () => {
 
       const properties = geojsonFeatures({
         geojson: multilinestrings,
-        viewport,
+        geometryToIntersect: viewportGeometry,
         uniqueIdProperty: 'cartodb_id'
       });
 
       expect(properties).toEqual([{ cartodb_id: 1, other_prop: 1 }]);
     });
 
     test('should handle polygons correctly', () => {
+      /** @type { import('geojson').FeatureCollection } */
       const polygons = {
         type: 'FeatureCollection',
         features: [...Array(4)].map(() => ({
@@ -245,14 +257,15 @@ describe('viewport features with geojson data', () => {
 
       const properties = geojsonFeatures({
         geojson: polygons,
-        viewport,
+        geometryToIntersect: viewportGeometry,
         uniqueIdProperty: 'cartodb_id'
       });
 
       expect(properties).toEqual([{ cartodb_id: 1, other_prop: 1 }]);
     });
 
     test('should handle multipolygons correctly', () => {
+      /** @type { import('geojson').FeatureCollection } */
       const multipolygons = {
         type: 'FeatureCollection',
         features: [...Array(4)].map(() => ({
@@ -274,7 +287,7 @@ describe('viewport features with geojson data', () => {
 
       const properties = geojsonFeatures({
         geojson: multipolygons,
-        viewport,
+        geometryToIntersect: viewportGeometry,
         uniqueIdProperty: 'cartodb_id'
       });