@eeacms/volto-arcgis-block 0.1.377 → 0.1.379

package/CHANGELOG.md

@@ -4,8 +4,26 @@ 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.379](https://github.com/eea/volto-arcgis-block/compare/0.1.378...0.1.379) - 11 August 2025
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #998 from eea/CLMS-LOCAL-STORAGE-ISSUES-REFACTOR-CLEAN [Unai Bolivar - [`3b84fbd`](https://github.com/eea/volto-arcgis-block/commit/3b84fbd1cc3706976cc746a95c6885da7a746e22)]
+- (lint): cleared console statements [Unai Bolivar - [`f6d649d`](https://github.com/eea/volto-arcgis-block/commit/f6d649d51d9254a250e49ca31b83bc4cc8c6b30a)]
+- (bug): implemented safe store and recall for all user data in mapviewer fix [Unai Bolivar - [`a0491a7`](https://github.com/eea/volto-arcgis-block/commit/a0491a7bbeffdcd527eabc91b716757d680ea5d3)]
+- (bug): rendering session data correctly [Unai Bolivar - [`0fd8434`](https://github.com/eea/volto-arcgis-block/commit/0fd843442b72b7d0980f98e182f4ec68dc00850c)]
+- (bug): wrapping mapviewer in mapviewerstatemonitor to control and eliminate multiple mapviewer mounts and race conditions [Unai Bolivar - [`c3e5232`](https://github.com/eea/volto-arcgis-block/commit/c3e5232b64f318256f504575f7e6ee685d80e121)]
+- (bug): fixed user anonymous session storage maintenance [Unai Bolivar - [`7bb1054`](https://github.com/eea/volto-arcgis-block/commit/7bb105406e272d73c115b1515313723890830d8e)]
+- (bug): saving updates to retrieve current jsx file [Unai Bolivar - [`10e8b69`](https://github.com/eea/volto-arcgis-block/commit/10e8b69a2f9c6ebda49864bb431c6f8e4a49fa66)]
+- (bug): prettified the file [Unai Bolivar - [`e561931`](https://github.com/eea/volto-arcgis-block/commit/e5619310b30c1c8935735d8de53939cc551fb1ba)]
+- (bug): moved status monitoring to mapviewer HOC component for better synchronization and widget updates that actually catch the user login and userID information and setup session storage accordingly before proceeding with a full state update after mount is ready. [Unai Bolivar - [`16dd623`](https://github.com/eea/volto-arcgis-block/commit/16dd62302b4fa520185b4d9957e69e41c31e1fa6)]
+### [0.1.378](https://github.com/eea/volto-arcgis-block/compare/0.1.377...0.1.378) - 11 August 2025
+
 ### [0.1.377](https://github.com/eea/volto-arcgis-block/compare/0.1.376...0.1.377) - 30 July 2025
 
+#### :hammer_and_wrench: Others
+
+- Merge pull request #995 from eea/develop [Unai Bolivar - [`194ef38`](https://github.com/eea/volto-arcgis-block/commit/194ef385764f9d153fb46ac121bdc0f55d75ce20)]
 ### [0.1.376](https://github.com/eea/volto-arcgis-block/compare/0.1.375...0.1.376) - 17 July 2025
 
 ### [0.1.375](https://github.com/eea/volto-arcgis-block/compare/0.1.374...0.1.375) - 14 July 2025

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -34,6 +34,12 @@ class AreaWidget extends React.Component {
       showMapMenu: false,
       showInfoPopup: this.props.download ? true : false,
       infoPopupType: 'area',
+      coordinates: {
+        north: '',
+        south: '',
+        east: '',
+        west: '',
+      },
     };
     this.menuClass =
       'esri-icon-cursor-marquee esri-widget--button esri-widget esri-interactive';
@@ -245,18 +251,14 @@ class AreaWidget extends React.Component {
       document
         .querySelector('.closeCoordinates')
         .classList.replace('esri-icon-up-arrow', 'esri-icon-close');
-      if (document.getElementById('menu-north')) {
-        document.getElementById('menu-north').value = null;
-      }
-      if (document.getElementById('menu-south')) {
-        document.getElementById('menu-south').value = null;
-      }
-      if (document.getElementById('menu-east')) {
-        document.getElementById('menu-east').value = null;
-      }
-      if (document.getElementById('menu-west')) {
-        document.getElementById('menu-west').value = null;
-      }
+      this.setState({
+        coordinates: {
+          north: '',
+          south: '',
+          east: '',
+          west: '',
+        },
+      });
     }
   }
   nuts0handler(e) {
@@ -1020,41 +1022,45 @@ class AreaWidget extends React.Component {
   addCoordinates() {
     this.clearWidget();
     let valid = true;
-    let pointNorth = document.getElementById('menu-north');
+    let pointNorth = this.state.coordinates.north;
     if (
-      pointNorth.value > 90 ||
-      pointNorth.value < -90 ||
-      pointNorth.value == null
+      pointNorth > 90 ||
+      pointNorth < -90 ||
+      pointNorth === null ||
+      pointNorth === ''
     ) {
       valid = false;
     }
-    let pointSouth = document.getElementById('menu-south');
+    let pointSouth = this.state.coordinates.south;
     if (
-      pointSouth.value > 90 ||
-      pointSouth.value < -90 ||
-      pointSouth.value == null
+      pointSouth > 90 ||
+      pointSouth < -90 ||
+      pointSouth === null ||
+      pointSouth === ''
     ) {
       valid = false;
     }
-    let pointEast = document.getElementById('menu-east');
+    let pointEast = this.state.coordinates.east;
     if (
-      pointEast.value > 180 ||
-      pointEast.value < -180 ||
-      pointEast.value == null
+      pointEast > 180 ||
+      pointEast < -180 ||
+      pointEast === null ||
+      pointEast === ''
     ) {
       valid = false;
     }
-    let pointWest = document.getElementById('menu-west');
+    let pointWest = this.state.coordinates.west;
     if (
-      pointWest.value > 180 ||
-      pointWest.value < -180 ||
-      pointWest.value == null
+      pointWest > 180 ||
+      pointWest < -180 ||
+      pointWest === null ||
+      pointWest === ''
     ) {
       valid = false;
     }
     if (valid) {
-      let pointNW = [pointNorth.value, pointWest.value];
-      let pointSE = [pointSouth.value, pointEast.value];
+      let pointNW = [pointNorth, pointWest];
+      let pointSE = [pointSouth, pointEast];
       var fillSymbol = {
         type: 'simple-fill',
         color: [255, 255, 255, 0.5],
@@ -1107,6 +1113,17 @@ class AreaWidget extends React.Component {
       });
     }
   }
+  handleCoordinateChange = (e) => {
+    const { id, value } = e.target;
+    // id will be "menu-north", "menu-south", "menu-east", or "menu-west"
+    const key = id.replace('menu-', ''); // gives you 'north', 'south', etc.
+    this.setState((prevState) => ({
+      coordinates: {
+        ...prevState.coordinates,
+        [key]: value,
+      },
+    }));
+  };
   openCoordinates(event) {
     this.clearWidget();
     this.nutsRadioButton(event.target.value);
@@ -1823,6 +1840,8 @@ class AreaWidget extends React.Component {
                   max="90"
                   placeholder="00.000000"
                   className="coordinateInput"
+                  value={this.state.coordinates.north}
+                  onChange={this.handleCoordinateChange}
                 />
               </div>
               <div>
@@ -1834,6 +1853,8 @@ class AreaWidget extends React.Component {
                   max="180"
                   placeholder="00.000000"
                   className="coordinateInput"
+                  value={this.state.coordinates.west}
+                  onChange={this.handleCoordinateChange}
                 />
               </div>
             </div>
@@ -1848,6 +1869,8 @@ class AreaWidget extends React.Component {
                   max="90"
                   placeholder="00.000000"
                   className="coordinateInput"
+                  value={this.state.coordinates.south}
+                  onChange={this.handleCoordinateChange}
                 />
               </div>
               <div>
@@ -1859,6 +1882,8 @@ class AreaWidget extends React.Component {
                   max="180"
                   placeholder="00.000000"
                   className="coordinateInput"
+                  value={this.state.coordinates.east}
+                  onChange={this.handleCoordinateChange}
                 />
               </div>
             </div>

package/src/components/MapViewer/MapViewer.jsx

@@ -1,4 +1,12 @@
-import React, { createRef } from 'react';
+import React, {
+  createRef,
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+} from 'react';
 import './css/ArcgisMap.css';
 import classNames from 'classnames';
 import { loadModules, loadCss } from 'esri-loader';
@@ -28,13 +36,417 @@ import { getTaxonomy } from '@eeacms/volto-taxonomy/actions';
 //import "isomorphic-fetch";  <-- Necessary to use fetch?
 var Map, MapView, Zoom, intl, Basemap, WebTileLayer, Extent;
 let mapStatus = {};
+
 const CheckLanguage = () => {
   const { locale } = useIntl();
   intl.setLocale(locale);
   return null;
 };
 
+// Enhanced UserContext and Provider with state monitoring capabilities
+const UserContext = createContext({ user_id: null, isLoggedIn: false });
+const useUserContext = () => useContext(UserContext);
+
+// Enhanced UserProvider with state change monitoring
+const UserProvider = ({ children }) => {
+  const cartState = useCartState();
+
+  // Direct transformation of cart state to user context format
+  // No local state needed - context reactively updates when cartState changes
+  const userContextValue = {
+    user_id: cartState?.user_id || null,
+    isLoggedIn: cartState?.isLoggedIn || false,
+  };
+
+  // Show loading only when cart state is completely undefined (initial load)
+  // Prevents UI flicker by distinguishing between "loading" and "logged out" states
+  if (cartState === undefined) {
+    return (
+      <div className="loading-container">
+        <div className="loading-text">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <UserContext.Provider value={userContextValue}>
+      {children}
+    </UserContext.Provider>
+  );
+};
+
+// MapViewer State Monitor - Functional wrapper that monitors useCartState changes
+// and ensures the class component always receives the latest authentication state
+const MapViewerStateMonitor = ({ children, onUserStateChange }) => {
+  const cartState = useCartState();
+  const prevCartStateRef = useRef(null);
+
+  // Monitor cart state changes and notify parent component
+  useEffect(() => {
+    if (cartState !== undefined) {
+      const currentUserState = {
+        user_id: cartState?.user_id || null,
+        isLoggedIn: cartState?.isLoggedIn || false,
+      };
+
+      // Compare with previous state to detect changes
+      if (prevCartStateRef.current !== null) {
+        const hasUserIdChanged =
+          prevCartStateRef.current.user_id !== currentUserState.user_id;
+        const hasLoggedInChanged =
+          prevCartStateRef.current.isLoggedIn !== currentUserState.isLoggedIn;
+
+        if (hasUserIdChanged || hasLoggedInChanged) {
+          /* eslint-disable no-console */
+          console.log('[MapViewerStateMonitor] User state change detected:', {
+            previous: prevCartStateRef.current,
+            current: currentUserState,
+            userIdChanged: hasUserIdChanged,
+            loggedInChanged: hasLoggedInChanged,
+          });
+          /* eslint-enable no-console */
+
+          // Notify parent component of state change
+          if (onUserStateChange) {
+            onUserStateChange(currentUserState, prevCartStateRef.current);
+          }
+        }
+      }
+
+      // Update previous state using ref (doesn't cause re-renders)
+      prevCartStateRef.current = currentUserState;
+    }
+  }, [cartState, onUserStateChange]);
+
+  return children;
+};
+
+// UserStorageManager now consumes user state directly from UserContext
+// Eliminates prop drilling and ensures consistent user state access
+const UserStorageManager = ({ children, onStorageManaged }) => {
+  const { user_id: userID, isLoggedIn } = useUserContext();
+  const [storageManaged, setStorageManaged] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  // Generate unique instance ID to track operations and prevent race conditions
+  const instanceId = useRef(Math.random().toString(36).substring(7));
+
+  // Track if this instance has successfully restored data
+  const hasRestoredData = useRef(false);
+
+  const populateSessionFromUserData = (userKey) => {
+    const userData = localStorage.getItem(userKey);
+    if (userData) {
+      /* eslint-disable no-console */
+      console.log(
+        `[UserStorageManager:${instanceId.current}] Restoring from localStorage:`,
+        {
+          key: userKey,
+          dataPreview:
+            userData.substring(0, 100) + (userData.length > 100 ? '...' : ''),
+          dataLength: userData.length,
+        },
+      );
+      /* eslint-enable no-console */
+      const parsed = JSON.parse(userData);
+      const userIdFromKey = (key) => key.replace(/^user_/, '');
+      const hydratedFor = sessionStorage.getItem('mv_hydrated_for');
+      const alreadyHasLayers = (() => {
+        try {
+          const cl = JSON.parse(
+            sessionStorage.getItem('checkedLayers') || '[]',
+          );
+          return Array.isArray(cl) && cl.length > 0;
+        } catch {
+          return false;
+        }
+      })();
+      if (hydratedFor === userIdFromKey(userKey) || alreadyHasLayers) {
+        return true;
+      }
+      Object.entries(parsed).forEach(([k, v]) => {
+        const existing = sessionStorage.getItem(k);
+        if (existing == null) {
+          sessionStorage.setItem(
+            k,
+            typeof v === 'object' ? JSON.stringify(v) : v,
+          );
+          return;
+        }
+        if (k === 'checkedLayers') {
+          try {
+            const a = JSON.parse(existing || '[]');
+            const b = typeof v === 'string' ? JSON.parse(v) : v;
+            const union = [...new Set([...(b || []), ...(a || [])])];
+            sessionStorage.setItem('checkedLayers', JSON.stringify(union));
+          } catch {}
+        } else if (k === 'visibleLayers' || k === 'layerOpacities') {
+          try {
+            const a = JSON.parse(existing || '{}');
+            const b = typeof v === 'string' ? JSON.parse(v) : v || {};
+            sessionStorage.setItem(k, JSON.stringify({ ...b, ...a }));
+          } catch {}
+        }
+      });
+      sessionStorage.setItem('mv_hydrated_for', userIdFromKey(userKey));
+
+      // Mark that this instance has successfully restored data
+      hasRestoredData.current = true;
+
+      return true; // Indicate successful restoration
+    } else {
+      /* eslint-disable no-console */
+      console.log(
+        `[UserStorageManager:${instanceId.current}] No data found for key:`,
+        userKey,
+      );
+      /* eslint-enable no-console */
+      return false;
+    }
+  };
+
+  // Improved instance management with lock mechanism to prevent race conditions
+  const acquireStorageLock = (lockKey) => {
+    const existingLock = localStorage.getItem(lockKey);
+    if (existingLock && existingLock !== instanceId.current) {
+      return false; // Another instance has the lock
+    }
+    localStorage.setItem(lockKey, instanceId.current);
+    return true;
+  };
+
+  const releaseStorageLock = (lockKey) => {
+    const currentLock = localStorage.getItem(lockKey);
+    if (currentLock === instanceId.current) {
+      localStorage.removeItem(lockKey);
+    }
+  };
+
+  // Initialization effect - handles user state readiness
+  useEffect(() => {
+    if (userID !== undefined && isLoggedIn !== undefined) {
+      /* eslint-disable no-console */
+      console.log(
+        `[UserStorageManager:${instanceId.current}] User state initialized:`,
+        {
+          userID,
+          isLoggedIn,
+        },
+      );
+      /* eslint-enable no-console */
+      setIsInitialized(true);
+    }
+  }, [userID, isLoggedIn]);
+
+  // Initial storage management effect - runs once on mount with lock protection
+  useEffect(() => {
+    if (!isInitialized || storageManaged) {
+      return;
+    }
+
+    const lockKey = `storage_lock_${userID || 'anonymous'}`;
+
+    /* eslint-disable no-console */
+    console.log(
+      `[UserStorageManager:${instanceId.current}] Component mounting with state:`,
+      {
+        isLoggedIn,
+        userID,
+        storageManaged,
+        isInitialized,
+      },
+    );
+    /* eslint-enable no-console */
+
+    // Acquire lock to prevent concurrent operations
+    if (!acquireStorageLock(lockKey)) {
+      /* eslint-disable no-console */
+      console.log(
+        `[UserStorageManager:${instanceId.current}] Another instance is managing storage for this user`,
+      );
+      /* eslint-enable no-console */
+      return;
+    }
+    try {
+      if (isLoggedIn === true) {
+        /* eslint-disable no-console */
+        console.log(
+          `[UserStorageManager:${instanceId.current}] Detected signed-in user, processing storage...`,
+        );
+        /* eslint-enable no-console */
+
+        if (
+          userID &&
+          userID !== null &&
+          userID !== undefined &&
+          userID !== ''
+        ) {
+          const userKey = `user_${userID}`;
+          const userData = localStorage.getItem(userKey);
+          const anonymousData = localStorage.getItem('user_anonymous');
+
+          /* eslint-disable no-console */
+          console.log(
+            `[UserStorageManager:${instanceId.current}] Storage analysis:`,
+            {
+              userKey,
+              hasUserData: !!userData,
+              hasAnonymousData: !!anonymousData,
+              sessionEmpty: sessionStorage.length === 0,
+              sessionLength: sessionStorage.length,
+            },
+          );
+          /* eslint-enable no-console */
+
+          // Migration and restoration logic for signed-in users
+          if (!userData && anonymousData) {
+            /* eslint-disable no-console */
+            console.log(
+              `[UserStorageManager:${instanceId.current}] Migrating anonymous data to signed-in user`,
+            );
+            /* eslint-enable no-console */
+            // Move anonymous data to the signed-in user's localStorage key
+            localStorage.setItem(userKey, anonymousData);
+            // Delete the anonymous key from localStorage
+            localStorage.removeItem('user_anonymous');
+            // Populate sessionStorage with the migrated data from localStorage
+            populateSessionFromUserData(userKey);
+          } else if (userData) {
+            /* eslint-disable no-console */
+            console.log(
+              `[UserStorageManager:${instanceId.current}] Found existing user data - restoring to session storage`,
+            );
+            /* eslint-enable no-console */
+            // User has existing saved data - restore it to sessionStorage
+            populateSessionFromUserData(userKey);
+          } else {
+            /* eslint-disable no-console */
+            console.log(
+              `[UserStorageManager:${instanceId.current}] No saved user data found - preserving current session state`,
+            );
+            /* eslint-enable no-console */
+          }
+          setStorageManaged(true);
+        } else {
+          /* eslint-disable no-console */
+          console.log(
+            `[UserStorageManager:${instanceId.current}] valid userID unavailable: userID is ${userID}`,
+          );
+          /* eslint-enable no-console */
+        }
+      } else if (isLoggedIn === false) {
+        /* eslint-disable no-console */
+        console.log(
+          `[UserStorageManager:${instanceId.current}] Detected anonymous user, processing storage...`,
+        );
+        /* eslint-enable no-console */
+        // Handle anonymous user session - restore anonymous data if it exists
+        const anonymousKey = 'user_anonymous';
+        const anonymousData = localStorage.getItem(anonymousKey);
+        if (anonymousData) {
+          /* eslint-disable no-console */
+          console.log(
+            `[UserStorageManager:${instanceId.current}] Restoring anonymous data to session storage:`,
+            {
+              dataPreview:
+                anonymousData.substring(0, 100) +
+                (anonymousData.length > 100 ? '...' : ''),
+              dataLength: anonymousData.length,
+            },
+          );
+          /* eslint-enable no-console */
+          sessionStorage.clear();
+          const parsed = JSON.parse(anonymousData);
+          Object.keys(parsed).forEach((k) =>
+            sessionStorage.setItem(
+              k,
+              typeof parsed[k] === 'object'
+                ? JSON.stringify(parsed[k])
+                : parsed[k],
+            ),
+          );
+          hasRestoredData.current = true;
+          /* eslint-disable no-console */
+          console.log(
+            `[UserStorageManager:${instanceId.current}] Anonymous data restored to sessionStorage`,
+          );
+          /* eslint-enable no-console */
+        } else {
+          /* eslint-disable no-console */
+          console.log(
+            `[UserStorageManager:${instanceId.current}] No anonymous data found to restore`,
+          );
+          /* eslint-enable no-console */
+        }
+        setStorageManaged(true);
+      } else {
+        /* eslint-disable no-console */
+        console.log(
+          `[UserStorageManager:${instanceId.current}] User state does not match any processing condition - skipping storage logic`,
+        );
+        /* eslint-enable no-console */
+      }
+
+      if (onStorageManaged) {
+        onStorageManaged();
+      }
+    } finally {
+      // Always release the lock, even if an error occurred
+      releaseStorageLock(lockKey);
+    }
+
+    // Cleanup function to release lock on unmount
+    return () => {
+      releaseStorageLock(lockKey);
+    };
+  }, [isInitialized, isLoggedIn, userID, storageManaged, onStorageManaged]);
+
+  // Data-reactive effect - ensures sessionStorage mirrors localStorage whenever userData changes
+  // useEffect(() => {
+  //   /* eslint-disable no-console */
+  //   console.log(
+  //     `[UserStorageManager:${instanceId.current}] Data-reactive effect triggered:`,
+  //     {
+  //       storageManaged,
+  //       userKey: userKey,
+  //       hasUserData: !!userData,
+  //       userDataLength: userData ? userData.length : 0,
+  //     },
+  //   );
+  //   /* eslint-enable no-console */
+
+  //   if (storageManaged && userKey && userData) {
+  //     /* eslint-disable no-console */
+  //     console.log(
+  //       `[UserStorageManager:${instanceId.current}] Re-syncing session storage with localStorage changes`,
+  //     );
+  //     /* eslint-enable no-console */
+  //     populateSessionFromUserData(userKey);
+  //   } else {
+  //     /* eslint-disable no-console */
+  //     console.log(
+  //       `[UserStorageManager:${instanceId.current}] Skipping data sync - conditions not met`,
+  //     );
+  //     /* eslint-enable no-console */
+  //   }
+  // }, [userData, userKey, storageManaged]);
+
+  // Render only when properly initialized to prevent premature mounting
+  return isInitialized &&
+    storageManaged &&
+    userID !== undefined &&
+    isLoggedIn !== undefined ? (
+    children
+  ) : (
+    <div className="loading-container">
+      <div className="loading-text">Loading...</div>
+    </div>
+  );
+};
+
 class MapViewer extends React.Component {
+  static contextType = UserContext;
+
   /**
    * This method does the creation of the main component
    * @param {*} props
@@ -56,18 +468,28 @@ class MapViewer extends React.Component {
     this.mapClass = classNames('map-container', {
       [`${props.customClass}`]: props.customClass || null,
     });
+
+    // Generate unique instance ID for tracking operations
+    this.instanceId = Math.random().toString(36).substring(7);
+
     this.state = {
       layerLoading: false,
       layers: {},
       uploadedFile: true,
       wmsServiceUrl: '',
       uploadError: false,
+      // Track current user state for comparison in componentDidUpdate
+      currentUserState: props.initialUserState || {
+        user_id: null,
+        isLoggedIn: false,
+      },
     };
     this.activeLayersHandler = this.activeLayersHandler.bind(this);
     this.activeLayersArray = {};
     this.props.mapviewer_config.loading = true;
     this.cfgUrls = this.props.cfg.Urls;
-    this.userID = null;
+    // User state change handler
+    this.handleUserStateChange = this.handleUserStateChange.bind(this);
     this.loadingHandler = this.loadingHandler.bind(this);
     this.hotspotDataHandler = this.hotspotDataHandler.bind(this);
     this.mapLayersHandler = this.mapLayersHandler.bind(this);
@@ -80,6 +502,285 @@ class MapViewer extends React.Component {
     this.tax = null;
   }
 
+  // Method to handle user state changes from the monitoring wrapper
+  handleUserStateChange(newUserState, previousUserState) {
+    /* eslint-disable no-console */
+    console.log('[MapViewer] Handling user state change:', {
+      newUserState,
+      previousUserState,
+      currentState: this.state.currentUserState,
+    });
+    /* eslint-enable no-console */
+
+    // Update current user state in component state
+    this.setState({ currentUserState: newUserState });
+
+    // Trigger session state update logic
+    this.handleSessionStateUpdate(newUserState, previousUserState);
+  }
+
+  // Enhanced method to save session data to localStorage with instance tracking
+  saveSessionToLocalStorage = () => {
+    const { user_id, isLoggedIn } = this.context;
+    const instanceId = this.instanceId || 'unknown';
+
+    /* eslint-disable no-console */
+    console.log(`[MapViewer:${instanceId}] Saving session data:`, {
+      hasUserContext:
+        user_id !== undefined && user_id !== null && user_id !== '',
+      isLoggedIn,
+      userId:
+        user_id !== undefined && user_id !== null && user_id !== ''
+          ? user_id
+          : 'anonymous',
+      sessionStorageLength: sessionStorage.length,
+    });
+    /* eslint-enable no-console */
+
+    if (sessionStorage.length === 0) {
+      /* eslint-disable no-console */
+      console.log(
+        `[MapViewer:${instanceId}] Skipping data save - session storage is empty`,
+      );
+      /* eslint-enable no-console */
+      return;
+    }
+
+    const saveToLocal = (key) => {
+      const data = {};
+      for (let i = 0; i < sessionStorage.length; i++) {
+        const k = sessionStorage.key(i);
+        data[k] = sessionStorage.getItem(k);
+      }
+
+      try {
+        localStorage.setItem(key, JSON.stringify(data));
+        /* eslint-disable no-console */
+        console.log(
+          `[MapViewer:${instanceId}] Successfully saved data to localStorage key: ${key}`,
+        );
+        /* eslint-enable no-console */
+      } catch (error) {
+        /* eslint-disable no-console */
+        console.error(
+          `[MapViewer:${instanceId}] Error saving to localStorage key ${key}:`,
+          error,
+        );
+        /* eslint-enable no-console */
+      }
+    };
+
+    // Save session data to appropriate localStorage key based on user state (always overwrite user key)
+    if (
+      isLoggedIn &&
+      user_id !== undefined &&
+      user_id !== null &&
+      user_id !== ''
+    ) {
+      if (localStorage.getItem(`user_${user_id}`)) {
+        /* eslint-disable no-console */
+        console.log(
+          `[MapViewer:${instanceId}] User session data already exists in localStorage`,
+        );
+        /* eslint-enable no-console */
+      }
+      saveToLocal(`user_${user_id}`);
+    } else if (!isLoggedIn) {
+      saveToLocal('user_anonymous');
+    }
+    sessionStorage.clear();
+  };
+
+  // Handle page unload events (navigation, refresh, close)
+  handlePageUnload = (event) => {
+    /* eslint-disable no-console */
+    console.log(
+      `[MapViewer:${this.instanceId}] Page unload detected, saving session data`,
+    );
+    /* eslint-enable no-console */
+
+    this.saveSessionToLocalStorage();
+  };
+
+  // Handle visibility changes (tab switches, window minimizing)
+  handleVisibilityChange = () => {
+    if (document.visibilityState === 'hidden') {
+      /* eslint-disable no-console */
+      console.log(
+        `[MapViewer:${this.instanceId}] Page hidden, saving session data`,
+      );
+      /* eslint-enable no-console */
+
+      this.saveSessionToLocalStorage();
+    }
+  };
+
+  // Method to handle session state updates when user authentication changes
+  handleSessionStateUpdate(newUserState, previousUserState) {
+    const { user_id: newUserId, isLoggedIn: newIsLoggedIn } = newUserState;
+    const {
+      user_id: prevUserId,
+      isLoggedIn: prevIsLoggedIn,
+    } = previousUserState;
+
+    /* eslint-disable no-console */
+    console.log('[MapViewer] Processing session state update:', {
+      userIdChanged: prevUserId !== newUserId,
+      loginStateChanged: prevIsLoggedIn !== newIsLoggedIn,
+      loginTransition: `${prevIsLoggedIn} -> ${newIsLoggedIn}`,
+      userIdTransition: `${prevUserId} -> ${newUserId}`,
+    });
+    /* eslint-enable no-console */
+
+    // Handle login/logout transitions
+    if (prevIsLoggedIn !== newIsLoggedIn) {
+      if (newIsLoggedIn && !prevIsLoggedIn) {
+        // User just logged in
+        this.handleUserLogin(newUserId);
+      } else if (!newIsLoggedIn && prevIsLoggedIn) {
+        // User just logged out
+        this.handleUserLogout(prevUserId);
+      }
+    }
+
+    // Handle user ID changes (e.g., switching accounts)
+    if (prevUserId !== newUserId && newIsLoggedIn) {
+      this.handleUserSwitch(prevUserId, newUserId);
+    }
+  }
+
+  // Handle user login - restore saved session or preserve current session
+  handleUserLogin(userId) {
+    /* eslint-disable no-console */
+    console.log('[MapViewer] User logged in:', userId);
+    /* eslint-enable no-console */
+
+    // Check if user has saved data
+    const userKey = `user_${userId}`;
+    const userData = localStorage.getItem(userKey);
+
+    if (userData) {
+      /* eslint-disable no-console */
+      console.log('[MapViewer] Restoring saved user session data');
+      /* eslint-enable no-console */
+      // Restore user's saved session
+      try {
+        const parsed = JSON.parse(userData);
+        Object.keys(parsed).forEach((k) =>
+          sessionStorage.setItem(
+            k,
+            typeof parsed[k] === 'object'
+              ? JSON.stringify(parsed[k])
+              : parsed[k],
+          ),
+        );
+      } catch (error) {
+        /* eslint-disable no-console */
+        console.error('[MapViewer] Error restoring user session:', error);
+        /* eslint-enable no-console */
+      }
+    } else {
+      /* eslint-disable no-console */
+      console.log(
+        '[MapViewer] No saved session found - preserving current session',
+      );
+      /* eslint-enable no-console */
+      // No saved data - preserve current session state
+    }
+  }
+
+  // Handle user logout - save current session to anonymous storage
+  handleUserLogout(prevUserId) {
+    /* eslint-disable no-console */
+    console.log('[MapViewer] User logged out:', prevUserId);
+    /* eslint-enable no-console */
+
+    // Save current session to anonymous storage
+    const sessionContents = {};
+    for (let i = 0; i < sessionStorage.length; i++) {
+      const key = sessionStorage.key(i);
+      sessionContents[key] = sessionStorage.getItem(key);
+    }
+
+    if (Object.keys(sessionContents).length > 0) {
+      // Persist snapshot under previous user key first (if available)
+      if (prevUserId) {
+        try {
+          localStorage.setItem(
+            `user_${prevUserId}`,
+            JSON.stringify(sessionContents),
+          );
+          /* eslint-disable no-console */
+          console.log(
+            '[MapViewer] Saved session to previous user key before logout',
+          );
+          /* eslint-enable no-console */
+        } catch (error) {
+          /* eslint-disable no-console */
+          console.error(
+            '[MapViewer] Error saving previous user session on logout:',
+            error,
+          );
+          /* eslint-enable no-console */
+        }
+      }
+      try {
+        localStorage.setItem('user_anonymous', JSON.stringify(sessionContents));
+        /* eslint-disable no-console */
+        console.log('[MapViewer] Saved session to anonymous storage');
+        /* eslint-enable no-console */
+      } catch (error) {
+        /* eslint-disable no-console */
+        console.error('[MapViewer] Error saving anonymous session:', error);
+        /* eslint-enable no-console */
+      }
+    }
+  }
+
+  // Handle user account switching
+  handleUserSwitch(prevUserId, newUserId) {
+    /* eslint-disable no-console */
+    console.log('[MapViewer] User switched accounts:', {
+      prevUserId,
+      newUserId,
+    });
+    /* eslint-enable no-console */
+
+    // Save current session to previous user's storage
+    if (prevUserId) {
+      const sessionContents = {};
+      for (let i = 0; i < sessionStorage.length; i++) {
+        const key = sessionStorage.key(i);
+        sessionContents[key] = sessionStorage.getItem(key);
+      }
+
+      if (Object.keys(sessionContents).length > 0) {
+        try {
+          localStorage.setItem(
+            `user_${prevUserId}`,
+            JSON.stringify(sessionContents),
+          );
+          /* eslint-disable no-console */
+          console.log(
+            '[MapViewer] Saved session for previous user:',
+            prevUserId,
+          );
+          /* eslint-enable no-console */
+        } catch (error) {
+          /* eslint-disable no-console */
+          console.error(
+            '[MapViewer] Error saving previous user session:',
+            error,
+          );
+          /* eslint-enable no-console */
+        }
+      }
+    }
+
+    // Load new user's session
+    this.handleUserLogin(newUserId);
+  }
+
   mapLayersHandler(newLayers) {
     this.setState({ layers: newLayers });
   }
@@ -249,13 +950,41 @@ class MapViewer extends React.Component {
       logo: false,
     });
 
+    /* eslint-disable no-console */
+    console.log(
+      `[MapViewer:${this.instanceId}] Attempting to recover map state from sessionStorage`,
+    );
+    /* eslint-enable no-console */
+
     mapStatus = this.recoverState();
 
+    /* eslint-disable no-console */
+    console.log(`[MapViewer:${this.instanceId}] Recovered mapStatus:`, {
+      isNull: mapStatus === null,
+      isUndefined: mapStatus === undefined,
+      type: typeof mapStatus,
+      hasZoom: mapStatus && mapStatus.zoom !== undefined,
+      hasCenter: mapStatus && mapStatus.center !== undefined,
+      entryCount: mapStatus ? Object.entries(mapStatus).length : 0,
+      mapStatus: mapStatus,
+    });
+    /* eslint-enable no-console */
+
+    // Improved condition check to prevent false positives that overwrite restored data
     if (
       mapStatus === null ||
-      (mapStatus.zoom === null && mapStatus.center === null) ||
-      Object.entries(mapStatus).length === 0
+      mapStatus === undefined ||
+      (typeof mapStatus === 'object' &&
+        mapStatus.zoom === undefined &&
+        mapStatus.center === undefined) ||
+      (typeof mapStatus === 'object' && Object.entries(mapStatus).length === 0)
     ) {
+      /* eslint-disable no-console */
+      console.log(
+        `[MapViewer:${this.instanceId}] No valid map state found - initializing with default configuration`,
+      );
+      /* eslint-enable no-console */
+
       mapStatus = {};
       mapStatus.zoom = this.mapCfg.zoom;
       mapStatus.center = this.mapCfg.center;
@@ -263,6 +992,12 @@ class MapViewer extends React.Component {
       this.setCenterState(this.mapCfg.center);
       this.setZoomState(this.mapCfg.zoom);
       this.activeLayersHandler(this.mapCfg.activeLayers);
+    } else {
+      /* eslint-disable no-console */
+      console.log(
+        `[MapViewer:${this.instanceId}] Using restored map state from sessionStorage`,
+      );
+      /* eslint-enable no-console */
     }
 
     this.view = new MapView({
@@ -320,15 +1055,26 @@ class MapViewer extends React.Component {
     // we will have stored the json response here:
     // this.props.mapviewer_config
     this.props.MapViewerConfig(flattenToAppURL(this.props.url));
-    //Once we have created the MapView, we need to ensure that the map div
-    //is refreshed in order to show the map on it. To do so, we need to
-    //trigger the renderization again, and to trigger the renderization
-    //we invoke the setState method, that changes the state and forces a
-    //react component to render itself again
-    //this.setState({});
+
+    // Add event listeners for page unload events to ensure data is saved
+    /* eslint-disable no-console */
+    console.log(
+      `[MapViewer:${this.instanceId}] Adding page unload event listeners`,
+    );
+    /* eslint-enable no-console */
+
+    // beforeunload - most reliable for catching navigation away from page
+    window.addEventListener('beforeunload', this.handlePageUnload);
+
+    // pagehide - more reliable than unload, catches all page hiding scenarios
+    window.addEventListener('pagehide', this.handlePageUnload);
+
+    // visibilitychange - catches tab switches and window minimizing
+    document.addEventListener('visibilitychange', this.handleVisibilityChange);
   }
 
   componentDidUpdate(prevProps, prevState) {
+    // Handle Download/dataset URL changes (existing logic)
     if (
       this.props.Download ||
       (this.location &&
@@ -341,17 +1087,63 @@ class MapViewer extends React.Component {
       }
       sessionStorage.setItem('toc_panel_scrolls', toc_panel_scrolls);
     }
-    // if (
-    //   prevState.wmsServiceUrl !== this.state.wmsServiceUrl &&
-    //   this.state.wmsServiceUrl === ''
-    // ) {
-    //   // Reset wmsServiceUrl without causing a new update of the children
-    //   this.setState({ wmsServiceUrl: '' });
-    // }
+
+    // Handle user state changes from context
+    const {
+      user_id: currentUserId,
+      isLoggedIn: currentIsLoggedIn,
+    } = this.context;
+    const { currentUserState: prevUserState } = prevState;
+
+    // Compare current context values with previous state
+    if (
+      prevUserState.user_id !== currentUserId ||
+      prevUserState.isLoggedIn !== currentIsLoggedIn
+    ) {
+      /* eslint-disable no-console */
+      console.log(
+        '[MapViewer] User state change detected in componentDidUpdate:',
+        {
+          previous: prevUserState,
+          current: { user_id: currentUserId, isLoggedIn: currentIsLoggedIn },
+        },
+      );
+      /* eslint-enable no-console */
+
+      // Update component state to reflect new user state
+      const newUserState = {
+        user_id: currentUserId,
+        isLoggedIn: currentIsLoggedIn,
+      };
+      this.setState({ currentUserState: newUserState });
+
+      // Handle the user state change
+      this.handleSessionStateUpdate(newUserState, prevUserState);
+    }
   }
 
   componentWillUnmount() {
-    // clean up
+    // Remove event listeners to prevent memory leaks
+    /* eslint-disable no-console */
+    console.log(`[MapViewer:${this.instanceId}] Removing event listeners`);
+    /* eslint-enable no-console */
+
+    window.removeEventListener('beforeunload', this.handlePageUnload);
+    window.removeEventListener('pagehide', this.handlePageUnload);
+    document.removeEventListener(
+      'visibilitychange',
+      this.handleVisibilityChange,
+    );
+
+    // Save data using the extracted method
+    this.saveSessionToLocalStorage();
+
+    /* eslint-disable no-console */
+    console.log(
+      `[MapViewer:${this.instanceId}] Clearing session storage and cleaning up view`,
+    );
+    /* eslint-enable no-console */
+
     if (this.view) {
       this.view.container = null;
       this.view.destroy();
@@ -554,7 +1346,7 @@ class MapViewer extends React.Component {
     if ('loading' in this.props.mapviewer_config) {
       return (
         <div className={this.mapClass}>
-          <div ref={this.mapdiv} className="map"></div>
+          <div ref={this.mapdiv} className="map" />
         </div>
       );
     } else {
@@ -572,10 +1364,8 @@ class MapViewer extends React.Component {
             {this.renderScale()}
             {this.renderInfo()}
             {this.renderHotspot()}
-            {/*this.renderMenu()*/}
-            {/*this.renderBookmark()*/}
-            <CheckUserID reference={this} />
             {this.renderLoadingSpinner()}
+            <CheckUserID reference={this} />
             {this.renderUploadService()}
           </div>
         </div>
@@ -584,8 +1374,10 @@ class MapViewer extends React.Component {
   }
 }
 
+// CheckLogin, CheckUserID now use useUserContext instead of useCartState
+
 export const CheckLogin = ({ reference }) => {
-  let { isLoggedIn } = useCartState();
+  const { isLoggedIn } = useUserContext();
   return (
     <>
       {isLoggedIn && (
@@ -606,9 +1398,9 @@ export const CheckLogin = ({ reference }) => {
     </>
   );
 };
-export const CheckUserID = ({ reference }) => {
-  let { user_id } = useCartState();
 
+export const CheckUserID = ({ reference }) => {
+  const { user_id, isLoggedIn } = useUserContext();
   return (
     <>
       {reference.view && (
@@ -653,6 +1445,7 @@ export const CheckUserID = ({ reference }) => {
             onServiceChange={reference.serviceChangeHandler}
             uploadFileErrorHandler={reference.uploadFileErrorHandler}
             userID={user_id}
+            isLoggedIn={isLoggedIn}
             getTaxonomy={reference.getTaxonomy}
             tax={reference.tax}
           />
@@ -661,10 +1454,47 @@ export const CheckUserID = ({ reference }) => {
     </>
   );
 };
-const mapDispatchToProps = (dispatch) => {
-  return {
-    getTaxonomy: (name) => dispatch(getTaxonomy(name)),
+
+const mapDispatchToProps = (dispatch) => ({
+  getTaxonomy: (name) => dispatch(getTaxonomy(name)),
+});
+
+const MapViewerWithProvider = (props) => {
+  const mapViewerRef = useRef(null);
+  const cartState = useCartState();
+
+  // Get initial user state
+  const initialUserState = {
+    user_id: cartState?.user_id || null,
+    isLoggedIn: cartState?.isLoggedIn || false,
   };
+
+  // Handle user state changes from the monitor
+  const handleUserStateChange = useCallback(
+    (newUserState, previousUserState) => {
+      if (mapViewerRef.current) {
+        mapViewerRef.current.handleUserStateChange(
+          newUserState,
+          previousUserState,
+        );
+      }
+    },
+    [],
+  );
+
+  return (
+    <UserProvider>
+      <UserStorageManager>
+        <MapViewerStateMonitor onUserStateChange={handleUserStateChange}>
+          <MapViewer
+            {...props}
+            ref={mapViewerRef}
+            initialUserState={initialUserState}
+          />
+        </MapViewerStateMonitor>
+      </UserStorageManager>
+    </UserProvider>
+  );
 };
 
 export default compose(
@@ -676,4 +1506,4 @@ export default compose(
   ),
   connect(null, mapDispatchToProps),
   injectLazyLibs('highcharts'),
-)(MapViewer, MenuWidget);
+)(MapViewerWithProvider, MenuWidget);

package/src/components/MapViewer/MenuWidget.jsx

@@ -1093,6 +1093,7 @@ class MenuWidget extends React.Component {
               let button = familyDropdown.querySelector(
                 '.ccl-expandable__button',
               );
+              scrollPosition = familyDropdown.offsetTop;
               if (button) {
                 button.setAttribute('aria-expanded', 'true');
               }
@@ -2317,6 +2318,7 @@ class MenuWidget extends React.Component {
         this.props.uploadFileErrorHandler();
         return;
       }
+    } else {
     }
   }
 
@@ -2434,7 +2436,7 @@ class MenuWidget extends React.Component {
   }
 
   saveUserServicesToStorage(layers) {
-    if (this.userID == null) return;
+    if (this.userID === null) return;
 
     try {
       const layersToSave = layers.map((layer) => {
@@ -2477,8 +2479,7 @@ class MenuWidget extends React.Component {
   }
 
   async loadUserServicesFromStorage() {
-    if (this.userID != null) {
-      sessionStorage.clear();
+    if (this.userID !== null) {
       try {
         const savedServices = JSON.parse(
           localStorage.getItem(USER_SERVICES_KEY + '_' + this.userID),
@@ -3361,33 +3362,24 @@ class MenuWidget extends React.Component {
       try {
         const response = await fetch(`${subLayer.url}?f=pjson`);
         if (!response.ok) {
-          //console.log('no response from server');
-          continue; // Skip this iteration on error
+          continue;
         }
-        const subLayerData = await response.json(); // Await JSON parsing
+        const subLayerData = await response.json();
         if (subLayerData === null) {
-          //console.log('no data retrieved:', subLayerData);
           continue;
         } else {
-          // Convert bounding box data to correct extent values for map view
-
           let extent = this.convertBBOXValues(subLayerData.extent);
-
-          // Store sublayer extent
-
           BBoxes[subLayerData.name] = {
             id: subLayerData.id,
             extent: extent,
           };
         }
-      } catch (error) {
-        //console.error('Error fetching sublayer:', error);
-      }
+      } catch (error) {}
     }
 
     BBoxes['dataset'] = this.convertBBOXValues(layer?.fullExtent?.extent);
 
-    return BBoxes; // Return BBoxes after all fetches are completed
+    return BBoxes;
   }
 
   parseBBOXWMS(xml) {