From a85ce047727a8839178195b210baaa4fc64a94c4 Mon Sep 17 00:00:00 2001
From: shiminc <shiminc@gmail.com>
Date: Wed, 19 Jun 2024 10:57:22 +0100
Subject: [PATCH 1/3] combiningExistingList to markerList

---
 frontend/src/components/Image.jsx          | 8 +++++++-
 frontend/src/components/PhotoSelection.jsx | 9 ++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Image.jsx b/frontend/src/components/Image.jsx
index 6bf8f4f..0807451 100644
--- a/frontend/src/components/Image.jsx
+++ b/frontend/src/components/Image.jsx
@@ -15,6 +15,7 @@ function Image (props) {
   const imgRef = useRef(null);
   console.log('IN IMAGE COMPONENT')
   console.log(props.image)
+  console.log(props.existingLabel)
 
   //State for x, y coordinates based on the original image 
   const [coordinate, setCoordinate] = useState({
@@ -27,7 +28,12 @@ function Image (props) {
   const [markerList, setMarkerList] = useState([])
 
   useEffect (() => { //reset every initial state when image changes
-    setMarkerList([])
+    if(props.existingLabel.length === 0){
+      setMarkerList([])
+    } else if (props.existingLabel.length > 0 ) {
+      setMarkerList([props.existingLabel])
+    }
+
     setImageSize({
       originalWidth : 0,
       originalHeight : 0,
diff --git a/frontend/src/components/PhotoSelection.jsx b/frontend/src/components/PhotoSelection.jsx
index 8e43bdc..088d48c 100644
--- a/frontend/src/components/PhotoSelection.jsx
+++ b/frontend/src/components/PhotoSelection.jsx
@@ -6,6 +6,7 @@ Display a drop-down list of photos to be shown.
 */
 function PhotoSelection(props) {
     const [currentPhoto, setCurrentPhoto] = useState('')
+    const [humanLabel, setHumanLabel] = useState([])
     /*
     List the photos for users to choose from
     */
@@ -21,12 +22,14 @@ function PhotoSelection(props) {
         console.log(selectedPhoto);
 
         // Update the list of photo filenames available in that session
-        let url = `/api/${selectedPhoto}`;
         let urlJpeg = '/api/photos/' + selectedPhoto.replace("np", "jpeg");
         setCurrentPhoto(urlJpeg);
-
         console.log(currentPhoto)
 
+        let urlHumanLabel = '/api/labels/detail?path=' + selectedPhoto
+        fetch(urlHumanLabel)
+            .then(response => response.json())
+            .then(data => setHumanLabel(data));
     }
 
 
@@ -40,7 +43,7 @@ function PhotoSelection(props) {
             >
                 <option/>
                 {listDisplayed}</select>
-            <Image image={currentPhoto}/>
+            <Image image={currentPhoto} existingLabel={humanLabel}/>
 
         </>
     )

From 6a061c89425f8b5860d6c9dbced764522b78ab9d Mon Sep 17 00:00:00 2001
From: shiminc <shiminc@gmail.com>
Date: Wed, 19 Jun 2024 13:40:24 +0100
Subject: [PATCH 2/3] fetch human label

---
 frontend/src/components/Image.jsx          | 16 ++++++++++------
 frontend/src/components/PhotoSelection.jsx | 17 +++++++++++++----
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Image.jsx b/frontend/src/components/Image.jsx
index 0807451..9a6e028 100644
--- a/frontend/src/components/Image.jsx
+++ b/frontend/src/components/Image.jsx
@@ -14,9 +14,11 @@ function Image (props) {
   //Ref for image
   const imgRef = useRef(null);
   console.log('IN IMAGE COMPONENT')
-  console.log(props.image)
   console.log(props.existingLabel)
 
+  let existingLabel = props.existingLabel.length>0 ? props.existingLabel : [] 
+  console.log(existingLabel)
+
   //State for x, y coordinates based on the original image 
   const [coordinate, setCoordinate] = useState({
     x: -99,
@@ -27,12 +29,13 @@ function Image (props) {
   //State for array containing objects each of which recording one marker/tag. WARNING the LAST tag may not be recorded due to the useState
   const [markerList, setMarkerList] = useState([])
 
+  //useEffect(() => {
+  //  setMarkerList(props.existingLabel || []); // Set to empty array if existingLabel is not provided
+  //}, [props.existingLabel]); 
+
   useEffect (() => { //reset every initial state when image changes
-    if(props.existingLabel.length === 0){
-      setMarkerList([])
-    } else if (props.existingLabel.length > 0 ) {
-      setMarkerList([props.existingLabel])
-    }
+
+    setMarkerList([])
 
     setImageSize({
       originalWidth : 0,
@@ -277,6 +280,7 @@ function Image (props) {
         <h2>Confidence {coordinate.confidence}</h2>
         <SaveMarkers markerList={markerList}/>
         <button onClick={RetrodetectController}>Show Retrodetect labels</button>
+        <p>{props.existingLabel}</p>
         <div className='ImageContainer'>
             <img ref={imgRef} src={props.image} onClick={clickHandler} alt='' style={{
                 height: `${imageSize.viewHeight}px`,
diff --git a/frontend/src/components/PhotoSelection.jsx b/frontend/src/components/PhotoSelection.jsx
index 088d48c..911db96 100644
--- a/frontend/src/components/PhotoSelection.jsx
+++ b/frontend/src/components/PhotoSelection.jsx
@@ -26,13 +26,22 @@ function PhotoSelection(props) {
         setCurrentPhoto(urlJpeg);
         console.log(currentPhoto)
 
-        let urlHumanLabel = '/api/labels/detail?path=' + selectedPhoto
-        fetch(urlHumanLabel)
-            .then(response => response.json())
-            .then(data => setHumanLabel(data));
+    // Get the json for the human label coordinates if it exists
+    let urlLabel = '/api/labels/detail?path=' + selectedPhoto
+    console.log('urlLabel')
+    console.log(urlLabel)
+    fetch(urlLabel)
+        .then(response => response.json())
+        .then((data) => {
+            setHumanLabel(data)
+        });
+    console.log(data)
+    console.log(humanLabel)
+
     }
 
 
+
     return (
         <>
             <select

From c8ed3d7ffb66c937197f46476c33de47f66f4b31 Mon Sep 17 00:00:00 2001
From: shiminc <shiminc@gmail.com>
Date: Wed, 19 Jun 2024 15:18:22 +0100
Subject: [PATCH 3/3] previous human label

---
 .../src/components/DrawingExistingMarkers.jsx |  4 ++
 frontend/src/components/Image.jsx             | 64 +++++++++----------
 frontend/src/components/PhotoSelection.jsx    |  5 +-
 frontend/src/components/SaveMarkers.jsx       |  3 +-
 4 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/frontend/src/components/DrawingExistingMarkers.jsx b/frontend/src/components/DrawingExistingMarkers.jsx
index 75178f4..6b8ef91 100644
--- a/frontend/src/components/DrawingExistingMarkers.jsx
+++ b/frontend/src/components/DrawingExistingMarkers.jsx
@@ -6,6 +6,10 @@ function DrawExistingMarkers (props){ //imageSize and markerList
     let currentOffsetY
     let currentConfidence
 
+    
+    console.log('imageLeft' + props.imagePosition.left)
+    console.log('imageTop' + props.imagePosition.top)
+
     let currentOffsetArray = props.markerList.map((item) =>{
         currentOffsetX = Math.round((item.x/props.imageSize.originalWidth)*props.imageSize.viewWidth)+props.imagePosition.left
         currentOffsetY = Math.round((item.y/props.imageSize.originalHeight)*props.imageSize.viewHeight)+props.imagePosition.top
diff --git a/frontend/src/components/Image.jsx b/frontend/src/components/Image.jsx
index 9a6e028..394b679 100644
--- a/frontend/src/components/Image.jsx
+++ b/frontend/src/components/Image.jsx
@@ -16,8 +16,10 @@ function Image (props) {
   console.log('IN IMAGE COMPONENT')
   console.log(props.existingLabel)
 
+  // to examine if there is an existing human labelled json file, if there is, we will merge the list to the markerlist in the useEffect when there is a change in props, if not we will declare the list as []
   let existingLabel = props.existingLabel.length>0 ? props.existingLabel : [] 
-  console.log(existingLabel)
+  let imageWidth = props.existingLabel.length>0 ? 2048 : 0 //not ideal solution as I am hardcoding it but this is to make it work but may be able to get backend to send the dimension, as first render for detecting image original size does not work here
+  let imageHeight = props.existingLabel.length>0 ? 1536 : 0 //not ideal solution as I am hardcoding it but this is to make it work but may be able to get backend to send the dimension, as first render for detecting image original size does not work here
 
   //State for x, y coordinates based on the original image 
   const [coordinate, setCoordinate] = useState({
@@ -29,17 +31,34 @@ function Image (props) {
   //State for array containing objects each of which recording one marker/tag. WARNING the LAST tag may not be recorded due to the useState
   const [markerList, setMarkerList] = useState([])
 
-  //useEffect(() => {
-  //  setMarkerList(props.existingLabel || []); // Set to empty array if existingLabel is not provided
-  //}, [props.existingLabel]); 
+    //State for recording the original width/height of the image and view width/height. THIS might not need to be STATE
+  const [imageSize, setImageSize] = useState({
+    originalWidth : 0,
+    originalHeight : 0,
+    viewWidth : 683,
+    viewHeight : 512
+  })
+
+  //State to determine if ML marker to be shown
+  const [showRetrodetect, setShowRetrodetect] = useState(0)
+
+  // for zooming
+  let scale = 1
+  let scaleZoomIn = 1.2
+  let scaleZoomOut = 0.8
+
+  const [imageNewPosition, setImageNewPosition] = useState({
+      left: 0,
+      top: 0,
+  })
 
   useEffect (() => { //reset every initial state when image changes
 
-    setMarkerList([])
+    setMarkerList(existingLabel)
 
     setImageSize({
-      originalWidth : 0,
-      originalHeight : 0,
+      originalWidth : imageWidth,
+      originalHeight : imageHeight,
       viewWidth : 683,
       viewHeight : 512
     })
@@ -56,29 +75,7 @@ function Image (props) {
     
   }, [props])
 
-  //State for recording the original width/height of the image and view width/height. THIS might not need to be STATE
-  const [imageSize, setImageSize] = useState({
-    originalWidth : 0,
-    originalHeight : 0,
-    viewWidth : 683,
-    viewHeight : 512
-  })
-
-  //State to determine if ML marker to be shown
-  const [showRetrodetect, setShowRetrodetect] = useState(0)
-
-  // for zooming
-  let scale = 1
-  let scaleZoomIn = 1.2
-  let scaleZoomOut = 0.8
-
-  const [imageNewPosition, setImageNewPosition] = useState({
-      left: 0,
-      top: 0,
-  })
-  // for zooming in
-
-  useEffect(() => {
+  useEffect(() => { // when there is a window resize
     const handleResize = () => {
       const imageCurrent = imgRef.current; //so that it will still work when clickHandler has not been called
 
@@ -139,7 +136,8 @@ function Image (props) {
     console.log('Offset X & Y', e.nativeEvent.offsetX, e.nativeEvent.offsetY)
     console.log('client X & client Y', e.clientX, e.clientY)
     console.log('original pixel x & y', originalPixelX, originalPixelY)
-
+    console.log('image.top', imageRect.top )
+    console.log('image.left', imageRect.left )
 
 
     setImageSize({
@@ -242,6 +240,7 @@ function Image (props) {
             left: x
             }
         ) 
+        
       }
     }
 
@@ -278,9 +277,8 @@ function Image (props) {
       <>
         <h1>{coordinate.x}, {coordinate.y}</h1>
         <h2>Confidence {coordinate.confidence}</h2>
-        <SaveMarkers markerList={markerList}/>
+        <SaveMarkers markerList={markerList} photo={props.photo}/>
         <button onClick={RetrodetectController}>Show Retrodetect labels</button>
-        <p>{props.existingLabel}</p>
         <div className='ImageContainer'>
             <img ref={imgRef} src={props.image} onClick={clickHandler} alt='' style={{
                 height: `${imageSize.viewHeight}px`,
diff --git a/frontend/src/components/PhotoSelection.jsx b/frontend/src/components/PhotoSelection.jsx
index 911db96..e0fe901 100644
--- a/frontend/src/components/PhotoSelection.jsx
+++ b/frontend/src/components/PhotoSelection.jsx
@@ -6,6 +6,7 @@ Display a drop-down list of photos to be shown.
 */
 function PhotoSelection(props) {
     const [currentPhoto, setCurrentPhoto] = useState('')
+    const [photoPath, setPhotoPath] = useState('')
     const [humanLabel, setHumanLabel] = useState([])
     /*
     List the photos for users to choose from
@@ -19,7 +20,7 @@ function PhotoSelection(props) {
     function photoFetcher(e) {
         let selectedPhoto = e.target.value;
 
-        console.log(selectedPhoto);
+        setPhotoPath(selectedPhoto);
 
         // Update the list of photo filenames available in that session
         let urlJpeg = '/api/photos/' + selectedPhoto.replace("np", "jpeg");
@@ -52,7 +53,7 @@ function PhotoSelection(props) {
             >
                 <option/>
                 {listDisplayed}</select>
-            <Image image={currentPhoto} existingLabel={humanLabel}/>
+            <Image image={currentPhoto} existingLabel={humanLabel} photo={photoPath}/>
 
         </>
     )
diff --git a/frontend/src/components/SaveMarkers.jsx b/frontend/src/components/SaveMarkers.jsx
index 9760078..6ec85b2 100644
--- a/frontend/src/components/SaveMarkers.jsx
+++ b/frontend/src/components/SaveMarkers.jsx
@@ -7,7 +7,8 @@ function SaveMarkers(props) {
 
     function handleSubmit() {
 
-        const photo_path = '1970-01-01/set_A/device_1234/camera_1/20200101_094359.123456_000002.np';
+        //const photo_path = '1970-01-01/set_A/device_1234/camera_1/20200101_094359.123456_000002.np';
+        const photo_path = props.photo
         const source = 'btviewer';
         const version = '0.0.0'
         const url = `/api/labels/create?path=${photo_path}&source=${source}&version=${version}`;