Fix #9208 Timeline map sync does not update for time ranges visualization

web/client/epics/__tests__/timeline-test.js

@@ -48,7 +48,8 @@ import {
     SET_SNAP_RADIO_BUTTON_ENABLED,
     AUTOSELECT,
     SELECT_TIME,
-    SET_TIME_LAYERS
+    SET_TIME_LAYERS,
+    setMapSync
 } from '../../actions/timeline';
 import { changeLayerProperties, removeNode } from '../../actions/layers';
 import { SET_CURRENT_TIME, SET_OFFSET_TIME, updateLayerDimensionData } from '../../actions/dimension';
@@ -1123,6 +1124,26 @@ describe('timeline Epics', () => {
                 done();
             }, MAPSYNC_OFF_STATE);
         });
+        it('mapSync off via action should trigger update range', done => {
+            // tests with mapsync on take around 400 ms to run, so this have to be set with a bigger time
+            // TODO: use mock-axios or other tools to speed up these tests
+            testEpic(addTimeoutEpic(updateRangeDataOnRangeChange, 500), 4, setMapSync(false), ([action1, action2, action3, action4]) => {
+                const { type: startType } = action1;
+                const { type: range1Type, range } = action2;
+                const { type: range2Type } = action3;
+                const { type: endType } = action4;
+                // first action moves the current timeline view to center the current time
+                expect(startType).toBe(LOADING);
+                expect(endType).toBe(LOADING);
+                // in this case loading fixed file of domain values causes double trigger of range data loaded with domain
+                // in real world the 2nd response is histogram. TODO: test also histogram
+                expect(range1Type).toBe(RANGE_DATA_LOADED);
+                expect(range2Type).toBe(RANGE_DATA_LOADED);
+                expect(range.start).toBe("2000-01-01T00:00:00.000Z");
+                expect(range.end).toBe("2001-12-31T00:00:00.000Z");
+                done();
+            }, MAPSYNC_OFF_STATE);
+        });
         describe('fixed domain values', () => {
             const MAPSYNC_ON_DOMAIN_VALUES_STATE = set('dimension.data.time.TEST_LAYER.domain',
                 "2000-03-01T00:00:00.000Z,2000-06-08T00:00:00.000Z"

web/client/epics/dimension.js

@@ -25,10 +25,10 @@ import { layersWithTimeDataSelector, offsetTimeSelector, currentTimeSelector } f
 import { describeDomains, getMultidimURL } from '../api/MultiDim';
 import { domainsToDimensionsObject } from '../utils/TimeUtils';
 import { pick, find, get, flatten } from 'lodash';
-
+import { expandLimitSelector } from '../selectors/timeline';
 
 const DESCRIBE_DOMAIN_OPTIONS = {
-    expandLimit: 10 // TODO: increase this limit to max client allowed
+    expandLimit: 10
 };
 
 
@@ -50,7 +50,7 @@ export const updateLayerDimensionOnCurrentTimeSelection = (action$, { getState =
  * Check the presence of Multidimensional API extension, then setup layers properly.
  * Updates also current dimension state
  */
-export const queryMultidimensionalAPIExtensionOnAddLayer = (action$) =>
+export const queryMultidimensionalAPIExtensionOnAddLayer = (action$, {getState = () => {}} = {}) =>
     action$
         .ofType(ADD_LAYER)
         .filter(
@@ -61,7 +61,7 @@ export const queryMultidimensionalAPIExtensionOnAddLayer = (action$) =>
         .map(({ layer = {} } = {}) => ({ layer, multidimURL: getMultidimURL(layer)}))
         // every add layer has it's own flow, this is why it uses
         .flatMap(({ layer = {}, multidimURL } = {}) =>
-            describeDomains(multidimURL, layer.name, undefined, DESCRIBE_DOMAIN_OPTIONS)
+            describeDomains(multidimURL, layer.name, undefined, { expandLimit: expandLimitSelector(getState()) || DESCRIBE_DOMAIN_OPTIONS.expandLimit })
                 .switchMap( domains => {
                     const dimensions = domainsToDimensionsObject(domains, multidimURL) || [];
                     if (dimensions && dimensions.length > 0) {
@@ -106,7 +106,7 @@ export const updateLayerDimensionDataOnMapLoad = (action$, {getState = () => {}}
             .concat(Observable.from(layersWithMultidim)
                 // one flow for each dimension
                 .mergeMap(l =>
-                    describeDomains(getTimeMultidimURL(l), l.name, undefined, DESCRIBE_DOMAIN_OPTIONS)
+                    describeDomains(getTimeMultidimURL(l), l.name, undefined, { expandLimit: expandLimitSelector(getState()) || DESCRIBE_DOMAIN_OPTIONS.expandLimit })
                         .switchMap( domains =>
                             Observable.from(flatten(domainsToDimensionsObject(domains, getTimeMultidimURL(l))
                                 .map(d => [

web/client/epics/timeline.js

@@ -427,11 +427,13 @@ export const updateRangeDataOnRangeChange = (action$, { getState = () => { } } =
         )
         .debounceTime(400)
         .merge(action$.ofType(UPDATE_LAYER_DIMENSION_DATA).debounceTime(50))
-        .switchMap( () => {
+        .switchMap( (action) => {
+            // we should force the range data update when we turn off the map sync
+            const resetMapSync = action.mapSync === false;
             const timeData = timeDataSelector(getState()) || {};
             const layerIds = Object.keys(timeData).filter(id => timeData[id] && timeData[id].domain
                 // when data is already fully downloaded, no need to refresh, except if the mapSync is active
-                && (isTimeDomainInterval(timeData[id].domain)) || isMapSync(getState()));
+                && (isTimeDomainInterval(timeData[id].domain)) || isMapSync(getState()) || resetMapSync);
             // update range data for every layer that need to sync with histogram/domain
             return Rx.Observable.merge(
                 ...layerIds.map(id =>

web/client/selectors/__tests__/timeline-test.js

@@ -19,7 +19,8 @@ import {
     multidimOptionsSelectorCreator,
     timelineLayersSelector,
     timelineLayersSetting,
-    timelineLayersParsedSettings
+    timelineLayersParsedSettings,
+    getTimeItems
 } from '../timeline';
 
 import { set, compose } from '../../utils/ImmutableUtils';
@@ -169,7 +170,40 @@ describe('timeline selector', () => {
         expect(timelayer[0].id).toEqual(TEST_LAYER_ID);
         expect(timelayer[0].hideInTimeline).toEqual(true);
     });
-
+    it('getTimeItems should give priority to rangeData', () => {
+        const data = {
+            source: {
+                type: 'multidim-extension',
+                version: '1.2',
+                url: '/geoserver/gwc/service/wmts'
+            },
+            name: 'time',
+            domain: '2022-06-01T00:00:00.000Z/2023-06-01T00:00:00.000Z,2023-01-01T00:00:00.000Z/2023-06-01T00:00:00.000Z,2023-01-01T00:00:00.000Z/2023-12-31T00:00:00.000Z'
+        };
+        const range = {
+            start: '2022-06-01T00:00:00.000Z',
+            end: '2024-01-09T11:07:53.218Z'
+        };
+        let timeItems = getTimeItems(data, range);
+        expect(timeItems.length).toBe(3);
+        const rangeData = {
+            range: {
+                start: '2022-06-01T00:00:00.000Z',
+                end: '2024-01-09T11:07:53.218Z'
+            },
+            histogram: {
+                values: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+                domain: '2022-06-01T00:00:00.000Z/2023-06-01T00:00:00.000Z/PT704H'
+            },
+            domain: {
+                values: [
+                    '2022-06-01T00:00:00.000Z/2023-06-01T00:00:00.000Z'
+                ]
+            }
+        };
+        timeItems = getTimeItems(data, range, rangeData);
+        expect(timeItems.length).toBe(1);
+    });
     it('itemsSelector', () => {
         const histogramItems = itemsSelector(SAMPLE_STATE_HISTOGRAM);
         expect(histogramItems.length).toBe(31);

web/client/selectors/timeline.js

@@ -130,10 +130,14 @@ export const rangeDataToItems = (rangeData = {}, range) => {
  * @param {object} rangeData object that contains domain or histogram
  */
 export const getTimeItems = (data = {}, range, rangeData) => {
+    // rangeData populates when some changes ara applied with map sync
+    // we should use this when available
+    // because represent the latest updated value
+    if (rangeData?.domain || rangeData?.histogram) {
+        return rangeDataToItems(rangeData, range);
+    }
     if (data && data.values || data && data.domain && !isTimeDomainInterval(data.domain)) {
         return valuesToItems(data.values || data.domain.split(','), range);
-    } else if (rangeData && rangeData.histogram) {
-        return rangeDataToItems(rangeData, range);
     }
     return [];
 };