Add similarity search

web/src/components/card/SearchThumbnail.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo } from "react";
 import { useApiHost } from "@/api";
 import { getIconForLabel } from "@/utils/iconUtil";
 import useSWR from "swr";
@@ -12,8 +12,6 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { SearchResult } from "@/types/search";
 import { cn } from "@/lib/utils";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
-import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
-import { Event } from "@/types/event";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
@@ -30,8 +28,6 @@ export default function SearchThumbnail({
 
   // interactions
 
-  const [showFrigatePlus, setShowFrigatePlus] = useState(false);
-
   const handleOnClick = useCallback(() => {
     onClick(searchResult);
   }, [searchResult, onClick]);
@@ -58,14 +54,6 @@ export default function SearchThumbnail({
 
   return (
     <div className="relative size-full cursor-pointer" onClick={handleOnClick}>
-      <FrigatePlusDialog
-        upload={
-          showFrigatePlus ? (searchResult as unknown as Event) : undefined
-        }
-        onClose={() => setShowFrigatePlus(false)}
-        onEventUploaded={() => {}}
-      />
-
       <ImageLoadingIndicator
         className="absolute inset-0"
         imgLoaded={imgLoaded}

web/src/components/card/SearchThumbnailFooter.tsx

@@ -13,7 +13,6 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import {
-  LuActivity,
   LuCamera,
   LuDownload,
   LuMoreVertical,
@@ -23,13 +22,16 @@ import {
 import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 import { FrigatePlusDialog } from "../overlay/dialog/FrigatePlusDialog";
 import { Event } from "@/types/event";
+import { FaArrowsRotate } from "react-icons/fa6";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
+  findSimilar: () => void;
 };
 
 export default function SearchThumbnailFooter({
   searchResult,
+  findSimilar,
 }: SearchThumbnailProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
@@ -70,7 +72,7 @@ export default function SearchThumbnailFooter({
           searchResult.has_snapshot &&
           searchResult.end_time && (
             <Tooltip>
-              <TooltipTrigger asChild>
+              <TooltipTrigger>
                 <FrigatePlusIcon
                   className="size-5 cursor-pointer text-white"
                   onClick={() => setShowFrigatePlus(true)}
@@ -80,12 +82,17 @@ export default function SearchThumbnailFooter({
             </Tooltip>
           )}
 
+        {config?.semantic_search?.enabled && (
           <Tooltip>
-          <TooltipTrigger asChild>
+            <TooltipTrigger>
-            <LuSearch className="size-5 cursor-pointer text-white" />
+              <LuSearch
+                className="size-5 cursor-pointer text-white"
+                onClick={findSimilar}
+              />
             </TooltipTrigger>
             <TooltipContent>Find similar</TooltipContent>
           </Tooltip>
+        )}
 
         <DropdownMenu>
           <DropdownMenuTrigger>
@@ -101,7 +108,7 @@ export default function SearchThumbnailFooter({
               <span>Download snapshot</span>
             </DropdownMenuItem>
             <DropdownMenuItem>
-              <LuActivity className="mr-2 size-4" />
+              <FaArrowsRotate className="mr-2 size-4" />
               <span>View object lifecycle</span>
             </DropdownMenuItem>
             <DropdownMenuItem>

web/src/views/search/SearchView.tsx

@@ -428,7 +428,14 @@ export default function SearchView({
                       className={`review-item-ring pointer-events-none absolute inset-0 z-10 size-full rounded-lg outline outline-[3px] -outline-offset-[2.8px] ${selected ? `shadow-selected outline-selected` : "outline-transparent duration-500"}`}
                     />
                     <div className="flex w-full items-center justify-between rounded-b-lg border border-t-0 bg-card p-3 text-card-foreground">
-                      <SearchThumbnailFooter searchResult={value} />
+                      <SearchThumbnailFooter
+                        searchResult={value}
+                        findSimilar={() => {
+                          if (config?.semantic_search.enabled) {
+                            setSimilaritySearch(value);
+                          }
+                        }}
+                      />
                     </div>
                   </div>
                 );