@eeacms/volto-arcgis-block 0.1.478 → 0.1.480

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.480](https://github.com/eea/volto-arcgis-block/compare/0.1.479...0.1.480) - 10 September 2026
+
+### [0.1.479](https://github.com/eea/volto-arcgis-block/compare/0.1.478...0.1.479) - 8 September 2026
+
+#### :hammer_and_wrench: Others
+
+- (lint): lint and prettified [Unai Bolivar - [`89001ca`](https://github.com/eea/volto-arcgis-block/commit/89001ca4c7c5bad39c2eeaed0ffd03ecd3fcfbe1)]
+- (lint): lint and prettified [Unai Bolivar - [`f3a2e36`](https://github.com/eea/volto-arcgis-block/commit/f3a2e3602eba3e5279d2a2e080cf8f52cc26690d)]
+- (lint): lint and prettified [Unai Bolivar - [`3ea38aa`](https://github.com/eea/volto-arcgis-block/commit/3ea38aa798a8ac6df3db03651f8f9e02c1b5d9a5)]
+- (lint): lint and prettified [Unai Bolivar - [`5d96946`](https://github.com/eea/volto-arcgis-block/commit/5d969465ba1e55a1048c647d121d82081677daa3)]
+- (bug): finished implementing changes to hot spot widget [Unai Bolivar - [`2bf933b`](https://github.com/eea/volto-arcgis-block/commit/2bf933bc2e0ef57c0df2308ec90c903f643ee27f)]
+- (bug): switched to drop down for the date selection in hot spot widget [Unai Bolivar - [`5c83990`](https://github.com/eea/volto-arcgis-block/commit/5c839901bbb0637a716aaac4f48011622b5325ca)]
+- (bug): improve hotspot widget behavior for new json data. create a reference land cover selection box only for new data [Unai Bolivar - [`d73f58f`](https://github.com/eea/volto-arcgis-block/commit/d73f58ff1addcb06ac61e8947e64e34a2bc29647)]
+- (bug): improve hotspot widget behavior for new json data [Unai Bolivar - [`643c95d`](https://github.com/eea/volto-arcgis-block/commit/643c95d93f375b90c39e16774b866daffa5f11aa)]
+- (bug): improve hotspot server calls to avoid sql injection rejection warning from servers [Unai Bolivar - [`4c76cbf`](https://github.com/eea/volto-arcgis-block/commit/4c76cbf1d78ac2db6225a1b001e02badbd852133)]
 ### [0.1.478](https://github.com/eea/volto-arcgis-block/compare/0.1.477...0.1.478) - 3 September 2026
 
 #### :house: Internal changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.478",
+  "version": "0.1.480",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/HotspotWidget.jsx

@@ -18,8 +18,10 @@ class HotspotWidget extends React.Component {
       showMapMenu: false,
       activeLayers: {},
       selectedArea: null,
+      referenceLcYear: null,
       lcYear: null,
       lccYear: null,
+      hasMultipleLcDates: false,
       activeLayersArray: [],
     };
     this.menuClass =
@@ -46,8 +48,10 @@ class HotspotWidget extends React.Component {
     this.handleApplyFilter = this.handleApplyFilter.bind(this);
     this.filteredLayersToHotspotData =
       this.filteredLayersToHotspotData.bind(this);
+    this.resetHotspotWidgetFilters = this.resetHotspotWidgetFilters.bind(this);
     this.mapCfg = this.props.mapCfg;
     this.selectedArea = null;
+    this.referenceLcYear = null;
     this.lcYear = null;
     this.lccYear = null;
     this.urls = this.props.urls;
@@ -56,6 +60,250 @@ class HotspotWidget extends React.Component {
     this._isMounted = false;
   }
 
+  parseKeymapInfo(rawKeymapInfo) {
+    if (typeof rawKeymapInfo === 'string') {
+      try {
+        return JSON.parse(rawKeymapInfo) || {};
+      } catch (e) {
+        return {};
+      }
+    }
+    if (rawKeymapInfo && typeof rawKeymapInfo === 'object') {
+      return rawKeymapInfo;
+    }
+    return {};
+  }
+
+  getDateOptionsForNode(node) {
+    const keyMapInfoObj = this.parseKeymapInfo(node?.keymap_info);
+    let lccDateList = [];
+    let lcDateList = [];
+    let lccDatesByLcYear = {};
+
+    if (Array.isArray(keyMapInfoObj.dates)) {
+      keyMapInfoObj.dates.forEach((entry) => {
+        const lccDate = Number(
+          entry && typeof entry === 'object' ? entry?.date : entry,
+        );
+        const lcDate = Number(
+          entry && typeof entry === 'object' ? entry?.lc_date : undefined,
+        );
+        if (Number.isFinite(lccDate)) {
+          lccDateList.push(lccDate);
+        }
+        if (Number.isFinite(lcDate)) {
+          lcDateList.push(lcDate);
+          if (!lccDatesByLcYear[lcDate]) {
+            lccDatesByLcYear[lcDate] = [];
+          }
+          if (Number.isFinite(lccDate)) {
+            lccDatesByLcYear[lcDate].push(lccDate);
+          }
+        }
+      });
+    }
+
+    if (Array.isArray(keyMapInfoObj.multiple_lc_dates)) {
+      lcDateList = lcDateList.concat(
+        keyMapInfoObj.multiple_lc_dates
+          .map((yearEntry) =>
+            Number(
+              yearEntry && typeof yearEntry === 'object'
+                ? yearEntry?.date
+                : yearEntry,
+            ),
+          )
+          .filter((year) => Number.isFinite(year)),
+      );
+    }
+
+    const dynamicYearValues = Object.keys(keyMapInfoObj)
+      .filter((key) => /^year\d+$/.test(key))
+      .map((key) => Number(keyMapInfoObj[key]))
+      .filter((year) => Number.isFinite(year));
+    if (dynamicYearValues.length) {
+      lccDateList = lccDateList.concat(dynamicYearValues);
+    }
+
+    const presentLcYearFromKeymap = Number(keyMapInfoObj.year_present_lc);
+    if (Number.isFinite(presentLcYearFromKeymap)) {
+      lcDateList.push(presentLcYearFromKeymap);
+    }
+
+    if (!lccDateList.length && Number.isFinite(Number(node?.lcc_year))) {
+      lccDateList = [Number(node?.lcc_year)];
+    }
+    if (!lcDateList.length && Number.isFinite(Number(node?.present_lc_year))) {
+      lcDateList = [Number(node?.present_lc_year)];
+    }
+
+    lccDateList = Array.from(new Set(lccDateList)).sort((a, b) => a - b);
+    lcDateList = Array.from(new Set(lcDateList)).sort((a, b) => a - b);
+
+    Object.keys(lccDatesByLcYear).forEach((lcDateKey) => {
+      lccDatesByLcYear[lcDateKey] = Array.from(
+        new Set(lccDatesByLcYear[lcDateKey]),
+      ).sort((a, b) => a - b);
+    });
+
+    const mappedLcYears = Object.keys(lccDatesByLcYear).map((year) =>
+      Number(year),
+    );
+    if (!mappedLcYears.length && lcDateList.length && lccDateList.length) {
+      const lccYearsWithoutLcYears = lccDateList.filter(
+        (year) => !lcDateList.includes(year),
+      );
+      if (lccYearsWithoutLcYears.length) {
+        lccDateList = lccYearsWithoutLcYears;
+      }
+      if (lcDateList.length === 1) {
+        lccDatesByLcYear[lcDateList[0]] = [...lccDateList];
+      }
+    }
+
+    return {
+      keyMapInfoObj,
+      lccDateList,
+      lcDateList,
+      lccDatesByLcYear,
+    };
+  }
+
+  getSelectedNodeByArea(selectedArea) {
+    if (!selectedArea || !Array.isArray(this.dataJSONNames)) {
+      return null;
+    }
+
+    return this.dataJSONNames.find(
+      (entry) => entry?.node?.klc_name === selectedArea,
+    )?.node;
+  }
+
+  isReferenceSelectionKlcCode(klcCode) {
+    return klcCode === 'CAF_02' || klcCode === 'CAF_05';
+  }
+
+  getReferenceLcYearSelection(lcDateList) {
+    const selectedReferenceLcYear = Number(this.state.referenceLcYear);
+    if (
+      Number.isFinite(selectedReferenceLcYear) &&
+      lcDateList.includes(selectedReferenceLcYear)
+    ) {
+      return selectedReferenceLcYear;
+    }
+    return null;
+  }
+
+  setPresentLandCoverVisibility(shouldShow) {
+    const presentLandCoverContainer = this.container.current?.querySelector(
+      '.presentLandCoverContainer',
+    );
+    if (presentLandCoverContainer) {
+      presentLandCoverContainer.style.display = shouldShow ? 'block' : 'none';
+    }
+  }
+
+  isHotspotLayerKey(layerKey) {
+    if (typeof layerKey !== 'string') return false;
+    return (
+      layerKey.includes('all_present_lc_') ||
+      layerKey.includes('all_lcc_') ||
+      layerKey.includes('cop_klc') ||
+      layerKey.includes('protected_areas') ||
+      layerKey.endsWith('_filter')
+    );
+  }
+
+  removeLayerFromMap(layer) {
+    if (!layer || !this.props.map) return;
+    try {
+      this.props.map.remove(layer);
+    } catch (e) {}
+    if (layer.visible !== undefined) {
+      layer.visible = false;
+    }
+  }
+
+  clearHotspotLayersFromMap() {
+    const layerRefs = [];
+    if (this.layers && typeof this.layers === 'object') {
+      Object.keys(this.layers).forEach((layerKey) => {
+        if (this.isHotspotLayerKey(layerKey) && this.layers[layerKey]) {
+          layerRefs.push(this.layers[layerKey]);
+        }
+      });
+    }
+
+    const hotspotData = this.props.hotspotData || {};
+    const activeLayers = hotspotData.activeLayers || {};
+    const filteredLayers = hotspotData.filteredLayers || {};
+
+    Object.keys(activeLayers).forEach((layerKey) => {
+      if (this.isHotspotLayerKey(layerKey) && activeLayers[layerKey]) {
+        layerRefs.push(activeLayers[layerKey]);
+      }
+    });
+    Object.keys(filteredLayers).forEach((layerKey) => {
+      if (this.isHotspotLayerKey(layerKey) && filteredLayers[layerKey]) {
+        layerRefs.push(filteredLayers[layerKey]);
+      }
+    });
+
+    Array.from(new Set(layerRefs)).forEach((layer) => {
+      this.removeLayerFromMap(layer);
+    });
+  }
+
+  resetHotspotViewState() {
+    if (this.props.view && this.props.view.popup) {
+      this.props.view.popup.close();
+    }
+    if (this.props.view && this.props.view.graphics) {
+      this.props.view.graphics.removeAll();
+    }
+  }
+
+  resetHotspotWidgetFilters() {
+    const selectBox = document.getElementById('select-klc-area');
+    const selectBoxLcTime = document.getElementById('select-klc-lcTime');
+    const selectBoxLccTime = document.getElementById('select-klc-lccTime');
+
+    if (selectBox) {
+      selectBox.value = 'default';
+    }
+
+    if (selectBoxLcTime) {
+      this.removeOptions(selectBoxLcTime);
+      selectBoxLcTime.options.add(
+        new Option('Select a year', 'default', true, true),
+      );
+      selectBoxLcTime.options[0].disabled = true;
+    }
+
+    if (selectBoxLccTime) {
+      this.removeOptions(selectBoxLccTime);
+      selectBoxLccTime.options.add(
+        new Option('Select a year', 'default', true, true),
+      );
+      selectBoxLccTime.options[0].disabled = true;
+    }
+
+    this.setPresentLandCoverVisibility(false);
+
+    this.selectedArea = null;
+    this.referenceLcYear = null;
+    this.lcYear = null;
+    this.lccYear = null;
+
+    this.setState({
+      selectedArea: null,
+      referenceLcYear: null,
+      lcYear: null,
+      lccYear: null,
+      hasMultipleLcDates: false,
+    });
+  }
+
   loader() {
     return loadModules([
       'esri/layers/WMSLayer',
@@ -185,8 +433,7 @@ class HotspotWidget extends React.Component {
   }
 
   buildCqlFilter(klcCode, date) {
-    const baseFilter =
-      "klc_code LIKE '" + klcCode + "' AND in_pa LIKE 'not_defined'";
+    const baseFilter = "klc_code='" + klcCode + "' AND in_pa='not_defined'";
     if (!Number.isFinite(Number(date))) {
       return baseFilter;
     }
@@ -208,38 +455,13 @@ class HotspotWidget extends React.Component {
     };
   }
 
-  resolveLccDateOptions(
-    klcCode,
-    selectedLcYear,
-    lccDatesByLcYear,
-    lccDateList,
-  ) {
-    const klcLcDateMap = {
-      CAF_02: {
-        2016: [2000, 2019],
-        2019: [2024],
-      },
-      CAF_05: {
-        2015: [2000, 2019],
-        2019: [2024],
-      },
-    };
-
-    const mappedByKlc = klcLcDateMap[klcCode] || null;
-    if (mappedByKlc && Number.isFinite(Number(selectedLcYear))) {
-      const mapped = mappedByKlc[Number(selectedLcYear)];
-      if (Array.isArray(mapped) && mapped.length) {
-        return Array.from(new Set(mapped)).sort((a, b) => a - b);
-      }
-    }
-
+  getLccDateOptionsFromData(selectedLcYear, lccDatesByLcYear, lccDateList) {
     const mappedByData = Number.isFinite(Number(selectedLcYear))
       ? lccDatesByLcYear[Number(selectedLcYear)]
       : null;
     if (Array.isArray(mappedByData) && mappedByData.length) {
       return mappedByData;
     }
-
     return lccDateList;
   }
 
@@ -358,6 +580,11 @@ class HotspotWidget extends React.Component {
   }
 
   async handleApplyFilter(typeFilter) {
+    await Promise.all([this.getLayerParameters(), this.getBBoxData()]);
+    this.clearHotspotLayersFromMap();
+    this.resetHotspotViewState();
+    this.layerModelInit();
+
     let typeLegend;
     let title;
     let activeLayers =
@@ -495,7 +722,7 @@ class HotspotWidget extends React.Component {
         } else {
           this.esriLayer_klc.customLayerParameters =
             this.buildWmsCustomLayerParameters(
-              "klc_code LIKE '" + this.dataKlc_code + "'",
+              "klc_code='" + this.dataKlc_code + "'",
             );
         }
         filterLayer = this.esriLayer_klc;
@@ -519,7 +746,7 @@ class HotspotWidget extends React.Component {
         } else {
           this.esriLayer_pa.customLayerParameters =
             this.buildWmsCustomLayerParameters(
-              "klc_code LIKE '" + this.dataKlc_code + "'",
+              "klc_code='" + this.dataKlc_code + "'",
             );
         }
         filterLayer = this.esriLayer_pa;
@@ -537,8 +764,6 @@ class HotspotWidget extends React.Component {
       if (layerId !== undefined) this.layers[layerId].visible = false;
       let layer = this.props.map.findLayerById(layerId);
       if (layer !== undefined) {
-        layer.clear();
-        layer.destroy();
         this.props.map.remove(layer);
       }
     });
@@ -549,8 +774,6 @@ class HotspotWidget extends React.Component {
       if (layerId !== undefined) this.layers[layerId].visible = false;
       let layer = this.props.map.findLayerById(layerId);
       if (layer !== undefined) {
-        layer.clear();
-        layer.destroy();
         this.props.map.remove(layer);
       }
     });
@@ -628,6 +851,7 @@ class HotspotWidget extends React.Component {
 
   openMenu() {
     if (this.state.showMapMenu) {
+      this.resetHotspotWidgetFilters();
       this.props.mapViewer.setActiveWidget();
       this.container.current.querySelector('.right-panel').style.display =
         'none';
@@ -660,7 +884,7 @@ class HotspotWidget extends React.Component {
     const url =
       window.location.href.replace(window.location.pathname.substring(3), '') +
       this.props.urls.all_geo_klc;
-    fetch(url)
+    return fetch(url)
       .then((data) => {
         if (data.status === 200) {
           return data.json();
@@ -680,18 +904,24 @@ class HotspotWidget extends React.Component {
       this.props.hotspotData && this.props.hotspotData['activeLayers']
         ? Object.keys(this.props.hotspotData['activeLayers'])
         : [];
+    const hasActivePresentLcLayer = activeLayers.some(
+      (layer) =>
+        layer.includes('all_present_lc_a_pol') ||
+        layer.includes('all_present_lc_b_pol') ||
+        layer.includes('lc_filter'),
+    );
+    const hasActiveLccLayer = activeLayers.some(
+      (layer) =>
+        layer.includes('all_lcc_a_pol') ||
+        layer.includes('all_lcc_b_pol') ||
+        layer.includes('lcc_filter'),
+    );
 
-    if (
-      this.container.current.querySelector('.presentLandCoverContainer').style
-        .display === 'block'
-    ) {
+    if (hasActivePresentLcLayer) {
       typeFilter.push('lc');
     }
 
-    if (
-      this.container.current.querySelector('.landCoverChangeContainer').style
-        .display === 'block'
-    ) {
+    if (hasActiveLccLayer) {
       typeFilter.push('lcc');
     }
     activeLayers.forEach((layer) => {
@@ -789,22 +1019,16 @@ class HotspotWidget extends React.Component {
     selectBoxLccTime = document.getElementById('select-klc-lccTime');
     selectBoxLcTime = document.getElementById('select-klc-lcTime');
 
+    let hasMultipleLcDatesForSelection = false;
+    let hasSelectedAreaOption = false;
+
     //this.selectedArea = selectedOption;
 
     for (let i = 0; i < data.length; i++) {
       var option = data[i].node.klc_name;
 
       let rawKeymapInfo = data[i].node.keymap_info;
-      let keyMapInfoObj = {};
-      if (typeof rawKeymapInfo === 'string') {
-        try {
-          keyMapInfoObj = JSON.parse(rawKeymapInfo) || {};
-        } catch (e) {
-          keyMapInfoObj = {};
-        }
-      } else if (rawKeymapInfo && typeof rawKeymapInfo === 'object') {
-        keyMapInfoObj = rawKeymapInfo;
-      }
+      let keyMapInfoObj = this.parseKeymapInfo(rawKeymapInfo);
 
       if (keyMapInfoObj.b_classes === true) {
         modularKLCAreas.push(option);
@@ -830,102 +1054,47 @@ class HotspotWidget extends React.Component {
           selectBoxLccTime.options[0].disabled = true;
         }
 
-        let lccDateList = [];
-        let lcDateList = [];
-        let lccDatesByLcYear = {};
-
-        if (Array.isArray(keyMapInfoObj.dates)) {
-          keyMapInfoObj.dates.forEach((entry) => {
-            const lccDate = Number(
-              entry && typeof entry === 'object' ? entry?.date : entry,
-            );
-            const lcDate = Number(
-              entry && typeof entry === 'object' ? entry?.lc_date : undefined,
-            );
-            if (Number.isFinite(lccDate)) {
-              lccDateList.push(lccDate);
-            }
-            if (Number.isFinite(lcDate)) {
-              lcDateList.push(lcDate);
-              if (!lccDatesByLcYear[lcDate]) {
-                lccDatesByLcYear[lcDate] = [];
-              }
-              if (Number.isFinite(lccDate)) {
-                lccDatesByLcYear[lcDate].push(lccDate);
-              }
-            }
-          });
-        }
-
-        if (Array.isArray(keyMapInfoObj.multiple_lc_dates)) {
-          lcDateList = lcDateList.concat(
-            keyMapInfoObj.multiple_lc_dates
-              .map((yearEntry) =>
-                Number(
-                  yearEntry && typeof yearEntry === 'object'
-                    ? yearEntry?.date
-                    : yearEntry,
-                ),
-              )
-              .filter((year) => Number.isFinite(year)),
-          );
-        }
+        const { lccDateList, lcDateList, lccDatesByLcYear } =
+          this.getDateOptionsForNode(data[i].node);
 
-        const dynamicYearValues = Object.keys(keyMapInfoObj)
-          .filter((key) => /^year\d+$/.test(key))
-          .map((key) => Number(keyMapInfoObj[key]))
-          .filter((year) => Number.isFinite(year));
-        if (dynamicYearValues.length) {
-          lccDateList = lccDateList.concat(dynamicYearValues);
-        }
-
-        const presentLcYearFromKeymap = Number(keyMapInfoObj.year_present_lc);
-        if (Number.isFinite(presentLcYearFromKeymap)) {
-          lcDateList.push(presentLcYearFromKeymap);
-        }
-
-        if (
-          !lccDateList.length &&
-          Number.isFinite(Number(data[i].node.lcc_year))
-        ) {
-          lccDateList = [Number(data[i].node.lcc_year)];
-        }
-        if (
-          !lcDateList.length &&
-          Number.isFinite(Number(data[i].node.present_lc_year))
-        ) {
-          lcDateList = [Number(data[i].node.present_lc_year)];
-        }
+        const isReferenceSelectionArea = this.isReferenceSelectionKlcCode(
+          data[i].node.klc_code,
+        );
+        const selectedReferenceLcYear = isReferenceSelectionArea
+          ? this.getReferenceLcYearSelection(lcDateList)
+          : null;
 
-        lccDateList = Array.from(new Set(lccDateList)).sort((a, b) => a - b);
-        lcDateList = Array.from(new Set(lcDateList)).sort((a, b) => a - b);
+        hasMultipleLcDatesForSelection = lcDateList.length > 1;
+        hasSelectedAreaOption = true;
 
-        Object.keys(lccDatesByLcYear).forEach((lcDateKey) => {
-          lccDatesByLcYear[lcDateKey] = Array.from(
-            new Set(lccDatesByLcYear[lcDateKey]),
-          ).sort((a, b) => a - b);
-        });
+        const lcDateOptionsToUse =
+          isReferenceSelectionArea && Number.isFinite(selectedReferenceLcYear)
+            ? [selectedReferenceLcYear]
+            : isReferenceSelectionArea
+            ? []
+            : lcDateList;
 
-        lcDateList.forEach((element) => {
+        lcDateOptionsToUse.forEach((element) => {
           selectBoxLcTime.options.add(new Option(element, element, element));
         });
 
-        if (this.state.lcYear !== null) {
-          const hasLcYearOption = Array.from(selectBoxLcTime.options).some(
-            (option) => option.value === this.state.lcYear,
-          );
-          selectBoxLcTime.value = hasLcYearOption
-            ? this.state.lcYear
-            : 'default';
-        }
-
-        const selectedLcYear = Number(this.state.lcYear);
-        const lccOptionsToUse = this.resolveLccDateOptions(
-          data[i].node.klc_code,
-          selectedLcYear,
-          lccDatesByLcYear,
-          lccDateList,
-        );
+        const selectedLcYear =
+          isReferenceSelectionArea && Number.isFinite(selectedReferenceLcYear)
+            ? selectedReferenceLcYear
+            : Number(selectBoxLcTime.value);
+        const lccOptionsToUse = hasMultipleLcDatesForSelection
+          ? Number.isFinite(selectedLcYear)
+            ? this.getLccDateOptionsFromData(
+                selectedLcYear,
+                lccDatesByLcYear,
+                lccDateList,
+              )
+            : []
+          : this.getLccDateOptionsFromData(
+              selectedLcYear,
+              lccDatesByLcYear,
+              lccDateList,
+            );
 
         lccOptionsToUse.forEach((element) => {
           selectBoxLccTime.options.add(new Option(element, element, element));
@@ -944,12 +1113,14 @@ class HotspotWidget extends React.Component {
       );
       selectBox.options[0].disabled = true;
     }
+    let hasDatasetSpecificKlcOptions = false;
     if (activeLayers.length) {
       for (let a = 0; a < activeLayers.length; a++) {
         if (
           activeLayers[a].includes('all_lcc_b_pol') ||
           activeLayers[a].includes('all_present_lc_b_pol')
         ) {
+          hasDatasetSpecificKlcOptions = true;
           for (let i = 0; i < modularKLCAreas.length; i++) {
             let option = modularKLCAreas[i];
             selectBox.options.add(new Option(option, option, option));
@@ -960,22 +1131,6 @@ class HotspotWidget extends React.Component {
               continue;
             } else {
               selectBox.value = this.state.selectedArea;
-              if (this.state.lcYear !== null) {
-                const hasLcYearOption = Array.from(
-                  selectBoxLcTime.options,
-                ).some((option) => option.value === this.state.lcYear);
-                selectBoxLcTime.value = hasLcYearOption
-                  ? this.state.lcYear
-                  : 'default';
-              }
-              if (this.state.lccYear !== null) {
-                const hasLccYearOption = Array.from(
-                  selectBoxLccTime.options,
-                ).some((option) => option.value === this.state.lccYear);
-                selectBoxLccTime.value = hasLccYearOption
-                  ? this.state.lccYear
-                  : 'default';
-              }
               break; // move break statement inside the if block
             }
           }
@@ -984,6 +1139,7 @@ class HotspotWidget extends React.Component {
           activeLayers[a].includes('all_lcc_a_pol') ||
           activeLayers[a].includes('all_present_lc_a_pol')
         ) {
+          hasDatasetSpecificKlcOptions = true;
           for (let i = 0; i < dichotomousKLCAreas.length; i++) {
             let option = dichotomousKLCAreas[i];
             selectBox.options.add(new Option(option, option, option));
@@ -994,29 +1150,15 @@ class HotspotWidget extends React.Component {
               continue;
             } else {
               selectBox.value = this.state.selectedArea;
-              if (this.state.lcYear !== null) {
-                const hasLcYearOption = Array.from(
-                  selectBoxLcTime.options,
-                ).some((option) => option.value === this.state.lcYear);
-                selectBoxLcTime.value = hasLcYearOption
-                  ? this.state.lcYear
-                  : 'default';
-              }
-              if (this.state.lccYear !== null) {
-                const hasLccYearOption = Array.from(
-                  selectBoxLccTime.options,
-                ).some((option) => option.value === this.state.lccYear);
-                selectBoxLccTime.value = hasLccYearOption
-                  ? this.state.lccYear
-                  : 'default';
-              }
               break;
             }
           }
           break;
         }
       }
-    } else if (selectBox) {
+    }
+
+    if (!hasDatasetSpecificKlcOptions && selectBox) {
       const allKLCAreas = Array.from(
         new Set(modularKLCAreas.concat(dichotomousKLCAreas)),
       ).sort((a, b) => a.localeCompare(b));
@@ -1034,20 +1176,60 @@ class HotspotWidget extends React.Component {
       }
     }
     if (selectBox.value === 'default') {
+      hasMultipleLcDatesForSelection = false;
       if (selectBoxLcTime) {
         this.removeOptions(selectBoxLcTime);
         selectBoxLcTime.options.add(
-          new Option('Select a region first', 'default', true, true),
+          new Option('Select a year', 'default', true, true),
         );
         selectBoxLcTime.options[0].disabled = true;
       }
       if (selectBoxLccTime) {
         this.removeOptions(selectBoxLccTime);
         selectBoxLccTime.options.add(
-          new Option('Select a region first', 'default', true, true),
+          new Option('Select a year', 'default', true, true),
         );
         selectBoxLccTime.options[0].disabled = true;
       }
+
+      if (
+        this.state.selectedArea !== null ||
+        this.state.referenceLcYear !== null ||
+        this.state.lcYear !== null ||
+        this.state.lccYear !== null
+      ) {
+        this.setState({
+          selectedArea: null,
+          referenceLcYear: null,
+          lcYear: null,
+          lccYear: null,
+        });
+      }
+    }
+
+    if (
+      selectBox &&
+      this.state.selectedArea !== null &&
+      Array.from(selectBox.options).some(
+        (option) => option.value === this.state.selectedArea,
+      )
+    ) {
+      selectBox.value = this.state.selectedArea;
+      hasSelectedAreaOption = true;
+    }
+
+    const hasActivePresentLcLayer = activeLayers.some(
+      (layer) =>
+        layer.includes('all_present_lc_a_pol') ||
+        layer.includes('all_present_lc_b_pol') ||
+        layer.includes('lc_filter'),
+    );
+
+    const shouldShowPresentLandCoverDropdown =
+      hasSelectedAreaOption && hasActivePresentLcLayer;
+    this.setPresentLandCoverVisibility(shouldShowPresentLandCoverDropdown);
+    if (this.state.hasMultipleLcDates !== hasMultipleLcDatesForSelection) {
+      this.setState({ hasMultipleLcDates: hasMultipleLcDatesForSelection });
     }
   }
 
@@ -1079,69 +1261,21 @@ class HotspotWidget extends React.Component {
       return;
     }
 
-    let rawKeymapInfo = selectedNode.keymap_info;
-    let keyMapInfoObj = {};
-    if (typeof rawKeymapInfo === 'string') {
-      try {
-        keyMapInfoObj = JSON.parse(rawKeymapInfo) || {};
-      } catch (e) {
-        keyMapInfoObj = {};
-      }
-    } else if (rawKeymapInfo && typeof rawKeymapInfo === 'object') {
-      keyMapInfoObj = rawKeymapInfo;
-    }
-
-    let lccDateList = [];
-    let lccDatesByLcYear = {};
-
-    if (Array.isArray(keyMapInfoObj.dates)) {
-      keyMapInfoObj.dates.forEach((entry) => {
-        const lccDate = Number(
-          entry && typeof entry === 'object' ? entry?.date : entry,
-        );
-        const lcDate = Number(
-          entry && typeof entry === 'object' ? entry?.lc_date : undefined,
-        );
-        if (Number.isFinite(lccDate)) {
-          lccDateList.push(lccDate);
-        }
-        if (Number.isFinite(lcDate)) {
-          if (!lccDatesByLcYear[lcDate]) {
-            lccDatesByLcYear[lcDate] = [];
-          }
-          if (Number.isFinite(lccDate)) {
-            lccDatesByLcYear[lcDate].push(lccDate);
-          }
-        }
-      });
-    }
-
-    const dynamicYearValues = Object.keys(keyMapInfoObj)
-      .filter((key) => /^year\d+$/.test(key))
-      .map((key) => Number(keyMapInfoObj[key]))
-      .filter((year) => Number.isFinite(year));
-    if (dynamicYearValues.length) {
-      lccDateList = lccDateList.concat(dynamicYearValues);
-    }
-
-    if (!lccDateList.length && Number.isFinite(Number(selectedNode.lcc_year))) {
-      lccDateList = [Number(selectedNode.lcc_year)];
-    }
-
-    lccDateList = Array.from(new Set(lccDateList)).sort((a, b) => a - b);
-    Object.keys(lccDatesByLcYear).forEach((lcDateKey) => {
-      lccDatesByLcYear[lcDateKey] = Array.from(
-        new Set(lccDatesByLcYear[lcDateKey]),
-      ).sort((a, b) => a - b);
-    });
+    const { lccDateList, lcDateList, lccDatesByLcYear } =
+      this.getDateOptionsForNode(selectedNode);
 
-    const selectedLcYear = Number(this.state.lcYear);
-    const lccOptionsToUse = this.resolveLccDateOptions(
-      selectedNode.klc_code,
-      selectedLcYear,
-      lccDatesByLcYear,
-      lccDateList,
-    );
+    const selectedLcYear = this.isReferenceSelectionKlcCode(
+      selectedNode?.klc_code,
+    )
+      ? this.getReferenceLcYearSelection(lcDateList)
+      : Number(this.state.lcYear);
+    const lccOptionsToUse = Number.isFinite(Number(selectedLcYear))
+      ? this.getLccDateOptionsFromData(
+          selectedLcYear,
+          lccDatesByLcYear,
+          lccDateList,
+        )
+      : [];
 
     this.removeOptions(selectBoxLccTime);
     selectBoxLccTime.options.add(
@@ -1188,6 +1322,84 @@ class HotspotWidget extends React.Component {
     );
   }
 
+  renderReferenceLandCoverSelection() {
+    const selectedNode = this.getSelectedNodeByArea(this.state.selectedArea);
+    if (
+      !selectedNode ||
+      !this.isReferenceSelectionKlcCode(selectedNode.klc_code)
+    ) {
+      return null;
+    }
+
+    const { lcDateList } = this.getDateOptionsForNode(selectedNode);
+    if (!lcDateList.length) {
+      return null;
+    }
+
+    const selectedReferenceLcYear = this.state.referenceLcYear || 'default';
+
+    return (
+      <div className="measurement-dropdown-container hotspot-reference-selection">
+        <div className="esri-print__form-section-container">
+          <label>
+            Select first the reference land cover date you want to visualize
+            <select
+              id="select-klc-reference-lc-time"
+              className="esri-select"
+              value={selectedReferenceLcYear}
+              onBlur={() => {}}
+              onChange={(e) => {
+                const nextReferenceLcYear = e.target.value;
+                if (nextReferenceLcYear === 'default') {
+                  this.setState(
+                    {
+                      referenceLcYear: null,
+                      lcYear: null,
+                      lccYear: null,
+                    },
+                    () => {
+                      this.getKLCNames(
+                        this.dataJSONNames,
+                        this.state.selectedArea,
+                      );
+                      this.updateLccOptionsForSelectedLc();
+                      this.disableButton();
+                    },
+                  );
+                  return;
+                }
+                this.setState(
+                  {
+                    referenceLcYear: nextReferenceLcYear,
+                    lcYear: nextReferenceLcYear,
+                    lccYear: null,
+                  },
+                  () => {
+                    this.getKLCNames(
+                      this.dataJSONNames,
+                      this.state.selectedArea,
+                    );
+                    this.updateLccOptionsForSelectedLc();
+                    this.disableButton();
+                  },
+                );
+              }}
+            >
+              <option value="default" disabled>
+                Select a year
+              </option>
+              {lcDateList.map((year) => (
+                <option key={year} value={String(year)}>
+                  {year}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+      </div>
+    );
+  }
+
   render() {
     let divs = [
       {
@@ -1270,6 +1482,7 @@ class HotspotWidget extends React.Component {
                         onChange={(e) => {
                           this.setState({
                             selectedArea: e.target.value,
+                            referenceLcYear: null,
                             lcYear: null,
                             lccYear: null,
                           });
@@ -1280,6 +1493,7 @@ class HotspotWidget extends React.Component {
                     </label>
                   </div>
                 </div>
+                {this.renderReferenceLandCoverSelection()}
                 <div>
                   {divs.map((div, i) => (
                     <div key={i} className={div.className}>
@@ -1361,7 +1575,12 @@ class HotspotWidget extends React.Component {
           this.lccYear = null;
           this.selectedArea = null;
           if (this._isMounted) {
-            this.setState({ lcYear: null, lccYear: null, selectedArea: null });
+            this.setState({
+              lcYear: null,
+              lccYear: null,
+              selectedArea: null,
+              referenceLcYear: null,
+            });
           }
           shouldUpdate = true;
         }
@@ -1398,9 +1617,7 @@ class HotspotWidget extends React.Component {
       return '';
     }
     return Object.keys(activeLayers)
-      .filter(
-        (key) => key.includes('all_present_lc_') || key.includes('all_lcc_'),
-      )
+      .filter((key) => this.isHotspotLayerKey(key))
       .sort()
       .join('|');
   }
@@ -1413,17 +1630,16 @@ class HotspotWidget extends React.Component {
       this.props.hotspotData,
     );
 
-    if (
-      prevHotspotLayerSignature !== nextHotspotLayerSignature &&
-      (this.state.selectedArea !== null ||
-        this.state.lcYear !== null ||
-        this.state.lccYear !== null)
-    ) {
-      this.setState({
-        selectedArea: null,
-        lcYear: null,
-        lccYear: null,
-      });
+    if (prevHotspotLayerSignature !== nextHotspotLayerSignature) {
+      this.clearHotspotLayersFromMap();
+      this.resetHotspotViewState();
+      const newHotspotData = {
+        ...(this.props.hotspotData || {}),
+        filteredLayers: {},
+        filteredLayersData: {},
+      };
+      this.props.hotspotDataHandler(newHotspotData);
+      this.resetHotspotWidgetFilters();
       return;
     }
 
@@ -1437,6 +1653,9 @@ class HotspotWidget extends React.Component {
     if (prevState.lcYear !== this.state.lcYear) {
       this.disableButton();
     }
+    if (prevState.referenceLcYear !== this.state.referenceLcYear) {
+      this.disableButton();
+    }
   }
 }
 export default HotspotWidget;

package/src/components/MapViewer/MenuWidget.jsx

@@ -7358,33 +7358,78 @@ class MenuWidget extends React.Component {
     this.hideOnClickOutsideOpacity();
   }
 
+  getHotspotFilterLayerId(layerId, options = {}) {
+    const { requireActive = false } = options;
+    if (!layerId || typeof layerId !== 'string') {
+      return null;
+    }
+    let filterLayerId = null;
+    if (layerId === 'lcc_filter' || layerId.includes('all_lcc')) {
+      filterLayerId = 'lcc_filter';
+    } else if (layerId === 'lc_filter' || layerId.includes('all_present')) {
+      filterLayerId = 'lc_filter';
+    } else if (layerId === 'klc_filter' || layerId.includes('cop_klc')) {
+      filterLayerId = 'klc_filter';
+    } else if (layerId === 'pa_filter' || layerId.includes('protected_areas')) {
+      filterLayerId = 'pa_filter';
+    }
+
+    if (!filterLayerId) {
+      return null;
+    }
+
+    if (!requireActive || layerId === filterLayerId) {
+      return filterLayerId;
+    }
+
+    const hotspotFilteredLayers =
+      this.props.hotspotData &&
+      this.props.hotspotData.filteredLayers &&
+      typeof this.props.hotspotData.filteredLayers === 'object'
+        ? this.props.hotspotData.filteredLayers
+        : {};
+    const hasFilteredEntry = Object.prototype.hasOwnProperty.call(
+      hotspotFilteredLayers,
+      filterLayerId,
+    );
+    const mapLayer =
+      this.map && typeof this.map.findLayerById === 'function'
+        ? this.map.findLayerById(filterLayerId)
+        : null;
+    const hasVisibleFilterLayer =
+      (this.layers[filterLayerId] && this.layers[filterLayerId].visible) ||
+      (mapLayer && mapLayer.visible);
+
+    if (hasFilteredEntry && (mapLayer || hasVisibleFilterLayer)) {
+      return filterLayerId;
+    }
+
+    return null;
+  }
+
   setOpacity() {
     let layer = document.querySelector('.opacity-slider input').dataset.layer;
     let value = document.querySelector('.opacity-panel input').value;
 
-    if (this.layers['lcc_filter'] && layer.includes('all_lcc')) {
-      this.layers['lcc_filter'].opacity = value / 100;
-      this.saveOpacity(this.layers['lcc_filter'], value / 100);
-    } else if (this.layers['lc_filter'] && layer.includes('all_present')) {
-      this.layers['lc_filter'].opacity = value / 100;
-      this.saveOpacity(this.layers['lc_filter'], value / 100);
-    } else if (this.layers['klc_filter'] && layer.includes('cop_klc')) {
-      this.layers['klc_filter'].opacity = value / 100;
-      this.saveOpacity(this.layers['klc_filter'], value / 100);
-    } else if (this.layers['pa_filter'] && layer.includes('protected_areas')) {
-      this.layers['pa_filter'].opacity = value / 100;
-      this.saveOpacity(this.layers['pa_filter'], value / 100);
-    }
-    this.layers[layer].opacity = value / 100;
-    this.saveOpacity(layer, value / 100);
-    if (
-      this.map.findLayerById(layer) &&
-      this.map.findLayerById(layer) !== null &&
-      (this.map.findLayerById(layer).opacity ||
-        this.map.findLayerById(layer).opacity === 0)
-    ) {
-      this.map.findLayerById(layer).opacity = value / 100;
+    const filterLayerId = this.getHotspotFilterLayerId(layer, {
+      requireActive: true,
+    });
+    const targetLayerId =
+      filterLayerId && this.layers[filterLayerId] ? filterLayerId : layer;
+    if (!this.layers[targetLayerId]) {
+      return;
     }
+    this.layers[targetLayerId].opacity = value / 100;
+    this.saveOpacity(targetLayerId, value / 100);
+
+    const mapLayer =
+      this.map && typeof this.map.findLayerById === 'function'
+        ? this.map.findLayerById(targetLayerId)
+        : null;
+    if (mapLayer && (mapLayer.opacity || mapLayer.opacity === 0)) {
+      mapLayer.opacity = value / 100;
+    }
+
     document.querySelector(
       '.active-layer[layer-id="' + layer + '"] .active-layer-opacity',
     ).dataset.opacity = value;
@@ -7589,46 +7634,31 @@ class MenuWidget extends React.Component {
     if (!isUserServiceLayer) {
       this.findCheckedDataset(elem);
     }
+
+    const filterLayerId = this.getHotspotFilterLayerId(elem.id, {
+      requireActive: true,
+    });
+    const targetLayerId =
+      filterLayerId && this.layers[filterLayerId] ? filterLayerId : elem.id;
+
+    if (!this.layers[targetLayerId]) {
+      return;
+    }
+
     if (
       !this.visibleLayers[elem.id] ||
       this.visibleLayers[elem.id][1] === 'eye'
     ) {
-      this.layers[elem.id].visible = false;
+      this.layers[targetLayerId].visible = false;
       this.visibleLayers[elem.id] = ['fas', 'eye-slash'];
-      if (this.layers['lcc_filter'] && elem.id.includes('all_lcc')) {
-        this.map.remove(this.layers['lcc_filter']);
-        this.layers['lcc_filter'].visible = false;
-      } else if (this.layers['lc_filter'] && elem.id.includes('all_present')) {
-        this.map.remove(this.layers['lc_filter']);
-        this.layers['lc_filter'].visible = false;
-      } else if (this.layers['klc_filter'] && elem.id.includes('cop_klc')) {
-        this.map.remove(this.layers['klc_filter']);
-        this.layers['klc_filter'].visible = false;
-      } else if (
-        this.layers['pa_filter'] &&
-        elem.id.includes('protected_areas')
-      ) {
-        this.map.remove(this.layers['pa_filter']);
-        this.layers['pa_filter'].visible = false;
+      if (targetLayerId !== elem.id && this.layers[elem.id]) {
+        this.layers[elem.id].visible = false;
       }
+      this.map.remove(this.layers[targetLayerId]);
     } else {
-      if (this.layers['lcc_filter'] && elem.id.includes('all_lcc')) {
-        this.map.add(this.layers['lcc_filter']);
-        this.layers['lcc_filter'].visible = true;
-      } else if (this.layers['lc_filter'] && elem.id.includes('all_present')) {
-        this.map.add(this.layers['lc_filter']);
-        this.layers['lc_filter'].visible = true;
-      } else if (this.layers['klc_filter'] && elem.id.includes('cop_klc')) {
-        this.map.add(this.layers['klc_filter']);
-        this.layers['klc_filter'].visible = true;
-      } else if (
-        this.layers['pa_filter'] &&
-        elem.id.includes('protected_areas')
-      ) {
-        this.map.add(this.layers['pa_filter']);
-        this.layers['pa_filter'].visible = true;
-      } else {
-        this.map.add(this.layers[elem.id]);
+      this.map.add(this.layers[targetLayerId]);
+      this.layers[targetLayerId].visible = true;
+      if (targetLayerId !== elem.id && this.layers[elem.id]) {
         this.layers[elem.id].visible = true;
       }
       this.visibleLayers[elem.id] = ['fas', 'eye'];
@@ -7883,6 +7913,26 @@ class MenuWidget extends React.Component {
    * @param {*} id id from elem
    */
   deleteCrossEvent(elem) {
+    if (
+      elem.id === 'lcc_filter' ||
+      elem.id === 'lc_filter' ||
+      elem.id === 'klc_filter' ||
+      elem.id === 'pa_filter'
+    ) {
+      this.deleteFilteredLayer(elem.id);
+      delete this.activeLayersJSON[elem.id];
+      if (this.visibleLayers && this.visibleLayers[elem.id]) {
+        delete this.visibleLayers[elem.id];
+      }
+      if (this.timeLayers && this.timeLayers[elem.id]) {
+        delete this.timeLayers[elem.id];
+      }
+      this.layersReorder();
+      this.saveLayerOrder();
+      this.checkInfoWidget();
+      this.setState({});
+      return;
+    }
     elem.checked = false;
     this.toggleLayer(elem);
     delete this.activeLayersJSON[elem.id];
@@ -8018,16 +8068,13 @@ class MenuWidget extends React.Component {
 
   deleteFilteredLayer(layer) {
     if (!layer || !this.props || !this.props.map) return;
-    if (
-      !(
-        layer.includes('all_lcc') ||
-        layer.includes('all_present') ||
-        layer.includes('cop_klc') ||
-        layer.includes('protected_areas')
-      )
-    )
+    const filterLayerId =
+      this.getHotspotFilterLayerId(layer, {
+        requireActive: true,
+      }) || this.getHotspotFilterLayerId(layer);
+    if (!filterLayerId) {
       return;
-    let filterLayer;
+    }
     let updatedHotspotData = this.props.hotspotData || {};
     let updatedFilteredLayers =
       updatedHotspotData &&
@@ -8035,60 +8082,19 @@ class MenuWidget extends React.Component {
       typeof updatedHotspotData['filteredLayers'] === 'object'
         ? updatedHotspotData['filteredLayers']
         : {};
-    if (this.layers['lcc_filter'] && layer.includes('all_lcc')) {
-      this.layers['lcc_filter'].visible = false;
-      filterLayer = this.props.map.findLayerById('lcc_filter');
-      if (filterLayer !== undefined) {
-        filterLayer.clear();
-        filterLayer.destroy();
-        this.props.map.remove(filterLayer);
-      }
-      delete updatedFilteredLayers['lcc_filter'];
-      delete this.layers['lcc_filter'];
-    } else if (this.layers['lc_filter'] && layer.includes('all_present_lc')) {
-      this.layers['lc_filter'].visible = false;
-      filterLayer = this.props.map.findLayerById('lc_filter');
-      if (filterLayer !== undefined) {
-        filterLayer.clear();
-        filterLayer.destroy();
-        this.props.map.remove(filterLayer);
-      }
-      delete updatedFilteredLayers['lc_filter'];
-      delete this.layers['lc_filter'];
-    } else if (
-      this.layers['klc_filter'] !== undefined &&
-      layer.includes('cop_klc')
-    ) {
-      this.layers['klc_filter'].visible = false;
-      if (this.layers[layer]) {
-        this.layers[layer].visible = false;
-      }
-      filterLayer = this.props.map.findLayerById('klc_filter');
-      if (filterLayer !== undefined) {
-        //  temp = filterLayer;
-        filterLayer.clear();
-        filterLayer.destroy();
-        this.props.map.remove(filterLayer);
-      }
-      delete updatedFilteredLayers['klc_filter'];
-      //delete this.layers['klc_filter'];
-    } else if (
-      this.layers['pa_filter'] !== undefined &&
-      layer.includes('protected_areas')
-    ) {
-      this.layers['pa_filter'].visible = false;
-      if (this.layers[layer]) {
-        this.layers[layer].visible = false;
-      }
-      filterLayer = this.props.map.findLayerById('pa_filter');
-      if (filterLayer !== undefined) {
-        //  temp = filterLayer;
-        filterLayer.clear();
-        filterLayer.destroy();
-        this.props.map.remove(filterLayer);
+    if (this.layers[filterLayerId]) {
+      this.layers[filterLayerId].visible = false;
+      this.props.map.remove(this.layers[filterLayerId]);
+      const mapFilterLayer = this.props.map.findLayerById(filterLayerId);
+      if (mapFilterLayer) {
+        this.props.map.remove(mapFilterLayer);
       }
-      delete updatedFilteredLayers['pa_filter'];
     }
+    if (this.layers[layer]) {
+      this.layers[layer].visible = false;
+    }
+    delete updatedFilteredLayers[filterLayerId];
+    delete this.layers[filterLayerId];
     this.props.mapLayersHandler(this.layers);
     if (this.props.hotspotDataHandler) {
       updatedHotspotData['filteredLayers'] = updatedFilteredLayers;

package/src/components/MapViewer/css/ArcgisMap.css

@@ -1975,6 +1975,17 @@ div.map-container.popup-block {
   cursor: not-allowed;
 }
 
+.hotspot-reference-selection {
+  padding: 8px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background: rgba(160, 177, 40, 0.15);
+}
+
+.hotspot-reference-selection .esri-select {
+  margin-top: 8px;
+}
+
 /*.hotspot-container .esri-select{
   font-family:Helvetica, sans-serif;
   font-size:20px;