Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

#10026: Interactive legend for TOC layers [WMS] #10180

Merged
merged 18 commits into from
Apr 22, 2024
Merged
Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
124e01b
#10026: Interactive legend for TOC layers
mahmoudadel54 Mar 24, 2024
c291f32
#10026: Interactive legend for TOC layers
mahmoudadel54 Apr 2, 2024
85617f2
#10026: Interactive legend for TOC layers
mahmoudadel54 Apr 8, 2024
5277175
#10026: Interactive legend for TOC layers
mahmoudadel54 Apr 9, 2024
a29974f
#10026: Interactive legend for TOC layers
mahmoudadel54 Apr 9, 2024
161178a
#10026: Interactive legend for TOC layers
mahmoudadel54 Apr 10, 2024
b0a2693
#10026: Interactive legend for TOC layers
mahmoudadel54 Apr 15, 2024
3af0429
#10026: Interactive legend for TOC layers
mahmoudadel54 Apr 15, 2024
c76bd16
#10026: Interactive legend for TOC layers
mahmoudadel54 Apr 15, 2024
d177ccf
#10026: Interactive legend for TOC layers [Resolve review comments]
mahmoudadel54 Apr 18, 2024
6b7e7e3
#10026: Interactive legend for TOC layers [Resolve review comments]
mahmoudadel54 Apr 19, 2024
ff42bc6
#10026: Interactive legend for TOC layers [Resolve review comments]
mahmoudadel54 Apr 19, 2024
7b9bc99
#10026: Interactive legend for TOC layers [Resolve review comments]
mahmoudadel54 Apr 19, 2024
bab1218
Update layerFilter.js
mahmoudadel54 Apr 19, 2024
2c0eaa0
#10026: Interactive legend for TOC layers [WMS]
mahmoudadel54 Apr 19, 2024
65e5deb
#10026: Interactive legend for TOC layers [WMS]
mahmoudadel54 Apr 19, 2024
4aa80c9
#10026: Interactive legend for TOC layers [Resolve review comments]
mahmoudadel54 Apr 22, 2024
d39a0d0
Merge branch 'feature_10026' of https://github.com/mahmoudadel54/MapS…
mahmoudadel54 Apr 22, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
#10026: Interactive legend for TOC layers [Resolve review 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 committed Apr 22, 2024
commit 4aa80c9c28af7d1086bc54aac6f8ad92c604ff1c
Original file line number Diff line number Diff line change
@@ -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>);
163 changes: 162 additions & 1 deletion web/client/utils/__tests__/FilterUtils-test.js
Original file line number Diff line number Diff line change
@@ -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();
});
});