refactor: refactor the color schema
This commit is contained in:
@@ -30,7 +30,6 @@ function FitBounds({ bounds }: { bounds: LatLngBounds }) {
|
||||
useEffect(() => {
|
||||
if (!map || !bounds.isValid()) return
|
||||
|
||||
// Small delay to ensure the container dimensions are fully calculated (prevents _leaflet_pos error)
|
||||
const timer = setTimeout(() => {
|
||||
map.invalidateSize()
|
||||
map.fitBounds(bounds, {
|
||||
@@ -47,7 +46,6 @@ function FitBounds({ bounds }: { bounds: LatLngBounds }) {
|
||||
}
|
||||
|
||||
export default function MapModal({ open, onClose, detections, detectionType }: MapModalProps) {
|
||||
// Filter detections with valid GPS coordinates
|
||||
const validDetections = detections.filter(d => d.latitude && d.longitude)
|
||||
|
||||
if (validDetections.length === 0) {
|
||||
@@ -57,46 +55,35 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
|
||||
<DialogHeader>
|
||||
<DialogTitle>Detection Map</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground">
|
||||
No GPS coordinates available for detections
|
||||
<div className="flex items-center justify-center h-full text-muted-foreground text-sm font-medium">
|
||||
No GPS data available for detections.
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// Extract route coordinates (start to end)
|
||||
const routeCoordinates: [number, number][] = validDetections.map(d => [d.latitude, d.longitude])
|
||||
|
||||
// Calculate bounds to fit all markers
|
||||
const bounds = new LatLngBounds(
|
||||
new LatLng(routeCoordinates[0][0], routeCoordinates[0][1]),
|
||||
new LatLng(routeCoordinates[0][0], routeCoordinates[0][1])
|
||||
)
|
||||
const bounds = new LatLngBounds(new LatLng(routeCoordinates[0][0], routeCoordinates[0][1]), new LatLng(routeCoordinates[0][0], routeCoordinates[0][1]))
|
||||
routeCoordinates.forEach(coord => bounds.extend(new LatLng(coord[0], coord[1])))
|
||||
|
||||
// Center point (middle of route)
|
||||
const center: [number, number] = [
|
||||
(bounds.getNorth() + bounds.getSouth()) / 2,
|
||||
(bounds.getEast() + bounds.getWest()) / 2
|
||||
]
|
||||
const center: [number, number] = [(bounds.getNorth() + bounds.getSouth()) / 2, (bounds.getEast() + bounds.getWest()) / 2]
|
||||
|
||||
const isCombined = detectionType === "pot-sign-detection"
|
||||
const isPothole = detectionType === "pothole-detection"
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onClose}>
|
||||
<DialogContent className="max-w-6xl h-[80vh] p-0 flex flex-col overflow-hidden border-none shadow-2xl">
|
||||
<DialogHeader className="px-6 pt-6 pb-4 bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800 shrink-0">
|
||||
<DialogContent className="max-w-6xl h-[85vh] p-0 flex flex-col overflow-hidden border-none shadow-2xl">
|
||||
<DialogHeader className="px-6 py-4 border-b shrink-0">
|
||||
<DialogTitle className="text-xl font-bold">
|
||||
{isCombined ? "Pothole & Signboard" : isPothole ? "Pothole" : "Signboard"} Detection Map
|
||||
{isCombined ? "Combined" : isPothole ? "Pothole" : "Signboard"} Detection Map
|
||||
</DialogTitle>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{validDetections.length} detection{validDetections.length !== 1 ? "s" : ""} with GPS coordinates
|
||||
<p className="text-xs text-muted-foreground font-medium">
|
||||
{validDetections.length} points of interest identified with GPS data
|
||||
</p>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 w-full bg-gray-50 dark:bg-gray-950 relative">
|
||||
<div className="flex-1 w-full relative bg-muted/20">
|
||||
<MapContainer
|
||||
center={center}
|
||||
zoom={13}
|
||||
@@ -108,56 +95,47 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
|
||||
{/* Route line */}
|
||||
<Polyline
|
||||
positions={routeCoordinates}
|
||||
color="#3b82f6"
|
||||
weight={3}
|
||||
opacity={0.7}
|
||||
weight={4}
|
||||
opacity={0.6}
|
||||
/>
|
||||
|
||||
{/* Detection markers */}
|
||||
{validDetections.map((detection, idx) => {
|
||||
const type = (detection.type || "").toLowerCase()
|
||||
let markerColor = "#64748b" // Default Slate
|
||||
let strokeColor = "#475569"
|
||||
|
||||
if (type === "pothole") {
|
||||
markerColor = "#ef4444"
|
||||
strokeColor = "#b91c1c"
|
||||
} else if (type === "defected_sign_board") {
|
||||
markerColor = "#3b82f6"
|
||||
strokeColor = "#1d4ed8"
|
||||
} else if (type === "road_crack") {
|
||||
markerColor = "#f59e0b"
|
||||
strokeColor = "#b45309"
|
||||
} else if (type === "damaged_road_marking") {
|
||||
markerColor = "#6366f1"
|
||||
strokeColor = "#4338ca"
|
||||
} else if (type === "good_sign_board") {
|
||||
markerColor = "#10b981"
|
||||
strokeColor = "#047857"
|
||||
const colors: Record<string, { fill: string, stroke: string }> = {
|
||||
'pothole': { fill: '#ef4444', stroke: '#b91c1c' },
|
||||
'defected_sign_board': { fill: '#3b82f6', stroke: '#1d4ed8' },
|
||||
'road_crack': { fill: '#f59e0b', stroke: '#b45309' },
|
||||
'damaged_road_marking': { fill: '#6366f1', stroke: '#4338ca' },
|
||||
'good_sign_board': { fill: '#10b981', stroke: '#047857' }
|
||||
}
|
||||
const color = colors[type] || { fill: '#64748b', stroke: '#475569' }
|
||||
|
||||
return (
|
||||
<CircleMarker
|
||||
key={`${detection.id}-${idx}`}
|
||||
center={[detection.latitude, detection.longitude]}
|
||||
radius={8}
|
||||
fillColor={markerColor}
|
||||
color={strokeColor}
|
||||
radius={7}
|
||||
fillColor={color.fill}
|
||||
color={color.stroke}
|
||||
weight={2}
|
||||
opacity={1}
|
||||
fillOpacity={0.8}
|
||||
fillOpacity={0.9}
|
||||
>
|
||||
<Popup>
|
||||
<div className="text-xs space-y-1">
|
||||
<div className="font-semibold capitalize">
|
||||
<div className="text-[11px] space-y-2 p-1">
|
||||
<div className="font-bold border-b pb-1 capitalize">
|
||||
{(detection.type || "").replace(/_/g, " ")} #{detection.id}
|
||||
</div>
|
||||
<div>Frame: {detection.frame_number}</div>
|
||||
<div>Confidence: {(detection.confidence * 100).toFixed(1)}%</div>
|
||||
<div className="font-mono text-[10px]">
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-1">
|
||||
<span className="text-muted-foreground">Frame:</span>
|
||||
<span className="font-semibold text-right">{detection.frame_number}</span>
|
||||
<span className="text-muted-foreground">Confidence:</span>
|
||||
<span className="font-semibold text-right">{(detection.confidence * 100).toFixed(0)}%</span>
|
||||
</div>
|
||||
<div className="font-mono bg-muted p-1.5 rounded border text-center text-[9px]">
|
||||
{detection.latitude.toFixed(6)}, {detection.longitude.toFixed(6)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,8 +143,6 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
|
||||
</CircleMarker>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Auto-fit bounds */}
|
||||
<FitBounds bounds={bounds} />
|
||||
</MapContainer>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user