Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip support #91

Merged
merged 2 commits into from
Jun 25, 2024
Merged

Tooltip support #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a4bb6c2
disable file download checkbox for images without regions
sumn2u Jun 25, 2024
fd3bde0
added tooltip for left sidebar action icons
sumn2u Jun 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions client/src/FilesListMenu/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }) => ({
Expand Down Expand Up @@ -74,6 +75,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}>
Expand All @@ -89,7 +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,
Expand All @@ -102,8 +107,9 @@ 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)}
/>
</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)}
Expand Down
3 changes: 3 additions & 0 deletions client/src/HistorySidebarBox/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')(() => ({
Expand Down Expand Up @@ -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>
)}
Expand Down
14 changes: 14 additions & 0 deletions client/src/Localization/translation-de-DE.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
14 changes: 14 additions & 0 deletions client/src/Localization/translation-en-EN.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
163 changes: 94 additions & 69 deletions client/src/RegionSelectorSidebarBox/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()

Expand Down Expand Up @@ -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>
)
}
/>
Expand All @@ -166,6 +178,7 @@ const Row = ({
name,
index,
}) => {
const {t} = useTranslation();
return (
<RowLayout
header={false}
Expand All @@ -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>
)
}
/>
Expand Down
Loading