added support for downloading multiple download configuration

client/src/MainLayout/index.jsx

@@ -202,7 +202,7 @@ export const MainLayout = ({
   const debugModeOn = Boolean(window.localStorage.$ANNOTATE_DEBUG_MODE && state)
   const nextImageHasRegions =
     !nextImage || (nextImage.regions && nextImage.regions.length > 0)
-
+  const selectedImages = state.images.filter((image) => image.selected)
   return (
     <ThemeProvider theme={theme}>
           <HotkeyDiv
@@ -220,6 +220,7 @@ export const MainLayout = ({
               hideHeaderText={hideHeaderText}
               selectedImageName={state.images[currentImageIndex]?.src.split('/').pop()}
               classList = {state.regionClsList}
+              selectedImages={selectedImages}
               headerLeftSide={[
                 state.annotationType === "video" ? (
                   <KeyframeTimeline

client/src/utils/get-data-from-server.js

@@ -15,7 +15,7 @@ export const getImageFile = (api, configuration) => {
     return new Promise((resolve, reject) => {      
       axios.post(`${config.SERVER_URL}/${api}`, configuration, { responseType: 'blob' })
         .then(response => {
-            const url = window.URL.createObjectURL(new Blob([response.data]));
+            const url = window.URL.createObjectURL(new Blob([response.data], { type: response.data.type }));
             resolve(url);
         })
         .catch(error => {

client/src/workspace/DownloadButton/DownloadButton.test.js

@@ -32,7 +32,7 @@ describe('DownloadButton', () => {
     const mockHandleDownload = jest.fn();
     const selectedImageName = 'example.png';
     const classList = ['class1', 'class2', 'class3']; // Example class list
-
+    const selectedImages = [{ src: 'example.png' }]
     const getImageFileSpy = jest.spyOn(require('../../utils/get-data-from-server.js'), 'getImageFile');
 
     const { getByText } = render(
@@ -41,6 +41,7 @@ describe('DownloadButton', () => {
         classList={classList}
         hideHeaderText={false}
         disabled={false}
+        selectedImages= {selectedImages}
         handleDownload={mockHandleDownload}
       />
     );

client/src/workspace/DownloadButton/index.jsx

@@ -14,8 +14,11 @@ import HeaderButton from "../HeaderButton/index.jsx";
 import { useTranslation } from "react-i18next"
 import config from "../../config.js";
 
-const DownloadButton = ({selectedImageName, classList, hideHeaderText, disabled}) => {
+const DownloadButton = ({selectedImageName, classList, hideHeaderText, disabled, selectedImages}) => {
   const [anchorEl, setAnchorEl] = useState(null);
+  const getImageNames = () => { 
+    return selectedImages.map(image => image.src.split('/').pop())
+  }
   const { showSnackbar } = useSnackbar();
   const {t} = useTranslation();
   const handleClick = (event) => {
@@ -35,6 +38,7 @@ const DownloadButton = ({selectedImageName, classList, hideHeaderText, disabled}
   const handleDownload = (format) => {
     const config_data = {}
     config_data['image_name'] = selectedImageName
+    config_data['image_names'] = getImageNames()
     config_data['colorMap'] = classColorMap
     config_data['outlineThickness'] = config.OUTLINE_THICKNESS_CONFIG
     let url = ""
@@ -64,6 +68,10 @@ const DownloadButton = ({selectedImageName, classList, hideHeaderText, disabled}
                     link.setAttribute('download', `config_${withoutExtension}.json`); 
                 } else if (format === "yolo-annotations") {
                     link.setAttribute('download', `yolo_${withoutExtension}.txt`);
+                } else if (format === "masked-image") {
+                    link.setAttribute('download', `${withoutExtension}_mask`);
+                } else if (format == "annotated-image"){
+                    link.setAttribute('download', `${withoutExtension}_annotated`);
                 } else {
                     link.setAttribute('download', `${withoutExtension}_${format}.png`);
                 }

client/src/workspace/Header/Header.test.js

@@ -31,15 +31,15 @@ describe("Header", () => {
   ];
 
   const mockClass = ['class1', 'class2', 'class3']
-
-
+  const selectedImages = []
   beforeEach(() => {
     render(
       <Header
         items={items}
         onClickItem={mockOnClickItem}
         selectedImageName="image1"
         classList={mockClass}
+        selectedImages={selectedImages}
       />
     );
   });
@@ -79,6 +79,7 @@ describe("Header", () => {
         onClickItem={mockOnClickItem}
         selectedImageName="image1"
         classList={mockClass}
+        selectedImages={selectedImages}
       />
     );
 

client/src/workspace/Header/index.jsx

@@ -29,12 +29,14 @@ export const Header = ({
   items,
   onClickItem,
   selectedImageName,
-  classList
+  classList,
+  selectedImages
 }) => {
 
   const{ t } = useTranslation()
   const downloadMenu = items.find((item) => item.name === "Download")
-
+  const isDownloadDisabled= downloadMenu && downloadMenu.disabled && selectedImages && selectedImages.length <= 0
+
   return (
     <ThemeProvider theme={theme}>
       <Container data-testid="header">
@@ -43,7 +45,7 @@ export const Header = ({
         </BrandText>
         <Box flexGrow={1}>{leftSideContent}</Box>
         {downloadMenu && <DownloadButton selectedImageName={selectedImageName} classList={classList} hideHeaderText={hideHeaderText} 
-                onDownload={onClickItem} disabled={downloadMenu.disabled}
+                onDownload={onClickItem} disabled={isDownloadDisabled} selectedImages={selectedImages}
                 />
           }
         {items.filter(item => item.name !== "Download").map((item) => (

client/src/workspace/Workspace/index.jsx

@@ -42,6 +42,7 @@ export default ({
   hideHeader = false,
   hideHeaderText = false,
   children,
+  selectedImages = emptyAr,
   selectedImageName,
   classList
 }) => {
@@ -58,6 +59,7 @@ export default ({
               items={headerItems}
               selectedImageName={selectedImageName}
               classList={classList}
+              selectedImages={selectedImages}
             />
           )}
           <SidebarsAndContent ref={sidebarAndContentRef}>