@eeacms/volto-arcgis-block 0.1.434 → 0.1.435

package/CHANGELOG.md

@@ -4,6 +4,12 @@ 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.435](https://github.com/eea/volto-arcgis-block/compare/0.1.434...0.1.435) - 10 March 2026
+
+#### :hammer_and_wrench: Others
+
+- (bug): Fix Upload widget TOC menu stored services correct loading in 2D and 3D [Unai Bolivar - [`8b9e5fa`](https://github.com/eea/volto-arcgis-block/commit/8b9e5fad5a7d361e8fa4c8f48ae771422ae1c262)]
+- (bug): fix upload widget error report, loading spinner, and TOC menu cleanup in 3D [Unai Bolivar - [`dc2ab0d`](https://github.com/eea/volto-arcgis-block/commit/dc2ab0d5ecafdb1cdc9c417bd8533c7ff0f28446)]
 ### [0.1.434](https://github.com/eea/volto-arcgis-block/compare/0.1.433...0.1.434) - 10 March 2026
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -1354,7 +1354,7 @@ class BookmarkWidget extends React.Component {
                 }}
                 type="submit"
               >
-                <span class="esri-bookmarks__add-bookmark-icon esri-icon-plus"></span>
+                <span className="esri-bookmarks__add-bookmark-icon esri-icon-plus"></span>
                 Upload a bookmark
               </button>
             </div>

package/src/components/MapViewer/LoadingSpinner.jsx

@@ -37,11 +37,17 @@ class LoadingSpinner extends React.Component {
     });
     const handle3 = this.props.view.on('layerview-create-error', (event) => {
       if (!this._isMounted) return;
-      if (event.layer.loadError !== null && this.state.loading === true) {
+      if (this.state.loading === true) {
         this.setState({ loading: false }, this.showLoading);
       }
     });
-    this.arcgisEventHandles.push(handle1, handle2, handle3);
+    const handle4 = this.props.view.watch('updating', (isUpdating) => {
+      if (!this._isMounted) return;
+      if (!isUpdating && this.state.loading === true) {
+        this.setState({ loading: false }, this.showLoading);
+      }
+    });
+    this.arcgisEventHandles.push(handle1, handle2, handle3, handle4);
   }
 
   showLoading() {

package/src/components/MapViewer/MapViewer.jsx

@@ -386,6 +386,7 @@ class MapViewer extends React.Component {
     this.isViewModeButtonLoaded = false;
     this.viewUiOperationState = null;
     this.shouldClearSessionOnUnmount = true;
+    this.uploadErrorTimeoutTask = null;
     this.scheduleViewModeButtonLoad = this.scheduleViewModeButtonLoad.bind(
       this,
     );
@@ -1305,8 +1306,16 @@ class MapViewer extends React.Component {
 
   uploadFileErrorHandler = (errorType = 'uploadError') => {
     this.setState({ uploadError: true, uploadErrorType: errorType });
-    setTimeout(() => {
+    if (this.uploadErrorTimeoutTask) {
+      clearTimeout(this.uploadErrorTimeoutTask);
+      this.uploadErrorTimeoutTask = null;
+    }
+    this.uploadErrorTimeoutTask = setTimeout(() => {
+      if (!this.isComponentMounted) {
+        return;
+      }
       this.setState({ uploadError: false, uploadErrorType: 'uploadError' });
+      this.uploadErrorTimeoutTask = null;
     }, 3000);
   };
 
@@ -1518,6 +1527,11 @@ class MapViewer extends React.Component {
       this.viewModeButtonTimeout = null;
     }
 
+    if (this.uploadErrorTimeoutTask) {
+      clearTimeout(this.uploadErrorTimeoutTask);
+      this.uploadErrorTimeoutTask = null;
+    }
+
     window.removeEventListener('beforeunload', this.handlePageUnload);
     window.removeEventListener('pagehide', this.handlePageUnload);
     document.removeEventListener(

package/src/components/MapViewer/MenuWidget.jsx

@@ -3583,6 +3583,35 @@ class MenuWidget extends React.Component {
           resourceLayer.ViewService = (viewService || '').trim();
         }
 
+        const isSceneUploadValidation =
+          this.view &&
+          this.view.type === '3d' &&
+          (serviceType === 'WMS' || serviceType === 'WMTS');
+
+        if (isSceneUploadValidation) {
+          try {
+            this.map.add(resourceLayer);
+            await this.view.whenLayerView(resourceLayer);
+          } catch (error) {
+            try {
+              if (this.map.findLayerById(resourceLayer.id)) {
+                this.map.remove(resourceLayer);
+              }
+            } catch (e) {}
+            if (this.isSceneTilingError(error)) {
+              this.props.uploadFileErrorHandler('sceneViewTilingError');
+              continue;
+            }
+            throw error;
+          }
+
+          try {
+            if (this.map.findLayerById(resourceLayer.id)) {
+              this.map.remove(resourceLayer);
+            }
+          } catch (e) {}
+        }
+
         const layerSignatureData = `${(
           resourceLayer.ViewService || ''
         ).trim()}::${resourceLayer.LayerId}`;
@@ -3897,6 +3926,14 @@ class MenuWidget extends React.Component {
         const checkedLayers =
           JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
         const isChecked = checkedLayers.includes(layer.LayerId);
+        const serviceType =
+          layer.type === 'wmts'
+            ? 'WMTS'
+            : layer.type === 'wms'
+            ? 'WMS'
+            : layer.type === 'geojson'
+            ? 'WFS'
+            : 'WMS';
 
         // Create a simplified object for storage
         return {
@@ -3918,9 +3955,18 @@ class MenuWidget extends React.Component {
           })),
           ViewService: layer.ViewService,
           LayerId: layer.LayerId,
+          serviceType: serviceType,
+          activeLayer:
+            serviceType === 'WMTS' && layer.activeLayer
+              ? {
+                  id: layer.activeLayer.id,
+                  title: layer.activeLayer.title,
+                  tileMatrixSetId: layer.activeLayer.tileMatrixSetId,
+                }
+              : null,
           visibility: layer.visible !== false,
           opacity: layer.opacity || 1,
-          checked: isChecked || layer.checked || false,
+          checked: isChecked,
         };
       });
 
@@ -3941,26 +3987,65 @@ class MenuWidget extends React.Component {
         if (savedServices && Array.isArray(savedServices)) {
           // Process saved services to recreate actual layer objects
           const recreatedLayers = await Promise.all(
-            savedServices.map(async (serviceData) => {
+            savedServices.map(async (serviceData, serviceIndex) => {
               try {
-                // Create a new WMSLayer with the saved properties
-                const newLayer = new WMSLayer(serviceData);
+                const resolveServiceType =
+                  serviceData.serviceType ||
+                  (typeof serviceData.ViewService === 'string' &&
+                  serviceData.ViewService.toLowerCase().includes('wmts')
+                    ? 'WMTS'
+                    : 'WMS');
+                const resolvedLayerId =
+                  serviceData.LayerId ||
+                  serviceData.id ||
+                  `user_service_${serviceIndex}`;
+                const newLayer =
+                  resolveServiceType === 'WMTS'
+                    ? new WMTSLayer({
+                        id: resolvedLayerId,
+                        url: serviceData.url || serviceData.ViewService,
+                        title: serviceData.title || '',
+                        spatialReference: this.view?.spatialReference,
+                        serviceMode: 'KVP',
+                        activeLayer: serviceData.activeLayer || undefined,
+                        ViewService:
+                          serviceData.ViewService || serviceData.url || '',
+                      })
+                    : new WMSLayer({
+                        id: resolvedLayerId,
+                        url: serviceData.url || serviceData.ViewService,
+                        featureInfoFormat:
+                          serviceData.featureInfoFormat || 'text/html',
+                        featureInfoUrl:
+                          serviceData.featureInfoUrl ||
+                          serviceData.url ||
+                          serviceData.ViewService,
+                        title: serviceData.title || '',
+                        legendEnabled: serviceData.legendEnabled,
+                        sublayers: serviceData.sublayers,
+                        ViewService:
+                          serviceData.ViewService || serviceData.url || '',
+                      });
 
                 // Set visibility property based on saved value
                 newLayer.visible = serviceData.visibility !== false;
+                newLayer.LayerId = resolvedLayerId;
+                if (serviceData.description) {
+                  newLayer.description = serviceData.description;
+                }
 
                 // Remember the original checked state and visibility
                 newLayer.checked = serviceData.checked;
 
                 // Initialize visibleLayers for this layer
                 if (!this.visibleLayers) this.visibleLayers = {};
-                this.visibleLayers[serviceData.LayerId] =
+                this.visibleLayers[resolvedLayerId] =
                   serviceData.visibility !== false
                     ? ['fas', 'eye']
                     : ['fas', 'eye-slash'];
 
                 // Add to this.layers
-                this.layers[serviceData.LayerId] = newLayer;
+                this.layers[resolvedLayerId] = newLayer;
                 return newLayer;
               } catch (error) {
                 return null;
@@ -3995,9 +4080,11 @@ class MenuWidget extends React.Component {
 
                     // Then check the checkbox and call toggleLayer with a flag to preserve visibility
                     node.checked = true;
+                    node.dataset.preserveCheckedLayerState = 'true';
 
                     // Custom addition to toggleLayer to bypass visibility override
                     this.toggleLayerWithoutVisibilityReset(node);
+                    delete node.dataset.preserveCheckedLayerState;
                   }
                 }
               });
@@ -4264,6 +4351,8 @@ class MenuWidget extends React.Component {
       this.state.wmsUserServiceLayers.find(
         (layer) => layer.LayerId === elem.id,
       ) || null;
+    const preserveCheckedLayerState =
+      elem.dataset && elem.dataset.preserveCheckedLayerState === 'true';
     if (elem.checked && !userService) {
       this.findCheckedDatasetNoServiceToVisualize(elem);
     }
@@ -4284,7 +4373,9 @@ class MenuWidget extends React.Component {
       if (!canApplyWmtsSettings) {
         elem.checked = false;
         this.layers[elem.id].visible = false;
-        this.deleteCheckedLayer(elem.id);
+        if (!preserveCheckedLayerState) {
+          this.deleteCheckedLayer(elem.id);
+        }
         delete this.activeLayersJSON[elem.id];
         if (this.visibleLayers) {
           delete this.visibleLayers[elem.id];
@@ -4303,7 +4394,9 @@ class MenuWidget extends React.Component {
         try {
           await this.layers[elem.id].load();
         } catch (error) {
-          this.processUnsupportedWmtsLayer(elem);
+          this.processUnsupportedWmtsLayer(elem, {
+            preserveCheckedLayerState,
+          });
           return;
         }
       }
@@ -4400,7 +4493,9 @@ class MenuWidget extends React.Component {
         try {
           await this.view.whenLayerView(this.layers[elem.id]);
         } catch (error) {
-          this.processUnsupportedWmtsLayer(elem);
+          this.processUnsupportedWmtsLayer(elem, {
+            preserveCheckedLayerState,
+          });
           return;
         }
       }
@@ -4539,13 +4634,16 @@ class MenuWidget extends React.Component {
     this.url = null;
   }
 
-  processUnsupportedWmtsLayer(elem) {
+  processUnsupportedWmtsLayer(elem, options = {}) {
+    const { preserveCheckedLayerState = false } = options;
     if (!elem || !this.layers || !this.layers[elem.id]) {
       return;
     }
     elem.checked = false;
     this.layers[elem.id].visible = false;
-    this.deleteCheckedLayer(elem.id);
+    if (!preserveCheckedLayerState) {
+      this.deleteCheckedLayer(elem.id);
+    }
     const mapLayer = this.map ? this.map.findLayerById(elem.id) : null;
     if (mapLayer) {
       try {
@@ -6906,7 +7004,9 @@ class MenuWidget extends React.Component {
             const node = document.getElementById(layer.LayerId);
             if (node) {
               node.checked = true;
+              node.dataset.preserveCheckedLayerState = 'true';
               this.toggleLayer(node);
+              delete node.dataset.preserveCheckedLayerState;
             }
           }
         });
@@ -7333,6 +7433,9 @@ class MenuWidget extends React.Component {
       for (var i = layers.length - 1; i >= 0; i--) {
         let layer = layers[i];
         let node = document.getElementById(layer);
+        const restoreLayerState = this.state.wmsUserServiceLayers.some(
+          (serviceLayer) => serviceLayer.LayerId === layer,
+        );
 
         if (node) {
           if (!node.checked) {
@@ -7340,7 +7443,13 @@ class MenuWidget extends React.Component {
             // click event fires toggleLayer()
             //node.dispatchEvent(event);
             node.checked = true;
+            if (restoreLayerState) {
+              node.dataset.preserveCheckedLayerState = 'true';
+            }
             this.toggleLayer(node);
+            if (restoreLayerState) {
+              delete node.dataset.preserveCheckedLayerState;
+            }
           }
 
           // set scroll position