display existing bounding boxes

WildMeOrg · Jan 22, 2025 · a5f1918 · a5f1918
1 parent 78cf601
commit a5f1918
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 16 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/components/AddAnnotationModal.jsx b/frontend/src/components/AddAnnotationModal.jsx
@@ -11,6 +11,8 @@ export default function AddAnnotationModal({
 }) {
   const intl = useIntl();
 
+  console.log("error",error)
+
   return (
     <Modal show={showModal} onHide={() => setShowModal(false)}>
       <Modal.Header closeButton>
@@ -21,7 +23,7 @@ export default function AddAnnotationModal({
       <Modal.Body>
         {incomplete && intl.formatMessage({ id: "MISSING_REQUIRED_FIELDS" })}
         {error &&
-          error.slice().map((error, index) => {
+          (Array.isArray(error) ? error : [error]).map((error, index) => {
             return (
               <div key={index} className="d-flex flex-column">
                 {error.code === "INVALID" && (

diff --git a/frontend/src/components/ResizableRotatableRect.jsx b/frontend/src/components/ResizableRotatableRect.jsx
@@ -8,6 +8,8 @@ const ResizableRotatableRect = ({
   setRect,
   setValue,
   drawStatus,
+  existingBoundingBoxes = [],
+  scaleFactor
 }) => {
   const [rectProps, setRectProps] = useState({});
 
@@ -88,28 +90,28 @@ const ResizableRotatableRect = ({
     transformerRef.current.getLayer().batchDraw();
   };
 
-  const existingBoundingBoxes = [
-    { x: 50, y: 50, width: 100, height: 80, stroke: "green" },
-    { x: 200, y: 150, width: 120, height: 60, stroke: "blue" },
-  ];
+  // const existingBoundingBoxes = [
+  //   { x: 50, y: 50, width: 100, height: 80, stroke: "green" },
+  //   { x: 200, y: 150, width: 120, height: 60, stroke: "blue" },
+  // ];
 
   return (
     <Stage width={imgWidth} height={imgHeight}>
       <Layer>
-      {existingBoundingBoxes.map((box, index) => (
+      {/* {existingBoundingBoxes.map((box, index) => (
           <Rect
             key={index}
-            x={box.x}
-            y={box.y}
-            width={box.width}
-            height={box.height}
-            rotation={box.rotation || 0}
+            x={box.x/scaleFactor.x}
+            y={box.y/scaleFactor.y}
+            width={box.width/scaleFactor.x}
+            height={box.height/scaleFactor.y}
+            rotation={box.theta * 180 / Math.PI || 0}
             fill={box.fill || "transparent"}
-            stroke={box.stroke || "blue"}
-            strokeWidth={box.strokeWidth || 2}
+            stroke={box.stroke || "yellow"}
+            strokeWidth={1}
             draggable={false} 
           />
-        ))}
+        ))} */}
         <Rect
           {...rectProps}
           ref={rectRef}

diff --git a/frontend/src/pages/ManualAnnotation.jsx b/frontend/src/pages/ManualAnnotation.jsx
@@ -20,17 +20,21 @@ export default function ManualAnnotation() {
     const encounterId = searchParams.get("encounterId");
     const theme = useContext(ThemeColorContext);
     const imgRef = useRef(null);
+    const canvasRef = useRef(null);
     const [value, setValue] = useState(0);
     const [incomplete, setIncomplete] = useState(false);
     const [data, setData] = useState({
         width: 100,
         height: 100,
         url: "",
+        annotations: [],
     });
 
     const { createAnnotation, loading, error, submissionDone, responseData } =
         useCreateAnnotation();
 
+        console.log("error",error)
+
     const [showModal, setShowModal] = useState(false);
     const [scaleFactor, setScaleFactor] = useState({ x: 1, y: 1 });
     const [ia, setIa] = useState(null);
@@ -85,10 +89,45 @@ export default function ManualAnnotation() {
         const handleImageLoad = () => {
             if (imgRef.current) {
                 const factor = calculateScaleFactor(data.width, data.height, imgRef.current.clientWidth, imgRef.current.clientHeight);
-                setScaleFactor(factor);
+                setScaleFactor(factor);                
+
+                const canvas = canvasRef.current;
+                const context = canvas.getContext("2d");
+                canvas.width = imgRef.current.clientWidth;
+                canvas.height = imgRef.current.clientHeight;
+
+                // draw existing annotations
+                context.clearRect(0, 0, canvas.width, canvas.height);
+                const validAnnotations = data.annotations.filter((annotation) => !annotation.trivial);
+                for (const annotation of validAnnotations) {
+                    const { x, y, width, height, theta } = annotation;
+                    const scaledRect = {
+                        x: x / factor.x,
+                        y: y / factor.y,
+                        width: width / factor.x,
+                        height: height / factor.y,
+                    };
+
+                    context.strokeStyle = "yellow";
+                    context.lineWidth = 1;
+
+                    const rectCenterX = scaledRect.x + scaledRect.width / 2;
+                    const rectCenterY = scaledRect.y + scaledRect.height / 2;
+                    context.save();
+                    context.translate(rectCenterX, rectCenterY);
+                    context.rotate(theta);
+
+                    context.strokeRect(
+                        -scaledRect.width / 2,
+                        -scaledRect.height / 2,
+                        scaledRect.width,
+                        scaledRect.height                        
+                    );
+                    context.restore();
+
+                }
             }
         };
-
         const imgElement = imgRef.current;
         if (imgElement && imgElement.complete) {
             handleImageLoad();
@@ -288,7 +327,20 @@ export default function ManualAnnotation() {
                                 setRect={setRect}
                                 setValue={setValue}
                                 drawStatus={drawStatus}
+                                scaleFactor={scaleFactor}
                             />
+                            <canvas
+                                ref={canvasRef}
+                                width={150}
+                                height={150}
+                                style={{
+                                    position: "absolute",
+                                    top: 0,
+                                    left: 0,
+                                    pointerEvents: "none",
+                                    zIndex: 100,
+                                }}
+                            ></canvas>
                         </div>
                     </div>
                     <MainButton