santasri.pachhal/road-monitoring-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: culvert addition

Browse Source
This commit is contained in:
santasri.pachhal
2026-03-19 10:22:49 +05:30
parent 7eb3d60932
commit 1065487046
14 changed files with 313 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/(modules)/results/[videoId]/page.tsx
View File

@@ -12,6 +12,7 @@ import { SessionContext, DetectionData, DetectionType } from '@/types';
import { getVideoFile, clearVideoFile } from '@/lib/video-storage';
import { ROUTES } from '@/utils/routes';
import { Card } from '@/components/ui/card';
import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -36,7 +37,12 @@ export default function VideoResultsPage() {
setDetectionData(data as any);
// Try to infer detection type from results if possible
if (data.summary?.unique_signboards !== undefined && data.summary?.unique_signboards > 0) {
if (data.detection_mode) {
setDetectionType(data.detection_mode);
} else if (
data.summary?.unique_signboards !== undefined &&
data.summary?.unique_signboards > 0
) {
setDetectionType('sign-board-detection');
} else if (
data.summary?.unique_potholes !== undefined &&
@@ -75,9 +81,8 @@ export default function VideoResultsPage() {
};
const getTitle = () => {
if (detectionType === 'pothole-detection') return 'Pothole Detection Results';
if (detectionType === 'sign-board-detection') return 'Signboard Detection Results';
return 'Pothole & Signboard Detection Results';
const config = getDetectionModeConfig(detectionType);
return `${config.label} Results`;
};
if (isLoading) {

8
src/app/(modules)/upload/[videoId]/page.tsx
View File

@@ -35,10 +35,10 @@ export default function VideoProcessingPage() {
if (data.type === 'progress' || data.progress !== undefined) {
setProgress(data.progress || 0);
let message = data.message || 'Processing...';
if (data.unique_potholes !== undefined) {
message += ` | Unique: ${data.unique_potholes} | Total: ${data.total_detections || 0}`;
} else if (data.unique_signboards !== undefined) {
message += ` | Unique: ${data.unique_signboards} | Total: ${data.total_detections || 0}`;
const uniqueCount =
data.unique_potholes ?? data.unique_signboards ?? data.unique_culverts;
if (uniqueCount !== undefined) {
message += ` | Unique: ${uniqueCount} | Total: ${data.total_detections || 0}`;
}
setStatusMessage(message);
}

23
src/components/map-modal.tsx
View File

@@ -5,6 +5,8 @@ import { MapContainer, TileLayer, Polyline, CircleMarker, Popup, useMap } from '
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { LatLngBounds, LatLng } from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { getDetectionModeConfig, DETECTION_TYPES } from '@/constants/detectionModeConfig';
import { DetectionType } from '@/types';
type Detection = {
id: number;
@@ -20,7 +22,7 @@ type MapModalProps = {
open: boolean;
onClose: () => void;
detections: Detection[];
detectionType: 'pothole-detection' | 'sign-board-detection' | 'pot-sign-detection';
detectionType: DetectionType | string;
};
// Component to auto-fit map bounds to show all markers
@@ -77,16 +79,13 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
(bounds.getEast() + bounds.getWest()) / 2,
];
const isCombined = detectionType === 'pot-sign-detection';
const isPothole = detectionType === 'pothole-detection';
const modeConfig = getDetectionModeConfig(detectionType);
return (
<Dialog open={open} onOpenChange={onClose}>
<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 ? 'Combined' : isPothole ? 'Pothole' : 'Signboard'} Detection Map
</DialogTitle>
<DialogTitle className="text-xl font-bold">{modeConfig.label} Map</DialogTitle>
<p className="text-xs text-muted-foreground font-medium">
{validDetections.length} points of interest identified with GPS data
</p>
@@ -103,14 +102,10 @@ export default function MapModal({ open, onClose, detections, detectionType }: M
{validDetections.map((detection, idx) => {
const type = (detection.type || '').toLowerCase();
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' };
const typeConfig = DETECTION_TYPES[type];
const color = typeConfig
? { fill: typeConfig.color, stroke: typeConfig.color }
: { fill: '#64748b', stroke: '#475569' };
return (
<CircleMarker

22
src/components/video-player-section.tsx
View File

@@ -15,12 +15,13 @@ import DetectionStatsBar from './video/detection-stats-bar';
import DetectionLogs from './video/detection-logs';
import SummarySection from './video/summary-section';
import DetailedSummarySection from './video/detailed-summary-section';
import { getDetectionModeConfig, getEnabledDetectionTypes } from '@/constants/detectionModeConfig';
type VideoPlayerSectionProps = {
data: DetectionData;
videoId: string;
videoFile: File | null;
detectionType: DetectionType;
detectionType: string;
projectId?: string;
};
@@ -67,13 +68,19 @@ export default function VideoPlayerSection({
const [videoError, setVideoError] = useState<string | null>(null);
const [lastDetectedLat, setLastDetectedLat] = useState<number | null>(null);
const [lastDetectedLng, setLastDetectedLng] = useState<number | null>(null);
const [currentFrameCounts, setCurrentFrameCounts] = useState<DetectionCounts>({
defected_sign_board: 0,
pothole: 0,
road_crack: 0,
damaged_road_marking: 0,
good_sign_board: 0,
const detectionMode = data.detection_mode || detectionType;
const modeConfig = getDetectionModeConfig(detectionMode);
const enabledTypes = getEnabledDetectionTypes(detectionMode);
const initialCounts = useMemo(() => {
const counts: any = {};
enabledTypes.forEach((type) => {
counts[type.frameCountKey] = 0;
});
return counts as DetectionCounts;
}, [enabledTypes]);
const [currentFrameCounts, setCurrentFrameCounts] = useState<DetectionCounts>(initialCounts);
// Logs Reducer
const [logs, dispatchLogs] = useReducer(logsReducer, []);
@@ -217,6 +224,7 @@ export default function VideoPlayerSection({
currentFrame={currentFrame}
lastDetectedLat={lastDetectedLat}
lastDetectedLng={lastDetectedLng}
detectionMode={detectionMode}
/>
</div>

18
src/components/video/detailed-summary-section.tsx
View File

@@ -7,8 +7,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
import { ScrollArea } from '@/components/ui/scroll-area';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { DetectionType, ChainageSummaryData } from '@/types';
import { ChainageSummaryData } from '@/types';
import { projectService } from '@/services/api';
import { getDetectionModeConfig } from '@/constants/detectionModeConfig';
// Dynamically import MapModal with SSR disabled (Leaflet requires window object)
const MapModal = dynamic(() => import('@/components/map-modal'), { ssr: false });
@@ -17,7 +18,7 @@ interface DetailedSummarySectionProps {
projectId: string;
videoId: string;
show: boolean;
detectionType: DetectionType;
detectionType: string;
}
const DetailedSummarySection = ({
@@ -50,8 +51,7 @@ const DetailedSummarySection = ({
if (!show || loading || !summaryData) return null;
const isCombined = detectionType === 'pot-sign-detection';
const isPothole = detectionType === 'pothole-detection' || isCombined;
const modeConfig = getDetectionModeConfig(detectionType);
// Flatten all detections for the scrollable list
const allDetections: Array<{
@@ -79,10 +79,7 @@ const DetailedSummarySection = ({
</div>
<div>
<CardTitle className="text-base font-bold">Chainages</CardTitle>
<CardDescription className="text-xs">
{isCombined ? 'Potholes & Signboards' : isPothole ? 'Potholes' : 'Signboards'}{' '}
detected
</CardDescription>
<CardDescription className="text-xs">{modeConfig.label} detected</CardDescription>
</div>
</div>
<Button variant="outline" size="sm" onClick={() => setShowMap(true)} className="gap-2">
@@ -164,10 +161,7 @@ const DetailedSummarySection = ({
>
<div className="flex items-center justify-between mb-2">
<span className="font-bold">
{detection.type === 'pothole'
? 'Pothole'
: (detection.class || detection.type || '').replace(/_/g, ' ')}{' '}
#{detection.id}
{(detection.class || detection.type || '').replace(/_/g, ' ')} #{detection.id}
</span>
<Badge variant="outline" className="text-[10px] font-mono">
Frame {detection.frame_number}

42
src/components/video/detection-stats-bar.tsx
View File

@@ -2,12 +2,14 @@
import { memo } from 'react';
import { DetectionCounts } from '@/types';
import { getEnabledDetectionTypes } from '@/constants/detectionModeConfig';
interface DetectionStatsBarProps {
currentFrameCounts: DetectionCounts;
currentFrame: number;
lastDetectedLat: number | null;
lastDetectedLng: number | null;
detectionMode?: string;
}
const DetectionStatsBar = memo(
@@ -16,40 +18,26 @@ const DetectionStatsBar = memo(
currentFrame,
lastDetectedLat,
lastDetectedLng,
detectionMode,
}: DetectionStatsBarProps) => {
const enabledTypes = getEnabledDetectionTypes(detectionMode);
return (
<div className="flex flex-wrap items-center gap-x-8 gap-y-3 py-3 px-6 bg-card border rounded-lg">
<div className="flex flex-wrap items-center gap-x-6 gap-y-2">
<div className="flex items-center gap-1.5 whitespace-nowrap">
<span className="text-[11px] font-bold text-red-500 uppercase tracking-tight">
POTHOLE:
{enabledTypes.map((type) => (
<div key={type.id} className="flex items-center gap-1.5 whitespace-nowrap">
<span
className="text-[11px] font-bold uppercase tracking-tight"
style={{ color: type.color }}
>
{type.label}:
</span>
<span className="text-sm font-bold text-red-600">{currentFrameCounts.pothole}</span>
</div>
<div className="flex items-center gap-1.5 whitespace-nowrap">
<span className="text-[11px] font-bold text-blue-500 uppercase tracking-tight">
DEFECT SIGN BOARD:
</span>
<span className="text-sm font-bold text-blue-600">
{currentFrameCounts.defected_sign_board}
</span>
</div>
<div className="flex items-center gap-1.5 whitespace-nowrap">
<span className="text-[11px] font-bold text-indigo-500 uppercase tracking-tight">
DAMAGE ROAD MARK:
</span>
<span className="text-sm font-bold text-indigo-600">
{currentFrameCounts.damaged_road_marking}
</span>
</div>
<div className="flex items-center gap-1.5 whitespace-nowrap">
<span className="text-[11px] font-bold text-orange-500 uppercase tracking-tight">
ROADCRACK:
</span>
<span className="text-sm font-bold text-orange-600">
{currentFrameCounts.road_crack}
<span className="text-sm font-bold" style={{ color: type.color }}>
{(currentFrameCounts as any)[type.frameCountKey] || 0}
</span>
</div>
))}
</div>
<div className="flex flex-wrap items-center gap-6 border-l pl-6 border-border/80 ml-auto">

80
src/components/video/summary-section.tsx
View File

@@ -2,61 +2,37 @@
import { Target, SignpostBig, AlertTriangle, Activity, Gauge, Monitor, Film } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { DetectionData, DetectionType } from '@/types';
import { DetectionData } from '@/types';
import { cn } from '@/lib/utils';
import { getDetectionModeConfig, getEnabledDetectionTypes } from '@/constants/detectionModeConfig';
interface SummarySectionProps {
data: DetectionData;
show: boolean;
detectionType: DetectionType;
detectionType: string;
}
const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
if (!show) return null;
const stats = [
{
label: 'Total Damage',
value: data.summary.total_road_damage || 0,
icon: Target,
color: 'text-purple-500',
bgColor: 'bg-purple-500/10',
},
{
label: 'Defected Signs',
value: data.summary.unique_defected_sign_board || 0,
icon: SignpostBig,
color: 'text-blue-500',
bgColor: 'bg-blue-500/10',
},
{
label: 'Unique Potholes',
value: data.summary.unique_pothole || 0,
icon: AlertTriangle,
color: 'text-red-500',
bgColor: 'bg-red-500/10',
},
{
label: 'Road Cracks',
value: data.summary.unique_road_crack || 0,
icon: AlertTriangle,
color: 'text-orange-500',
bgColor: 'bg-orange-500/10',
},
{
label: 'Markings',
value: data.summary.unique_damaged_road_marking || 0,
icon: Activity,
color: 'text-indigo-500',
bgColor: 'bg-indigo-500/10',
},
{
label: 'Good Signs',
value: data.summary.unique_good_sign_board || 0,
icon: SignpostBig,
color: 'text-emerald-500',
bgColor: 'bg-emerald-500/10',
},
const detectionMode = data.detection_mode || detectionType;
const modeConfig = getDetectionModeConfig(detectionMode);
const enabledTypes = getEnabledDetectionTypes(detectionMode);
const detectionStats = enabledTypes.map((type) => ({
label: type.label,
value: (data.summary as any)[type.countKey] || 0,
icon: type.id.includes('sign')
? SignpostBig
: type.id.includes('culvert')
? Target
: AlertTriangle,
color: `text-[${type.color}]`,
customColor: type.color,
bgColor: 'bg-muted/30',
}));
const globalStats = [
{
label: 'Rate',
value: `${(data.summary.detection_rate || 0).toFixed(1)}%`,
@@ -87,6 +63,8 @@ const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
},
];
const stats = [...detectionStats, ...globalStats];
return (
<Card className="overflow-hidden">
<CardHeader className="pb-4">
@@ -110,9 +88,17 @@ const SummarySection = ({ data, show, detectionType }: SummarySectionProps) => {
className="p-4 rounded-lg bg-muted/30 border border-muted flex flex-col items-center text-center"
>
<div className={cn('p-2 rounded-md mb-2', stat.bgColor)}>
<Icon className={cn('h-5 w-5', stat.color)} />
<Icon
className={cn('h-5 w-5', stat.color)}
style={(stat as any).customColor ? { color: (stat as any).customColor } : {}}
/>
</div>
<div
className={cn('text-xl font-bold', stat.color)}
style={(stat as any).customColor ? { color: (stat as any).customColor } : {}}
>
{stat.value}
</div>
<div className={cn('text-xl font-bold', stat.color)}>{stat.value}</div>
<div className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground mt-1">
{stat.label}
</div>

119
src/constants/detectionModeConfig.ts Normal file
View File

@@ -0,0 +1,119 @@
/**
* Detection mode configurations to support dynamic UI behavior
*/
export interface DetectionTypeConfig {
id: string;
label: string;
color: string;
countKey: string; // The key in summary object from API (e.g., unique_pothole)
listKey: string; // The key for the list of detections in DetectionData (e.g., pothole_list)
frameCountKey: string; // The key in per-frame count object (e.g., pothole)
}
export interface DetectionModeConfig {
id: string;
label: string;
enabledTypes: string[]; // IDs of detection types to show in this mode
}
export const DETECTION_TYPES: Record<string, DetectionTypeConfig> = {
pothole: {
id: 'pothole',
label: 'Pothole',
color: '#ef4444',
countKey: 'unique_pothole',
listKey: 'pothole_list',
frameCountKey: 'pothole',
},
defected_sign_board: {
id: 'defected_sign_board',
label: 'Defect Sign Board',
color: '#3b82f6',
countKey: 'unique_defected_sign_board',
listKey: 'defected_sign_board_list',
frameCountKey: 'defected_sign_board',
},
road_crack: {
id: 'road_crack',
label: 'Road Crack',
color: '#f59e0b',
countKey: 'unique_road_crack',
listKey: 'road_crack_list',
frameCountKey: 'road_crack',
},
damaged_road_marking: {
id: 'damaged_road_marking',
label: 'Damage Road Mark',
color: '#6366f1',
countKey: 'unique_damaged_road_marking',
listKey: 'damaged_road_marking_list',
frameCountKey: 'damaged_road_marking',
},
good_sign_board: {
id: 'good_sign_board',
label: 'Good Sign Board',
color: '#10b981',
countKey: 'unique_good_sign_board',
listKey: 'good_sign_board_list',
frameCountKey: 'good_sign_board',
},
good_culvert: {
id: 'good_culvert',
label: 'Good Culvert',
color: '#10b981',
countKey: 'unique_good_culvert',
listKey: 'good_culvert_list',
frameCountKey: 'good_culvert',
},
defective_culvert: {
id: 'defective_culvert',
label: 'Defective Culvert',
color: '#ef4444',
countKey: 'unique_defective_culvert',
listKey: 'defective_culvert_list',
frameCountKey: 'defective_culvert',
},
};
export const DETECTION_MODES: Record<string, DetectionModeConfig> = {
'pothole-detection': {
id: 'pothole-detection',
label: 'Pothole Detection',
enabledTypes: ['pothole', 'road_crack', 'damaged_road_marking'],
},
'sign-board-detection': {
id: 'sign-board-detection',
label: 'Signboard Detection',
enabledTypes: ['defected_sign_board', 'good_sign_board'],
},
'pot-sign-detection': {
id: 'pot-sign-detection',
label: 'Pothole & Signboard Detection',
enabledTypes: [
'pothole',
'defected_sign_board',
'road_crack',
'damaged_road_marking',
'good_sign_board',
],
},
culvert_detection: {
id: 'culvert_detection',
label: 'Culvert Detection',
enabledTypes: ['good_culvert', 'defective_culvert'],
},
};
// Fallback config for unknown modes
export const DEFAULT_DETECTION_MODE: DetectionModeConfig = DETECTION_MODES['pot-sign-detection'];
export const getDetectionModeConfig = (mode?: string): DetectionModeConfig => {
if (!mode) return DEFAULT_DETECTION_MODE;
return DETECTION_MODES[mode] || DEFAULT_DETECTION_MODE;
};
export const getEnabledDetectionTypes = (mode?: string): DetectionTypeConfig[] => {
const config = getDetectionModeConfig(mode);
return config.enabledTypes.map((typeId) => DETECTION_TYPES[typeId]).filter(Boolean);
};

40
src/hooks/use-cumulative-counts.ts
View File

@@ -1,18 +1,10 @@
import { useMemo, useCallback } from 'react';
import { DetectionCounts } from '@/types';
const DEFAULT_COUNTS: DetectionCounts = {
defected_sign_board: 0,
pothole: 0,
road_crack: 0,
damaged_road_marking: 0,
good_sign_board: 0,
};
export const useCumulativeCounts = (frames: any[]) => {
const result = useMemo(() => {
const map = new Map<number, DetectionCounts>();
let lastCounts: DetectionCounts = { ...DEFAULT_COUNTS };
let lastCounts = {} as DetectionCounts;
let indices: number[] = [];
if (frames && Array.isArray(frames)) {
@@ -22,20 +14,16 @@ export const useCumulativeCounts = (frames: any[]) => {
indices.push(frameId);
const detections = (frameData as any).detections;
if (detections && detections.length > 0) {
const frameCounts = detections[0].count || { ...DEFAULT_COUNTS };
lastCounts = {
defected_sign_board: Math.max(
lastCounts.defected_sign_board,
frameCounts.defected_sign_board || 0,
),
pothole: Math.max(lastCounts.pothole, frameCounts.pothole || 0),
road_crack: Math.max(lastCounts.road_crack, frameCounts.road_crack || 0),
damaged_road_marking: Math.max(
lastCounts.damaged_road_marking,
frameCounts.damaged_road_marking || 0,
),
good_sign_board: Math.max(lastCounts.good_sign_board, frameCounts.good_sign_board || 0),
};
const frameCounts = detections[0].count || {};
// Dynamically compute cumulative max for all keys present in counts
const nextCounts = { ...lastCounts };
Object.keys(frameCounts).forEach((key) => {
const currentVal = (nextCounts as any)[key] || 0;
const newVal = (frameCounts as any)[key] || 0;
(nextCounts as any)[key] = Math.max(currentVal, newVal);
});
lastCounts = nextCounts;
}
map.set(frameId, { ...lastCounts });
});
@@ -46,7 +34,7 @@ export const useCumulativeCounts = (frames: any[]) => {
const getStickyCounts = useCallback(
(frameNumber: number) => {
const { map, indices } = result;
if (indices.length === 0) return DEFAULT_COUNTS;
if (indices.length === 0) return {} as DetectionCounts;
let targetFrameId = -1;
let low = 0,
@@ -62,7 +50,9 @@ export const useCumulativeCounts = (frames: any[]) => {
}
}
return targetFrameId !== -1 ? map.get(targetFrameId) || DEFAULT_COUNTS : DEFAULT_COUNTS;
return targetFrameId !== -1
? map.get(targetFrameId) || ({} as DetectionCounts)
: ({} as DetectionCounts);
},
[result],
);

64
src/hooks/use-frame-detection-map.ts
View File

@@ -1,41 +1,65 @@
import { useMemo } from 'react';
import { DetectionData, DetectionType } from '@/types';
import { DetectionData } from '@/types';
import { getEnabledDetectionTypes, DETECTION_TYPES } from '@/constants/detectionModeConfig';
export const useFrameDetectionMap = (data: DetectionData, detectionType: DetectionType) => {
export const useFrameDetectionMap = (data: DetectionData, detectionType: string) => {
const frameDetectionMap = useMemo(() => {
const map = new Map<number, any[]>();
const isCombined = detectionType === 'pot-sign-detection';
const isPothole = detectionType === 'pothole-detection' || isCombined;
const isSignboard = detectionType === 'sign-board-detection' || isCombined;
const detectionMode = data.detection_mode || detectionType;
const enabledTypes = getEnabledDetectionTypes(detectionMode);
const enabledKeys = new Set(enabledTypes.map((t) => t.id));
if (data.frames && Array.isArray(data.frames)) {
data.frames.forEach((frameData) => {
const frameId = frameData.frame_id;
const flatDetections = (frameData as any).detections;
if (flatDetections && Array.isArray(flatDetections)) {
map.set(
frameId,
flatDetections.map((d: any) => ({
const filteredDetections = flatDetections
.filter((d: any) => {
const type = (d.type || '').toLowerCase();
return enabledKeys.has(type);
})
.map((d: any) => ({
...d,
_detType: d.type === 'pothole' ? 'pothole' : 'signboard',
_detType: (d.type || '').toLowerCase(),
// Map old ID fields for backward compatibility in UI components
pothole_id: d.type === 'pothole' ? d.detection_id : undefined,
signboard_id: d.type !== 'pothole' ? d.detection_id : undefined,
})),
);
signboard_id: d.type.includes('sign') ? d.detection_id : undefined,
culvert_id: d.type.includes('culvert') ? d.detection_id : undefined,
}));
if (filteredDetections.length > 0) {
map.set(frameId, filteredDetections);
}
} else {
// Legacy format: separate arrays (potholes, signboards, etc.)
let detections: any[] = [];
if (isPothole && (frameData as any).potholes) {
enabledTypes.forEach((type) => {
const listKey =
type.id === 'pothole'
? 'potholes'
: type.id.includes('sign')
? 'signboards'
: type.id === 'good_culvert'
? 'good_culverts'
: type.id === 'defective_culvert'
? 'defective_culverts'
: null;
if (listKey && (frameData as any)[listKey]) {
detections = [
...detections,
...(frameData as any).potholes.map((p: any) => ({ ...p, _detType: 'pothole' })),
];
}
if (isSignboard && (frameData as any).signboards) {
detections = [
...detections,
...(frameData as any).signboards.map((s: any) => ({ ...s, _detType: 'signboard' })),
...(frameData as any)[listKey].map((item: any) => ({
...item,
_detType: type.id,
type: type.id,
})),
];
}
});
if (detections.length > 0) map.set(frameId, detections);
}
});

21
src/hooks/use-gps-map.ts
View File

@@ -1,9 +1,11 @@
import { useMemo } from 'react';
import { DetectionData } from '@/types';
import { DETECTION_TYPES } from '@/constants/detectionModeConfig';
export const useGpsMap = (data: DetectionData) => {
const gpsMap = useMemo(() => {
const map = new Map<number, { lat: number; lng: number }>();
const addItemsToMap = (list?: any[]) => {
if (!list || !Array.isArray(list)) return;
list.forEach((item) => {
@@ -14,12 +16,19 @@ export const useGpsMap = (data: DetectionData) => {
}
});
};
addItemsToMap(data.pothole_list);
addItemsToMap(data.signboard_list);
addItemsToMap(data.defected_sign_board_list);
addItemsToMap(data.road_crack_list);
addItemsToMap(data.damaged_road_marking_list);
addItemsToMap(data.good_sign_board_list);
// Dynamically add items from all configured detection lists
Object.values(DETECTION_TYPES).forEach((type) => {
if (type.listKey) {
addItemsToMap((data as any)[type.listKey]);
}
});
// Backward compatibility for generic signboard_list
if ((data as any).signboard_list) {
addItemsToMap((data as any).signboard_list);
}
return map;
}, [data]);

5
src/types/analysis.ts
View File

@@ -19,6 +19,8 @@ export type DetectionData = {
unique_road_crack?: number;
unique_damaged_road_marking?: number;
unique_good_sign_board?: number;
unique_good_culvert?: number;
unique_defective_culvert?: number;
total_road_damage?: number;
total_detections: number;
total_frames: number;
@@ -29,7 +31,10 @@ export type DetectionData = {
road_crack_list?: Array<DetectionListItem>;
damaged_road_marking_list?: Array<DetectionListItem>;
good_sign_board_list?: Array<DetectionListItem>;
good_culvert_list?: Array<DetectionListItem>;
defective_culvert_list?: Array<DetectionListItem>;
signboard_list?: Array<DetectionListItem>; // Keeping for backward compatibility
detection_mode?: string;
frames: Array<{
frame_id: number;
// Legacy format: separate arrays

8
src/types/detection.ts
View File

@@ -13,7 +13,11 @@ export interface Detection {
timestamp_ms: number;
}
export type DetectionType = 'pothole-detection' | 'sign-board-detection' | 'pot-sign-detection';
export type DetectionType =
| 'pothole-detection'
| 'sign-board-detection'
| 'pot-sign-detection'
| 'culvert_detection';
export interface DetectionListItem {
detection_id?: number;
@@ -34,6 +38,8 @@ export interface DetectionCounts {
road_crack: number;
damaged_road_marking: number;
good_sign_board: number;
good_culvert?: number;
defective_culvert?: number;
}
export type DetectionLogEntry = {

16
src/utils/canvas-drawing.ts
View File

@@ -1,10 +1,12 @@
export const DETECTION_COLORS: Record<string, string> = {
pothole: '#ef4444',
defected_sign_board: '#3b82f6',
road_crack: '#f59e0b',
damaged_road_marking: '#6366f1',
good_sign_board: '#10b981',
};
import { DETECTION_TYPES } from '@/constants/detectionModeConfig';
export const DETECTION_COLORS: Record<string, string> = Object.keys(DETECTION_TYPES).reduce(
(acc, key) => {
acc[key] = DETECTION_TYPES[key].color;
return acc;
},
{} as Record<string, string>,
);
export const drawBoundingBoxes = (
ctx: CanvasRenderingContext2D,