Fix #1392 added viewport into spatial filter list (#1822)

* Fix #1392 added viewport into spatial filter list * Fixed pagination of docker feature grid * added tests and fixed wfsquery epic
geosolutions-it · May 15, 2017 · f995801 · f995801
1 parent 3d8f362
commit f995801
Show file tree

Hide file tree

Showing 14 changed files with 209 additions and 36 deletions.
diff --git a/web/client/actions/__tests__/queryform-test.js b/web/client/actions/__tests__/queryform-test.js
@@ -19,6 +19,7 @@ const {
     EXPAND_ATTRIBUTE_PANEL,
     EXPAND_SPATIAL_PANEL,
     SELECT_SPATIAL_METHOD,
+    UPDATE_GEOMETRY,
     SELECT_SPATIAL_OPERATION,
     REMOVE_SPATIAL_SELECT,
     SHOW_SPATIAL_DETAILS,
@@ -35,6 +36,8 @@ const {
     ADD_SIMPLE_FILTER_FIELD,
     REMOVE_SIMPLE_FILTER_FIELD,
     REMOVE_ALL_SIMPLE_FILTER_FIELDS,
+    SELECT_VIEWPORT_SPATIAL_METHOD,
+    CHANGE_SPATIAL_ATTRIBUTE,
     changeDwithinValue,
     resetZones,
     zoneChange,
@@ -56,8 +59,11 @@ const {
     expandAttributeFilterPanel,
     expandSpatialFilterPanel,
     selectSpatialMethod,
+    updateGeometrySpatialField,
+    selectViewportSpatialMethod,
     selectSpatialOperation,
     removeSpatialSelection,
+    changeSpatialAttribute,
     showSpatialSelectionDetails,
     simpleFilterFieldUpdate,
     addSimpleFilterField,
@@ -89,6 +95,29 @@ describe('Test correctness of the queryform actions', () => {
         expect(retval.index).toBe(0);
     });
 
+    it('updateGeometrySpatialField', () => {
+        const geometry = {center: [0, 1], coordinates: []};
+        const retval = updateGeometrySpatialField(geometry);
+
+        expect(retval).toExist();
+        expect(retval.type).toBe(UPDATE_GEOMETRY);
+        expect(retval.geometry).toBe(geometry);
+    });
+
+    it('selectViewportSpatialMethod', () => {
+        const retval = selectViewportSpatialMethod();
+        expect(retval).toExist();
+        expect(retval.type).toBe(SELECT_VIEWPORT_SPATIAL_METHOD);
+    });
+
+    it('changeSpatialAttribute', () => {
+        const attribute = "some value";
+        const retval = changeSpatialAttribute(attribute);
+        expect(retval).toExist();
+        expect(retval.type).toBe(CHANGE_SPATIAL_ATTRIBUTE);
+        expect(retval.attribute).toBe(attribute);
+    });
+
     it('removeFilterField', () => {
         let rowId = 100;
 

diff --git a/web/client/actions/queryform.js b/web/client/actions/queryform.js
@@ -16,6 +16,8 @@ const CHANGE_CASCADING_VALUE = 'CHANGE_CASCADING_VALUE';
 const EXPAND_ATTRIBUTE_PANEL = 'EXPAND_ATTRIBUTE_PANEL';
 const EXPAND_SPATIAL_PANEL = 'EXPAND_SPATIAL_PANEL';
 const SELECT_SPATIAL_METHOD = 'SELECT_SPATIAL_METHOD';
+const SELECT_VIEWPORT_SPATIAL_METHOD = 'SELECT_VIEWPORT_SPATIAL_METHOD';
+const UPDATE_GEOMETRY = 'UPDATE_GEOMETRY';
 const SELECT_SPATIAL_OPERATION = 'SELECT_SPATIAL_OPERATION';
 const CHANGE_SPATIAL_ATTRIBUTE = 'CHANGE_SPATIAL_ATTRIBUTE';
 const REMOVE_SPATIAL_SELECT = 'REMOVE_SPATIAL_SELECT';
@@ -126,6 +128,18 @@ function selectSpatialMethod(method, fieldName) {
     };
 }
 
+function selectViewportSpatialMethod() {
+    return {
+        type: SELECT_VIEWPORT_SPATIAL_METHOD
+    };
+}
+function updateGeometrySpatialField(geometry) {
+    return {
+        type: UPDATE_GEOMETRY,
+        geometry
+    };
+}
+
 function selectSpatialOperation(operation, fieldName) {
     return {
         type: SELECT_SPATIAL_OPERATION,
@@ -322,6 +336,10 @@ module.exports = {
     ADD_SIMPLE_FILTER_FIELD,
     REMOVE_SIMPLE_FILTER_FIELD,
     REMOVE_ALL_SIMPLE_FILTER_FIELDS,
+    SELECT_VIEWPORT_SPATIAL_METHOD,
+    UPDATE_GEOMETRY,
+    updateGeometrySpatialField,
+    selectViewportSpatialMethod,
     resetZones,
     zoneChange,
     // openMenu,

diff --git a/web/client/actions/wfsquery.js b/web/client/actions/wfsquery.js
@@ -1,4 +1,4 @@
-/**
+/*
  * Copyright 2016, GeoSolutions Sas.
  * All rights reserved.
  *
@@ -103,12 +103,11 @@ function createQuery(searchUrl, filterObj) {
     };
 }
 
-function query(searchUrl, filterObj, retry) {
+function query(searchUrl, filterObj) {
     return {
         type: QUERY,
         searchUrl,
-        filterObj,
-        retry
+        filterObj
     };
 }
 
@@ -147,28 +146,18 @@ function closeResponse() {
 }
 
 module.exports = {
-    FEATURE_TYPE_SELECTED,
-    FEATURE_TYPE_LOADED,
+    FEATURE_TYPE_SELECTED, featureTypeSelected,
+    FEATURE_TYPE_LOADED, featureTypeLoaded,
+    FEATURE_TYPE_ERROR, featureTypeError,
+    FEATURE_ERROR, featureError,
+    FEATURE_CLOSE, featureClose,
+    QUERY_CREATE, createQuery,
+    QUERY_RESULT, querySearchResponse,
+    QUERY_ERROR, queryError,
+    RESET_QUERY, resetQuery,
+    QUERY, query,
     FEATURE_LOADED,
-    FEATURE_TYPE_ERROR,
-    FEATURE_ERROR,
-    FEATURE_CLOSE,
-    QUERY_CREATE,
-    QUERY_RESULT,
-    QUERY_ERROR,
-    RESET_QUERY,
-    QUERY,
-    featureTypeSelected,
-    featureTypeLoaded,
-    featureTypeError,
-    featureError,
     loadFeature,
-    createQuery,
-    query,
-    featureClose,
-    resetQuery,
     toggleQueryPanel,
-    closeResponse,
-    queryError,
-    querySearchResponse
+    closeResponse
 };
diff --git a/web/client/components/data/query/QueryBuilder.jsx b/web/client/components/data/query/QueryBuilder.jsx
@@ -96,6 +96,7 @@ const QueryBuilder = React.createClass({
                 onChangeDrawingStatus: () => {},
                 onRemoveSpatialSelection: () => {},
                 onShowSpatialSelectionDetails: () => {},
+                onSelectViewportSpatialMethod: () => {},
                 onEndDrawing: () => {},
                 onChangeDwithinValue: () => {}
             },

diff --git a/web/client/components/data/query/SpatialFilter.jsx b/web/client/components/data/query/SpatialFilter.jsx
@@ -38,6 +38,7 @@ const SpatialFilter = React.createClass({
             showDetailsPanel: false,
             withContainer: true,
             spatialMethodOptions: [
+                {id: "Viewport", name: "queryform.spatialfilter.methods.viewport"},
                 {id: "BBOX", name: "queryform.spatialfilter.methods.box"},
                 {id: "Circle", name: "queryform.spatialfilter.methods.circle"},
                 {id: "Polygon", name: "queryform.spatialfilter.methods.poly"}
@@ -57,6 +58,7 @@ const SpatialFilter = React.createClass({
                 onRemoveSpatialSelection: () => {},
                 onShowSpatialSelectionDetails: () => {},
                 onEndDrawing: () => {},
+                onSelectViewportSpatialMethod: () => {},
                 onChangeDwithinValue: () => {},
                 zoneFilter: () => {},
                 zoneSearch: () => {},
@@ -211,7 +213,7 @@ const SpatialFilter = React.createClass({
         const selectedOperation = this.props.spatialOperations.filter((opt) => this.props.spatialField.operation === opt.id)[0];
 
         let drawLabel = (<span/>);
-        if (this.props.spatialField.method && this.props.spatialField.method !== "ZONE") {
+        if (this.props.spatialField.method && this.props.spatialField.method !== "ZONE" && this.props.spatialField.method !== "Viewport") {
             drawLabel = !this.props.spatialField.geometry ? (
                 <span>
                     <hr width="100%"/>
@@ -314,10 +316,18 @@ const SpatialFilter = React.createClass({
 
         this.props.actions.onSelectSpatialMethod(method, name);
 
-        if (method !== "ZONE") {
-            this.changeDrawingStatus('start', method, "queryform", []);
-        } else {
-            this.changeDrawingStatus('clean', null, "queryform", []);
+        switch (method) {
+            case "ZONE": {
+                this.changeDrawingStatus('clean', null, "queryform", []); break;
+            }
+            case "Viewport": {
+                this.changeDrawingStatus('clean', null, "queryform", []);
+                this.props.actions.onSelectViewportSpatialMethod();
+                break;
+            }
+            default: {
+                this.changeDrawingStatus('start', method, "queryform", []);
+            }
         }
     },
     updateSpatialOperation(id, name, value) {

diff --git a/web/client/epics/wfsquery.js b/web/client/epics/wfsquery.js
@@ -8,8 +8,9 @@
 
 const Rx = require('rxjs');
 const axios = require('../libs/ajax');
-const {changeSpatialAttribute} = require('../actions/queryform');
-const {FEATURE_TYPE_SELECTED, QUERY, featureTypeLoaded, featureTypeError, createQuery, querySearchResponse, queryError, featureClose} = require('../actions/wfsquery');
+const {changeSpatialAttribute, SELECT_VIEWPORT_SPATIAL_METHOD, updateGeometrySpatialField} = require('../actions/queryform');
+const {CHANGE_MAP_VIEW} = require('../actions/map');
+const {FEATURE_TYPE_SELECTED, QUERY, featureTypeLoaded, featureTypeError, querySearchResponse, queryError, featureClose} = require('../actions/wfsquery');
 const FilterUtils = require('../utils/FilterUtils');
 const assign = require('object-assign');
 const {isString} = require('lodash');
@@ -197,7 +198,6 @@ const wfsQueryEpic = (action$, store) =>
         .switchMap(action => {
 
             return Rx.Observable.merge(
-                Rx.Observable.of(createQuery(action.searchUrl, action.filterObj)),
                 Rx.Observable.of(setControlProperty('drawer', 'enabled', false)),
                 getWFSFeature(action.searchUrl, action.filterObj)
                     .switchMap((response) => {
@@ -227,6 +227,40 @@ const closeFeatureEpic = action$ =>
             return action.control && action.control === 'drawer' ? Rx.Observable.of(featureClose()) : Rx.Observable.empty();
         });
 
+function validateExtent(extent) {
+    if (extent[0] <= -180.0 || extent[2] >= 180.0) {
+        extent[0] = -180.0;
+        extent[2] = 180.0;
+    }
+    return extent;
+}
+const viewportSelectedEpic = (action$, store) =>
+    action$.ofType(SELECT_VIEWPORT_SPATIAL_METHOD, CHANGE_MAP_VIEW)
+        .switchMap((action) => {
+            // calculate new geometry from map properties only for viewport
+            const map = action.type === CHANGE_MAP_VIEW ? action : store.getState().map.present;
+            if (action.type === SELECT_VIEWPORT_SPATIAL_METHOD ||
+                action.type === CHANGE_MAP_VIEW &&
+                store.getState().queryform &&
+                store.getState().queryform.spatialField &&
+                store.getState().queryform.spatialField.method === "viewport") {
+                const bounds = Object.keys(map.bbox.bounds).reduce((p, c) => {
+                    return assign({}, p, {[c]: parseFloat(map.bbox.bounds[c])});
+                }, {});
+                const extent = validateExtent([bounds.minx, bounds.miny, bounds.maxx, bounds.maxy]);
+                const center = [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2];
+                const start = [extent[0], extent[1]];
+                const end = [extent[2], extent[3]];
+                const coordinates = [[start, [start[0], end[1]], end, [end[0], start[1]], start]];
+                let geometry = {
+                    type: "Polygon", radius: 0, projection: "EPSG:4326",
+                    extent, center, coordinates
+                };
+                return Rx.Observable.of(updateGeometrySpatialField(geometry));
+            }
+            return Rx.Observable.empty();
+        });
+
  /**
   * Epics for WFS query requests
   * @name epics.wfsquery
@@ -236,5 +270,6 @@ const closeFeatureEpic = action$ =>
 module.exports = {
     featureTypeSelectedEpic,
     wfsQueryEpic,
-    closeFeatureEpic
+    closeFeatureEpic,
+    viewportSelectedEpic
 };
diff --git a/web/client/plugins/QueryPanel.jsx b/web/client/plugins/QueryPanel.jsx
@@ -24,7 +24,7 @@ const LayersUtils = require('../utils/LayersUtils');
 // include application component
 const QueryBuilder = require('../components/data/query/QueryBuilder');
 
-const {featureTypeSelectedEpic, wfsQueryEpic, closeFeatureEpic} = require('../epics/wfsquery');
+const {featureTypeSelectedEpic, wfsQueryEpic, closeFeatureEpic, viewportSelectedEpic} = require('../epics/wfsquery');
 
 const {bindActionCreators} = require('redux');
 const {
@@ -40,6 +40,7 @@ const {
     expandAttributeFilterPanel,
     expandSpatialFilterPanel,
     selectSpatialMethod,
+    selectViewportSpatialMethod,
     selectSpatialOperation,
     removeSpatialSelection,
     showSpatialSelectionDetails,
@@ -95,6 +96,7 @@ const SmartQueryForm = connect((state) => {
         spatialFilterActions: bindActionCreators({
             onExpandSpatialFilterPanel: expandSpatialFilterPanel,
             onSelectSpatialMethod: selectSpatialMethod,
+            onSelectViewportSpatialMethod: selectViewportSpatialMethod,
             onSelectSpatialOperation: selectSpatialOperation,
             onChangeDrawingStatus: changeDrawingStatus,
             onRemoveSpatialSelection: removeSpatialSelection,
@@ -237,5 +239,5 @@ module.exports = {
         queryform: require('../reducers/queryform'),
         query: require('../reducers/query')
     },
-    epics: {featureTypeSelectedEpic, wfsQueryEpic, closeFeatureEpic}
+    epics: {featureTypeSelectedEpic, wfsQueryEpic, closeFeatureEpic, viewportSelectedEpic}
 };
diff --git a/web/client/plugins/TOC.jsx b/web/client/plugins/TOC.jsx
@@ -42,6 +42,7 @@ const {
     expandAttributeFilterPanel,
     expandSpatialFilterPanel,
     selectSpatialMethod,
+    selectViewportSpatialMethod,
     selectSpatialOperation,
     removeSpatialSelection,
     showSpatialSelectionDetails,
@@ -105,6 +106,7 @@ const SmartQueryForm = connect((state) => {
         spatialFilterActions: bindActionCreators({
             onExpandSpatialFilterPanel: expandSpatialFilterPanel,
             onSelectSpatialMethod: selectSpatialMethod,
+            onSelectViewportSpatialMethod: selectViewportSpatialMethod,
             onSelectSpatialOperation: selectSpatialOperation,
             onChangeDrawingStatus: changeDrawingStatus,
             onRemoveSpatialSelection: removeSpatialSelection,