Ab#1055 image annotation tool regionen show region name instead of class

src/Annotator/index.jsx

@@ -14,6 +14,7 @@ import useEventCallback from "use-event-callback"
 import videoReducer from "./reducers/video-reducer.js"
 import PropTypes from "prop-types"
 import noopReducer from "./reducers/noop-reducer.js"
+import {useTranslation} from "react-i18next"
 
 
 export const Annotator = ({
@@ -56,6 +57,7 @@ export const Annotator = ({
     selectedImage = (images || []).findIndex((img) => img.src === selectedImage)
     if (selectedImage === -1) selectedImage = undefined
   }
+  const {t} = useTranslation();
   const annotationType = images ? "image" : "video"
   const [state, dispatchToReducer] = useReducer(
     historyHandler(
@@ -130,9 +132,9 @@ export const Annotator = ({
       image: state.images[selectedImage]
     })
   }, [selectedImage, state.images])
-
+ 
   if (!images && !videoSrc)
-    return "Missing required prop \"images\" or \"videoSrc\""
+    return t("error.imagevideo")
 
   return (
     <SettingsProvider>

src/Annotator/reducers/general-reducer.js

@@ -10,6 +10,7 @@ import convertExpandingLineToPolygon from "./convert-expanding-line-to-polygon"
 import clamp from "../../utils/clamp.js"
 import getLandmarksWithTransform from "../../utils/get-landmarks-with-transform"
 import setInLocalStorage from "../../utils/set-in-local-storage"
+import i18next from "i18next"
 
 const getRandomId = () => Math.random().toString().split(".")[1]
 
@@ -201,7 +202,7 @@ export default (state, action) => {
           null
         )
       } else {
-        state = saveToHistory(state, "Move Polygon Point")
+        state = saveToHistory(state, i18next.t("move.polypoint"))
       }
       return setIn(state, ["mode"], {
         mode: "MOVE_POLYGON_POINT",
@@ -579,7 +580,7 @@ export default (state, action) => {
         }
         case "create-polygon": {
           if (state.mode && state.mode.mode === "DRAW_POLYGON") break
-          state = saveToHistory(state, "Create Polygon")
+          state = saveToHistory(state, i18next.t("create.polygon"))
           newRegion = {
             type: "polygon",
             points: [
@@ -618,7 +619,7 @@ export default (state, action) => {
         }
         case "create-line": {
           if (state.mode && state.mode.mode === "DRAW_LINE") break
-          state = saveToHistory(state, "Create Line")
+          state = saveToHistory(state, i18next.t("create.line"))
           newRegion = {
             type: "line",
             x1: x,

src/HistorySidebarBox/index.jsx

@@ -42,7 +42,7 @@ export const HistorySidebarBox = ({
       >
         <List>
           {history.length === 0 && (
-            <EmptyTextDiv>No History Yet</EmptyTextDiv>
+            <EmptyTextDiv>{t("no.history")}</EmptyTextDiv>
           )}
           {history.map(({name, time}, i) => (
             <ListItem button dense key={i}>

src/Localization/translation-de-DE.js

@@ -2,7 +2,14 @@ const translationDeDE = {
   "menu.classifications": "Klassifizierungen",
   "menu.history": "Verlauf",
   "menu.regions": "Regionen",
-  "error.image": "Bild konnte nicht geladen werden."
+  "error.image": "Bild konnte nicht geladen werden.",
+  "error.imagevideo": "Fehler im Bild oder Video",
+  "no.history": "Kein Verlauf vorhanden",
+  "desc.class": "Klassen",
+  "move.polypoint": "Polygon Punkt verschoben",
+  "create.polygon": "Polygon erstellen",
+  "create.line": "Lichtschranke erstellen",
+  "region.label": "Bezeichnung"
 };
 
 export default translationDeDE;

src/Localization/translation-en-EN.js

@@ -2,7 +2,14 @@ const translationEnEN = {
   "menu.classifications": "Classifications",
   "menu.history": "History",
   "menu.regions": "Regions",
-  "error.image": "Could not load image"
+  "error.image": "Could not load image",
+  "error.imagevideo": "Missing required prop",
+  "no.history": "No History Yet",
+  "desc.class": "Class",
+  "move.polypoint": "Move Polygon Point",
+  "create.polygon": "Create Polygon",
+  "create.line": "Create Line",
+  "region.label": "Designation"
 };
 
 export default translationEnEN;

src/RegionLabel/index.jsx

@@ -11,6 +11,7 @@ import CheckIcon from "@mui/icons-material/Check"
 import TextField from "@mui/material/TextField"
 import Select from "react-select"
 import CreatableSelect from "react-select/creatable"
+import {useTranslation} from "react-i18next"
 
 import {asMutable} from "seamless-immutable"
 
@@ -30,6 +31,7 @@ export const RegionLabel = ({
   enabledProperties
 }) => {
   const commentInputRef = useRef(null)
+  const {t} = useTranslation();
   const onCommentInputClick = (_) => {
     // The TextField wraps the <input> tag with two divs
     const commentInput = commentInputRef.current.children[0].children[0]
@@ -169,15 +171,16 @@ export const RegionLabel = ({
             {enabledProperties.includes("name") && (
               <TextField
                 id="nameField"
-                label="name"
+                label={t("region.label")}
                 ref={nameInputRef}
                 onClick={onNameInputClick}
                 value={region.name || ""}
                 onChange={(event) =>
                   onChange({...(region), name: event.target.value})
                 }
               />
-            )}
+            )
+            }
             {onClose && (
               <div style={{marginTop: 4, display: "flex"}}>
                 <div style={{flexGrow: 1}} />

src/RegionSelectorSidebarBox/index.jsx

@@ -42,7 +42,7 @@ const RowLayout = ({
   header,
   highlighted,
   order,
-  classification,
+  name,
   area,
   tags,
   trash,
@@ -60,7 +60,7 @@ const RowLayout = ({
           <div style={{textAlign: "right", paddingRight: 10}}>{order}</div>
         </Grid>
         <Grid item xs={5}>
-          {classification}
+          {name}
         </Grid>
         <Grid item xs={2}>
           <div style={{textAlign: "right", paddingRight: 6}}>{area}</div>
@@ -80,12 +80,13 @@ const RowLayout = ({
 }
 
 const RowHeader = () => {
+  const {t} = useTranslation();
   return (
     <RowLayout
       header
       highlighted={false}
       order={<ReorderIcon className="icon" />}
-      classification={<div style={{paddingLeft: 10}}>Class</div>}
+      name={<div style={{paddingLeft: 10}}>{t("desc.class")}</div>}
       area={<PieChartIcon className="icon" />}
       trash={<TrashIcon className="icon" />}
       lock={<LockIcon className="icon" />}
@@ -106,6 +107,7 @@ const Row = ({
   locked,
   color,
   cls,
+  name,
   index,
 }) => {
   return (
@@ -114,7 +116,7 @@ const Row = ({
       highlighted={highlighted}
       onClick={() => onSelectRegion(r)}
       order={`#${index + 1}`}
-      classification={<Chip text={cls || ""} color={color || "#ddd"} />}
+      name={<Chip text={name || cls || ""} color={color || "#ddd"} />}
       area=""
       trash={<TrashIcon onClick={() => onDeleteRegion(r)} className="icon2" />}
       lock={
@@ -156,6 +158,7 @@ const MemoRow = memo(
     prevProps.id === nextProps.id &&
     prevProps.index === nextProps.index &&
     prevProps.cls === nextProps.cls &&
+    prevProps.name === nextProps.name &&
     prevProps.color === nextProps.color
 )
 
@@ -203,6 +206,7 @@ const mapUsedRegionProperties = (r) => [
   r.color,
   r.locked,
   r.visible,
+  r.name,
   r.highlighted,
 ]