Skip to content

Commit

Permalink
geosolutions-it#10026: Interactive legend for TOC layers
Browse files Browse the repository at this point in the history 
- clean the code by remove all non related to wms interactive legend part
  • Loading branch information
@mahmoudadel54
mahmoudadel54 committed Apr 15, 2024
1 parent 3af0429 commit c76bd16
Show file tree
Hide file tree
Showing 6 changed files with 23 additions and 302 deletions.
1 change: 0 additions & 1 deletion web/client/api/catalog/WFS.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,6 @@ const searchAndPaginate = (json = {}, startPosition, maxRecords, text) => {
};

const recordToLayer = (record) => {
// this is for getting the configration of interactive legend
return {
type: record.type || "wfs",
search: {
Expand Down
14 changes: 7 additions & 7 deletions web/client/components/catalog/editor/AdvancedSettings/CommonAdvancedSettings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,13 @@ export default ({
</Checkbox>
</FormGroup>
{!isNil(service.type) && service.type === "wfs" &&
<FormGroup controlId="allowUnsecureLayers" key="allowUnsecureLayers">
<Checkbox
onChange={(e) => onChangeServiceProperty("allowUnsecureLayers", e.target.checked)}
checked={!isNil(service.allowUnsecureLayers) ? service.allowUnsecureLayers : false}>
<Message msgId="catalog.allowUnsecureLayers.label" />&nbsp;<InfoPopover text={<Message msgId="catalog.allowUnsecureLayers.tooltip" />} />
</Checkbox>
</FormGroup>}
<FormGroup controlId="allowUnsecureLayers" key="allowUnsecureLayers">
<Checkbox
onChange={(e) => onChangeServiceProperty("allowUnsecureLayers", e.target.checked)}
checked={!isNil(service.allowUnsecureLayers) ? service.allowUnsecureLayers : false}>
<Message msgId="catalog.allowUnsecureLayers.label" />&nbsp;<InfoPopover text={<Message msgId="catalog.allowUnsecureLayers.tooltip" />} />
</Checkbox>
</FormGroup>}
{!isNil(service.type) && service.type === "cog" &&
<FormGroup controlId="fetchMetadata" key="fetchMetadata">
<Checkbox
Expand Down
21 changes: 3 additions & 18 deletions web/client/plugins/TOC/components/VectorLegend.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,28 +8,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import RuleLegendIcon from '../../../components/styleeditor/RuleLegendIcon';
import {parseGeoStylerFilterToCql} from '../../../utils/StyleEditorUtils';

/**
* VectorLegend renders the legend given a valid vector style
* @prop {object} style a layer style object in geostyler format
*/
function VectorLegend({ style, layer, onLayerFilterByLegend }) {
const handleLegendFilter = (filter) => {
if (!layer?.enableInteractiveLegend || !layer?.visibility) return;
const cql = filter ? parseGeoStylerFilterToCql(filter) : filter;
const isLegendFilterIncluded = layer?.layerFilter?.filters?.find(f=>f.id === 'interactiveLegend');
const prevFilter = isLegendFilterIncluded ? isLegendFilterIncluded?.filters?.[0]?.body : '';
onLayerFilterByLegend(layer.id, 'layers', cql === prevFilter ? '' : cql);
};
function VectorLegend({ style }) {
const renderRules = (rules) => {
return (rules || []).map((rule) => {
const isLegendFilterIncluded = layer?.layerFilter?.filters?.find(f=>f.id === 'interactiveLegend');
const prevFilter = isLegendFilterIncluded ? isLegendFilterIncluded?.filters?.[0]?.body : '';
// if isLegendFilterIncluded && rule.filter ---> get cql to compare current with prev filter
const ruleFilter = rule.filter && isLegendFilterIncluded ? parseGeoStylerFilterToCql(rule.filter) : '';

return (<div className={`wfs-legend-rule ${layer?.enableInteractiveLegend && layer?.visibility ? 'json-legend-rule' : ''} ${ruleFilter && prevFilter === ruleFilter ? 'active' : ''}`} key={rule.ruleId || rule.name} onClick={()=>handleLegendFilter(rule?.filter)}>
return (<div className="ms-vector-legend-rule" key={rule.ruleId || rule.name}>
<RuleLegendIcon rule={rule} />
<span>{rule.name || ''}</span>
</div>);
Expand All @@ -46,9 +33,7 @@ function VectorLegend({ style, layer, onLayerFilterByLegend }) {
}

VectorLegend.propTypes = {
style: PropTypes.object,
layer: PropTypes.object,
onLayerFilterByLegend: PropTypes.func
style: PropTypes.object
};

export default VectorLegend;
267 changes: 8 additions & 259 deletions web/client/plugins/TOC/components/__tests__/VectorLegend-test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('VectorLegend module component', () => {
}
};
ReactDOM.render(<VectorLegend style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule');
const ruleElements = document.querySelectorAll('.ms-vector-legend-rule');
expect(ruleElements.length).toBe(1);
const textElement = ruleElements[0].getElementsByTagName('span');
expect(textElement[0].innerHTML).toBe('Some Line');
Expand Down Expand Up @@ -80,7 +80,7 @@ describe('VectorLegend module component', () => {
}
};
ReactDOM.render(<VectorLegend style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule');
const ruleElements = document.querySelectorAll('.ms-vector-legend-rule');
expect(ruleElements.length).toBe(1);
const textElement = ruleElements[0].getElementsByTagName('span');
expect(textElement[0].innerHTML).toBe('Some Line');
Expand Down Expand Up @@ -113,7 +113,7 @@ describe('VectorLegend module component', () => {
}
};
ReactDOM.render(<VectorLegend style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule');
const ruleElements = document.querySelectorAll('.ms-vector-legend-rule');
expect(ruleElements.length).toBe(1);
const textElement = ruleElements[0].getElementsByTagName('span');
expect(textElement[0].innerHTML).toBe('Some Line');
Expand Down Expand Up @@ -148,7 +148,7 @@ describe('VectorLegend module component', () => {
}
};
ReactDOM.render(<VectorLegend style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule');
const ruleElements = document.querySelectorAll('.ms-vector-legend-rule');
expect(ruleElements.length).toBe(1);
const textElement = ruleElements[0].getElementsByTagName('span');
expect(textElement[0].innerHTML).toBe('Some polygon');
Expand Down Expand Up @@ -186,7 +186,7 @@ describe('VectorLegend module component', () => {
}
};
ReactDOM.render(<VectorLegend style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule');
const ruleElements = document.querySelectorAll('.ms-vector-legend-rule');
expect(ruleElements.length).toBe(1);
const textElement = ruleElements[0].getElementsByTagName('span');
expect(textElement[0].innerHTML).toBe('Some mark');
Expand Down Expand Up @@ -220,7 +220,7 @@ describe('VectorLegend module component', () => {
}
};
ReactDOM.render(<VectorLegend style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule');
const ruleElements = document.querySelectorAll('.ms-vector-legend-rule');
expect(ruleElements.length).toBe(1);
const textElement = ruleElements[0].getElementsByTagName('span');
expect(textElement[0].getAttribute('class')).toBe('glyphicon glyphicon-point');
Expand Down Expand Up @@ -283,7 +283,7 @@ describe('VectorLegend module component', () => {
}
};
ReactDOM.render(<VectorLegend style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule');
const ruleElements = document.querySelectorAll('.ms-vector-legend-rule');
expect(ruleElements.length).toBe(3);
});

Expand All @@ -310,259 +310,8 @@ describe('VectorLegend module component', () => {
}
};
ReactDOM.render(<VectorLegend style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule');
const ruleElements = document.querySelectorAll('.ms-vector-legend-rule');
const textElement = ruleElements[0].getElementsByTagName('span');
expect(textElement[0].innerHTML).toBe('');
});

it('Should render interactive item for "Polygon" symbolizer', () => {
const style = {
format: 'geostyler',
body: {
rules: [
{
"name": ">= 159.055 and < 137771.05799999996",
"filter": [
"&&",
[
">=",
"LAND_KM",
159.055
],
[
"<",
"LAND_KM",
137771.05799999996
]
],
"symbolizers": [
{
"kind": "Fill",
"color": "#fff7ec",
"fillOpacity": 1,
"outlineColor": "#777777",
"outlineWidth": 1,
"msClassificationType": "both",
"msClampToGround": true
}
]
},
{
"name": ">= 137771.05799999996 and < 275383.0609999999",
"filter": [
"&&",
[
">=",
"LAND_KM",
137771.05799999996
],
[
"<",
"LAND_KM",
275383.0609999999
]
],
"symbolizers": [
{
"kind": "Fill",
"color": "#fdd49e",
"fillOpacity": 1,
"outlineColor": "#777777",
"outlineWidth": 1,
"msClassificationType": "both",
"msClampToGround": true
}
]
}
]
}
};
const l = {
name: 'layer00',
title: 'Layer',
visibility: true,
storeIndex: 9,
type: 'wfs',
url: 'http://localhost:8080/geoserver/wfs',
enableInteractiveLegend: true
};
ReactDOM.render(<VectorLegend layer={l} style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule.json-legend-rule');
expect(ruleElements.length).toBe(2);
const textElement = ruleElements[0].getElementsByTagName('span');
expect(textElement[0].innerText).toBe('>= 159.055 and < 137771.05799999996');
const iconContainerElement = ruleElements[0].querySelectorAll('.ms-rule-legend-icon');
expect(iconContainerElement.length).toBe(1);
expect(iconContainerElement[0].innerHTML).toBeTruthy();
});

it('Should render interactive item for "Line" symbolizer', () => {
const style = {
format: 'geostyler',
body: {
rules: [
{
"name": ">= 0.000145169491362 and < 4.969539144872505",
"filter": [
"&&",
[
">=",
"l_mile",
0.000145169491362
],
[
"<",
"l_mile",
4.969539144872505
]
],
"symbolizers": [
{
"kind": "Line",
"color": "#7f0000",
"width": 1,
"opacity": 1,
"cap": "round",
"join": "round",
"msClampToGround": true
}
]
},
{
"name": ">= 4.969539144872505 and < 9.938933120253648",
"filter": [
"&&",
[
">=",
"l_mile",
4.969539144872505
],
[
"<",
"l_mile",
9.938933120253648
]
],
"symbolizers": [
{
"kind": "Line",
"color": "#d7301f",
"width": 1,
"opacity": 1,
"cap": "round",
"join": "round",
"msClampToGround": true
}
]
}
]
}
};
const l = {
name: 'layer00',
title: 'Layer',
visibility: true,
storeIndex: 9,
type: 'wfs',
url: 'http://localhost:8080/geoserver/wfs',
enableInteractiveLegend: true
};
ReactDOM.render(<VectorLegend layer={l} style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule.json-legend-rule');
expect(ruleElements.length).toBe(2);
const textElement = ruleElements[0].getElementsByTagName('span');
expect(textElement[0].innerText).toBe('>= 0.000145169491362 and < 4.969539144872505');
const iconContainerElement = ruleElements[0].querySelectorAll('.ms-rule-legend-icon');
expect(iconContainerElement.length).toBe(1);
expect(iconContainerElement[0].innerHTML).toBeTruthy();
});

it('Should render interactive item for "Point" symbolizer', () => {
const style = {
format: 'geostyler',
body: {
rules: [
{
"name": ">= 487 and < 790.2",
"filter": [
"&&",
[
">=",
"gid",
487
],
[
"<",
"gid",
790.2
]
],
"symbolizers": [
{
"kind": "Mark",
"wellKnownName": "Circle",
"color": "#fff7ec",
"fillOpacity": 1,
"strokeColor": "#777777",
"strokeOpacity": 1,
"strokeWidth": 1,
"radius": 16,
"rotate": 0,
"msBringToFront": false,
"msHeightReference": "none"
}
]
},
{
"name": ">= 790.2 and < 1093.4",
"filter": [
"&&",
[
">=",
"gid",
790.2
],
[
"<",
"gid",
1093.4
]
],
"symbolizers": [
{
"kind": "Mark",
"wellKnownName": "Circle",
"color": "#fdd49e",
"fillOpacity": 1,
"strokeColor": "#777777",
"strokeOpacity": 1,
"strokeWidth": 1,
"radius": 16,
"rotate": 0,
"msBringToFront": false,
"msHeightReference": "none"
}
]
}
]
}
};
const l = {
name: 'layer00',
title: 'Layer',
visibility: true,
storeIndex: 9,
type: 'wfs',
url: 'http://localhost:8080/geoserver/wfs',
enableInteractiveLegend: true
};
ReactDOM.render(<VectorLegend layer={l} style={style} />, document.getElementById('container'));
const ruleElements = document.querySelectorAll('.wfs-legend-rule.json-legend-rule');
expect(ruleElements.length).toBe(2);
const textElement = ruleElements[0].getElementsByTagName('span');
expect(textElement[0].innerText).toBe('>= 487 and < 790.2');
const iconContainerElement = ruleElements[0].querySelectorAll('.ms-rule-legend-icon');
expect(iconContainerElement.length).toBe(1);
expect(iconContainerElement[0].innerHTML).toBeTruthy();
});
});
Loading

0 comments on commit c76bd16

Please sign in to comment.