From c9119a3c72d7fb87112f99f33d96f89b0139db04 Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Mon, 31 Oct 2022 22:16:53 -0700
Subject: [PATCH] Fix inconsistent state with facerect

---
 src/components/SelectionManager.vue |  8 +++++++-
 src/components/Timeline.vue         | 17 ++++++++++++++++-
 src/types.ts                        |  2 ++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/SelectionManager.vue b/src/components/SelectionManager.vue
index abff9c97..0566cbab 100644
--- a/src/components/SelectionManager.vue
+++ b/src/components/SelectionManager.vue
@@ -241,7 +241,13 @@ export default class SelectionManager extends Mixins(GlobalMixin, UserConfig) {
       this.selection.set(photo.fileid, photo);
     } else {
       photo.flag &= ~this.c.FLAG_SELECTED;
-      this.selection.delete(photo.fileid);
+
+      // Only do this if the photo in the selection set is this one.
+      // The problem arises when there are duplicates (e.g. face rect)
+      // in the list, which creates an inconsistent state if we do this.
+      if (this.selection.get(photo.fileid) === photo) {
+        this.selection.delete(photo.fileid);
+      }
     }
 
     if (!noUpdate) {
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index 0b58b866..d8180680 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -73,7 +73,7 @@
           <div
             class="photo"
             v-for="photo of item.photos"
-            :key="photo.fileid"
+            :key="photo.key || photo.fileid"
             :style="{
               height: photo.dispH + 'px',
               width: photo.dispW + 'px',
@@ -930,6 +930,9 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     let rowIdx = headIdx + 1;
     let rowY = headY + head.size;
 
+    // Duplicate detection, e.g. for face rects
+    const seen = new Map<number, number>();
+
     // Previous justified row
     let prevJustifyTop = justify[0]?.top || 0;
 
@@ -1016,6 +1019,18 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
       // Move to next index of photo
       dataIdx++;
 
+      // Duplicate detection.
+      // These may be valid, e.g. in face rects. All we need to have
+      // is a unique Vue key for the v-for loop.
+      if (seen.has(photo.fileid)) {
+        const val = seen.get(photo.fileid);
+        photo.key = `${photo.fileid}-${val}`;
+        seen.set(photo.fileid, val + 1);
+      } else {
+        photo.key = null;
+        seen.set(photo.fileid, 1);
+      }
+
       // Add photo to row
       row.photos.push(photo);
     }
diff --git a/src/types.ts b/src/types.ts
index d59a3a33..13c687eb 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -35,6 +35,8 @@ export type IDay = {
 export type IPhoto = {
   /** Nextcloud ID of file */
   fileid: number;
+  /** Vue key if duplicates present (otherwise use fileid) */
+  key?: string;
   /** Etag from server */
   etag?: string;
   /** Path to file */