Refactor image grouping

web/src/components/card/ClassificationCard.tsx

@@ -6,7 +6,7 @@ import {
   ClassificationThreshold,
 } from "@/types/classification";
 import { Event } from "@/types/event";
-import { useMemo, useRef, useState } from "react";
+import { forwardRef, useMemo, useRef, useState } from "react";
 import { isDesktop, isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import TimeAgo from "../dynamic/TimeAgo";
@@ -14,7 +14,22 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { LuSearch } from "react-icons/lu";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { useNavigate } from "react-router-dom";
-import { getTranslatedLabel } from "@/utils/i18n";
+import { HiSquare2Stack } from "react-icons/hi2";
+import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerTitle,
+  DrawerDescription,
+} from "../ui/drawer";
 
 type ClassificationCardProps = {
   imgClassName?: string;
@@ -23,19 +38,27 @@ type ClassificationCardProps = {
   selected: boolean;
   i18nLibrary: string;
   showArea?: boolean;
+  count?: number;
   onClick: (data: ClassificationItemData, meta: boolean) => void;
   children?: React.ReactNode;
 };
-export function ClassificationCard({
+export const ClassificationCard = forwardRef<
+  HTMLDivElement,
+  ClassificationCardProps
+>(function ClassificationCard(
+  {
     imgClassName,
     data,
     threshold,
     selected,
     i18nLibrary,
     showArea = true,
+    count,
     onClick,
     children,
-}: ClassificationCardProps) {
+  },
+  ref,
+) {
   const { t } = useTranslation([i18nLibrary]);
   const [imageLoaded, setImageLoaded] = useState(false);
 
@@ -71,12 +94,25 @@ export function ClassificationCard({
 
   return (
     <div
+      ref={ref}
       className={cn(
         "relative flex size-48 cursor-pointer flex-col overflow-hidden rounded-lg outline outline-[3px]",
         selected
           ? "shadow-selected outline-selected"
           : "outline-transparent duration-500",
       )}
+      onClick={(e) => {
+        const isMeta = e.metaKey || e.ctrlKey;
+        if (isMeta) {
+          e.stopPropagation();
+        }
+        onClick(data, isMeta);
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick(data, true);
+      }}
     >
       <img
         ref={imgRef}
@@ -87,13 +123,16 @@ export function ClassificationCard({
         )}
         onLoad={() => setImageLoaded(true)}
         src={`${baseUrl}${data.filepath}`}
-        onClick={(e) => {
-          e.stopPropagation();
-          onClick(data, e.metaKey || e.ctrlKey);
-        }}
       />
-      {false && imageArea != undefined && (
+      <ImageShadowOverlay upperClassName="z-0" lowerClassName="h-[30%] z-0" />
-        <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
+      {count && (
+        <div className="absolute right-2 top-2 flex flex-row items-center gap-1">
+          <div className="text-gray-200">{count}</div>{" "}
+          <HiSquare2Stack className="text-gray-200" />
+        </div>
+      )}
+      {!count && imageArea != undefined && (
+        <div className="absolute right-1 top-1 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
           {t("information.pixels", { ns: "common", area: imageArea })}
         </div>
       )}
@@ -127,7 +166,7 @@ export function ClassificationCard({
       </div>
     </div>
   );
-}
+});
 
 type GroupedClassificationCardProps = {
   group: ClassificationItemData[];
@@ -137,7 +176,6 @@ type GroupedClassificationCardProps = {
   i18nLibrary: string;
   objectType: string;
   onClick: (data: ClassificationItemData | undefined) => void;
-  onSelectEvent: (event: Event) => void;
   children?: (data: ClassificationItemData) => React.ReactNode;
 };
 export function GroupedClassificationCard({
@@ -146,20 +184,48 @@ export function GroupedClassificationCard({
   threshold,
   selectedItems,
   i18nLibrary,
-  objectType,
   onClick,
-  onSelectEvent,
   children,
 }: GroupedClassificationCardProps) {
   const navigate = useNavigate();
   const { t } = useTranslation(["views/explore", i18nLibrary]);
+  const [detailOpen, setDetailOpen] = useState(false);
 
   // data
 
-  const allItemsSelected = useMemo(
+  const bestItem = useMemo<ClassificationItemData | undefined>(() => {
-    () => group.every((data) => selectedItems.includes(data.filename)),
+    let best: undefined | ClassificationItemData = undefined;
-    [group, selectedItems],
+
-  );
+    group.forEach((item) => {
+      if (best?.score == undefined || (item.score && best.score < item.score)) {
+        best = item;
+      }
+    });
+
+    if (!best) {
+      return undefined;
+    }
+
+    const bestTyped: ClassificationItemData = best;
+    return {
+      ...bestTyped,
+      score: event?.data?.sub_label_score || bestTyped.score,
+    };
+  }, [group, event]);
+
+  const bestScoreStatus = useMemo(() => {
+    if (!bestItem?.score || !threshold) {
+      return "unknown";
+    }
+
+    if (bestItem.score >= threshold.recognition) {
+      return "match";
+    } else if (bestItem.score >= threshold.unknown) {
+      return "potential";
+    } else {
+      return "unknown";
+    }
+  }, [bestItem, threshold]);
 
   const time = useMemo(() => {
     const item = group[0];
@@ -171,52 +237,56 @@ export function GroupedClassificationCard({
     return item.timestamp * 1000;
   }, [group]);
 
+  if (!bestItem) {
+    return null;
+  }
+
+  const Overlay = isDesktop ? Dialog : Drawer;
+  const Trigger = isDesktop ? DialogTrigger : DrawerTrigger;
+  const Content = isDesktop ? DialogContent : DrawerContent;
+  const ContentTitle = isDesktop ? DialogTitle : DrawerTitle;
+  const ContentDescription = isDesktop ? DialogDescription : DrawerDescription;
+
   return (
-    <div
+    <>
-      className={cn(
+      <ClassificationCard
-        "flex cursor-pointer flex-col gap-2 rounded-lg bg-card p-2 outline outline-[3px]",
+        data={bestItem}
-        isMobile && "w-full",
+        threshold={threshold}
-        allItemsSelected
+        selected={selectedItems.includes(bestItem.filename)}
-          ? "shadow-selected outline-selected"
+        i18nLibrary={i18nLibrary}
-          : "outline-transparent duration-500",
+        count={group.length}
-      )}
+        onClick={(_, meta) => {
-      onClick={() => {
+          if (meta || selectedItems.length > 0) {
-        if (selectedItems.length) {
             onClick(undefined);
+          } else {
+            setDetailOpen(true);
           }
         }}
-      onContextMenu={(e) => {
+      />
-        e.stopPropagation();
+      <Overlay
-        e.preventDefault();
+        open={detailOpen}
-        onClick(undefined);
+        onOpenChange={(open) => {
+          if (!open) {
+            setDetailOpen(false);
+          }
         }}
       >
-      <div className="flex flex-row justify-between">
+        <Trigger asChild></Trigger>
-        <div className="flex flex-col gap-1">
+        <Content className={cn("", isDesktop && "w-auto max-w-[85%]")}>
-          <div className="select-none smart-capitalize">
+          <>
-            {getTranslatedLabel(objectType)}
+            {isDesktop && (
-            {event?.sub_label
+              <div className="absolute right-10 top-4 flex flex-row justify-between">
-              ? `: ${event.sub_label} (${Math.round((event.data.sub_label_score || 0) * 100)}%)`
-              : ": " + t("details.unknown")}
-          </div>
-          {time && (
-            <TimeAgo
-              className="text-sm text-secondary-foreground"
-              time={time}
-              dense
-            />
-          )}
-        </div>
                 {event && (
                   <Tooltip>
-            <TooltipTrigger>
+                    <TooltipTrigger asChild>
                       <div
                         className="cursor-pointer"
+                        tabIndex={-1}
                         onClick={() => {
                           navigate(`/explore?event_id=${event.id}`);
                         }}
                       >
-                <LuSearch className="size-4 text-muted-foreground" />
+                        <LuSearch className="size-4 text-secondary-foreground" />
                       </div>
                     </TooltipTrigger>
                     <TooltipPortal>
@@ -229,7 +299,35 @@ export function GroupedClassificationCard({
                   </Tooltip>
                 )}
               </div>
-
+            )}
+            <ContentTitle className="flex items-center gap-1 font-normal capitalize">
+              {event?.sub_label ? event.sub_label : t("details.unknown")}
+              {event?.sub_label && (
+                <div
+                  className={cn(
+                    "",
+                    bestScoreStatus == "match" && "text-success",
+                    bestScoreStatus == "potential" && "text-orange-400",
+                    bestScoreStatus == "unknown" && "text-danger",
+                  )}
+                >{`${Math.round((event.data.sub_label_score || 0) * 100)}%`}</div>
+              )}
+            </ContentTitle>
+            <ContentDescription>
+              {time && (
+                <TimeAgo
+                  className="text-sm text-secondary-foreground"
+                  time={time}
+                  dense
+                />
+              )}
+            </ContentDescription>
+            <div
+              className={cn(
+                "flex cursor-pointer flex-col gap-2 rounded-lg p-2",
+                isMobile && "w-full",
+              )}
+            >
               <div
                 className={cn(
                   "gap-2",
@@ -243,15 +341,11 @@ export function GroupedClassificationCard({
                     key={data.filename}
                     data={data}
                     threshold={threshold}
-            selected={
+                    selected={false}
-              allItemsSelected ? false : selectedItems.includes(data.filename)
-            }
                     i18nLibrary={i18nLibrary}
                     onClick={(data, meta) => {
                       if (meta || selectedItems.length > 0) {
                         onClick(data);
-              } else if (event) {
-                onSelectEvent(event);
                       }
                     }}
                   >
@@ -260,5 +354,9 @@ export function GroupedClassificationCard({
                 ))}
               </div>
             </div>
+          </>
+        </Content>
+      </Overlay>
+    </>
   );
 }

web/src/components/ui/dialog.tsx

@@ -107,7 +107,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-        <X className="h-4 w-4" />
+        <X className="h-4 w-4 text-secondary-foreground" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>

web/src/pages/FaceLibrary.tsx

@@ -63,10 +63,6 @@ import {
 } from "react-icons/lu";
 import { toast } from "sonner";
 import useSWR from "swr";
-import SearchDetailDialog, {
-  SearchTab,
-} from "@/components/overlay/detail/SearchDetailDialog";
-import { SearchResult } from "@/types/search";
 import {
   ClassificationCard,
   GroupedClassificationCard,
@@ -686,11 +682,6 @@ function TrainingGrid({
     { ids: eventIdsQuery },
   ]);
 
-  // selection
-
-  const [selectedEvent, setSelectedEvent] = useState<Event>();
-  const [dialogTab, setDialogTab] = useState<SearchTab>("details");
-
   if (attemptImages.length == 0) {
     return (
       <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
@@ -701,18 +692,6 @@ function TrainingGrid({
   }
 
   return (
-    <>
-      <SearchDetailDialog
-        search={
-          selectedEvent ? (selectedEvent as unknown as SearchResult) : undefined
-        }
-        page={dialogTab}
-        setSimilarity={undefined}
-        setSearchPage={setDialogTab}
-        setSearch={(search) => setSelectedEvent(search as unknown as Event)}
-        setInputFocused={() => {}}
-      />
-
     <div
       ref={contentRef}
       className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"
@@ -728,13 +707,11 @@ function TrainingGrid({
             faceNames={faceNames}
             selectedFaces={selectedFaces}
             onClickFaces={onClickFaces}
-              onSelectEvent={setSelectedEvent}
             onRefresh={onRefresh}
           />
         );
       })}
     </div>
-    </>
   );
 }
 
@@ -745,7 +722,6 @@ type FaceAttemptGroupProps = {
   faceNames: string[];
   selectedFaces: string[];
   onClickFaces: (image: string[], ctrl: boolean) => void;
-  onSelectEvent: (event: Event) => void;
   onRefresh: () => void;
 };
 function FaceAttemptGroup({
@@ -755,7 +731,6 @@ function FaceAttemptGroup({
   faceNames,
   selectedFaces,
   onClickFaces,
-  onSelectEvent,
   onRefresh,
 }: FaceAttemptGroupProps) {
   const { t } = useTranslation(["views/faceLibrary", "views/explore"]);
@@ -773,8 +748,8 @@ function FaceAttemptGroup({
 
   const handleClickEvent = useCallback(
     (meta: boolean) => {
-      if (event && selectedFaces.length == 0 && !meta) {
+      if (!meta) {
-        onSelectEvent(event);
+        return;
       } else {
         const anySelected =
           group.find((face) => selectedFaces.includes(face.filename)) !=
@@ -798,7 +773,7 @@ function FaceAttemptGroup({
         }
       }
     },
-    [event, group, selectedFaces, onClickFaces, onSelectEvent],
+    [group, selectedFaces, onClickFaces],
   );
 
   // api calls
@@ -873,7 +848,6 @@ function FaceAttemptGroup({
           handleClickEvent(true);
         }
       }}
-      onSelectEvent={onSelectEvent}
     >
       {(data) => (
         <>