Merge pull request #281 from daita-technologies/update/user-feedbacks

Update: user feedbacks

Author: ttattl

package.json

@@ -1,6 +1,6 @@
 {
   "name": "daita-interface",
-  "version": "0.1.0",
+  "version": "1.1.0",
   "private": true,
   "description": "React-based user interface for the DAITA platform.",
   "author": "DAITA Technologies",

src/components/CloneProjectModal/index.tsx

@@ -23,6 +23,7 @@ import {
 } from "reduxes/annotationProject/selector";
 import { useEffect } from "react";
 import { selectorListProjects } from "reduxes/project/selector";
+import { MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH } from "constants/defaultValues";
 import { CloneProjectToAnnotationFields } from "./type";
 
 const CloneProjectModal = function () {
@@ -162,8 +163,8 @@ const CloneProjectModal = function () {
             {...register("annotationProjectDescription", {
               required: false,
               maxLength: {
-                value: 75,
-                message: `Your project description cannot exceed 75 characters.`,
+                value: MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH,
+                message: `Your project description cannot exceed ${MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH} characters.`,
               },
             })}
             error={!!errors.annotationProjectDescription}

src/components/CreateProjectModal/index.tsx

@@ -26,6 +26,7 @@ import {
   EXISTING_DATASET_CREATE_PROJECT_DATASET_TYPE_VALUE,
   ID_TOKEN_NAME,
   MAX_DATASET_IMAGES_CREATE_PROJECT,
+  MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH,
   MIN_DATASET_IMAGES_CREATE_PROJECT,
   TOKEN_NAME,
   // MAX_ALLOW_UPLOAD_IMAGES,
@@ -312,8 +313,8 @@ const CreateProjectModal = function (props: CreateProjectModalProps) {
             {...register("description", {
               required: false,
               maxLength: {
-                value: 75,
-                message: `Your project description cannot exceed 75 characters.`,
+                value: MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH,
+                message: `Your project description cannot exceed ${MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH} characters.`,
               },
             })}
             error={!!errors.description}

src/constants/defaultValues.tsx

@@ -164,6 +164,8 @@ export const CREATE_PROJECT_DATASET_TYPE_LIST: CreateProjectDatasetTypeControlTy
     },
   ];
 
+export const MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH = 300;
+
 export const MIN_DATASET_IMAGES_CREATE_PROJECT = 1;
 export const MAX_DATASET_IMAGES_CREATE_PROJECT = 1000;
 

src/routes/AnnotationPage/ControlPanel/index.tsx

@@ -90,6 +90,8 @@ import {
   intToRGB,
 } from "../LabelAnnotation/ClassManageModal/useListClassView";
 
+const IS_MAC_PLATFORM = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+
 function ControlPanel() {
   const history = useHistory();
   const dispatch = useDispatch();
@@ -594,7 +596,7 @@ function ControlPanel() {
         sx={{ border: "1px dashed grey" }}
         justifyContent="space-evenly"
       >
-        <Tooltip title="Ctrl+Z">
+        <Tooltip title={`Undo (${IS_MAC_PLATFORM ? "⌘" : "Ctrl"}+Z)`}>
           <span>
             <IconButton
               onClick={handleUndoDrawObject}
@@ -604,7 +606,7 @@ function ControlPanel() {
             </IconButton>
           </span>
         </Tooltip>
-        <Tooltip title="Ctrl+Shift+Z">
+        <Tooltip title={`Redo (${IS_MAC_PLATFORM ? "⌘" : "Ctrl"}+Shift+Z)`}>
           <span>
             <IconButton
               onClick={handleRedoDrawObject}

src/routes/AnnotationPage/Editor/index.tsx

@@ -183,16 +183,20 @@ function Editor() {
     }
   };
   const keyDownHandler = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.ctrlKey && e.shiftKey && e.key === "Z") {
+    if (
+      (e.ctrlKey || e.metaKey) &&
+      e.shiftKey &&
+      (e.key === "Z" || e.key === "z")
+    ) {
       dispatch(redoDrawObject());
-    } else if (e.ctrlKey && e.key === "z") {
+    } else if ((e.ctrlKey || e.metaKey) && e.key === "z") {
       dispatch(undoDrawObject());
     } else if (e.key === " ") {
       setKeyDown(e.key);
       if (currentDrawState !== DrawState.ZOOMDRAGGING) {
         dispatch(changeCurrentDrawState({ drawState: DrawState.ZOOMDRAGGING }));
       }
-    } else if (e.key === "Delete") {
+    } else if (e.key === "Delete" || e.key === "Backspace") {
       if (selectedDrawObjectId) {
         dispatch(deleteDrawObject({ drawObjectId: selectedDrawObjectId }));
         if (toolTipLayer.current?.attrs.id === selectedDrawObjectId) {

src/routes/AnnotationPage/ImagePreview/index.tsx

@@ -10,7 +10,7 @@ import {
   selectorIdDrawObjectByImageName,
 } from "reduxes/annotationmanager/selecetor";
 import { selectorCurrentAnnotationFiles } from "reduxes/annotationProject/selector";
-import { QUIT_ANNOTATION_EDITOR_PROMPT_MESSAGE } from "../constants";
+import { QUIT_ANNOTATION_EDITOR_ALERT_MESSAGE } from "../constants";
 import ChangePreviewConfirmDialog from "./ChangePreviewConfirmDialog";
 import ImagePreviewBadge from "./ImagePreviewBadge";
 
@@ -134,7 +134,7 @@ function ImagePreview() {
       <>
         <BeforeUnload
           isActive={!!needConfirmChangePreviewImageDialog}
-          message={QUIT_ANNOTATION_EDITOR_PROMPT_MESSAGE}
+          message={QUIT_ANNOTATION_EDITOR_ALERT_MESSAGE}
         />
         <List
           sx={{

src/routes/AnnotationPage/constants.ts

@@ -5,7 +5,5 @@ export const DRAW_ELLIPSE_SHORT_KEY = "e";
 export const DRAW_LINE_SHORT_KEY = "x";
 export const DRAW_SEGMENTATION_SHORT_KEY = "f";
 export const QUIT_ANNOTATION_EDITOR_ALERT_MESSAGE =
-  "If you change the preview image, all annotation already processed will be lost. Do you still want to CANCEL?";
-export const QUIT_ANNOTATION_EDITOR_PROMPT_MESSAGE =
-  "If you change the preview image, all annotation already processed will be lost. Do you still want to LEAVE?";
+  "The annotation was modified. If you do not save it before proceeding, your changes will be lost.";
 export const FULL_PADDING_VALUE = 10000;

src/routes/DashboardPage/UpdateProjectInfoDialog.tsx

@@ -8,7 +8,10 @@ import {
   Typography,
 } from "@mui/material";
 import { MyButton } from "components";
-import { ID_TOKEN_NAME } from "constants/defaultValues";
+import {
+  ID_TOKEN_NAME,
+  MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH,
+} from "constants/defaultValues";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useDispatch, useSelector } from "react-redux";
@@ -109,8 +112,8 @@ const UpdateProjectInfoDialog = function () {
             {...register("description", {
               required: false,
               maxLength: {
-                value: 75,
-                message: `Your project description cannot exceed 75 characters.`,
+                value: MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH,
+                message: `Your project description cannot exceed ${MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH} characters.`,
               },
             })}
             error={!!errors.description}
@@ -133,7 +136,7 @@ const UpdateProjectInfoDialog = function () {
             color="text.secondary"
           >
             * The maximum number of characters for Project name and Description
-            is 75.
+            is {MAX_PROJECT_DESCRIPTION_CHARACTER_LENGTH}.
           </Typography>
           <Button sx={{ display: "none" }} type="submit" />
         </Box>

src/routes/ProjectDetail/PreprocessingOption/ExpertPreprocessOption.tsx

@@ -211,7 +211,7 @@ const ExpertPreprocessingOption = function () {
         </Typography>
         <InfoTooltip
           sx={{ ml: 1 }}
-          title="If enabled, our system selects the most appropriate reference images for the selected methods of the preprocessing run."
+          title="If you run it, our system selects the most appropriate reference images for the selected methods of the preprocessing run."
         />
       </Box>
       <Box mt={2} display="flex" gap={1}>