diyoanggara
/
MIF_E31221222
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: replace SmoothYearTimeline with CrimeTimelapse component and enhance timeline functionality

This commit is contained in:
vergiLgood1 2025-05-03 23:51:26 +07:00
parent e488bad7c1
commit 4623fac52b
3 changed files with 251 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
sigap-website/app/_components/map/controls/year-timeline.tsx → sigap-website/app/_components/map/controls/crime-timelapse.tsx
View File

@ -1,27 +1,31 @@
import { useState, useEffect, useRef } from "react"
import { useState, useEffect, useRef, useCallback } from "react"
import { Pause, Play } from "lucide-react"
import { Button } from "@/app/_components/ui/button"
import { cn } from "@/app/_lib/utils"
import { Slider } from "@/app/_components/ui/slider"
import { getMonthName } from "@/app/_utils/common"
interface SmoothYearTimelineProps {
interface CrimeTimelapseProps {
startYear: number
endYear: number
onChange?: (year: number, month: number, progress: number) => void
onPlayingChange?: (isPlaying: boolean) => void
className?: string
autoPlay?: boolean
autoPlaySpeed?: number // Time to progress through one month in ms
enablePerformanceMode?: boolean // Flag untuk mode performa
}
export function SmoothYearTimeline({
export function CrimeTimelapse({
startYear = 2020,
endYear = 2024,
onChange,
onPlayingChange,
className,
autoPlay = true,
autoPlaySpeed = 1000, // Speed of month progress
}: SmoothYearTimelineProps) {
enablePerformanceMode = true, // Default aktifkan mode performa tinggi
}: CrimeTimelapseProps) {
const [currentYear, setCurrentYear] = useState<number>(startYear)
const [currentMonth, setCurrentMonth] = useState<number>(1) // Start at January (1)
const [progress, setProgress] = useState<number>(0) // Progress within the current month
@ -29,18 +33,23 @@ export function SmoothYearTimeline({
const [isDragging, setIsDragging] = useState<boolean>(false)
const animationRef = useRef<number | null>(null)
const lastUpdateTimeRef = useRef<number>(0)
const frameSkipCountRef = useRef<number>(0) // Untuk pelompatan frame
// Calculate total months from start to end year
const totalMonths = ((endYear - startYear) * 12) + 12 // +12 to include all months of end year
// Jumlah frame yang akan dilewati saat performance mode aktif
const frameSkipThreshold = enablePerformanceMode ? 3 : 0
const calculateOverallProgress = (): number => {
// Hitung total bulan dari awal hingga akhir tahun (memoisasi)
const totalMonths = useRef(((endYear - startYear) * 12) + 12) // +12 untuk memasukkan semua bulan tahun akhir
// Menggunakan useCallback untuk fungsi yang sering dipanggil
const calculateOverallProgress = useCallback((): number => {
const yearDiff = currentYear - startYear
const monthProgress = (yearDiff * 12) + (currentMonth - 1)
return ((monthProgress + progress) / (totalMonths - 1)) * 100
}
return ((monthProgress + progress) / (totalMonths.current - 1)) * 100
}, [currentYear, currentMonth, progress, startYear, totalMonths])
const calculateTimeFromProgress = (overallProgress: number): { year: number; month: number; progress: number } => {
const totalProgress = (overallProgress * (totalMonths - 1)) / 100
const calculateTimeFromProgress = useCallback((overallProgress: number): { year: number; month: number; progress: number } => {
const totalProgress = (overallProgress * (totalMonths.current - 1)) / 100
const monthsFromStart = Math.floor(totalProgress)
const year = startYear + Math.floor(monthsFromStart / 12)
@ -52,20 +61,26 @@ export function SmoothYearTimeline({
month: Math.min(month, 12),
progress: monthProgress
}
}
}, [startYear, endYear, totalMonths])
// Calculate the current position for the active marker
const calculateMarkerPosition = (): string => {
const overallProgress = calculateOverallProgress()
return `${overallProgress}%`
}
const calculateMarkerPosition = useCallback((): string => {
return `${calculateOverallProgress()}%`
}, [calculateOverallProgress])
const animate = (timestamp: number) => {
// Optimasi animasi dengan throttling berbasis requestAnimationFrame
const animate = useCallback((timestamp: number) => {
if (!lastUpdateTimeRef.current) {
lastUpdateTimeRef.current = timestamp
}
if (!isDragging) {
// Performance optimization: skip frames in performance mode
frameSkipCountRef.current++
if (frameSkipCountRef.current > frameSkipThreshold || !enablePerformanceMode) {
frameSkipCountRef.current = 0
const elapsed = timestamp - lastUpdateTimeRef.current
const progressIncrement = elapsed / autoPlaySpeed
@ -92,21 +107,26 @@ export function SmoothYearTimeline({
}
setProgress(newProgress)
// Notify parent component only after calculating all changes
if (onChange) {
onChange(newYear, newMonth, newProgress)
}
lastUpdateTimeRef.current = timestamp
}
}
if (isPlaying) {
animationRef.current = requestAnimationFrame(animate)
}
}
}, [isPlaying, isDragging, progress, currentMonth, currentYear, onChange,
autoPlaySpeed, startYear, endYear, enablePerformanceMode, frameSkipThreshold])
useEffect(() => {
if (isPlaying) {
lastUpdateTimeRef.current = 0
frameSkipCountRef.current = 0
animationRef.current = requestAnimationFrame(animate)
} else if (animationRef.current) {
cancelAnimationFrame(animationRef.current)
@ -117,13 +137,21 @@ export function SmoothYearTimeline({
cancelAnimationFrame(animationRef.current)
}
}
}, [isPlaying, currentYear, currentMonth, progress, isDragging])
}, [isPlaying, animate])
const handlePlayPause = () => {
setIsPlaying(!isPlaying)
// Memoized handler for play/pause
const handlePlayPause = useCallback(() => {
setIsPlaying(prevState => {
const newPlayingState = !prevState
if (onPlayingChange) {
onPlayingChange(newPlayingState)
}
return newPlayingState
})
}, [onPlayingChange])
const handleSliderChange = (value: number[]) => {
// Memoized handler for slider change
const handleSliderChange = useCallback((value: number[]) => {
const overallProgress = value[0]
const { year, month, progress } = calculateTimeFromProgress(overallProgress)
@ -134,31 +162,46 @@ export function SmoothYearTimeline({
if (onChange) {
onChange(year, month, progress)
}
}
}, [calculateTimeFromProgress, onChange])
const handleSliderDragStart = () => {
const handleSliderDragStart = useCallback(() => {
setIsDragging(true)
if (onPlayingChange) {
onPlayingChange(true) // Treat dragging as a form of "playing" for performance optimization
}
}, [onPlayingChange])
const handleSliderDragEnd = () => {
const handleSliderDragEnd = useCallback(() => {
setIsDragging(false)
if (onPlayingChange) {
onPlayingChange(isPlaying) // Restore to actual playing state
}
}, [isPlaying, onPlayingChange])
// Create year markers
const yearMarkers = []
// Komputasi tahun marker dilakukan sekali saja dan di-cache
const yearMarkers = useRef<number[]>([])
useEffect(() => {
const markers = []
for (let year = startYear; year <= endYear; year++) {
yearMarkers.push(year)
markers.push(year)
}
yearMarkers.current = markers
}, [startYear, endYear])
// Gunakan React.memo untuk komponen child jika diperlukan
// Contoh: const YearMarker = React.memo(({ year, isActive }) => { ... })
return (
<div className={cn("w-full bg-transparent text-emerald-500", className)}>
<div className="relative">
{/* Current month/year marker that moves with the slider */}
<div
className="absolute bottom-full mb-2 transform -translate-x-1/2 bg-emerald-500 text-background px-3 py-1 rounded-full text-xs font-bold z-20"
className={cn(
"absolute bottom-full mb-2 transform -translate-x-1/2 px-3 py-1 rounded-full text-xs font-bold z-20 transition-colors duration-300 bg-emerald-500 text-background",
)}
style={{ left: calculateMarkerPosition() }}
>
{getMonthName(currentMonth)} {currentYear}
{isPlaying}{getMonthName(currentMonth)} {currentYear}
</div>
{/* Wrap button and slider in their container */}
@ -168,7 +211,9 @@ export function SmoothYearTimeline({
variant="ghost"
size="icon"
onClick={handlePlayPause}
className="text-background bg-emerald-500 rounded-full hover:text-background hover:bg-emerald-500/50 h-10 w-10 z-10"
className={cn(
"text-background rounded-full hover:text-background h-10 w-10 z-10 transition-colors duration-300 bg-emerald-500 hover:bg-emerald-500/50",
)}
>
{isPlaying ? <Pause className="h-5 w-5" /> : <Play className="h-5 w-5" />}
</Button>
@ -189,12 +234,12 @@ export function SmoothYearTimeline({
{/* Year markers */}
<div className="flex items-center relative h-10">
<div className="absolute inset-0 h-full flex">
{yearMarkers.map((year, index) => (
{yearMarkers.current.map((year, index) => (
<div
key={year}
className={cn(
"flex-1 h-full flex items-center justify-center relative",
index < yearMarkers.length - 1 && ""
index < yearMarkers.current.length - 1 && ""
)}
>
<div

20
sigap-website/app/_components/map/crime-map.tsx
View File

@ -20,7 +20,7 @@ import SidebarToggle from "./sidebar/sidebar-toggle"
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 { SmoothYearTimeline } from "./controls/year-timeline"
import { CrimeTimelapse } from "./controls/crime-timelapse"
// Updated CrimeIncident type to match the structure in crime_incidents
interface CrimeIncident {
@ -46,6 +46,7 @@ export default function CrimeMap() {
const [selectedMonth, setSelectedMonth] = useState<number | "all">("all")
const [activeControl, setActiveControl] = useState<ITopTooltipsMapId>("incidents")
const [yearProgress, setYearProgress] = useState(0)
const [isTimelapsePlaying, setisTimelapsePlaying] = useState(false)
const mapContainerRef = useRef<HTMLDivElement>(null)
@ -183,6 +184,17 @@ export default function CrimeMap() {
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)
@ -248,6 +260,7 @@ export default function CrimeMap() {
year={selectedYear.toString()}
month={selectedMonth.toString()}
filterCategory={selectedCategory}
isTimelapsePlaying={isTimelapsePlaying}
/>
{/* Pass onClick if you want to handle districts externally */}
@ -264,7 +277,6 @@ export default function CrimeMap() {
{/* Popup for selected incident */}
{selectedIncident && selectedIncident.latitude && selectedIncident.longitude && (
<>
{/* {console.log("About to render CrimePopup with:", selectedIncident)} */}
<CrimePopup
longitude={selectedIncident.longitude}
latitude={selectedIncident.latitude}
@ -310,12 +322,12 @@ export default function CrimeMap() {
{isFullscreen && (
<div className="absolute flex w-full bottom-0">
<SmoothYearTimeline
<CrimeTimelapse
startYear={2020}
endYear={2024}
autoPlay={false}
autoPlaySpeed={1000}
onChange={handleTimelineChange}
onPlayingChange={handleTimelinePlayingChange}
/>
</div>
)}

98
sigap-website/app/_components/map/layers/district-layer.tsx
View File

@ -54,6 +54,7 @@ export interface DistrictLayerProps {
filterCategory: string | "all"
crimes: ICrimes[]
tilesetId?: string
isTimelapsePlaying?: boolean // Add new prop to track timeline playing state
}
export default function DistrictLayer({
@ -64,6 +65,7 @@ export default function DistrictLayer({
filterCategory = "all",
crimes = [],
tilesetId = MAPBOX_TILESET_ID,
isTimelapsePlaying = false, // Default to false
}: DistrictLayerProps) {
const { current: map } = useMap()
@ -883,6 +885,37 @@ export default function DistrictLayer({
if (!map || !map.getMap().getSource("crime-incidents")) return
try {
// If timeline is playing, hide all point/cluster layers to improve performance
if (isTimelapsePlaying) {
// Hide all incident points during timelapse
if (map.getMap().getLayer("clusters")) {
map.getMap().setLayoutProperty("clusters", "visibility", "none")
}
if (map.getMap().getLayer("unclustered-point")) {
map.getMap().setLayoutProperty("unclustered-point", "visibility", "none")
}
if (map.getMap().getLayer("cluster-count")) {
map.getMap().setLayoutProperty("cluster-count", "visibility", "none")
}
// Update the source with empty data to free up resources
; (map.getMap().getSource("crime-incidents") as mapboxgl.GeoJSONSource).setData({
type: "FeatureCollection",
features: [],
})
} else {
// When not playing, show all layers again
if (map.getMap().getLayer("clusters")) {
map.getMap().setLayoutProperty("clusters", "visibility", "visible")
}
if (map.getMap().getLayer("unclustered-point")) {
map.getMap().setLayoutProperty("unclustered-point", "visibility", "visible")
}
if (map.getMap().getLayer("cluster-count")) {
map.getMap().setLayoutProperty("cluster-count", "visibility", "visible")
}
// Restore detailed incidents when timelapse stops
const allIncidents = crimes.flatMap((crime) => {
if (!crime.crime_incidents) return []
@ -919,14 +952,76 @@ export default function DistrictLayer({
})
.filter(Boolean)
})
// Update the source with detailed data
; (map.getMap().getSource("crime-incidents") as mapboxgl.GeoJSONSource).setData({
type: "FeatureCollection",
features: allIncidents as GeoJSON.Feature[],
})
}
} catch (error) {
console.error("Error updating incident data:", error)
}
}, [map, crimes, filterCategory])
}, [map, crimes, filterCategory, isTimelapsePlaying])
// Add a new effect to update district colors even during timelapse
useEffect(() => {
if (!map || !map.getMap().getSource("districts")) return
try {
if (map.getMap().getLayer("district-fill")) {
const colorEntries = focusedDistrictId
? [
[
focusedDistrictId,
crimeDataByDistrict[focusedDistrictId]?.level === "low"
? CRIME_RATE_COLORS.low
: crimeDataByDistrict[focusedDistrictId]?.level === "medium"
? CRIME_RATE_COLORS.medium
: crimeDataByDistrict[focusedDistrictId]?.level === "high"
? CRIME_RATE_COLORS.high
: CRIME_RATE_COLORS.default,
],
"rgba(0,0,0,0.05)",
]
: Object.entries(crimeDataByDistrict).flatMap(([districtId, data]) => {
if (!data || !data.level) {
return [districtId, CRIME_RATE_COLORS.default]
}
return [
districtId,
data.level === "low"
? CRIME_RATE_COLORS.low
: data.level === "medium"
? CRIME_RATE_COLORS.medium
: data.level === "high"
? CRIME_RATE_COLORS.high
: CRIME_RATE_COLORS.default,
]
})
const fillColorExpression = [
"case",
["has", "kode_kec"],
[
"match",
["get", "kode_kec"],
...colorEntries,
focusedDistrictId ? "rgba(0,0,0,0.05)" : CRIME_RATE_COLORS.default,
],
CRIME_RATE_COLORS.default,
] as any
// Make district fills more prominent during timelapse
map.getMap().setPaintProperty("district-fill", "fill-color", fillColorExpression)
map.getMap().setPaintProperty("district-fill", "fill-opacity",
isTimelapsePlaying ? 0.85 : 0.6) // Increase opacity during timelapse
}
} catch (error) {
console.error("Error updating district fill:", error)
}
}, [map, crimeDataByDistrict, focusedDistrictId, isTimelapsePlaying])
useEffect(() => {
if (selectedDistrictRef.current) {
@ -1122,3 +1217,4 @@ export default function DistrictLayer({
</>
)
}