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

refactor(ticket): use video detections for assignment map and remove coordinates API

Browse Source
This commit is contained in:
santasri.pachhal
2026-07-31 19:02:25 +05:30
parent 9cd7186357
commit 514b42ea91
9 changed files with 257 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
src/app/(modules)/ticket/[ticketId]/assign/components/AssignmentIssuesMap.tsx
View File

@@ -5,11 +5,7 @@ import dynamic from 'next/dynamic';
import { AlertTriangle, MapPinned, RefreshCw } from 'lucide-react';
import { getDefectVisual } from '@/constants/defectVisualConfig';
import type {
DetectionCoordinateClass,
DetectionCoordinateItem,
DetectionCoordinatesResponse,
} from '@/types';
import type { DetectionResultItem, VideoDetectionsResponse } from '@/types';
import { Button } from '@/components/ui/button';
import {
Card,
@@ -20,51 +16,80 @@ import {
} from '@/components/ui/card';
import type { AssignmentRangePoint } from './assignmentRange';
import { AssignmentRangeActions } from './AssignmentRangeActions';
type AssignmentIssuesMapProps = {
data?: DetectionCoordinatesResponse;
data?: VideoDetectionsResponse;
isLoading: boolean;
isFetchingMore: boolean;
isError: boolean;
hasMore: boolean;
startPoint: AssignmentRangePoint | null;
endPoint: AssignmentRangePoint | null;
onSetStart: (point: AssignmentRangePoint) => void;
onSetEnd: (point: AssignmentRangePoint) => void;
onLoadMore: () => void;
onRetry: () => void;
};
type AssignmentMapItem = {
id: number;
class_name: string;
display_name: string;
latitude: number;
longitude: number;
confidence: number;
sequence: number;
};
type AssignmentMapClass = {
class_name: string;
display_name: string;
};
type ClientAssignmentIssuesMapProps = {
items: DetectionCoordinateItem[];
classes: DetectionCoordinateClass[];
items: AssignmentMapItem[];
classes: AssignmentMapClass[];
selectedDetectionId: number | null;
startPoint: AssignmentRangePoint | null;
endPoint: AssignmentRangePoint | null;
onSelectDetection: (detectionId: number) => void;
onSetStart: (point: AssignmentRangePoint) => void;
onSetEnd: (point: AssignmentRangePoint) => void;
};
function isValidCoordinate(item: DetectionCoordinateItem) {
return (
Number.isFinite(item.latitude) &&
Number.isFinite(item.longitude) &&
item.latitude >= -90 &&
item.latitude <= 90 &&
item.longitude >= -180 &&
item.longitude <= 180
);
function toMapItem(item: DetectionResultItem): AssignmentMapItem | null {
const { latitude, longitude } = item.location;
if (
typeof latitude !== 'number' ||
typeof longitude !== 'number' ||
!Number.isFinite(latitude) ||
!Number.isFinite(longitude) ||
latitude < -90 ||
latitude > 90 ||
longitude < -180 ||
longitude > 180
) {
return null;
}
return {
id: item.detection.id,
class_name: item.detection.class_name,
display_name: item.detection.display_name,
latitude,
longitude,
confidence: item.detection.confidence,
sequence: item.frame.timestamp_seconds,
};
}
const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
async () => {
const { CircleMarker, MapContainer, Popup, TileLayer, Tooltip, useMap } =
await import('react-leaflet');
const {
CircleMarker,
MapContainer,
Polyline,
Popup,
TileLayer,
Tooltip,
useMap,
} = await import('react-leaflet');
const { canvas } = await import('leaflet');
function FitMapToIssues({ items }: { items: DetectionCoordinateItem[] }) {
function FitMapToIssues({ items }: { items: AssignmentMapItem[] }) {
const map = useMap();
useEffect(() => {
@@ -96,8 +121,6 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
startPoint,
endPoint,
onSelectDetection,
onSetStart,
onSetEnd,
}: ClientAssignmentIssuesMapProps) {
const markerRenderer = useMemo(() => canvas({ tolerance: 12 }), []);
const displayNames = new Map(
@@ -107,6 +130,27 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
items[0].latitude,
items[0].longitude,
];
const orderedItems = [...items].sort(
(first, second) =>
first.sequence - second.sequence || first.id - second.id,
);
const startIndex = orderedItems.findIndex(
(item) => item.id === startPoint?.detectionId,
);
const endIndex = orderedItems.findIndex(
(item) => item.id === endPoint?.detectionId,
);
const hasSelectedRange = startIndex >= 0 && endIndex >= 0;
const rangeItems = hasSelectedRange
? orderedItems.slice(
Math.min(startIndex, endIndex),
Math.max(startIndex, endIndex) + 1,
)
: [];
const rangeDetectionIds = new Set(rangeItems.map((item) => item.id));
const rangePath = rangeItems.map(
(item) => [item.latitude, item.longitude] as [number, number],
);
return (
<MapContainer
@@ -119,7 +163,30 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
attribution="&copy; OpenStreetMap contributors"
url="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<FitMapToIssues items={items} />
<FitMapToIssues items={hasSelectedRange ? rangeItems : items} />
{rangePath.length >= 2 ? (
<>
<Polyline
positions={rangePath}
interactive={false}
pathOptions={{
color: '#3b82f6',
opacity: 0.18,
weight: 26,
}}
/>
<Polyline
positions={rangePath}
interactive={false}
pathOptions={{
color: '#2563eb',
opacity: 0.9,
weight: 4,
}}
/>
</>
) : null}
{items.map((item) => {
const visual = getDefectVisual(item.class_name);
@@ -127,35 +194,37 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
const isSelected = selectedDetectionId === item.id;
const isStart = startPoint?.detectionId === item.id;
const isEnd = endPoint?.detectionId === item.id;
const rangeLabel = isStart ? 'A' : isEnd ? 'B' : null;
const rangeLabel = isStart ? 'Start' : isEnd ? 'End' : null;
const rangeColor = isStart
? '#16a34a'
: isEnd
? '#dc2626'
: visual.boundingBoxColor;
const isRangeIssue = isStart || isEnd;
const isInsideRange = rangeDetectionIds.has(item.id);
const displayName =
displayNames.get(item.class_name) ??
item.display_name ??
item.class_name.replaceAll('_', ' ');
const point: AssignmentRangePoint = {
detectionId: item.id,
latitude: item.latitude,
longitude: item.longitude,
};
return (
<CircleMarker
key={item.id}
center={[item.latitude, item.longitude]}
renderer={markerRenderer}
radius={isSelected || isRangeIssue ? 11 : 8}
radius={isSelected || isRangeIssue ? 11 : isInsideRange ? 9 : 7}
pathOptions={{
color:
isSelected || isRangeIssue
? '#ffffff'
: visual.boundingBoxColor,
fillColor: rangeColor,
fillOpacity: isSelected || isRangeIssue ? 1 : 0.82,
fillOpacity:
isSelected || isRangeIssue
? 1
: hasSelectedRange && !isInsideRange
? 0.22
: 0.82,
opacity: hasSelectedRange && !isInsideRange ? 0.3 : 1,
weight: isSelected || isRangeIssue ? 4 : 2,
}}
eventHandlers={{
@@ -183,11 +252,11 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
</p>
</div>
{rangeLabel ? (
<span className="flex shrink-0 items-center gap-1.5 text-xs font-semibold">
<span
className="flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white"
className="size-3 rounded-full"
style={{ backgroundColor: rangeColor }}
aria-label={isStart ? 'Start issue' : 'End issue'}
>
/>
{rangeLabel}
</span>
) : null}
@@ -213,22 +282,17 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
</dd>
</div>
</dl>
<div className="border-t pt-3">
<AssignmentRangeActions
point={point}
startPoint={startPoint}
endPoint={endPoint}
onSetStart={onSetStart}
onSetEnd={onSetEnd}
stretch
/>
</div>
</div>
</Popup>
{rangeLabel ? (
<Tooltip permanent direction="center" opacity={1}>
{rangeLabel}
<Tooltip
permanent
direction="top"
offset={[0, -10]}
opacity={1}
className="range-point-label"
>
<span style={{ color: rangeColor }}>{rangeLabel}</span>
</Tooltip>
) : null}
</CircleMarker>
@@ -247,25 +311,38 @@ const ClientAssignmentIssuesMap = dynamic<ClientAssignmentIssuesMapProps>(
export function AssignmentIssuesMap({
data,
isLoading,
isFetchingMore,
isError,
hasMore,
startPoint,
endPoint,
onSetStart,
onSetEnd,
onLoadMore,
onRetry,
}: AssignmentIssuesMapProps) {
const [selectedDetectionId, setSelectedDetectionId] = useState<number | null>(
null,
);
const validItems = useMemo(
() => (data?.items ?? []).filter(isValidCoordinate),
() =>
(data?.items ?? []).flatMap((item) => {
const mapItem = toMapItem(item);
return mapItem ? [mapItem] : [];
}),
[data?.items],
);
const total = data?.total ?? 0;
const loadedCount = Math.min(data?.items.length ?? 0, total);
const classes = useMemo(
() =>
Array.from(
new Map(
validItems.map((item) => [
item.class_name,
{
class_name: item.class_name,
display_name: item.display_name,
},
]),
).values(),
),
[validItems],
);
const pageItemCount = data?.items.length ?? 0;
useEffect(() => {
if (
@@ -287,7 +364,7 @@ export function AssignmentIssuesMap({
<div>
<CardTitle className="text-base">Issues on Map</CardTitle>
<CardDescription>
Click a marker, then choose Start or End.
Select Start and End in the table to preview the covered range.
</CardDescription>
</div>
</div>
@@ -329,13 +406,11 @@ export function AssignmentIssuesMap({
<div className="h-[440px] min-w-0 bg-muted">
<ClientAssignmentIssuesMap
items={validItems}
classes={data?.classes ?? []}
classes={classes}
selectedDetectionId={selectedDetectionId}
startPoint={startPoint}
endPoint={endPoint}
onSelectDetection={setSelectedDetectionId}
onSetStart={onSetStart}
onSetEnd={onSetEnd}
/>
</div>
@@ -344,7 +419,7 @@ export function AssignmentIssuesMap({
aria-label="Map legend"
>
<span className="text-sm font-medium">Map legend</span>
{(data?.classes ?? []).map((item) => {
{classes.map((item) => {
const visual = getDefectVisual(item.class_name);
const IssueIcon = visual.icon;
@@ -366,27 +441,33 @@ export function AssignmentIssuesMap({
</div>
);
})}
{startPoint ? (
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span className="size-4 rounded-full border-2 border-white bg-green-600 shadow-sm" />
<span>Start</span>
</div>
) : null}
{endPoint ? (
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span className="size-4 rounded-full border-2 border-white bg-red-600 shadow-sm" />
<span>End</span>
</div>
) : null}
{startPoint && endPoint ? (
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span className="relative h-4 w-8 rounded-full bg-blue-500/20">
<span className="absolute top-1/2 right-0 left-0 h-0.5 -translate-y-1/2 bg-blue-600" />
</span>
<span>Coverage area</span>
</div>
) : null}
</div>
<div className="flex items-center justify-between gap-3 border-t px-4 py-3">
<div className="border-t px-4 py-3">
<span className="text-sm text-muted-foreground">
Showing {loadedCount} of {total}
{validItems.length} mapped from {pageItemCount} cached{' '}
{pageItemCount === 1 ? 'issue' : 'issues'}
</span>
{hasMore ? (
<Button
type="button"
variant="outline"
size="sm"
onClick={onLoadMore}
disabled={isFetchingMore}
>
{isFetchingMore ? 'Loading...' : 'Load more issues'}
</Button>
) : (
<span className="text-sm text-muted-foreground">
All issues are shown
</span>
)}
</div>
</>
)}

121
src/app/(modules)/ticket/[ticketId]/assign/components/ChooseIssuesSection.tsx
View File

@@ -1,17 +1,15 @@
'use client';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { X } from 'lucide-react';
import { FilterX } from 'lucide-react';
import { MultiSelectPopover } from '@/components/form/MultiSelectPopover';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import type { VideoDetectionsResponse } from '@/types';
import {
useDetectionCoordinatesQuery,
useTicketDetectionsQuery,
} from '../../../hooks/useTicketQueries';
import { useTicketDetectionsQuery } from '../../../hooks/useTicketQueries';
import {
formatCompactRangeCoordinate,
formatRangeCoordinate,
@@ -22,7 +20,6 @@ import { useIssueColumns } from './IssueColumns';
import { IssueTable } from './IssueTable';
const DEFAULT_PAGE_SIZE = 10;
const MAP_PAGE_SIZE = 50;
interface IssueTypeOption {
class_name: string;
@@ -34,6 +31,7 @@ interface ChooseIssuesSectionProps {
videoId?: string;
issueTypes: IssueTypeOption[];
selectedIssueTypes: string[];
cacheRevision: number;
startPoint: AssignmentRangePoint | null;
endPoint: AssignmentRangePoint | null;
onSelectedIssueTypesChange: (values: string[]) => void;
@@ -45,6 +43,7 @@ export function ChooseIssuesSection({
videoId,
issueTypes,
selectedIssueTypes,
cacheRevision,
startPoint,
endPoint,
onSelectedIssueTypesChange,
@@ -84,15 +83,21 @@ export function ChooseIssuesSection({
);
const handleIssueTypesChange = useCallback(
(values: string[]) => {
setSkip(0);
onSelectedIssueTypesChange(values);
onStartPointChange(null);
onEndPointChange(null);
},
[onEndPointChange, onSelectedIssueTypesChange, onStartPointChange],
);
useEffect(() => {
const hasActiveFilters =
selectedIssueTypes.length > 0 || startPoint !== null || endPoint !== null;
const clearFilters = useCallback(() => {
setSkip(0);
}, [selectedIssueTypes]);
onSelectedIssueTypesChange([]);
onStartPointChange(null);
onEndPointChange(null);
}, [onEndPointChange, onSelectedIssueTypesChange, onStartPointChange]);
const queryParams = useMemo(
() => ({
@@ -105,39 +110,56 @@ export function ChooseIssuesSection({
[limit, selectedIssueTypes, skip],
);
const detectionsQuery = useTicketDetectionsQuery(videoId, queryParams);
const mapQueryParams = useMemo(
() => ({
limit: MAP_PAGE_SIZE,
class_name:
selectedIssueTypes.length > 0 ? selectedIssueTypes : undefined,
assignment_status: 'unassigned' as const,
}),
[selectedIssueTypes],
);
const coordinatesQuery = useDetectionCoordinatesQuery(
videoId,
mapQueryParams,
);
const result = detectionsQuery.data;
const mapData = useMemo(() => {
const pages = coordinatesQuery.data?.pages;
const mapCacheKey = useMemo(
() => JSON.stringify([videoId ?? '', selectedIssueTypes, cacheRevision]),
[cacheRevision, selectedIssueTypes, videoId],
);
const [mapCache, setMapCache] = useState<
Record<string, VideoDetectionsResponse>
>({});
if (!pages?.length) return undefined;
useEffect(() => {
if (!result) return;
const latestPage = pages[pages.length - 1];
setMapCache((current) => {
const itemsById = new Map(
(current[mapCacheKey]?.items ?? []).map((item) => [
item.detection.id,
item,
]),
);
result.items.forEach((item) => itemsById.set(item.detection.id, item));
return {
...latestPage,
items: pages.flatMap((page) => page.items),
truncated: Boolean(coordinatesQuery.hasNextPage),
...current,
[mapCacheKey]: {
...result,
skip: 0,
limit: itemsById.size,
items: Array.from(itemsById.values()),
},
};
}, [coordinatesQuery.data?.pages, coordinatesQuery.hasNextPage]);
});
}, [mapCacheKey, result]);
const mapData = mapCache[mapCacheKey];
return (
<div className="min-w-0 space-y-5">
<Card size="sm" aria-label="Issue filters">
<CardHeader>
<CardHeader className="flex flex-row items-center justify-between gap-3">
<CardTitle>Filters</CardTitle>
<Button
type="button"
variant="ghost"
size="sm"
disabled={!hasActiveFilters}
onClick={clearFilters}
>
<FilterX />
Clear Filters
</Button>
</CardHeader>
<CardContent>
<div className="flex flex-wrap items-center gap-2">
@@ -177,40 +199,10 @@ export function ChooseIssuesSection({
</span>
</Badge>
) : null}
{startPoint !== null || endPoint !== null ? (
<Button
type="button"
variant="ghost"
size="icon"
className="size-8"
aria-label="Clear coordinate range"
onClick={() => {
onStartPointChange(null);
onEndPointChange(null);
}}
>
<X />
</Button>
) : null}
</div>
</CardContent>
</Card>
<AssignmentIssuesMap
data={mapData}
isLoading={coordinatesQuery.isLoading}
isFetchingMore={coordinatesQuery.isFetchingNextPage}
isError={coordinatesQuery.isError}
hasMore={Boolean(coordinatesQuery.hasNextPage)}
startPoint={startPoint}
endPoint={endPoint}
onSetStart={handleSetStart}
onSetEnd={handleSetEnd}
onLoadMore={() => void coordinatesQuery.fetchNextPage()}
onRetry={() => void coordinatesQuery.refetch()}
/>
<IssueTable
columns={columns}
issues={result?.items ?? []}
@@ -223,6 +215,15 @@ export function ChooseIssuesSection({
onPageChange={setSkip}
onLimitChange={setLimit}
/>
<AssignmentIssuesMap
data={mapData}
isLoading={detectionsQuery.isLoading && !mapData}
isError={detectionsQuery.isError && !mapData}
startPoint={startPoint}
endPoint={endPoint}
onRetry={() => void detectionsQuery.refetch()}
/>
</div>
);
}

3
src/app/(modules)/ticket/[ticketId]/assign/page.tsx
View File

@@ -42,6 +42,7 @@ export default function TicketAssignmentPage() {
);
const [endPoint, setEndPoint] = useState<AssignmentRangePoint | null>(null);
const [selectedIssueTypes, setSelectedIssueTypes] = useState<string[]>([]);
const [assignmentRevision, setAssignmentRevision] = useState(0);
const overviewQuery = useTicketOverviewQuery(ticketId);
const overview = overviewQuery.data;
const videoId = overview?.video_id ?? overview?.video?.id ?? undefined;
@@ -109,6 +110,7 @@ export default function TicketAssignmentPage() {
videoId={videoId}
issueTypes={overview.ai_result.detections_by_class}
selectedIssueTypes={selectedIssueTypes}
cacheRevision={assignmentRevision}
startPoint={startPoint}
endPoint={endPoint}
onSelectedIssueTypesChange={setSelectedIssueTypes}
@@ -151,6 +153,7 @@ export default function TicketAssignmentPage() {
onAssigned={() => {
setStartPoint(null);
setEndPoint(null);
setAssignmentRevision((revision) => revision + 1);
}}
/>
</PermissionGuard>

42
src/app/(modules)/ticket/hooks/useTicketQueries.ts
View File

@@ -13,7 +13,6 @@ import { detectionService, ticketService, videoService } from '@/services/api';
import type {
AssignTicketPayload,
CloseTicketPayload,
DetectionCoordinatesParams,
DiscardDetectionPayload,
RequestTicketExtensionPayload,
ReviewDetectionRepairProofPayload,
@@ -126,43 +125,7 @@ export function useTicketDetectionsQuery(
queryFn: () =>
videoService.getVideoDetections(videoId as string, queryParams),
enabled: Boolean(videoId),
});
}
export function useDetectionCoordinatesQuery(
videoId: string | undefined,
params: DetectionCoordinatesParams,
) {
const queryParams = useMemo<DetectionCoordinatesParams>(
() => ({
limit: params.limit ?? 50,
class_name: params.class_name,
assignment_status: params.assignment_status,
search: params.search,
}),
[params.assignment_status, params.class_name, params.limit, params.search],
);
return useInfiniteQuery({
queryKey: ticketKeys.detectionCoordinates(videoId ?? '', queryParams),
queryFn: ({ pageParam }) =>
detectionService.getCoordinates(videoId as string, {
...queryParams,
skip: pageParam,
}),
initialPageParam: 0,
getNextPageParam: (lastPage, allPages) => {
if (lastPage.items.length === 0) return undefined;
const loadedCount = allPages.reduce(
(total, page) => total + page.items.length,
0,
);
return loadedCount < lastPage.total ? loadedCount : undefined;
},
enabled: Boolean(videoId),
staleTime: 60 * 1000,
staleTime: Infinity,
});
}
@@ -320,9 +283,6 @@ export function useAssignTicketMutation(ticketId: string, videoId?: string) {
queryClient.invalidateQueries({
queryKey: ticketKeys.classDetectionLists(videoId),
}),
queryClient.invalidateQueries({
queryKey: ticketKeys.detectionCoordinateLists(videoId),
}),
]
: []),
]);

15
src/app/(modules)/ticket/queries/ticketKeys.ts
View File

@@ -1,8 +1,4 @@
import type {
DetectionCoordinatesParams,
TicketListParams,
VideoDetectionsParams,
} from '@/types';
import type { TicketListParams, VideoDetectionsParams } from '@/types';
export const ticketKeys = {
all: ['tickets'] as const,
@@ -17,15 +13,6 @@ export const ticketKeys = {
[...ticketKeys.details(), 'video', videoId, 'detections'] as const,
classDetections: (videoId: string, params: VideoDetectionsParams) =>
[...ticketKeys.classDetectionLists(videoId), params] as const,
detectionCoordinateLists: (videoId: string) =>
[
...ticketKeys.details(),
'video',
videoId,
'detection-coordinates',
] as const,
detectionCoordinates: (videoId: string, params: DetectionCoordinatesParams) =>
[...ticketKeys.detectionCoordinateLists(videoId), params] as const,
reviewDetections: (videoId: string, proofStatus?: string) =>
[
...ticketKeys.classDetectionLists(videoId),

22
src/app/globals.css
View File

@@ -1,8 +1,8 @@
@import 'tailwindcss';
@import 'tw-animate-css';
@import './typography.css';
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';
@custom-variant dark (&:is(.dark *));
@@ -152,7 +152,8 @@
html {
@apply font-sans;
}
button:not(:disabled), [role="button"]:not(:disabled) {
button:not(:disabled),
[role='button']:not(:disabled) {
cursor: pointer;
}
}
@@ -165,3 +166,18 @@
.vds-slider-preview:has(.vds-slider-thumbnail img[src^='blob:']) {
display: flex;
}
.leaflet-tooltip.range-point-label {
border: 0;
background: transparent;
box-shadow: none;
padding: 0;
font-weight: 700;
text-shadow:
0 1px 2px rgb(255 255 255 / 95%),
0 0 4px rgb(255 255 255 / 95%);
}
.leaflet-tooltip.range-point-label::before {
display: none;
}

1
src/constants/apiRoutes.ts
View File

@@ -57,7 +57,6 @@ export const API_ROUTES = {
ANNOTATION_FRAMES: (id: string) =>
`/biz/api/v1/results/${id}/annotation-frames`,
DETECTIONS: (id: string) => `/biz/api/v1/results/${id}/detections`,
COORDINATES: (id: string) => `/biz/api/v1/results/${id}/coordinates`,
},
DETECTIONS: {
DISCARD: (id: number) => `/biz/api/v1/detections/${id}/discard`,

32
src/services/api/detection.service.ts
View File

@@ -1,7 +1,5 @@
import { API_ROUTES } from '@/constants/apiRoutes';
import type {
DetectionCoordinatesParams,
DetectionCoordinatesResponse,
DiscardDetectionPayload,
DiscardDetectionResponse,
ReviewDetectionRepairProofPayload,
@@ -11,36 +9,6 @@ import type {
import axiosClient from '../axios/axios';
export const detectionService = {
getCoordinates: async (
videoId: string,
params?: DetectionCoordinatesParams,
): Promise<DetectionCoordinatesResponse> => {
const searchParams = new URLSearchParams();
params?.class_name?.forEach((className) => {
searchParams.append('class_name', className);
});
if (params?.skip !== undefined) {
searchParams.set('skip', String(params.skip));
}
if (params?.limit !== undefined) {
searchParams.set('limit', String(params.limit));
}
if (params?.assignment_status) {
searchParams.set('assignment_status', params.assignment_status);
}
if (params?.search) {
searchParams.set('search', params.search);
}
const response = await axiosClient.get<DetectionCoordinatesResponse>(
API_ROUTES.VIDEOS.COORDINATES(videoId),
{ params: searchParams },
);
return response.data;
},
discardDetection: async (
detectionId: number,
payload: DiscardDetectionPayload,

32
src/types/detection.ts
View File

@@ -5,38 +5,6 @@ export type DetectionClassCount = {
unique_count: number;
};
export type DetectionCoordinateClass = {
class_name: string;
display_name: string;
count: number;
};
export type DetectionCoordinateItem = {
id: number;
class_name: string;
latitude: number;
longitude: number;
confidence: number;
};
export type DetectionAssignmentStatus = 'assigned' | 'unassigned';
export type DetectionCoordinatesParams = {
skip?: number;
limit?: number;
class_name?: string[];
assignment_status?: DetectionAssignmentStatus;
search?: string;
};
export type DetectionCoordinatesResponse = {
total: number;
limit: number;
truncated: boolean;
classes: DetectionCoordinateClass[];
items: DetectionCoordinateItem[];
};
export type DetectionBoundingBox = {
x1: number;
y1: number;