@eeacms/volto-arcgis-block 0.1.345 → 0.1.347

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.347](https://github.com/eea/volto-arcgis-block/compare/0.1.346...0.1.347) - 2 April 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-282464 (feat): package.json second modify [Urkorue - [`1677d0a`](https://github.com/eea/volto-arcgis-block/commit/1677d0ac1577f04578258c4158acb5d2de9bb071)]
+- CLMS-282464 (feat): package.json modified [Urkorue - [`02fcba4`](https://github.com/eea/volto-arcgis-block/commit/02fcba4787d9cd838cb62acaf37802cf17e92569)]
+- CLMS-282464 (feat): Family filter added [Urkorue - [`61268f3`](https://github.com/eea/volto-arcgis-block/commit/61268f3bb623260a559401f428f2dff913c84515)]
+### [0.1.346](https://github.com/eea/volto-arcgis-block/compare/0.1.345...0.1.346) - 1 April 2025
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #919 from eea/develop [Unai Bolivar - [`b16a335`](https://github.com/eea/volto-arcgis-block/commit/b16a335748297d68b1df1e9e9159f62e28b7defd)]
+- 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.347",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",
@@ -16,7 +16,8 @@
     "url": "git@github.com:eea/volto-arcgis-block.git"
   },
   "addons": [
-    "@eeacms/volto-clms-utils"
+    "@eeacms/volto-clms-utils",
+    "@eeacms/volto-taxonomy"
   ],
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json}": [
@@ -65,7 +66,8 @@
     "esri-loader": "3.4.0",
     "highcharts": "^9.3.2",
     "highcharts-react-official": "^3.1.0",
-    "react-datepicker": "4.15.0"
+    "react-datepicker": "4.15.0",
+    "@eeacms/volto-taxonomy": "5.1.0"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.9.5",

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

@@ -23,7 +23,7 @@ import BookmarkWidget from './BookmarkWidget';
 import LoadingSpinner from './LoadingSpinner';
 import UploadWidget from './UploadWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
-//import { getTaxonomy } from '@eeacms/volto-taxonomy/actions';
+import { getTaxonomy } from '@eeacms/volto-taxonomy/actions';
 
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom, intl, Basemap, WebTileLayer, Extent;
@@ -61,6 +61,7 @@ class MapViewer extends React.Component {
       layers: {},
       uploadedFile: true,
       wmsServiceUrl: '',
+      uploadError: false,
     };
     this.activeLayersHandler = this.activeLayersHandler.bind(this);
     this.activeLayersArray = {};
@@ -75,7 +76,7 @@ class MapViewer extends React.Component {
     this.uploadFileHandler = this.uploadFileHandler.bind(this);
     this.uploadFileErrorHandler = this.uploadFileErrorHandler.bind(this);
     this.uploadUrlServiceHandler = this.uploadUrlServiceHandler.bind(this);
-    //this.getTaxonomy = this.props.getTaxonomy.bind(this);
+    this.getTaxonomy = this.props.getTaxonomy.bind(this);
   }
 
   mapLayersHandler(newLayers) {
@@ -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,28 +604,63 @@ 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}
+            getTaxonomy={reference.getTaxonomy}
+          />
+        </>
+      )}
     </>
   );
 };
-// const mapDispatchToProps = (dispatch) => {
-//   return {
-//     getTaxonomy: (name) => dispatch(getTaxonomy(name)),
-//   };
-// };
+const mapDispatchToProps = (dispatch) => {
+  return {
+    getTaxonomy: (name) => dispatch(getTaxonomy(name)),
+  };
+};
 
 export default compose(
   connect(
@@ -637,6 +669,6 @@ export default compose(
     }),
     { MapViewerConfig },
   ),
-  //connect(null, mapDispatchToProps),
+  connect(null, mapDispatchToProps),
   injectLazyLibs('highcharts'),
 )(MapViewer, MenuWidget);

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,
@@ -497,7 +501,7 @@ class MenuWidget extends React.Component {
     });
 
     this.activeLayersHandler = this.props.activeLayersHandler;
-    //this.getTaxonomy = this.props.getTaxonomy;
+    this.getTaxonomy = this.props.getTaxonomy;
   }
 
   loader() {
@@ -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();
   }
@@ -4616,39 +4729,39 @@ class MenuWidget extends React.Component {
     }
   }
   async loadFamilyFilters() {
-    // 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),
-    //       );
-    //     });
-    //   }
-    // });
-    // let familyFilter = document.querySelector('.menu-family-filter');
-    // if (familyFilter) {
-    //   if (!hasFamily) {
-    //     familyFilter.setAttribute('style','display: none;');
-    //   }else{
-    //     familyFilter.setAttribute('style','display: flex;');
-    //   }
-    // }
+    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 sub-group', 'default', false, false),
+    );
+    selectedFamily.options[0].disabled = true;
+    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.title, child.title),
+          );
+        });
+      }
+    });
+    let familyFilter = document.querySelector('.menu-family-filter');
+    if (familyFilter) {
+      if (!hasFamily) {
+        familyFilter.setAttribute('style', 'display: none;');
+      } else {
+        familyFilter.setAttribute('style', 'display: flex;');
+      }
+    }
   }
   async menuSearch() {
     let searchText;
     let componentFilter;
     let productFilter;
-    //let familyFilter;
+    let familyFilter;
     let result = false;
     if (document.querySelector('#menu-searchtext')) {
       searchText = document
@@ -4661,9 +4774,15 @@ class MenuWidget extends React.Component {
     if (document.getElementById('select-product')) {
       productFilter = document.getElementById('select-product').value;
     }
-    // if (document.getElementById('select-family')) {
-    //   familyFilter = document.getElementById('select-family').text;
-    // }
+    if (document.getElementById('select-family')) {
+      familyFilter = document.getElementById('select-family').value;
+    }
+    if (
+      document.querySelector('.menu-family-filter').getAttribute('style') ===
+      'display: none;'
+    ) {
+      familyFilter = 'default';
+    }
     for (let index = 0; index < this.compCfg.length; index++) {
       let componentFound = false;
       let componentChecked = false;
@@ -4696,7 +4815,8 @@ class MenuWidget extends React.Component {
           if (
             searchText === '' &&
             componentFilter === 'default' &&
-            productFilter === 'default'
+            productFilter === 'default' &&
+            familyFilter === 'default'
           ) {
             this.filtersApplied = false;
             componentFound = true;
@@ -4724,7 +4844,9 @@ class MenuWidget extends React.Component {
                 productFilter === 'default') &&
               (this.compCfg[index].ComponentPosition.toString() ===
                 componentFilter ||
-                componentFilter === 'default'))
+                componentFilter === 'default') &&
+              (dataset?.FamilyTitle === familyFilter ||
+                familyFilter === 'default'))
           ) {
             this.filtersApplied = true;
             componentFound = true;
@@ -5053,10 +5175,14 @@ class MenuWidget extends React.Component {
                       ></select>
                     </span>
                     <span className="menu-filter menu-family-filter">
-                      Family
+                      Product sub-group
                       <select
                         id="select-family"
                         class="esri-select filter-select"
+                        onBlur={() => {}}
+                        onChange={() => {
+                          this.menuSearch();
+                        }}
                       ></select>
                     </span>
                   </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