@eeacms/volto-arcgis-block 0.1.345 → 0.1.346

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.346](https://github.com/eea/volto-arcgis-block/compare/0.1.345...0.1.346) - 1 April 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-286065 (bug): Pan cursor no longer pushes other widget buttons down when loading in view [Unai Bolivar - [`98bb42b`](https://github.com/eea/volto-arcgis-block/commit/98bb42bcf2ef04fae4b2821c2b7290e911c84478)]
+- CLMS-286065 (bug): Fixed bug where deleting a user service does not uncheck the rest of the user services [Unai Bolivar - [`300be08`](https://github.com/eea/volto-arcgis-block/commit/300be0808a3c81ee21581ae64080b1533ac9b784)]
+- CLMS-286081 (bug): Fixed persistence for user services of logged user. [Unai Bolivar - [`43dacf7`](https://github.com/eea/volto-arcgis-block/commit/43dacf79aefaf6925f9cdfdaedacb7fcae9fab63)]
+- CLMS-286042 (bug): Fixed user wms service not loading after being deleted from my services [Unai Bolivar - [`17c8bef`](https://github.com/eea/volto-arcgis-block/commit/17c8bef7ac05c1ea1bedfdf61c54ed3193a27c3d)]
 ### [0.1.345](https://github.com/eea/volto-arcgis-block/compare/0.1.344...0.1.345) - 28 March 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -855,6 +855,9 @@ class AreaWidget extends React.Component {
   rectanglehandler(event) {
     this.clearWidget();
     window.document.querySelector('.pan-container').style.display = 'flex';
+    window.document.querySelector('.pan-container').style.position = 'absolute';
+    window.document.querySelector('.pan-container').style.paddingRight =
+      '21rem';
     var fillSymbol = {
       type: 'simple-fill',
       color: [255, 255, 255, 0.5],

package/src/components/MapViewer/MapViewer.jsx

@@ -61,6 +61,7 @@ class MapViewer extends React.Component {
       layers: {},
       uploadedFile: true,
       wmsServiceUrl: '',
+      uploadError: false,
     };
     this.activeLayersHandler = this.activeLayersHandler.bind(this);
     this.activeLayersArray = {};
@@ -169,16 +170,10 @@ class MapViewer extends React.Component {
     this.setState({ uploadedFile: message });
   }
 
-  uploadFileErrorHandler = (error) => {
-    this.setState({
-      showInfoPopup: true,
-      infoPopupType: 'uploadError',
-    });
+  uploadFileErrorHandler = () => {
+    this.setState({ uploadError: true });
     setTimeout(() => {
-      this.setState({
-        showInfoPopup: false,
-        infoPopupType: '',
-      });
+      this.setState({ uploadError: false });
     }, 3000);
   };
 
@@ -191,7 +186,7 @@ class MapViewer extends React.Component {
     }
   };
 
-  serviceAddedHandler = () => {
+  serviceChangeHandler = () => {
     // Reset wmsServiceUrl without causing a new update of the children
     this.setState({ wmsServiceUrl: '' });
   };
@@ -481,43 +476,43 @@ class MapViewer extends React.Component {
       );
   }
 
-  renderMenu() {
-    if (this.view)
-      return (
-        <MenuWidget
-          location={this.location}
-          view={this.view}
-          conf={this.props.mapviewer_config.Components}
-          download={this.props.mapviewer_config.Download}
-          map={this.map}
-          mapViewer={this}
-          updateArea={this.updateArea}
-          area={this.state.area}
-          layers={this.state.layers}
-          activeLayersHandler={this.activeLayersHandler}
-          urls={this.cfgUrls}
-          loadingHandler={this.loadingHandler}
-          hotspotDataHandler={this.hotspotDataHandler}
-          hotspotData={this.state.hotspotData}
-          mapLayersHandler={this.mapLayersHandler}
-          bookmarkData={this.state.bookmarkData}
-          bookmarkHandler={this.bookmarkHandler}
-          prepackageChecked={this.state.prepackageChecked}
-          prepackageHandler={this.prepackageHandler}
-          uploadedFile={this.state.uploadedFile}
-          uploadFileHandler={this.uploadFileHandler}
-          uploadUrlServiceHandler={this.uploadUrlServiceHandler}
-          wmsServiceUrl={this.state.wmsServiceUrl}
-          onServiceAdded={this.serviceAddedHandler}
-          uploadFileErrorHandler={this.uploadFileErrorHandler}
-          //getTaxonomy={this.getTaxonomy}
-        />
-      ); //call conf
-  }
+  // renderMenu() {
+  //   if (this.view)
+  //     return (
+  //       <MenuWidget
+  //         location={this.location}
+  //         view={this.view}
+  //         conf={this.props.mapviewer_config.Components}
+  //         download={this.props.mapviewer_config.Download}
+  //         map={this.map}
+  //         mapViewer={this}
+  //         updateArea={this.updateArea}
+  //         area={this.state.area}
+  //         layers={this.state.layers}
+  //         activeLayersHandler={this.activeLayersHandler}
+  //         urls={this.cfgUrls}
+  //         loadingHandler={this.loadingHandler}
+  //         hotspotDataHandler={this.hotspotDataHandler}
+  //         hotspotData={this.state.hotspotData}
+  //         mapLayersHandler={this.mapLayersHandler}
+  //         bookmarkData={this.state.bookmarkData}
+  //         bookmarkHandler={this.bookmarkHandler}
+  //         prepackageChecked={this.state.prepackageChecked}
+  //         prepackageHandler={this.prepackageHandler}
+  //         uploadedFile={this.state.uploadedFile}
+  //         uploadFileHandler={this.uploadFileHandler}
+  //         uploadUrlServiceHandler={this.uploadUrlServiceHandler}
+  //         wmsServiceUrl={this.state.wmsServiceUrl}
+  //         onServiceChange={this.serviceChangeHandler}
+  //         uploadFileErrorHandler={this.uploadFileErrorHandler}
+  //         //getTaxonomy={this.getTaxonomy}
+  //       />
+  //     ); //call conf
+  // }
 
-  renderBookmark() {
-    if (this.view) return <CheckUserID reference={this} />;
-  }
+  // renderBookmark() {
+  //   if (this.view) return <CheckUserID reference={this} />;
+  // }
 
   appLanguage() {
     return intl && <CheckLanguage />;
@@ -538,8 +533,9 @@ class MapViewer extends React.Component {
           map={this.map}
           mapViewer={this}
           wmsServiceUrl={this.state.wmsServiceUrl}
+          showErrorPopup={this.state.uploadError}
           uploadUrlServiceHandler={this.uploadUrlServiceHandler}
-          uploadfileErrorHandler={this.uploadFileErrorHandler}
+          uploadFileErrorHandler={this.uploadFileErrorHandler}
         />
       );
   }
@@ -572,8 +568,9 @@ class MapViewer extends React.Component {
             {this.renderScale()}
             {this.renderInfo()}
             {this.renderHotspot()}
-            {this.renderMenu()}
-            {this.renderBookmark()}
+            {/*this.renderMenu()*/}
+            {/*this.renderBookmark()*/}
+            <CheckUserID reference={this} />
             {this.renderLoadingSpinner()}
             {this.renderUploadService()}
           </div>
@@ -607,20 +604,54 @@ export const CheckLogin = ({ reference }) => {
 };
 export const CheckUserID = ({ reference }) => {
   let { user_id } = useCartState();
+
   return (
     <>
-      {
-        <BookmarkWidget
-          view={reference.view}
-          map={reference.map}
-          layers={reference.state.layers}
-          mapViewer={reference}
-          userID={user_id}
-          hotspotData={reference.state.hotspotData}
-          bookmarkHandler={reference.bookmarkHandler}
-          bookmarkData={reference.state.bookmarkData}
-        />
-      }
+      {reference.view && (
+        <>
+          {/* BookmarkWidget with user_id */}
+          <BookmarkWidget
+            view={reference.view}
+            map={reference.map}
+            layers={reference.state.layers}
+            mapViewer={reference}
+            userID={user_id}
+            hotspotData={reference.state.hotspotData}
+            bookmarkHandler={reference.bookmarkHandler}
+            bookmarkData={reference.state.bookmarkData}
+          />
+
+          {/* MenuWidget with user_id */}
+          <MenuWidget
+            location={reference.location}
+            view={reference.view}
+            conf={reference.props.mapviewer_config.Components}
+            download={reference.props.mapviewer_config.Download}
+            map={reference.map}
+            mapViewer={reference}
+            updateArea={reference.updateArea}
+            area={reference.state.area}
+            layers={reference.state.layers}
+            activeLayersHandler={reference.activeLayersHandler}
+            urls={reference.cfgUrls}
+            loadingHandler={reference.loadingHandler}
+            hotspotDataHandler={reference.hotspotDataHandler}
+            hotspotData={reference.state.hotspotData}
+            mapLayersHandler={reference.mapLayersHandler}
+            bookmarkData={reference.state.bookmarkData}
+            bookmarkHandler={reference.bookmarkHandler}
+            prepackageChecked={reference.state.prepackageChecked}
+            prepackageHandler={reference.prepackageHandler}
+            uploadedFile={reference.state.uploadedFile}
+            uploadFileHandler={reference.uploadFileHandler}
+            uploadUrlServiceHandler={reference.uploadUrlServiceHandler}
+            wmsServiceUrl={reference.state.wmsServiceUrl}
+            onServiceChange={reference.serviceChangeHandler}
+            uploadFileErrorHandler={reference.uploadFileErrorHandler}
+            userID={user_id}
+          />
+        </>
+      )}
     </>
   );
 };

package/src/components/MapViewer/MenuWidget.jsx

@@ -7,6 +7,9 @@ import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 import { Modal, Popup } from 'semantic-ui-react';
 import AreaWidget from './AreaWidget';
 import TimesliderWidget from './TimesliderWidget';
+
+export const USER_SERVICES_KEY = 'user_services_session';
+
 var WMSLayer,
   WMTSLayer,
   FeatureLayer,
@@ -404,6 +407,7 @@ class MenuWidget extends React.Component {
     this.compCfg = this.props.conf;
     this.map = this.props.map;
     this.view = this.props.view;
+    this.userID = this.props.userID;
     this.state = {
       showMapMenu: false,
       noServiceModal: false,
@@ -927,7 +931,7 @@ class MenuWidget extends React.Component {
     this.loadVisibility();
     this.handleRasterVectorLegend();
     this.map.when(() => {
-      this.map.layers.on('change', (e) => {
+      this.map.layers.on('change', () => {
         if (!this.props.bookmarkData?.active) return;
 
         this.map.layers.removeAll();
@@ -1000,6 +1004,7 @@ class MenuWidget extends React.Component {
     const myServicesContainer = document.createElement('div');
     ReactDOM.render(myServicesComponent, myServicesContainer);
     this.container.current.appendChild(myServicesContainer.firstChild);
+    this.loadUserServicesFromStorage();
   }
 
   setSliderTag(val) {
@@ -1958,10 +1963,18 @@ class MenuWidget extends React.Component {
   }
 
   async handleNewMapServiceLayer(viewService) {
-    // Check if the URL is already in state to prevent duplicates
+    // First, properly normalize the URL for comparison
+    const normalizedViewService = viewService.trim();
+
     if (
-      this.state.wmsUserServiceLayers.some((layer) => layer.url === viewService)
+      this.state.wmsUserServiceLayers.some(
+        (layer) =>
+          layer.url === normalizedViewService ||
+          layer.ViewService === normalizedViewService,
+      )
     ) {
+      // Call the uploadFileErrorHandler to show the error popup
+      this.props.uploadFileErrorHandler();
       return;
     }
 
@@ -2029,24 +2042,19 @@ class MenuWidget extends React.Component {
         // Create and add the new layer
         this.layers[LayerId] = new WMSLayer(layerObj);
 
+        this.saveCheckedLayer(layerId);
+
         // Update state to include the new layer, which will trigger componentDidUpdate
         this.setState((prevState) => {
-          return {
-            wmsUserServiceLayers: [
-              ...prevState.wmsUserServiceLayers,
-              this.layers[LayerId],
-            ],
-          };
+          const updatedLayers = [
+            ...prevState.wmsUserServiceLayers,
+            this.layers[LayerId],
+          ];
+          this.saveUserServicesToStorage(updatedLayers);
+          return { wmsUserServiceLayers: updatedLayers };
         });
 
-        this.props.onServiceAdded();
-
-        // Add the layer to the map
-        const node = document.getElementById(LayerId);
-        if (node) {
-          node.checked = true;
-          this.toggleLayer(node);
-        }
+        this.props.onServiceChange();
       } catch (error) {
         // Set a popup error message in here
         this.props.uploadFileErrorHandler();
@@ -2183,7 +2191,8 @@ class MenuWidget extends React.Component {
       removeLayer = null;
     }
 
-    // Update state to trigger componentDidUpdate
+    this.props.onServiceChange();
+
     this.setState((prevState) => {
       const layerExists = prevState.wmsUserServiceLayers.some(
         (layer) => layer.LayerId === elemId,
@@ -2193,16 +2202,95 @@ class MenuWidget extends React.Component {
         const newWmsUserServiceLayers = prevState.wmsUserServiceLayers.filter(
           (layer) => layer.LayerId !== elemId,
         );
-        return {
-          wmsUserServiceLayers: newWmsUserServiceLayers,
-        };
+        this.saveUserServicesToStorage(newWmsUserServiceLayers);
+        return { wmsUserServiceLayers: newWmsUserServiceLayers };
       }
-
-      // If layer doesn't exist, return unchanged state to avoid issues
       return null;
     });
   }
 
+  saveUserServicesToStorage(layers) {
+    if (this.userID == null) return;
+
+    try {
+      const layersToSave = layers.map((layer) => {
+        // Create a simplified object for storage
+        return {
+          url: layer.url,
+          featureInfoFormat: layer.featureInfoFormat,
+          featureInfoUrl: layer.featureInfoUrl,
+          title: layer.title,
+          legendEnabled: layer.legendEnabled,
+          sublayers: layer.sublayers?.items?.map((sublayer) => ({
+            index: sublayer.index,
+            name: sublayer.name,
+            title: sublayer.title,
+            popupEnabled: sublayer.popupEnabled,
+            queryable: sublayer.queryable,
+            visible: sublayer.visible,
+            legendEnabled: sublayer.legendEnabled,
+            legendUrl: sublayer.legendUrl,
+            featureInfoUrl: sublayer.featureInfoUrl,
+          })),
+          ViewService: layer.ViewService,
+          LayerId: layer.LayerId,
+        };
+      });
+
+      localStorage.setItem(
+        USER_SERVICES_KEY + '_' + this.userID,
+        JSON.stringify(layersToSave),
+      );
+    } catch (error) {}
+  }
+
+  async loadUserServicesFromStorage() {
+    if (this.userID != null) {
+      try {
+        const savedServices = JSON.parse(
+          localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
+        );
+
+        if (savedServices && Array.isArray(savedServices)) {
+          // Process saved services to recreate actual layer objects
+          const recreatedLayers = await Promise.all(
+            savedServices.map(async (serviceData) => {
+              try {
+                // Create a new WMSLayer with the saved properties
+                const newLayer = new WMSLayer(serviceData);
+                // Add to this.layers
+                this.layers[serviceData.LayerId] = newLayer;
+                return newLayer;
+              } catch (error) {
+                return null;
+              }
+            }),
+          );
+
+          // Filter out any null values from failed recreations
+          const validLayers = recreatedLayers.filter((layer) => layer !== null);
+
+          // Update state with recreated layers
+          this.setState({ wmsUserServiceLayers: validLayers });
+          // Get checked layers from session storage
+          const checkedLayers =
+            JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
+
+          // For each valid layer that was previously checked, make it visible
+          validLayers.forEach((layer) => {
+            if (checkedLayers.includes(layer.LayerId)) {
+              const node = document.getElementById(layer.LayerId);
+              if (node) {
+                node.checked = true;
+                this.toggleLayer(node);
+              }
+            }
+          });
+        }
+      } catch (error) {}
+    }
+  }
+
   /**
    * Method to show/hide a layer. Update checkboxes from dataset and products
    * @param {*} elem Is the checkbox
@@ -4093,6 +4181,21 @@ class MenuWidget extends React.Component {
 
     if (prevState.wmsUserServiceLayers !== this.state.wmsUserServiceLayers) {
       this.createUserServices(this.state.wmsUserServiceLayers);
+      setTimeout(() => {
+        const checkedLayers =
+          JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
+
+        // For each valid layer that was previously checked, make it visible
+        this.state.wmsUserServiceLayers.forEach((layer) => {
+          if (checkedLayers.includes(layer.LayerId)) {
+            const node = document.getElementById(layer.LayerId);
+            if (node) {
+              node.checked = true;
+              this.toggleLayer(node);
+            }
+          }
+        });
+      }, 0);
     }
     if (
       this.state.wmsUserServiceLayers.length > 0 &&
@@ -4123,13 +4226,23 @@ class MenuWidget extends React.Component {
     }
     const latestLayer = JSON.parse(sessionStorage.getItem('TMSLayerObj'));
 
-    if (latestLayer) {
+    if (latestLayer && BaseTileLayer) {
       this.view.when(() => {
         if (this.view.stationary) {
           const { layer, checkboxId, dataset } = latestLayer;
           this.processTMSLayer(checkboxId, layer, dataset);
         }
       });
+    } else if (latestLayer) {
+      // If we have a layer but BaseTileLayer isn't loaded yet, wait for it
+      this.loader().then(() => {
+        this.view.when(() => {
+          if (this.view.stationary) {
+            const { layer, checkboxId, dataset } = latestLayer;
+            this.processTMSLayer(checkboxId, layer, dataset);
+          }
+        });
+      });
     }
     this.setLegendOpacity();
   }

package/src/components/MapViewer/UploadWidget.jsx

@@ -27,6 +27,8 @@ class UploadWidget extends React.Component {
     this.mapviewer_config = this.props.mapviewer_config;
     this.fileInput = createRef();
     this.uploadUrlServiceHandler = this.props.uploadUrlServiceHandler;
+    this.uploadFileErrorHandler = this.props.uploadFileErrorHandler;
+    this.errorPopup = this.errorPopup.bind(this);
   }
 
   loader() {
@@ -139,17 +141,21 @@ class UploadWidget extends React.Component {
         wmsServiceUrl: '',
       });
     } else {
+      this.errorPopup();
+    }
+  };
+
+  errorPopup = () => {
+    this.setState({
+      showInfoPopup: true,
+      infoPopupType: 'uploadError',
+    });
+    setTimeout(() => {
       this.setState({
-        showInfoPopup: true,
-        infoPopupType: 'uploadError',
+        showInfoPopup: false,
+        infoPopupType: '',
       });
-      setTimeout(() => {
-        this.setState({
-          showInfoPopup: false,
-          infoPopupType: '',
-        });
-      }, 3000);
-    }
+    }, 3000);
   };
 
   /**
@@ -171,6 +177,12 @@ class UploadWidget extends React.Component {
     });
   }
 
+  componentDidUpdate(prevProps) {
+    if (!prevProps.showErrorPopup && this.props.showErrorPopup) {
+      this.errorPopup();
+    }
+  }
+
   /**
    * This method renders the component
    * @returns jsx