refactor: remove the legacy detailed summary section and simplify the results playback props, keeping detection counts and stats in the main playback card layout.
This commit is contained in:
@@ -116,9 +116,6 @@ export default function VideoResultsPage() {
|
|||||||
{detectionData && (
|
{detectionData && (
|
||||||
<VideoPlayerSection
|
<VideoPlayerSection
|
||||||
data={detectionData}
|
data={detectionData}
|
||||||
videoId={videoId}
|
|
||||||
detectionType={detectionType}
|
|
||||||
projectId={session?.projectId || undefined}
|
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,321 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
import dynamic from 'next/dynamic';
|
|
||||||
import { Map as MapIcon, Activity } from 'lucide-react';
|
|
||||||
import {
|
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from '@/components/ui/card';
|
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { ChainageSummaryData, DetectionResultLog } from '@/types';
|
|
||||||
import { projectSummaryService } 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,
|
|
||||||
});
|
|
||||||
|
|
||||||
interface DetailedSummarySectionProps {
|
|
||||||
projectId: string;
|
|
||||||
videoId: string;
|
|
||||||
detectionType: string;
|
|
||||||
logs: DetectionResultLog[];
|
|
||||||
}
|
|
||||||
|
|
||||||
type DisplayDetection = {
|
|
||||||
id: string | number;
|
|
||||||
type: string;
|
|
||||||
class?: string;
|
|
||||||
confidence?: number;
|
|
||||||
latitude?: number | null;
|
|
||||||
longitude?: number | null;
|
|
||||||
frame_number: number;
|
|
||||||
timestamp_ms?: number;
|
|
||||||
chainageName?: string;
|
|
||||||
packageName?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const DetailedSummarySection = ({
|
|
||||||
projectId,
|
|
||||||
videoId,
|
|
||||||
detectionType,
|
|
||||||
logs,
|
|
||||||
}: DetailedSummarySectionProps) => {
|
|
||||||
const [summaryData, setSummaryData] = useState<ChainageSummaryData | null>(
|
|
||||||
null,
|
|
||||||
);
|
|
||||||
const [loading, setLoading] = useState(false);
|
|
||||||
const [showMap, setShowMap] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!videoId || !projectId) {
|
|
||||||
setSummaryData(null);
|
|
||||||
setLoading(false);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchSummary = async () => {
|
|
||||||
setLoading(true);
|
|
||||||
try {
|
|
||||||
const data =
|
|
||||||
await projectSummaryService.getProjectSummaryByVideo<ChainageSummaryData>(
|
|
||||||
projectId,
|
|
||||||
videoId,
|
|
||||||
);
|
|
||||||
setSummaryData(data);
|
|
||||||
} catch (err) {
|
|
||||||
console.error('Failed to fetch summary:', err);
|
|
||||||
} finally {
|
|
||||||
setLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchSummary();
|
|
||||||
}, [videoId, projectId]);
|
|
||||||
|
|
||||||
if (!videoId) return null;
|
|
||||||
|
|
||||||
const modeConfig = getDetectionModeConfig(detectionType);
|
|
||||||
|
|
||||||
// Flatten all detections for the scrollable list
|
|
||||||
const summaryDetections: DisplayDetection[] = [];
|
|
||||||
|
|
||||||
Object.entries(summaryData?.packages || {}).forEach(
|
|
||||||
([packageName, packageData]) => {
|
|
||||||
Object.entries(packageData?.chainages || {}).forEach(
|
|
||||||
([chainageName, chainageData]) => {
|
|
||||||
chainageData?.detections?.forEach((detection) => {
|
|
||||||
summaryDetections.push({
|
|
||||||
...detection,
|
|
||||||
chainageName,
|
|
||||||
packageName,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
const logDetections: DisplayDetection[] = logs.map((log) => ({
|
|
||||||
id: log.id,
|
|
||||||
type: log.type,
|
|
||||||
class: log.label || log.type,
|
|
||||||
confidence: log.confidence,
|
|
||||||
latitude: log.latitude,
|
|
||||||
longitude: log.longitude,
|
|
||||||
frame_number: log.frame,
|
|
||||||
timestamp_ms: Math.round(log.timestamp_seconds * 1000),
|
|
||||||
}));
|
|
||||||
const allDetections = summaryDetections.length
|
|
||||||
? summaryDetections
|
|
||||||
: logDetections;
|
|
||||||
const mapDetections = allDetections
|
|
||||||
.filter(
|
|
||||||
(detection) =>
|
|
||||||
typeof detection.latitude === 'number' &&
|
|
||||||
typeof detection.longitude === 'number',
|
|
||||||
)
|
|
||||||
.map((detection, index) => ({
|
|
||||||
id:
|
|
||||||
typeof detection.id === 'number'
|
|
||||||
? detection.id
|
|
||||||
: Number.parseInt(detection.id.replace(/\D/g, ''), 10) || index + 1,
|
|
||||||
type: detection.type,
|
|
||||||
class: detection.class || detection.type,
|
|
||||||
confidence: detection.confidence || 0,
|
|
||||||
latitude: detection.latitude as number,
|
|
||||||
longitude: detection.longitude as number,
|
|
||||||
frame_number: detection.frame_number,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
|
|
||||||
<Card className="flex flex-col lg:col-span-2 overflow-hidden">
|
|
||||||
<CardHeader className="pb-3">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="p-2 rounded bg-secondary">
|
|
||||||
<MapIcon className="h-5 w-5 text-primary" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<CardTitle className="text-base font-bold">Segments</CardTitle>
|
|
||||||
<CardDescription className="text-xs">
|
|
||||||
{modeConfig.label} detected
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setShowMap(true)}
|
|
||||||
className="gap-2"
|
|
||||||
>
|
|
||||||
<MapIcon className="h-4 w-4" />
|
|
||||||
Map
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 p-0 overflow-hidden">
|
|
||||||
<ScrollArea className="h-[300px]">
|
|
||||||
<div className="space-y-4 p-4">
|
|
||||||
{loading ? (
|
|
||||||
<div className="rounded-md border bg-muted/30 p-6 text-sm text-muted-foreground">
|
|
||||||
Loading segment summary...
|
|
||||||
</div>
|
|
||||||
) : summaryData ? (
|
|
||||||
<>
|
|
||||||
{/* Project Info */}
|
|
||||||
<div className="pb-3 border-b">
|
|
||||||
<div className="flex flex-col mb-2">
|
|
||||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
||||||
Project
|
|
||||||
</span>
|
|
||||||
<span className="text-sm font-bold">
|
|
||||||
{summaryData.project.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{summaryData.project.corridor_name && (
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
|
|
||||||
Corridor
|
|
||||||
</span>
|
|
||||||
<span className="text-xs font-semibold text-muted-foreground">
|
|
||||||
{summaryData.project.corridor_name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Packages and Chainages */}
|
|
||||||
{Object.entries(summaryData.packages).map(
|
|
||||||
([packageName, packageData]) => (
|
|
||||||
<div key={packageData.package_id} className="space-y-2">
|
|
||||||
<div className="text-xs font-bold text-muted-foreground truncate">
|
|
||||||
{packageName}
|
|
||||||
</div>
|
|
||||||
<div className="pl-2 space-y-2 border-l-2 border-muted">
|
|
||||||
{Object.entries(packageData.chainages).map(
|
|
||||||
([chainageName, chainageData]) => (
|
|
||||||
<div
|
|
||||||
key={chainageData.chainage_id}
|
|
||||||
className="text-xs p-3 rounded-md bg-muted/50 flex items-center justify-between gap-4"
|
|
||||||
>
|
|
||||||
<div className="font-semibold truncate">
|
|
||||||
{chainageName}
|
|
||||||
</div>
|
|
||||||
<div className="text-[10px] bg-background px-2 py-0.5 rounded border font-bold">
|
|
||||||
{chainageData.detection_count}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<div className="rounded-md border bg-muted/30 p-6 text-sm text-muted-foreground">
|
|
||||||
Segment summary is not available for this result.
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="flex flex-col lg:col-span-3 overflow-hidden">
|
|
||||||
<CardHeader className="pb-3">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<div className="p-2 rounded bg-secondary">
|
|
||||||
<Activity className="h-5 w-5 text-primary" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<CardTitle className="text-base font-bold">
|
|
||||||
All Detections
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription className="text-xs">
|
|
||||||
Complete list with GPS coordinates
|
|
||||||
</CardDescription>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex-1 p-0 overflow-hidden">
|
|
||||||
<ScrollArea className="h-[300px]">
|
|
||||||
<div className="space-y-2 p-4">
|
|
||||||
{allDetections.length === 0 ? (
|
|
||||||
<div className="rounded-md border bg-muted/30 p-6 text-sm text-muted-foreground">
|
|
||||||
No detailed detections available.
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
allDetections.map((detection, idx) => (
|
|
||||||
<div
|
|
||||||
key={`${detection.id}-${idx}`}
|
|
||||||
className="text-xs p-3 bg-muted/30 border rounded-md hover:bg-muted/50 transition-colors"
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between mb-2">
|
|
||||||
<span className="font-bold">
|
|
||||||
{(detection.class || detection.type || '').replace(
|
|
||||||
/_/g,
|
|
||||||
' ',
|
|
||||||
)}{' '}
|
|
||||||
#{detection.id}
|
|
||||||
</span>
|
|
||||||
<Badge variant="outline" className="text-[10px] font-mono">
|
|
||||||
Frame {detection.frame_number}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-2 gap-2 text-[10px] text-muted-foreground">
|
|
||||||
{detection.chainageName && (
|
|
||||||
<div className="truncate">
|
|
||||||
Segment:{' '}
|
|
||||||
<span className="text-foreground font-medium">
|
|
||||||
{detection.chainageName}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{typeof detection.confidence === 'number' && (
|
|
||||||
<div>
|
|
||||||
Confidence:{' '}
|
|
||||||
<span className="text-foreground font-medium">
|
|
||||||
{(detection.confidence * 100).toFixed(1)}%
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{typeof detection.latitude === 'number' &&
|
|
||||||
typeof detection.longitude === 'number' ? (
|
|
||||||
<div className="col-span-2 font-mono bg-muted/50 p-1 rounded border">
|
|
||||||
GPS: {detection.latitude}, {detection.longitude}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="col-span-2 font-mono bg-muted/50 p-1 rounded border text-muted-foreground">
|
|
||||||
GPS: Not available
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Map Modal */}
|
|
||||||
<MapModal
|
|
||||||
open={showMap}
|
|
||||||
onClose={() => setShowMap(false)}
|
|
||||||
detections={mapDetections}
|
|
||||||
detectionType={detectionType}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DetailedSummarySection;
|
|
||||||
@@ -14,22 +14,15 @@ import { useAnnotatedVideoQuery } from '@/app/(modules)/results/hooks/useVideoRe
|
|||||||
import AnnotatedVideoPlayer from './video/annotatedVideoPlayer';
|
import AnnotatedVideoPlayer from './video/annotatedVideoPlayer';
|
||||||
import CurrentDetectionBar from './video/currentDetectionBar';
|
import CurrentDetectionBar from './video/currentDetectionBar';
|
||||||
import DetectionLogs from './video/detectionLogs';
|
import DetectionLogs from './video/detectionLogs';
|
||||||
import DetailedSummarySection from './video/detailedSummarySection';
|
|
||||||
import ResultStatsGrid from './video/resultStatsGrid';
|
import ResultStatsGrid from './video/resultStatsGrid';
|
||||||
import { useDetectionPlayback } from './video/useDetectionPlayback';
|
import { useDetectionPlayback } from './video/useDetectionPlayback';
|
||||||
|
|
||||||
type VideoPlayerSectionProps = {
|
type VideoPlayerSectionProps = {
|
||||||
data: CompletedVideoResult;
|
data: CompletedVideoResult;
|
||||||
videoId: string;
|
|
||||||
detectionType: string;
|
|
||||||
projectId?: string;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function VideoPlayerSection({
|
export default function VideoPlayerSection({
|
||||||
data,
|
data,
|
||||||
videoId,
|
|
||||||
detectionType,
|
|
||||||
projectId,
|
|
||||||
}: VideoPlayerSectionProps) {
|
}: VideoPlayerSectionProps) {
|
||||||
const videoRef = useRef<HTMLVideoElement>(null);
|
const videoRef = useRef<HTMLVideoElement>(null);
|
||||||
const {
|
const {
|
||||||
@@ -80,8 +73,6 @@ export default function VideoPlayerSection({
|
|||||||
onSeeked={handleSeeked}
|
onSeeked={handleSeeked}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ResultStatsGrid data={data} />
|
|
||||||
|
|
||||||
<CurrentDetectionBar
|
<CurrentDetectionBar
|
||||||
activeLog={activeLog}
|
activeLog={activeLog}
|
||||||
summary={data.summary}
|
summary={data.summary}
|
||||||
@@ -94,15 +85,13 @@ export default function VideoPlayerSection({
|
|||||||
onSeek={handleSeek}
|
onSeek={handleSeek}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6">
|
||||||
|
<ResultStatsGrid data={data} />
|
||||||
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<DetailedSummarySection
|
|
||||||
projectId={projectId || ''}
|
|
||||||
videoId={videoId}
|
|
||||||
detectionType={detectionType}
|
|
||||||
logs={sortedLogs}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user