From 9751f91b91ccc5c85b91f7cf13a9658a3c6cb88c Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 16 Apr 2024 11:14:20 -0600
Subject: [PATCH] Fix item display

---
 web/src/components/card/AnimatedEventCard.tsx        |  8 +++++---
 web/src/components/player/PreviewThumbnailPlayer.tsx | 12 ++++++++----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
index 4315b8480..93ecbe919 100644
--- a/web/src/components/card/AnimatedEventCard.tsx
+++ b/web/src/components/card/AnimatedEventCard.tsx
@@ -84,13 +84,15 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
       </TooltipTrigger>
       <TooltipContent>
         {`${[
-          ...new Set(
+          ...new Set([
             ...(event.data.objects || []),
             ...(event.data.sub_labels || []),
             ...(event.data.audio || []),
-          ),
+          ]),
         ]
-          .filter((item) => item !== undefined)
+          .filter((item) => item !== undefined && !item.includes("-verified"))
+          .map((text) => text.charAt(0).toUpperCase() + text.substring(1))
+          .sort()
           .join(", ")
           .replaceAll("-verified", "")} detected`}
       </TooltipContent>
diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 61a737657..5d7cc6a15 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -239,7 +239,7 @@ export default function PreviewThumbnailPlayer({
                       <Chip
                         className={`flex items-start justify-between space-x-1 ${playingBack ? "hidden" : ""} bg-gradient-to-br ${review.has_been_reviewed ? "from-green-600 to-green-700 bg-green-600" : "from-gray-400 to-gray-500 bg-gray-500"} z-0`}
                       >
-                        {review.data.objects.map((object) => {
+                        {review.data.objects.sort().map((object) => {
                           return getIconForLabel(object, "size-3 text-white");
                         })}
                         {review.data.audio.map((audio) => {
@@ -253,13 +253,17 @@ export default function PreviewThumbnailPlayer({
             </div>
             <TooltipContent className="capitalize">
               {[
-                ...new Set(
+                ...new Set([
                   ...(review.data.objects || []),
                   ...(review.data.sub_labels || []),
                   ...(review.data.audio || []),
-                ),
+                ]),
               ]
-                .filter((item) => item !== undefined)
+                .filter(
+                  (item) => item !== undefined && !item.includes("-verified"),
+                )
+                .map((text) => text.charAt(0).toUpperCase() + text.substring(1))
+                .sort()
                 .join(", ")
                 .replaceAll("-verified", "")}
             </TooltipContent>