From 0dcfe327cd808c8bc57c7775b29591dd7776f61c Mon Sep 17 00:00:00 2001
From: tanyar09 <tatiana.romlit@gmail.com>
Date: Tue, 4 Nov 2025 14:11:29 -0500
Subject: [PATCH] feat: Auto-start auto-match on component mount and tolerance
 change

This commit enhances the AutoMatch component by implementing an auto-start feature for the auto-match process when the component mounts or when the tolerance value changes. Additionally, it improves the user interface by allowing users to click on face images to open the full photo in a new tab, enhancing the overall user experience. Documentation has been updated to reflect these changes.
---
 frontend/src/pages/AutoMatch.tsx | 44 ++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/AutoMatch.tsx b/frontend/src/pages/AutoMatch.tsx
index aab1783..639b13e 100644
--- a/frontend/src/pages/AutoMatch.tsx
+++ b/frontend/src/pages/AutoMatch.tsx
@@ -26,6 +26,12 @@ export default function AutoMatch() {
     return currentPerson?.matches || []
   }, [currentPerson])
 
+  // Auto-start auto-match when component mounts or tolerance changes
+  useEffect(() => {
+    startAutoMatch()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tolerance])
+
   // Apply search filter
   useEffect(() => {
     if (!searchQuery.trim()) {
@@ -268,11 +274,20 @@ export default function AutoMatch() {
 
                   {/* Person face image */}
                   <div className="mb-4 flex justify-center">
-                    <img
-                      src={`/api/v1/faces/${currentPerson.reference_face_id}/crop`}
-                      alt="Reference face"
-                      className="max-w-[300px] max-h-[300px] rounded border border-gray-300"
-                    />
+                    <div
+                      className="cursor-pointer hover:opacity-90 transition-opacity"
+                      onClick={() => {
+                        const photoUrl = `${apiClient.defaults.baseURL}/api/v1/photos/${currentPerson.reference_photo_id}/image`
+                        window.open(photoUrl, '_blank')
+                      }}
+                      title="Click to open full photo"
+                    >
+                      <img
+                        src={`/api/v1/faces/${currentPerson.reference_face_id}/crop`}
+                        alt="Reference face"
+                        className="max-w-[300px] max-h-[300px] rounded border border-gray-300"
+                      />
+                    </div>
                   </div>
 
                   {/* Save button */}
@@ -326,11 +341,20 @@ export default function AutoMatch() {
                           onChange={() => handleFaceToggle(match.id)}
                           className="w-4 h-4"
                         />
-                        <img
-                          src={`/api/v1/faces/${match.id}/crop`}
-                          alt="Match face"
-                          className="w-20 h-20 object-cover rounded border border-gray-300"
-                        />
+                        <div
+                          className="cursor-pointer hover:opacity-90 transition-opacity"
+                          onClick={() => {
+                            const photoUrl = `${apiClient.defaults.baseURL}/api/v1/photos/${match.photo_id}/image`
+                            window.open(photoUrl, '_blank')
+                          }}
+                          title="Click to open full photo"
+                        >
+                          <img
+                            src={`/api/v1/faces/${match.id}/crop`}
+                            alt="Match face"
+                            className="w-20 h-20 object-cover rounded border border-gray-300"
+                          />
+                        </div>
                         <div className="flex-1">
                           <div className="flex items-center gap-2 mb-1">
                             <span