From c76bd16a2358914baf14cdc7e962c0a334901783 Mon Sep 17 00:00:00 2001 From: mahmoudadel54 Date: Mon, 15 Apr 2024 14:32:55 +0200 Subject: [PATCH] #10026: Interactive legend for TOC layers - clean the code by remove all non related to wms interactive legend part --- web/client/api/catalog/WFS.js | 1 - .../CommonAdvancedSettings.jsx | 14 +- .../plugins/TOC/components/VectorLegend.jsx | 21 +- .../__tests__/VectorLegend-test.jsx | 267 +----------------- .../plugins/styleeditor/VectorStyleEditor.jsx | 14 +- web/client/themes/default/less/toc.less | 8 +- 6 files changed, 23 insertions(+), 302 deletions(-) diff --git a/web/client/api/catalog/WFS.js b/web/client/api/catalog/WFS.js index 4491e3400c..6aa69deb20 100644 --- a/web/client/api/catalog/WFS.js +++ b/web/client/api/catalog/WFS.js @@ -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: { diff --git a/web/client/components/catalog/editor/AdvancedSettings/CommonAdvancedSettings.jsx b/web/client/components/catalog/editor/AdvancedSettings/CommonAdvancedSettings.jsx index 40d3c2da5a..5368fe49b9 100644 --- a/web/client/components/catalog/editor/AdvancedSettings/CommonAdvancedSettings.jsx +++ b/web/client/components/catalog/editor/AdvancedSettings/CommonAdvancedSettings.jsx @@ -40,13 +40,13 @@ export default ({ {!isNil(service.type) && service.type === "wfs" && - - onChangeServiceProperty("allowUnsecureLayers", e.target.checked)} - checked={!isNil(service.allowUnsecureLayers) ? service.allowUnsecureLayers : false}> -  } /> - - } + + onChangeServiceProperty("allowUnsecureLayers", e.target.checked)} + checked={!isNil(service.allowUnsecureLayers) ? service.allowUnsecureLayers : false}> +  } /> + + } {!isNil(service.type) && service.type === "cog" && { - 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 (
handleLegendFilter(rule?.filter)}> + return (
{rule.name || ''}
); @@ -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; diff --git a/web/client/plugins/TOC/components/__tests__/VectorLegend-test.jsx b/web/client/plugins/TOC/components/__tests__/VectorLegend-test.jsx index 81a6ec24be..6dbf7e74cf 100644 --- a/web/client/plugins/TOC/components/__tests__/VectorLegend-test.jsx +++ b/web/client/plugins/TOC/components/__tests__/VectorLegend-test.jsx @@ -47,7 +47,7 @@ describe('VectorLegend module component', () => { } }; ReactDOM.render(, 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'); @@ -80,7 +80,7 @@ describe('VectorLegend module component', () => { } }; ReactDOM.render(, 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'); @@ -113,7 +113,7 @@ describe('VectorLegend module component', () => { } }; ReactDOM.render(, 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'); @@ -148,7 +148,7 @@ describe('VectorLegend module component', () => { } }; ReactDOM.render(, 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'); @@ -186,7 +186,7 @@ describe('VectorLegend module component', () => { } }; ReactDOM.render(, 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'); @@ -220,7 +220,7 @@ describe('VectorLegend module component', () => { } }; ReactDOM.render(, 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'); @@ -283,7 +283,7 @@ describe('VectorLegend module component', () => { } }; ReactDOM.render(, document.getElementById('container')); - const ruleElements = document.querySelectorAll('.wfs-legend-rule'); + const ruleElements = document.querySelectorAll('.ms-vector-legend-rule'); expect(ruleElements.length).toBe(3); }); @@ -310,259 +310,8 @@ describe('VectorLegend module component', () => { } }; ReactDOM.render(, 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(, 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(, 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(, 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(); - }); }); diff --git a/web/client/plugins/styleeditor/VectorStyleEditor.jsx b/web/client/plugins/styleeditor/VectorStyleEditor.jsx index 88e3abab9a..857ec072a3 100644 --- a/web/client/plugins/styleeditor/VectorStyleEditor.jsx +++ b/web/client/plugins/styleeditor/VectorStyleEditor.jsx @@ -8,7 +8,6 @@ import React, { useEffect, useRef, useState } from 'react'; import uniq from 'lodash/uniq'; -import isEqual from 'lodash/isEqual'; import { StyleEditor } from './StyleCodeEditor'; import TextareaEditor from '../../components/styleeditor/Editor'; import VisualStyleEditor from '../../components/styleeditor/VisualStyleEditor'; @@ -78,8 +77,7 @@ function VectorStyleEditor({ 'Courier New', 'Brush Script MT' ], - onUpdateNode = () => {}, - resetLegendFilter = () => {} + onUpdateNode = () => {} }) { const request = capabilitiesRequest[layer?.type]; @@ -92,14 +90,9 @@ function VectorStyleEditor({ function handleClearStyle() { setError(null); onUpdateNode(layer.id, 'layers', { style: getVectorDefaultStyle(layer) }); - // apply reset legend filter in case of change style - if (['wfs'].includes(layer.type)) { - resetLegendFilter('style'); - } } function handleUpdateMetadata(metadata) { - const isStyleChanged = !isEqual(style.current?.metadata?.styleJSON, metadata?.styleJSON); style.current = { ...style.current, metadata: { @@ -107,11 +100,6 @@ function VectorStyleEditor({ ...metadata } }; - // apply reset legend filter in case of change style - if (isStyleChanged && ['wfs'].includes(layer.type) && layer?.enableInteractiveLegend) { - resetLegendFilter('style', style.current?.metadata?.styleJSON); - } - onUpdateNode(layer?.id, 'layers', { style: { ...style.current } }); diff --git a/web/client/themes/default/less/toc.less b/web/client/themes/default/less/toc.less index a3d80a771b..88956af5c5 100644 --- a/web/client/themes/default/less/toc.less +++ b/web/client/themes/default/less/toc.less @@ -88,10 +88,10 @@ .background-color-var(@theme-vars[selected-bg]); .outline-color-var(@theme-vars[focus-color]); } - .wms-json-legend-rule:hover, .wfs-legend-rule.json-legend-rule:hover { + .wms-json-legend-rule:hover { .color-var(@theme-vars[primary]); } - .wms-json-legend-rule.active, .wfs-legend-rule.json-legend-rule.active { + .wms-json-legend-rule.active { .background-color-var(@theme-vars[primary]); .color-var(@theme-vars[primary-contrast]); } @@ -411,13 +411,13 @@ display: flex; flex-direction: column; gap: 2px; - .ms-vector-legend-rule, .wfs-legend-rule { + .ms-vector-legend-rule { display: flex; } .ms-rule-legend-icon { margin-right: 4px; } } -.wms-json-legend-rule:hover, .wfs-legend-rule.json-legend-rule:hover{ +.wms-json-legend-rule:hover { cursor: pointer; } \ No newline at end of file