@eeacms/volto-arcgis-block 0.1.344 → 0.1.346

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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
+
+- Revert "Develop" [Urkorue - [`912673e`](https://github.com/eea/volto-arcgis-block/commit/912673ec966b3d8a3dc6937b0db475ed0901fb15)]
 ### [0.1.344](https://github.com/eea/volto-arcgis-block/compare/0.1.343...0.1.344) - 27 March 2025
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.344",
+  "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();
   }
@@ -4558,132 +4671,83 @@ class MenuWidget extends React.Component {
   };
 
   loadComponentFilters() {
-    var checkList = document.getElementById('select-component');
-    checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
-      if (checkList.classList.contains('visible'))
-        checkList.classList.remove('visible');
-      else checkList.classList.add('visible');
-    };
-    let list = document.querySelector('.component-items');
+    var selectedComponent = document.getElementById('select-component');
+    selectedComponent.options.add(
+      new Option('Select a component', 'default', false, false),
+    );
+    selectedComponent.options[0].disabled = true;
+    var selectedProduct = document.getElementById('select-product');
+    selectedProduct.options.add(
+      new Option('Select a product', 'default', false, false),
+    );
+    selectedProduct.options[0].disabled = true;
+    document
+      .querySelector('.menu-family-filter')
+      .setAttribute('style', 'display: none;');
     this.compCfg.forEach((element) => {
-      let inputNode = document.createElement('input');
-      let lavelNode = document.createElement('lavel');
-      inputNode.setAttribute('type', 'checkbox');
-      inputNode.classList.add('component_item');
-      inputNode.setAttribute('value', element.ComponentPosition);
-      lavelNode.innerText = element.ComponentTitle;
-      let listNode = document.createElement('li');
-      listNode.appendChild(inputNode);
-      listNode.appendChild(lavelNode);
-      list.appendChild(listNode);
-      inputNode.onclick = () => {
-        this.loadProductFilters();
-        this.menuSearch();
-      };
+      selectedComponent.options.add(
+        new Option(
+          element.ComponentTitle,
+          element.ComponentPosition,
+          element.ComponentPosition,
+        ),
+      );
     });
   }
   loadProductFilters() {
-    var checkList = document.getElementById('select-product');
-    checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
-      if (checkList.classList.contains('visible'))
-        checkList.classList.remove('visible');
-      else checkList.classList.add('visible');
-    };
-    let list = document.querySelector('.product-items');
-    while (list.firstChild) {
-      list.removeChild(list.lastChild);
-    }
-
-    let componentList = document.getElementsByClassName('component_item');
-    let componentFilter = [];
-    for (let m = 0; m < componentList.length; m++) {
-      if (componentList[m].checked) {
-        componentFilter.push(componentList[m].value);
-      }
-    }
+    var selectedComponent = document.getElementById('select-component');
+    var selectedProduct = document.getElementById('select-product');
     if (
       document.querySelector('.clear-filters') &&
-      componentFilter.length !== 0
+      selectedComponent.value !== 'default'
     ) {
       document
         .querySelector('.clear-filters')
         .setAttribute('style', 'display: block;');
     }
-    componentFilter.forEach((component) => {
-      this.compCfg[component].Products.forEach((product) => {
-        let inputNode = document.createElement('input');
-        let lavelNode = document.createElement('lavel');
-        inputNode.setAttribute('type', 'checkbox');
-        inputNode.classList.add('product_item');
-        inputNode.setAttribute('value', product.ProductId);
-        lavelNode.innerText = product.ProductTitle;
-        let listNode = document.createElement('li');
-        listNode.appendChild(inputNode);
-        listNode.appendChild(lavelNode);
-        list.appendChild(listNode);
-        inputNode.onclick = () => {
-          this.loadFamilyFilters();
-          this.menuSearch();
-        };
-      });
+    this.removeOptions(selectedProduct);
+    selectedProduct.options.add(
+      new Option('Select a product', 'default', false, false),
+    );
+    selectedProduct.options[0].disabled = true;
+    this.compCfg.forEach((component) => {
+      if (component.ComponentPosition.toString() === selectedComponent.value) {
+        component.Products.forEach((product) => {
+          selectedProduct.options.add(
+            new Option(
+              product.ProductTitle,
+              product.ProductId,
+              product.ProductId,
+            ),
+          );
+        });
+      }
     });
+    let familyFilter = document.querySelector('.menu-family-filter');
+    if (familyFilter) {
+      familyFilter.setAttribute('style', 'display: none;');
+    }
   }
   async loadFamilyFilters() {
-    // let tax = await this.getTaxonomy('collective.taxonomy.family');
-    // var checkList = document.getElementById('select-family');
-    // checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
-    //   if (checkList.classList.contains('visible'))
-    //     checkList.classList.remove('visible');
-    //   else
-    //     checkList.classList.add('visible');
-    // }
-    // let list = document.querySelector('.family-items');
-    // while (list.firstChild) {
-    //   list.removeChild(list.lastChild);
-    // }
-    // let componentList = document.getElementsByClassName('component_item');
-    // let componentFilter = [];
-    // for (let m = 0; m < componentList.length; m++) {
-    //   if (componentList[m].checked) {
-    //     componentFilter.push(componentList[m].value)
+    // var selectedFamily = document.getElementById('select-family');
+    // var selectedProduct = document.getElementById('select-product');
+    // this.removeOptions(selectedFamily);
+    //let tax = await this.getTaxonomy('collective.taxonomy.family');
+    //let hasFamily = false;
+    // selectedFamily.options.add(
+    //   new Option('Select a family', 'default', false, false),
+    // );
+    //let text = selectedProduct.selectedOptions[0].text
+    // tax.tree.forEach((element) => {
+    //   if (element.title === selectedProduct.selectedOptions[0].text) {
+    //     //hasFamily = true;
+    //     element.children.forEach((child) => {
+    //       selectedFamily.options.add(
+    //         new Option(child.title, child.key, child.key),
+    //       );
+    //     });
     //   }
-    // }
-    // componentFilter.forEach(component => {
-    //   this.compCfg[component].Products.forEach(product => {
-    //     let inputNode = document.createElement('input');
-    //     let lavelNode = document.createElement('lavel');
-    //     inputNode.setAttribute('type','checkbox');
-    //     inputNode.classList.add('product_item')
-    //     inputNode.setAttribute('value', product.ProductId)
-    //     lavelNode.innerText = product.ProductTitle;
-    //     let listNode = document.createElement('li');
-    //     listNode.appendChild(inputNode);
-    //     listNode.appendChild(lavelNode);
-    //     list.appendChild(listNode)
-    //     inputNode.onclick= () => {
-    //       this.loadFamilyFilters();
-    //       this.menuSearch();
-    //     };
-    //   })
     // });
-    // // var selectedFamily = document.getElementById('select-family');
-    // // var selectedProduct = document.getElementById('select-product');
-    // // this.removeOptions(selectedFamily);
-    // let hasFamily = false;
-    // // selectedFamily.options.add(
-    // //   new Option('Select a family', 'default', false, false),
-    // // );
-    // // let text = selectedProduct.selectedOptions[0].text
-    // // tax.tree.forEach((element) => {
-    // //   if (element.title === selectedProduct.selectedOptions[0].text) {
-    // //     //hasFamily = true;
-    // //     element.children.forEach((child) => {
-    // //       selectedFamily.options.add(
-    // //         new Option(child.title, child.key, child.key),
-    // //       );
-    // //     });
-    // //   }
-    // // });
     // let familyFilter = document.querySelector('.menu-family-filter');
     // if (familyFilter) {
     //   if (!hasFamily) {
@@ -4695,8 +4759,8 @@ class MenuWidget extends React.Component {
   }
   async menuSearch() {
     let searchText;
-    let componentFilter = [];
-    let productFilter = [];
+    let componentFilter;
+    let productFilter;
     //let familyFilter;
     let result = false;
     if (document.querySelector('#menu-searchtext')) {
@@ -4705,20 +4769,10 @@ class MenuWidget extends React.Component {
         .value?.toUpperCase();
     }
     if (document.getElementById('select-component')) {
-      let componentList = document.getElementsByClassName('component_item');
-      for (let m = 0; m < componentList.length; m++) {
-        if (componentList[m].checked) {
-          componentFilter.push(componentList[m].value);
-        }
-      }
+      componentFilter = document.getElementById('select-component').value;
     }
     if (document.getElementById('select-product')) {
-      let productList = document.getElementsByClassName('product_item');
-      for (let n = 0; n < productList.length; n++) {
-        if (productList[n].checked) {
-          productFilter.push(productList[n].value);
-        }
-      }
+      productFilter = document.getElementById('select-product').value;
     }
     // if (document.getElementById('select-family')) {
     //   familyFilter = document.getElementById('select-family').text;
@@ -4754,8 +4808,8 @@ class MenuWidget extends React.Component {
           }
           if (
             searchText === '' &&
-            componentFilter.length === 0 &&
-            productFilter.length === 0
+            componentFilter === 'default' &&
+            productFilter === 'default'
           ) {
             this.filtersApplied = false;
             componentFound = true;
@@ -4779,12 +4833,11 @@ class MenuWidget extends React.Component {
           } else if (
             datasetChecked ||
             (dataset?.DatasetTitle?.toUpperCase().includes(searchText) &&
-              (productFilter.includes(product.ProductId) ||
-                productFilter.length === 0) &&
-              (componentFilter.includes(
-                this.compCfg[index].ComponentPosition.toString(),
-              ) ||
-                componentFilter.length === 0))
+              (product.ProductId === productFilter ||
+                productFilter === 'default') &&
+              (this.compCfg[index].ComponentPosition.toString() ===
+                componentFilter ||
+                componentFilter === 'default'))
           ) {
             this.filtersApplied = true;
             componentFound = true;
@@ -4851,13 +4904,22 @@ class MenuWidget extends React.Component {
     }
   }
   clearFilters() {
-    let componentList = document.getElementsByClassName('component_item');
-    for (let m = 0; m < componentList.length; m++) {
-      componentList[m].checked = false;
+    if (document.getElementById('select-component')) {
+      document.getElementById('select-component').value = 'default';
+    }
+    let selectedProduct = document.getElementById('select-product');
+    if (selectedProduct) {
+      this.removeOptions(selectedProduct);
+      selectedProduct.options.add(
+        new Option('Select a product', 'default', false, false),
+      );
     }
-    let list = document.querySelector('.product-items');
-    while (list.firstChild) {
-      list.removeChild(list.lastChild);
+    if (document.getElementById('select-family')) {
+      document.getElementById('select-family').value = 'default';
+    }
+    let familyFilter = document.querySelector('.menu-family-filter');
+    if (familyFilter) {
+      familyFilter.setAttribute('style', 'display: none;');
     }
     if (document.querySelector('.clear-filters')) {
       document
@@ -5081,11 +5143,7 @@ class MenuWidget extends React.Component {
                   <div className="filters-panel">
                     <span className="menu-filter">
                       Component
-                      <div id="select-component" class="dropdown-check-list">
-                        <span class="anchor">Select a Component</span>
-                        <ul class="items component-items"></ul>
-                      </div>
-                      {/* <select
+                      <select
                         id="select-component"
                         class="esri-select filter-select"
                         onBlur={() => {}}
@@ -5093,15 +5151,11 @@ class MenuWidget extends React.Component {
                           this.loadProductFilters();
                           this.menuSearch();
                         }}
-                      ></select> */}
+                      ></select>
                     </span>
                     <span className="menu-filter">
                       Product groups
-                      <div id="select-product" class="dropdown-check-list">
-                        <span class="anchor">Select a Product</span>
-                        <ul class="items product-items"></ul>
-                      </div>
-                      {/* <select
+                      <select
                         id="select-product"
                         class="esri-select filter-select"
                         onBlur={() => {}}
@@ -5109,20 +5163,15 @@ class MenuWidget extends React.Component {
                           this.loadFamilyFilters();
                           this.menuSearch();
                         }}
-                      ></select> */}
+                      ></select>
                     </span>
-                    {/* <span className="menu-filter menu-family-filter">
+                    <span className="menu-filter menu-family-filter">
                       Family
-                      <div id="select-family" class="dropdown-check-list">
-                        <span class="anchor">Select a Family</span>
-                        <ul class="items family-items">
-                        </ul>
-                      </div>
                       <select
                         id="select-family"
                         class="esri-select filter-select"
-                      ></select> 
-                    </span> */}
+                      ></select>
+                    </span>
                   </div>
                 </div>
               </div>

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

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

@@ -1707,64 +1707,3 @@ div.map-container.popup-block {
 .filters-element.filter-logo.filters-header {
   justify-content: space-between;
 }
-
-.select-component {
-  height: 30px;
-}
-
-.dropdown-check-list {
-  display: inline-block;
-  width: 280px;
-}
-
-.dropdown-check-list .anchor {
-  position: relative;
-  display: inline-block;
-  width: 280px;
-  height: 22px;
-  padding: 0px 50px 5px 10px;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  font-size: 15px;
-}
-
-.dropdown-check-list .anchor:after {
-  position: absolute;
-  top: 20%;
-  right: 10px;
-  padding: 5px;
-  border-top: 2px solid black;
-  border-left: 2px solid black;
-  content: '';
-  -moz-transform: rotate(-135deg);
-  -ms-transform: rotate(-135deg);
-  -o-transform: rotate(-135deg);
-  -webkit-transform: rotate(-135deg);
-  transform: rotate(-135deg);
-}
-
-.dropdown-check-list .anchor:active:after {
-  top: 21%;
-  right: 8px;
-}
-
-.dropdown-check-list ul.items {
-  display: none;
-  padding: 2px;
-  border: 1px solid #ccc;
-  border-top: none;
-  margin: 0;
-}
-
-.dropdown-check-list ul.items li {
-  font-size: 14px;
-  list-style: none;
-}
-
-.dropdown-check-list.visible .anchor {
-  color: #a0b128;
-}
-
-.dropdown-check-list.visible .items {
-  display: block;
-}