From b9af71dd1844ba63a8492f52334a33e1786a77e9 Mon Sep 17 00:00:00 2001 From: sumn2u Date: Wed, 19 Jun 2024 22:37:05 -0500 Subject: [PATCH] added settings button and its functionalities --- client/src/Annotation/index.jsx | 28 +++++++++++------- client/src/Annotator/index.jsx | 6 +++- client/src/ImageUpload/ImageUpload.test.js | 19 +++++++++++- client/src/ImageUpload/index.jsx | 19 +++++++++--- client/src/RegionSelectorSidebarBox/index.jsx | 1 - client/src/SetupPage/index.jsx | 20 +++++++------ sample_images/example.png | Bin 1671007 -> 481874 bytes 7 files changed, 66 insertions(+), 27 deletions(-) diff --git a/client/src/Annotation/index.jsx b/client/src/Annotation/index.jsx index 66feba5..7ad7294 100644 --- 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 - + ) : ( { 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 index d2dadfc..7c2bf2b 100644 --- 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 index fa7d3ea..da60617 100644 --- 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( - + ) describe('ImageUpload', () => { diff --git a/client/src/ImageUpload/index.jsx b/client/src/ImageUpload/index.jsx index 70311b9..e82f6e2 100644 --- 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" > preview { 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 ( ({ })); -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 ( @@ -153,7 +155,7 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel}) => { {t("btn.upload_images")} - +