From a4bb6c2c642c472a2e49943f6d1b9bb8636812b5 Mon Sep 17 00:00:00 2001
From: sumn2u <sumn2u@gmail.com>
Date: Tue, 25 Jun 2024 06:30:19 -0500
Subject: [PATCH 1/2] disable file download checkbox for images without regions

---
 client/src/FilesListMenu/index.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/FilesListMenu/index.jsx b/client/src/FilesListMenu/index.jsx
index 266803e..850b2cd 100644
--- a/client/src/FilesListMenu/index.jsx
+++ b/client/src/FilesListMenu/index.jsx
@@ -74,6 +74,10 @@ export const FilesListMenu = ({
   const handleCheckBoxClick = (image) => {
     onSelectFile(!image.selected)
   }
+  
+  const hasRegions = (imageIndex) => {
+    return allImages.length > 0 && allImages[imageIndex].regions.length > 0
+  }
 
   return (
     <ThemeProvider theme={theme}>
@@ -89,7 +93,6 @@ export const FilesListMenu = ({
             className={classnames({ selected: image.name === selectedImage })}
             key = {index}
           >
-
           <Checkbox
             sx={{
               padding: 0, 
@@ -102,7 +105,7 @@ export const FilesListMenu = ({
             checked={image.selected}
             onClick={() => handleCheckBoxClick(image, index)}
             data-testid="checkbox"
-            disabled={selectedImage !== null && selectedImage !== index}
+            disabled={(selectedImage !== null && selectedImage !== index) || !hasRegions(index)}
           />
             <span style={index === selectedImage? {backgroundColor: "rgba(255, 124, 120, 0.5)"} : {}}>
               <Label className={classnames({ selected: image.name === selectedImage })} style={ { backgroundColor: "withe" }} onClick={() => {handleClickLabel(image.name)}}>

From fd3bde07b7c9f08c6059a56e29a6eeec6332054d Mon Sep 17 00:00:00 2001
From: sumn2u <sumn2u@gmail.com>
Date: Tue, 25 Jun 2024 07:10:38 -0500
Subject: [PATCH 2/2] added tooltip for left sidebar action icons

---
 client/src/FilesListMenu/index.jsx            |   5 +-
 client/src/HistorySidebarBox/index.jsx        |   3 +
 client/src/Localization/translation-de-DE.js  |  14 ++
 client/src/Localization/translation-en-EN.js  |  14 ++
 client/src/RegionSelectorSidebarBox/index.jsx | 163 ++++++++++--------
 5 files changed, 129 insertions(+), 70 deletions(-)

diff --git a/client/src/FilesListMenu/index.jsx b/client/src/FilesListMenu/index.jsx
index 850b2cd..086dac9 100644
--- a/client/src/FilesListMenu/index.jsx
+++ b/client/src/FilesListMenu/index.jsx
@@ -10,6 +10,7 @@ import classnames from "classnames"
 import Checkbox from "@mui/material/Checkbox"
 import getActiveImage from "../Annotator/reducers/get-active-image"
 import { useTranslation } from "react-i18next"
+import Tooltip from "@mui/material/Tooltip";
 
 const theme = createTheme()
 const LabelContainer = styled("div")(({ theme }) => ({
@@ -76,7 +77,7 @@ export const FilesListMenu = ({
   }
   
   const hasRegions = (imageIndex) => {
-    return allImages.length > 0 && allImages[imageIndex].regions.length > 0
+    return allImages?.length > 0 && allImages[imageIndex].regions?.length > 0
   }
 
   return (
@@ -93,6 +94,7 @@ export const FilesListMenu = ({
             className={classnames({ selected: image.name === selectedImage })}
             key = {index}
           >
+        <Tooltip title={t("download_checkbox_select")} placement="left">
           <Checkbox
             sx={{
               padding: 0, 
@@ -107,6 +109,7 @@ export const FilesListMenu = ({
             data-testid="checkbox"
             disabled={(selectedImage !== null && selectedImage !== index) || !hasRegions(index)}
           />
+          </Tooltip>
             <span style={index === selectedImage? {backgroundColor: "rgba(255, 124, 120, 0.5)"} : {}}>
               <Label className={classnames({ selected: image.name === selectedImage })} style={ { backgroundColor: "withe" }} onClick={() => {handleClickLabel(image.name)}}>
                 {capitalize(image.name)}
diff --git a/client/src/HistorySidebarBox/index.jsx b/client/src/HistorySidebarBox/index.jsx
index d254b16..948d884 100644
--- a/client/src/HistorySidebarBox/index.jsx
+++ b/client/src/HistorySidebarBox/index.jsx
@@ -14,6 +14,7 @@ import { grey } from "@mui/material/colors"
 import isEqual from "lodash/isEqual"
 import { useTranslation } from "react-i18next"
 import { Grid } from "@mui/material"
+import Tooltip from "@mui/material/Tooltip";
 
 const theme = createTheme()
 const EmptyTextDiv = styled('div')(() => ({
@@ -57,7 +58,9 @@ export const HistorySidebarBox = ({
               {i === 0 && (
                 <ListItemSecondaryAction onClick={() => onRestoreHistory()}>
                   <Grid item xs={1}  onClick={() => onRestoreHistory()}>
+                  <Tooltip title={t("undo_last_action")} placement="left">
                     <UndoIcon sx={{ fontSize: 14 }}  data-testid="undo-icon"/>
+                    </Tooltip>
                   </Grid>
                 </ListItemSecondaryAction>
               )}
diff --git a/client/src/Localization/translation-de-DE.js b/client/src/Localization/translation-de-DE.js
index ef3f5d8..cc6b518 100644
--- a/client/src/Localization/translation-de-DE.js
+++ b/client/src/Localization/translation-de-DE.js
@@ -65,6 +65,20 @@ const translationDeDE = {
   "here": "hier",
   "more_info": "Weitere Informationen finden Sie in unserer Dokumentation",
   "yolo_annotations": "YOLO-Annotationen",
+  "download_checkbox_select": "Wähle dieses Bild für den Download aus",
+  "undo_last_action": "Letzte Aktion rückgängig machen",
+  "delete_regions": "Regionen löschen",
+  "lock_regions": "Regionen sperren",
+  "unlock_regions": "Regionen entsperren",
+  "hide_regions": "Regionen ausblenden",
+  "show_regions": "Regionen anzeigen",
+  "delete_region": "Region löschen",
+  "lock_region": "Region sperren",
+  "unlock_region": "Region entsperren",
+  "hide_region": "Region ausblenden",
+  "show_region": "Region anzeigen",
+  "expand_selection": "Auswahl erweitern",
+  "collapse_selection": "Auswahl verkleinern"
 };
 
 export default translationDeDE;
diff --git a/client/src/Localization/translation-en-EN.js b/client/src/Localization/translation-en-EN.js
index 7383e63..840cb1e 100644
--- a/client/src/Localization/translation-en-EN.js
+++ b/client/src/Localization/translation-en-EN.js
@@ -66,6 +66,20 @@ const translationEnEN = {
   "here": "here",
   "more_info": "More information can be found in our documentation",
   "yolo_annotations": "YOLO Annotations",
+  "download_checkbox_select": "Select this image for download",
+  "undo_last_action": "Undo last action",
+  "delete_regions": "Delete regions",
+  "lock_regions": "Lock regions",
+  "unlock_regions": "Unlock regions",
+  "hide_regions": "Hide regions",
+  "show_regions": "Show regions",
+  "delete_region": "Delete region",
+  "lock_region": "Lock region",
+  "unlock_region": "Unlock region",
+  "hide_region": "Hide region",
+  "show_region": "Show region",
+  "expand_selection": "Expand selection",
+  "collapse_selection": "Collapse selection",
 };
 
 export default translationEnEN;
diff --git a/client/src/RegionSelectorSidebarBox/index.jsx b/client/src/RegionSelectorSidebarBox/index.jsx
index 01f09f1..46c811b 100644
--- a/client/src/RegionSelectorSidebarBox/index.jsx
+++ b/client/src/RegionSelectorSidebarBox/index.jsx
@@ -19,6 +19,7 @@ import isEqual from "lodash/isEqual"
 import {useTranslation} from "react-i18next";
 import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
 import OpenInFullIcon from '@mui/icons-material/OpenInFull';
+import Tooltip from "@mui/material/Tooltip";
 
 const theme = createTheme()
 
@@ -93,58 +94,69 @@ const RowHeader = ({ regions, onChangeRegion, onDeleteRegion }) => {
       name={<div style={{paddingLeft: 10}}>{t("desc.class")}</div>}
       area={<PieChartIcon className="icon" />}
       trash={
-        <TrashIcon className="icon"  
-          onClick={() => {
-              regions.forEach(r => {
-                onDeleteRegion(r);
-              });
-          }} 
-          data-testid="DeleteIcon-header"
-        />}
-      lock={
-        locked === true ? (
-          <LockIcon
-            onClick={() => {
-              regions.forEach(r => {
-                onChangeRegion({ ...r, locked: false });
-              });
-            }}
-            className="icon"
-            data-testid="LockIcon-header"
-          />
-        ) : (
-          <UnlockIcon
+        <Tooltip title={t("delete_regions")}>
+          <TrashIcon className="icon"  
             onClick={() => {
-              regions.forEach(r => {
-                onChangeRegion({ ...r, locked: true });
-              });
-            }}
-            className="icon"
-            data-testid="UnlockIcon-header"
+                regions.forEach(r => {
+                  onDeleteRegion(r);
+                });
+            }} 
+            data-testid="DeleteIcon-header"
           />
-        )    
-      }
-      visible={
-          visible ? (
-            <VisibleIcon
+        </Tooltip>
+        }
+      lock={
+        locked === true ? (
+          <Tooltip title={t("lock_regions")}>
+            <LockIcon
               onClick={() => {
                 regions.forEach(r => {
-                  onChangeRegion({ ...r, visible: false });
+                  onChangeRegion({ ...r, locked: false });
                 });
               }}
               className="icon"
-              data-testid="VisibleIcon-header"
+              data-testid="LockIcon-header"
             />
-          ) : (
-            <VisibleOffIcon
+          </Tooltip>
+        ) : (
+          <Tooltip title={t("unlock_regions")}>
+            <UnlockIcon
               onClick={() => {
                 regions.forEach(r => {
-                  onChangeRegion({ ...r, visible: true });
+                  onChangeRegion({ ...r, locked: true });
                 });
               }}
               className="icon"
-              data-testid="InvisibleIcon-header"
+              data-testid="UnlockIcon-header"
             />
+          </Tooltip>
+        )    
+      }
+      visible={
+          visible ? (
+            <Tooltip title={t("show_regions")}>
+              <VisibleIcon
+                onClick={() => {
+                  regions.forEach(r => {
+                    onChangeRegion({ ...r, visible: false });
+                  });
+                }}
+                className="icon"
+                data-testid="VisibleIcon-header"
+              />
+            </Tooltip>
+          ) : (
+            <Tooltip title={t("hide_regions")}>
+              <VisibleOffIcon
+                onClick={() => {
+                  regions.forEach(r => {
+                    onChangeRegion({ ...r, visible: true });
+                  });
+                }}
+                className="icon"
+                data-testid="InvisibleIcon-header"
+              />
+            </Tooltip>
           )
       }
     />
@@ -166,6 +178,7 @@ const Row = ({
   name,
   index,
 }) => {
+  const {t} = useTranslation();
   return (
     <RowLayout
       header={false}
@@ -175,48 +188,60 @@ const Row = ({
       name={<Chip text={name || cls || ""} color={color || "#ddd"} />}
       minimize={
         r.minimized ? (
-          <OpenInFullIcon
-            onClick={() => onChangeRegion({...r, minimized: false})}
-            className="icon2"
-            data-testid={`OpenInFullIcon-${r.id}`}
-          />
+          <Tooltip title={t("expand_selection")}>
+            <OpenInFullIcon
+              onClick={() => onChangeRegion({...r, minimized: false})}
+              className="icon2"
+              data-testid={`OpenInFullIcon-${r.id}`}
+            />
+          </Tooltip>
         ) : (
-          <CloseFullscreenIcon
-            onClick={() => onChangeRegion({...r, minimized: true})}
-            className="icon2"
-            data-testid={`CloseFullscreenIcon-${r.id}`}
-          />
+          <Tooltip title={t("collapse_selection")}>
+            <CloseFullscreenIcon
+              onClick={() => onChangeRegion({...r, minimized: true})}
+              className="icon2"
+              data-testid={`CloseFullscreenIcon-${r.id}`}
+            />
+          </Tooltip>
         )
       }
-      trash={<TrashIcon onClick={() => onDeleteRegion(r)} className="icon2" data-testid={`DeleteIcon-${r.id}`} />}
+      trash={<Tooltip title={t("delete_region")}><TrashIcon onClick={() => onDeleteRegion(r)} className="icon2" data-testid={`DeleteIcon-${r.id}`} /> </Tooltip>}
       lock={
         r.locked ? (
-          <LockIcon
-            onClick={() => onChangeRegion({...r, locked: false})}
-            className="icon2"
-            data-testid={`LockIcon-${r.id}`}
-          />
+          <Tooltip title={t("lock_region")}>
+            <LockIcon
+              onClick={() => onChangeRegion({...r, locked: false})}
+              className="icon2"
+              data-testid={`LockIcon-${r.id}`}
+            />
+          </Tooltip>
         ) : (
-          <UnlockIcon
-            onClick={() => onChangeRegion({...r, locked: true})}
-            className="icon2"
-            data-testid={`UnlockIcon-${r.id}`}
-          />
+          <Tooltip title={t("unlock_region")}>
+            <UnlockIcon
+              onClick={() => onChangeRegion({...r, locked: true})}
+              className="icon2"
+              data-testid={`UnlockIcon-${r.id}`}
+            />
+          </Tooltip>
         )
       }
       visible={
         r.visible || r.visible === undefined ? (
-          <VisibleIcon
-            onClick={() => onChangeRegion({...r, visible: false})}
-            className="icon2"
-            data-testid={`VisibleIcon-${r.id}`}
-          />
+          <Tooltip title={t("show_region")}>
+            <VisibleIcon
+              onClick={() => onChangeRegion({...r, visible: false})}
+              className="icon2"
+              data-testid={`VisibleIcon-${r.id}`}
+            />
+          </Tooltip>
         ) : (
-          <VisibleOffIcon
-            onClick={() => onChangeRegion({...r, visible: true})}
-            className="icon2"
-            data-testid={`InvisibleIcon-${r.id}`}
-          />
+          <Tooltip title={t("hide_region")}>
+            <VisibleOffIcon
+              onClick={() => onChangeRegion({...r, visible: true})}
+              className="icon2"
+              data-testid={`InvisibleIcon-${r.id}`}
+            />
+          </Tooltip>
         )
       }
     />