Time sync support for FeatureGrid

web/client/actions/__tests__/featuregrid-test.js

@@ -40,7 +40,8 @@ const {
     sizeChange, SIZE_CHANGE,
     START_SYNC_WMS, startSyncWMS,
     storeAdvancedSearchFilter, STORE_ADVANCED_SEARCH_FILTER,
-    setShowCurrentFilter, SET_SHOW_CURRENT_FILTER,
+    setUp, SET_UP,
+    setTimeSync, SET_TIME_SYNC,
     fatureGridQueryResult, GRID_QUERY_RESULT,
     moreFeatures, LOAD_MORE_FEATURES,
     hideSyncPopover, HIDE_SYNC_POPOVER,
@@ -296,11 +297,15 @@ describe('Test correctness of featurgrid actions', () => {
         expect(retval.pages).toBe(pages);
     });
 
-    it('Test setShowCurrentFilter', () => {
+    it('Test setUp', () => {
         const showFilteredObject = true;
-        const retval = setShowCurrentFilter(showFilteredObject);
-        expect(retval).toExist();
-        expect(retval.type).toBe(SET_SHOW_CURRENT_FILTER);
-        expect(retval.showFilteredObject).toBe(showFilteredObject);
+        expect(setUp({ showFilteredObject })).toEqual({ type: SET_UP, options: { showFilteredObject }});
+        expect(setUp({ showFilteredObject, timeSync: true })).toEqual({ type: SET_UP, options: { showFilteredObject, timeSync: true } });
+
+    });
+    it('setTimeSync', () => {
+        expect(setTimeSync(true)).toEqual({ type: SET_TIME_SYNC, value: true });
+        expect(setTimeSync(false)).toEqual({ type: SET_TIME_SYNC, value: false });
+
     });
 });

web/client/actions/dimension.js

@@ -11,7 +11,8 @@ const SET_OFFSET_TIME = "TIME_MANAGER:SET_OFFSET_TIME";
 const MOVE_TIME = "TIME_MANAGER:MOVE_TIME";
 
 /**
- *
+ * @param {string} layerId the layer Identifier
+ * @param {string} dimension the dimension name ("time", "elevation"...)
  * @param {object} data Sets the time data for a layer
  */
 const updateLayerDimensionData = (layerId, dimension, data) => ({ type: UPDATE_LAYER_DIMENSION_DATA, dimension, layerId, data });

web/client/actions/featuregrid.js

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
 */
 
-const SET_SHOW_CURRENT_FILTER = 'SET_SHOW_CURRENT_FILTER';
+const SET_UP = 'FEATUREGRID:SET_UP';
 const SELECT_FEATURES = 'FEATUREGRID:SELECT_FEATURES';
 const DESELECT_FEATURES = 'FEATUREGRID:DESELECT_FEATURES';
 const CLEAR_SELECTION = 'FEATUREGRID:CLEAR_SELECTION';
@@ -58,6 +58,7 @@ const STOP_SYNC_WMS = 'FEATUREGRID:STOP_SYNC_WMS';
 const STORE_ADVANCED_SEARCH_FILTER = 'STORE_ADVANCED_SEARCH_FILTER';
 const LOAD_MORE_FEATURES = "LOAD_MORE_FEATURES";
 const GRID_QUERY_RESULT = 'FEATUREGRID:QUERY_RESULT';
+const SET_TIME_SYNC = "FEATUREGRID:SET_TIME_SYNC";
 
 function toggleShowAgain() {
     return {
@@ -107,10 +108,15 @@ function selectFeatures(features, append) {
         append
     };
 }
-function setShowCurrentFilter(showFilteredObject) {
+
+/**
+ * Configures some options for the feature grid
+ * @param {object} options options to set up
+ */
+function setUp(options) {
     return {
-        type: SET_SHOW_CURRENT_FILTER,
-        showFilteredObject
+        type: SET_UP,
+        options
     };
 }
 function geometryChanged(features) {
@@ -336,6 +342,16 @@ const moreFeatures = (pages) => {
         pages
     };
 };
+
+/**
+ * Enables/Disables time sync for feature grid.
+ * @param {boolean} value time sync to set
+ */
+const setTimeSync = value => ({
+    type: SET_TIME_SYNC,
+    value
+});
+
 module.exports = {
     SELECT_FEATURES,
     DESELECT_FEATURES,
@@ -371,7 +387,7 @@ module.exports = {
     OPEN_FEATURE_GRID, openFeatureGrid,
     CLOSE_FEATURE_GRID_CONFIRM, closeFeatureGridConfirm,
     FEATURE_GRID_CLOSE_CONFIRMED, closeFeatureGridConfirmed,
-    SET_SHOW_CURRENT_FILTER, setShowCurrentFilter,
+    SET_UP, setUp,
     DISABLE_TOOLBAR, disableToolbar,
     OPEN_ADVANCED_SEARCH, openAdvancedSearch,
     ZOOM_ALL, zoomAll,
@@ -407,5 +423,6 @@ module.exports = {
     STOP_SYNC_WMS,
     storeAdvancedSearchFilter, STORE_ADVANCED_SEARCH_FILTER,
     moreFeatures, LOAD_MORE_FEATURES,
-    fatureGridQueryResult, GRID_QUERY_RESULT
+    fatureGridQueryResult, GRID_QUERY_RESULT,
+    setTimeSync, SET_TIME_SYNC
 };

web/client/components/data/featuregrid/toolbars/Toolbar.jsx

@@ -16,7 +16,7 @@ const getSaveMessageId = ({saving, saved}) => {
     }
     return "featuregrid.toolbar.saveChanges";
 };
-module.exports = ({events = {}, syncPopover = {showPopoverSync: true, dockSize: "32.2%"}, mode = "VIEW", showChartButton = true, selectedCount, hasChanges, hasGeometry, hasNewFeatures, isSimpleGeom, isDrawing = false, isEditingAllowed, saving = false, saved = false, isDownloadOpen, isColumnsOpen, disableToolbar, isSearchAllowed, disableDownload, displayDownload, isSyncActive = false, hasSupportedGeometry = true, disableZoomAll = false, isFilterActive = false} = {}) => {
+module.exports = ({ events = {}, syncPopover = { showPopoverSync: true, dockSize: "32.2%" }, mode = "VIEW", showChartButton = true, selectedCount, hasChanges, hasGeometry, hasNewFeatures, isSimpleGeom, isDrawing = false, isEditingAllowed, saving = false, saved = false, isDownloadOpen, isColumnsOpen, disableToolbar, isSearchAllowed, disableDownload, displayDownload, isSyncActive = false, hasSupportedGeometry = true, disableZoomAll = false, isFilterActive = false, showTimeSyncButton, timeSync} = {}) => {
     return (<ButtonGroup id="featuregrid-toolbar" className="featuregrid-toolbar featuregrid-toolbar-margin">
         <TButton
             id="edit-mode"
@@ -165,5 +165,13 @@ module.exports = ({events = {}, syncPopover = {showPopoverSync: true, dockSize:
                     }
                 }}
         } />
+        <TButton
+            id="timeSync-button"
+            keyProp="fg-timeSync-button"
+            tooltipId={timeSync ? "featuregrid.toolbar.disableTimeSync" : "featuregrid.toolbar.enableTimeSync"}
+            visible={showTimeSyncButton}
+            active={timeSync}
+            onClick={() => events.setTimeSync && events.setTimeSync(!timeSync)}
+            glyph="time" />
 
 </ButtonGroup>); };

web/client/components/data/featuregrid/toolbars/__tests__/Toolbar-test.jsx

@@ -316,6 +316,32 @@ describe('Featuregrid toolbar component', () => {
         zoomAllButton = document.getElementById("fg-zoom-all");
         expect(el.children[2].disabled).toBe(false);
     });
+    describe('time sync button', () => {
+        it('visibility', () => {
+            ReactDOM.render(<Toolbar mode="VIEW" disableZoomAll />, document.getElementById("container"));
+            expect(isVisibleButton(document.getElementById("fg-timeSync-button"))).toBe(false);
+            ReactDOM.render(<Toolbar showTimeSyncButton show mode="VIEW" disableZoomAll />, document.getElementById("container"));
+            expect(isVisibleButton(document.getElementById("fg-timeSync-button"))).toBe(true);
+        });
+        it('enabled/disabled state', () => {
+            ReactDOM.render(<Toolbar showTimeSyncButton timeSync mode="VIEW" disableZoomAll />, document.getElementById("container"));
+            expect(document.getElementById("fg-timeSync-button").className.split(' ')).toInclude('btn-success');
+            ReactDOM.render(<Toolbar showTimeSyncButton mode="VIEW" disableZoomAll />, document.getElementById("container"));
+            expect(document.getElementById("fg-timeSync-button").className.split(' ')).toNotInclude('btn-success');
+        });
+        it('handler', () => {
+            const events = {
+                setTimeSync: () => { }
+            };
+            const spy = spyOn(events, "setTimeSync");
+            ReactDOM.render(<Toolbar showTimeSyncButton timeSync events={events} mode="VIEW" disableZoomAll />, document.getElementById("container"));
+            document.getElementById("fg-timeSync-button").click();
+            expect(spy.calls[0].arguments[0]).toBe(false);
+            ReactDOM.render(<Toolbar showTimeSyncButton events={events} mode="VIEW" disableZoomAll />, document.getElementById("container"));
+            document.getElementById("fg-timeSync-button").click();
+            expect(spy.calls[1].arguments[0]).toBe(true);
+        });
+    });
     it('check chart button', () => {
         const events = {
             chart: () => {}

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

@@ -9,6 +9,8 @@
 const expect = require('expect');
 const assign = require('object-assign');
 const Proj4js = require('proj4').default;
+const { set } = require('../../utils/ImmutableUtils');
+
 const proj4 = Proj4js;
 const CoordinatesUtils = require('../../utils/CoordinatesUtils');
 const { hideMapinfoMarker, featureInfoClick} = require('../../actions/mapInfo');
@@ -41,16 +43,17 @@ const {
     moreFeatures,
     GRID_QUERY_RESULT,
     changePage,
-    sort
+    sort,
+    setTimeSync
 } = require('../../actions/featuregrid');
 const {SET_HIGHLIGHT_FEATURES_PATH} = require('../../actions/highlight');
 const {CHANGE_DRAWING_STATUS} = require('../../actions/draw');
 const {SHOW_NOTIFICATION} = require('../../actions/notifications');
 const {RESET_CONTROLS, SET_CONTROL_PROPERTY, toggleControl} = require('../../actions/controls');
 const {ZOOM_TO_EXTENT} = require('../../actions/map');
 const { CLOSE_IDENTIFY } = require('../../actions/mapInfo');
-const {toggleSyncWms, QUERY, querySearchResponse} = require('../../actions/wfsquery');
-const {CHANGE_LAYER_PROPERTIES} = require('../../actions/layers');
+const {toggleSyncWms, QUERY, querySearchResponse, query, QUERY_CREATE} = require('../../actions/wfsquery');
+const {CHANGE_LAYER_PROPERTIES, changeLayerParams} = require('../../actions/layers');
 const {geometryChanged} = require('../../actions/draw');
 
 const {layerSelectedForSearch, UPDATE_QUERY} = require('../../actions/wfsquery');
@@ -84,7 +87,8 @@ const {
     removeWmsFilterOnGridClose,
     autoReopenFeatureGridOnFeatureInfoClose,
     featureGridChangePage,
-    featureGridSort
+    featureGridSort,
+    replayOnTimeDimensionChange
 }
     = require('../featuregrid');
 
@@ -1827,5 +1831,79 @@ describe('featuregrid Epics', () => {
             }
         }));
     });
+    describe('replayOnTimeDimensionChange', () => {
+        const SEARCH_URL = '/test-url';
+        const FILTER_OBJECT = { "dummy": "object" };
+        const TEST_STATE_OPEN_BASE = {
+            layers: {
+                flat: [{
+                    id: "TEST_LAYER",
+                    title: "Test Layer",
+                    name: 'editing:polygons',
+                    params: {
+                        viewParams: "a:b"
+                    }
+                }]
+            },
+            featuregrid: {
+                pagination: {
+                    size: 10
+                },
+                open: true,
+                selectedLayer: "TEST_LAYER",
+                changes: []
+            }
+        };
+        const isSameQuery = a => {
+            expect(a.type).toBe(QUERY_CREATE);
+            expect(a.searchUrl).toBe(SEARCH_URL);
+            expect(a.filterObj).toBe(FILTER_OBJECT);
+        };
+        it('toggle on setTimeSync if FG is open', done => {
+            testEpic(replayOnTimeDimensionChange, 1, [query(SEARCH_URL, FILTER_OBJECT), setTimeSync(false)], ([a]) => {
+                isSameQuery(a);
+                done();
+            }, TEST_STATE_OPEN_BASE);
+        });
+        const TEST_STATE_CLOSED = set('featuregrid.open', false, TEST_STATE_OPEN_BASE);
+        it('do not toggle if FG is closed', done => {
+            testEpic(addTimeoutEpic(replayOnTimeDimensionChange, 10), 1, [query(SEARCH_URL, FILTER_OBJECT), setTimeSync(true)], ([a]) => {
+                expect(a.type).toBe(TEST_TIMEOUT);
+                done();
+            }, TEST_STATE_CLOSED);
+        });
+        const TEST_STATE_SYNC_ACTIVE = set('featuregrid.timeSync', true, TEST_STATE_OPEN_BASE);
+        it('toggle with time change', done => {
+            testEpic(replayOnTimeDimensionChange, 1, [query(SEARCH_URL, FILTER_OBJECT), changeLayerParams("TEST_LAYER", { time: '123' })], ([a]) => {
+                isSameQuery(a);
+                done();
+            }, TEST_STATE_SYNC_ACTIVE);
+        });
+        it('do not toggle with time change, sync disabled', done => {
+            testEpic(addTimeoutEpic(replayOnTimeDimensionChange, 10), 1, [query(SEARCH_URL, FILTER_OBJECT), changeLayerParams("TEST_LAYER", { time: '123' })], ([a]) => {
+                expect(a.type).toBe(TEST_TIMEOUT);
+                done();
+            }, TEST_STATE_OPEN_BASE);
+        });
+        it('do not toggle with time change if layer do not change time', done => {
+            testEpic(addTimeoutEpic(replayOnTimeDimensionChange, 10), 1, [query(SEARCH_URL, FILTER_OBJECT), changeLayerParams("OTHER_LAYER", { time: '123' })], ([a]) => {
+                expect(a.type).toBe(TEST_TIMEOUT);
+                done();
+            }, TEST_STATE_SYNC_ACTIVE);
+        });
+        it('do not toggle with time change if param changed is not the time', done => {
+            testEpic(addTimeoutEpic(replayOnTimeDimensionChange, 10), 1, [query(SEARCH_URL, FILTER_OBJECT), changeLayerParams("TEST_LAYER", { elevation: '123' })], ([a]) => {
+                expect(a.type).toBe(TEST_TIMEOUT);
+                done();
+            }, TEST_STATE_SYNC_ACTIVE);
+        });
+        const TEST_STATE_TIME_ACTIVE_CLOSED = set('featuregrid.timeSync', true, TEST_STATE_CLOSED);
+        it('do not toggle with time change if feature grid is closed', done => {
+            testEpic(addTimeoutEpic(replayOnTimeDimensionChange, 10), 1, [query(SEARCH_URL, FILTER_OBJECT), changeLayerParams("TEST_LAYER", { time: '123' })], ([a]) => {
+                expect(a.type).toBe(TEST_TIMEOUT);
+                done();
+            }, TEST_STATE_TIME_ACTIVE_CLOSED);
+        });
 
+    });
 });