@eeacms/volto-arcgis-block 0.1.327 → 0.1.329

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.329](https://github.com/eea/volto-arcgis-block/compare/0.1.328...0.1.329) - 14 January 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-270893 (bug): Fixed scroll positioning of checked dataset in dataviewer when coming from dataset catalogue result [Unai Bolivar - [`8a2cf7f`](https://github.com/eea/volto-arcgis-block/commit/8a2cf7f3184b81c653d3ba420921d481bc5619fa)]
+### [0.1.328](https://github.com/eea/volto-arcgis-block/compare/0.1.327...0.1.328) - 9 January 2025
+
 ### [0.1.327](https://github.com/eea/volto-arcgis-block/compare/0.1.326...0.1.327) - 8 January 2025
 
 ### [0.1.326](https://github.com/eea/volto-arcgis-block/compare/0.1.325...0.1.326) - 8 January 2025

package/package.json

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

package/src/components/MapViewer/MenuWidget.jsx

@@ -743,11 +743,11 @@ class MenuWidget extends React.Component {
       // and ensure that the component is rendered again
       this.setState({ showMapMenu: true });
     }
-    if (this.loadFirst && this.container.current) {
-      this.checkUrl();
-      this.loadFirst = false;
-      this.zoomTooltips();
-    }
+    // if (this.loadFirst && this.container.current) {
+    this.checkUrl();
+    // this.loadFirst = false;
+    this.zoomTooltips();
+    // }
 
     let authToken = this.getAuthToken();
     let timeSliderTag = sessionStorage.getItem('timeSliderTag');
@@ -1060,7 +1060,11 @@ class MenuWidget extends React.Component {
             scrollPosition = mapMenu.offsetTop;
           }
         }
-        document.querySelector('.panels').scrollTop = scrollPosition;
+        setTimeout(() => {
+          document.querySelector(
+            'div#paneles.panels',
+          ).scrollTop = scrollPosition;
+        }, 1000);
       }
     }
   }
@@ -4437,25 +4441,59 @@ class MenuWidget extends React.Component {
                 </span>
               )}
             </div>
-            <div className="search-panel">
-              <div className="menu-searchpanel">
-                <div class="search-input menu-search-input">
-                  <input
-                    type="text"
-                    id="menu-searchtext"
-                    maxlength="200"
-                    placeholder="Search products and datasets"
-                    onChange={() => this.openClearButton()}
-                    onKeyDown={(e) => {
-                      if (e.code === 'Enter') {
-                        this.menuSearch();
-                      }
-                    }}
-                  />
-                  <div class="search-input-actions">
+            <div
+              className="panels"
+              id="paneles"
+              onScroll={() => this.storePanelScroll()}
+            >
+              <div className="search-panel">
+                <div className="menu-searchpanel">
+                  <div class="search-input menu-search-input">
+                    <input
+                      type="text"
+                      id="menu-searchtext"
+                      maxlength="200"
+                      placeholder="Search products and datasets"
+                      onChange={() => this.openClearButton()}
+                      onKeyDown={(e) => {
+                        if (e.code === 'Enter') {
+                          this.menuSearch();
+                        }
+                      }}
+                    />
+                    <div class="search-input-actions">
+                      <button
+                        class="ui basic icon button search-input-clear-icon-button clearsearch"
+                        onClick={() => this.clearMenuText()}
+                        onKeyDown={(e) => {
+                          if (
+                            !e.altKey &&
+                            e.code !== 'Tab' &&
+                            !e.ctrlKey &&
+                            e.code !== 'Delete' &&
+                            !e.shiftKey &&
+                            !e.code.startsWith('F')
+                          ) {
+                            this.clearMenuText();
+                          }
+                        }}
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 26 26"
+                          class="icon"
+                        >
+                          <path
+                            fill-rule="evenodd"
+                            d="M27.899 9.515L26.485 8.101 18 16.586 9.514 8.101 8.1 9.515 16.586 18 8.1 26.486 9.514 27.9 18 19.414 26.485 27.9 27.899 26.486 19.414 18z"
+                          ></path>
+                        </svg>
+                      </button>
+                    </div>
                     <button
-                      class="ui basic icon button search-input-clear-icon-button clearsearch"
-                      onClick={() => this.clearMenuText()}
+                      aria-label="Search"
+                      class="button menu-search-button"
+                      onClick={() => this.menuSearch()}
                       onKeyDown={(e) => {
                         if (
                           !e.altKey &&
@@ -4465,63 +4503,57 @@ class MenuWidget extends React.Component {
                           !e.shiftKey &&
                           !e.code.startsWith('F')
                         ) {
-                          this.clearMenuText();
+                          this.menuSearch();
                         }
                       }}
                     >
+                      <span class="ccl-icon-zoom search-menu-icon"></span>
+                    </button>
+                  </div>
+                  <div class="filters-element filter-logo filters-header">
+                    <div class="filters-title">
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 26 26"
-                        class="icon"
+                        viewBox="0 0 36 36"
+                        class="icon ui"
                       >
                         <path
                           fill-rule="evenodd"
-                          d="M27.899 9.515L26.485 8.101 18 16.586 9.514 8.101 8.1 9.515 16.586 18 8.1 26.486 9.514 27.9 18 19.414 26.485 27.9 27.899 26.486 19.414 18z"
+                          d="M5.0916,5.0002 L14.9996,19.3132 L14.9996,34.0002 L20.9996,29.5002 L20.9996,19.3132 L30.9086,5.0002 L5.0916,5.0002 Z M17.0006,18.6872 L8.9086,7.0002 L27.0916,7.0002 L19.0006,18.6872 L19.0006,28.5002 L17.0006,30.0002 L17.0006,18.6872 Z"
                         ></path>
                       </svg>
-                    </button>
-                  </div>
-                  <button
-                    aria-label="Search"
-                    class="button menu-search-button"
-                    onClick={() => this.menuSearch()}
-                    onKeyDown={(e) => {
-                      if (
-                        !e.altKey &&
-                        e.code !== 'Tab' &&
-                        !e.ctrlKey &&
-                        e.code !== 'Delete' &&
-                        !e.shiftKey &&
-                        !e.code.startsWith('F')
-                      ) {
-                        this.menuSearch();
-                      }
-                    }}
-                  >
-                    <span class="ccl-icon-zoom search-menu-icon"></span>
-                  </button>
-                </div>
-                <div class="filters-element filter-logo filters-header">
-                  <div class="filters-title">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 36 36"
-                      class="icon ui"
-                    >
-                      <path
-                        fill-rule="evenodd"
-                        d="M5.0916,5.0002 L14.9996,19.3132 L14.9996,34.0002 L20.9996,29.5002 L20.9996,19.3132 L30.9086,5.0002 L5.0916,5.0002 Z M17.0006,18.6872 L8.9086,7.0002 L27.0916,7.0002 L19.0006,18.6872 L19.0006,28.5002 L17.0006,30.0002 L17.0006,18.6872 Z"
-                      ></path>
-                    </svg>
-                    <span class="filters-title-bold">Filters</span>
+                      <span class="filters-title-bold">Filters</span>
+                      <div
+                        className="clear-filters"
+                        tabIndex="0"
+                        role="button"
+                        onClick={() => {
+                          this.clearFilters();
+                          this.menuSearch();
+                        }}
+                        onKeyDown={(e) => {
+                          if (
+                            !e.altKey &&
+                            e.code !== 'Tab' &&
+                            !e.ctrlKey &&
+                            e.code !== 'Delete' &&
+                            !e.shiftKey &&
+                            !e.code.startsWith('F')
+                          ) {
+                            this.clearFilters();
+                            this.menuSearch();
+                          }
+                        }}
+                      >
+                        Clear filters
+                      </div>
+                    </div>
+
                     <div
-                      className="clear-filters"
-                      tabIndex="0"
+                      className="dropdown-icon close-filters-icon"
                       role="button"
-                      onClick={() => {
-                        this.clearFilters();
-                        this.menuSearch();
-                      }}
+                      tabIndex="0"
+                      onClick={() => this.closeFilters()}
                       onKeyDown={(e) => {
                         if (
                           !e.altKey &&
@@ -4531,77 +4563,49 @@ class MenuWidget extends React.Component {
                           !e.shiftKey &&
                           !e.code.startsWith('F')
                         ) {
-                          this.clearFilters();
-                          this.menuSearch();
+                          this.closeFilters();
                         }
                       }}
                     >
-                      Clear filters
+                      <FontAwesomeIcon icon={['fas', this.state.filterArrow]} />
                     </div>
                   </div>
-
-                  <div
-                    className="dropdown-icon close-filters-icon"
-                    role="button"
-                    tabIndex="0"
-                    onClick={() => this.closeFilters()}
-                    onKeyDown={(e) => {
-                      if (
-                        !e.altKey &&
-                        e.code !== 'Tab' &&
-                        !e.ctrlKey &&
-                        e.code !== 'Delete' &&
-                        !e.shiftKey &&
-                        !e.code.startsWith('F')
-                      ) {
-                        this.closeFilters();
-                      }
-                    }}
-                  >
-                    <FontAwesomeIcon icon={['fas', this.state.filterArrow]} />
+                  <div className="filters-panel">
+                    <span className="menu-filter">
+                      Component
+                      <select
+                        id="select-component"
+                        class="esri-select filter-select"
+                        onBlur={() => {}}
+                        onChange={() => {
+                          this.loadProductFilters();
+                          this.menuSearch();
+                        }}
+                      ></select>
+                    </span>
+                    <span className="menu-filter">
+                      Product groups
+                      <select
+                        id="select-product"
+                        class="esri-select filter-select"
+                        onBlur={() => {}}
+                        onChange={() => {
+                          this.loadFamilyFilters();
+                          this.menuSearch();
+                        }}
+                      ></select>
+                    </span>
+                    <span className="menu-filter menu-family-filter">
+                      Family
+                      <select
+                        id="select-family"
+                        class="esri-select filter-select"
+                      ></select>
+                    </span>
                   </div>
                 </div>
-                <div className="filters-panel">
-                  <span className="menu-filter">
-                    Component
-                    <select
-                      id="select-component"
-                      class="esri-select filter-select"
-                      onBlur={() => {}}
-                      onChange={() => {
-                        this.loadProductFilters();
-                        this.menuSearch();
-                      }}
-                    ></select>
-                  </span>
-                  <span className="menu-filter">
-                    Product groups
-                    <select
-                      id="select-product"
-                      class="esri-select filter-select"
-                      onBlur={() => {}}
-                      onChange={() => {
-                        this.loadFamilyFilters();
-                        this.menuSearch();
-                      }}
-                    ></select>
-                  </span>
-                  <span className="menu-filter menu-family-filter">
-                    Family
-                    <select
-                      id="select-family"
-                      class="esri-select filter-select"
-                    ></select>
-                  </span>
-                </div>
               </div>
-            </div>
-            <div className="no-filter-result-message">No data available</div>
-            <div
-              className="panels"
-              id="paneles"
-              onScroll={() => this.storePanelScroll()}
-            >
+              <div className="no-filter-result-message">No data available</div>
               <div
                 className={
                   !this.props.download ? 'panel panel-selected' : 'panel'

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

@@ -1638,13 +1638,13 @@ div.map-container.popup-block {
 }
 
 .filter-select {
-  max-width: 19rem;
+  max-width: 18rem;
   height: 1.5rem !important;
 }
 
 .clear-filters {
   display: none;
-  margin-left: 16rem;
+  margin-left: 15rem;
   font-size: small;
   text-decoration: underline;
 }
@@ -1652,7 +1652,7 @@ div.map-container.popup-block {
 .clearsearch.search-input-clear-icon-button.button {
   position: absolute;
   top: 4.3rem;
-  left: 23rem;
+  left: 22.5rem;
   display: none;
 }