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

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

@@ -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 size-6 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white"
-                          style={{ backgroundColor: rangeColor }}
-                          aria-label={isStart ? 'Start issue' : 'End issue'}
-                        >
+                        <span className="flex shrink-0 items-center gap-1.5 text-xs font-semibold">
+                          <span
+                            className="size-3 rounded-full"
+                            style={{ backgroundColor: rangeColor }}
+                          />
                           {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>
           </>
         )}