913 manual annotation page

frontend/package.json

@@ -28,6 +28,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.52.1",
     "react-intl": "^6.6.2",
+    "react-konva": "^18.2.10",
     "react-paginate": "^8.2.0",
     "react-router-bootstrap": "^0.26.2",
     "react-router-dom": "^6.22.0",
@@ -100,10 +101,13 @@
     "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
-     },
-    "jest":{
+  },
+  "jest": {
     "collectCoverage": true,
-    "coverageReporters": ["lcov", "text"],
+    "coverageReporters": [
+      "lcov",
+      "text"
+    ],
     "coverageDirectory": "./coverage"
   }
 }

frontend/src/AuthenticatedSwitch.jsx

@@ -14,6 +14,7 @@ import AdminLogs from "./pages/AdminLogs";
 import ReportEncounter from "./pages/ReportsAndManagamentPages/ReportEncounter";
 import ReportConfirm from "./pages/ReportsAndManagamentPages/ReportConfirm";
 import ProjectList from "./pages/ProjectList";
+import ManualAnnotation from "./pages/ManualAnnotation";
 
 export default function AuthenticatedSwitch({
   showAlert,
@@ -67,6 +68,10 @@ export default function AuthenticatedSwitch({
           <Route path="/reportConfirm" element={<ReportConfirm />} />
           <Route path="/encounter-search" element={<EncounterSearch />} />
           <Route path="/admin/logs" element={<AdminLogs />} />
+          <Route path="/manual-annotation" element={<ManualAnnotation 
+
+          />} />
+
           <Route path="/login" element={<Login />} />
           <Route path="/" element={<Home />} />
           <Route path="*" element={<NotFound setHeader={setHeader} />} />

frontend/src/components/ResizableRotatableRect.jsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Stage, Layer, Rect, Transformer } from "react-konva";
+
+const ResizableRotatableRect = ({
+  rect,
+  imgHeight,
+  imgWidth,
+  setRect,
+  setValue,
+  drawStatus,
+}) => {
+  const [rectProps, setRectProps] = useState({});
+
+  useEffect(() => {
+    if (drawStatus !== "DELETE") {
+      setRectProps(
+        {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          height: rect.height,
+          fill: null,
+          stroke: "red",
+          strokeWidth: 2,
+          draggable: true,
+        }
+      );
+    }
+  }, [rect.x, rect.y, rect.width, rect.height, drawStatus]);
+
+
+  const rectRef = useRef(null);
+  const transformerRef = useRef(null);  
+
+  const handleTransform = () => {
+
+    const node = rectRef.current;
+    const scaleX = node.scaleX();
+    const scaleY = node.scaleY();
+
+    const newWidth = Math.max(5, node.width() * scaleX);
+    const newHeight = Math.max(5, node.height() * scaleY);
+
+    const updatedRect = {
+      x: node.x(),
+      y: node.y(),
+      width: newWidth,
+      height: newHeight,
+      rotation: node.rotation(), 
+    };
+    setRectProps({
+      ...rectProps,
+      ...updatedRect,
+    });
+
+    setRect({
+      ...rect,
+      ...updatedRect,
+    });
+
+    node.scaleX(1);
+    node.scaleY(1);
+    setValue(node.rotation());
+    console.log("x after resizing: ", node.x());
+    console.log("y after resizing:", node.y());
+  };
+
+  const handleDragEnd = () => {
+    const node = rectRef.current;
+    const updatedRect = {
+      x: node.x(),
+      y: node.y(),
+    };
+
+    setRectProps({
+      ...rectProps,
+      ...updatedRect,
+    });
+
+    setRect({
+      ...rectProps,
+      ...updatedRect,
+    });
+  };
+
+  const handleSelect = (e) => {
+    transformerRef.current.nodes([rectRef.current]);
+    transformerRef.current.getLayer().batchDraw();
+  };
+
+  return (
+    <Stage width={imgWidth} height={imgHeight}>
+      <Layer>
+        <Rect
+          {...rectProps}
+          ref={rectRef}
+          onClick={handleSelect}
+          onDragStart={handleSelect}
+          onDragEnd={handleDragEnd}
+          onTransformEnd={handleTransform}
+          draggable={true}
+        />
+        <Transformer
+          ref={transformerRef}
+          rotateEnabled={true}
+          resizeEnabled={true}
+          keepRatio={false}
+        />
+      </Layer>
+    </Stage>
+  );
+};
+
+export default ResizableRotatableRect;