115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
"use client"
|
|
|
|
import { useRef, useState } from "react"
|
|
|
|
import CrimeTooltips from "./crime-tooltips"
|
|
import AdditionalTooltips from "./additional-tooltips"
|
|
import SearchTooltip from "./search-control"
|
|
import type { ReactNode } from "react"
|
|
|
|
// Define the possible control IDs for the crime map
|
|
export type ITooltipsControl =
|
|
// Crime data views
|
|
| "incidents"
|
|
| "heatmap"
|
|
| "units"
|
|
| "patrol"
|
|
| "reports"
|
|
| "clusters"
|
|
| "timeline"
|
|
| "recents"
|
|
|
|
// Tools and features
|
|
| "refresh"
|
|
| "search"
|
|
| "alerts"
|
|
| "layers"
|
|
| "evidence"
|
|
| "arrests"
|
|
|
|
// Map tools type definition
|
|
export interface IMapTools {
|
|
id: ITooltipsControl
|
|
label: string
|
|
icon: ReactNode
|
|
description?: string
|
|
}
|
|
|
|
interface TooltipProps {
|
|
onControlChange?: (controlId: ITooltipsControl) => void
|
|
activeControl?: string
|
|
selectedSourceType: string
|
|
setSelectedSourceType: (sourceType: string) => void
|
|
availableSourceTypes: string[] // This must be string[] to match with API response
|
|
selectedYear: number | "all"
|
|
setSelectedYear: (year: number | "all") => void
|
|
selectedMonth: number | "all"
|
|
setSelectedMonth: (month: number | "all") => void
|
|
selectedCategory: string | "all"
|
|
setSelectedCategory: (category: string | "all") => void
|
|
availableYears?: (number | null)[]
|
|
categories?: string[]
|
|
crimes?: any[] // Add this prop to receive crime data
|
|
disableYearMonth?: boolean
|
|
}
|
|
|
|
export default function Tooltips({
|
|
onControlChange,
|
|
activeControl,
|
|
selectedSourceType,
|
|
setSelectedSourceType,
|
|
availableSourceTypes = [],
|
|
selectedYear,
|
|
setSelectedYear,
|
|
selectedMonth,
|
|
setSelectedMonth,
|
|
selectedCategory,
|
|
setSelectedCategory,
|
|
availableYears = [],
|
|
categories = [],
|
|
crimes = [],
|
|
disableYearMonth = false,
|
|
}: TooltipProps) {
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
const [isClient, setIsClient] = useState(false)
|
|
|
|
return (
|
|
<div ref={containerRef} className="flex flex-col items-center gap-2">
|
|
<div className="flex items-center gap-2">
|
|
{/* Crime Tooltips Component */}
|
|
<CrimeTooltips
|
|
activeControl={activeControl}
|
|
onControlChange={onControlChange}
|
|
sourceType={selectedSourceType}
|
|
/>
|
|
|
|
{/* Additional Tooltips Component */}
|
|
<AdditionalTooltips
|
|
activeControl={activeControl}
|
|
onControlChange={onControlChange}
|
|
selectedSourceType={selectedSourceType}
|
|
setSelectedSourceType={setSelectedSourceType}
|
|
availableSourceTypes={availableSourceTypes}
|
|
selectedYear={selectedYear}
|
|
setSelectedYear={setSelectedYear}
|
|
selectedMonth={selectedMonth}
|
|
setSelectedMonth={setSelectedMonth}
|
|
selectedCategory={selectedCategory}
|
|
setSelectedCategory={setSelectedCategory}
|
|
availableYears={availableYears}
|
|
categories={categories}
|
|
disableYearMonth={disableYearMonth}
|
|
/>
|
|
|
|
{/* Search Control Component */}
|
|
<SearchTooltip
|
|
activeControl={activeControl}
|
|
onControlChange={onControlChange}
|
|
crimes={crimes}
|
|
sourceType={selectedSourceType}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|