[feat] Adding setAnimationConfig action (#2887)

- Added setAnimationConfig action
- Passing filter to PlaybackControls

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

src/actions/src/action-types.ts

@@ -77,6 +77,7 @@ export const ActionTypes = {
   TOGGLE_FILTER_ANIMATION: `${ACTION_PREFIX}TOGGLE_FILTER_ANIMATION`,
   UPDATE_FILTER_ANIMATION_SPEED: `${ACTION_PREFIX}UPDATE_FILTER_ANIMATION_SPEED`,
   PLAY_ANIMATION: `${ACTION_PREFIX}PLAY_ANIMATION`,
+  SET_ANIMATION_CONFIG: `${ACTION_PREFIX}SET_ANIMATION_CONFIG`,
   SET_LAYER_ANIMATION_TIME: `${ACTION_PREFIX}SET_LAYER_ANIMATION_TIME`,
   SET_LAYER_ANIMATION_TIME_CONFIG: `${ACTION_PREFIX}SET_LAYER_ANIMATION_TIME_CONFIG`,
   UPDATE_ANIMATION_SPEED: `${ACTION_PREFIX}UPDATE_ANIMATION_SPEED`,

src/actions/src/vis-state-actions.ts

@@ -22,7 +22,9 @@ import {
   ParsedConfig,
   ParsedLayer,
   EffectPropsPartial,
-  SyncTimelineMode
+  SyncTimelineMode,
+  AnimationConfig,
+  FilterAnimationConfig
 } from '@kepler.gl/types';
 import {createAction} from '@reduxjs/toolkit';
 
@@ -979,6 +981,23 @@ export function updateFilterAnimationSpeed(
   };
 }
 
+export type SetAnimationConfigUpdaterAction = {
+  config: AnimationConfig | FilterAnimationConfig;
+};
+/**
+ * Set animation config: works with both layer animation and filter animation
+ * @param config
+ * @returns action
+ */
+export function setAnimationConfig(
+  config: AnimationConfig | FilterAnimationConfig
+): Merge<SetAnimationConfigUpdaterAction, {type: typeof ActionTypes.SET_ANIMATION_CONFIG}> {
+  return {
+    type: ActionTypes.SET_ANIMATION_CONFIG,
+    config
+  };
+}
+
 export type SetLayerAnimationTimeUpdaterAction = {
   value: number | null;
 };

src/components/src/common/animation-control/animation-control.tsx

@@ -6,7 +6,7 @@ import styled from 'styled-components';
 import classnames from 'classnames';
 
 import {media} from '@kepler.gl/styles';
-import {Timeline} from '@kepler.gl/types';
+import {Timeline, Filter} from '@kepler.gl/types';
 
 import TimelineSliderFactory from '../timeline-slider';
 import PlaybackControlsFactory from './playback-controls';
@@ -68,6 +68,7 @@ const AnimationWidgetInner = styled.div`
 const TIMELINE_PLAYBACK_STYLE = {flex: 1};
 
 export type AnimationControlProps = {
+  filter?: Filter;
   timeline?: Timeline;
   isAnimatable?: boolean;
   isAnimating?: boolean;
@@ -95,6 +96,7 @@ function AnimationControlFactory(
   TimelineSlider: ReturnType<typeof TimelineSliderFactory>
 ) {
   const AnimationControl: React.FC<AnimationControlProps> = ({
+    filter,
     className,
     style,
     isAnimatable,
@@ -135,6 +137,7 @@ function AnimationControlFactory(
           {showControls ? (
             <PlaybackControls
               className="animation-control-playpause"
+              filter={filter}
               isAnimatable={isAnimatable}
               startAnimation={toggleAnimation}
               isAnimating={isAnimating}

src/components/src/common/animation-control/playback-controls.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import classnames from 'classnames';
 import {Reset, Play, Pause, Save, Rocket, AnchorWindow, FreeWindow} from '../icons';
 import {ANIMATION_WINDOW} from '@kepler.gl/constants';
+import {Filter} from '@kepler.gl/types';
 import AnimationSpeedSliderFactory from './animation-speed-slider';
 import WindowActionControlFactory from './window-action-control';
 import AnimationWindowControlFactory, {AnimationItem} from './animation-window-control';
@@ -58,6 +59,7 @@ const DEFAULT_ANIMATE_ITEMS = {
   }
 };
 export interface PlaybackControlsProps {
+  filter?: Filter;
   isAnimatable?: boolean;
   isAnimating?: boolean;
   width?: number;
@@ -102,6 +104,7 @@ function PlaybackControlsFactory(
 
   // eslint-disable-next-line complexity
   const PlaybackControls: React.FC<PlaybackControlsProps> = ({
+    filter,
     isAnimatable,
     isAnimating = true,
     width,
@@ -154,6 +157,7 @@ function PlaybackControlsFactory(
             animationItems={animationItems}
             animationWindow={animationWindow}
             buttonHeight={buttonHeight}
+            filter={filter}
             setFilterAnimationWindow={setFilterAnimationWindow}
             updateAnimationSpeed={updateAnimationSpeed}
             isAnimating={isAnimating}

src/reducers/src/vis-state-updaters.ts

@@ -41,7 +41,8 @@ import {
   setFilter,
   processFileContent,
   fitBounds as fitMapBounds,
-  toggleLayerForMap
+  toggleLayerForMap,
+  applyFilterConfig
 } from '@kepler.gl/actions';
 
 // Utils
@@ -69,7 +70,8 @@ import {
   set,
   updateFilterPlot,
   removeFilterPlot,
-  isLayerAnimatable
+  isLayerAnimatable,
+  isSideFilter
 } from '@kepler.gl/utils';
 import {generateHashId, toArray} from '@kepler.gl/common-utils';
 // Mergers
@@ -117,6 +119,7 @@ import {
   Filter,
   InteractionConfig,
   AnimationConfig,
+  FilterAnimationConfig,
   Editor,
   Field,
   TimeRangeFilter
@@ -1529,6 +1532,35 @@ export const toggleFilterAnimationUpdater = (
   filters: state.filters.map((f, i) => (i === action.idx ? {...f, isAnimating: !f.isAnimating} : f))
 });
 
+export function isFilterAnimationConfig(config: AnimationConfig | FilterAnimationConfig): boolean {
+  return 'dataId' in config && 'animationWindow' in config;
+}
+
+export function setAnimationConfigUpdater(
+  state: VisState,
+  action: VisStateActions.SetAnimationConfigUpdaterAction
+): VisState {
+  const {config} = action;
+  if (isFilterAnimationConfig(config)) {
+    // Find filter used for animation
+    // Assuming there's only one filter used for animation, see setFilterViewUpdater
+    const filter = state.filters.find(f => !isSideFilter(f));
+    if (!filter) {
+      return state;
+    }
+    const newFilter = {...filter, ...config};
+    return applyFilterConfigUpdater(state, applyFilterConfig(filter.id, newFilter));
+  } else {
+    return {
+      ...state,
+      animationConfig: {
+        ...state.animationConfig,
+        ...config
+      }
+    };
+  }
+}
+
 /**
  * @memberof visStateUpdaters
  * @public

src/reducers/src/vis-state.ts

@@ -95,6 +95,8 @@ const actionHandler = {
 
   [ActionTypes.UPDATE_FILTER_ANIMATION_SPEED]: visStateUpdaters.updateFilterAnimationSpeedUpdater,
 
+  [ActionTypes.SET_ANIMATION_CONFIG]: visStateUpdaters.setAnimationConfigUpdater,
+
   [ActionTypes.SET_LAYER_ANIMATION_TIME]: visStateUpdaters.setLayerAnimationTimeUpdater,
 
   [ActionTypes.UPDATE_LAYER_ANIMATION_SPEED]: visStateUpdaters.updateLayerAnimationSpeedUpdater,

src/types/reducers.d.ts

@@ -260,6 +260,17 @@ export type AnimationConfig = {
   hideControl?: boolean;
 };
 
+export type FilterAnimationConfig = Pick<
+  TimeRangeFilter,
+  | 'dataId'
+  | 'value'
+  | 'animationWindow'
+  | 'speed'
+  | 'syncedWithLayerTimeline'
+  | 'syncTimelineMode'
+  | 'timezone'
+>;
+
 export type Timeline = {
   domain: [number, number] | null;
   value: number | [number, number];