From 03ea83e6d8b7763d32e6e67c34a745f119e23191 Mon Sep 17 00:00:00 2001 From: mahmoud adel <58145645+mahmoudadel54@users.noreply.github.com> Date: Mon, 17 Jun 2024 17:16:26 +0300 Subject: [PATCH] #10235: Interactive legend in dashboard and geostory (#10426) --- .../widgets/builder/wizard/map/NodeEditor.jsx | 1 - .../wizard/map/__tests__/NodeEditor-test.jsx | 43 +++++++++++++++++++ .../widgets/enhancers/legendWidget.js | 3 +- .../components/StyleBasedWMSJsonLegend.jsx | 24 +++-------- .../plugins/mapEditor/DefaultConfiguration.js | 7 +-- 5 files changed, 51 insertions(+), 27 deletions(-) diff --git a/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx b/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx index 75a900f69c..f0ad36cff7 100644 --- a/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx +++ b/web/client/components/widgets/builder/wizard/map/NodeEditor.jsx @@ -41,7 +41,6 @@ export default ({ {tabs.filter(tab => tab.id && tab.id === activeTab).filter(tab => tab.Component).map(tab => ( { const cacheOptionsNode = document.querySelector('.ms-wms-cache-options-toolbar'); expect(cacheOptionsNode).toBeFalsy(); }); + it('interactive legend should be visible in Display tab with nodeEditor(NodeEditor)', () => { + const layer = { + id: 'layer-01', + type: 'wms', + name: 'workspace:layer', + group: 'group-01', + url: '/geoserver/wms', + tileGridStrategy: 'custom', + tileGrids: [ + { + id: 'EPSG:32122x2', + crs: 'EPSG:32122', + scales: [2557541.55271451, 1278770.776357255, 639385.3881786275], + origins: [[403035.4105968763, 414783], [403035.4105968763, 414783], [403035.4105968763, 323121]], + tileSize: [512, 512] + }, + { + id: 'EPSG:900913', + crs: 'EPSG:900913', + scales: [559082263.9508929, 279541131.97544646, 139770565.98772323], + origin: [-20037508.34, 20037508], + tileSize: [256, 256] + } + ] + }; + ReactDOM.render(, document.getElementById("container")); + + const tabs = document.querySelectorAll('.nav-tabs > li > a'); + expect(tabs.length).toBe(3); + + Simulate.click(tabs[1]); + + const legendOptionInput = document.querySelector('.legend-options input'); + const legendOptionInputLabel = document.querySelector('.legend-options span'); + expect(legendOptionInput).toExist(); + expect(legendOptionInputLabel.innerText).toEqual('layerProperties.legendOptions.title'); + }); }); diff --git a/web/client/components/widgets/enhancers/legendWidget.js b/web/client/components/widgets/enhancers/legendWidget.js index 4c4ebc31ab..635e3b23a6 100644 --- a/web/client/components/widgets/enhancers/legendWidget.js +++ b/web/client/components/widgets/enhancers/legendWidget.js @@ -58,7 +58,8 @@ export default compose( ...layer, visibility: updateLayer.visibility, opacity: updateLayer.opacity, - expanded: updateLayer.expanded + expanded: updateLayer.expanded, + layerFilter: updateLayer.layerFilter }; } return layer; diff --git a/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx b/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx index 7f7914d2f4..2bf235f2a2 100644 --- a/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx +++ b/web/client/plugins/TOC/components/StyleBasedWMSJsonLegend.jsx @@ -51,8 +51,7 @@ class StyleBasedWMSJsonLegend extends React.Component { state = { error: false, loading: false, - jsonLegend: {}, - selectedFilters: [] + jsonLegend: {} } componentDidMount() { this.getLegendData(); @@ -65,12 +64,6 @@ class StyleBasedWMSJsonLegend extends React.Component { if (currentLayerStyle !== prevLayerStyle) { this.getLegendData(); } - // reset selected filters in case reset legend filter by external reason like reset from query form/change style ..etc - const isLegendFilterIncluded = this.props?.layer?.layerFilter?.filters?.find(f=>f.id === 'interactiveLegend'); - const legendFilters = isLegendFilterIncluded ? isLegendFilterIncluded?.filters : []; - if (!legendFilters.length && this.state.selectedFilters.length) { - this.setState({selectedFilters: []}); - } } getLegendData() { @@ -81,9 +74,7 @@ class StyleBasedWMSJsonLegend extends React.Component { } this.setState({ loading: true }); getJsonWMSLegend(jsonLegendUrl).then(data => { - const isLegendFilterIncluded = this.props?.layer?.layerFilter?.filters?.find(f=>f.id === 'interactiveLegend'); - const prevFilters = isLegendFilterIncluded ? isLegendFilterIncluded?.filters : []; - this.setState({ jsonLegend: data[0], loading: false, selectedFilters: prevFilters?.map(fil => fil.id) || [] }); + this.setState({ jsonLegend: data[0], loading: false }); }).catch(() => { this.setState({ error: true, loading: false }); }); @@ -139,7 +130,9 @@ class StyleBasedWMSJsonLegend extends React.Component { } renderRules = (rules) => { return (rules || []).map((rule) => { - const isFilterExistBefore = this.state.selectedFilters?.find(f => f === rule.filter); + const isLegendFilterIncluded = this.props?.layer?.layerFilter?.filters?.find(f=>f.id === 'interactiveLegend'); + const legendFilters = isLegendFilterIncluded ? isLegendFilterIncluded?.filters : []; + const isFilterExistBefore = legendFilters?.find(f => f.id === rule.filter); const isFilterDisabled = this.props?.layer?.layerFilter?.disabled; const activeFilter = rule.filter && isFilterExistBefore; return (
this.filterWMSLayerHandler(rule.filter)}> @@ -173,13 +166,6 @@ class StyleBasedWMSJsonLegend extends React.Component { if (!filter || isFilterDisabled) return; const newLayerFilter = updateLayerLegendFilter(this.props?.layer?.layerFilter, filter); this.props.onChange({ layerFilter: newLayerFilter }); - let updatedSelectedFilters = [...this.state.selectedFilters]; - if (!updatedSelectedFilters.includes(filter)) { - updatedSelectedFilters = [...updatedSelectedFilters, filter]; - } else { - updatedSelectedFilters = updatedSelectedFilters.filter(prevFilter => prevFilter !== filter); - } - this.setState({ selectedFilters: updatedSelectedFilters }); }; } diff --git a/web/client/plugins/mapEditor/DefaultConfiguration.js b/web/client/plugins/mapEditor/DefaultConfiguration.js index d8cb7505b0..14f2959489 100644 --- a/web/client/plugins/mapEditor/DefaultConfiguration.js +++ b/web/client/plugins/mapEditor/DefaultConfiguration.js @@ -64,12 +64,7 @@ export default { } }, "AddGroup", "MapFooter", - { - "name": "TOCItemsSettings", - "cfg": { - "hideInteractiveLegendOption": true - } - }, + "TOCItemsSettings", "MapImport", "MapExport", {