Simplify similarity searching

web/src/pages/Explore.tsx

@@ -3,12 +3,7 @@ import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { RecordingStartingPoint } from "@/types/record";
-import {
+import { SearchFilter, SearchResult } from "@/types/search";
-  PartialSearchResult,
-  SearchFilter,
-  SearchResult,
-  SearchSource,
-} from "@/types/search";
 import { TimeRange } from "@/types/timeline";
 import { RecordingView } from "@/views/recording/RecordingView";
 import SearchView from "@/views/search/SearchView";
@@ -31,62 +26,26 @@ export default function Explore() {
 
   // search filter
 
-  const [similaritySearch, setSimilaritySearch] =
+  const similaritySearch = useMemo(() => {
-    useState<PartialSearchResult>();
+    if (!searchTerm.includes("similarity:")) {
+      return undefined;
+    }
+
+    return searchTerm.split(":")[1];
+  }, [searchTerm]);
 
   const [searchFilter, setSearchFilter, searchSearchParams] =
     useApiFilterArgs<SearchFilter>();
 
-  const onUpdateFilter = useCallback(
-    (newFilter: SearchFilter) => {
-      setSearchFilter(newFilter);
-
-      if (similaritySearch && !newFilter.search_type?.includes("similarity")) {
-        setSimilaritySearch(undefined);
-      }
-    },
-    [similaritySearch, setSearchFilter],
-  );
-
   // search api
 
-  const updateFilterWithSimilarity = useCallback(
-    (similaritySearch: PartialSearchResult) => {
-      let newFilter = searchFilter;
-      setSimilaritySearch(similaritySearch);
-      if (similaritySearch) {
-        newFilter = {
-          ...searchFilter,
-          // @ts-expect-error we want to set this
-          similarity_search_id: undefined,
-          search_type: ["similarity"] as SearchSource[],
-        };
-      } else {
-        if (searchFilter?.search_type?.includes("similarity" as SearchSource)) {
-          newFilter = {
-            ...searchFilter,
-            // @ts-expect-error we want to set this
-            similarity_search_id: undefined,
-            search_type: undefined,
-          };
-        }
-      }
-      if (newFilter) {
-        setSearchFilter(newFilter);
-      }
-    },
-    [searchFilter, setSearchFilter],
-  );
-
   useSearchEffect("similarity_search_id", (similarityId) => {
-    updateFilterWithSimilarity({ id: similarityId });
+    setSearch(similarityId);
+    // @ts-expect-error we want to clear this
+    setSearchFilter({ ...searchFilter, similarity_search_id: undefined });
   });
 
   useEffect(() => {
-    if (similaritySearch) {
-      setSimilaritySearch(undefined);
-    }
-
     if (searchTimeout) {
       clearTimeout(searchTimeout);
     }
@@ -106,7 +65,7 @@ export default function Explore() {
       return [
         "events/search",
         {
-          query: similaritySearch.id,
+          query: similaritySearch,
           cameras: searchSearchParams["cameras"],
           labels: searchSearchParams["labels"],
           sub_labels: searchSearchParams["subLabels"],
@@ -241,7 +200,7 @@ export default function Explore() {
           allCameras={selectedReviewData.allCameras}
           allPreviews={allPreviews}
           timeRange={selectedTimeRange}
-          updateFilter={onUpdateFilter}
+          updateFilter={setSearchFilter}
         />
       );
     }
@@ -254,9 +213,8 @@ export default function Explore() {
         searchResults={searchResults}
         isLoading={isLoading}
         setSearch={setSearch}
-        similaritySearch={similaritySearch}
+        setSimilaritySearch={(search) => setSearch(`similarity:${search.id}`)}
-        setSimilaritySearch={updateFilterWithSimilarity}
+        onUpdateFilter={setSearchFilter}
-        onUpdateFilter={onUpdateFilter}
         onOpenSearch={onOpenSearch}
       />
     );

web/src/types/search.ts

@@ -28,8 +28,6 @@ export type SearchResult = {
   };
 };
 
-export type PartialSearchResult = Partial<SearchResult> & { id: string };
-
 export type SearchFilter = {
   cameras?: string[];
   labels?: string[];

web/src/views/search/SearchView.tsx

@@ -12,11 +12,7 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
-import {
+import { SearchFilter, SearchResult } from "@/types/search";
-  PartialSearchResult,
-  SearchFilter,
-  SearchResult,
-} from "@/types/search";
 import { useCallback, useMemo, useState } from "react";
 import { isMobileOnly } from "react-device-detect";
 import { LuImage, LuSearchX, LuText, LuXCircle } from "react-icons/lu";
@@ -29,7 +25,6 @@ type SearchViewProps = {
   searchFilter?: SearchFilter;
   searchResults?: SearchResult[];
   isLoading: boolean;
-  similaritySearch?: PartialSearchResult;
   setSearch: (search: string) => void;
   setSimilaritySearch: (search: SearchResult) => void;
   onUpdateFilter: (filter: SearchFilter) => void;
@@ -41,7 +36,6 @@ export default function SearchView({
   searchFilter,
   searchResults,
   isLoading,
-  similaritySearch,
   setSearch,
   setSimilaritySearch,
   onUpdateFilter,
@@ -123,7 +117,7 @@ export default function SearchView({
             <Input
               className="text-md w-full bg-muted pr-10"
               placeholder={"Search for a detected object..."}
-              value={similaritySearch ? "" : search}
+              value={search}
               onChange={(e) => setSearch(e.target.value)}
             />
             {search && (
@@ -180,7 +174,7 @@ export default function SearchView({
                         findSimilar={() => setSimilaritySearch(value)}
                         onClick={() => onSelectSearch(value)}
                       />
-                      {(searchTerm || similaritySearch) && (
+                      {searchTerm && (
                         <div className={cn("absolute right-2 top-2 z-40")}>
                           <Tooltip>
                             <TooltipTrigger>