@eeacms/volto-arcgis-block 0.1.398 → 0.1.399

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.399](https://github.com/eea/volto-arcgis-block/compare/0.1.398...0.1.399) - 27 October 2025
+
+#### :hammer_and_wrench: Others
+
+- (lint): necessary linting [Unai Bolivar - [`2685d7d`](https://github.com/eea/volto-arcgis-block/commit/2685d7de0736db3358fd651a9c75e9d4ab39a3d7)]
+- (task): added more guard clauses in xml parsing methods to handle null values [Unai Bolivar - [`345db2e`](https://github.com/eea/volto-arcgis-block/commit/345db2e8b898b8a4156901d97917b9f1573c8d3d)]
+- (bug): added guard clause for empty or incorrect xml data in parsing methods [Unai Bolivar - [`24bbda1`](https://github.com/eea/volto-arcgis-block/commit/24bbda1929af9364b008a8ba239a140e98a8f93e)]
+- (task): cleaned commented code from Menuwidget script and updated clean up of event listeners in TimesliderWidget script [Unai Bolivar - [`6fc8c65`](https://github.com/eea/volto-arcgis-block/commit/6fc8c659140f7b2fbcb5ee86b670f9a4fe90d12d)]
 ### [0.1.398](https://github.com/eea/volto-arcgis-block/compare/0.1.397...0.1.398) - 10 October 2025
 
 ### [0.1.397](https://github.com/eea/volto-arcgis-block/compare/0.1.396...0.1.397) - 10 October 2025

package/package.json

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

package/src/components/MapViewer/MenuWidget.jsx

@@ -3027,42 +3027,6 @@ class MenuWidget extends React.Component {
           }
         }
       } catch (e) {}
-      // try {
-      //   const layer = this.layers[elem.id];
-      //   const viewService = layer?.ViewService || '';
-      //   if (
-      //     viewService &&
-      //     viewService.toLowerCase().includes('wms') &&
-      //     viewService.toLowerCase().includes('/ogc/') &&
-      //     !layer._ogcExtentApplied &&
-      //     !this.extentInitiated
-      //   ) {
-      //     let url;
-      //     const serviceLayer = this.state.wmsUserServiceLayers.find(
-      //       (l) => l.LayerId === elem.id,
-      //     );
-      //     if (!serviceLayer) {
-      //       this.findCheckedDataset(elem);
-      //       url = this.url;
-      //     } else {
-      //       url = serviceLayer.ViewService;
-      //     }
-      //     if (url) {
-      //       await this.getCapabilities(url, 'wms');
-      //       const BBoxes = this.parseBBOXCDSE(this.xml);
-      //       if (BBoxes && BBoxes['dataset']) {
-      //         const myExtent = new Extent({
-      //           xmin: BBoxes['dataset'].xmin,
-      //           ymin: BBoxes['dataset'].ymin,
-      //           xmax: BBoxes['dataset'].xmax,
-      //           ymax: BBoxes['dataset'].ymax,
-      //         });
-      //         this.view.goTo(myExtent);
-      //         layer._ogcExtentApplied = true;
-      //       }
-      //     }
-      //   }
-      // } catch (e) {}
     } else {
       sessionStorage.removeItem('downloadButtonClicked');
       sessionStorage.removeItem('timeSliderTag');
@@ -3202,8 +3166,9 @@ class MenuWidget extends React.Component {
   addCustomItemToLegend(layer) {
     // Find legend widget node
     const legendDiv = document.querySelectorAll('.esri-widget.esri-legend')[0];
+    if (!legendDiv) return;
     let childDiv = legendDiv.firstChild;
-
+    if (!childDiv) return;
     // create legend element
     if (layer.LayerTitle !== undefined) {
       let legendItem = this.createStaticLegendImageNode(
@@ -3608,145 +3573,158 @@ class MenuWidget extends React.Component {
   parseBBOXCDSE(xml) {
     if (!xml || typeof xml.getElementsByTagName !== 'function') return {};
     const all = Array.from(xml.getElementsByTagName('*'));
-    const isLayer = (n) => n && (n.localName || '').toLowerCase() === 'layer';
+    const isLayer = (node) =>
+      node && (node.localName || '').toLowerCase() === 'layer';
     const layers = all.filter(isLayer);
     if (!layers.length) return {};
-    const hasChildLayer = (el) => {
-      const cs = el ? el.children : null;
-      if (!cs) return false;
-      for (let i = 0; i < cs.length; i++) if (isLayer(cs[i])) return true;
+    const hasChildLayer = (element) => {
+      const children = element ? element.children : null;
+      if (!children || !children.length) return false;
+      for (let i = 0; i < children.length; i++)
+        if (isLayer(children[i])) return true;
       return false;
     };
-    const findDesc = (el, nameLower) => {
-      if (!el) return null;
-      const it = el.getElementsByTagName('*');
-      for (let i = 0; i < it.length; i++) {
-        const n = it[i];
-        if ((n.localName || '').toLowerCase() === nameLower) return n;
+    const findDesc = (element, nameLower) => {
+      if (!element || typeof element.getElementsByTagName !== 'function')
+        return null;
+      const items = element.getElementsByTagName('*');
+      for (let i = 0; i < items.length; i++) {
+        const node = items[i];
+        if ((node.localName || '').toLowerCase() === nameLower) return node;
       }
       return null;
     };
-    const leaves = layers.filter((n) => !hasChildLayer(n));
+    const leaves = layers.filter((node) => !hasChildLayer(node));
     if (!leaves.length) return {};
     const boxes = {};
-    const xs = [];
-    const ys = [];
+    const xList = [];
+    const yList = [];
     for (let i = 0; i < leaves.length; i++) {
       const leaf = leaves[i];
-      const nameEl = findDesc(leaf, 'name');
+      if (!leaf) continue;
+      const nameElement = findDesc(leaf, 'name');
       const name =
-        nameEl && nameEl.textContent ? nameEl.textContent.trim() : '';
+        nameElement && nameElement.textContent
+          ? nameElement.textContent.trim()
+          : '';
       if (!name) continue;
-      let bb = findDesc(leaf, 'boundingbox');
-      if (!bb) {
-        let p = leaf.parentElement;
-        while (p) {
-          if (isLayer(p)) {
-            const cand = findDesc(p, 'boundingbox');
-            if (cand) {
-              bb = cand;
+      let bboxElement = findDesc(leaf, 'boundingbox');
+      if (!bboxElement) {
+        let parent = leaf.parentElement;
+        while (parent) {
+          if (isLayer(parent)) {
+            const candidate = findDesc(parent, 'boundingbox');
+            if (candidate) {
+              bboxElement = candidate;
               break;
             }
           }
-          p = p.parentElement;
+          parent = parent.parentElement;
         }
       }
-      if (!bb) continue;
-      const w = parseFloat(bb.getAttribute('minx') || '');
-      const s = parseFloat(bb.getAttribute('miny') || '');
-      const e = parseFloat(bb.getAttribute('maxx') || '');
-      const n = parseFloat(bb.getAttribute('maxy') || '');
-      if (!isFinite(w) || !isFinite(s) || !isFinite(e) || !isFinite(n))
+      if (!bboxElement) continue;
+      const west = parseFloat(bboxElement.getAttribute('minx') || '');
+      const south = parseFloat(bboxElement.getAttribute('miny') || '');
+      const east = parseFloat(bboxElement.getAttribute('maxx') || '');
+      const north = parseFloat(bboxElement.getAttribute('maxy') || '');
+      if (
+        !isFinite(west) ||
+        !isFinite(south) ||
+        !isFinite(east) ||
+        !isFinite(north)
+      )
         continue;
-      boxes[name] = { xmin: w, ymin: s, xmax: e, ymax: n };
-      xs.push(w, e);
-      ys.push(s, n);
+      boxes[name] = { xmin: west, ymin: south, xmax: east, ymax: north };
+      xList.push(west, east);
+      yList.push(south, north);
     }
     if (!Object.keys(boxes).length) return {};
+    if (!xList.length || !yList.length) return boxes;
     boxes.dataset = {
-      xmin: Math.min.apply(Math, xs),
-      ymin: Math.min.apply(Math, ys),
-      xmax: Math.max.apply(Math, xs),
-      ymax: Math.max.apply(Math, ys),
+      xmin: Math.min.apply(Math, xList),
+      ymin: Math.min.apply(Math, yList),
+      xmax: Math.max.apply(Math, xList),
+      ymax: Math.max.apply(Math, yList),
     };
     return boxes;
   }
 
   parseBBOXWMS(xml) {
+    if (
+      !xml ||
+      typeof xml.querySelectorAll !== 'function' ||
+      typeof xml.getElementsByTagName !== 'function'
+    )
+      return {};
     const layerParentNode = xml.querySelectorAll('Layer');
+    if (!layerParentNode || layerParentNode.length === 0) return {};
     let layersChildren = Array.from(layerParentNode).filter(
-      (v) => v.querySelectorAll('Layer').length === 0,
+      (v) =>
+        v && v.querySelectorAll && v.querySelectorAll('Layer').length === 0,
     );
     let layerParent = Array.from(layerParentNode).filter(
-      (v) => v.querySelectorAll('Layer').length !== 0,
+      (v) =>
+        v && v.querySelectorAll && v.querySelectorAll('Layer').length !== 0,
     );
+    if (!layersChildren.length && !layerParent.length) return {};
     let BBoxes = {};
-    let layerGeoGraphic = {};
+    let layerGeographicNode = {};
     let xList = [];
     let yList = [];
     for (let i in layersChildren) {
-      if (
-        layersChildren[i].querySelector('EX_GeographicBoundingBox') !== null
-      ) {
-        // If the layer has BBOX
-        layerGeoGraphic = layersChildren[i].querySelector(
-          'EX_GeographicBoundingBox',
-        );
+      const child = layersChildren[i];
+      if (!child || typeof child.querySelector !== 'function') continue;
+      const bboxNode = child.querySelector('EX_GeographicBoundingBox');
+      if (bboxNode !== null) {
+        layerGeographicNode = bboxNode;
       } else {
-        // If the layer has no BBOX, it was assigned dataset BBOX
-        layerGeoGraphic = layerParent[0].querySelector(
-          'EX_GeographicBoundingBox',
-        );
+        const parentNode =
+          layerParent && layerParent.length ? layerParent[0] : null;
+        layerGeographicNode =
+          parentNode && typeof parentNode.querySelector === 'function'
+            ? parentNode.querySelector('EX_GeographicBoundingBox')
+            : null;
       }
-      BBoxes[layersChildren[i].querySelector('Name').innerText] = {
-        xmin: Number(
-          layerGeoGraphic.querySelector('westBoundLongitude').innerText,
-        ),
-        ymin: Number(
-          layerGeoGraphic.querySelector('southBoundLatitude').innerText,
-        ),
-        xmax: Number(
-          layerGeoGraphic.querySelector('eastBoundLongitude').innerText,
-        ),
-        ymax: Number(
-          layerGeoGraphic.querySelector('northBoundLatitude').innerText,
-        ),
+      const nameNode = child.querySelector('Name');
+      const key =
+        nameNode && typeof nameNode.innerText === 'string'
+          ? nameNode.innerText
+          : '';
+      if (!layerGeographicNode || !key) continue;
+      const westNode = layerGeographicNode.querySelector('westBoundLongitude');
+      const southNode = layerGeographicNode.querySelector('southBoundLatitude');
+      const eastNode = layerGeographicNode.querySelector('eastBoundLongitude');
+      const northNode = layerGeographicNode.querySelector('northBoundLatitude');
+      if (!westNode || !southNode || !eastNode || !northNode) continue;
+      const xmin = Number(westNode.innerText);
+      const ymin = Number(southNode.innerText);
+      const xmax = Number(eastNode.innerText);
+      const ymax = Number(northNode.innerText);
+      if (
+        !isFinite(xmin) ||
+        !isFinite(ymin) ||
+        !isFinite(xmax) ||
+        !isFinite(ymax)
+      )
+        continue;
+      BBoxes[key] = {
+        xmin: xmin,
+        ymin: ymin,
+        xmax: xmax,
+        ymax: ymax,
       };
-      xList.push(
-        BBoxes[layersChildren[i].querySelector('Name').innerText].xmin,
-      );
-      yList.push(
-        BBoxes[layersChildren[i].querySelector('Name').innerText].ymin,
-      );
-      xList.push(
-        BBoxes[layersChildren[i].querySelector('Name').innerText].xmax,
-      );
-      yList.push(
-        BBoxes[layersChildren[i].querySelector('Name').innerText].ymax,
-      );
+      xList.push(BBoxes[key].xmin);
+      yList.push(BBoxes[key].ymin);
+      xList.push(BBoxes[key].xmax);
+      yList.push(BBoxes[key].ymax);
     } // For loop
-    // Add dataset bbox
+    if (!xList.length || !yList.length) return {};
     BBoxes['dataset'] = {
       xmin: Math.min.apply(Math, xList),
       ymin: Math.min.apply(Math, yList),
       xmax: Math.max.apply(Math, xList),
       ymax: Math.max.apply(Math, yList),
     };
-    // layerGeoGraphic = layerParent[0].querySelector('EX_GeographicBoundingBox');
-    // BBoxes['dataset'] = {
-    //   xmin: Number(
-    //     layerGeoGraphic.querySelector('westBoundLongitude').innerText,
-    //   ),
-    //   ymin: Number(
-    //     layerGeoGraphic.querySelector('southBoundLatitude').innerText,
-    //   ),
-    //   xmax: Number(
-    //     layerGeoGraphic.querySelector('eastBoundLongitude').innerText,
-    //   ),
-    //   ymax: Number(
-    //     layerGeoGraphic.querySelector('northBoundLatitude').innerText,
-    //   ),
-    // };
     return BBoxes;
   } // function parseWMS
 
@@ -3756,55 +3734,89 @@ class MenuWidget extends React.Component {
 
   // Web Map Tiled Services WMTS
   parseBBOXWMTS(xml) {
+    if (
+      !xml ||
+      typeof xml.querySelectorAll !== 'function' ||
+      typeof xml.getElementsByTagName !== 'function'
+    )
+      return {};
     let BBoxes = {};
     let layersChildren = null;
     let layerParent = null;
     const layerParentNode = xml.querySelectorAll('Layer');
+    if (!layerParentNode || layerParentNode.length === 0) return {};
     layersChildren = Array.from(layerParentNode).filter(
-      (v) => v.querySelectorAll('Layer').length === 0,
+      (v) =>
+        v && v.querySelectorAll && v.querySelectorAll('Layer').length === 0,
     );
     layerParent = Array.from(layerParentNode).filter(
-      (v) => v.querySelectorAll('Layer').length !== 0,
+      (v) =>
+        v && v.querySelectorAll && v.querySelectorAll('Layer').length !== 0,
     );
-    let LowerCorner,
-      UpperCorner = [];
+    if (!layersChildren.length && !layerParent.length) return {};
+    let lowerCornerValues,
+      upperCornerValues = [];
     let xList = [];
     let yList = [];
     let title = '';
     for (let i in layersChildren) {
+      const child = layersChildren[i];
+      if (!child) continue;
+      const lowerCornerNodes = this.parseCapabilities(child, 'ows:LowerCorner');
+      const upperCornerNodes = this.parseCapabilities(child, 'ows:UpperCorner');
       if (
-        this.parseCapabilities(layersChildren[i], 'ows:LowerCorner').length !==
-        0
-      ) {
-        // If the layer has BBOX
-        LowerCorner = this.parseCapabilities(
-          layersChildren[i],
-          'ows:LowerCorner',
-        )[0].innerText.split(' ');
-        UpperCorner = this.parseCapabilities(
-          layersChildren[i],
-          'ows:UpperCorner',
-        )[0].innerText.split(' ');
-      } else if (
-        this.parseCapabilities(layerParent, 'ows:LowerCorner').length !== 0
+        lowerCornerNodes &&
+        lowerCornerNodes.length !== 0 &&
+        upperCornerNodes &&
+        upperCornerNodes.length !== 0
       ) {
-        // If the layer has no BBOX, it was assigned dataset BBOX
-        LowerCorner = this.parseCapabilities(
-          layerParent,
-          'ows:LowerCorner',
-        )[0].innerText.split(' ');
-        UpperCorner = this.parseCapabilities(
-          layerParent,
-          'ows:UpperCorner',
-        )[0].innerText.split(' ');
+        lowerCornerValues = lowerCornerNodes[0].innerText.split(' ');
+        upperCornerValues = upperCornerNodes[0].innerText.split(' ');
+      } else {
+        const parentNode =
+          layerParent && layerParent.length ? layerParent[0] : null;
+        const parentLower = parentNode
+          ? this.parseCapabilities(parentNode, 'ows:LowerCorner')
+          : null;
+        const parentUpper = parentNode
+          ? this.parseCapabilities(parentNode, 'ows:UpperCorner')
+          : null;
+        if (
+          parentLower &&
+          parentLower.length !== 0 &&
+          parentUpper &&
+          parentUpper.length !== 0
+        ) {
+          lowerCornerValues = parentLower[0].innerText.split(' ');
+          upperCornerValues = parentUpper[0].innerText.split(' ');
+        } else {
+          continue;
+        }
       }
-      title = this.parseCapabilities(layersChildren[i], 'ows:Title')[0]
-        .innerText;
+      const titleNodes = this.parseCapabilities(child, 'ows:Title');
+      if (
+        !titleNodes ||
+        !titleNodes[0] ||
+        typeof titleNodes[0].innerText !== 'string'
+      )
+        continue;
+      title = titleNodes[0].innerText;
+      const xmin = Number(lowerCornerValues[0]);
+      const ymin = Number(lowerCornerValues[1]);
+      const xmax = Number(upperCornerValues[0]);
+      const ymax = Number(upperCornerValues[1]);
+      if (
+        !isFinite(xmin) ||
+        !isFinite(ymin) ||
+        !isFinite(xmax) ||
+        !isFinite(ymax)
+      )
+        continue;
       BBoxes[title] = {
-        xmin: Number(LowerCorner[0]),
-        ymin: Number(LowerCorner[1]),
-        xmax: Number(UpperCorner[0]),
-        ymax: Number(UpperCorner[1]),
+        xmin: Number(lowerCornerValues[0]),
+        ymin: Number(lowerCornerValues[1]),
+        xmax: Number(upperCornerValues[0]),
+        ymax: Number(upperCornerValues[1]),
       };
       xList.push(BBoxes[title].xmin);
       yList.push(BBoxes[title].ymin);
@@ -3812,34 +3824,13 @@ class MenuWidget extends React.Component {
       yList.push(BBoxes[title].ymax);
     } // For loop
 
+    if (!xList.length || !yList.length) return {};
     BBoxes['dataset'] = {
       xmin: Math.min.apply(Math, xList),
       ymin: Math.min.apply(Math, yList),
       xmax: Math.max.apply(Math, xList),
       ymax: Math.max.apply(Math, yList),
     };
-
-    // if (
-    //   typeof layerParent === 'object' &&
-    //   layerParent !== null &&
-    //   'getElementsByTagName' in layerParent
-    // ) {
-    //   LowerCorner = this.parseCapabilities(
-    //     layerParent,
-    //     'ows:LowerCorner',
-    //   )[0]?.innerText.split(' ');
-    //   UpperCorner = this.parseCapabilities(
-    //     layerParent,
-    //     'ows:UpperCorner',
-    //   )[0].innerText.split(' ');
-
-    //   BBoxes['dataset'] = {
-    //     xmin: Number(LowerCorner[0]),
-    //     ymin: Number(LowerCorner[1]),
-    //     xmax: Number(UpperCorner[0]),
-    //     ymax: Number(UpperCorner[1]),
-    //   };
-    // }
     return BBoxes;
   }
 

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -55,6 +55,9 @@ class TimesliderWidget extends React.Component {
         'none';
     }
     this._cdseApplied = false;
+    this._watchHandles = [];
+    this._isMounted = false;
+    this._closeHandler = null;
   }
 
   loader() {
@@ -316,23 +319,27 @@ class TimesliderWidget extends React.Component {
           };
         }
       }
-      this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
-        if (!this.container.current ? true : false) {
-          this.TimesliderWidget.stop();
-        }
-        if (this.layer.type === 'wmts') {
-          this.layer.customLayerParameters = {
-            SHOWLOGO: false,
-          };
-          this.layer.customLayerParameters['TIME'] =
-            timeDict[this.TimesliderWidget.timeExtent.end];
-        } else {
-          this.layer.customLayerParameters = {};
-          this.layer.customLayerParameters['TIME'] =
-            timeDict[this.TimesliderWidget.timeExtent.end];
-        }
-        this.layer.refresh();
-      });
+      const watchHandle = this.TimesliderWidget.watch(
+        'timeExtent',
+        (timeExtent) => {
+          if (!this.container.current ? true : false) {
+            this.TimesliderWidget.stop();
+          }
+          if (this.layer.type === 'wmts') {
+            this.layer.customLayerParameters = {
+              SHOWLOGO: false,
+            };
+            this.layer.customLayerParameters['TIME'] =
+              timeDict[this.TimesliderWidget.timeExtent.end];
+          } else {
+            this.layer.customLayerParameters = {};
+            this.layer.customLayerParameters['TIME'] =
+              timeDict[this.TimesliderWidget.timeExtent.end];
+          }
+          this.layer.refresh();
+        },
+      );
+      this._watchHandles.push(watchHandle);
     } catch (e) {}
   }
 
@@ -340,11 +347,13 @@ class TimesliderWidget extends React.Component {
    * This method is executed after the rener method is executed
    */
   async componentDidMount() {
+    this._isMounted = true;
     await this.loader();
     let playRateValue =
       this.layer.ProductId === '8474c3b080fa42cc837f1d2338fcf096' ? 4000 : 1000;
     if (!this.container.current) return;
     this.props.view.when(() => {
+      if (!this._isMounted) return;
       this.TimesliderWidget = new TimeSlider({
         view: this.props.view,
         container: document.querySelector('.timeslider-panel'),
@@ -417,23 +426,24 @@ class TimesliderWidget extends React.Component {
       );
       this.container.current.style.display = 'block';
       this.setState({ showDatePanel: true });
-
+      this._closeHandler = () => {
+        this.props.time.elem.querySelector('.active-layer-time').click();
+        if (this.props.fromDownload) {
+          if (this.props.download) {
+            document.getElementById('download_label').click();
+          } else {
+            document.getElementById('products_label').click();
+          }
+        }
+      };
       document
         .querySelector('#timeslider_close')
-        .addEventListener('click', () => {
-          this.props.time.elem.querySelector('.active-layer-time').click();
-          if (this.props.fromDownload) {
-            if (this.props.download) {
-              document.getElementById('download_label').click();
-            } else {
-              document.getElementById('products_label').click();
-            }
-          }
-        });
+        .addEventListener('click', this._closeHandler);
 
       this.props.view
         .whenLayerView(this.layer, this.TimesliderWidget)
         .then(async (lv) => {
+          if (!this._isMounted) return;
           this.url = lv?.layer?.viewService ?? this.layer?.url ?? null;
           const urlNorm =
             typeof this.url === 'string'
@@ -446,11 +456,13 @@ class TimesliderWidget extends React.Component {
             this.TimesliderWidget.stops = {
               interval: this.layer.timeInfo.interval,
             };
-            this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
-              if (!this.container.current ? true : false) {
-                this.TimesliderWidget.stop();
-              }
-              /*let start = new Date(timeExtent.start).getTime();
+            const watchHandle = this.TimesliderWidget.watch(
+              'timeExtent',
+              (timeExtent) => {
+                if (!this.container.current ? true : false) {
+                  this.TimesliderWidget.stop();
+                }
+                /*let start = new Date(timeExtent.start).getTime();
             let end = new Date(timeExtent.end).getTime();
             this.props.time.elem.setAttribute('time-start', start);
             this.props.time.elem.setAttribute('time-end', end);
@@ -460,7 +472,9 @@ class TimesliderWidget extends React.Component {
             }
             this.props.time.dataset.setAttribute('time-start', start);
             this.props.time.dataset.setAttribute('time-end', end);*/
-            });
+              },
+            );
+            this._watchHandles.push(watchHandle);
           } else {
             let serviceType = '';
             if (this.layer.type === 'wms') {
@@ -488,6 +502,7 @@ class TimesliderWidget extends React.Component {
             } else {
               //place getCapabilties in here
               this.getCapabilities(this.layer.url, serviceType).then((xml) => {
+                if (!this._isMounted) return;
                 if (this.layer.type === 'wms') {
                   times = this.parseTimeWMS(xml);
                 } else if (this.layer.type === 'wmts') {
@@ -578,45 +593,49 @@ class TimesliderWidget extends React.Component {
                       };
                     }
                   }
-                  this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
-                    if (!this.container.current ? true : false) {
-                      this.TimesliderWidget.stop();
-                    }
-                    //     let start = new Date(timeExtent.start).getTime();
-                    // let end = new Date(timeExtent.end).getTime();
-                    // this.props.time.elem.setAttribute('time-start', start);
-                    // this.props.time.elem.setAttribute('time-end', end);
-                    // if (this.props.download) {
-                    //   this.props.time.dataset.setAttribute('time-start', start);
-                    //   this.props.time.dataset.setAttribute('time-end', end);
-                    // }
-                    // this.props.time.dataset.setAttribute('time-start', start);
-                    // this.props.time.dataset.setAttribute('time-end', end);
-                    if (this.layer.type === 'wmts') {
-                      this.layer.customLayerParameters = {};
-                      this.layer.customLayerParameters['TIME'] =
-                        timeDict[this.TimesliderWidget.timeExtent.end];
-                    } else {
-                      this.layer.customLayerParameters = {};
-                      if (times[this.layerName].hasOwnProperty('array')) {
+                  const watchHandle = this.TimesliderWidget.watch(
+                    'timeExtent',
+                    (timeExtent) => {
+                      if (!this.container.current ? true : false) {
+                        this.TimesliderWidget.stop();
+                      }
+                      //     let start = new Date(timeExtent.start).getTime();
+                      // let end = new Date(timeExtent.end).getTime();
+                      // this.props.time.elem.setAttribute('time-start', start);
+                      // this.props.time.elem.setAttribute('time-end', end);
+                      // if (this.props.download) {
+                      //   this.props.time.dataset.setAttribute('time-start', start);
+                      //   this.props.time.dataset.setAttribute('time-end', end);
+                      // }
+                      // this.props.time.dataset.setAttribute('time-start', start);
+                      // this.props.time.dataset.setAttribute('time-end', end);
+                      if (this.layer.type === 'wmts') {
+                        this.layer.customLayerParameters = {};
                         this.layer.customLayerParameters['TIME'] =
                           timeDict[this.TimesliderWidget.timeExtent.end];
                       } else {
-                        const newDateTimeObject = new Date(
-                          this.TimesliderWidget.timeExtent.start.toISOString(),
-                        );
-                        newDateTimeObject.setMinutes(
-                          this.TimesliderWidget.timeExtent.start.getMinutes() +
-                            this.TimesliderWidget.stops['interval'].value,
-                        );
-                        this.layer.customLayerParameters['TIME'] =
-                          this.TimesliderWidget.timeExtent.start.toISOString() +
-                          '/' +
-                          newDateTimeObject.toISOString(); //OK
+                        this.layer.customLayerParameters = {};
+                        if (times[this.layerName].hasOwnProperty('array')) {
+                          this.layer.customLayerParameters['TIME'] =
+                            timeDict[this.TimesliderWidget.timeExtent.end];
+                        } else {
+                          const newDateTimeObject = new Date(
+                            this.TimesliderWidget.timeExtent.start.toISOString(),
+                          );
+                          newDateTimeObject.setMinutes(
+                            this.TimesliderWidget.timeExtent.start.getMinutes() +
+                              this.TimesliderWidget.stops['interval'].value,
+                          );
+                          this.layer.customLayerParameters['TIME'] =
+                            this.TimesliderWidget.timeExtent.start.toISOString() +
+                            '/' +
+                            newDateTimeObject.toISOString(); //OK
+                        }
                       }
-                    }
-                    this.layer.refresh();
-                  });
+                      this.layer.refresh();
+                    },
+                  );
+                  this._watchHandles.push(watchHandle);
                 } // if there is dimension time
                 else {
                   this.TimesliderWidget.disabled = true;
@@ -628,6 +647,45 @@ class TimesliderWidget extends React.Component {
     });
   } //componentDidMount
 
+  componentWillUnmount() {
+    this._isMounted = false;
+    if (this._watchHandles && this._watchHandles.length) {
+      for (let i = 0; i < this._watchHandles.length; i++) {
+        try {
+          if (this._watchHandles[i] && this._watchHandles[i].remove) {
+            this._watchHandles[i].remove();
+          }
+        } catch (e) {}
+      }
+      this._watchHandles = [];
+    }
+    const closeElement = document.querySelector('#timeslider_close');
+    if (closeElement && this._closeHandler) {
+      try {
+        closeElement.removeEventListener('click', this._closeHandler);
+      } catch (e) {}
+    }
+    try {
+      const uiCorner = document.querySelector(
+        '.esri-ui-bottom-right.esri-ui-corner',
+      );
+      if (uiCorner) {
+        uiCorner.style.pointerEvents = '';
+      }
+    } catch (e) {}
+    try {
+      if (this.props.view && this.container && this.container.current) {
+        this.props.view.ui.remove(this.container.current);
+      }
+    } catch (e) {}
+    try {
+      if (this.TimesliderWidget) {
+        this.TimesliderWidget.stop();
+        this.TimesliderWidget.destroy();
+      }
+    } catch (e) {}
+  }
+
   componentDidUpdate(prevProps) {
     if (!this.TimesliderWidget) return;
     const url = this.layer?.url || '';