geosolutions-it#10026: Interactive legend for TOC layers [Resolve rev…

…iew comments] - remove hover/highlight effect if legend rule doesn't have filter statement in wms json legend - write unit tests for 'updateLayerLegendFilter' and 'resetLayerLegendFilter' FilterUtils
mahmoudadel54 · Apr 22, 2024 · 4aa80c9 · 4aa80c9
1 parent 7b9bc99
commit 4aa80c9
Show file tree

Hide file tree

Showing 2 changed files with 163 additions and 2 deletions.
diff --git a/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx b/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx
@@ -142,7 +142,7 @@ class StyleBasedWMSJsonLegend extends React.Component {
             const isFilterExistBefore = this.state.selectedFilters?.find(f => f === rule.filter);
             const isFilterDisabled = this.props?.layer?.layerFilter?.disabled;
             const activeFilter = rule.filter && isFilterExistBefore;
-            return (<div className={`wms-json-legend-rule ${isFilterDisabled || this.props.owner === 'legendPreview' ? "" : "filter-enabled "} ${activeFilter ? 'active' : ''}`} key={rule.filter} onClick={() => this.filterWMSLayerHandler(rule.filter)}>
+            return (<div className={`wms-json-legend-rule ${isFilterDisabled || this.props.owner === 'legendPreview' || !rule?.filter ? "" : "filter-enabled "} ${activeFilter ? 'active' : ''}`} key={rule.filter} onClick={() => this.filterWMSLayerHandler(rule.filter)}>
                 <WMSJsonLegendIcon rule={rule} />
                 <span>{rule.name || rule.title || ''}</span>
             </div>);

diff --git a/web/client/utils/__tests__/FilterUtils-test.js b/web/client/utils/__tests__/FilterUtils-test.js
@@ -29,7 +29,8 @@ import {
     mergeFiltersToOGC,
     convertFiltersToOGC,
     convertFiltersToCQL,
-    isFilterEmpty
+    isFilterEmpty,
+    updateLayerLegendFilter, resetLayerLegendFilter
 } from '../FilterUtils';
 
 
@@ -2317,4 +2318,164 @@ describe('FilterUtils', () => {
         })).toBe(false);
 
     });
+    it('test updateLayerLegendFilter for wms, simple filter', () => {
+        const layerFilterObj = {};
+        const lgegendFilter = "[FIELD1 = 'Value' AND FIELD2 > '1256']";
+        const updatedFilterObj = updateLayerLegendFilter(layerFilterObj, lgegendFilter);
+        expect(updatedFilterObj).toBeTruthy();
+        expect(updatedFilterObj.filters.length).toEqual(1);
+        expect(updatedFilterObj.filters.filter(i => i.id === 'interactiveLegend')?.length).toEqual(1);
+        expect(updatedFilterObj.filters.find(i => i.id === 'interactiveLegend').filters.length).toEqual(1);
+    });
+    it('test updateLayerLegendFilter for wms, apply multi legend filter', () => {
+        const layerFilterObj = {
+            "groupFields": [
+                {
+                    "id": 1,
+                    "logic": "OR",
+                    "index": 0
+                }
+            ],
+            "filterFields": [],
+            "attributePanelExpanded": true,
+            "spatialPanelExpanded": true,
+            "crossLayerExpanded": true,
+            "crossLayerFilter": {
+                "attribute": "the_geom"
+            },
+            "spatialField": {
+                "method": null,
+                "operation": "INTERSECTS",
+                "geometry": null,
+                "attribute": "the_geom"
+            },
+            "filters": [
+                {
+                    "id": "interactiveLegend",
+                    "format": "logic",
+                    "version": "1.0.0",
+                    "logic": "OR",
+                    "filters": [
+                        {
+                            "format": "cql",
+                            "version": "1.0.0",
+                            "body": "FIELD_01 >= '2500' AND FIELD_01 < '7000'",
+                            "id": "[FIELD_01 >= '2500' AND FIELD_01 < '7000']"
+                        }
+                    ]
+                }
+            ]
+        };
+        const lgegendFilter = "[FIELD_01 >= '13000' AND FIELD_01 < '14500']";
+        const updatedFilterObj = updateLayerLegendFilter(layerFilterObj, lgegendFilter);
+        expect(updatedFilterObj).toBeTruthy();
+        expect(updatedFilterObj.filters.length).toEqual(1);
+        expect(updatedFilterObj.filters.filter(i => i.id === 'interactiveLegend')?.length).toEqual(1);
+        expect(updatedFilterObj.filters.find(i => i.id === 'interactiveLegend').filters.length).toEqual(2);
+    });
+    it('test reset legend filter using updateLayerLegendFilter', () => {
+        const layerFilterObj = {
+            "groupFields": [
+                {
+                    "id": 1,
+                    "logic": "OR",
+                    "index": 0
+                }
+            ],
+            "filterFields": [],
+            "attributePanelExpanded": true,
+            "spatialPanelExpanded": true,
+            "crossLayerExpanded": true,
+            "crossLayerFilter": {
+                "attribute": "the_geom"
+            },
+            "spatialField": {
+                "method": null,
+                "operation": "INTERSECTS",
+                "geometry": null,
+                "attribute": "the_geom"
+            },
+            "filters": [
+                {
+                    "id": "interactiveLegend",
+                    "format": "logic",
+                    "version": "1.0.0",
+                    "logic": "OR",
+                    "filters": [
+                        {
+                            "format": "cql",
+                            "version": "1.0.0",
+                            "body": "FIELD_01 >= '2500' AND FIELD_01 < '7000'",
+                            "id": "[FIELD_01 >= '2500' AND FIELD_01 < '7000']"
+                        },
+                        {
+                            "format": "cql",
+                            "version": "1.0.0",
+                            "body": "FIELD_01 >= '13000' AND FIELD_01 < '14500'",
+                            "id": "[FIELD_01 >= '13000' AND FIELD_01 < '14500']"
+                        }
+                    ]
+                }
+            ]
+        };
+        const updatedFilterObj = updateLayerLegendFilter(layerFilterObj);
+        expect(updatedFilterObj).toBeTruthy();
+        expect(updatedFilterObj.filters.length).toEqual(0);
+        expect(updatedFilterObj.filters.find(i => i.id === 'interactiveLegend')).toBeFalsy();
+    });
+    it('test resetLayerLegendFilter in case change wms style', () => {
+        const layerFilterObj = {
+            "groupFields": [
+                {
+                    "id": 1,
+                    "logic": "OR",
+                    "index": 0
+                }
+            ],
+            "filterFields": [],
+            "attributePanelExpanded": true,
+            "spatialPanelExpanded": true,
+            "crossLayerExpanded": true,
+            "crossLayerFilter": {
+                "attribute": "the_geom"
+            },
+            "spatialField": {
+                "method": null,
+                "operation": "INTERSECTS",
+                "geometry": null,
+                "attribute": "the_geom"
+            },
+            "filters": [
+                {
+                    "id": "interactiveLegend",
+                    "format": "logic",
+                    "version": "1.0.0",
+                    "logic": "OR",
+                    "filters": [
+                        {
+                            "format": "cql",
+                            "version": "1.0.0",
+                            "body": "FIELD_01 >= '2500' AND FIELD_01 < '7000'",
+                            "id": "[FIELD_01 >= '2500' AND FIELD_01 < '7000']"
+                        },
+                        {
+                            "format": "cql",
+                            "version": "1.0.0",
+                            "body": "FIELD_01 >= '13000' AND FIELD_01 < '14500'",
+                            "id": "[FIELD_01 >= '13000' AND FIELD_01 < '14500']"
+                        }
+                    ]
+                }
+            ]
+        };
+        const layer = {
+            enableInteractiveLegend: true,
+            layerFilter: layerFilterObj,
+            style: "style_01"
+        };
+        const updatedFilterObj = resetLayerLegendFilter(layer, 'style', 'style_02');
+        expect(updatedFilterObj).toBeTruthy();
+        expect(updatedFilterObj.filters.length).toEqual(0);
+        expect(updatedFilterObj.filters.find(i => i.id === 'interactiveLegend')).toBeFalsy();
+    });
 });