Freeze widgets during time-series animation

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Not released
 
+- Freeze widgets during time-series animation [#804](https://github.com/CartoDB/carto-react/pull/804)
+
 ## 2.3
 
 ### 2.3.1 (2023-11-27)

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

@@ -6,7 +6,7 @@ export const getApplicableFilters = (filters = {}, owner) => {
   Object.entries(filters).forEach(([column, filter]) => {
     const filterCopy = {};
     Object.keys(filter)
-      .filter((operator) => filter[operator].owner !== owner)
+      .filter((operator) => filter[operator].owner !== owner && !filter[operator].ignore)
       .forEach((operator) => (filterCopy[operator] = { ...filter[operator] }));
 
     if (Object.keys(filterCopy).length) {

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

@@ -8,7 +8,7 @@ import { Feature, Polygon, MultiPolygon } from 'geojson';
 type FilterValues = string[] | number[] | number[][]
 
 export type SourceFilters = {
-  [column: string]: Partial<Record<_FilterTypes, { values: FilterValues; owner?: string; params?: Record<string, unknown>; }>>
+  [column: string]: Partial<Record<_FilterTypes, { values: FilterValues; owner?: string; params?: Record<string, unknown>; ignore?: boolean }>>
 }
 
 type Source = SourceProps & {
@@ -31,6 +31,7 @@ type FilterBasic = {
   values: FilterValues;
   owner?: string;
   params?: Record<string, unknown>;
+  ignore?: boolean;
 };
 
 type FilterCommonProps = {

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

@@ -136,7 +136,7 @@ export const createCartoSlice = (initialState) => {
         }
       },
       addFilter: (state, action) => {
-        const { id, column, type, values, owner, params } = action.payload;
+        const { id, column, type, values, owner, params, ignore } = action.payload;
         const source = state.dataSources[id];
 
         if (source) {
@@ -148,7 +148,7 @@ export const createCartoSlice = (initialState) => {
             source.filters[column] = {};
           }
 
-          source.filters[column][type] = { values, owner, params };
+          source.filters[column][type] = { values, owner, params, ignore };
         }
       },
       removeFilter: (state, action) => {
@@ -326,10 +326,11 @@ export const removeSpatialFilter = (sourceId) => ({
  * @param {array} data.values -  values for the filter (eg: ['a', 'b'] for IN or [10, 20] for BETWEEN).
  * @param {string} data.owner - (optional) id of the widget triggering the filter (to be excluded).
  * @param {object=} data.params - (optional) additional filter parameters.
+ * * @param {string} data.ignore - (optional) boolean indicating that it should be ignored by other widgets.
  */
-export const addFilter = ({ id, column, type, values, owner, params }) => ({
+export const addFilter = ({ id, column, type, values, owner, params, ignore }) => ({
   type: 'carto/addFilter',
-  payload: { id, column, type, values, owner, params }
+  payload: { id, column, type, values, owner, params, ignore }
 });
 
 /**

packages/react-widgets/src/widgets/TimeSeriesWidget.js

@@ -13,7 +13,8 @@ import {
   AggregationTypes,
   _FilterTypes as FilterTypes,
   _hasFeatureFlag,
-  _FeatureFlags
+  _FeatureFlags,
+  debounce
 } from '@carto/react-core';
 import { capitalize, Menu, MenuItem, SvgIcon } from '@mui/material';
 import { PropTypes } from 'prop-types';
@@ -48,6 +49,8 @@ function calculateNextStep(time, stepType, stepMultiplier = 1) {
 
 const EMPTY_ARRAY = [];
 
+const debounceTimeout = 250;
+
 /**
  * Renders a <TimeSeriesWidget /> component
  * @param  {object} props
@@ -143,6 +146,7 @@ function TimeSeriesWidget({
   const dispatch = useDispatch();
 
   const [selectedStepSize, setSelectedStepSize] = useState(stepSize);
+  const [isRunningAnimation, setIsRunningAnimation] = useState(false);
 
   const selectedCategories =
     useWidgetFilterValues({
@@ -247,7 +251,8 @@ function TimeSeriesWidget({
             type: FilterTypes.TIME,
             values: [timeWindow.map((date) => date.getTime?.() || date)],
             params: { offsetBy: minTime },
-            owner: id
+            owner: id,
+            ...(isRunningAnimation && { ignore: true })
           })
         );
       } else {
@@ -262,7 +267,21 @@ function TimeSeriesWidget({
 
       if (onTimeWindowUpdate) onTimeWindowUpdate(timeWindow);
     },
-    [isLoading, dispatch, dataSource, column, minTime, id, onTimeWindowUpdate]
+    [
+      isLoading,
+      onTimeWindowUpdate,
+      dispatch,
+      dataSource,
+      column,
+      minTime,
+      id,
+      isRunningAnimation
+    ]
+  );
+
+  const handleTimeWindowUpdateDebounced = useMemo(
+    () => debounce(handleTimeWindowUpdate, debounceTimeout),
+    [handleTimeWindowUpdate]
   );
 
   const handleTimelineUpdate = useCallback(
@@ -282,7 +301,8 @@ function TimeSeriesWidget({
               [moment, calculateNextStep(moment, selectedStepSize, stepMultiplier) - 1]
             ],
             params: { offsetBy: minTime },
-            owner: id
+            owner: id,
+            ...(isRunningAnimation && { ignore: true })
           })
         );
       } else {
@@ -300,17 +320,23 @@ function TimeSeriesWidget({
     [
       isLoading,
       data,
+      onTimelineUpdate,
       dispatch,
       dataSource,
       column,
       selectedStepSize,
       stepMultiplier,
       minTime,
       id,
-      onTimelineUpdate
+      isRunningAnimation
     ]
   );
 
+  const handleTimelineUpdateDebounced = useMemo(
+    () => debounce(handleTimelineUpdate, debounceTimeout),
+    [handleTimelineUpdate]
+  );
+
   const handleSelectedCategoriesChange = useCallback(
     (newSelectedCategories) => {
       if (!splitByCategory || !newSelectedCategories) return;
@@ -339,17 +365,28 @@ function TimeSeriesWidget({
   );
 
   const handleStop = useCallback(() => {
+    setIsRunningAnimation(false);
+    // The onStop must be executed before the removeFilter to avoid repeated Maps API calls in Builder
+    if (onStop) onStop();
     dispatch(
       removeFilter({
         id: dataSource,
         column,
         owner: id
       })
     );
-
-    if (onStop) onStop();
   }, [column, dataSource, id, dispatch, onStop]);
 
+  const handlePlay = () => {
+    setIsRunningAnimation(true);
+    if (onPlay) onPlay();
+  };
+
+  const handlePause = () => {
+    setIsRunningAnimation(false);
+    if (onPause) onPause();
+  };
+
   const [anchorEl, setAnchorEl] = useState(null);
 
   const handleOpenStepSizeMenu = (e) => {
@@ -412,13 +449,19 @@ function TimeSeriesWidget({
               showControls={showControls}
               animation={animation}
               isPlaying={isPlaying}
-              onPlay={onPlay}
+              onPlay={handlePlay}
               isPaused={isPaused}
-              onPause={onPause}
+              onPause={handlePause}
               onStop={handleStop}
-              onTimelineUpdate={handleTimelineUpdate}
+              onTimelineUpdate={
+                isRunningAnimation ? handleTimelineUpdate : handleTimelineUpdateDebounced
+              }
               timeWindow={timeWindow}
-              onTimeWindowUpdate={handleTimeWindowUpdate}
+              onTimeWindowUpdate={
+                isRunningAnimation
+                  ? handleTimeWindowUpdate
+                  : handleTimeWindowUpdateDebounced
+              }
               selectedCategories={selectedCategories}
               onSelectedCategoriesChange={
                 splitByCategory ? handleSelectedCategoriesChange : undefined