@eeacms/volto-arcgis-block 0.1.107 → 0.1.109

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.109](https://github.com/eea/volto-arcgis-block/compare/0.1.108...0.1.109) - 28 February 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS 1581 & CLMS 1771 pushing both tickets [ujbolivar - [`dd1a580`](https://github.com/eea/volto-arcgis-block/commit/dd1a580d32faff6754121dd49415030920543c72)]
+- CLMS-1771 FIX: Area widget opened by default if user is logged in and downloadTag exists [ujbolivar - [`f629491`](https://github.com/eea/volto-arcgis-block/commit/f629491531dec0dd09234b41184413b3d2e54768)]
+- CLMS-1581 FIX: Hotspot widget stays open after applying filters, and unchecking one hotspotlayer even though another hotspot layer is still checked [ujbolivar - [`e5b18d6`](https://github.com/eea/volto-arcgis-block/commit/e5b18d6477e6bc0dcc7f048835d7ce97483bc9d4)]
+### [0.1.108](https://github.com/eea/volto-arcgis-block/compare/0.1.107...0.1.108) - 27 February 2023
+
+#### :hammer_and_wrench: Others
+
+- Delete comment [Amanda Rodriguez - [`873a594`](https://github.com/eea/volto-arcgis-block/commit/873a594332908ee6d39dfbbc2239a06455a9ebc6)]
+- CLMS-1831 [Amanda Rodriguez - [`0df846a`](https://github.com/eea/volto-arcgis-block/commit/0df846a7fce73e2d6b395b26677175702cc49b36)]
+- CLMS-1843 [Amanda Rodriguez - [`839a331`](https://github.com/eea/volto-arcgis-block/commit/839a331049cf47d396300c2825eef6666e159609)]
+- Time slider bug fix [Amanda Rodriguez - [`d383ee3`](https://github.com/eea/volto-arcgis-block/commit/d383ee38625ee2a528e07babf65340717aab9034)]
 ### [0.1.107](https://github.com/eea/volto-arcgis-block/compare/0.1.106...0.1.107) - 23 February 2023
 
 #### :hammer_and_wrench: Others
@@ -422,13 +437,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Merge pull request #148 from eea/develop [KCarpinteroBM - [`24266fb`](https://github.com/eea/volto-arcgis-block/commit/24266fb3a0c1662d22ae0529dc1d5a25c711cf97)]
-- Revert "[JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`f751f69`](https://github.com/eea/volto-arcgis-block/commit/f751f69f652f0340ae55af6a4dab89d6bdc80906)]
 - Revert "Revert "Mapviewer menu and map viewer options persistence"" [Mikel Larreategi - [`ad6e440`](https://github.com/eea/volto-arcgis-block/commit/ad6e440cdc160cffb1e86e1b26e501dbe648476c)]
 - Revert "code coverage removal" [Mikel Larreategi - [`376f2d1`](https://github.com/eea/volto-arcgis-block/commit/376f2d1cd6e4e5110b3b63d5114af1bcfebe094b)]
 - Revert "Update cypress.json" [Mikel Larreategi - [`43d01a0`](https://github.com/eea/volto-arcgis-block/commit/43d01a0a95a58ef5215c6cbf18223ca30a11b9cc)]
 - Revert "Update cypress.json" [Mikel Larreategi - [`054c4ae`](https://github.com/eea/volto-arcgis-block/commit/054c4ae1767e1f26e6ec7e96a0e26a9711f29f04)]
-- Revert "revert [JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`64ab56e`](https://github.com/eea/volto-arcgis-block/commit/64ab56e0f1f8dddc26f26039509a028e34653e64)]
-- revert [JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967 [Mikel Larreategi - [`85ee194`](https://github.com/eea/volto-arcgis-block/commit/85ee1941e029df2b7dc910bf75231c75ffeca8c2)]
 - Update cypress.json [KCarpinteroBM - [`be285ff`](https://github.com/eea/volto-arcgis-block/commit/be285fff0c53e06a0180d5318cce81195eabcf80)]
 - Update cypress.json [KCarpinteroBM - [`a7f2118`](https://github.com/eea/volto-arcgis-block/commit/a7f2118acb7b048b4cef85aa9663c2244a1c9ca0)]
 - linting fix [KCarpinteroBM - [`27e969a`](https://github.com/eea/volto-arcgis-block/commit/27e969a7a411fd4646e0e742ce846efc0d79703e)]
@@ -488,7 +500,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - UX improvements [rodriama - [`151dc4b`](https://github.com/eea/volto-arcgis-block/commit/151dc4b02d0a73fdd66de9d594620ac0fa5f1dbf)]
 - deleted failing tests [KCarpinteroBM - [`ddaa9e6`](https://github.com/eea/volto-arcgis-block/commit/ddaa9e6f06db6960a4c214d3be2420c48b26715d)]
 - cleaning unnecessary files [KCarpinteroBM - [`2c02199`](https://github.com/eea/volto-arcgis-block/commit/2c021990912beb02b603a1de89aecd62e0063769)]
-- Reverting to Automated release 0.1.39 [KCarpinteroBM - [`fb9f317`](https://github.com/eea/volto-arcgis-block/commit/fb9f3176ccdea18fceb329eaac13ced0566ee648)]
 - commands added [KCarpinteroBM - [`049e60b`](https://github.com/eea/volto-arcgis-block/commit/049e60b7d124d1c05abd0b2775b510795f4ed59f)]
 - Mapviewer testing implementation [KCarpinteroBM - [`0103002`](https://github.com/eea/volto-arcgis-block/commit/0103002869eea108e16e3b5ff2e77a725dcc7c4b)]
 ### [0.1.39](https://github.com/eea/volto-arcgis-block/compare/0.1.38...0.1.39) - 24 March 2022
@@ -508,7 +519,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - ESLint fix [rodriama - [`75dae9b`](https://github.com/eea/volto-arcgis-block/commit/75dae9b5bba18ab6d9624f6c99714b4bd2179003)]
 - Remove section title [rodriama - [`ece860e`](https://github.com/eea/volto-arcgis-block/commit/ece860eae3519c7e611abac16e8d53c9a9408b34)]
 - Es-Lint [manuelmartinezbilbomatica - [`39d8d11`](https://github.com/eea/volto-arcgis-block/commit/39d8d11b9096fd603df8510c119d2e12817415d6)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`bf9f683`](https://github.com/eea/volto-arcgis-block/commit/bf9f683dd35a9edb4cfd9111affcb8f8edbeae89)]
 - FEAT: Parser Time implemented [manuelmartinezbilbomatica - [`689c99e`](https://github.com/eea/volto-arcgis-block/commit/689c99e55221fee6c7c7fafc4ab95ae7a646d3dd)]
 ### [0.1.38](https://github.com/eea/volto-arcgis-block/compare/0.1.37...0.1.38) - 18 March 2022
 
@@ -603,7 +613,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - ESLint fix [rodriama - [`5fd3772`](https://github.com/eea/volto-arcgis-block/commit/5fd3772f197a3a380067962a5638dbf901a4624e)]
 - Pixel info [rodriama - [`1ccef39`](https://github.com/eea/volto-arcgis-block/commit/1ccef39a9adcc3ee94655c77a5a166b613600a08)]
 - NUTS bug fix [rodriama - [`37fe7f3`](https://github.com/eea/volto-arcgis-block/commit/37fe7f3fad2c005e3b7c234b3b0564d5df92fa8c)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`ea5af8b`](https://github.com/eea/volto-arcgis-block/commit/ea5af8b02a5f2ee25b9b0be67cf3792bbbe84ed7)]
 ### [0.1.23](https://github.com/eea/volto-arcgis-block/compare/0.1.22...0.1.23) - 17 December 2021
 
 #### :hammer_and_wrench: Others
@@ -848,7 +857,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Trying to delay ArcGIS modules load [gonzalezsd - [`ff16985`](https://github.com/eea/volto-arcgis-block/commit/ff169858e42d30bfcacc423ffc27762bb9ef05a4)]
 - Run bootstrap to fix files [valentinab25 - [`236893f`](https://github.com/eea/volto-arcgis-block/commit/236893f03314eb638b7667f81b1f91491a98ee17)]
 - fix git_name [valentinab25 - [`c7806c3`](https://github.com/eea/volto-arcgis-block/commit/c7806c312964425dc23e5d4c6973de8b81ddaeac)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`e3afb51`](https://github.com/eea/volto-arcgis-block/commit/e3afb515dda459ee03e2b5d4b56465d2d4ad1503)]
 - Trying to change imports [gonzalezsd - [`d83d7e2`](https://github.com/eea/volto-arcgis-block/commit/d83d7e2f68da4b2a284735847f93c0763a7e13b6)]
 - default design [bipoza - [`88fbe0b`](https://github.com/eea/volto-arcgis-block/commit/88fbe0b2bc73e732e2993324a567f53902e85506)]
 - cleanup of unused code [bipoza - [`b167677`](https://github.com/eea/volto-arcgis-block/commit/b1676771f637f056cad50cb0bc186f2ea79e8517)]

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -288,15 +288,14 @@ class AreaWidget extends React.Component {
       ? this.container !== null && this.props.view.ui.add(this.container)
       : this.props.view.ui.add(this.container.current, 'top-right');
 
-    var z = document.createElement('div'); // is a node
-    z.className = 'drawRectanglePopup-block';
-    z.innerHTML =
+    var popup = document.createElement('div');
+    popup.className = 'drawRectanglePopup-block';
+    popup.innerHTML =
       '<div class="drawRectanglePopup-content">' +
       '<span class="drawRectanglePopup-icon"><span class="esri-icon-cursor-marquee"></span></span>' +
       '<div class="drawRectanglePopup-text">Select an area of interest to download a dataset</div>' +
       '</div>';
-
-    this.props.download && this.props.view.ui.add(z, 'top-right');
+    this.props.download && this.props.view.ui.add(popup, 'top-right');
   }
 
   /**

package/src/components/MapViewer/HotspotWidget.jsx

@@ -167,6 +167,8 @@ class HotspotWidget extends React.Component {
         this.props.map.add(this.esriLayer_lc);
         this.props.selectedLayers['lc_filter'] = this.esriLayer_lc;
         this.props.selectedLayers['lc_filter'].visible = true;
+        //set sessionStorage value to keep the widget open
+        sessionStorage.setItem('hotspotFilterApplied', 'true');
       }
     }
   }
@@ -484,10 +486,6 @@ class HotspotWidget extends React.Component {
     );
   }
 
-  /**
-   *  This method is executed before the render method is executed
-   */
-
   /**
    * This method is executed after the rener method is executed
    */

package/src/components/MapViewer/MenuWidget.jsx

@@ -78,9 +78,7 @@ export const AddCartItem = ({
       if (hasTimeStart) {
         let datasetInput = document.querySelector(
           '#active_' +
-            datasetElem
-              .querySelector('.map-dataset-checkbox input')
-              .getAttribute('defcheck'),
+            datasetElem.querySelector('.map-menu-layer input:checked').id,
         );
         let time = {
           start: parseInt(datasetInput.getAttribute('time-start')),
@@ -117,9 +115,7 @@ export const AddCartItem = ({
     let datasetElem = document.querySelector('[datasetid="' + id + '"]');
     let datasetActive = document.querySelector(
       '#active_' +
-        datasetElem
-          .querySelector('.map-dataset-checkbox input')
-          .getAttribute('defcheck'),
+        datasetElem.querySelector('.map-menu-layer input:checked').id,
     );
     return datasetActive ? datasetActive.hasAttribute('time-start') : false;
   };
@@ -128,6 +124,12 @@ export const AddCartItem = ({
     dataset = cartData[0].Products[0].Datasets[0];
   }
 
+  const setDownloadTag = (val) => {
+    if (!sessionStorage.key('downloadButtonClicked'))
+      sessionStorage.setItem('downloadButtonClicked', 'true');
+    else sessionStorage.setItem('downloadButtonClicked', val);
+  };
+
   return (
     <>
       {download ? (
@@ -136,22 +138,26 @@ export const AddCartItem = ({
             id="map_download_add"
             className="ccl-button ccl-button-green"
             onClick={(e) => {
-              if (dataset.IsTimeSeries && !checkTimeData(dataset)) {
-                document.getElementById('active_label').click();
-                if (!document.querySelector('.timeslider-container')) {
-                  let layerId = document
-                    .querySelector(
-                      '[datasetid="' + dataset.DatasetId + '"] input',
-                    )
-                    .getAttribute('defcheck');
-                  document
-                    .querySelector(
-                      "[layer-id='" + layerId + "'] .active-layer-time",
-                    )
-                    .click(e);
+              if (!document.querySelector('.map-menu-layer input:checked')) {
+                document.getElementById('products_label').click();
+              } else {
+                if (dataset.IsTimeSeries && !checkTimeData(dataset)) {
+                  document.getElementById('active_label').click();
+                  if (!document.querySelector('.timeslider-container')) {
+                    let layerId = document.querySelector(
+                      '[datasetid="' +
+                        dataset.DatasetId +
+                        '"] .map-menu-layer input:checked',
+                    ).id;
+                    document
+                      .querySelector(
+                        "[layer-id='" + layerId + "'] .active-layer-time",
+                      )
+                      .click(e);
+                  }
+                } else if (areaData) {
+                  checkArea(e);
                 }
-              } else if (areaData) {
-                checkArea(e);
               }
             }}
           >
@@ -177,11 +183,11 @@ export const AddCartItem = ({
                 if (dataset.IsTimeSeries && !checkTimeData(dataset)) {
                   document.getElementById('active_label').click();
                   if (!document.querySelector('.timeslider-container')) {
-                    let layerId = document
-                      .querySelector(
-                        '[datasetid="' + dataset.DatasetId + '"] input',
-                      )
-                      .getAttribute('defcheck');
+                    let layerId = document.querySelector(
+                      '[datasetid="' +
+                        dataset.DatasetId +
+                        '"] .map-menu-layer input:checked',
+                    ).id;
                     document
                       .querySelector(
                         "[layer-id='" + layerId + "'] .active-layer-time",
@@ -205,11 +211,11 @@ export const AddCartItem = ({
                 if (dataset.IsTimeSeries && !checkTimeData(dataset)) {
                   document.getElementById('active_label').click();
                   if (!document.querySelector('.timeslider-container')) {
-                    let layerId = document
-                      .querySelector(
-                        '[datasetid="' + dataset.DatasetId + '"] input',
-                      )
-                      .getAttribute('defcheck');
+                    let layerId = document.querySelector(
+                      '[datasetid="' +
+                        dataset.DatasetId +
+                        '"] .map-menu-layer input:checked',
+                    ).id;
                     document
                       .querySelector(
                         "[layer-id='" + layerId + "'] .active-layer-time",
@@ -249,6 +255,7 @@ export const AddCartItem = ({
             <span
               className={'map-menu-icon map-menu-icon-login'}
               onClick={() => {
+                setDownloadTag(true);
                 document.querySelector('.header-login-link').click();
               }}
               onKeyDown={() => {
@@ -463,12 +470,13 @@ class MenuWidget extends React.Component {
       }
 
       let authToken = this.getAuthToken();
-      let timeSliderTag = this.getTimeSliderTag();
+      let timeSliderTag = sessionStorage.getItem('timeSliderTag');
+      let downloadTag = sessionStorage.getItem('downloadButtonClicked');
       let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
 
       // "Active on map" section and the time slider opened by default if user is logged in and timeSliderTag is true
-
-      if (checkedLayers) {
+      if (checkedLayers && !this.props.download) {
+        // "Active on map" section and the time slider opened by default if user is logged in and timeSliderTag is true
         if (authToken && timeSliderTag) {
           for (let i = 0; i < checkedLayers.length; i++) {
             let layerid = checkedLayers[i];
@@ -495,6 +503,30 @@ class MenuWidget extends React.Component {
             }
           }
         }
+        // "Area widget" opened by default if user is logged in and downloadTag is true
+        else if (authToken && downloadTag) {
+          for (let i = 0; i < checkedLayers.length; i++) {
+            let layerid = checkedLayers[i];
+            if (
+              layerid &&
+              !this.layers[layerid].isTimeSeries &&
+              !this.container.current
+                .querySelector('.esri-widget')
+                .classList.contains('esri-icon-drag-horizontal')
+            ) {
+              //open area widget
+              let event = new MouseEvent('click', {
+                view: window,
+                bubbles: true,
+                cancelable: false,
+              });
+              document
+                .querySelector('.map-menu-icon-login.logged')
+                .dispatchEvent(event);
+              break;
+            }
+          }
+        }
       }
       // CLMS-1389
       // "Active on map" section and the time slider opened by default if download and timeseries == true
@@ -575,14 +607,6 @@ class MenuWidget extends React.Component {
     return tokenResult;
   }
 
-  getTimeSliderTag() {
-    let tagResult = true;
-    if (!sessionStorage.key('timeSliderTag')) {
-      tagResult = false;
-    }
-    return tagResult;
-  }
-
   /**
    * Close opacity panel if user clicks outside
    */
@@ -928,7 +952,7 @@ class MenuWidget extends React.Component {
    */
   updateCheckProduct(productid) {
     let datasetChecks = Array.from(
-      document.querySelectorAll('[parentid=' + productid + ']'),
+      document.querySelectorAll('[parentid="' + productid + '"]'),
     );
     let productCheck = document.querySelector('#' + productid);
     let trueCheck = datasetChecks.filter((elem) => elem.checked).length;
@@ -1180,7 +1204,7 @@ class MenuWidget extends React.Component {
   updateCheckDataset(id) {
     let datasetCheck = document.querySelector('#' + id);
     let layerChecks = Array.from(
-      document.querySelectorAll('[parentid=' + id + ']'),
+      document.querySelectorAll('[parentid="' + id + '"]'),
     );
 
     let trueChecks = layerChecks.filter((elem) => elem.checked).length;
@@ -1460,6 +1484,8 @@ class MenuWidget extends React.Component {
         this.map.reorder(nuts, this.map.layers.items.length + 1);
       }
     } else {
+      sessionStorage.removeItem('downloadButtonClicked');
+      sessionStorage.removeItem('timeSliderTag');
       this.deleteCheckedLayer(elem.id);
       this.deleteFilteredLayer();
       this.layers[elem.id].opacity = 1;
@@ -1472,7 +1498,6 @@ class MenuWidget extends React.Component {
       delete this.timeLayers[elem.id];
     }
     this.updateCheckDataset(parentId);
-    //!this.props.download && this.toggleHotspotWidget();
     this.toggleHotspotWidget();
     this.layersReorder();
     this.checkInfoWidget();
@@ -1499,17 +1524,24 @@ class MenuWidget extends React.Component {
     if (this.props.download) {
       checkedLayers = Object.keys(this.activeLayersJSON);
     }
-    checkedLayers.forEach((key) => {
-      // if key includes all_present_lc_a_pol or all_lcc_a_pol and if the activeWidget is not the hotspot widget, click on the hotspot button, else close the active widget and set the hotspot container to display to none
-      if (
-        key.includes('all_present_lc_a_pol') ||
-        key.includes('all_lcc_a_pol')
-      ) {
-        if (!this.props.mapViewer.activeWidget) {
-          hotspotButton.click();
+    if (
+      checkedLayers.length === 0 &&
+      sessionStorage.getItem('hotspotFilterApplied')
+    ) {
+      sessionStorage.removeItem('hotspotFilterApplied');
+    }
+    if (checkedLayers) {
+      checkedLayers.forEach((key) => {
+        if (
+          key.includes('all_present_lc_a_pol') ||
+          key.includes('all_lcc_a_pol')
+        ) {
+          if (!this.props.mapViewer.activeWidget) {
+            hotspotButton.click();
+          }
         }
-      }
-    });
+      });
+    }
   }
   /**
    * Hide or show a legend image in the legend widget for a WMTS or a TMS layer
@@ -2058,6 +2090,9 @@ class MenuWidget extends React.Component {
             ReactDOM.unmountComponentAtNode(
               document.querySelector('.esri-ui-bottom-right'),
             );
+          if (document.querySelector('.drawRectanglePopup-block'))
+            document.querySelector('.drawRectanglePopup-block').style.display =
+              'block';
         } else {
           if (this.visibleLayers[layerId][1] === 'eye-slash') {
             this.layers[layerId].visible = true;
@@ -2085,11 +2120,13 @@ class MenuWidget extends React.Component {
         layers.push(layer);
       }
     });
-    if (layers.length === 0 && document.querySelector('.info-container')) {
-      this.props.mapViewer.closeActiveWidget();
-      document.querySelector('.info-container').style.display = 'none';
-    } else if (layers.length > 0) {
-      document.querySelector('.info-container').style.display = 'flex';
+    if (!sessionStorage.getItem('hotspotFilterApplied')) {
+      if (layers.length === 0 && document.querySelector('.info-container')) {
+        this.props.mapViewer.closeActiveWidget();
+        document.querySelector('.info-container').style.display = 'none';
+      } else if (layers.length > 0) {
+        document.querySelector('.info-container').style.display = 'flex';
+      }
     }
     this.renderHotspot();
     /**/
@@ -2484,7 +2521,14 @@ class MenuWidget extends React.Component {
       hotspotLayers.length === 0 &&
       document.querySelector('.hotspot-container')
     ) {
-      this.props.mapViewer.closeActiveWidget();
+      if (
+        this.props.mapViewer.activeWidget &&
+        this.props.mapViewer.activeWidget.container.current.classList.contains(
+          'hotspot-container',
+        )
+      ) {
+        this.props.mapViewer.closeActiveWidget();
+      }
       document.querySelector('.hotspot-container').style.display = 'none';
     } else if (this.props.view && hotspotLayers.length > 0) {
       document.querySelector('.hotspot-container').style.display = 'flex';
@@ -2516,19 +2560,18 @@ class MenuWidget extends React.Component {
         time.start = parseInt(activeLayer.getAttribute('time-start'));
         time.end = parseInt(activeLayer.getAttribute('time-end'));
       }
-      let isLoggedIn = document
-        .querySelector('[defcheck=' + elem.id + ']')
-        .parentElement.querySelector('.map-menu-icon-login')
-        .classList.contains('logged');
+      let isLoggedIn = document.querySelector('.map-menu-icon-login.logged');
       ReactDOM.render(
         <TimesliderWidget
           view={this.props.view}
           map={this.map}
+          mapViewer={this.props.mapViewer}
           layer={layer}
           download={this.props.download}
           time={time}
           logged={isLoggedIn}
           fromDownload={fromDownload}
+          area={this.props.area}
         />,
         document.querySelector('.esri-ui-bottom-right'),
       );

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -24,7 +24,7 @@ class TimesliderWidget extends React.Component {
       timeSelectedValuesC: [], //To compare time slider stored values with new selected values
       showDatePanel: false,
       lockDatePanel: true,
-      showCalendar: false,
+      showCalendar: this.props.fromDownload ? true : false,
       dateStart: this.props.time.start ? new Date(this.props.time.start) : null,
       dateEnd: this.props.time.end ? new Date(this.props.time.end) : null,
       periodicity: null,
@@ -43,6 +43,13 @@ class TimesliderWidget extends React.Component {
       this.layerName = this.layer.activeLayer.id; //WMTS
     }
     this.drag = {};
+    if (
+      this.props.fromDownload &&
+      document.querySelector('.drawRectanglePopup-block')
+    ) {
+      document.querySelector('.drawRectanglePopup-block').style.display =
+        'none';
+    }
   }
 
   loader() {
@@ -244,8 +251,6 @@ class TimesliderWidget extends React.Component {
           }
           this.setState({
             lockDatePanel: false,
-            showCalendar:
-              this.props.fromDownload || this.props.download ? true : false,
           });
         }
       },
@@ -297,6 +302,7 @@ class TimesliderWidget extends React.Component {
 
           this.getCapabilities(this.layer.url, serviceType).then((xml) => {
             let times = {};
+            let periodicity;
             if (this.layer.type === 'wms') {
               times = this.parseTimeWMS(xml);
             } else if (this.layer.type === 'wmts') {
@@ -326,6 +332,8 @@ class TimesliderWidget extends React.Component {
                     unit: 'minutes',
                   },
                 };
+
+                periodicity = times[this.layerName].period;
               } else if (times[this.layerName].hasOwnProperty('array')) {
                 // Dates array
                 this.TimesliderWidget.fullTimeExtent = new TimeExtent({
@@ -350,19 +358,20 @@ class TimesliderWidget extends React.Component {
                     timeDict[time[i]] = times[this.layerName].array[i];
                   }
                 }
-              }
 
-              let periodicity = Math.floor(
-                (Date.parse(times[this.layerName].array[1]) -
-                  Date.parse(times[this.layerName].array[0])) /
-                  86400000,
-              );
-              if (periodicity === 0) {
-                periodicity =
-                  (new Date(times[this.layerName].array[1]).getHours() -
-                    new Date(times[this.layerName].array[0]).getHours()) /
-                  24;
+                periodicity = Math.floor(
+                  (Date.parse(times[this.layerName].array[1]) -
+                    Date.parse(times[this.layerName].array[0])) /
+                    86400000,
+                );
+                if (periodicity === 0) {
+                  periodicity =
+                    (new Date(times[this.layerName].array[1]).getHours() -
+                      new Date(times[this.layerName].array[0]).getHours()) /
+                    24;
+                }
               }
+
               this.setState({ periodicity: periodicity });
 
               this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
@@ -415,17 +424,17 @@ class TimesliderWidget extends React.Component {
 
   getPeriodicity() {
     let period = this.state.periodicity;
-    if (period === 1 / 24) {
+    if (period === 1 / 24 || period === 'PT1H') {
       return 'hourly';
-    } else if (period === 1) {
+    } else if (period === 1 || period === 'P1D') {
       return 'daily';
-    } else if (period === 7) {
+    } else if (period === 7 || period === 'P7D' || period === 'P1W') {
       return 'weekly';
-    } else if (period === 10) {
+    } else if (period === 10 || period === 'P10D') {
       return '10-daily';
-    } else if (period >= 28 && period <= 31) {
+    } else if ((period >= 28 && period <= 31) || period === 'P1M') {
       return 'monthly';
-    } else if (period === 365 || period === 366) {
+    } else if (period === 365 || period === 366 || period === 'P1Y') {
       return 'yearly';
     } else {
       return 'not regular';
@@ -471,8 +480,19 @@ class TimesliderWidget extends React.Component {
   showCalendar() {
     if (this.state.showCalendar) {
       this.setState({ showCalendar: false });
+      if (
+        document.querySelector('.drawRectanglePopup-block') &&
+        !this.props.area
+      ) {
+        document.querySelector('.drawRectanglePopup-block').style.display =
+          'block';
+      }
     } else {
       this.setState({ showCalendar: true });
+      if (document.querySelector('.drawRectanglePopup-block')) {
+        document.querySelector('.drawRectanglePopup-block').style.display =
+          'none';
+      }
     }
   }
 
@@ -488,8 +508,27 @@ class TimesliderWidget extends React.Component {
     this.setState({
       dateStart: start,
       dateEnd: end,
-      showCalendar: false,
     });
+    this.showCalendar();
+    if (this.props.download) {
+      if (this.props.fromDownload) {
+        this.props.time.elem.querySelector('.active-layer-time').click();
+        document.getElementById('download_label').click();
+      }
+    } else {
+      if (this.props.fromDownload) {
+        this.props.time.elem.querySelector('.active-layer-time').click();
+        document.getElementById('products_label').click();
+        if (
+          !this.props.mapViewer.activeWidget ||
+          !this.props.mapViewer.activeWidget.container.current.classList.contains(
+            'area-container',
+          )
+        ) {
+          document.getElementById('map_area_button').click();
+        }
+      }
+    }
   }
 
   handleInputChange(e) {
@@ -513,7 +552,7 @@ class TimesliderWidget extends React.Component {
     let inputEnd;
     let timeStart;
     let timeEnd;
-    if (this.state.showCalendar) {
+    if (!this.state.lockDatePanel && this.state.showCalendar) {
       inputStart = this.formatDate(
         this.state.inputStart
           ? this.state.inputStart
@@ -573,7 +612,7 @@ class TimesliderWidget extends React.Component {
               )}
             </div>
           )}
-          {this.state.showCalendar && (
+          {!this.state.lockDatePanel && this.state.showCalendar && (
             <div className="timeslider-calendar-container">
               <div className="timeslider-calendar-header">
                 <b>Select temporal interval to download</b>
@@ -582,12 +621,8 @@ class TimesliderWidget extends React.Component {
                   id="timeslider_calendar_close"
                   role="button"
                   tabIndex="0"
-                  onClick={() => {
-                    this.setState({ showCalendar: false });
-                  }}
-                  onKeyDown={() => {
-                    this.setState({ showCalendar: false });
-                  }}
+                  onClick={() => this.showCalendar()}
+                  onKeyDown={() => this.showCalendar()}
                 ></div>
               </div>
               <div className="timeslider-calendar-panel">