372 lines
16 KiB
TypeScript
372 lines
16 KiB
TypeScript
"use client"
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/app/_components/ui/card"
|
|
import { Skeleton } from "@/app/_components/ui/skeleton"
|
|
import DistrictLayer, { type DistrictFeature } from "./layers/district-layer-old"
|
|
import MapView from "./map"
|
|
import { Button } from "@/app/_components/ui/button"
|
|
import { AlertCircle } from "lucide-react"
|
|
import { getMonthName } from "@/app/_utils/common"
|
|
import { useRef, useState, useCallback, useMemo, useEffect } from "react"
|
|
import { useFullscreen } from "@/app/_hooks/use-fullscreen"
|
|
import { Overlay } from "./overlay"
|
|
import MapLegend from "./legends/map-legend"
|
|
import { useGetAvailableYears, useGetCrimeCategories, useGetCrimes } from "@/app/(pages)/(admin)/dashboard/crime-management/crime-overview/_queries/queries"
|
|
import MapSelectors from "./controls/map-selector"
|
|
|
|
import { cn } from "@/app/_lib/utils"
|
|
import CrimePopup from "./pop-up/crime-popup"
|
|
import { $Enums, crime_categories, crime_incidents, crimes, demographics, districts, geographics, locations } from "@prisma/client"
|
|
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"
|
|
|
|
// Updated CrimeIncident type to match the structure in crime_incidents
|
|
interface CrimeIncident {
|
|
id: string
|
|
timestamp: Date
|
|
description: string
|
|
status: string
|
|
category?: string
|
|
type?: string
|
|
address?: string
|
|
latitude?: number
|
|
longitude?: number
|
|
}
|
|
|
|
export default function CrimeMap() {
|
|
// State for sidebar
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
|
|
const [selectedDistrict, setSelectedDistrict] = useState<DistrictFeature | null>(null)
|
|
const [selectedIncident, setSelectedIncident] = useState<CrimeIncident | null>(null)
|
|
const [showLegend, setShowLegend] = useState<boolean>(true)
|
|
const [selectedCategory, setSelectedCategory] = useState<string | "all">("all")
|
|
const [selectedYear, setSelectedYear] = useState<number>(2024)
|
|
const [selectedMonth, setSelectedMonth] = useState<number | "all">("all")
|
|
const [activeControl, setActiveControl] = useState<ITooltips>("incidents")
|
|
const [yearProgress, setYearProgress] = useState(0)
|
|
const [isTimelapsePlaying, setisTimelapsePlaying] = useState(false)
|
|
const [isSearchActive, setIsSearchActive] = useState(false)
|
|
|
|
const mapContainerRef = useRef<HTMLDivElement>(null)
|
|
|
|
// Use the custom fullscreen hook
|
|
const { isFullscreen } = useFullscreen(mapContainerRef)
|
|
|
|
// Get available years
|
|
const {
|
|
data: availableYears,
|
|
isLoading: isYearsLoading,
|
|
error: yearsError
|
|
} = useGetAvailableYears()
|
|
|
|
// Extract all unique categories
|
|
const { data: categoriesData, isLoading: isCategoryLoading } = useGetCrimeCategories()
|
|
|
|
// Transform categories data to string array
|
|
const categories = useMemo(() =>
|
|
categoriesData ? categoriesData.map(category => category.name) : []
|
|
, [categoriesData])
|
|
|
|
// Get all crime data in a single request
|
|
const {
|
|
data: crimes,
|
|
isLoading: isCrimesLoading,
|
|
error: crimesError
|
|
} = useGetCrimes()
|
|
|
|
// Filter crimes based on selected year and month
|
|
const filteredByYearAndMonth = useMemo(() => {
|
|
if (!crimes) return []
|
|
|
|
return crimes.filter((crime) => {
|
|
const yearMatch = crime.year === selectedYear
|
|
|
|
if (selectedMonth === "all") {
|
|
return yearMatch
|
|
} else {
|
|
return yearMatch && crime.month === selectedMonth
|
|
}
|
|
})
|
|
}, [crimes, selectedYear, selectedMonth])
|
|
|
|
// Filter incidents based on selected category
|
|
const filteredCrimes = useMemo(() => {
|
|
if (!filteredByYearAndMonth) return []
|
|
if (selectedCategory === "all") return filteredByYearAndMonth
|
|
|
|
return filteredByYearAndMonth.map((crime) => {
|
|
const filteredIncidents = crime.crime_incidents.filter(
|
|
incident => incident.crime_categories.name === selectedCategory
|
|
)
|
|
|
|
return {
|
|
...crime,
|
|
crime_incidents: filteredIncidents,
|
|
number_of_crime: filteredIncidents.length
|
|
}
|
|
})
|
|
}, [filteredByYearAndMonth, selectedCategory])
|
|
|
|
// Set up event listener for incident clicks from the district layer
|
|
useEffect(() => {
|
|
const handleIncidentClickEvent = (e: CustomEvent) => {
|
|
console.log("Received incident_click event:", e.detail);
|
|
if (e.detail) {
|
|
if (!e.detail.longitude || !e.detail.latitude) {
|
|
console.error("Invalid incident coordinates in event:", e.detail);
|
|
return;
|
|
}
|
|
|
|
// When an incident is clicked, clear any selected district
|
|
setSelectedDistrict(null);
|
|
|
|
// Set the selected incident
|
|
setSelectedIncident(e.detail);
|
|
}
|
|
}
|
|
|
|
// Add event listener to the map container and document
|
|
const mapContainer = mapContainerRef.current
|
|
|
|
// Clean up previous listeners to prevent duplicates
|
|
document.removeEventListener('incident_click', handleIncidentClickEvent as EventListener);
|
|
if (mapContainer) {
|
|
mapContainer.removeEventListener('incident_click', handleIncidentClickEvent as EventListener);
|
|
}
|
|
|
|
// Listen on both the container and document to ensure we catch the event
|
|
document.addEventListener('incident_click', handleIncidentClickEvent as EventListener);
|
|
|
|
if (mapContainer) {
|
|
mapContainer.addEventListener('incident_click', handleIncidentClickEvent as EventListener);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('incident_click', handleIncidentClickEvent as EventListener);
|
|
|
|
if (mapContainer) {
|
|
mapContainer.removeEventListener('incident_click', handleIncidentClickEvent as EventListener);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
// Set up event listener for fly-to-incident events from search
|
|
useEffect(() => {
|
|
const handleFlyToIncident = (e: CustomEvent) => {
|
|
if (!e.detail || !e.detail.longitude || !e.detail.latitude) {
|
|
console.error("Invalid fly-to coordinates:", e.detail);
|
|
return;
|
|
}
|
|
|
|
// Handle the fly-to event by dispatching to the map
|
|
const mapInstance = mapContainerRef.current?.querySelector('.mapboxgl-map');
|
|
if (mapInstance) {
|
|
// Clear any existing selections first
|
|
setSelectedIncident(null);
|
|
setSelectedDistrict(null);
|
|
|
|
// Create an incident object to highlight
|
|
const incidentToHighlight: CrimeIncident = {
|
|
id: e.detail.id as string,
|
|
latitude: e.detail.latitude as number,
|
|
longitude: e.detail.longitude as number,
|
|
timestamp: new Date(),
|
|
description: e.detail.description || "",
|
|
status: e.detail.status
|
|
};
|
|
|
|
// First fly to the location
|
|
const flyEvent = new CustomEvent('mapbox_fly_to', {
|
|
detail: {
|
|
longitude: e.detail.longitude,
|
|
latitude: e.detail.latitude,
|
|
zoom: e.detail.zoom || 15,
|
|
bearing: 0,
|
|
pitch: 45,
|
|
duration: 2000,
|
|
},
|
|
bubbles: true
|
|
});
|
|
|
|
mapInstance.dispatchEvent(flyEvent);
|
|
|
|
// After flying, select the incident with a slight delay
|
|
setTimeout(() => {
|
|
setSelectedIncident(incidentToHighlight);
|
|
}, 2000);
|
|
}
|
|
}
|
|
|
|
// Add event listener
|
|
document.addEventListener('fly_to_incident', handleFlyToIncident as EventListener);
|
|
|
|
return () => {
|
|
document.removeEventListener('fly_to_incident', handleFlyToIncident as EventListener);
|
|
}
|
|
}, []);
|
|
|
|
// Handle year-month timeline change
|
|
const handleTimelineChange = useCallback((year: number, month: number, progress: number) => {
|
|
setSelectedYear(year)
|
|
setSelectedMonth(month)
|
|
setYearProgress(progress)
|
|
}, [])
|
|
|
|
// Handle timeline playing state change
|
|
const handleTimelinePlayingChange = useCallback((playing: boolean) => {
|
|
setisTimelapsePlaying(playing)
|
|
|
|
// When timelapse starts, close any open popups/details
|
|
if (playing) {
|
|
setSelectedIncident(null)
|
|
setSelectedDistrict(null)
|
|
}
|
|
}, [])
|
|
|
|
// Reset filters
|
|
const resetFilters = useCallback(() => {
|
|
setSelectedYear(2024)
|
|
setSelectedMonth("all")
|
|
setSelectedCategory("all")
|
|
}, [])
|
|
|
|
// Determine the title based on filters
|
|
const getMapTitle = () => {
|
|
let title = `${selectedYear}`
|
|
if (selectedMonth !== "all") {
|
|
title += ` - ${getMonthName(Number(selectedMonth))}`
|
|
}
|
|
if (selectedCategory !== "all") {
|
|
title += ` - ${selectedCategory}`
|
|
}
|
|
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)
|
|
|
|
// Toggle search state when search control is clicked
|
|
if (controlId === "search") {
|
|
setIsSearchActive(prev => !prev)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className="w-full p-0 border-none shadow-none h-96">
|
|
<CardHeader className="flex flex-row pb-2 pt-0 px-0 items-center justify-between">
|
|
<CardTitle>Crime Map {getMapTitle()}</CardTitle>
|
|
<MapSelectors
|
|
availableYears={availableYears || []}
|
|
selectedYear={selectedYear}
|
|
setSelectedYear={setSelectedYear}
|
|
selectedMonth={selectedMonth}
|
|
setSelectedMonth={setSelectedMonth}
|
|
selectedCategory={selectedCategory}
|
|
setSelectedCategory={setSelectedCategory}
|
|
categories={categories}
|
|
isYearsLoading={isYearsLoading}
|
|
isCategoryLoading={isCategoryLoading}
|
|
/>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
{isCrimesLoading ? (
|
|
<div className="flex items-center justify-center h-96">
|
|
<Skeleton className="h-full w-full rounded-md" />
|
|
</div>
|
|
) : crimesError ? (
|
|
<div className="flex flex-col items-center justify-center h-96 gap-4">
|
|
<AlertCircle className="h-10 w-10 text-destructive" />
|
|
<p className="text-center">Failed to load crime data. Please try again later.</p>
|
|
<Button onClick={() => window.location.reload()}>Retry</Button>
|
|
</div>
|
|
) : (
|
|
<div className="relative h-[600px]" ref={mapContainerRef}>
|
|
<div className={cn(
|
|
"transition-all duration-300 ease-in-out",
|
|
!sidebarCollapsed && isFullscreen && "ml-[400px]"
|
|
)}>
|
|
<MapView mapStyle="mapbox://styles/mapbox/dark-v11" className="h-[600px] w-full rounded-md">
|
|
{/* District Layer with crime data - don't pass onClick if we want internal popup */}
|
|
<DistrictLayer
|
|
crimes={filteredCrimes || []}
|
|
year={selectedYear.toString()}
|
|
month={selectedMonth.toString()}
|
|
filterCategory={selectedCategory}
|
|
|
|
/>
|
|
|
|
{/* Popup for selected incident */}
|
|
{selectedIncident && selectedIncident.latitude && selectedIncident.longitude && (
|
|
<>
|
|
<CrimePopup
|
|
longitude={selectedIncident.longitude}
|
|
latitude={selectedIncident.latitude}
|
|
onClose={() => setSelectedIncident(null)}
|
|
crime={selectedIncident}
|
|
/>
|
|
|
|
</>
|
|
)}
|
|
|
|
{/* Components that are only visible in fullscreen mode */}
|
|
{isFullscreen && (
|
|
<>
|
|
<div className="absolute flex w-full p-2">
|
|
<Tooltips
|
|
activeControl={activeControl}
|
|
onControlChange={handleControlChange}
|
|
selectedYear={selectedYear}
|
|
setSelectedYear={setSelectedYear}
|
|
selectedMonth={selectedMonth}
|
|
setSelectedMonth={setSelectedMonth}
|
|
selectedCategory={selectedCategory}
|
|
setSelectedCategory={setSelectedCategory}
|
|
availableYears={availableYears || []}
|
|
categories={categories}
|
|
crimes={filteredCrimes}
|
|
/>
|
|
</div>
|
|
|
|
{/* Pass selectedCategory, selectedYear, and selectedMonth to the sidebar */}
|
|
<CrimeSidebar
|
|
crimes={filteredCrimes || []}
|
|
defaultCollapsed={sidebarCollapsed}
|
|
selectedCategory={selectedCategory}
|
|
selectedYear={selectedYear}
|
|
selectedMonth={selectedMonth}
|
|
/>
|
|
<div className="absolute bottom-20 right-0 z-10 p-2">
|
|
<MapLegend position="bottom-right" />
|
|
</div>
|
|
|
|
</>
|
|
)}
|
|
|
|
{isFullscreen && (
|
|
<div className="absolute flex w-full bottom-0">
|
|
<CrimeTimelapse
|
|
startYear={2020}
|
|
endYear={2024}
|
|
autoPlay={false}
|
|
onChange={handleTimelineChange}
|
|
onPlayingChange={handleTimelinePlayingChange}
|
|
/>
|
|
</div>
|
|
)}
|
|
</MapView>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|