#10536

Enhanced customization for highlight styles of selected/clicked features in FeatureEditor and Identify

- enabled defining highlightStyle object under FeatureEditor and Identify Plugin in localConfig.json to apply costume highlight styles for features.
- updated and added relevant tests
- updated jsdoc for both plugins

On behalf of DB Systel GmbH

Author: congchen1101

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

@@ -28,14 +28,27 @@ describe('Test correctness of the highlight actions', () => {
         expect(retval.type).toBe(HIGHLIGHT_STATUS);
         expect(retval.status).toBe("enabled");
     });
-    it('highlightStatus', () => {
+    it('setHighlightFeaturesPath', () => {
         let path = "my.path";
 
         let retval = setHighlightFeaturesPath(path);
 
         expect(retval).toExist();
         expect(retval.type).toBe(SET_HIGHLIGHT_FEATURES_PATH);
         expect(retval.featuresPath).toBe(path);
+        expect(retval.highlightStyle).toEqual({});
+    });
+
+    it('setHighlightFeaturesPath with customized highlight style', () => {
+        let path = "my.path";
+        let style = {color: 'yellow'};
+
+        let retval = setHighlightFeaturesPath(path, style);
+
+        expect(retval).toExist();
+        expect(retval.type).toBe(SET_HIGHLIGHT_FEATURES_PATH);
+        expect(retval.featuresPath).toBe(path);
+        expect(retval.highlightStyle).toBe(style);
     });
 
     it('updateHighlighted', () => {

web/client/actions/highlight.js

@@ -16,10 +16,11 @@ export function highlightStatus(status) {
         status
     };
 }
-export function setHighlightFeaturesPath(featuresPath) {
+export function setHighlightFeaturesPath(featuresPath, highlightStyle = {}) {
     return {
         type: SET_HIGHLIGHT_FEATURES_PATH,
-        featuresPath
+        featuresPath,
+        highlightStyle
     };
 }
 export function updateHighlighted(features, status) {

web/client/components/data/identify/enhancers/identify.js

@@ -91,7 +91,8 @@ export const identifyLifecycle = compose(
                 },
                 maxItems,
                 showAllResponses,
-                highlight: pluginCfg?.highlightEnabledFromTheStart || false
+                highlight: pluginCfg?.highlightEnabledFromTheStart || false,
+                highlightStyle: pluginCfg?.highlightStyle || {}
             });
             if (hidePopupIfNoResults) {
                 enableHideEmptyPopupOption(true);

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

@@ -716,6 +716,7 @@ describe('featuregrid Epics', () => {
                 switch (action.type) {
                 case SET_HIGHLIGHT_FEATURES_PATH:
                     expect(action.featuresPath).toBe('featuregrid.select');
+                    expect(action.highlightStyle).toEqual({});
                     break;
                 case CHANGE_DRAWING_STATUS:
                     expect(action.status).toBe("clean");
@@ -737,6 +738,37 @@ describe('featuregrid Epics', () => {
         testEpic(setHighlightFeaturesPath, 3, toggleEditMode(), epicResult, stateWithGmlGeometry);
     });
 
+    it('set highlight feature path with geometry not supported EDIT MODE and costume highligth style', (done) => {
+        const highlightStyle = {color: 'red'};
+        const stateWithCustomHighlightStyle = set("featuregrid.highlightStyle", highlightStyle, stateWithGmlGeometry);
+        const epicResult = actions => {
+            expect(actions.length).toBe(3);
+            actions.map((action) => {
+                switch (action.type) {
+                case SET_HIGHLIGHT_FEATURES_PATH:
+                    expect(action.featuresPath).toBe('featuregrid.select');
+                    expect(action.highlightStyle).toBe(highlightStyle);
+                    break;
+                case CHANGE_DRAWING_STATUS:
+                    expect(action.status).toBe("clean");
+                    expect(action.method).toBe("");
+                    expect(action.features).toEqual([]);
+                    expect(action.options).toEqual({});
+                    expect(action.style).toBe(undefined);
+                    break;
+                case SHOW_NOTIFICATION:
+                    expect(action.uid).toBe("notSupportedGeometryWarning");
+                    break;
+                default:
+                    expect(true).toBe(false);
+                }
+            });
+            done();
+        };
+
+        testEpic(setHighlightFeaturesPath, 3, toggleEditMode(), epicResult, stateWithCustomHighlightStyle);
+    });
+
     it('set highlight feature path VIEW MODE', (done) => {
         const epicResult = actions => {
             try {
@@ -745,6 +777,7 @@ describe('featuregrid Epics', () => {
                     switch (action.type) {
                     case SET_HIGHLIGHT_FEATURES_PATH:
                         expect(action.featuresPath).toBe('featuregrid.select');
+                        expect(action.highlightStyle).toEqual({});
                         break;
                     case CHANGE_DRAWING_STATUS:
                         expect(action.status).toBe("clean");
@@ -766,6 +799,38 @@ describe('featuregrid Epics', () => {
         testEpic(setHighlightFeaturesPath, 2, toggleViewMode(), epicResult, state);
     });
 
+    it('set highlight feature path VIEW MODE with costume highlight style', (done) => {
+        const highlightStyle = {color: 'red'};
+        const stateWithCustomHighlightStyle = set("featuregrid.highlightStyle", highlightStyle, state);
+        const epicResult = actions => {
+            try {
+                expect(actions.length).toBe(2);
+                actions.map((action) => {
+                    switch (action.type) {
+                    case SET_HIGHLIGHT_FEATURES_PATH:
+                        expect(action.featuresPath).toBe('featuregrid.select');
+                        expect(action.highlightStyle).toBe(highlightStyle);
+                        break;
+                    case CHANGE_DRAWING_STATUS:
+                        expect(action.status).toBe("clean");
+                        expect(action.method).toBe("");
+                        expect(action.features).toEqual([]);
+                        expect(action.options).toEqual({});
+                        expect(action.style).toBe(undefined);
+                        break;
+                    default:
+                        expect(true).toBe(false);
+                    }
+                });
+            } catch (e) {
+                done(e);
+            }
+            done();
+        };
+
+        testEpic(setHighlightFeaturesPath, 2, toggleViewMode(), epicResult, stateWithCustomHighlightStyle);
+    });
+
     it('set highlight feature path EDIT MODE', (done) => {
         const epicResult = actions => {
             try {

web/client/epics/featuregrid.js

@@ -142,7 +142,7 @@ import {
     getAttributeFilters,
     selectedLayerSelector,
     multiSelect,
-    paginationSelector, isViewportFilterActive, viewportFilter
+    paginationSelector, isViewportFilterActive, viewportFilter, highlightStyleSelector
 } from '../selectors/featuregrid';
 
 import { error, warning } from '../actions/notifications';
@@ -897,11 +897,12 @@ export const onFeatureGridCreateNewFeature = (action$) => action$.ofType(CREATE_
  */
 export const setHighlightFeaturesPath = (action$, store) => action$.ofType(TOGGLE_MODE)
     .switchMap( (a) => {
+        const highlightStyle = highlightStyleSelector(store.getState());
         if (a.mode === MODES.VIEW) {
-            return Rx.Observable.of(drawSupportReset(), setHighlightFeaturesPathAction("featuregrid.select"));
+            return Rx.Observable.of(drawSupportReset(), setHighlightFeaturesPathAction("featuregrid.select", highlightStyle));
         }
         if (a.mode === MODES.EDIT && !hasSupportedGeometry(store.getState())) {
-            return Rx.Observable.of(drawSupportReset(), setHighlightFeaturesPathAction("featuregrid.select"), warning({
+            return Rx.Observable.of(drawSupportReset(), setHighlightFeaturesPathAction("featuregrid.select", highlightStyle), warning({
                 title: "featuregrid.notSupportedGeometryTitle",
                 message: "featuregrid.notSupportedGeometry",
                 uid: "notSupportedGeometryWarning",

web/client/plugins/FeatureEditor.jsx

@@ -104,6 +104,7 @@ import {isViewportFilterActive} from "../selectors/featuregrid";
   * @prop {boolean} cfg.useUTCOffset avoid using UTC dates in attribute table and datetime editor, should be kept consistent with dateFormats
   * @prop {object} cfg.dateFormats Allows to specify custom date formats ( in [ISO_8601](https://en.wikipedia.org/wiki/ISO_8601)  format) to use to display dates in the table. `date` `date-time` and `time` are the supported entries for the date format. Example:
   * @prop {boolean} cfg.showPopoverSync default false. Hide the popup of map sync if false, shows the popup of map sync if true
+  * @prop {object} cfg.highlightStyle default empty. Custom style for highlighted features.
   * ```
   * "dateFormats": {
   *    "date-time": "MM DD YYYY - HH:mm:ss",
@@ -151,7 +152,12 @@ import {isViewportFilterActive} from "../selectors/featuregrid";
   *   },
  *    "filterByViewport": true,
  *    "showFilterByViewportTool": true
-  *   }
+  *   },
+  *   "highlightStyle": {
+  *     "color": "#00ffff",
+  *     "width": 4,
+  *     "lineColor": "#00ffff",
+  *     "fillOpacity": 0.3
   * }
   * ```
   *
@@ -200,24 +206,27 @@ const EditorPlugin = connect(
                 virtualScroll: this.props.virtualScroll ?? true,
                 editingAllowedRoles: this.props.editingAllowedRoles,
                 editingAllowedGroups: this.props.editingAllowedGroups,
-                maxStoredPages: this.props.maxStoredPages
+                maxStoredPages: this.props.maxStoredPages,
+                highlightStyle: this.props.highlightStyle
             });
         },
         componentDidUpdate(prevProps) {
             // Re-Initialize configurations
             !this.props.viewportFilterInitialized && this.props.filterByViewport && this.props.setViewportFilter(true);
 
-            const {virtualScroll, editingAllowedRoles, editingAllowedGroups, maxStoredPages} = this.props ?? {};
+            const {virtualScroll, editingAllowedRoles, editingAllowedGroups, maxStoredPages, highlightStyle} = this.props ?? {};
             if (prevProps.virtualScroll !== virtualScroll
                 || !isEqual(prevProps.editingAllowedRoles, editingAllowedRoles)
                 || !isEqual(prevProps.editingAllowedGroups, editingAllowedGroups)
                 || prevProps.maxStoredPages !== maxStoredPages
+                || !isEqual(prevProps.highlightStyle, highlightStyle)
             ) {
                 this.props.initPlugin({
                     virtualScroll: virtualScroll ?? true,
                     editingAllowedRoles,
                     editingAllowedGroups,
-                    maxStoredPages
+                    maxStoredPages,
+                    highlightStyle
                 });
             }
         }

web/client/plugins/Identify.jsx

@@ -199,6 +199,7 @@ const identifyDefaultProps = defaultProps({
  * @prop cfg.showHighlightFeatureButton {boolean} show the highlight feature button if the interrogation returned valid features (openlayers only)
  * @prop cfg.hidePopupIfNoResults {boolean} hide/show the identify popup in case of no results
  * @prop cfg.highlightEnabledFromTheStart {boolean} the highlight feature button will be activated by default if true
+ * @prop cfg.highlightSytle {object} the style to apply to highlight features, when not defined a default style is applied
  * @prop cfg.viewerOptions.container {expression} the container of the viewer, expression from the context
  * @prop cfg.viewerOptions.header {expression} the header of the viewer, expression from the context{expression}
  * @prop cfg.disableCenterToMarker {bool} disable zoom to marker action
@@ -221,6 +222,12 @@ const identifyDefaultProps = defaultProps({
  *       "viewerOptions": {
  *          "container": "{context.ReactSwipe}",
  *          "header": "{context.SwipeHeader}"
+ *       },
+ *       "highlightStyle": {
+ *          "color": "#00ffff",
+ *          "width": 4,
+ *          "lineColor": "#00ffff",
+ *          "fillOpacity": 0.3
  *       }
  *    }
  * }

web/client/plugins/Map.jsx

@@ -212,7 +212,8 @@ class MapPlugin extends React.Component {
         onLoadingMapPlugins: PropTypes.func,
         onMapTypeLoaded: PropTypes.func,
         pluginsCreator: PropTypes.func,
-        mapTitle: PropTypes.string
+        mapTitle: PropTypes.string,
+        highlightStyle: PropTypes.object
     };
 
     static defaultProps = {
@@ -288,7 +289,7 @@ class MapPlugin extends React.Component {
 
     getHighlightLayer = (projection, index, env) => {
         const plugins = this.state.plugins;
-        const {features, ...options} = getHighlightLayerOptions({features: this.props.features});
+        const {features, ...options} = getHighlightLayerOptions({features: this.props.features}, this.props?.highlightStyle);
         return (<plugins.Layer type="vector"
             srs={projection}
             position={index}

web/client/plugins/__tests__/FeatureEditor-test.jsx

@@ -34,7 +34,11 @@ describe('FeatureEditor Plugin', () => {
         const props = {
             virtualScroll: false,
             editingAllowedRoles: ['USER', 'ADMIN'],
-            maxStoredPages: 5
+            maxStoredPages: 5,
+            highlightStyle: {
+                color: 'red',
+                weight: 3
+            }
         };
         const {Plugin, store} = getPluginForTest(FeatureEditor, { featuregrid: { open: false } });
         ReactDOM.render(<Plugin {...props}/>, document.getElementById("container"));
@@ -43,13 +47,18 @@ describe('FeatureEditor Plugin', () => {
         expect(state.virtualScroll).toBeFalsy();
         expect(state.editingAllowedRoles).toEqual(props.editingAllowedRoles);
         expect(state.maxStoredPages).toBe(props.maxStoredPages);
+        expect(state.highlightStyle).toEqual(props.highlightStyle);
     });
     it('onInit FeatureEditor plugin be-recalled when props change', () => {
         const props = {
             virtualScroll: false,
             editingAllowedRoles: ['ADMIN'],
             editingAllowedGroups: ['GROUP1'],
-            maxStoredPages: 5
+            maxStoredPages: 5,
+            highlightStyle: {
+                color: 'red',
+                weight: 3
+            }
         };
         const props2 = {
             editingAllowedRoles: ['USER', 'ADMIN'],
@@ -68,15 +77,18 @@ describe('FeatureEditor Plugin', () => {
         expect(state.editingAllowedRoles).toEqual(props.editingAllowedRoles);
         expect(state.editingAllowedGroups).toEqual(props.editingAllowedGroups);
         expect(state.maxStoredPages).toBe(props.maxStoredPages);
+        expect(state.highlightStyle).toEqual(props.highlightStyle);
         ReactDOM.render(<Plugin {...props2}/>, document.getElementById("container"));
         const state2 = store.getState().featuregrid;
         expect(state2.virtualScroll).toBeTruthy(); // the default
         expect(state2.editingAllowedRoles).toEqual(props2.editingAllowedRoles); // changed
         expect(state2.editingAllowedGroups).toEqual(props2.editingAllowedGroups); // changed
         expect(state2.maxStoredPages).toBe(props2.maxStoredPages);
+        expect(state2.highlightStyle).toEqual({});
         ReactDOM.render(<Plugin {...props3}/>, document.getElementById("container"));
         const state3 = store.getState().featuregrid;
         expect(isEqual(state2.editingAllowedRoles, state3.editingAllowedRoles)).toBeTruthy(); // no double call
         expect(isEqual(state2.editingAllowedGroups, state3.editingAllowedGroups)).toBeTruthy(); // no double call
+        expect(state2).toBe(state3); // no double call
     });
 });

web/client/plugins/map/__tests__/selector-test.jsx

@@ -18,6 +18,19 @@ import { registerEventListener } from '../../../actions/map';
 
 const stateMocker = createStateMocker({ map, layers, additionallayers});
 describe('Map plugin state to pros selector', () => {
+    it('test getting highlightStyle from selector', () => {
+        const stateWithHighlightStyle = selector({highlight: {
+            highlightStyle: {
+                color: 'red',
+                weight: 3
+            }
+        }});
+        expect(stateWithHighlightStyle.highlightStyle).toBeTruthy();
+        expect(stateWithHighlightStyle.highlightStyle).toEqual({
+            color: 'red',
+            weight: 3
+        });
+    });
     it('test getting mapTitle from selector', () => {
         const stateWithMapTitle = selector({map: {
             info: {