53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo } from 'react';
|
|
import type { ColumnDef } from '@tanstack/react-table';
|
|
|
|
import type { DetectionResultItem } from '@/types';
|
|
|
|
function formatTimestamp(seconds: number) {
|
|
const minutes = Math.floor(seconds / 60);
|
|
const remainingSeconds = Math.floor(seconds % 60);
|
|
return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
|
|
}
|
|
|
|
export function useIssueColumns(): ColumnDef<DetectionResultItem>[] {
|
|
return useMemo(
|
|
() => [
|
|
{
|
|
id: 'detection_id',
|
|
header: 'Detection ID',
|
|
size: 140,
|
|
cell: ({ row }) => `#${row.original.detection.id}`,
|
|
},
|
|
{
|
|
id: 'issue_type',
|
|
header: 'Issue Type',
|
|
size: 180,
|
|
cell: ({ row }) => row.original.detection.display_name,
|
|
},
|
|
{
|
|
id: 'confidence',
|
|
header: 'Confidence',
|
|
size: 130,
|
|
cell: ({ row }) =>
|
|
`${Math.round(row.original.detection.confidence * 100)}%`,
|
|
},
|
|
{
|
|
id: 'frame',
|
|
header: 'Frame',
|
|
size: 100,
|
|
cell: ({ row }) => row.original.frame.number,
|
|
},
|
|
{
|
|
id: 'timestamp',
|
|
header: 'Timestamp',
|
|
size: 130,
|
|
cell: ({ row }) =>
|
|
formatTimestamp(row.original.frame.timestamp_seconds),
|
|
},
|
|
],
|
|
[],
|
|
);
|
|
}
|