add type to detections

src/components/AnnotationMain/AnnotationMain.js

@@ -8,6 +8,7 @@ import * as AnnotationService from '../../services/AnnotationService';
 import AnnotationControls from '../AnnotationControls/AnnotationControls';
 import saveAnnotation from '../../services/DataHandler';
 import './AnnotationMain.css';
+import { detectionTypes } from '../../constants/detectionTypes';
 
 function AnnotationMain() {
     const [files, setFiles] = useState([]);
@@ -21,6 +22,7 @@ function AnnotationMain() {
     const [videoWidth, setVideoWidth] = useState(640);
     const [videoHeight, setVideoHeight] = useState(480);
     const [errorMessage, setErrorMessage] = useState("");
+    const [detectionType, setDetectionType] = useState(detectionTypes.day)
 
     const videoRef = useRef(null);
     const containerRef = useRef(null);
@@ -71,7 +73,8 @@ function AnnotationMain() {
         const imageData = AnnotationService.createAnnotationImage(
             videoRef,
             detections,
-            safeContainerRef
+            safeContainerRef,
+            detectionType
         );
 
         if (imageData) {
@@ -186,7 +189,11 @@ function AnnotationMain() {
                     onDropNewFiles={handleDropNewFiles}
                 />
 
-                <DetectionClassList onClassSelect={handleClassSelect} />
+                <DetectionClassList
+                    onClassSelect={handleClassSelect}
+                    detectionType={detectionType}
+                    setDetectionType={setDetectionType}
+                />
             </div>
 
             <div className='player-wrapper' >
@@ -214,6 +221,7 @@ function AnnotationMain() {
                                 onDetectionsChange={handleDetectionsChange}
                                 onSelectionChange={handleSelectionChange}
                                 detectionClass={selectedClass}
+                                detectionType={detectionType}
                             />
                         </VideoPlayer>
                     </div>

src/components/CanvasEditor/CanvasEditor.js

@@ -12,7 +12,8 @@ function CanvasEditor({
     onDetectionsChange,
     onSelectionChange,
     children,
-    detectionClass
+    detectionClass,
+    detectionType
 }) {
     const containerRef = useRef(null);
     const [currentDetection, setCurrentDetection] = useState(initialCurrentDetection);
@@ -258,6 +259,7 @@ function CanvasEditor({
                     onDetectionMouseDown={handleDetectionMouseDown}
                     currentDetection={currentDetection}
                     onResize={handleResize}
+                    detectionType={detectionType}
                 />
             </div>
         </div>

src/components/Detection.js

@@ -1,6 +1,7 @@
 import React from 'react';
+import { detectionTypes } from '../constants/detectionTypes';
 
-function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) {
+function Detection({ detection, isSelected, onDetectionMouseDown, onResize, detectionType }) {
     if (!detection || !detection.class) {
         return null;
     }
@@ -13,10 +14,6 @@ function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) {
     }
 
     // Use startsWith to correctly handle RGBA and hex colors
-    const backgroundColor = color.startsWith('rgba')
-        ? color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, 'rgba($1, $2, $3, 0.4)')
-        : color.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/, 'rgba($1, $2, $3, 0.4)');
-
     const borderColor = color.startsWith('rgba')
         ? color.replace(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)/, 'rgba($1, $2, $3, 1)')
         : color;
@@ -40,7 +37,6 @@ function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) {
         top: `${detection.y1}px`,
         width: `${detection.x2 - detection.x1}px`,
         height: `${detection.y2 - detection.y1}px`,
-        backgroundColor: backgroundColor,
         border: `2px solid ${borderColor}`,
         boxSizing: 'border-box',
         cursor: isSelected ? 'move' : 'default',
@@ -50,7 +46,7 @@ function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) {
 
     if (isSelected) {
         style.border = `3px solid black`;
-        style.boxShadow = `0 0 4px 2px ${borderColor}`;
+        style.boxShadow = `0 0 4px 4px ${borderColor}`;
     }
 
     const handleMouseDown = (e) => {
@@ -92,7 +88,7 @@ function Detection({ detection, isSelected, onDetectionMouseDown, onResize }) {
                 textShadow: '1px 1px 2px black',
                 pointerEvents: 'none'
             }}>
-                {detection.class.Name}
+                {detection.class.Name} {detectionType !== detectionTypes.day && '(' + detectionType + ')'}
             </span>
         </div>
     );

src/components/DetectionClassList/DetectionClassList.css

@@ -21,4 +21,36 @@
     font-weight: 500;
     margin-bottom: 2px;
     border-radius: 4px;
+}
+
+.detection-type-group {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 5%;
+    padding: 10px 12px;
+}
+
+.detection-type-btn {
+    width: 25%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    padding: 4px 10px;
+    border-radius: 4px;
+}
+
+.detection-type-btn:hover {
+    background: #d6eed5;
+}
+
+.active-type {
+    color: white;
+    background: black;
+}
+
+.active-type:hover {
+    cursor: default;
+    background: black;
 }

src/components/DetectionClassList/DetectionClassList.js

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import DetectionClass from '../../models/DetectionClass';
 import './DetectionClassList.css';
+import { MdOutlineNightlightRound, MdOutlineWbSunny } from "react-icons/md";
+import { FaRegSnowflake } from 'react-icons/fa';
+import { detectionTypes } from '../../constants/detectionTypes';
 
-function DetectionClassList({ onClassSelect }) {
+function DetectionClassList({ onClassSelect, detectionType, setDetectionType }) {
     const [detectionClasses, setDetectionClasses] = useState([]);
     const [selectedClass, setSelectedClass] = useState(null);
 
@@ -83,6 +86,10 @@ function DetectionClassList({ onClassSelect }) {
         onClassSelect && onClassSelect(cls);
     };
 
+    const handleTypeClick = (type) => {
+        setDetectionType(type);
+    }
+
     return (
         <div className='class-list'>
             <h3 className='menu-title'>Classes</h3>
@@ -107,6 +114,29 @@ function DetectionClassList({ onClassSelect }) {
                     );
                 })}
             </ul>
+
+            <div className='detection-type-group'>
+                <button className={detectionType == detectionTypes.day
+                    ? 'detection-type-btn active-type'
+                    : 'detection-type-btn'} title='День'
+                    onClick={() => handleTypeClick(detectionTypes.day)}>
+                    <MdOutlineWbSunny />
+                </button>
+
+                <button className={detectionType == detectionTypes.night
+                    ? 'detection-type-btn active-type'
+                    : 'detection-type-btn'} title='Ніч'
+                    onClick={() => handleTypeClick(detectionTypes.night)}>
+                    <MdOutlineNightlightRound />
+                </button>
+
+                <button className={detectionType == detectionTypes.winter
+                    ? 'detection-type-btn active-type'
+                    : 'detection-type-btn'} title='Зима'
+                    onClick={() => handleTypeClick(detectionTypes.winter)}>
+                    <FaRegSnowflake />
+                </button>
+            </div>
         </div>
     );
 }

src/components/DetectionContainer.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import Detection from './Detection';
 
-function DetectionContainer({ detections, selectedDetectionIndices, onDetectionMouseDown, currentDetection, onResize }) {
+function DetectionContainer({ detections, selectedDetectionIndices, onDetectionMouseDown, currentDetection, onResize, detectionType }) {
 
     return (
         <>
@@ -13,6 +13,7 @@ function DetectionContainer({ detections, selectedDetectionIndices, onDetectionM
                     isSelected={selectedDetectionIndices.includes(index)}
                     onDetectionMouseDown={(e) => onDetectionMouseDown(e, index)}
                     onResize={(e, position) => onResize(e, index, position)}
+                    detectionType={detectionType}
                 />
             ))}
             {currentDetection && (
@@ -21,6 +22,7 @@ function DetectionContainer({ detections, selectedDetectionIndices, onDetectionM
                     isSelected={false}
                     onDetectionMouseDown={() => {}} // No-op handler for the current detection
                     onResize={() => {}}           // No-op handler for the current detection
+                    detectionType={detectionType}
                 />
             )}
         </>