fix annotation

src/components/AnnotationList/AnnotationList.js

@@ -6,8 +6,8 @@ function AnnotationList({ annotations, onAnnotationClick }) {
             <h3 className='menu-title'>Annotations</h3>
             <ul className='annotation-list'>
                 {annotations.map((annotation, index) => (
-                    <li className='annotation-list-item' key={index} onClick={() => onAnnotationClick(annotation.time)}>
-                        Frame {index + 1} - {annotation.annotations.length} objects
+                    <li className='annotation-list-item' key={index} onClick={() => onAnnotationClick(index)}>
+                        Frame {index + 1} - {annotation.detections.length} objects
                     </li>
                 ))}
             </ul>

src/components/AnnotationMain/AnnotationMain.js

@@ -13,7 +13,7 @@ import { detectionTypes } from '../../constants/detectionTypes';
 function AnnotationMain() {
     const [files, setFiles] = useState([]);
     const [selectedFile, setSelectedFile] = useState(null);
-    const [annotations, setAnnotations] = useState({});
+    const [annotations, setAnnotations] = useState([]);
     const [currentTime, setCurrentTime] = useState(0);
     const [selectedClass, setSelectedClass] = useState(null);
     const [detections, setDetections] = useState([]);
@@ -36,7 +36,7 @@ function AnnotationMain() {
         if (!file) return;
 
         setSelectedFile(file);
-        setAnnotations({});
+        setAnnotations([]);
         setDetections([]);
         setSelectedDetectionIndices([]);
         setCurrentTime(0);
@@ -79,11 +79,12 @@ function AnnotationMain() {
 
         if (imageData) {
             const newAnnotations = {
-                ...annotations,
-                [currentTime]: { time: currentTime, annotations: detections, imageData }
+                time: currentTime,
+                detections: detections,
+                imageData: imageData
             };
 
-            setAnnotations(newAnnotations);
+            setAnnotations(prevAnnotation => [...prevAnnotation, newAnnotations]);
 
             saveAnnotation(currentTime, detections, imageData);
             setErrorMessage("");
@@ -106,15 +107,15 @@ function AnnotationMain() {
         setDetections([]);
     }
 
-    const handleAnnotationClick = (time) => {
-        setCurrentTime(time);
-        const annotation = annotations[time];
+    const handleAnnotationClick = (index) => {
+        const annotation = annotations[index];
         if (annotation) {
-            setDetections(annotation.annotations || []);
+            setCurrentTime(annotation.time);
+            setDetections(annotation.detections || []);
             setSelectedDetectionIndices([]);
         }
         if (videoRef.current) {
-            videoRef.current.currentTime = time;
+            videoRef.current.currentTime = annotation.time;
         }
         setIsPlaying(false);
     };
@@ -244,7 +245,7 @@ function AnnotationMain() {
 
             <div className='side-menu right-menu'>
                 <AnnotationList
-                    annotations={Object.values(annotations)}
+                    annotations={annotations}
                     onAnnotationClick={handleAnnotationClick}
                 />
             </div>