From a54a49482e6c30199754fc1b42aff4defa49ef1a Mon Sep 17 00:00:00 2001 From: Victor Belomestnov Date: Tue, 18 Oct 2022 17:10:32 +0300 Subject: [PATCH] #8578 SEARCH_WITH_FILTER action: add popup support (#8673) (#8710) --- web/client/epics/__tests__/search-test.js | 60 ++++++++++++++++++++++- web/client/epics/search.js | 46 ++++++++++++++--- 2 files changed, 99 insertions(+), 7 deletions(-) diff --git a/web/client/epics/__tests__/search-test.js b/web/client/epics/__tests__/search-test.js index df853a5612..40f865a071 100644 --- a/web/client/epics/__tests__/search-test.js +++ b/web/client/epics/__tests__/search-test.js @@ -52,6 +52,7 @@ const STATE_NAME = 'STATE_NAME'; import { testEpic, addTimeoutEpic, TEST_TIMEOUT } from './epicTestUtils'; import {addLayer} from "../../actions/layers"; +import { ADD_MAP_POPUP } from '../../actions/mapPopups'; const nestedService = { nestedPlaceholder: TEST_NESTED_PLACEHOLDER @@ -599,6 +600,22 @@ describe('search Epics', () => { }, {layers: {flat: [{name: "layerName", url: "clearlyNotAUrl", visibility: true, queryable: true, type: "wms"}]}}); }); it('searchOnStartEpic, that sends a Getfeature and a GFI requests', (done) => { + const testStore = { + map: { + projection: "EPSG:3857" + }, + layers: { + flat: [ + { + name: "layerName", + url: "base/web/client/test-resources/wms/GetFeature.json", + visibility: true, + queryable: true, + type: "wms" + } + ] + } + }; let action = searchLayerWithFilter({layer: "layerName", cql_filter: "cql"}); const NUM_ACTIONS = 2; testEpic(searchOnStartEpic, NUM_ACTIONS, action, (actions) => { @@ -607,7 +624,48 @@ describe('search Epics', () => { expect(actions[0].type).toBe(FEATURE_INFO_CLICK); expect(actions[1].type).toBe(SHOW_MAPINFO_MARKER); done(); - }, {layers: {flat: [{name: "layerName", url: "base/web/client/test-resources/wms/GetFeature.json", visibility: true, queryable: true, type: "wms"}]}}); + }, testStore); + }); + it('searchOnStartEpic, that adds popup', (done) => { + const testStore = { + mapInfo: { showInMapPopup: true }, + map: { + projection: "EPSG:3857" + }, + layers: { + flat: [ + { + name: "layerName", + url: "base/web/client/test-resources/wms/GetFeature.json", + visibility: true, + queryable: true, + type: "wms" + } + ] + } + }; + let action = searchLayerWithFilter({layer: "layerName", cql_filter: "cql"}); + const NUM_ACTIONS = 2; + testEpic( + searchOnStartEpic, + NUM_ACTIONS, + action, + (actions) => { + expect(actions).toExist(); + expect(actions.length).toBe(NUM_ACTIONS); + expect(actions[0].type).toBe(FEATURE_INFO_CLICK); + const popupAction = actions[1]; + expect(popupAction.type).toBe(ADD_MAP_POPUP); + expect(popupAction.popup?.position?.coordinates?.[0]).toBe( + 968346.2286324208 + ); + expect(popupAction.popup?.position?.coordinates?.[1]).toBe( + 5538315.133325616 + ); + done(); + }, + testStore + ); }); it('textSearchShowGFIEpic, it sends info format taken from layer', (done) => { let action = showGFI( diff --git a/web/client/epics/search.js b/web/client/epics/search.js index 5060c1db3f..9a80ee6727 100644 --- a/web/client/epics/search.js +++ b/web/client/epics/search.js @@ -11,6 +11,7 @@ import toBbox from 'turf-bbox'; import pointOnSurface from '@turf/point-on-surface'; import assign from 'object-assign'; import {isNil, sortBy} from 'lodash'; +import uuid from 'uuid'; import {centerToMarkerSelector, getLayerFromName, queryableLayersSelector} from '../selectors/layers'; @@ -44,14 +45,17 @@ import { ZOOM_ADD_POINT } from '../actions/search'; -import CoordinatesUtils from '../utils/CoordinatesUtils'; +import CoordinatesUtils, { reproject } from '../utils/CoordinatesUtils'; import {defaultIconStyle, layerIsVisibleForGFI, showGFIForService} from '../utils/SearchUtils'; import {generateTemplateString} from '../utils/TemplateUtils'; import {API} from '../api/searchText'; import {getFeatureSimple} from '../api/WFS'; import {getDefaultInfoFormatValueFromLayer} from '../utils/MapInfoUtils'; -import {identifyOptionsSelector} from '../selectors/mapInfo'; +import {identifyOptionsSelector, isMapPopup} from '../selectors/mapInfo'; +import { addPopup } from '../actions/mapPopups'; +import { IDENTIFY_POPUP } from '../components/map/popups'; +import { projectionSelector } from '../selectors/map'; const getInfoFormat = (layerObj, state) => getDefaultInfoFormatValueFromLayer(layerObj, {...identifyOptionsSelector(state)}); @@ -319,11 +323,41 @@ export const searchOnStartEpic = (action$, store) => .then( (response = {}) => response.features && response.features.length && {...response.features[0], typeName: name}) ) .switchMap(({ type, geometry, typeName }) => { - let coord = pointOnSurface({ type, geometry }).geometry.coordinates; - const latlng = {lng: coord[0], lat: coord[1] }; + const coord = pointOnSurface({ type, geometry }).geometry.coordinates; - if (coord) { // trigger get feature info - return Rx.Observable.of(featureInfoClick({latlng}, typeName, [typeName], {[typeName]: {cql_filter: cqlFilter}}), showMapinfoMarker()); + if (coord) { + const latlng = {lng: coord[0], lat: coord[1] }; + const projection = projectionSelector(store.getState()); + const { x, y } = reproject( + coord, + "EPSG:4326", + projection + ); + let mapActionObservable; + if (isMapPopup(store.getState())) { + mapActionObservable = Rx.Observable.of( + addPopup(uuid(), { + component: IDENTIFY_POPUP, + maxWidth: 600, + position: { coordinates: [x, y] } + }) + ); + } else { + mapActionObservable = Rx.Observable.of( + showMapinfoMarker() + ); + } + + // trigger get feature info + return Rx.Observable.of( + featureInfoClick( + { latlng }, + typeName, + [typeName], + { [typeName]: { cql_filter: cqlFilter } } + ) + ) + .merge(mapActionObservable); } return Rx.Observable.empty(); }).catch(() => {