update filter error

index.html

@@ -548,6 +548,17 @@ let filteredRows = [];      // current filtered rows based on group/scene select
 // CSV drag-drop
 setupDrop('csvZone', 'csvInput', handleCSVFiles);
 
+// Handle window resize for video overlay
+window.addEventListener('resize', () => {
+  if (activeScene && document.getElementById('videoEl').style.display !== 'none') {
+    const frameNum = lastDrawnFrame;
+    if (frameNum >= 0) {
+      // Redraw with new dimensions
+      drawOverlay(frameNum);
+    }
+  }
+});
+
 function setupDrop(zoneId, inputId, handler) {
   const zone  = document.getElementById(zoneId);
   const input = document.getElementById(inputId);
@@ -646,6 +657,11 @@ function buildDashboard() {
   renderSceneTable();
   renderSceneSelector();
   populateFilterDropdowns();
+  
+  // Reset filter selections when loading new data
+  document.getElementById('groupFilter').value = '';
+  document.getElementById('sceneFilter').value = '';
+  filteredRows = [];
 
   showPage('dash');
   toast(`Loaded ${allRows.length.toLocaleString()} detections across ${Object.keys(scenes).length} scene(s).`, 'ok');
@@ -957,18 +973,19 @@ function drawOverlay(frameNum) {
   const vid    = document.getElementById('videoEl');
   const wrap   = document.getElementById('videoWrap');
 
+  // Get actual display dimensions
+  const displayWidth = wrap.offsetWidth;
+  const displayHeight = wrap.offsetHeight;
+
   // Set canvas to actual display size (not internal resolution)
-  canvas.style.width = wrap.offsetWidth + 'px';
-  canvas.style.height = wrap.offsetHeight + 'px';
+  canvas.style.width = displayWidth + 'px';
+  canvas.style.height = displayHeight + 'px';
   
   // Internal resolution for drawing (higher precision)
-  canvas.width  = wrap.offsetWidth * window.devicePixelRatio;
-  canvas.height = wrap.offsetHeight * window.devicePixelRatio;
+  canvas.width  = displayWidth * window.devicePixelRatio;
+  canvas.height = displayHeight * window.devicePixelRatio;
   ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
 
-  const displayWidth = wrap.offsetWidth;
-  const displayHeight = wrap.offsetHeight;
-
   ctx.clearRect(0, 0, displayWidth, displayHeight);
 
   if (!activeScene) return;
@@ -990,12 +1007,38 @@ function drawOverlay(frameNum) {
   }
 
   // Get original frame dimensions from CSV
-  const frameWidth = parseInt(rows[0]?.frame_width) || displayWidth;
-  const frameHeight = parseInt(rows[0]?.frame_height) || displayHeight;
+  const frameWidth = parseInt(rows[0]?.frame_width);
+  const frameHeight = parseInt(rows[0]?.frame_height);
 
-  // Calculate scale factors (CSV coords → display coords)
-  const scaleX = displayWidth / frameWidth;
-  const scaleY = displayHeight / frameHeight;
+  if (!frameWidth || !frameHeight) {
+    ctx.font = '12px DM Mono';
+    ctx.fillStyle = 'rgba(255,255,255,0.3)';
+    ctx.fillText(`FRAME ${frameNum} - Invalid frame dimensions`, 10, displayHeight - 10);
+    return;
+  }
+
+  // Calculate scale factors accounting for video aspect ratio and display size
+  // Video maintains aspect ratio with object-fit:contain, so we need to calculate the actual video display area
+  const videoAspect = frameWidth / frameHeight;
+  const displayAspect = displayWidth / displayHeight;
+  
+  let scaleX, scaleY, offsetX = 0, offsetY = 0;
+  
+  if (displayAspect > videoAspect) {
+    // Display is wider than video - letterbox left/right
+    const scaledHeight = displayHeight;
+    const scaledWidth = scaledHeight * videoAspect;
+    offsetX = (displayWidth - scaledWidth) / 2;
+    scaleX = scaledWidth / frameWidth;
+    scaleY = scaledHeight / frameHeight;
+  } else {
+    // Display is taller than video - letterbox top/bottom
+    const scaledWidth = displayWidth;
+    const scaledHeight = scaledWidth / videoAspect;
+    offsetY = (displayHeight - scaledHeight) / 2;
+    scaleX = scaledWidth / frameWidth;
+    scaleY = scaledHeight / frameHeight;
+  }
 
   const liveCounts = {};
 
@@ -1005,11 +1048,11 @@ function drawOverlay(frameNum) {
     const x2  = parseInt(r.bbox_x2);
     const y2  = parseInt(r.bbox_y2);
     
-    // Scale to display coordinates
-    const dispX1 = x1 * scaleX;
-    const dispY1 = y1 * scaleY;
-    const dispX2 = x2 * scaleX;
-    const dispY2 = y2 * scaleY;
+    // Scale to display coordinates accounting for aspect ratio and centering
+    const dispX1 = offsetX + x1 * scaleX;
+    const dispY1 = offsetY + y1 * scaleY;
+    const dispX2 = offsetX + x2 * scaleX;
+    const dispY2 = offsetY + y2 * scaleY;
     
     const w   = dispX2 - dispX1;
     const h   = dispY2 - dispY1;
@@ -1036,8 +1079,8 @@ function drawOverlay(frameNum) {
     ctx.fillText(lbl, dispX1 + 4, dispY1 - 4);
 
     // Center dot (scaled)
-    const cx = parseInt(r.cx) * scaleX;
-    const cy = parseInt(r.cy) * scaleY;
+    const cx = parseInt(r.cx) * scaleX + offsetX;
+    const cy = parseInt(r.cy) * scaleY + offsetY;
     ctx.beginPath();
     ctx.arc(cx, cy, 4, 0, Math.PI*2);
     ctx.fillStyle = col;
@@ -1046,8 +1089,8 @@ function drawOverlay(frameNum) {
     liveCounts[r.class_name] = (liveCounts[r.class_name]||0) + 1;
   });
 
-  // Counting line (55% height)
-  const lineY = displayHeight * 0.55;
+  // Counting line (55% height from video area top)
+  const lineY = offsetY + (displayHeight - offsetY * 2) * 0.55;
   ctx.setLineDash([8, 6]);
   ctx.strokeStyle = '#e8ff47';
   ctx.lineWidth   = 1.5;
@@ -1122,8 +1165,13 @@ function populateFilterDropdowns() {
     groups.add(r.group_id || '?');
   });
 
-  // Populate group filter
+  // Populate group filter - clear first to avoid duplicates
   const groupSelect = document.getElementById('groupFilter');
+  // Remove all options except the first "ALL GROUPS"
+  while (groupSelect.options.length > 1) {
+    groupSelect.remove(1);
+  }
+  
   const groupOptions = Array.from(groups).sort();
   groupOptions.forEach(group => {
     const option = document.createElement('option');
@@ -1140,8 +1188,10 @@ function updateSceneFilter() {
   const selectedGroup = document.getElementById('groupFilter').value;
   const sceneSelect = document.getElementById('sceneFilter');
   
-  // Clear existing options except "ALL SCENES"
-  sceneSelect.innerHTML = '<option value="">ALL SCENES</option>';
+  // Clear existing options except "ALL SCENES" - remove all except first
+  while (sceneSelect.options.length > 1) {
+    sceneSelect.remove(1);
+  }
   
   // Get scenes for selected group (or all scenes if no group selected)
   const sceneNames = new Set();