Calculation of widget using maps API

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';
@@ -18,7 +18,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 geometryToIntersect = getGeometryToIntersect(viewport, spatialFilter);
 

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

@@ -33,6 +33,8 @@ describe('getGeometryToIntersect', () => {
   test('returns null in case no 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', () => {

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

@@ -16,7 +16,7 @@ import tileFeaturesSpatialIndex from './tileFeaturesSpatialIndex';
  * @returns { Geometry? } the geometry to use for filtering
  */
 export function getGeometryToIntersect(viewport, spatialFilter) {
-  return spatialFilter
+  return spatialFilter && spatialFilter.geometry
     ? spatialFilter.geometry
     : Array.isArray(viewport) && viewport.length === 4
     ? bboxPolygon(viewport).geometry

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

@@ -1,3 +1,5 @@
+import { _FeatureFlags } from '.';
+
 export {
   getRequest,
   postRequest,
@@ -38,7 +40,8 @@ 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';
+} from './utils/featureFlags';

packages/react-core/src/index.js

@@ -49,6 +49,7 @@ export {
 } from './utils/featureSelectionConstants';
 
 export {
+  Flags as _FeatureFlags,
   hasFlag as _hasFeatureFlag,
   setFlags as _setFeatureFlags,
   clearFlags as _clearFeatureFlags

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

@@ -1,3 +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

@@ -1,5 +1,9 @@
 let featureFlags = [];
 
+export const Flags = Object.freeze({
+  REMOTE_WIDGETS: '2023-remote-widgets'
+});
+
 export function setFlags(flags) {
   const isValidFlag = (f) => typeof f === 'string' && f;
 

packages/react-redux/src/slices/cartoSlice.d.ts

@@ -1,6 +1,6 @@
 import { Credentials } from '@carto/react-api/';
 import { SourceProps } from '@carto/react-api/types';
-import { FiltersLogicalOperators, _FilterTypes } from '@carto/react-core';
+import { FiltersLogicalOperators, Viewport, _FilterTypes } from '@carto/react-core';
 import { CartoBasemapsNames, GMapsBasemapsNames } from '@carto/react-basemaps/';
 import { InitialCartoState, CartoState, ViewState } from '../types';
 import { AnyAction, Reducer } from 'redux';
@@ -159,6 +159,8 @@ export function setFeatureSelectionEnabled(enabled: boolean): {
   payload: boolean;
 };
 
+export function selectViewport(state: any): Viewport | null;
+
 export function selectSpatialFilter(state: any, sourceId?: string): Feature<Polygon | MultiPolygon> | null;
 
 export function selectFeatureSelectionMode(state: any): string | null;

packages/react-redux/src/slices/cartoSlice.js

@@ -336,6 +336,13 @@ export const selectSourceById = (state, id) => state.carto.dataSources[id];
 export const checkIfSourceIsDroppingFeature = (state, id) =>
   state.carto.dataSources[id]?.isDroppingFeatures;
 
+/**
+ * Redux selector to select the active viewport
+ */
+export const selectViewport = (state) => {
+  return state.carto.viewport ? state.carto.viewport : null;
+};
+
 /**
  * Redux selector to select the spatial filter of a given sourceId or the root one
  */

packages/react-ui/src/widgets/TimeSeriesWidgetUI/TimeSeriesWidgetUI.js

@@ -307,13 +307,7 @@ function TimeSeriesWidgetUIContent({
             <Typography color='textSecondary' variant='caption'>
               {currentDate}
             </Typography>
-            <Typography
-              xs
-              fontSize={12}
-              ml={1}
-              color='textSecondary'
-              variant='caption'
-            >
+            <Typography xs fontSize={12} ml={1} color='textSecondary' variant='caption'>
               ({capitalize(stepSize)})
             </Typography>
           </Box>

packages/react-widgets/__tests__/hooks/useWidgetFetch.test.js

@@ -3,23 +3,47 @@ import { DEFAULT_INVALID_COLUMN_ERR } from '../../src/widgets/utils/constants';
 import { act, render, screen } from '@testing-library/react';
 import React from 'react';
 import useWidgetFetch from '../../src/hooks/useWidgetFetch';
-import { mockReduxHooks } from '../mockReduxHooks';
+import { mockClear, mockReduxHooks, mockSetup } from '../mockReduxHooks';
+import { selectViewport } from '@carto/react-redux';
+import bboxPolygon from '@turf/bbox-polygon';
 
 const PARAMS_MOCK = {
   column: '__test__'
 };
 
 const SOURCE_MOCK = {
   id: 'test',
-  data: 'testTable'
+  data: 'testTable',
+  type: 'table',
+  credentials: {
+    apiVersion: 'v3'
+  }
 };
 
+const viewport = [-10, -5, 8, 9];
+const spatialFilter = bboxPolygon([-10, -5, 8, 9]).geometry;
+
 jest.mock('../../src/hooks/useWidgetSource', () => () => SOURCE_MOCK);
 
 describe('useWidgetFetch', () => {
-  mockReduxHooks();
+  beforeAll(() => {
+    const { useDispatch, useSelector } = mockSetup();
+    const defaultSelector = jest.fn();
+
+    useDispatch.mockReturnValue(jest.fn());
+    useSelector.mockImplementation((selector) => {
+      if (selector === selectViewport) {
+        return viewport;
+      }
+      return defaultSelector;
+    });
+  });
 
-  test('should work correctly', async () => {
+  afterAll(() => {
+    mockClear();
+  });
+
+  it('should work correctly (no remote attempt)', async () => {
     const onError = jest.fn();
     const modelFn = jest
       .fn()
@@ -35,6 +59,7 @@ describe('useWidgetFetch', () => {
           dataSource: 'test',
           params: PARAMS_MOCK,
           global: false,
+          attemptRemoteCalculation: false,
           onError
         }}
       />
@@ -44,7 +69,9 @@ describe('useWidgetFetch', () => {
     expect(modelFn).toBeCalledWith({
       source: SOURCE_MOCK,
       ...PARAMS_MOCK,
-      global: false
+      global: false,
+      remoteCalculation: false,
+      spatialFilter: spatialFilter
     });
 
     expect(screen.getByText('loading')).toBeInTheDocument();
@@ -65,6 +92,7 @@ describe('useWidgetFetch', () => {
           dataSource: 'test',
           params: PARAMS_MOCK,
           global: true,
+          attemptRemoteCalculation: false,
           onError
         }}
       />
@@ -74,7 +102,9 @@ describe('useWidgetFetch', () => {
     expect(modelFn).toBeCalledWith({
       source: SOURCE_MOCK,
       ...PARAMS_MOCK,
-      global: true
+      global: true,
+      remoteCalculation: false,
+      spatialFilter: null // never in global mode
     });
 
     expect(screen.getByText('loading')).toBeInTheDocument();
@@ -93,6 +123,7 @@ describe('useWidgetFetch', () => {
           dataSource: 'test',
           params: PARAMS_MOCK,
           global: false,
+          remoteCalculation: false,
           onError
         }}
       />
@@ -104,6 +135,70 @@ describe('useWidgetFetch', () => {
     expect(onError).toBeCalledTimes(1);
     expect(screen.queryByText(DEFAULT_INVALID_COLUMN_ERR)).toBeInTheDocument();
   });
+
+  it('should work correctly (non-global, remote attempt)', async () => {
+    const onError = jest.fn();
+    const modelFn = jest
+      .fn()
+      .mockImplementation(
+        () => new Promise((resolve) => setTimeout(() => resolve('data'), 100))
+      );
+
+    const { rerender } = render(
+      <TestComponent
+        modelFn={modelFn}
+        args={{
+          id: 'test',
+          dataSource: 'test',
+          params: PARAMS_MOCK,
+          global: false,
+          attemptRemoteCalculation: true,
+          onError
+        }}
+      />
+    );
+
+    // Test modelFn is called with the right params
+    expect(modelFn).toBeCalledWith({
+      source: SOURCE_MOCK,
+      ...PARAMS_MOCK,
+      global: false,
+      remoteCalculation: true,
+      spatialFilter: spatialFilter
+    });
+  });
+
+  it('should work correctly (global, remote attempt)', async () => {
+    const onError = jest.fn();
+    const modelFn = jest
+      .fn()
+      .mockImplementation(
+        () => new Promise((resolve) => setTimeout(() => resolve('data'), 100))
+      );
+
+    const { rerender } = render(
+      <TestComponent
+        modelFn={modelFn}
+        args={{
+          id: 'test',
+          dataSource: 'test',
+          params: PARAMS_MOCK,
+          global: true,
+          attemptRemoteCalculation: true,
+          onError
+        }}
+      />
+    );
+
+    // Test modelFn is called with the right params
+    expect(modelFn).toBeCalledWith({
+      source: SOURCE_MOCK,
+      ...PARAMS_MOCK,
+      global: true,
+      remoteCalculation: true,
+      spatialFilter: null // no spatial filter for glboal case
+    });
+  });
 });
 
 // Aux

packages/react-widgets/__tests__/mockReduxHooks.js

@@ -11,6 +11,10 @@ export function mockReduxHooks(dispatchValue, selectorValue) {
   useSelectorSpy.mockReturnValue(mockSelectorFn);
 }
 
+export function mockSetup() {
+  return { useDispatch: useDispatchSpy, useSelector: useSelectorSpy };
+}
+
 export function mockClear() {
   useDispatchSpy.mockClear();
   useSelectorSpy.mockClear();

packages/react-widgets/__tests__/models/utils.test.js

@@ -41,19 +41,34 @@ const fromRemote = jest.fn();
 
 describe('utils', () => {
   describe('wrapModelCall', () => {
-    test('should work correctly', () => {
-      const props = { source: V2_SOURCE, global: false };
-      wrapModelCall(props, fromLocal, fromRemote);
-      expect(fromLocal).toHaveBeenCalledWith(props);
+    const cases = [
+      // source, global, remoteCalculation, expectedFn
+      [V2_SOURCE, false, false, fromLocal],
+      [V3_SOURCE, false, false, fromLocal],
+      [V3_SOURCE, true, false, fromRemote],
+      [V2_SOURCE, false, true, fromLocal],
+      [V3_SOURCE, false, true, fromRemote],
+      [V3_SOURCE, true, true, fromRemote]
+    ];
+
+    test.each(cases)(
+      'should work correctly',
+      (source, global, remoteCalculation, expectedFn) => {
+        const props = { source, global, remoteCalculation };
+        wrapModelCall(props, fromLocal, fromRemote);
+        expect(expectedFn).toHaveBeenCalledWith(props);
+      }
+    );
 
-      const props2 = { source: V3_SOURCE, global: true };
-      wrapModelCall(props2, fromLocal, fromRemote);
-      expect(fromRemote).toHaveBeenCalledWith(props2);
+    test('should throw error if global is true but fromRemote is missing', () => {
+      expect(() =>
+        wrapModelCall({ source: V3_SOURCE, global: true }, fromLocal)
+      ).toThrowError();
     });
 
-    test('should throw error if global is true but fromRemote is missing', () => {
+    test('should throw error if remoteCalculation is true but fromRemote is missing', () => {
       expect(() =>
-        wrapModelCall({ source: V2_SOURCE, global: true }, fromLocal)
+        wrapModelCall({ source: V3_SOURCE, remoteCalculation: true }, fromLocal)
       ).toThrowError();
     });