[fix] Time Sync fixes and tests (#2771)

- [fix] Fixed time range filter panel dataset field overflow
- [test] Added more time filter/layer tests for time filter animation update action
- [fix] Loading synced filter value correctly

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

src/components/src/common/range-slider.tsx

@@ -250,10 +250,10 @@ export default function RangeSliderFactory(
       const hasPlot = plotType?.type;
 
       const value = this.props.plotValue || this.filterValueSelector(this.props);
-      const scaledValue = range
-        ? // TODO figure out correct types for value and range
-          scaleSourceDomainToDestination(value as [number, number], range as [number, number])
-        : [0, 0];
+      const scaledValue =
+        timelines?.length && range
+          ? scaleSourceDomainToDestination(value as [number, number], range as [number, number])
+          : [0, 0];
       const commonPadding = `${Number(sliderHandleWidth) / 2}px`;
       return (
         <div

src/components/src/filters/filter-panels/filter-synced-dataset-panel.tsx

@@ -23,11 +23,6 @@ const TrashIcon = styled(Trash)`
 `;
 
 const SyncedDatasetsArea = styled.div`
-  display: grid;
-  align-items: center;
-  grid-auto-rows: min-content;
-  grid-auto-flow: row;
-
   .side-panel-section {
     margin-bottom: 0;
   }

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

@@ -956,18 +956,8 @@ export function setFilterAnimationTimeUpdater(
   state: VisState,
   action: VisStateActions.SetFilterAnimationTimeUpdaterAction
 ): VisState {
-  let newState = setFilterUpdater(state, action);
-  const {idx} = action;
-  const filter = newState.filters[idx];
-  if ((filter as TimeRangeFilter).syncedWithLayerTimeline) {
-    const timelineValue = getTimelineFromTrip(filter);
-    const value = state.animationConfig.timeSteps
-      ? snapToMarks(timelineValue, state.animationConfig.timeSteps)
-      : timelineValue;
-    newState = setLayerAnimationTimeUpdater(newState, {value});
-  }
-
-  return newState;
+  const newState = setFilterUpdater(state, action);
+  return adjustAnimationConfigWithFilter(newState, action.idx);
 }
 
 /**
@@ -2785,9 +2775,18 @@ export function updateAnimationDomain<S extends VisState>(state: S): S {
   };
 
   // reset currentTime based on new domain
-  const currentTime = isInRange(state.animationConfig.currentTime, mergedDomain)
+  const syncedFilter = state.filters?.find(f => (f as TimeRangeFilter).syncedWithLayerTimeline) as
+    | TimeRangeFilter
+    | undefined;
+
+  // if synced filter exist wee need to merge animationConfig and filter domains
+  // and validate the current time against the new merged domain
+  const newAnimationDomain = syncedFilter
+    ? mergeTimeDomains([mergedDomain, syncedFilter.domain])
+    : mergedDomain;
+  const currentTime = isInRange(state.animationConfig.currentTime, newAnimationDomain)
     ? state.animationConfig.currentTime
-    : mergedDomain[0];
+    : newAnimationDomain[0];
 
   if (currentTime !== state.animationConfig.currentTime) {
     // if currentTime changed, need to call animationTimeUpdater to re call formatLayerData
@@ -3266,8 +3265,12 @@ export function syncTimeFilterWithLayerTimelineUpdater<S extends VisState>(
       mode: getSyncAnimationMode(newFilter)
     });
 
+    newFilter = newState.filters[filterIdx] as TimeRangeFilter;
+
     // set the animation config value to match filter value
-    return setLayerAnimationTimeUpdater(newState, {value: newState.filters[filterIdx].value[0]});
+    return setLayerAnimationTimeUpdater(newState, {
+      value: newFilter.value[newFilter.syncTimelineMode]
+    });
   }
 
   // set domain and step
@@ -3316,9 +3319,14 @@ export function setTimeFilterTimelineModeUpdater<S extends VisState>(
 ) {
   const {id: filterId, mode: syncTimelineMode} = action;
 
-  const filter = state.filters.find(f => f.id === filterId) as TimeRangeFilter | undefined;
+  const filterIdx = state.filters.findIndex(f => f.id === filterId);
+  if (filterIdx === -1) {
+    return state;
+  }
+
+  const filter = state.filters[filterIdx] as TimeRangeFilter;
 
-  if (!filter || !validateSyncAnimationMode(filter, syncTimelineMode)) {
+  if (!validateSyncAnimationMode(filter, syncTimelineMode)) {
     return state;
   }
 
@@ -3327,13 +3335,27 @@ export function setTimeFilterTimelineModeUpdater<S extends VisState>(
     syncTimelineMode
   };
 
-  return {
+  const newState = {
     ...state,
     filters: swap_<Filter>(newFilter)(state.filters)
   };
+
+  return adjustAnimationConfigWithFilter(newState, filterIdx);
+}
+
+function adjustAnimationConfigWithFilter(state, filterIdx) {
+  const filter = state.filters[filterIdx];
+  if (filter.syncedWithLayerTimeline) {
+    const timelineValue = getTimelineValueFromFilter(filter);
+    const value = state.animationConfig.timeSteps
+      ? snapToMarks(timelineValue, state.animationConfig.timeSteps)
+      : timelineValue;
+    return setLayerAnimationTimeUpdater(state, {value});
+  }
+  return state;
 }
 
-function getTimelineFromTrip(filter) {
+function getTimelineValueFromFilter(filter) {
   return filter.value[filter.syncTimelineMode];
 }
 

src/utils/src/filter-utils.ts

@@ -1103,7 +1103,7 @@ export function validateFiltersUpdateDatasets<
   // TODO Better Typings here
   const validated: any[] = [];
   const failed: any[] = [];
-  const {datasets} = state;
+  const {datasets, layers} = state;
   let updatedDatasets = datasets;
 
   // merge filters
@@ -1119,15 +1119,15 @@ export function validateFiltersUpdateDatasets<
         applyToDatasets: string[];
         augmentedDatasets: {[datasetId: string]: any};
       }>(
-        (acc, datasetId, idx) => {
+        (acc, datasetId) => {
           const dataset = updatedDatasets[datasetId];
-          const layers = state.layers.filter(l => l.config.dataId === dataset.id);
+          const datasetLayers = layers.filter(l => l.config.dataId === dataset.id);
           const toValidate = acc.validatedFilter || filterToValidate;
 
           const {filter: updatedFilter, dataset: updatedDataset} = validateFilterWithData(
             acc.augmentedDatasets[datasetId] || dataset,
             toValidate,
-            layers
+            datasetLayers
           );
 
           if (updatedFilter) {
@@ -1154,7 +1154,20 @@ export function validateFiltersUpdateDatasets<
       );
 
       if (validatedFilter && isEqual(datasetIds, applyToDatasets)) {
-        validatedFilter.value = adjustValueToFilterDomain(filterToValidate.value, validatedFilter);
+        let domain = validatedFilter.domain;
+        if ((validatedFilter as TimeRangeFilter).syncedWithLayerTimeline) {
+          const animatableLayers = getAnimatableVisibleLayers(layers);
+          domain = mergeTimeDomains([
+            ...animatableLayers.map(l => l.config.animation.domain || [0, 0]),
+            validatedFilter.domain
+          ]);
+        }
+
+        validatedFilter.value = adjustValueToFilterDomain(filterToValidate.value, {
+          ...validatedFilter,
+          domain
+        });
+
         validated.push(updateFilterPlot(datasets, validatedFilter));
         updatedDatasets = {
           ...updatedDatasets,