sumn2u · sumn2u · Jun 20, 2024 · Jun 20, 2024
diff --git a/client/src/Annotation/index.jsx b/client/src/Annotation/index.jsx
@@ -49,6 +49,7 @@ const userReducer = (state, action) => {
 export default () => {
   const [selectedImageIndex, changeSelectedImageIndex] = useState(0)
   const [showLabel, setShowLabel] = useState(false)
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
   const [imageNames, setImageNames] = useState([])
   const settingsConfig = useSettings()
   const { showSnackbar } = useSnackbar();
@@ -112,6 +113,7 @@ export default () => {
           images: payload
         };
       });
+      changeSelectedImageIndex(0)
       setImageNames(payload)
     }
   };
@@ -125,7 +127,7 @@ export default () => {
       const images = await Promise.all(fetchPromises);
       setSettings(prevSettings => ({
         ...prevSettings,
-        images
+        imagesBlob: images
       }));
       setImageNames(images);
     } catch (error) {
@@ -144,24 +146,24 @@ export default () => {
      const savedConfiguration = settingsConfig.settings|| {};
      if (savedConfiguration.configuration && savedConfiguration.configuration.labels.length > 0) {
        setSettings(savedConfiguration);
-       setShowLabel(true)
+       if (settings.images.length > 0) {
+          fetchImages(settings.images);
+        }
      }
   }
-
+
+  const showAnnotationLab = () => {
+    preloadConfiguration();
+  }
   useEffect(() => {
     preloadConfiguration();
-    if (settings.images.length > 0) {
-      fetchImages(settings.images);
-    } else {
-      setLoading(false);
-    }
-  }, [settingsConfig.settings, showLabel]);
+  }, [ ]);
 
 
   return (
     <>
     { !showLabel ? ( // Render loading indicator if loading is true
-        <SetupPage setConfiguration={setConfiguration} settings={settings} setShowLabel={setShowLabel}/>
+        <SetupPage setConfiguration={setConfiguration} settings={settings} setShowLabel={setShowLabel} showAnnotationLab={showAnnotationLab}/>
       ) : (
     <Annotator
       taskDescription={settings.taskDescription || "Annotate each image according to this _markdown_ specification."}
@@ -179,7 +181,11 @@ export default () => {
       showTags={true}
       selectedTool= {getToolSelectionType(settings.configuration.regions)}
       openDocs={() => window.open(config.DOCS_URL, '_blank')}
-      hideSettings={true}
+      hideSettings={false}
+      onShowSettings = {() => {
+        setIsSettingsOpen(!isSettingsOpen)
+        setShowLabel(false)
+      }}
       selectedImageIndex={selectedImageIndex}
     />)}
     </>

diff --git a/client/src/Annotator/index.jsx b/client/src/Annotator/index.jsx
@@ -49,6 +49,7 @@ export const Annotator = ({
   settings,
   keypointDefinitions,
   onSelectJump,
+  onShowSettings,
   openDocs,
   hideHeader,
   hideHeaderText,
@@ -160,6 +161,8 @@ export const Annotator = ({
         }
       } else if (action.buttonName === "Docs" ) {
         return openDocs();
+      } else if (action.buttonName === "Settings") {
+        return onShowSettings();
       }
     }
     dispatchToReducer(action);
@@ -241,7 +244,8 @@ Annotator.propTypes = {
   hideSave: PropTypes.bool,
   enabledRegionProps: PropTypes.arrayOf(PropTypes.string),
   userReducer: PropTypes.func,
-  onSelectJump: PropTypes.func
+  onSelectJump: PropTypes.func,
+  onShowSettings: PropTypes.func
 }
 
 export default Annotator
diff --git a/client/src/ImageUpload/ImageUpload.test.js b/client/src/ImageUpload/ImageUpload.test.js
@@ -13,6 +13,23 @@ jest.mock('../config.js', () => ({
 
 jest.mock('axios')
 
+const images = [
+  {
+    src: 'http://127.0.0.1:5000/uploads/clothes.jpeg',
+    name: 'clothes',
+    selectedClsList: '',
+    comment: '',
+    processed: false,
+  },
+  {
+    src: 'http://127.0.0.1:5000/uploads/shoes.jpeg',
+    name: 'shoes',
+    selectedClsList: '',
+    comment: '',
+    processed: false,
+  },
+];
+
 // Mock the useTranslation hook
 jest.mock('react-i18next', () => ({
     useTranslation: () => ({
@@ -33,7 +50,7 @@ useSnackbar.mockReturnValue({ showSnackbar: mockShowSnackbar })
 
 const renderComponent = (props = {}) =>
   render(
-    <ImageUpload {...props} />
+    <ImageUpload  settingsImages={images} {...props} />
   )
 
 describe('ImageUpload', () => {

diff --git a/client/src/ImageUpload/index.jsx b/client/src/ImageUpload/index.jsx
@@ -7,10 +7,10 @@ import { useSnackbar } from '../SnackbarContext';
 import { useTranslation } from "react-i18next"
 import config from '../config.js';
 
-const ImageUpload = ({ onImageUpload }) => {
+const ImageUpload = ({ onImageUpload, settingsImages }) => {
   const { t } = useTranslation(); 
   const { showSnackbar } = useSnackbar();
-  const [images, setImages] = useState([]);
+  const [images, setImages] = useState(settingsImages);
   const [loading, setLoading] = useState(false);
   const [progress, setProgress] = useState(0);
 
@@ -102,7 +102,18 @@ const ImageUpload = ({ onImageUpload }) => {
 
   const handleRemoveImage = (index) => {
     const imageToRemove = images[index];
-    deleteImage(imageToRemove.filename);
+    if (imageToRemove && !imageToRemove.filename) {
+      if (imageToRemove.src) {
+        let parts = imageToRemove.src.split('/');
+        let filename = parts[parts.length - 1];
+        imageToRemove.filename = filename;
+      }
+    }
+    if (imageToRemove && imageToRemove.filename) {
+      deleteImage(imageToRemove.filename);
+    } else {
+      console.error('Error deleting image: imageToRemove or imageToRemove.filename is undefined');
+    }
   };
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
@@ -165,7 +176,7 @@ const ImageUpload = ({ onImageUpload }) => {
             alignItems="center"
           >
             <img
-              src={image.preview}
+              src={image.preview || image.src}
               alt="preview"
               style={{
                 width: '100px',

diff --git a/client/src/RegionSelectorSidebarBox/index.jsx b/client/src/RegionSelectorSidebarBox/index.jsx
@@ -84,7 +84,6 @@ const RowLayout = ({
 const RowHeader = ({ regions, onChangeRegion, onDeleteRegion }) => {
   const visible = regions.find(r => r.visible === false) == null;
   const locked = regions.find(r => r.locked === false) == null;
-  console.log(visible, locked)
   const {t} = useTranslation();
   return (
     <RowLayout

diff --git a/client/src/SetupPage/index.jsx b/client/src/SetupPage/index.jsx
@@ -50,7 +50,8 @@ const StyledCardContent = styled(CardContent)(({ theme }) => ({
   }));
 
 
-export const SetupPage = ({setConfiguration, settings, setShowLabel}) => {
+export const SetupPage = ({setConfiguration, settings, setShowLabel, showAnnotationLab}) => {
+  const { configuration } = settings;
   const [currentTab, setTab] = useState("datatype");
   const [hasConfig, setHasConfig] = useState(false);
   const settingsConfig = useSettings()
@@ -63,13 +64,15 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel}) => {
 
   const handleImageUpload = (images) => {
     const extractedNames = images.map(image => {
-      const src = image.preview;
-      const selectedClsList = ''; // Assuming 'cls' information is not present
-      const comment = ''; // Assuming 'comment' information is not present
-      const processed = false; // Assuming 'processed' information is not present
-      const name = image.filename.split('.')[0]; // Remove file extension from image name
+      const src = image.preview || image.src;
+      const selectedClsList = '' || image.selectedClsList; // Assuming 'cls' information is not present
+      const comment = '' || image.comment; // Assuming 'comment' information is not present
+      const processed = false || image.processed; // Assuming 'processed' information is not present
+      const name = image.filename?.split('.')[0] || image.name; // Remove file extension from image name
       return { src, name, selectedClsList, comment, processed };
     });
+    settings.images = extractedNames;
+    settingsConfig.changeSetting('settings',settings);
     setConfiguration({type: "UPDATE_IMAGES", payload: extractedNames})
   };
 
@@ -78,11 +81,11 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel}) => {
   }
 
   const showLab = ()=> {
-    const { configuration } = settings;
     const hasLabels = configuration.labels.length > 0;
     setShowLabel(hasLabels)
     if(hasLabels) {
       settingsConfig.changeSetting('settings',settings);
+      showAnnotationLab()
     }
   }
 
@@ -94,7 +97,6 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel}) => {
   const isConfigComplete = settings.configuration.labels.length > 0;
   const isImagesUploaded = settings.images.length > 0;
 
-
   return (
     <Box display="flex"  justifyContent="center"  minHeight="100vh" marginTop={"5rem"}>
         <Box>
@@ -153,7 +155,7 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel}) => {
                 <Typography gutterBottom sx={{ fontWeight: 'bold', color: 'rgb(66, 66, 66)', fontSize: '18px' }}>
                   {t("btn.upload_images")}
                 </Typography>
-                <ImageUpload onImageUpload={handleImageUpload} />
+                <ImageUpload onImageUpload={handleImageUpload} settingsImages={settings.images} />
               </Box>
               <Box display="flex"  justifyContent="end">
                 <Button variant="contained" disabled={!isImagesUploaded} onClick={showLab} disableElevation>

diff --git a/sample_images/example.png b/sample_images/example.png