ui/src/components/DetectionContainer.js

// src/components/DetectionContainer.js
import React from 'react';
import Detection from './Detection';

function DetectionContainer({ detections, selectedDetectionIndices, calculateColor, onDetectionMouseDown, currentDetection, onResize }) {

    return (
        <>
            {detections.map((detection, index) => (
                <Detection
                    key={index}
                    detection={detection}
                    isSelected={selectedDetectionIndices.includes(index)}
                    onDetectionMouseDown={(e) => onDetectionMouseDown(e, index)}
                    onResize={(e, position) => onResize(e, index, position)}
                />
            ))}
            {currentDetection && (
                <Detection
                    detection={currentDetection}
                    isSelected={false}
                    onDetectionMouseDown={() => {}} // No-op handler for the current detection
                    onResize={() => {}}           // No-op handler for the current detection
                />
            )}
        </>
    );
}

export default DetectionContainer;