From c282d958a59a4724833de7a5b75b0c0df3ef22b8 Mon Sep 17 00:00:00 2001
From: vergiLgood1 <xdamazon17@gmail.com>
Date: Mon, 5 May 2025 03:42:32 +0700
Subject: [PATCH] feat: add map reset functionality and improve incident popup
 handling

---
 .../app/_components/map/crime-map.tsx         |  63 +++++-
 sigap-website/app/_components/map/map.tsx     |  31 ++-
 .../_components/map/pop-up/crime-popup.tsx    | 196 +++++++++---------
 3 files changed, 175 insertions(+), 115 deletions(-)

diff --git a/sigap-website/app/_components/map/crime-map.tsx b/sigap-website/app/_components/map/crime-map.tsx
index dab9bab..b991510 100644
--- a/sigap-website/app/_components/map/crime-map.tsx
+++ b/sigap-website/app/_components/map/crime-map.tsx
@@ -21,6 +21,7 @@ import { CrimeTimelapse } from "./controls/bottom/crime-timelapse"
 import { ITooltips } from "./controls/top/tooltips"
 import CrimeSidebar from "./controls/left/sidebar/map-sidebar"
 import Tooltips from "./controls/top/tooltips"
+import { BASE_BEARING, BASE_PITCH, BASE_ZOOM } from "@/app/_utils/const/map"
 
 // Updated CrimeIncident type to match the structure in crime_incidents
 interface ICrimeIncident {
@@ -225,6 +226,57 @@ export default function CrimeMap() {
         };
     }, []);
 
+    // Add event listener for map reset
+    useEffect(() => {
+        const handleMapReset = (e: CustomEvent) => {
+            const { duration } = e.detail || { duration: 1500 };
+
+            // Find the map instance
+            const mapInstance = mapContainerRef.current?.querySelector('.mapboxgl-map');
+            if (!mapInstance) {
+                console.error("Map instance not found");
+                return;
+            }
+
+            // Create and dispatch the reset event that MapView will listen for
+            const mapboxEvent = new CustomEvent('mapbox_fly', {
+                detail: {
+                    duration: duration,
+                    resetCamera: true
+                },
+                bubbles: true
+            });
+
+            mapInstance.dispatchEvent(mapboxEvent);
+        };
+
+        // Add event listener
+        document.addEventListener('mapbox_reset', handleMapReset as EventListener);
+
+        return () => {
+            document.removeEventListener('mapbox_reset', handleMapReset as EventListener);
+        };
+    }, []);
+
+    // Update the popup close handler to reset the map view
+    const handlePopupClose = () => {
+        setSelectedIncident(null);
+
+        // Dispatch map reset event to reset zoom, pitch, and bearing
+        const mapInstance = mapContainerRef.current?.querySelector('.mapboxgl-map');
+
+        if (mapInstance) {
+            const resetEvent = new CustomEvent('mapbox_reset', {
+                detail: {
+                    duration: 1500,
+                },
+                bubbles: true
+            });
+
+            mapInstance.dispatchEvent(resetEvent);
+        }
+    }
+
     // Handle year-month timeline change
     const handleTimelineChange = useCallback((year: number, month: number, progress: number) => {
         setSelectedYear(year)
@@ -262,11 +314,6 @@ export default function CrimeMap() {
         return title
     }
 
-    // Toggle sidebar function
-    const toggleSidebar = useCallback(() => {
-        setSidebarCollapsed(!sidebarCollapsed)
-    }, [sidebarCollapsed])
-
     // Handle control changes from the top controls component
     const handleControlChange = (controlId: ITooltips) => {
         setActiveControl(controlId)
@@ -327,7 +374,7 @@ export default function CrimeMap() {
                                                 <CrimePopup
                                                     longitude={selectedIncident.longitude}
                                                     latitude={selectedIncident.latitude}
-                                                    onClose={() => setSelectedIncident(null)}
+                                                    onClose={handlePopupClose}
                                                     incident={selectedIncident}
                                                 />
 
@@ -349,7 +396,7 @@ export default function CrimeMap() {
                                                         setSelectedCategory={setSelectedCategory}
                                                         availableYears={availableYears || []}
                                                         categories={categories}
-                                                        crimes={filteredCrimes}  
+                                                        crimes={filteredCrimes}
                                                     />
                                                 </div>
 
@@ -362,7 +409,7 @@ export default function CrimeMap() {
                                                     selectedMonth={selectedMonth}
                                                 />
                                                 <div className="absolute bottom-20 right-0 z-10 p-2">
-                                                <MapLegend position="bottom-right" />
+                                                    <MapLegend position="bottom-right" />
                                                 </div>
 
                                             </>
diff --git a/sigap-website/app/_components/map/map.tsx b/sigap-website/app/_components/map/map.tsx
index 206fcbe..f5dec46 100644
--- a/sigap-website/app/_components/map/map.tsx
+++ b/sigap-website/app/_components/map/map.tsx
@@ -88,16 +88,29 @@ export default function MapView({
     const handleMapFly = (e: CustomEvent) => {
       if (!e.detail || !mapRef.current) return;
 
-      const { center, zoom, bearing, pitch, duration } = e.detail;
+      const { center, zoom, bearing, pitch, duration, resetCamera } = e.detail;
 
-      mapRef.current.flyTo({
-        center,
-        zoom,
-        bearing,
-        pitch,
-        duration,
-        essential: true
-      });
+      if (resetCamera) {
+        // Reset to default view
+        mapRef.current.flyTo({
+          center: [BASE_LONGITUDE, BASE_LATITUDE],
+          zoom: BASE_ZOOM,
+          bearing: BASE_BEARING,
+          pitch: BASE_PITCH,
+          duration,
+          essential: true
+        });
+      } else {
+      // Fly to specific location
+        mapRef.current.flyTo({
+          center,
+          zoom,
+          bearing,
+          pitch,
+          duration,
+          essential: true
+        });
+      }
     };
 
     mapElement.addEventListener('mapbox_fly', handleMapFly as EventListener);
diff --git a/sigap-website/app/_components/map/pop-up/crime-popup.tsx b/sigap-website/app/_components/map/pop-up/crime-popup.tsx
index 87dddc4..042e95a 100644
--- a/sigap-website/app/_components/map/pop-up/crime-popup.tsx
+++ b/sigap-website/app/_components/map/pop-up/crime-popup.tsx
@@ -27,31 +27,31 @@ interface IncidentPopupProps {
 
 export default function IncidentPopup({ longitude, latitude, onClose, incident }: IncidentPopupProps) {
     const formatDate = (date?: Date) => {
-      if (!date) return "Unknown date"
-      return new Date(date).toLocaleDateString()
-  }
+        if (!date) return "Unknown date"
+        return new Date(date).toLocaleDateString()
+    }
 
     const formatTime = (date?: Date) => {
-      if (!date) return "Unknown time"
-      return new Date(date).toLocaleTimeString()
-  }
+        if (!date) return "Unknown time"
+        return new Date(date).toLocaleTimeString()
+    }
 
     const getStatusBadge = (status?: string) => {
         if (!status) return <Badge variant="outline">Unknown</Badge>
 
-      const statusLower = status.toLowerCase()
-      if (statusLower.includes("resolv") || statusLower.includes("closed")) {
-          return <Badge className="bg-emerald-600 text-white">Resolved</Badge>
-      }
-      if (statusLower.includes("progress") || statusLower.includes("invest")) {
-          return <Badge className="bg-amber-500 text-white">In Progress</Badge>
-      }
-      if (statusLower.includes("open") || statusLower.includes("new")) {
-          return <Badge className="bg-blue-600 text-white">Open</Badge>
-      }
+        const statusLower = status.toLowerCase()
+        if (statusLower.includes("resolv") || statusLower.includes("closed")) {
+            return <Badge className="bg-emerald-600 text-white">Resolved</Badge>
+        }
+        if (statusLower.includes("progress") || statusLower.includes("invest")) {
+            return <Badge className="bg-amber-500 text-white">In Progress</Badge>
+        }
+        if (statusLower.includes("open") || statusLower.includes("new")) {
+            return <Badge className="bg-blue-600 text-white">Open</Badge>
+        }
 
-      return <Badge variant="outline">{status}</Badge>
-  }
+        return <Badge variant="outline">{status}</Badge>
+    }
 
     // Determine border color based on status
     const getBorderColor = (status?: string) => {
@@ -75,108 +75,108 @@ export default function IncidentPopup({ longitude, latitude, onClose, incident }
         <Popup
             longitude={longitude}
             latitude={latitude}
-          closeButton={false} // Hide default close button
-          closeOnClick={false}
-          onClose={onClose}
-          anchor="top"
-          maxWidth="320px"
+            closeButton={false}
+            closeOnClick={false}
+            onClose={onClose}
+            anchor="top"
+            maxWidth="320px"
             className="incident-popup z-50"
-      >
-          <Card
+        >
+            <Card
                 className={`bg-background p-0 w-full max-w-[320px] shadow-xl border-0 overflow-hidden border-l-4 ${getBorderColor(incident.status)}`}
-          >
-              <div className="p-4 relative">
-                  {/* Custom close button */}
-                  <Button
-                      variant="ghost"
-                      size="icon"
-                      className="absolute top-2 right-2 h-6 w-6 rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700"
-                      onClick={onClose}
-                  >
-                      <X className="h-4 w-4" />
-                      <span className="sr-only">Close</span>
-                  </Button>
+            >
+                <div className="p-4 relative">
+                    {/* Custom close button */}
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="absolute top-2 right-2 h-6 w-6 rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700"
+                        onClick={onClose}
+                    >
+                        <X className="h-4 w-4" />
+                        <span className="sr-only">Close</span>
+                    </Button>
 
-                  <div className="flex items-center justify-between mb-3">
-                      <h3 className="font-bold text-base flex items-center gap-1.5">
-                          <AlertTriangle className="h-4 w-4 text-red-500" />
+                    <div className="flex items-center justify-between mb-3">
+                        <h3 className="font-bold text-base flex items-center gap-1.5">
+                            <AlertTriangle className="h-4 w-4 text-red-500" />
                             {incident.category || "Unknown Incident"}
-                      </h3>
+                        </h3>
                         {getStatusBadge(incident.status)}
-                  </div>
+                    </div>
 
                     {incident.description && (
-                      <div className="mb-3 bg-slate-50 dark:bg-slate-900/40 p-3 rounded-lg">
-                          <p className="text-sm">
-                              <FileText className="inline-block h-3.5 w-3.5 mr-1.5 align-text-top text-slate-500" />
+                        <div className="mb-3 bg-slate-50 dark:bg-slate-900/40 p-3 rounded-lg">
+                            <p className="text-sm">
+                                <FileText className="inline-block h-3.5 w-3.5 mr-1.5 align-text-top text-slate-500" />
                                 {incident.description}
-                          </p>
-                      </div>
-                  )}
+                            </p>
+                        </div>
+                    )}
 
-                  <Separator className="my-3" />
+                    <Separator className="my-3" />
 
-                  {/* Improved section headers */}
-                  <div className="grid grid-cols-2 gap-2 text-sm">
+                    {/* Improved section headers */}
+                    <div className="grid grid-cols-2 gap-2 text-sm">
                         {incident.district && (
-                          <div className="col-span-2">
-                              <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">District</p>
-                              <p className="flex items-center">
-                                  <Bookmark className="inline-block h-3.5 w-3.5 mr-1.5 shrink-0 text-purple-500" />
+                            <div className="col-span-2">
+                                <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">District</p>
+                                <p className="flex items-center">
+                                    <Bookmark className="inline-block h-3.5 w-3.5 mr-1.5 shrink-0 text-purple-500" />
                                     <span className="font-medium">{incident.district}</span>
-                              </p>
-                          </div>
-                      )}
+                                </p>
+                            </div>
+                        )}
 
                         {incident.address && (
-                          <div className="col-span-2">
-                              <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Location</p>
-                              <p className="flex items-center">
-                                  <MapPin className="inline-block h-3.5 w-3.5 mr-1.5 shrink-0 text-red-500" />
+                            <div className="col-span-2">
+                                <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Location</p>
+                                <p className="flex items-center">
+                                    <MapPin className="inline-block h-3.5 w-3.5 mr-1.5 shrink-0 text-red-500" />
                                     <span className="font-medium">{incident.address}</span>
-                              </p>
-                          </div>
-                      )}
+                                </p>
+                            </div>
+                        )}
 
                         {incident.timestamp && (
-                          <>
-                              <div>
-                                  <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Date</p>
-                                  <p className="flex items-center">
-                                      <Calendar className="inline-block h-3.5 w-3.5 mr-1.5 shrink-0 text-blue-500" />
+                            <>
+                                <div>
+                                    <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Date</p>
+                                    <p className="flex items-center">
+                                        <Calendar className="inline-block h-3.5 w-3.5 mr-1.5 shrink-0 text-blue-500" />
                                         <span className="font-medium">{formatDate(incident.timestamp)}</span>
-                                  </p>
-                              </div>
-                              <div>
-                                  <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Time</p>
-                                  <p className="flex items-center">
-                                      <Clock className="inline-block h-3.5 w-3.5 mr-1.5 shrink-0 text-amber-500" />
+                                    </p>
+                                </div>
+                                <div>
+                                    <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Time</p>
+                                    <p className="flex items-center">
+                                        <Clock className="inline-block h-3.5 w-3.5 mr-1.5 shrink-0 text-amber-500" />
                                         <span className="font-medium">{formatTime(incident.timestamp)}</span>
-                                  </p>
-                              </div>
-                          </>
-                      )}
+                                    </p>
+                                </div>
+                            </>
+                        )}
 
                         {incident.type_category && (
-                          <div className="col-span-2">
-                              <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Type</p>
-                              <p className="flex items-center">
-                                  <Tag className="inline-block h-3.5 w-3.5 mr-1.5 shrink-0 text-green-500" />
+                            <div className="col-span-2">
+                                <p className="text-xs font-medium text-slate-500 dark:text-slate-400 mb-1">Type</p>
+                                <p className="flex items-center">
+                                    <Tag className="inline-block h-3.5 w-3.5 mr-1.5 shrink-0 text-green-500" />
                                     <span className="font-medium">{incident.type_category}</span>
-                              </p>
-                          </div>
-                      )}
-                  </div>
+                                </p>
+                            </div>
+                        )}
+                    </div>
 
-                  <div className="mt-3 pt-3 border-t border-border">
-                      <p className="text-xs text-muted-foreground flex items-center">
-                          <Navigation className="inline-block h-3 w-3 mr-1 shrink-0" />
-                          Coordinates: {latitude.toFixed(6)}, {longitude.toFixed(6)}
-                      </p>
+                    <div className="mt-3 pt-3 border-t border-border">
+                        <p className="text-xs text-muted-foreground flex items-center">
+                            <Navigation className="inline-block h-3 w-3 mr-1 shrink-0" />
+                            Coordinates: {latitude.toFixed(6)}, {longitude.toFixed(6)}
+                        </p>
                         <p className="text-xs text-muted-foreground mt-1">ID: {incident.id}</p>
-                  </div>
-              </div>
-          </Card>
-      </Popup>
-  )
+                    </div>
+                </div>
+            </Card>
+        </Popup>
+    )
 }