@eeacms/volto-arcgis-block 0.1.477 → 0.1.479

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,235 @@ 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);
+    });
+
+    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',
@@ -137,80 +370,166 @@ class HotspotWidget extends React.Component {
     return legendLinkUrl + legend;
   }
 
+  getHotspotWmsConfig() {
+    return {
+      endpoint:
+        this.urls.hotspotWmsEndpoint ||
+        'https://geospatial.jrc.ec.europa.eu/geoserver/hsm/wms',
+      version: this.urls.hotspotWmsVersion || '1.1.0',
+      srs: this.urls.hotspotWmsSrs || 'EPSG:3857',
+      layerNames: this.urls.hotspotWmsLayerNames || {
+        lcc: {
+          a: 'hsm:lcc_a_pols',
+          b: 'hsm:lcc_b_pols',
+        },
+        lc: {
+          a: 'hsm:present_lc_a_pols',
+          b: 'hsm:present_lc_b_pols',
+        },
+        klc: 'hsm:cop_klc',
+        pa: 'hsm:protected_areas',
+      },
+    };
+  }
+
+  resolveLayerVariant(activeLayers, type) {
+    if (!Array.isArray(activeLayers) || !activeLayers.length) return 'b';
+    const hasVariantA = activeLayers.some((layer) =>
+      layer.includes(type === 'lcc' ? 'all_lcc_a_pol' : 'all_present_lc_a_pol'),
+    );
+    return hasVariantA ? 'a' : 'b';
+  }
+
+  resolveWmsLayerName(type, variant) {
+    const config = this.getHotspotWmsConfig();
+    if (type === 'lcc') {
+      return config.layerNames.lcc[variant] || config.layerNames.lcc.b;
+    }
+    if (type === 'lc') {
+      return config.layerNames.lc[variant] || config.layerNames.lc.b;
+    }
+    if (type === 'klc') {
+      return config.layerNames.klc;
+    }
+    if (type === 'pa') {
+      return config.layerNames.pa;
+    }
+    return null;
+  }
+
+  buildCqlFilter(klcCode, date) {
+    const baseFilter = "klc_code='" + klcCode + "' AND in_pa='not_defined'";
+    if (!Number.isFinite(Number(date))) {
+      return baseFilter;
+    }
+    return baseFilter + ' AND date=' + Number(date);
+  }
+
+  buildWmsCustomLayerParameters(cqlFilter) {
+    const config = this.getHotspotWmsConfig();
+    return {
+      SERVICE: 'WMS',
+      REQUEST: 'GetMap',
+      FORMAT: 'image/png',
+      TRANSPARENT: 'true',
+      tiled: 'true',
+      STYLES: '',
+      VERSION: config.version,
+      SRS: config.srs,
+      CQL_FILTER: cqlFilter,
+    };
+  }
+
+  getLccDateOptionsFromData(selectedLcYear, lccDatesByLcYear, lccDateList) {
+    const mappedByData = Number.isFinite(Number(selectedLcYear))
+      ? lccDatesByLcYear[Number(selectedLcYear)]
+      : null;
+    if (Array.isArray(mappedByData) && mappedByData.length) {
+      return mappedByData;
+    }
+    return lccDateList;
+  }
+
   layerModelInit() {
-    const serviceUrl = this.urls.serviceUrl;
+    const serviceUrl = this.getHotspotWmsConfig().endpoint;
     this.esriLayer_lcc = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         // LAND COVER CHANGE DATASET ________________________________________________________________________________________________________________
         {
-          name: this.addLegendName('all_lcc_a_pol'),
+          name: this.addLegendName(this.resolveWmsLayerName('lcc', 'a')),
           legendUrl: this.addLegendNameToUrl('all_lcc_a_pol'),
         },
       ],
     });
     this.esriLayer_lcc = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         // LAND COVER CHANGE DATASET ________________________________________________________________________________________________________________
         {
-          name: this.addLegendName('all_lcc_b_pol'),
+          name: this.addLegendName(this.resolveWmsLayerName('lcc', 'b')),
           legendUrl: this.addLegendNameToUrl('all_lcc_b_pol'),
         },
       ],
     });
     this.esriLayer_lc = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         // PRESENT LAND COVER DATASET ________________________________________________________________________________________________________________
         {
-          name: this.addLegendName('all_present_lc_a_pol'),
+          name: this.addLegendName(this.resolveWmsLayerName('lc', 'a')),
           legendUrl: this.addLegendNameToUrl('all_present_lc_a_pol'),
         },
       ],
     });
     this.esriLayer_lc = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         // PRESENT LAND COVER DATASET ________________________________________________________________________________________________________________
         {
-          name: this.addLegendName('all_present_lc_b_pol'),
+          name: this.addLegendName(this.resolveWmsLayerName('lc', 'b')),
           legendUrl: this.addLegendNameToUrl('all_present_lc_b_pol'),
         },
       ],
     });
     this.esriLayer_klc = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         {
-          name: this.addLegendName('cop_klc'),
+          name: this.addLegendName(this.resolveWmsLayerName('klc')),
           legendUrl: this.addLegendNameToUrl('cop_klc'),
         },
       ],
     });
     this.esriLayer_pa = new WMSLayer({
       url: serviceUrl,
+      version: this.getHotspotWmsConfig().version,
       title: '',
       //featureInfoFormat: "application/json",
-      customLayerParameters: {},
+      customLayerParameters: this.buildWmsCustomLayerParameters(''),
       sublayers: [
         {
-          name: this.addLegendName('protected_areas'),
+          name: this.addLegendName(this.resolveWmsLayerName('pa')),
           legendUrl: this.addLegendNameToUrl('protected_areas'),
         },
       ],
@@ -246,6 +565,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 =
@@ -277,17 +601,12 @@ class HotspotWidget extends React.Component {
             .value.match(/\d+/g)
             .map(Number)[0];
         }
-        for (let i = 0; activeLayers[i]; i++) {
-          let layer = activeLayers[i];
-          if (layer.includes('all_lcc_a_pol')) {
-            typeLegend = 'all_lcc_a_pol';
-            title = 'Dichotomous Land Cover Change in selected Hot Spots';
-            break;
-          } else {
-            typeLegend = 'all_lcc_b_pol';
-            title = 'Modular Land Cover Change in selected Hot Spots';
-          }
-        }
+        const layerVariant = this.resolveLayerVariant(activeLayers, 'lcc');
+        typeLegend = layerVariant === 'a' ? 'all_lcc_a_pol' : 'all_lcc_b_pol';
+        title =
+          layerVariant === 'a'
+            ? 'Dichotomous Land Cover Change in selected Hot Spots'
+            : 'Modular Land Cover Change in selected Hot Spots';
 
         this.addFilteredLayersData(
           filteredLayersData,
@@ -298,7 +617,9 @@ class HotspotWidget extends React.Component {
 
         filterLayer = this.esriLayer_lcc;
 
-        filterLayer.sublayers.items[0].name = this.addLegendName(typeLegend);
+        filterLayer.sublayers.items[0].name = this.addLegendName(
+          this.resolveWmsLayerName('lcc', layerVariant),
+        );
         filterLayer.sublayers.items[0].legendUrl =
           this.addLegendNameToUrl(typeLegend);
         filterLayer.sublayers.items[0].title = title;
@@ -307,30 +628,27 @@ class HotspotWidget extends React.Component {
           bookmarkHotspotFilter.filteredLayers &&
           bookmarkHotspotFilter.filteredLayers['lcc_filter'] !== undefined
         ) {
-          filterLayer.customLayerParameters['CQL_FILTER'] =
-            bookmarkHotspotFilter.filteredLayers['lcc_filter'];
+          filterLayer.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              bookmarkHotspotFilter.filteredLayers['lcc_filter'],
+            );
         } else {
-          filterLayer.customLayerParameters['CQL_FILTER'] =
-            'klc_code LIKE ' +
-            "'" +
-            this.dataKlc_code +
-            "'" +
-            " AND in_pa = 'not_defined' AND date = " +
-            selectBoxHighlightsLcc;
+          filterLayer.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              this.buildCqlFilter(this.dataKlc_code, selectBoxHighlightsLcc),
+            );
         }
       }
       if (type === 'lc') {
-        for (let i = 0; i < activeLayers.length; i++) {
-          let layer = activeLayers[i];
-          if (layer.includes('all_present_lc_a_pol')) {
-            typeLegend = 'all_present_lc_a_pol';
-            title = 'Dichotomous Present Land Cover in selected Hot Spots';
-            break;
-          } else {
-            typeLegend = 'all_present_lc_b_pol';
-            title = 'Modular Present Land Cover in selected Hot Spots';
-          }
-        }
+        const layerVariant = this.resolveLayerVariant(activeLayers, 'lc');
+        typeLegend =
+          layerVariant === 'a'
+            ? 'all_present_lc_a_pol'
+            : 'all_present_lc_b_pol';
+        title =
+          layerVariant === 'a'
+            ? 'Dichotomous Present Land Cover in selected Hot Spots'
+            : 'Modular Present Land Cover in selected Hot Spots';
 
         let selectLcBoxTime =
           document.getElementById('select-klc-lcTime').value;
@@ -353,7 +671,9 @@ class HotspotWidget extends React.Component {
 
         filterLayer = this.esriLayer_lc;
 
-        filterLayer.sublayers.items[0].name = this.addLegendName(typeLegend);
+        filterLayer.sublayers.items[0].name = this.addLegendName(
+          this.resolveWmsLayerName('lc', layerVariant),
+        );
         filterLayer.sublayers.items[0].legendUrl =
           this.addLegendNameToUrl(typeLegend);
         filterLayer.sublayers.items[0].title = title;
@@ -362,16 +682,15 @@ class HotspotWidget extends React.Component {
           bookmarkHotspotFilter.filteredLayers &&
           bookmarkHotspotFilter.filteredLayers['lc_filter'] !== undefined
         ) {
-          filterLayer.customLayerParameters['CQL_FILTER'] =
-            bookmarkHotspotFilter.filteredLayers['lc_filter'];
+          filterLayer.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              bookmarkHotspotFilter.filteredLayers['lc_filter'],
+            );
         } else {
-          filterLayer.customLayerParameters['CQL_FILTER'] =
-            'klc_code LIKE ' +
-            "'" +
-            this.dataKlc_code +
-            "'" +
-            " AND in_pa = 'not_defined' AND date = " +
-            selectBoxHighlightsLc;
+          filterLayer.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              this.buildCqlFilter(this.dataKlc_code, selectBoxHighlightsLc),
+            );
         }
       }
       if (type === 'klc') {
@@ -381,13 +700,20 @@ class HotspotWidget extends React.Component {
           bookmarkHotspotFilter.filteredLayers &&
           bookmarkHotspotFilter.filteredLayers['klc_filter'] !== undefined
         ) {
-          this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
-            bookmarkHotspotFilter.filteredLayers['klc_filter'];
+          this.esriLayer_klc.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              bookmarkHotspotFilter.filteredLayers['klc_filter'],
+            );
         } else {
-          this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
-            "klc_code LIKE '" + this.dataKlc_code + "'";
+          this.esriLayer_klc.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              "klc_code='" + this.dataKlc_code + "'",
+            );
         }
         filterLayer = this.esriLayer_klc;
+        filterLayer.sublayers.items[0].name = this.addLegendName(
+          this.resolveWmsLayerName('klc'),
+        );
         filterLayer.sublayers.items[0].title = title;
       }
       if (type === 'pa') {
@@ -398,13 +724,20 @@ class HotspotWidget extends React.Component {
           bookmarkHotspotFilter.filteredLayers &&
           bookmarkHotspotFilter.filteredLayers['pa_filter'] !== undefined
         ) {
-          this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
-            bookmarkHotspotFilter.filteredLayers['pa_filter'];
+          this.esriLayer_pa.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              bookmarkHotspotFilter.filteredLayers['pa_filter'],
+            );
         } else {
-          this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
-            "klc_code LIKE '" + this.dataKlc_code + "'";
+          this.esriLayer_pa.customLayerParameters =
+            this.buildWmsCustomLayerParameters(
+              "klc_code='" + this.dataKlc_code + "'",
+            );
         }
         filterLayer = this.esriLayer_pa;
+        filterLayer.sublayers.items[0].name = this.addLegendName(
+          this.resolveWmsLayerName('pa'),
+        );
         filterLayer.sublayers.items[0].title = title;
       }
       layersToAdd[type + '_filter'] = filterLayer;
@@ -416,8 +749,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);
       }
     });
@@ -428,8 +759,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);
       }
     });
@@ -507,6 +836,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';
@@ -539,7 +869,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();
@@ -559,18 +889,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) => {
@@ -668,22 +1004,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);
@@ -709,103 +1039,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 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);
-        }
+        const { lccDateList, lcDateList, lccDatesByLcYear } =
+          this.getDateOptionsForNode(data[i].node);
 
-        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 mappedLccDateList = Number.isFinite(selectedLcYear)
-          ? lccDatesByLcYear[selectedLcYear]
-          : null;
-        const lccOptionsToUse =
-          mappedLccDateList && mappedLccDateList.length
-            ? mappedLccDateList
-            : 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));
@@ -824,12 +1098,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));
@@ -840,22 +1116,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
             }
           }
@@ -864,6 +1124,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));
@@ -874,29 +1135,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));
@@ -914,20 +1161,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 });
     }
   }
 
@@ -959,70 +1246,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 selectedLcYear = Number(this.state.lcYear);
-    const mappedLccDateList = Number.isFinite(selectedLcYear)
-      ? lccDatesByLcYear[selectedLcYear]
-      : null;
-    const lccOptionsToUse =
-      mappedLccDateList && mappedLccDateList.length
-        ? mappedLccDateList
-        : lccDateList;
+    const { lccDateList, lcDateList, lccDatesByLcYear } =
+      this.getDateOptionsForNode(selectedNode);
+
+    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(
@@ -1069,6 +1307,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 = [
       {
@@ -1151,6 +1467,7 @@ class HotspotWidget extends React.Component {
                         onChange={(e) => {
                           this.setState({
                             selectedArea: e.target.value,
+                            referenceLcYear: null,
                             lcYear: null,
                             lccYear: null,
                           });
@@ -1161,6 +1478,7 @@ class HotspotWidget extends React.Component {
                     </label>
                   </div>
                 </div>
+                {this.renderReferenceLandCoverSelection()}
                 <div>
                   {divs.map((div, i) => (
                     <div key={i} className={div.className}>
@@ -1242,7 +1560,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;
         }
@@ -1279,9 +1602,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('|');
   }
@@ -1294,17 +1615,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;
     }
 
@@ -1318,6 +1638,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;