Merge pull request #57 from UTSC-CSCC01-Software-Engineering-I/develop

Adrit-3001 · web-flow · commit 0f40e4a4b1d0 · 2025-08-03T21:16:23.000-04:00
Develop
diff --git a/frontend/src/components/HUDleftPoints.jsx b/frontend/src/components/HUDleftPoints.jsx
@@ -243,10 +243,18 @@ function LogoBlock() {
   const handleBeachClick = (item) => {
     // Also trigger map search if the function exists
     if (window.handleMapSearch) {
-      // Use siteName for API points or coordinates for user points
+      // Get the exact coordinates, ensuring we're using the right property names
+      const lat = item.lat || item.Latitude;
+      const lon = item.lng || item.lon || item.Longitude;
+      
+      // Get a name for the search
       const searchIdentifier = item.siteName || 
-                              (item.isUserPoint ? `User Point (${item.lat},${item.lon})` : 'Unknown Point');
-      window.handleMapSearch(searchIdentifier, item.lat, item.lon);
+                            (item.isUserPoint ? `User Point (${lat},${lon})` : 'Unknown Point');
+      
+      // ALWAYS force popup to open with true parameter
+      window.handleMapSearch(searchIdentifier, lat, lon, true);
+      
+      console.log(`Clicked point: ${searchIdentifier} at ${lat},${lon}`);
     }
   };
 
@@ -293,6 +301,25 @@ function LogoBlock() {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [showSortMenu]);
 
+  // NEW: dispatch filterchange event
+  const handleApplyFilter = () => {
+    const min = parseFloat(tempFilter.min);
+    const max = parseFloat(tempFilter.max);
+    window.dispatchEvent(new CustomEvent('filterchange', {
+      detail: { min: isNaN(min) ? NaN : min, max: isNaN(max) ? NaN : max }
+    }));
+    setShowFilterModal(false);
+  };
+
+  // NEW: reset filter AND dispatch
+  const handleResetFilter = () => {
+    setTempFilter({ min: '', max: '' });
+    window.dispatchEvent(new CustomEvent('filterchange', {
+      detail: { min: NaN, max: NaN }
+    }));
+    setShowFilterModal(false);
+  };
+
   return (
     <div 
       className="boxwithpoints"
@@ -404,7 +431,7 @@ function LogoBlock() {
               position: 'absolute',
               top: 'calc(100% + 0.25rem)',
               right: 0,
-              backgroundColor: theme === 'light' ? '#e6e6e6bb' : '#00000086',
+              backgroundColor: theme === 'light' ? '#dadadae1' : '#242424f1',
               boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
               color: theme === 'light' ? '#000' : '#fff',
               borderRadius: '1rem',
@@ -789,8 +816,8 @@ function LogoBlock() {
         theme={theme}
         tempFilter={tempFilter}
         setTempFilter={setTempFilter}
-        applyTempFilter={tempFilter}
-        resetTempFilter={setTempFilter}
+        applyTempFilter={handleApplyFilter}    // use handler
+        resetTempFilter={handleResetFilter}    // use handler
       />
     </div>
   );
diff --git a/frontend/src/components/MapComponent.jsx b/frontend/src/components/MapComponent.jsx
@@ -255,19 +255,31 @@ export default function MapComponent() {
 
               const historicalData = await fetchHistoricalData(name);
 
+              // add once at top of click‐handler so you can reuse
+              const popupOffset = [17, -32]; // x=0 (center), y=−45px (above marker)
+
               if (historicalData.length === 0) {
                 marker.bindPopup(`
                   <div role="dialog" aria-labelledby="popup-title-${i}">
                     <h3 id="popup-title-${i}">${name}</h3>
                     <p>No historical data available</p>
                     <p>Current temperature: ${formattedTemp} (${tempCategory})</p>
                   </div>
-                `).openPopup();
+                `, {
+                  offset: popupOffset,
+                  className: 'custom-popup'
+                }).openPopup();
                 return;
               }
 
               if (historicalData.length < 2) {
-                marker.bindPopup(`<strong>${name}</strong><br/>Not enough data to generate a graph`).openPopup();
+                marker.bindPopup(
+                  `<strong>${name}</strong><br/>Not enough data to generate a graph`,
+                  {
+                    offset: popupOffset,
+                    className: 'custom-popup'
+                  }
+                ).openPopup();
                 return;
               }
 
@@ -442,7 +454,7 @@ export default function MapComponent() {
 
               // Open popup
               const popup = L.popup({
-                offset: [10, -20],
+                offset: popupOffset,
                 maxWidth: 650,
                 maxHeight: 470,
                 className: 'custom-popup'
@@ -602,44 +614,45 @@ export default function MapComponent() {
     const removeUnitListener = UnitManager.addUnitChangeListener((newUnit) => {
       setUnit(newUnit); // Update local state for legend
       
-      markersRef.current.forEach(({ marker, tempC, name }) => {
-        // Use formatTemperature utility for consistent formatting
+      markersRef.current.forEach(({ marker, tempC }) => {
+        // 1) compute the new label
         const formattedTemp = formatTemperature(tempC, newUnit);
-        const tempColor = getTemperatureColor(tempC, 'C'); // Always calculate color from Celsius
-
-        // Update marker icon
-        marker.setIcon(window.L.divIcon({
-          className: 'custom-temp-marker',
-          html: `<div class="temp-label" style="background-color: ${tempColor};">${formattedTemp}</div>`,
-          iconSize: [40, 40],
-          iconAnchor: [20, 20],
-        }));
 
-        // Update the graph if it exists
-        if (marker.chartInstance && marker.chartData) {
-          const chart = marker.chartInstance;
-          
-          // Convert original data to new unit with time structure
-          const newTimeBasedData = marker.chartData.map((d) => ({
-            x: new Date(d.timestamp),
-            y: newUnit === 'F' ? (d.temp * 9) / 5 + 32 : d.temp
-          }));
+        // 2) find the existing <span class="temp-value"> and update it
+        const el = marker.getElement();
+        if (el) {
+          const valueSpan = el.querySelector('.temp-value');
+          if (valueSpan) valueSpan.textContent = formattedTemp;
+        }
 
-          // Update dataset with time-based data
-          chart.data.datasets[0].data = newTimeBasedData;
+        // 3) leave the background‐color alone so it never “snaps back” after a refresh
+        // (skip marker.setIcon entirely)
+      });
 
-          // Update the y-axis title
-          chart.options.scales.y.title.text = `Temperature (°${newUnit})`;
-          
-          // Update y-axis tick callback
-          chart.options.scales.y.ticks.callback = function(value) {
-            return `${value}°${newUnit}`;
-          };
+      // Update the graph if it exists
+      if (marker.chartInstance && marker.chartData) {
+        const chart = marker.chartInstance;
+        
+        // Convert original data to new unit with time structure
+        const newTimeBasedData = marker.chartData.map((d) => ({
+          x: new Date(d.timestamp),
+          y: newUnit === 'F' ? (d.temp * 9) / 5 + 32 : d.temp
+        }));
 
-          // Apply the updates
-          chart.update();
-        }
-      });
+        // Update dataset with time-based data
+        chart.data.datasets[0].data = newTimeBasedData;
+
+        // Update the y-axis title
+        chart.options.scales.y.title.text = `Temperature (°${newUnit})`;
+        
+        // Update y-axis tick callback
+        chart.options.scales.y.ticks.callback = function(value) {
+          return `${value}°${newUnit}`;
+        };
+
+        // Apply the updates
+        chart.update();
+      }
     });
 
     // Listen for theme changes
@@ -762,7 +775,7 @@ export default function MapComponent() {
   // }, []);
 
   // Handle beach search by name or coordinates
-  function handleSearch(selectedName, lat, lon) {
+  function handleSearch(selectedName, lat, lon, forcePopup = false) {
     if (!mapInstanceRef.current) return;
     
     // If direct coordinates are provided, use them
@@ -773,6 +786,16 @@ export default function MapComponent() {
       const offsetX = 0;
       const targetLatLng = [lat, lon];
       
+      // Find the marker that matches these coordinates before animation starts
+      let targetMarker = null;
+      markersRef.current.forEach(({marker, lat: markerLat, lon: markerLon}) => {
+        // Use a larger tolerance for coordinate matching (0.005 is about 500m)
+        if (Math.abs(markerLat - lat) < 0.005 && Math.abs(markerLon - lon) < 0.005) {
+          console.log('Found matching marker at', markerLat, markerLon);
+          targetMarker = marker;
+        }
+      });
+      
       // Calculate offset points for smooth animation
       const currentZoom = map.getZoom();
       const pointAtCurrentZoom = map.project(targetLatLng, currentZoom);
@@ -783,10 +806,10 @@ export default function MapComponent() {
       map.once('moveend', function() {
         // After panning completes, smoothly zoom in
         map.once('zoomend', function() {
-          // Find and open any popup that might be at this location
-          markersRef.current.forEach(({marker, lat: markerLat, lon: markerLon}) => {
+          // replace marker.openPopup() with marker.fire('click')
+          markersRef.current.forEach(({ marker, lat: markerLat, lon: markerLon }) => {
             if (Math.abs(markerLat - lat) < 0.0001 && Math.abs(markerLon - lon) < 0.0001) {
-              marker.openPopup();
+              marker.fire('click');
             }
           });
         });
@@ -832,13 +855,13 @@ export default function MapComponent() {
       map.once('moveend', function() {
         // After panning completes, smoothly zoom in
         map.once('zoomend', function() {
-          // After zooming completes, open the popup
-          match.marker.openPopup();
+          // fire the click event so your click-handler builds the popup & chart
+          match.marker.fire('click');
         });
         
         // Animate zoom with a duration in ms
         map.flyTo(offsetLatLng, targetZoom, {
-          duration: 0.5, // seconds
+          duration: 0.5,
           easeLinearity: 0.2
         });
       });
