geosolutions-it#10026: Interactive legend for TOC layers

Description:
- implement reset legend filter in case changing styles for WMS

web/client/actions/layerFilter.js

@@ -28,6 +28,8 @@ export const OPEN_QUERY_BUILDER = 'LAYER_FILTER:OPEN_QUERY_BUILDER';
 
 export const LAYER_FILTER_BY_LEGEND = 'LAYER_FILTER:LAYER_FILTER_BY_LEGEND';
 
+export const RESET_LAYER_FILTER_BY_LEGEND = 'LAYER_FILTER:RESET_LAYER_FILTER_BY_LEGEND';
+
 export function storeCurrentFilter() {
     return {
         type: STORE_CURRENT_APPLIED_FILTER
@@ -71,3 +73,10 @@ export function layerFilterByLegend(layerId, nodeType, legendCQLFilter) {
         layerId
     };
 }
+
+export function resetLegendFilter(style) {
+    return {
+        type: RESET_LAYER_FILTER_BY_LEGEND,
+        newSelectedStyle: style
+    };
+}

web/client/components/TOC/fragments/StyleBasedWMSJsonLegend.jsx

@@ -22,7 +22,7 @@ import {
 import { getJsonWMSLegend } from '../../../api/WMS';
 import Message from '../../I18N/Message';
 
-class Legend extends React.Component {
+class StyleBasedWMSJsonLegend extends React.Component {
     static propTypes = {
         layer: PropTypes.object,
         legendHeight: PropTypes.number,
@@ -50,6 +50,18 @@ class Legend extends React.Component {
         jsonLegend: {}
     }
     componentDidMount() {
+        this.getLegendData();
+    }
+
+    componentDidUpdate(prevProps) {
+        const prevLayerStyle = prevProps?.layer?.style;
+        const currentLayerStyle = this.props?.layer?.style;
+        if (currentLayerStyle !== prevLayerStyle) {
+            this.getLegendData();
+        }
+    }
+
+    getLegendData() {
         let jsonLegendUrl = this.getUrl(this.props);
         getJsonWMSLegend(jsonLegendUrl).then(data => {
             this.setState({ jsonLegend: data[0], loading: false });
@@ -132,4 +144,4 @@ class Legend extends React.Component {
     }
 }
 
-export default Legend;
+export default StyleBasedWMSJsonLegend;

web/client/components/styleeditor/StyleList.jsx

@@ -61,6 +61,7 @@ const StyleList = ({
     defaultStyle,
     availableStyles = [],
     onSelect,
+    onResetLegendFilterStyle = () => {},
     formatColors = {
         sld: "#33ffaa",
         css: "#ffaa33"
@@ -80,7 +81,10 @@ const StyleList = ({
     >
         <SideGrid
             size="sm"
-            onItemClick={({ name }) => onSelect({ style: name }, true)}
+            onItemClick={({ name }) => {
+                onResetLegendFilterStyle(name);
+                onSelect({ style: name }, true);
+            }}
             items={availableStyles
                 .filter(
                     ({

web/client/epics/layerfilter.js

@@ -22,7 +22,8 @@ import {
     DISCARD_CURRENT_FILTER,
     APPLY_FILTER,
     storeAppliedFilter,
-    LAYER_FILTER_BY_LEGEND
+    LAYER_FILTER_BY_LEGEND,
+    RESET_LAYER_FILTER_BY_LEGEND
 } from '../actions/layerFilter';
 import { featureTypeSelected, toggleLayerFilter, initQueryPanel } from '../actions/wfsquery';
 import { getSelectedLayer } from '../selectors/layers';
@@ -168,9 +169,38 @@ export const applyWMSCQLFilterBasedOnLegendFilter = (action$, {getState}) => {
         });
 };
 
+export const applyResetLegendFilter = (action$, {getState}) => {
+    return  action$.ofType(RESET_LAYER_FILTER_BY_LEGEND)
+        .switchMap((action) => {
+            const state = getState();
+            const layer = getSelectedLayer(state);
+            // check if the chnaged param is style or not, if not cancel the epic
+            // const isChangeStyleParam = Object.keys(action.newParams).length === 1 && action.newParams?.style;
+            // check if the selected style is different than the current layer's one, if not cancel the epic
+            const isNewStyleSelected = layer.style !== action?.newSelectedStyle;
+            // check if the layer has interactive legend or not, if not cancel the epic
+            const isLayerWithJSONLegend = layer?.enableInteractiveLegend;
+            if (!isNewStyleSelected || !isLayerWithJSONLegend) return Rx.Observable.empty();
+            const queryFormFilterObj = {...get(getState(), "queryform", {})};
+            let filterObj = layer.layerFilter ? layer.layerFilter : queryFormFilterObj;
+            let searchUrl = layer.search.url;
+            // reset thte filter if legendCQLFilter is empty
+            const isLegendFilterExist = filterObj?.filters?.find(f => f.id === 'interactiveLegend');
+            if (isLegendFilterExist) {
+                filterObj = {
+                    ...filterObj, filters: filterObj?.filters?.filter(f => f.id !== 'interactiveLegend')
+                };
+                let newFilter = isNotEmptyFilter(filterObj) ? filterObj : undefined;
+                return Rx.Observable.of(search(searchUrl, newFilter), addFilterToLayer(layer.id, newFilter), storeAppliedFilter(newFilter));
+            }
+            return Rx.Observable.empty();
+        });
+};
+
 export default {
     handleLayerFilterPanel,
     restoreSavedFilter,
     onApplyFilter,
-    applyWMSCQLFilterBasedOnLegendFilter
+    applyWMSCQLFilterBasedOnLegendFilter,
+    applyResetLegendFilter
 };

web/client/plugins/styleeditor/index.js

@@ -14,6 +14,7 @@ import { createSelector } from 'reselect';
 import { updateOptionsByOwner } from '../../actions/additionallayers';
 import { getLayerCapabilities } from '../../actions/layerCapabilities';
 import { updateSettingsParams } from '../../actions/layers';
+import { resetLegendFilter } from '../../actions/layerFilter';
 import {
     addStyle,
     createStyle,
@@ -121,7 +122,8 @@ export const StyleList = compose(
             })
         ),
         {
-            onSelect: updateSettingsParams
+            onSelect: updateSettingsParams,
+            onResetLegendFilterStyle: resetLegendFilter
         }
     ),
     withState('filterText', 'onFilter', ''),