@eeacms/volto-arcgis-block 0.1.405 → 0.1.407

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.407](https://github.com/eea/volto-arcgis-block/compare/0.1.406...0.1.407) - 19 November 2025
+
+#### :hammer_and_wrench: Others
+
+- (feat): Rebased develop with this branch [Unai Bolivar - [`dae3e96`](https://github.com/eea/volto-arcgis-block/commit/dae3e96d56bd21d54a348267289932d299ba67b2)]
+- (feat): Linting and prettifying before push [Unai Bolivar - [`455aa13`](https://github.com/eea/volto-arcgis-block/commit/455aa133d4da07949f3751d099c3f9ccddd4d971)]
+- (feat): Error Report widget added user instructions and style changes [Unai Bolivar - [`3e69a69`](https://github.com/eea/volto-arcgis-block/commit/3e69a690467e1a66552a0ff8579b30eaabb5b95e)]
+- (feat): Error Report widget added functionality, fixed bugs in css styles. [Unai Bolivar - [`1c833b2`](https://github.com/eea/volto-arcgis-block/commit/1c833b2b62e279fee1adbac0233f8d1cc5f2f559)]
+- (feat): Error Report widget creation [Unai Bolivar - [`47ad31e`](https://github.com/eea/volto-arcgis-block/commit/47ad31e724279be223f3bdd3d8d619db32c24293)]
+### [0.1.406](https://github.com/eea/volto-arcgis-block/compare/0.1.405...0.1.406) - 19 November 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-293307+CLMS-289791+CLMS-289790 (bug): Download button creation correction [Urkorue - [`d3684ca`](https://github.com/eea/volto-arcgis-block/commit/d3684ca9cb6ae617fa8c9fd1c1cf286f5fe8910f)]
 ### [0.1.405](https://github.com/eea/volto-arcgis-block/compare/0.1.404...0.1.405) - 12 November 2025
 
 ### [0.1.404](https://github.com/eea/volto-arcgis-block/compare/0.1.403...0.1.404) - 5 November 2025

package/package.json

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

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -290,7 +290,81 @@ class BookmarkWidget extends React.Component {
                     download_button.innerText = '⭳';
                     download_button.bookmarkName = bookmark.innerText;
                     download_button.addEventListener('click', (e) => {
-                      this.downloadBookmark(e.currentTarget.bookmarkName);
+                      const name = e.currentTarget.bookmarkName;
+                      let storageKey;
+                      if (document.querySelector('.fa-user')) {
+                        storageKey =
+                          'user_' +
+                          document.querySelector('.fa-user').nextSibling
+                            .textContent;
+                      } else {
+                        storageKey = 'user_anonymous';
+                      }
+                      let userObj;
+                      try {
+                        userObj =
+                          JSON.parse(localStorage.getItem(storageKey)) || {};
+                      } catch (e) {
+                        userObj = {};
+                      }
+                      let bookmarks =
+                        userObj &&
+                        userObj.bookmarks &&
+                        typeof userObj.bookmarks === 'object'
+                          ? userObj.bookmarks
+                          : null;
+                      if (!bookmarks) {
+                        try {
+                          bookmarks = JSON.parse(
+                            localStorage.getItem(
+                              storageKey + '_bookmarks_backup',
+                            ),
+                          );
+                        } catch (e) {
+                          return;
+                        }
+                      }
+                      if (!bookmarks) return;
+                      let index = 0;
+                      for (index; index < bookmarks.items.length; index++) {
+                        if (bookmarks.items[index].name === name) {
+                          break;
+                        }
+                      }
+                      let selectedBookmark = {
+                        items: Array.isArray(bookmarks.items)
+                          ? bookmarks.items[index]
+                          : [],
+                        layers: Array.isArray(bookmarks.layers)
+                          ? bookmarks.layers[index]
+                          : [],
+                        opacity: Array.isArray(bookmarks.opacity)
+                          ? bookmarks.opacity[index]
+                          : [],
+                        visible: Array.isArray(bookmarks.visible)
+                          ? bookmarks.visible[index]
+                          : [],
+                        hotspot: Array.isArray(bookmarks.hotspot)
+                          ? bookmarks.hotspot[index]
+                          : [],
+                        selectedHotspotFilter:
+                          bookmarks.selectedHotspotFilter != null
+                            ? bookmarks.selectedHotspotFilter
+                            : null,
+                      };
+                      let filename = 'bookmark_' + selectedBookmark.items.name;
+                      const blob = new Blob(
+                        [JSON.stringify(selectedBookmark)],
+                        {
+                          type: 'application/json',
+                        },
+                      );
+                      const url = URL.createObjectURL(blob);
+                      const a = document.createElement('a');
+                      a.href = url;
+                      a.download = `${filename}.json`;
+                      a.click();
+                      URL.revokeObjectURL(url);
                     });
                     bookmark.insertBefore(tooltip, bookmark.childNodes[2]);
                   }

package/src/components/MapViewer/ErrorReportWidget.jsx

@@ -0,0 +1,299 @@
+import React, { createRef } from 'react';
+import { loadModules } from 'esri-loader';
+
+class ErrorReport extends React.Component {
+  constructor(props) {
+    super(props);
+    this.container = createRef();
+    this.state = {
+      showMapMenu: false,
+      latlong: null,
+      selecting: false,
+      datasets: [],
+      instructionsText: 'First select a pixel in the data viewer',
+    };
+    this.menuClass =
+      'esri-icon-notice-round esri-widget--button esri-widget esri-interactive';
+    this.helpdeskUrl = 'https://land.copernicus.eu/en/contact-service-helpdesk';
+  }
+
+  loader() {
+    return loadModules([]).then(() => {});
+  }
+
+  openMenu() {
+    if (this.state.showMapMenu) {
+      this.props.mapViewer.setActiveWidget();
+      this.container.current.querySelector('.right-panel').style.display =
+        'none';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.remove('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.remove('show-panel');
+      this.setState({ showMapMenu: false });
+      this.resetData();
+    } else {
+      this.props.mapViewer.setActiveWidget(this);
+      this.container.current.querySelector('.right-panel').style.display =
+        'flex';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.add('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.add('show-panel');
+      this.setState({ showMapMenu: true });
+      this.startSelection();
+    }
+  }
+
+  startSelection() {
+    if (this.state.selecting) return;
+    var handler = this.props.view.on(
+      'pointer-down',
+      function (evt) {
+        let pt = this.props.view.toMap({ x: evt.x, y: evt.y });
+        let ds = this.getCheckedDatasets();
+        let message =
+          'Selected coordinate: Lat ' +
+          pt.latitude.toFixed(4) +
+          ' Lon ' +
+          pt.longitude.toFixed(4) +
+          '. Active datasets: ' +
+          ds.join(', ');
+        try {
+          if (
+            navigator &&
+            navigator.clipboard &&
+            navigator.clipboard.writeText
+          ) {
+            navigator.clipboard.writeText(message);
+          } else {
+            let ta = document.createElement('textarea');
+            ta.value = message;
+            ta.setAttribute('readonly', '');
+            ta.style.position = 'absolute';
+            ta.style.left = '-9999px';
+            document.body.appendChild(ta);
+            ta.select();
+            document.execCommand('copy');
+            document.body.removeChild(ta);
+          }
+        } catch {}
+        this.setState({
+          latlong: { x: pt.latitude.toFixed(4), y: pt.longitude.toFixed(4) },
+          selecting: false,
+          datasets: ds,
+          instructionsText:
+            "The error report data has been added to your clipboard. Click the 'Service Desk' button and paste the clipboard content inside the Helpdesk's message box",
+        });
+        handler.remove();
+      }.bind(this),
+    );
+    this.setState({ selecting: handler });
+  }
+
+  getCheckedDatasets() {
+    try {
+      let uid = sessionStorage.getItem('mv_hydrated_for');
+      let key = uid ? 'user_' + uid : 'user_anonymous';
+      let raw = localStorage.getItem(key);
+      if (raw) {
+        let obj = JSON.parse(raw);
+        let cl = obj && obj.checkedLayers;
+        if (typeof cl === 'string') {
+          try {
+            cl = JSON.parse(cl);
+          } catch {}
+        }
+        if (Array.isArray(cl)) {
+          return [...new Set(cl)].filter((v) => v);
+        }
+      }
+    } catch {}
+    try {
+      let ss = sessionStorage.getItem('checkedLayers');
+      if (ss) {
+        let cl = ss;
+        if (typeof ss === 'string') {
+          try {
+            cl = JSON.parse(ss);
+          } catch {}
+        }
+        if (Array.isArray(cl)) {
+          return [...new Set(cl)].filter((v) => v);
+        }
+      }
+    } catch {}
+    let layers = [];
+    this.props.view.map.layers.forEach(function (l) {
+      if (l.visible) {
+        layers.push(l.title || l.id || 'layer');
+      }
+    });
+    return layers;
+  }
+
+  serviceDeskRedirect() {
+    if (!this.state.latlong) return;
+    let datasets =
+      this.state.datasets && this.state.datasets.length > 0
+        ? this.state.datasets
+        : this.getCheckedDatasets();
+    let message =
+      'Selected coordinate: Lat ' +
+      this.state.latlong.x +
+      ' Lon ' +
+      this.state.latlong.y +
+      '. Active datasets: ' +
+      datasets.join(', ');
+    try {
+      if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(message);
+      } else {
+        let ta = document.createElement('textarea');
+        ta.value = message;
+        ta.setAttribute('readonly', '');
+        ta.style.position = 'absolute';
+        ta.style.left = '-9999px';
+        document.body.appendChild(ta);
+        ta.select();
+        document.execCommand('copy');
+        document.body.removeChild(ta);
+      }
+    } catch {}
+    window.open(this.helpdeskUrl, '_blank');
+  }
+
+  resetData() {
+    if (this.state.selecting) {
+      this.state.selecting.remove();
+    }
+    this.setState({
+      latlong: null,
+      selecting: false,
+      datasets: [],
+      instructionsText: 'First select a pixel in the data viewer',
+    });
+  }
+
+  async componentDidMount() {
+    await this.loader();
+    if (!this.container.current) return;
+    this.props.view.when(() => {
+      if (!this.container.current) return;
+      var group = document.querySelector('.esri-ui-top-right.esri-ui-corner');
+      var addSelf = () => {
+        this.props.view.ui.add(this.container.current, {
+          position: 'top-right',
+          // index: 9999,
+        });
+      };
+      if (group && group.children && group.children.length > 0) {
+        addSelf();
+      } else if (group) {
+        var observer = new MutationObserver((m) => {
+          if (group.children.length > 0) {
+            addSelf();
+            observer.disconnect();
+          }
+        });
+        observer.observe(group, { childList: true });
+      } else {
+        addSelf();
+      }
+    });
+  }
+
+  render() {
+    return (
+      <>
+        <div ref={this.container} className="error-report-container">
+          <div tooltip="Report an issue" direction="left" type="widget">
+            <div
+              className={this.menuClass}
+              id="map_error_report_button"
+              aria-label="Report an issue"
+              onClick={this.openMenu.bind(this)}
+              onKeyDown={(e) => {
+                if (
+                  !e.altKey &&
+                  e.code !== 'Tab' &&
+                  !e.ctrlKey &&
+                  e.code !== 'Delete' &&
+                  !e.shiftKey &&
+                  !e.code.startsWith('F')
+                ) {
+                  this.openMenu(this);
+                }
+              }}
+              tabIndex="0"
+              role="button"
+            ></div>
+          </div>
+          <div className="right-panel">
+            <div className="right-panel-header">
+              <span>Report an issue</span>
+              <span
+                className="map-menu-icon esri-icon-close"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={(e) => {
+                  if (
+                    !e.altKey &&
+                    e.code !== 'Tab' &&
+                    !e.ctrlKey &&
+                    e.code !== 'Delete' &&
+                    !e.shiftKey &&
+                    !e.code.startsWith('F')
+                  ) {
+                    this.openMenu(this);
+                  }
+                }}
+                tabIndex="0"
+                role="button"
+              ></span>
+            </div>
+            <div className="right-panel-content">
+              <div className="error-report-panel">
+                <div className="error-report-instructions">
+                  {this.state.instructionsText}
+                </div>
+                <button
+                  className="error-report-button"
+                  disabled={!this.state.latlong}
+                  onClick={this.serviceDeskRedirect.bind(this)}
+                >
+                  Service desk
+                </button>
+                {this.state.latlong && (
+                  <>
+                    <h3 className="error-report-coords-heading">Coordinates</h3>
+                    <div className="error-report-coords">
+                      Lat {this.state.latlong.x} Lon {this.state.latlong.y}
+                    </div>
+                  </>
+                )}
+                {this.state.datasets && this.state.datasets.length > 0 && (
+                  <>
+                    <div className="error-report-datasets-title">
+                      Active datasets
+                    </div>
+                    <ul className="error-report-datasets">
+                      {this.state.datasets.map((d, i) => (
+                        <li key={i}>{d}</li>
+                      ))}
+                    </ul>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default ErrorReport;

package/src/components/MapViewer/MapViewer.jsx

@@ -30,6 +30,7 @@ import PanWidget from './PanWidget';
 import BookmarkWidget from './BookmarkWidget';
 import LoadingSpinner from './LoadingSpinner';
 import UploadWidget from './UploadWidget';
+import ErrorReportWidget from './ErrorReportWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
 import { getTaxonomy } from '@eeacms/volto-taxonomy/actions';
 import { fetchCatalogApiDates } from '../../actions';
@@ -1016,6 +1017,10 @@ class MapViewer extends React.Component {
         />
       );
   }
+  renderErrorReport() {
+    if (this.view)
+      return <ErrorReportWidget view={this.view} mapViewer={this} />;
+  }
   /**
    * This method renders the map viewer, invoking if necessary the methods
    * to render the other widgets to display
@@ -1048,6 +1053,7 @@ class MapViewer extends React.Component {
             {this.renderLoadingSpinner()}
             <CheckUserID reference={this} />
             {this.renderUploadService()}
+            {this.renderErrorReport()}
           </div>
         </div>
       );

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

@@ -313,6 +313,34 @@ button.upload-bookmark-button {
   font-size: 30px !important;
 }
 
+/* Error report */
+.error-report-button {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.75rem 1rem;
+  border: 1px solid #a0b128 !important;
+  margin: 1rem 0;
+  background-color: white !important;
+  color: #a0b128 !important;
+  cursor: pointer;
+  text-align: center;
+  transition: all 0.3s ease-out;
+}
+
+.error-report-button:hover {
+  border-color: #a0b128 !important;
+  background-color: #a0b128 !important;
+  color: white !important;
+}
+
+.error-report-datasets-title {
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  font-size: 1.17em;
+  font-weight: bold;
+}
+
 body.section-map-viewer
   #page-document.ui.container
   .esri-widget__content--empty