From a6ecb29ab7ae2cf02e279b2175794674381e124b Mon Sep 17 00:00:00 2001
From: Mateo <mateo.lostanlen@gmail.com>
Date: Fri, 1 May 2026 16:38:01 +0200
Subject: [PATCH 1/2] fix: remove fill from bbox overlays

The semi-transparent fill obscured pixels inside bounding boxes,
which made fire/smoke analysis harder. Keep only the colored border.

- Drop bg-*/20 fill on AI-prediction overlays (sequence player,
  full-image sequence, ImageOverlays.BoundingBoxOverlay)
- Drop bg-blue-400/20 on the in-progress drawing rectangle
- Drop the unused background field from SmokeTypeColors and update
  user-annotation / drawn-rectangle overlays accordingly

Closes #109
---
 .../src/components/annotation/FullImageSequence.tsx |  2 +-
 .../src/components/annotation/ImageOverlays.tsx     |  8 ++++----
 frontend/src/components/sequence/SequencePlayer.tsx |  2 +-
 frontend/src/utils/annotation/drawingUtils.ts       | 13 ++++++-------
 .../tests/utils/annotation/drawingUtils.test.ts     |  3 ---
 5 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/annotation/FullImageSequence.tsx b/frontend/src/components/annotation/FullImageSequence.tsx
index 6d5e15f..ff12327 100644
--- a/frontend/src/components/annotation/FullImageSequence.tsx
+++ b/frontend/src/components/annotation/FullImageSequence.tsx
@@ -178,7 +178,7 @@ export default function FullImageSequence({
 
     return (
       <div
-        className="absolute border-2 border-red-500 bg-red-500/20 pointer-events-none"
+        className="absolute border-2 border-red-500 pointer-events-none"
         style={{
           left: `${bboxLeft}px`,
           top: `${bboxTop}px`,
diff --git a/frontend/src/components/annotation/ImageOverlays.tsx b/frontend/src/components/annotation/ImageOverlays.tsx
index 9c26b68..43ba19c 100644
--- a/frontend/src/components/annotation/ImageOverlays.tsx
+++ b/frontend/src/components/annotation/ImageOverlays.tsx
@@ -38,7 +38,7 @@ export function BoundingBoxOverlay({ detection, imageInfo }: BoundingBoxOverlayP
           return (
             <div
               key={`bbox-${detection.id}-${index}`}
-              className="absolute border-2 border-red-500 bg-red-500/20 pointer-events-none"
+              className="absolute border-2 border-red-500 pointer-events-none"
               style={{
                 left: `${left}px`,
                 top: `${top}px`,
@@ -108,7 +108,7 @@ export function UserAnnotationOverlay({
           return (
             <div
               key={`user-annotation-${detectionAnnotation.detection_id}-${index}`}
-              className={`absolute border-2 ${colors.border} ${colors.background} pointer-events-none`}
+              className={`absolute border-2 ${colors.border} pointer-events-none`}
               style={{
                 left: `${left}px`,
                 top: `${top}px`,
@@ -204,7 +204,7 @@ export function DrawingOverlay({
         return (
           <div
             key={rect.id}
-            className={`absolute border-2 ${isSelected ? 'border-yellow-400' : colors.border} ${colors.background} pointer-events-auto cursor-pointer`}
+            className={`absolute border-2 ${isSelected ? 'border-yellow-400' : colors.border} pointer-events-auto cursor-pointer`}
             style={{
               left: `${left}px`,
               top: `${top}px`,
@@ -234,7 +234,7 @@ export function DrawingOverlay({
           const { left, top, width, height } = renderRectangle(currentDrawing, 'drawing');
           return (
             <div
-              className="absolute border-2 border-dashed border-blue-400 bg-blue-400/20 pointer-events-none"
+              className="absolute border-2 border-dashed border-blue-400 pointer-events-none"
               style={{
                 left: `${left}px`,
                 top: `${top}px`,
diff --git a/frontend/src/components/sequence/SequencePlayer.tsx b/frontend/src/components/sequence/SequencePlayer.tsx
index 2e6f945..b38e96d 100644
--- a/frontend/src/components/sequence/SequencePlayer.tsx
+++ b/frontend/src/components/sequence/SequencePlayer.tsx
@@ -242,7 +242,7 @@ export default function SequencePlayer({
         return (
           <div
             key={`bbox-${currentDetection.id}-${index}`}
-            className="absolute border-2 border-red-500 bg-red-500/20 pointer-events-none"
+            className="absolute border-2 border-red-500 pointer-events-none"
             style={{
               left: `${left}px`,
               top: `${top}px`,
diff --git a/frontend/src/utils/annotation/drawingUtils.ts b/frontend/src/utils/annotation/drawingUtils.ts
index 13e6ef1..947e78f 100644
--- a/frontend/src/utils/annotation/drawingUtils.ts
+++ b/frontend/src/utils/annotation/drawingUtils.ts
@@ -30,7 +30,6 @@ export interface CurrentDrawing {
  */
 export interface SmokeTypeColors {
   border: string;
-  background: string;
 }
 
 /**
@@ -42,24 +41,24 @@ export type DrawingMode = 'view' | 'draw' | 'select';
  * Gets the color scheme for a specific smoke type.
  *
  * @param smokeType - The smoke type to get colors for
- * @returns Color configuration for borders and backgrounds
+ * @returns Color configuration for the bbox border
  *
  * @example
  * ```typescript
  * const colors = getSmokeTypeColors('wildfire');
- * // Returns: { border: 'border-red-500', background: 'bg-red-500/15' }
+ * // Returns: { border: 'border-red-500' }
  * ```
  */
 export const getSmokeTypeColors = (smokeType: SmokeType): SmokeTypeColors => {
   switch (smokeType) {
     case 'wildfire':
-      return { border: 'border-red-500', background: 'bg-red-500/15' };
+      return { border: 'border-red-500' };
     case 'industrial':
-      return { border: 'border-purple-500', background: 'bg-purple-500/15' };
+      return { border: 'border-purple-500' };
     case 'other':
-      return { border: 'border-blue-500', background: 'bg-blue-500/15' };
+      return { border: 'border-blue-500' };
     default:
-      return { border: 'border-green-500', background: 'bg-green-500/10' };
+      return { border: 'border-green-500' };
   }
 };
 
diff --git a/frontend/tests/utils/annotation/drawingUtils.test.ts b/frontend/tests/utils/annotation/drawingUtils.test.ts
index c9408a4..59a8b63 100644
--- a/frontend/tests/utils/annotation/drawingUtils.test.ts
+++ b/frontend/tests/utils/annotation/drawingUtils.test.ts
@@ -25,19 +25,16 @@ describe('drawingUtils', () => {
     it('should return correct colors for wildfire', () => {
       const colors = getSmokeTypeColors('wildfire');
       expect(colors.border).toBe('border-red-500');
-      expect(colors.background).toBe('bg-red-500/15');
     });
 
     it('should return correct colors for industrial', () => {
       const colors = getSmokeTypeColors('industrial');
       expect(colors.border).toBe('border-purple-500');
-      expect(colors.background).toBe('bg-purple-500/15');
     });
 
     it('should return correct colors for other', () => {
       const colors = getSmokeTypeColors('other');
       expect(colors.border).toBe('border-blue-500');
-      expect(colors.background).toBe('bg-blue-500/15');
     });
   });
 

From 9f29dc5d57f6201d6f2f5a113a5ba988f01309d2 Mon Sep 17 00:00:00 2001
From: Mateo <mateo.lostanlen@gmail.com>
Date: Fri, 1 May 2026 16:39:29 +0200
Subject: [PATCH 2/2] refactor: replace smoke-type switch with a Record lookup

---
 frontend/src/utils/annotation/drawingUtils.ts | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/utils/annotation/drawingUtils.ts b/frontend/src/utils/annotation/drawingUtils.ts
index 947e78f..95a0ad6 100644
--- a/frontend/src/utils/annotation/drawingUtils.ts
+++ b/frontend/src/utils/annotation/drawingUtils.ts
@@ -37,6 +37,12 @@ export interface SmokeTypeColors {
  */
 export type DrawingMode = 'view' | 'draw' | 'select';
 
+const SMOKE_TYPE_BORDER: Record<SmokeType, string> = {
+  wildfire: 'border-red-500',
+  industrial: 'border-purple-500',
+  other: 'border-blue-500',
+};
+
 /**
  * Gets the color scheme for a specific smoke type.
  *
@@ -49,18 +55,9 @@ export type DrawingMode = 'view' | 'draw' | 'select';
  * // Returns: { border: 'border-red-500' }
  * ```
  */
-export const getSmokeTypeColors = (smokeType: SmokeType): SmokeTypeColors => {
-  switch (smokeType) {
-    case 'wildfire':
-      return { border: 'border-red-500' };
-    case 'industrial':
-      return { border: 'border-purple-500' };
-    case 'other':
-      return { border: 'border-blue-500' };
-    default:
-      return { border: 'border-green-500' };
-  }
-};
+export const getSmokeTypeColors = (smokeType: SmokeType): SmokeTypeColors => ({
+  border: SMOKE_TYPE_BORDER[smokeType],
+});
 
 /**
  * Creates a new DrawnRectangle from current drawing state.