Addressing QA Feedback on AirQo Map

platform/src/common/components/Map/AirQoMap.jsx

@@ -33,7 +33,7 @@ const mapStyles = [
   { url: 'mapbox://styles/mapbox/satellite-v9', name: 'Satellite', image: SatelliteMode },
 ];
 
-const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant }) => {
+const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant, resizeMap }) => {
   const dispatch = useDispatch();
   const mapContainerRef = useRef(null);
   const mapRef = useRef(null);
@@ -48,6 +48,7 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
   const [toastMessage, setToastMessage] = useState({
     message: '',
     type: '',
+    bgColor: '',
   });
   const [NodeType, setNodeType] = useState('Emoji');
   const [selectedSite, setSelectedSite] = useState(null);
@@ -60,10 +61,13 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
   /**
    * Clear data on unmount
    * @sideEffect
-   * - Clear data
+   * - Clear data on unmount when lat, lng and zm are not present
+   * @returns {void}
    */
   useEffect(() => {
-    dispatch(clearData());
+    if (!lat && !lng && !zm) {
+      dispatch(clearData());
+    }
   }, []);
 
   /**
@@ -129,6 +133,13 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
 
   /**
    * Initialize the map
+   * @sideEffect
+   * - Initialize the map
+   * - Add map controls
+   * - Load data
+   * - Update clusters
+   * - Fetch location boundaries
+   * @returns {void}
    */
   useEffect(() => {
     const initializeMap = async () => {
@@ -263,6 +274,12 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
                   const marker = new mapboxgl.Marker(el)
                     .setLngLat(feature.geometry.coordinates)
                     .addTo(map);
+
+                  // Add click event to zoom in when a user clicks on a cluster
+                  el.addEventListener('click', () => {
+                    map.flyTo({ center: feature.geometry.coordinates, zoom: zoom + 2 });
+                  });
+
                   markers.push(marker);
                 }
               });
@@ -287,6 +304,17 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
     };
   }, [mapStyle, mapboxApiAccessToken, refresh, pollutant, NodeType]);
 
+  /**
+   * Resize the map
+   * @sideEffect
+   * - Resizes the map when the window is resized and side bar is closed
+   */
+  useEffect(() => {
+    if (!resizeMap) {
+      mapRef.current.resize();
+    }
+  }, [!resizeMap]);
+
   /**
    * Fetch location boundaries
    */
@@ -399,6 +427,7 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
       setToastMessage({
         message: 'Location URL copied to clipboard',
         type: 'success',
+        bgColor: 'bg-blue-600',
       });
     } catch (error) {
       setToastMessage({
@@ -409,17 +438,14 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
   };
 
   return (
-    <div className='relative w-auto h-auto'>
+    <div className='relative w-full h-full'>
       {/* Map */}
       <div ref={mapContainerRef} className={customStyle} />
 
       {/* Loader */}
       {refresh ||
         (loading && (
-          <div
-            className={`absolute inset-0 flex items-center justify-center z-40 ${
-              showSideBar ? 'ml-96' : ''
-            }`}>
+          <div className={`absolute inset-0 flex items-center justify-center z-40`}>
             <div className='bg-white w-[70px] h-[70px] flex justify-center items-center rounded-md shadow-md'>
               <span className='ml-2'>
                 <Loader width={32} height={32} />
@@ -478,7 +504,7 @@ const AirQoMap = ({ customStyle, mapboxApiAccessToken, showSideBar, pollutant })
           timeout={3000}
           dataTestId='map-toast'
           size='lg'
-          bgColor='bg-blue-600'
+          bgColor={toastMessage.bgColor}
           position='bottom'
         />
       )}

platform/src/common/components/Map/components/LayerModal.js

@@ -35,7 +35,14 @@ const Option = ({ isSelected, children, onSelect, image, disabled }) => (
       className={`w-14 h-14 relative rounded-lg ${
         isSelected ? 'border-2 border-blue-500 ring-4 ring-light-blue-100' : ''
       } border-2`}>
-      <Image src={image} alt={children} layout='fill' objectFit='cover' className='rounded-lg' />
+      <Image
+        src={image}
+        alt={children}
+        layout='fill'
+        objectFit='cover'
+        className='rounded-lg'
+        loading='eager'
+      />
     </div>
     <span>{children}</span>
   </button>
@@ -84,7 +91,7 @@ const LayerModal = ({
   if (!isOpen) return null;
 
   return (
-    <div className='fixed inset-0 overflow-y-auto z-50' style={{ zIndex: 777 }}>
+    <div className='fixed inset-0 overflow-y-auto z-30'>
       <div className='flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0'>
         <div className='fixed inset-0 transition-opacity' aria-hidden='true'>
           <div className='absolute inset-0 bg-[#4e4e4e3b]'></div>

platform/src/common/components/Map/components/MapControls.js

@@ -145,6 +145,7 @@ export class CustomGeolocateControl {
     this.setToastMessage({
       message: 'Location tracked successfully.',
       type: 'success',
+      bgColor: 'bg-blue-600',
     });
 
     this.map.flyTo({

platform/src/common/components/Map/components/Sidebar.js

@@ -180,10 +180,9 @@ const Sidebar = ({ siteDetails, selectedSites, isAdmin, showSideBar, setShowSide
 
   return (
     <div
-      className='absolute left-0 top-0 w-full h-full md:max-w-[400px] bg-white shadow-lg shadow-right space-y-4 z-50 overflow-y-auto map-scrollbar'
-      style={{
-        zIndex: 1000,
-      }}>
+      className={`w-auto h-full md:max-w-[400px] bg-white shadow-lg shadow-right space-y-4 z-50 overflow-y-auto map-scrollbar z-50 ${
+        window.innerWidth < 768 ? 'absolute left-0 top-0' : ''
+      }`}>
       <div className={!isFocused ? 'space-y-4' : 'hidden'}>
         <div className='px-4 pt-4'>
           <div className='w-full flex justify-between items-center'>

platform/src/common/components/Toast/index.jsx

@@ -27,7 +27,7 @@ const Toast = ({ message, type, timeout, dataTestId, size, clearData, bgColor, p
   return visible ? (
     <div
       className={`absolute ${
-        position === 'top' ? 'top-5' : 'bottom-5'
+        !position ? 'top-5' : 'bottom-5'
       } left-0 right-0 z-50 flex justify-center items-center mx-4`}
       data-testid={dataTestId}>
       <div className={containerStyles}>

platform/src/lib/store/services/map/MapSlice.js

@@ -6,10 +6,10 @@ const initialState = {
     city: '',
   },
   center: {
-    latitude: 2.4672,
-    longitude: 9.8977,
+    latitude: 2.5768,
+    longitude: 25.1601,
   },
-  zoom: 3.0141218806815315,
+  zoom: 3.01,
 };
 
 export const mapSlice = createSlice({

platform/src/pages/Home/index.jsx

@@ -188,7 +188,7 @@ const Home = () => {
                   </Button>
                   <a
                     onClick={handleModel}
-                    className='text-blue-600 text-sm font-normal mt-2 cursor-pointer'>
+                    className='text-blue-600 text-sm font-normal mt-2 cursor-pointer hidden'>
                     Show me how
                   </a>
                 </div>
@@ -200,7 +200,7 @@ const Home = () => {
                 }}>
                 <div
                   onClick={handleModel}
-                  className='absolute z-50 inset-0 flex items-center justify-center cursor-pointer'>
+                  className='absolute z-50 inset-0 flex items-center justify-center cursor-pointer hidden'>
                   <PlayIcon />
                 </div>
                 <Image src={AnalyticsImage} alt='Analytics Image' width={600} height={350} />

platform/src/pages/map/index.jsx

@@ -61,44 +61,37 @@ const index = () => {
 
   return (
     <MapLayout noTopNav={false}>
-      <div className='relative'>
-        <>
-          {showSideBar && (
-            <Sidebar
-              siteDetails={siteDetails}
-              selectedSites={selectedSites}
-              isAdmin={isAdmin}
-              showSideBar={showSideBar}
-              setShowSideBar={setShowSideBar}
-            />
-          )}
-          <div className={`${showSideBar ? 'hidden' : ''} md:block`}>
-            <div
-              className={`absolute bottom-2 ${
-                showSideBar ? 'left-[calc(280px+15px)] md:left-[calc(400px+15px)]' : 'left-[15px]'
-              } `}
-              style={{ zIndex: 900 }}>
-              <AirQualityLegend pollutant={pollutant} />
-            </div>
-            <div
-              className={`absolute top-4 ${
-                showSideBar ? 'left-[calc(280px+15px)] md:left-[calc(400px+15px)]' : 'left-[15px]'
-              } z-50`}>
-              <div className='flex flex-col space-y-4'>
-                <button
-                  className='inline-flex items-center justify-center w-[50px] h-[50px] mr-2 text-white rounded-full bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-md'
-                  onClick={() => setShowSideBar(!showSideBar)}>
-                  <MenuIcon />
-                </button>
-              </div>
+      <div className='relative flex w-full h-full'>
+        {showSideBar && (
+          <Sidebar
+            siteDetails={siteDetails}
+            selectedSites={selectedSites}
+            isAdmin={isAdmin}
+            showSideBar={showSideBar}
+            setShowSideBar={setShowSideBar}
+          />
+        )}
+        <div className={`${showSideBar ? 'hidden' : ''} relative left-4 z-50 md:block`}>
+          <div className={`absolute bottom-2`} style={{ zIndex: 900 }}>
+            <AirQualityLegend pollutant={pollutant} />
+          </div>
+          <div className={`absolute top-4`}>
+            <div className='flex flex-col space-y-4'>
+              <button
+                className={`inline-flex items-center justify-center w-[50px] h-[50px] mr-2 text-white rounded-full bg-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-md lg:hidden`}
+                onClick={() => setShowSideBar(!showSideBar)}>
+                <MenuIcon />
+              </button>
             </div>
           </div>
-        </>
+        </div>
+
         <AirQoMap
           showSideBar={showSideBar}
           mapboxApiAccessToken={process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN}
           customStyle='flex-grow h-screen w-full relative bg-[#e6e4e0]'
           pollutant={pollutant}
+          resizeMap={showSideBar}
         />
       </div>
     </MapLayout>