From 5fd0a9bc4983c43feb5418e3ec65e08a70689615 Mon Sep 17 00:00:00 2001 From: ujbolivar Date: Tue, 26 Mar 2024 11:28:07 +0100 Subject: [PATCH] CLMS-3095 (bug): legend title not displaying correctly --- package.json | 2 +- src/components/MapViewer/LegendWidget.jsx | 147 +++++++++++++--------- src/components/MapViewer/MenuWidget.jsx | 18 ++- 3 files changed, 101 insertions(+), 66 deletions(-) diff --git a/package.json b/package.json index 75a20f29..838b8252 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "@fortawesome/fontawesome-svg-core": "1.2.35", "@fortawesome/free-solid-svg-icons": "5.15.3", "@fortawesome/react-fontawesome": "0.1.14", - "esri-loader": "3.1.0", + "esri-loader": "3.4.0", "highcharts": "^9.3.2", "highcharts-react-official": "^3.1.0", "react-datepicker": "4.10.0" diff --git a/src/components/MapViewer/LegendWidget.jsx b/src/components/MapViewer/LegendWidget.jsx index 357fbded..b9eba555 100644 --- a/src/components/MapViewer/LegendWidget.jsx +++ b/src/components/MapViewer/LegendWidget.jsx @@ -68,8 +68,9 @@ class LegendWidget extends React.Component { brokenLegendImagePatch() { let img = {}; const collection = document.getElementsByClassName('esri-legend__symbol'); + console.log('collection length:', collection.length); if (collection.length === 0) return; - Array.prototype.forEach.call(collection, (element) => { + Array.prototype.forEach.call(collection, (element, index) => { if (element.hasChildNodes()) { for (let i = 0; i < element.childNodes.length; i++) { let child = element.childNodes[i]; @@ -79,71 +80,98 @@ class LegendWidget extends React.Component { } } } else img = element; - if (!(img.complete && img.naturalHeight !== 0)) { - // If img src returns a broken link - if (img?.src?.includes('all_present_lc_a_pol')) { - img.src = this.props.hotspotData.all_present_lc[ - 'all_present_lc_a_pol' - ].FilterStaticImageLegend; - - img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent = - 'Dichotomous Present Land Cover in selected hot spots'; - } else if (img?.src?.includes('all_present_lc_b_pol')) { - img.src = this.props.hotspotData.all_present_lc[ - 'all_present_lc_b_pol' - ].FilterStaticImageLegend; - - img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent = - 'Modular Present Land Cover in selected hot spots'; - } else if (img?.src?.includes('all_lcc_a_pol')) { - img.src = this.props.hotspotData.all_lcc[ - 'all_lcc_a_pol' - ].FilterStaticImageLegend; - - img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent = - 'Dichotomous Land Cover Change in selected hot spots'; - } else if (img?.src?.includes('all_lcc_b_pol')) { - img.src = this.props.hotspotData.all_lcc[ - 'all_lcc_b_pol' - ].FilterStaticImageLegend; - - img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent = - 'Modular Land Cover Change in selected hot spots'; - } else if (img?.src?.includes('cop_klc')) { - img.src = this.props.hotspotData.cop_klc[ - 'cop_klc' - ].FilterStaticImageLegend; - - img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent = - 'Key Landscapes for Conservation borders in selected hotspots'; - } else if (img?.src?.includes('protected_areas')) { - img.src = this.props.hotspotData.protected_areas[ - 'protected_areas' - ].FilterStaticImageLegend; - img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent = - 'Protected Areas in Key Landscapes for Conservation borders in selected hot-spots'; - } /* else if (img.style) { + //if (!(img.complete && img.naturalHeight !== 0)) { + // If img src returns a broken link + let imgTitle = document.querySelector('div.esri-legend__layer-caption'); + let tag; + let replacementText; + console.log(index); + console.log(imgTitle.textContent); + if (img?.src?.includes('all_present_lc_a_pol')) { + //img.src = this.props.hotspotData.all_present_lc[ + // 'all_present_lc_a_pol' + //].FilterStaticImageLegend; + tag = 'all_present_lc_a_pol'; + replacementText = + 'Dichotomous Present Land Cover in selected Hot Spots'; + if (imgTitle && imgTitle.textContent === tag) { + imgTitle.textContent = replacementText; + } + //img.src = this.props.hotspotData.all_present_lc[ + // 'all_present_lc_b_pol' + //].FilterStaticImageLegend; + } else if (img?.src?.includes('all_present_lc_b_pol')) { + tag = 'all_present_lc_b_pol'; + replacementText = 'Modular Present Land Cover in selected Hot Spots'; + if (imgTitle && imgTitle.textContent === tag) { + imgTitle.textContent = replacementText; + } + // img.parentNode.parentNode.parentNode.parentNode.firstElementChild.textContent = + // 'Modular Present Land Cover in selected hot spots'; + } else if (img?.src?.includes('all_lcc_a_pol')) { + //img.src = this.props.hotspotData.all_lcc[ + // 'all_lcc_a_pol' + //].FilterStaticImageLegend; + tag = 'all_lcc_a_pol'; + replacementText = 'Dichotomous Land Cover Change in selected Hot Spots'; + if (imgTitle && imgTitle.textContent === tag) { + imgTitle.textContent = replacementText; + } + } else if (img?.src?.includes('all_lcc_b_pol')) { + //img.src = this.props.hotspotData.all_lcc[ + // 'all_lcc_b_pol' + //].FilterStaticImageLegend; + tag = 'all_lcc_b_pol'; + replacementText = 'Modular Land Cover Change in selected Hot Spots'; + if (imgTitle && imgTitle.textContent === tag) { + imgTitle.textContent = replacementText; + } + } else if (img?.src?.includes('cop_klc')) { + //img.src = this.props.hotspotData.cop_klc[ + // 'cop_klc' + //].FilterStaticImageLegend; + tag = 'cop_klc'; + replacementText = + 'Key Landscapes for Conservation borders in selected Hot Spots'; + if (imgTitle && imgTitle.textContent === tag) { + imgTitle.textContent = replacementText; + } + } else if (img?.src?.includes('protected_areas')) { + //img.src = this.props.hotspotData.protected_areas[ + // 'protected_areas' + //].FilterStaticImageLegend; + tag = 'protected_areas'; + replacementText = + 'Protected Areas in Key Landscapes for Conservation borders in selected Hot Spots'; + if (imgTitle && imgTitle.textContent === tag) { + imgTitle.textContent = replacementText; + } + } /* else if (img.style) { img.parentNode.parentNode.parentNode.parentNode.firstElementChild.style.display = - 'none'; + 'none'; img.style.display = 'none'; - + if (element.parentNode.querySelector('span')) return; - + let span = document.createElement('span'); span.innerHTML = 'No legend available'; element.parentNode.appendChild(span); } */ - if ( - typeof img?.closest !== 'undefined' && - img?.closest('.esri-legend__service')?.firstElementChild?.nodeName === - 'H3' && - img?.closest('.esri-legend__service')?.firstElementChild - ?.textContent === 'WMS' - ) { - img.closest('.esri-legend__service').firstElementChild.style.display = - 'none'; - } + if ( + typeof img?.closest !== 'undefined' && + img?.closest('.esri-legend__service')?.firstElementChild?.nodeName === + 'H3' && + img?.closest('.esri-legend__service')?.firstElementChild + ?.textContent === 'WMS' + ) { + //img.closest('.esri-legend__service').firstElementChild.style.display = + // 'none'; } + //} + console.log(index); + console.log(imgTitle.textContent); + tag = ''; + replacementText = ''; }); } @@ -219,7 +247,8 @@ class LegendWidget extends React.Component { this.LegendWidget.when(() => { this.LegendWidget.activeLayerInfos.on('after-changes', (event) => { this.setState({ loading: true }); - this.scanImages(); + //this.scanImages(); + //this.brokenLegendImagePatch(); }); }); } diff --git a/src/components/MapViewer/MenuWidget.jsx b/src/components/MapViewer/MenuWidget.jsx index 74d52d84..d165f04c 100644 --- a/src/components/MapViewer/MenuWidget.jsx +++ b/src/components/MapViewer/MenuWidget.jsx @@ -772,7 +772,10 @@ class MenuWidget extends React.Component { let order = counter - index; let activeLayers = document.querySelectorAll('.active-layer'); activeLayers.forEach((item) => { - if (layer === item.getAttribute('layer-id')) { + if ( + item.parentElement && + layer === item.getAttribute('layer-id') + ) { item.parentElement.insertBefore(item, activeLayers[order]); } }); @@ -786,11 +789,14 @@ class MenuWidget extends React.Component { sessionStorage.getItem('layerOpacities'), ); elementOpacities.forEach((element) => { - let id = element.parentElement.parentElement.getAttribute( - 'layer-id', - ); - if (layerOpacities[id]) { - element.dataset.opacity = layerOpacities[id] * 100; + let parentElement = element.parentElement?.parentElement; + if (parentElement) { + let id = element.parentElement.parentElement.getAttribute( + 'layer-id', + ); + if (layerOpacities[id]) { + element.dataset.opacity = layerOpacities[id] * 100; + } } }); }