167 Annotation init

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nachet-frontend",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.9.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/_versions.ts

@@ -11,8 +11,8 @@ export interface TsAppVersion {
 export const versions: TsAppVersion = {
     version: '0.9.0',
     name: 'nachet-frontend',
-    versionDate: '2024-06-22T20:47:06.767Z',
-    gitCommitHash: '',
-    versionLong: '0.9.0-',
+    versionDate: '2024-07-05T03:26:49.628Z',
+    gitCommitHash: '637ff43',
+    versionLong: '0.9.0-637ff43',
 };
 export default versions;

src/common/imageutils.ts

@@ -37,8 +37,8 @@ export const getUnscaledCoordinates = (
   const scaleFactorHeight = itemHeight / containerHeight;
   const topX = box.left * scaleFactorWidth;
   const topY = box.top * scaleFactorHeight;
-  const bottomX = box.left + box.minWidth * scaleFactorWidth;
-  const bottomY = box.top + box.minHeight * scaleFactorHeight;
+  const bottomX = (box.left + box.minWidth) * scaleFactorWidth;
+  const bottomY = (box.top + box.minHeight) * scaleFactorHeight;
   return {
     topX,
     topY,

src/components/body/feedback_form/FeedbackForm.tsx

@@ -3,7 +3,6 @@ import {
   Box,
   IconButton,
   FormControl,
-  // FormLabel,
   Button,
   Autocomplete,
   TextField,
@@ -12,6 +11,14 @@ import {
   MenuItem,
   SelectChangeEvent,
   FilterOptionsState,
+  Paper,
+  TableContainer,
+  Table,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableHead,
+  Typography,
 } from "@mui/material";
 import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
 import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
@@ -71,7 +78,10 @@ export const SimpleFeedbackForm = (
           flexWrap: "wrap",
         }}
       >
-        <IconButton size="small" onClick={handlePositiveFeedback}>
+        <IconButton
+          sx={{ marginRight: "15px" }}
+          onClick={handlePositiveFeedback}
+        >
           <CheckCircleOutlinedIcon
             sx={{
               color: "green",
@@ -97,6 +107,7 @@ interface NegativeFeedbackFormProps {
   classList: ClassData[];
   onCancel: () => void;
   onSubmit: (feedbackDataNegative: FeedbackDataNegative) => void;
+  isNewAnnotation: boolean;
 }
 
 export const NegativeFeedbackForm = (
@@ -105,7 +116,13 @@ export const NegativeFeedbackForm = (
   /* TODO: update when backend is defined Section stub convert to prop or use state when backend defined */
 
   const reasons = useMemo(() => {
-    return ["No Seed", "Multi Seed", "Wrong Seed", "Wrong Seed not in List"];
+    return [
+      "Seed not Detected",
+      "Wrong Seed",
+      "No Seed",
+      "Multi Seed",
+      "Wrong Seed not in List",
+    ];
   }, []);
   /* Section stub convert to prop or use state when backend defined */
 
@@ -117,9 +134,18 @@ export const NegativeFeedbackForm = (
     };
   }, []);
 
-  const { inference, position, classList, onCancel, onSubmit } = props;
+  const formWidth = "300px";
+
+  const {
+    inference,
+    position,
+    classList,
+    onCancel,
+    onSubmit,
+    isNewAnnotation,
+  } = props;
   const [selectedClass, setSelectedClass] = useState<ClassData>(defaultClass);
-  const [comment, setComment] = useState<string>(reasons[2]);
+  const [comment, setComment] = useState<string>(reasons[1]);
 
   const filter = createFilterOptions<ClassData>();
 
@@ -208,13 +234,19 @@ export const NegativeFeedbackForm = (
     }
   }, [comment]);
 
+  useEffect(() => {
+    if (isNewAnnotation) {
+      setComment(reasons[0]);
+    }
+  }, [isNewAnnotation, reasons]);
+
   return (
     <Draggable
       defaultPosition={{
-        x: position.left,
+        x: position.left - parseInt(formWidth.slice(0, -2)) - 10,
         y: position.top,
       }}
-      // bounds="parent"
+      bounds="parent"
       disabled={false}
     >
       <Box
@@ -225,12 +257,60 @@ export const NegativeFeedbackForm = (
           backgroundColor: "white",
           border: "2px solid black",
           padding: "10px",
-          minWidth: "300px",
+          minWidth: formWidth,
           minHeight: "5px",
-          borderRadius: "5px",
+          borderRadius: "10px",
+          justifyContent: "center",
         }}
       >
-        <FormControl size="small" sx={{ width: "100%" }}>
+        <FormControl size="small" sx={{ width: "100%", alignItems: "center" }}>
+          <Typography
+            variant="h5"
+            sx={{ textAlign: "center", marginBottom: "10px" }}
+          >
+            Feedback
+          </Typography>
+
+          <TableContainer component={Paper} sx={{ maxWidth: "fit-content" }}>
+            <Table
+              sx={{ maxWidth: "fit-content" }}
+              size="small"
+              aria-label="Bounding Box"
+            >
+              <TableHead>
+                <TableRow>
+                  <TableCell>Bounding Box</TableCell>
+                  <TableCell>_</TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                <TableRow>
+                  <TableCell>TopX</TableCell>
+                  <TableCell sx={{ textAlign: "right" }}>
+                    {inference.boxes[0].box.topX.toFixed(2)}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>TopY</TableCell>
+                  <TableCell sx={{ textAlign: "right" }}>
+                    {inference.boxes[0].box.topY.toFixed(2)}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>BottomX</TableCell>
+                  <TableCell sx={{ textAlign: "right" }}>
+                    {inference.boxes[0].box.bottomX.toFixed(2)}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>BottomY</TableCell>
+                  <TableCell sx={{ textAlign: "right" }}>
+                    {inference.boxes[0].box.bottomY.toFixed(2)}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </TableContainer>
           <Autocomplete
             id="feedback-class"
             renderInput={(params) => <TextField {...params} label="Class" />}
@@ -253,14 +333,17 @@ export const NegativeFeedbackForm = (
             }}
             disabled={comment === "No Seed"}
           />
+
           <Select
+            disabled={isNewAnnotation}
             labelId="comment-select-label"
             id="feedback-comment"
             value={comment}
             label="Feedback Comment"
             onChange={handleCommentChange}
             sx={{
               marginTop: "20px",
+              minWidth: "100%",
             }}
           >
             {reasons.map((reason, index) => {
@@ -279,6 +362,7 @@ export const NegativeFeedbackForm = (
               justifyContent: "space-evenly",
               alignItems: "center",
               marginTop: "20px",
+              minWidth: "100%",
             }}
           >
             <Button

src/components/body/feedback_form/FreeformBox.tsx

@@ -2,7 +2,7 @@ import Draggable, { DraggableData, DraggableEvent } from "react-draggable";
 import { NumberSize, Resizable } from "re-resizable";
 import { Box, IconButton } from "@mui/material";
 import OpenWithOutlinedIcon from "@mui/icons-material/OpenWithOutlined";
-import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
+import SaveIcon from "@mui/icons-material/Save";
 import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
 import OpenInFullOutlinedIcon from "@mui/icons-material/OpenInFullOutlined";
 import { useState } from "react";
@@ -21,6 +21,7 @@ const FreeformBox = (props: FreeformBoxProps) => {
   const [topY, setTopY] = useState(position.top);
   const [width, setWidth] = useState(position.minWidth);
   const [height, setHeight] = useState(position.minHeight);
+  const [changesSaved, setChangesSaved] = useState(true);
 
   const buttonStyle = {
     borderRadius: "0",
@@ -34,6 +35,7 @@ const FreeformBox = (props: FreeformBoxProps) => {
   ) => {
     setTopX(dragElement.x);
     setTopY(dragElement.y);
+    setChangesSaved(false);
   };
 
   const handleResizeStop = (
@@ -44,6 +46,7 @@ const FreeformBox = (props: FreeformBoxProps) => {
   ) => {
     setWidth(width + delta.width);
     setHeight(height + delta.height);
+    setChangesSaved(false);
   };
 
   const handleSubmit = () => {
@@ -55,6 +58,7 @@ const FreeformBox = (props: FreeformBoxProps) => {
       maxWidth: width,
       maxHeight: height,
     };
+    setChangesSaved(true);
     onSubmit(currPosition);
   };
 
@@ -123,19 +127,20 @@ const FreeformBox = (props: FreeformBoxProps) => {
               <OpenInFullOutlinedIcon />
             )}
           </IconButton>
+
           <IconButton
-            size="small"
             sx={{
               ...buttonStyle,
-              color: "green",
+              color: changesSaved ? "green" : "grey",
+              marginRight: "10px",
+              marginLeft: "10px",
             }}
             onClick={handleSubmit}
           >
-            <CheckCircleOutlinedIcon />
+            <SaveIcon />
           </IconButton>
 
           <IconButton
-            size="small"
             sx={{
               ...buttonStyle,
               color: "red",