Add support for arbitrary sub labels in reviews (#10990)

* store arbitrary sub labels

* Include sub labels in tooltip

* Update tooltips on filmstrip

* Fix item display

* Fix bug with creating review segment

web/src/components/card/AnimatedEventCard.tsx

@@ -83,7 +83,18 @@ export function AnimatedEventCard({ event }: AnimatedEventCardProps) {
         </div>
       </TooltipTrigger>
       <TooltipContent>
-        {`${[...event.data.objects, ...event.data.audio].join(", ").replaceAll("-verified", "")} detected`}
+        {`${[
+          ...new Set([
+            ...(event.data.objects || []),
+            ...(event.data.sub_labels || []),
+            ...(event.data.audio || []),
+          ]),
+        ]
+          .filter((item) => item !== undefined && !item.includes("-verified"))
+          .map((text) => text.charAt(0).toUpperCase() + text.substring(1))
+          .sort()
+          .join(", ")
+          .replaceAll("-verified", "")} detected`}
       </TooltipContent>
     </Tooltip>
   );

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) => {
@@ -252,8 +252,18 @@ export default function PreviewThumbnailPlayer({
               </TooltipTrigger>
             </div>
             <TooltipContent className="capitalize">
-              {[...(review.data.objects || []), ...(review.data.audio || [])]
-                .filter((item) => item !== undefined)
+              {[
+                ...new Set([
+                  ...(review.data.objects || []),
+                  ...(review.data.sub_labels || []),
+                  ...(review.data.audio || []),
+                ]),
+              ]
+                .filter(
+                  (item) => item !== undefined && !item.includes("-verified"),
+                )
+                .map((text) => text.charAt(0).toUpperCase() + text.substring(1))
+                .sort()
                 .join(", ")
                 .replaceAll("-verified", "")}
             </TooltipContent>

web/src/types/review.ts

@@ -15,6 +15,7 @@ export type ReviewData = {
   audio: string[];
   detections: string[];
   objects: string[];
+  sub_labels?: string[];
   significant_motion_areas: number[];
   zones: string[];
 };