normalize path and points sizes

web/src/components/overlay/ObjectTrackOverlay.tsx

@@ -58,6 +58,47 @@ export default function ObjectTrackOverlay({
 
   const effectiveCurrentTime = currentTime - annotationOffset / 1000;
 
+  const {
+    pathStroke,
+    pointRadius,
+    pointStroke,
+    zoneStroke,
+    boxStroke,
+    highlightRadius,
+  } = useMemo(() => {
+    const BASE_WIDTH = 1280;
+    const BASE_HEIGHT = 720;
+    const BASE_PATH_STROKE = 5;
+    const BASE_POINT_RADIUS = 7;
+    const BASE_POINT_STROKE = 3;
+    const BASE_ZONE_STROKE = 5;
+    const BASE_BOX_STROKE = 5;
+    const BASE_HIGHLIGHT_RADIUS = 5;
+
+    const scale = Math.sqrt(
+      (videoWidth * videoHeight) / (BASE_WIDTH * BASE_HEIGHT),
+    );
+
+    const pathStroke = Math.max(1, Math.round(BASE_PATH_STROKE * scale));
+    const pointRadius = Math.max(2, Math.round(BASE_POINT_RADIUS * scale));
+    const pointStroke = Math.max(1, Math.round(BASE_POINT_STROKE * scale));
+    const zoneStroke = Math.max(1, Math.round(BASE_ZONE_STROKE * scale));
+    const boxStroke = Math.max(1, Math.round(BASE_BOX_STROKE * scale));
+    const highlightRadius = Math.max(
+      2,
+      Math.round(BASE_HIGHLIGHT_RADIUS * scale),
+    );
+
+    return {
+      pathStroke,
+      pointRadius,
+      pointStroke,
+      zoneStroke,
+      boxStroke,
+      highlightRadius,
+    };
+  }, [videoWidth, videoHeight]);
+
   // Fetch all event data in a single request (CSV ids)
   const { data: eventsData } = useSWR<Event[]>(
     selectedObjectIds.length > 0
@@ -333,7 +374,7 @@ export default function ObjectTrackOverlay({
           points={zone.points}
           fill={zone.fill}
           stroke={zone.stroke}
-          strokeWidth="5"
+          strokeWidth={zoneStroke}
           opacity="0.7"
         />
       ))}
@@ -353,7 +394,7 @@ export default function ObjectTrackOverlay({
                 d={generateStraightPath(absolutePositions)}
                 fill="none"
                 stroke={objData.color}
-                strokeWidth="5"
+                strokeWidth={pathStroke}
                 strokeLinecap="round"
                 strokeLinejoin="round"
               />
@@ -365,13 +406,13 @@ export default function ObjectTrackOverlay({
                   <circle
                     cx={pos.x}
                     cy={pos.y}
-                    r="7"
+                    r={pointRadius}
                     fill={getPointColor(
                       objData.color,
                       pos.lifecycle_item?.class_type,
                     )}
                     stroke="white"
-                    strokeWidth="3"
+                    strokeWidth={pointStroke}
                     style={{ cursor: onSeekToTime ? "pointer" : "default" }}
                     onClick={() => handlePointClick(pos.timestamp)}
                   />
@@ -400,7 +441,7 @@ export default function ObjectTrackOverlay({
                   height={objData.currentBox[3] * videoHeight}
                   fill="none"
                   stroke={objData.color}
-                  strokeWidth="5"
+                  strokeWidth={boxStroke}
                   opacity="0.9"
                 />
                 <circle
@@ -412,10 +453,10 @@ export default function ObjectTrackOverlay({
                     (objData.currentBox[1] + objData.currentBox[3]) *
                     videoHeight
                   }
-                  r="5"
+                  r={highlightRadius}
                   fill="rgb(255, 255, 0)" // yellow highlight
                   stroke={objData.color}
-                  strokeWidth="5"
+                  strokeWidth={boxStroke}
                   opacity="1"
                 />
               </g>