Refactor tooltip and control types for improved clarity and consistency

- Renamed ITooltips to ITooltipsControl for better context in map controls.
- Updated type references in search-control, tooltips, crime-map, and layers to use the new ITooltipsControl type.
- Enhanced fill opacity logic in map layers based on active control state.
- Introduced getFillOpacity utility function to centralize opacity determination based on active control.
- Adjusted event handling for district clicks to ensure proper focus and visibility toggling.
- Cleaned up CSS styles by commenting out unused styles for circles.

sigap-website/app/_components/map/controls/top/additional-tooltips.tsx

@@ -7,7 +7,7 @@ import { ChevronDown, Siren } from "lucide-react"
 import { IconMessage } from "@tabler/icons-react"
 
 import { useEffect, useRef, useState } from "react"
-import type { ITooltips } from "./tooltips"
+import type { ITooltipsControl } from "./tooltips"
 import MonthSelector from "../month-selector"
 import YearSelector from "../year-selector"
 import CategorySelector from "../category-selector"
@@ -15,13 +15,13 @@ import SourceTypeSelector from "../source-type-selector"
 
 // Define the additional tools and features
 const additionalTooltips = [
-    { id: "reports" as ITooltips, icon: <IconMessage size={20} />, label: "Police Report" },
+    { id: "reports" as ITooltipsControl, icon: <IconMessage size={20} />, label: "Police Report" },
-    { id: "recents" as ITooltips, icon: <Siren size={20} />, label: "Recent incidents" },
+    { id: "recents" as ITooltipsControl, icon: <Siren size={20} />, label: "Recent incidents" },
 ]
 
 interface AdditionalTooltipsProps {
     activeControl?: string
-    onControlChange?: (controlId: ITooltips) => void
+    onControlChange?: (controlId: ITooltipsControl) => void
     selectedYear: number
     setSelectedYear: (year: number) => void
     selectedMonth: number | "all"
@@ -68,7 +68,7 @@ export default function AdditionalTooltips({
       setIsClient(true)
   }, [])
 
-    const isControlDisabled = (controlId: ITooltips) => {
+    const isControlDisabled = (controlId: ITooltipsControl) => {
         // When source type is CBU, disable all controls except for layers
         return selectedSourceType === "cbu" && controlId !== "layers"
     }

sigap-website/app/_components/map/controls/top/crime-tooltips.tsx

@@ -3,27 +3,27 @@
 import { Button } from "@/app/_components/ui/button"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/app/_components/ui/tooltip"
 import { AlertTriangle, Building, Car, Thermometer, History } from "lucide-react"
-import type { ITooltips } from "./tooltips"
+import type { ITooltipsControl } from "./tooltips"
 import { IconChartBubble, IconClock } from "@tabler/icons-react"
 
 // Define the primary crime data controls
 const crimeTooltips = [
-    // { id: "incidents" as ITooltips, icon: <AlertTriangle size={20} />, label: "All Incidents" },
+    // { id: "incidents" as ITooltipsControl, icon: <AlertTriangle size={20} />, label: "All Incidents" },
-    { id: "heatmap" as ITooltips, icon: <Thermometer size={20} />, label: "Density Heatmap" },
+    { id: "heatmap" as ITooltipsControl, icon: <Thermometer size={20} />, label: "Density Heatmap" },
-    { id: "units" as ITooltips, icon: <Building size={20} />, label: "Police Units" },
+    { id: "units" as ITooltipsControl, icon: <Building size={20} />, label: "Police Units" },
-    { id: "clusters" as ITooltips, icon: <IconChartBubble size={20} />, label: "Clustered Incidents" },
+    { id: "clusters" as ITooltipsControl, icon: <IconChartBubble size={20} />, label: "Clustered Incidents" },
-    { id: "patrol" as ITooltips, icon: <Car size={20} />, label: "Patrol Areas" },
+    { id: "patrol" as ITooltipsControl, icon: <Car size={20} />, label: "Patrol Areas" },
-    { id: "timeline" as ITooltips, icon: <IconClock size={20} />, label: "Time Analysis" },
+    { id: "timeline" as ITooltipsControl, icon: <IconClock size={20} />, label: "Time Analysis" },
 ]
 
 interface CrimeTooltipsProps {
     activeControl?: string
-    onControlChange?: (controlId: ITooltips) => void
+    onControlChange?: (controlId: ITooltipsControl) => void
     sourceType?: string
 }
 
 export default function CrimeTooltips({ activeControl, onControlChange, sourceType = "cbt" }: CrimeTooltipsProps) {
-    const handleControlClick = (controlId: ITooltips) => {
+    const handleControlClick = (controlId: ITooltipsControl) => {
       // If control is disabled, don't do anything
       if (isDisabled(controlId)) {
           return
@@ -37,7 +37,7 @@ export default function CrimeTooltips({ activeControl, onControlChange, sourceTy
     }
 
     // Determine which controls should be disabled based on source type
-    const isDisabled = (controlId: ITooltips) => {
+    const isDisabled = (controlId: ITooltipsControl) => {
         return sourceType === "cbu" && controlId !== "clusters"
     }
 

sigap-website/app/_components/map/controls/top/search-control.tsx

@@ -20,7 +20,7 @@ import { AnimatePresence, motion } from "framer-motion"
 import ActionSearchBar from "@/app/_components/action-search-bar"
 import { Card } from "@/app/_components/ui/card"
 import { format } from "date-fns"
-import type { ITooltips } from "./tooltips"
+import type { ITooltipsControl } from "./tooltips"
 
 // Define types based on the crime data structure
 interface ICrimeIncident {
@@ -95,7 +95,7 @@ const ACTIONS = [
 ]
 
 interface SearchTooltipProps {
-    onControlChange?: (controlId: ITooltips) => void
+    onControlChange?: (controlId: ITooltipsControl) => void
     activeControl?: string
     crimes?: ICrime[]
     sourceType?: string
@@ -336,7 +336,7 @@ export default function SearchTooltip({
 
       setShowSearch(!showSearch)
       if (!showSearch && onControlChange) {
-          onControlChange("search" as ITooltips)
+          onControlChange("search" as ITooltipsControl)
           setSelectedSearchType(null)
           setSearchValue("")
           setSuggestions([])

sigap-website/app/_components/map/controls/top/tooltips.tsx

@@ -8,7 +8,7 @@ import SearchTooltip from "./search-control"
 import type { ReactNode } from "react"
 
 // Define the possible control IDs for the crime map
-export type ITooltips =
+export type ITooltipsControl =
     // Crime data views
     | "incidents"
     | "historical"
@@ -30,14 +30,14 @@ export type ITooltips =
 
 // Map tools type definition
 export interface IMapTools {
-    id: ITooltips
+    id: ITooltipsControl
     label: string
     icon: ReactNode
     description?: string
 }
 
 interface TooltipProps {
-    onControlChange?: (controlId: ITooltips) => void
+    onControlChange?: (controlId: ITooltipsControl) => void
     activeControl?: string
     selectedSourceType: string
     setSelectedSourceType: (sourceType: string) => void

sigap-website/app/_components/map/crime-map.tsx

@@ -18,7 +18,7 @@ import MapSelectors from "./controls/map-selector"
 import { cn } from "@/app/_lib/utils"
 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 { ITooltipsControl } from "./controls/top/tooltips"
 import CrimeSidebar from "./controls/left/sidebar/map-sidebar"
 import Tooltips from "./controls/top/tooltips"
 import Layers from "./layers/layers"
@@ -29,7 +29,7 @@ export default function CrimeMap() {
     const [sidebarCollapsed, setSidebarCollapsed] = useState(true)
     const [selectedDistrict, setSelectedDistrict] = useState<DistrictFeature | null>(null)
     const [showLegend, setShowLegend] = useState<boolean>(true)
-    const [activeControl, setActiveControl] = useState<ITooltips>("clusters")
+    const [activeControl, setActiveControl] = useState<ITooltipsControl>("clusters")
     const [selectedSourceType, setSelectedSourceType] = useState<string>("cbu")
     const [selectedYear, setSelectedYear] = useState<number>(2024)
     const [selectedMonth, setSelectedMonth] = useState<number | "all">("all")
@@ -190,7 +190,7 @@ export default function CrimeMap() {
         return title;
     }
 
-    const handleControlChange = (controlId: ITooltips) => {
+    const handleControlChange = (controlId: ITooltipsControl) => {
         if (selectedSourceType === "cbu" &&
             !["clusters", "reports", "layers", "search", "alerts"].includes(controlId as string)) {
             return;

sigap-website/app/_components/map/layers/district-extrusion-layer.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { getCrimeRateColor } from "@/app/_utils/map"
+import { getCrimeRateColor, getFillOpacity } from "@/app/_utils/map"
 import type { IExtrusionLayerProps } from "@/app/_utils/types/map"
 import { useEffect, useRef } from "react"
 
@@ -17,26 +17,13 @@ export default function DistrictExtrusionLayer({
     const extrusionCreatedRef = useRef(false)
     const lastFocusedDistrictRef = useRef<string | null>(null)
 
-    // Handle extrusion layer creation and updates
+    // Helper to (re)create the extrusion layer
-    useEffect(() => {
+    const createExtrusionLayer = () => {
-        if (!map || !visible) return
-
-      console.log("DistrictExtrusionLayer effect running, focusedDistrictId:", focusedDistrictId)
-
-      const onStyleLoad = () => {
         if (!map) return
 
-        try {
+        const fillOpacity = getFillOpacity('units', true)
-            const layers = map.getStyle().layers
-            let firstSymbolId: string | undefined
-            for (const layer of layers) {
-                if (layer.type === "symbol") {
-                    firstSymbolId = layer.id
-                    break
-                }
-            }
 
-          // Remove existing layer if it exists to avoid conflicts
+        // Remove existing layer if exists
         if (map.getLayer("district-extrusion")) {
             map.removeLayer("district-extrusion")
             extrusionCreatedRef.current = false
@@ -48,13 +35,23 @@ export default function DistrictExtrusionLayer({
                 console.error("No tileset ID provided for districts source")
                 return
             }
-
             map.addSource("districts", {
                 type: "vector",
                 url: `mapbox://${tilesetId}`,
             })
         }
 
+        // Find first symbol layer for correct layer order
+        const layers = map.getStyle().layers
+        let firstSymbolId: string | undefined
+        for (const layer of layers) {
+            if (layer.type === "symbol") {
+                firstSymbolId = layer.id
+                break
+            }
+        }
+
+
         // Create the extrusion layer
         map.addLayer(
             {
@@ -82,22 +79,32 @@ export default function DistrictExtrusionLayer({
                         0,
                     ],
                     "fill-extrusion-base": 0,
-                      "fill-extrusion-opacity": 0.8,
+                    "fill-extrusion-opacity": fillOpacity,
                 },
                 filter: ["==", ["get", "kode_kec"], focusedDistrictId || ""],
             },
             firstSymbolId,
         )
-
         extrusionCreatedRef.current = true
-          console.log("District extrusion layer created")
+    }
 
-          // If a district is focused, start the animation
+    // Handle extrusion layer creation and updates
+    useEffect(() => {
+        if (!map || !visible) return
+
+        const onStyleLoad = () => {
+            if (!map) return
+            try {
+                createExtrusionLayer()
+                // Start animation if focusedDistrictId ada
                 if (focusedDistrictId) {
-            console.log("Starting animation for district:", focusedDistrictId)
                     lastFocusedDistrictRef.current = focusedDistrictId
+                    // setTimeout(() => {
+                    if (map.getLayer("district-extrusion")) {
                         animateExtrusion()
                     }
+                    // }, 50)
+                }
             } catch (error) {
                 console.error("Error adding district extrusion layer:", error)
             }
@@ -115,20 +122,26 @@ export default function DistrictExtrusionLayer({
                 animationRef.current = null
             }
         }
+        // Tambahkan crimeDataByDistrict ke deps agar update color jika data berubah
     }, [map, visible, tilesetId, focusedDistrictId, crimeDataByDistrict])
 
-    // Update filter and color when focused district changes
+    // Update filter dan color ketika focusedDistrictId berubah
     useEffect(() => {
-        if (!map || !map.getLayer("district-extrusion")) return
+        if (!map) return
 
-      console.log("Updating district extrusion for district:", focusedDistrictId)
+        // Jika layer belum ada, buat dulu
+        if (!map.getLayer("district-extrusion")) {
+            createExtrusionLayer()
+        }
+
+        // Tunggu layer benar-benar ada
+        if (!map.getLayer("district-extrusion")) return
 
         // Skip unnecessary updates if nothing has changed
         if (lastFocusedDistrictRef.current === focusedDistrictId) return
 
-      // If we're unfocusing a district
+        // Jika unfocus
         if (!focusedDistrictId) {
-          // Stop rotation when unfocusing
             if (rotationAnimationRef.current) {
                 cancelAnimationFrame(rotationAnimationRef.current)
                 rotationAnimationRef.current = null
@@ -146,7 +159,7 @@ export default function DistrictExtrusionLayer({
                 const animate = (time: number) => {
                     const elapsed = time - startTime
                     const progress = Math.min(elapsed / duration, 1)
-            const easedProgress = progress * (2 - progress) // easeOutQuad
+                    const easedProgress = progress * (2 - progress)
                     const height = 800 - 800 * easedProgress
 
                     try {
@@ -160,7 +173,6 @@ export default function DistrictExtrusionLayer({
                         if (progress < 1) {
                             animationRef.current = requestAnimationFrame(animate)
                         } else {
-                // Reset when animation completes
                             map.setPaintProperty("district-extrusion", "fill-extrusion-height", [
                                 "case",
                                 ["has", "kode_kec"],
@@ -168,14 +180,10 @@ export default function DistrictExtrusionLayer({
                                 0,
                             ])
                             map.setFilter("district-extrusion", ["==", ["get", "kode_kec"], ""])
-
                             lastFocusedDistrictRef.current = null
-
-                // Ensure bearing is reset
                             map.setBearing(0)
                         }
                     } catch (error) {
-              console.error("Error animating extrusion down:", error)
                         if (animationRef.current) {
                             cancelAnimationFrame(animationRef.current)
                             animationRef.current = null
@@ -194,10 +202,8 @@ export default function DistrictExtrusionLayer({
         }
 
         try {
-      // Update filter for the new district
+            // Update filter dan color
             map.setFilter("district-extrusion", ["==", ["get", "kode_kec"], focusedDistrictId])
-
-        // Update the extrusion color
             map.setPaintProperty("district-extrusion", "fill-extrusion-color", [
                 "case",
                 ["has", "kode_kec"],
@@ -210,8 +216,6 @@ export default function DistrictExtrusionLayer({
                 ],
                 "transparent",
             ])
-
-        // Reset height for animation
             map.setPaintProperty("district-extrusion", "fill-extrusion-height", [
                 "case",
                 ["has", "kode_kec"],
@@ -219,25 +223,22 @@ export default function DistrictExtrusionLayer({
                 0,
             ])
 
-        // Store current focused district
             lastFocusedDistrictRef.current = focusedDistrictId
 
-        // Stop any existing animations and restart
             if (rotationAnimationRef.current) {
                 cancelAnimationFrame(rotationAnimationRef.current)
                 rotationAnimationRef.current = null
             }
-
             if (animationRef.current) {
                 cancelAnimationFrame(animationRef.current)
                 animationRef.current = null
             }
 
-        // Start animation with small delay to ensure smooth transition
             setTimeout(() => {
-          console.log("Starting animation after district update")
+                if (map.getLayer("district-extrusion")) {
                     animateExtrusion()
-      }, 100)
+                }
+            }, 50)
         } catch (error) {
             console.error("Error updating district extrusion:", error)
         }
@@ -260,12 +261,9 @@ export default function DistrictExtrusionLayer({
     // Animate extrusion height
     const animateExtrusion = () => {
         if (!map || !map.getLayer("district-extrusion") || !focusedDistrictId) {
-          console.log("Cannot animate extrusion: missing map, layer, or focusedDistrictId")
             return
         }
 
-      console.log("Animating extrusion for district:", focusedDistrictId)
-
         if (animationRef.current) {
             cancelAnimationFrame(animationRef.current)
             animationRef.current = null
@@ -279,7 +277,7 @@ export default function DistrictExtrusionLayer({
         const animate = (currentTime: number) => {
             const elapsed = currentTime - startTime
             const progress = Math.min(elapsed / duration, 1)
-          const easedProgress = progress * (2 - progress) // easeOutQuad
+            const easedProgress = progress * (2 - progress)
             const currentHeight = startHeight + (targetHeight - startHeight) * easedProgress
 
             try {
@@ -293,12 +291,9 @@ export default function DistrictExtrusionLayer({
                 if (progress < 1) {
                     animationRef.current = requestAnimationFrame(animate)
                 } else {
-            console.log("Extrusion animation complete, starting rotation")
-                // Start rotation after extrusion completes
                     startRotation()
                 }
             } catch (error) {
-            console.error("Error animating extrusion:", error)
                 if (animationRef.current) {
                     cancelAnimationFrame(animationRef.current)
                     animationRef.current = null
@@ -314,7 +309,7 @@ export default function DistrictExtrusionLayer({
         if (!map || !focusedDistrictId) return
 
         const rotationSpeed = 0.05 // degrees per frame
-      bearingRef.current = 0 // Reset bearing at start
+        bearingRef.current = 0
 
         const animate = () => {
             if (!map || !focusedDistrictId || focusedDistrictId !== lastFocusedDistrictRef.current) {
@@ -326,14 +321,10 @@ export default function DistrictExtrusionLayer({
             }
 
             try {
-            // Update bearing with smooth increment
                 bearingRef.current = (bearingRef.current + rotationSpeed) % 360
                 map.setBearing(bearingRef.current)
-
-            // Continue the animation
                 rotationAnimationRef.current = requestAnimationFrame(animate)
             } catch (error) {
-            console.error("Error during rotation animation:", error)
                 if (rotationAnimationRef.current) {
                     cancelAnimationFrame(rotationAnimationRef.current)
                     rotationAnimationRef.current = null
@@ -341,7 +332,6 @@ export default function DistrictExtrusionLayer({
             }
         }
 
-      // Start the animation loop
         if (rotationAnimationRef.current) {
             cancelAnimationFrame(rotationAnimationRef.current)
             rotationAnimationRef.current = null

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

@@ -1,7 +1,7 @@
 "use client"
 
 import { BASE_BEARING, BASE_PITCH, BASE_ZOOM } from "@/app/_utils/const/map"
-import { createFillColorExpression, processDistrictFeature } from "@/app/_utils/map"
+import { createFillColorExpression, getFillOpacity, processDistrictFeature } from "@/app/_utils/map"
 import type { IDistrictLayerProps } from "@/app/_utils/types/map"
 import { useEffect } from "react"
 
@@ -26,9 +26,8 @@ export default function DistrictFillLineLayer({
         if (!map || !visible) return
 
         const handleDistrictClick = (e: any) => {
-        // First check if the click was on a marker or cluster
+            // Only include layers that exist in the map style
-        const incidentFeatures = map.queryRenderedFeatures(e.point, {
+            const possibleLayers = [
-          layers: [
                 "unclustered-point",
                 "clusters",
                 "crime-points",
@@ -36,7 +35,10 @@ export default function DistrictFillLineLayer({
                 "incidents-points",
                 "timeline-markers",
                 "recent-incidents",
-          ],
+            ]
+            const availableLayers = possibleLayers.filter(layer => map.getLayer(layer))
+            const incidentFeatures = map.queryRenderedFeatures(e.point, {
+                layers: availableLayers,
             })
 
             if (incidentFeatures && incidentFeatures.length > 0) {
@@ -281,20 +283,3 @@ export default function DistrictFillLineLayer({
     return null
 }
 
-// Helper function to determine fill opacity based on active control
-function getFillOpacity(activeControl?: string, showFill?: boolean): number {
-    if (!showFill) return 0
-
-    // Full opacity for incidents and clusters
-    if (activeControl === "incidents" || activeControl === "clusters") {
-      return 0.6
-  }
-
-    // Low opacity for timeline to show markers but still see district boundaries
-    if (activeControl === "timeline") {
-      return 0.1
-  }
-
-    // No fill for other controls, but keep boundaries visible
-    return 0
-}

sigap-website/app/_components/map/layers/layers.tsx

@@ -15,7 +15,7 @@ import { createFillColorExpression, processCrimeDataByDistrict } from "@/app/_ut
 import UnclusteredPointLayer from "./uncluster-layer"
 
 import { toast } from "sonner"
-import type { ITooltips } from "../controls/top/tooltips"
+import type { ITooltipsControl } from "../controls/top/tooltips"
 import type { IUnits } from "@/app/_utils/types/units"
 import UnitsLayer from "./units-layer"
 import DistrictFillLineLayer from "./district-layer"
@@ -59,7 +59,7 @@ export interface IDistrictLayerProps {
     setFocusedDistrictId?: (id: string | null) => void
     crimeDataByDistrict?: Record<string, any>
     showFill?: boolean
-    activeControl?: ITooltips
+    activeControl?: ITooltipsControl
 }
 
 interface LayersProps {
@@ -70,7 +70,7 @@ interface LayersProps {
     year: string
     month: string
     filterCategory: string | "all"
-    activeControl: ITooltips
+    activeControl: ITooltipsControl
     tilesetId?: string
     useAllData?: boolean
     showEWS?: boolean

sigap-website/app/_styles/ui.css

@@ -984,7 +984,7 @@ label#internal {
     margin: auto;
 }
 
-.circles div {
+/* .circles div {
     animation: growAndFade 3s infinite ease-out;
     background-color: rgb(156, 94, 0);
     border-radius: 50%;
@@ -993,7 +993,7 @@ label#internal {
     opacity: 0;
     position: absolute;
     box-shadow: 0 0 10px 5px rgba(156, 75, 0, 0.5);
-}
+} */
 
 @keyframes growAndFade {
     0% {

sigap-website/app/_utils/map.ts

@@ -2,6 +2,7 @@ import { $Enums } from '@prisma/client';
 import { CRIME_RATE_COLORS } from '@/app/_utils/const/map';
 import type { ICrimes } from '@/app/_utils/types/crimes';
 import { IDistrictFeature } from './types/map';
+import { ITooltipsControl } from '../_components/map/controls/top/tooltips';
 
 // Process crime data by district
 export const processCrimeDataByDistrict = (crimes: ICrimes[]) => {
@@ -263,3 +264,21 @@ export function formatDistance(meters: number): string {
     return `${(meters / 1000).toFixed(1)} km`;
   }
 }
+
+// Helper function to determine fill opacity based on active control
+export function getFillOpacity(activeControl?: ITooltipsControl, showFill?: boolean): number {
+  if (!showFill) return 0
+
+  // Full opacity for incidents and clusters
+  if (activeControl === "incidents" || activeControl === "clusters" || activeControl === "units") {
+    return 0.6
+  }
+
+  // Low opacity for timeline to show markers but still see district boundaries
+  if (activeControl === "timeline") {
+    return 0.1
+  }
+
+  // No fill for other controls, but keep boundaries visible
+  return 0
+}

sigap-website/app/_utils/types/map.ts

@@ -19,6 +19,7 @@ export interface IGeoJSONFeatureCollection {
 import { $Enums } from '@prisma/client';
 import type { ICrimes } from '@/app/_utils/types/crimes';
 import mapboxgl from 'mapbox-gl';
+import { ITooltipsControl } from "@/app/_components/map/controls/top/tooltips";
 
 // Types for district properties
 export interface IDistrictFeature {
@@ -75,7 +76,7 @@ export interface IDistrictLayerProps {
   filterCategory: string | 'all';
   crimes: ICrimes[];
   tilesetId?: string;
-  activeControl?: string;
+  activeControl: ITooltipsControl;
   focusedDistrictId: string | null;
   setFocusedDistrictId?: (id: string | null) => void;
   crimeDataByDistrict?: any;