Add multiple face group merge support

api/graphql/resolvers/faces.go

@@ -218,7 +218,11 @@
 	return faceGroup, nil
 }
 
-func (r *mutationResolver) CombineFaceGroups(ctx context.Context, destinationFaceGroupID int, sourceFaceGroupID int) (*models.FaceGroup, error) {
+func (r *mutationResolver) CombineFaceGroups(ctx context.Context, destinationFaceGroupID int, sourceFaceGroupIDs []int) (*models.FaceGroup, error) {
+	if len(sourceFaceGroupIDs) == 0 {
+		return nil, errors.New("at least one source face group ID is required")
+	}
+
 	db := r.DB(ctx)
 	user := auth.UserFromContext(ctx)
 	if user == nil {
@@ -234,28 +238,40 @@
 		return nil, err
 	}
 
-	sourceFaceGroup, err := userOwnedFaceGroup(db, user, sourceFaceGroupID)
-	if err != nil {
-		return nil, err
-	}
+	var sourceFaceGroups []*models.FaceGroup
 
-	updateError := db.Transaction(func(tx *gorm.DB) error {
-		if err := tx.Model(&models.ImageFace{}).Where("face_group_id = ?", sourceFaceGroup.ID).Update("face_group_id", destinationFaceGroup.ID).Error; err != nil {
-			return err
+	for _, sourceID := range sourceFaceGroupIDs {
+		if sourceID == destinationFaceGroup.ID {
+			return nil, errors.New("source face groups cannot include the destination face group")
 		}
 
-		if err := tx.Delete(&sourceFaceGroup).Error; err != nil {
-			return err
+		sourceFaceGroup, err := userOwnedFaceGroup(db, user, sourceID)
+		if err != nil {
+			return nil, err
 		}
 
-		return nil
-	})
+		sourceFaceGroups = append(sourceFaceGroups, sourceFaceGroup)
+	}
+	for _, sourceFaceGroup := range sourceFaceGroups {
+		updateError := db.Transaction(func(tx *gorm.DB) error {
+
+			if err := tx.Model(&models.ImageFace{}).Where("face_group_id = ?", sourceFaceGroup.ID).Update("face_group_id", destinationFaceGroup.ID).Error; err != nil {
+				return err
+			}
 
-	if updateError != nil {
-		return nil, updateError
+			if err := tx.Delete(&sourceFaceGroup).Error; err != nil {
+				return err
+			}
+
+			return nil
+		})
+
+		if updateError != nil {
+			return nil, updateError
+		}
 	}
 
-	face_detection.GlobalFaceDetector.MergeCategories(int32(sourceFaceGroupID), int32(destinationFaceGroupID))
+	face_detection.GlobalFaceDetector.MergeImageFaces(sourceFaceGroupIDs, int32(destinationFaceGroupID))
 
 	return destinationFaceGroup, nil
 }

api/graphql/schema.graphql

@@ -177,7 +177,7 @@ type Mutation {
   "Assign a label to a face group, set label to null to remove the current one"
   setFaceGroupLabel(faceGroupID: ID!, label: String): FaceGroup! @isAuthorized
   "Merge two face groups into a single one, all ImageFaces from source will be moved to destination"
-  combineFaceGroups(destinationFaceGroupID: ID!, sourceFaceGroupID: ID!): FaceGroup! @isAuthorized
+  combineFaceGroups(destinationFaceGroupID: ID!, sourceFaceGroupIDs: [ID!]!): FaceGroup! @isAuthorized
   "Move a list of ImageFaces to another face group"
   moveImageFaces(imageFaceIDs: [ID!]!, destinationFaceGroupID: ID!): FaceGroup! @isAuthorized
   "Check all unlabeled faces to see if they match a labeled FaceGroup, and move them if they match"

ui/src/Pages/PeoplePage/PeoplePage.tsx

@@ -21,6 +21,9 @@ import {
 import { recognizeUnlabeledFaces } from './__generated__/recognizeUnlabeledFaces'
 import { isNil, tailwindClassNames } from '../../helpers/utils'
 import classNames from 'classnames'
+import MergeFaceGroupsModal, {
+  MergeFaceGroupsModalState,
+} from './SingleFaceGroup/MergeFaceGroupsModal'
 
 export const MY_FACES_QUERY = gql`
   query myFaces($limit: Int, $offset: Int) {
@@ -254,6 +257,10 @@ export const PeoplePage = () => {
     },
   })
 
+  const [mergeModalState, setMergeModalState] = useState(
+    MergeFaceGroupsModalState.Closed
+  )
+
   const [recognizeUnlabeled, { loading: recognizeUnlabeledLoading }] =
     useMutation<recognizeUnlabeledFaces>(RECOGNIZE_UNLABELED_FACES_MUTATION)
 
@@ -269,31 +276,61 @@ export const PeoplePage = () => {
     return <div>{error.message}</div>
   }
 
-  let faces = null
+  let faces: JSX.Element[] | null = null
   if (data) {
     faces = data.myFaceGroups.map(faceGroup => (
       <FaceGroup key={faceGroup.id} group={faceGroup} />
     ))
   }
 
+  let modals = null
+  modals = (
+    <>
+      <MergeFaceGroupsModal
+        state={mergeModalState}
+        setState={setMergeModalState}
+        refetchQueries={[
+          {
+            query: MY_FACES_QUERY,
+          },
+        ]}
+      />
+    </>
+  )
+
   return (
     <Layout title={t('title.people', 'People')}>
-      <Button
-        disabled={recognizeUnlabeledLoading}
-        onClick={() => {
-          recognizeUnlabeled()
-        }}
-      >
-        {t(
-          'people_page.recognize_unlabeled_faces_button',
-          'Recognize unlabeled faces'
-        )}
-      </Button>
+      <ul className="flex gap-2 flex-wrap mb-6">
+        <li>
+          <Button
+            disabled={recognizeUnlabeledLoading}
+            onClick={() => {
+              recognizeUnlabeled()
+            }}
+          >
+            {t(
+              'people_page.recognize_unlabeled_faces_button',
+              'Recognize unlabeled faces'
+            )}
+          </Button>
+        </li>
+        <li>
+          <Button
+            onClick={() => {
+              setMergeModalState(MergeFaceGroupsModalState.SelectDestination)
+            }}
+          >
+            {t('people_page.action_label.merge_people', 'Merge people')}
+          </Button>
+        </li>
+      </ul>
+
       <FaceGroupsWrapper ref={containerElem}>{faces}</FaceGroupsWrapper>
       <PaginateLoader
         active={!finishedLoadingMore && !loading}
         text={t('general.loading.paginate.faces', 'Loading more people')}
       />
+      {modals}
     </Layout>
   )
 }

ui/src/Pages/PeoplePage/SingleFaceGroup/FaceGroupTitle.tsx

@@ -14,7 +14,9 @@ import {
   setGroupLabelVariables,
 } from '../__generated__/setGroupLabel'
 import DetachImageFacesModal from './DetachImageFacesModal'
-import MergeFaceGroupsModal from './MergeFaceGroupsModal'
+import MergeFaceGroupsModal, {
+  MergeFaceGroupsModalState,
+} from './MergeFaceGroupsModal'
 import MoveImageFacesModal from './MoveImageFacesModal'
 import { singleFaceGroup_faceGroup } from './__generated__/singleFaceGroup'
 
@@ -28,7 +30,9 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
   const [editLabel, setEditLabel] = useState(false)
   const [inputValue, setInputValue] = useState(faceGroup?.label ?? '')
   const inputRef = createRef<HTMLInputElement>()
-  const [mergeModalOpen, setMergeModalOpen] = useState(false)
+  const [mergeModalState, setMergeModalState] = useState(
+    MergeFaceGroupsModalState.Closed
+  )
   const [moveModalOpen, setMoveModalOpen] = useState(false)
   const [detachModalOpen, setDetachModalOpen] = useState(false)
 
@@ -109,9 +113,9 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
     modals = (
       <>
         <MergeFaceGroupsModal
-          open={mergeModalOpen}
-          setOpen={setMergeModalOpen}
-          sourceFaceGroup={faceGroup}
+          state={mergeModalState}
+          setState={setMergeModalState}
+          preselectedDestinationFaceGroup={faceGroup}
           refetchQueries={[
             {
               query: MY_FACES_QUERY,
@@ -143,8 +147,12 @@ const FaceGroupTitle = ({ faceGroup }: FaceGroupTitleProps) => {
             </Button>
           </li>
           <li>
-            <Button onClick={() => setMergeModalOpen(true)}>
-              {t('people_page.action_label.merge_people', 'Merge people')}
+            <Button
+              onClick={() =>
+                setMergeModalState(MergeFaceGroupsModalState.SelectDestination)
+              }
+            >
+              {t('people_page.action_label.merge_face', 'Merge face')}
             </Button>
           </li>
           <li>