From 856ea7d82d0933746306de93ab5e941bf91494da Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 11 Sep 2024 08:11:38 -0600
Subject: [PATCH] Update logic for similarity search

---
 .../components/filter/SearchFilterGroup.tsx   | 23 ++-----
 .../overlay/detail/ReviewDetailDialog.tsx     |  7 +-
 web/src/pages/Explore.tsx                     | 68 ++++++++-----------
 3 files changed, 35 insertions(+), 63 deletions(-)

diff --git a/web/src/components/filter/SearchFilterGroup.tsx b/web/src/components/filter/SearchFilterGroup.tsx
index 732659dcf..891013c8b 100644
--- a/web/src/components/filter/SearchFilterGroup.tsx
+++ b/web/src/components/filter/SearchFilterGroup.tsx
@@ -804,9 +804,6 @@ function SearchTypeButton({
   updateSearchSourceFilter,
 }: SearchTypeButtonProps) {
   const [open, setOpen] = useState(false);
-  const [currentSearchSources, setCurrentSearchSources] = useState<
-    SearchSource[]
-  >(selectedSearchSources);
 
   const buttonText = useMemo(() => {
     if (isMobile) {
@@ -847,8 +844,6 @@ function SearchTypeButton({
   const content = (
     <SearchTypeContent
       selectedSearchSources={selectedSearchSources}
-      currentSearchSources={currentSearchSources}
-      setCurrentSearchSources={setCurrentSearchSources}
       updateSearchSourceFilter={updateSearchSourceFilter}
       onClose={() => setOpen(false)}
     />
@@ -859,10 +854,6 @@ function SearchTypeButton({
       <Drawer
         open={open}
         onOpenChange={(open) => {
-          if (!open) {
-            setCurrentSearchSources(selectedSearchSources);
-          }
-
           setOpen(open);
         }}
       >
@@ -878,10 +869,6 @@ function SearchTypeButton({
     <Popover
       open={open}
       onOpenChange={(open) => {
-        if (!open) {
-          setCurrentSearchSources(selectedSearchSources);
-        }
-
         setOpen(open);
       }}
     >
@@ -893,25 +880,25 @@ function SearchTypeButton({
 
 type SearchTypeContentProps = {
   selectedSearchSources: SearchSource[];
-  currentSearchSources: SearchSource[];
-  setCurrentSearchSources: (sources: SearchSource[]) => void;
   updateSearchSourceFilter: (sources: SearchSource[]) => void;
   onClose: () => void;
 };
 export function SearchTypeContent({
   selectedSearchSources,
-  currentSearchSources,
-  setCurrentSearchSources,
   updateSearchSourceFilter,
   onClose,
 }: SearchTypeContentProps) {
+  const [currentSearchSources, setCurrentSearchSources] = useState<
+    SearchSource[]
+  >(selectedSearchSources);
+
   return (
     <>
       <div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
         <div className="my-2.5 flex flex-col gap-2.5">
           <FilterSwitch
             label="Thumbnail Image"
-            isChecked={currentSearchSources?.includes("thumbnail") ?? false}
+            isChecked={selectedSearchSources?.includes("thumbnail") ?? false}
             onCheckedChange={(isChecked) => {
               const updatedSources = currentSearchSources
                 ? [...currentSearchSources]
diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
index 074944453..25dd79711 100644
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@@ -338,12 +338,7 @@ function EventItem({
                     <Chip
                       className="cursor-pointer rounded-md bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
                       onClick={() => {
-                        const similaritySearchParams = new URLSearchParams({
-                          search_type: "similarity",
-                          event_id: event.id,
-                        }).toString();
-
-                        navigate(`/explore?${similaritySearchParams}`);
+                        navigate(`/explore?similarity_search_id=${event.id}`);
                       }}
                     >
                       <FaImages className="size-4 text-white" />
diff --git a/web/src/pages/Explore.tsx b/web/src/pages/Explore.tsx
index b1008dc9b..137c6c68c 100644
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@@ -1,6 +1,6 @@
 import { useApiFilterArgs } from "@/hooks/use-api-filter";
 import { useCameraPreviews } from "@/hooks/use-camera-previews";
-import { useOverlayState } from "@/hooks/use-overlay-state";
+import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { RecordingStartingPoint } from "@/types/record";
 import {
@@ -46,47 +46,37 @@ export default function Explore() {
   const [similaritySearch, setSimilaritySearch] =
     useState<PartialSearchResult>();
 
-  useEffect(() => {
-    if (
-      config?.semantic_search.enabled &&
-      searchSearchParams["search_type"] == "similarity" &&
-      searchSearchParams["event_id"]?.length != 0 &&
-      searchFilter
-    ) {
-      setSimilaritySearch({
-        id: searchSearchParams["event_id"],
-      });
-
-      // remove event id from url params
-      const { event_id: _event_id, ...newFilter } = searchFilter;
-      setSearchFilter(newFilter);
-    }
-    // only run similarity search with event_id in the url when coming from review
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    let newFilter = searchFilter;
-
-    if (similaritySearch) {
-      newFilter = {
-        ...searchFilter,
-        search_type: ["similarity"] as SearchSource[],
-      };
-    } else {
-      if (searchFilter?.search_type?.includes("similarity" as SearchSource)) {
+  const updateFilterWithSimilarity = useCallback(
+    (similaritySearch: PartialSearchResult) => {
+      let newFilter = searchFilter;
+      setSimilaritySearch(similaritySearch);
+      if (similaritySearch) {
         newFilter = {
           ...searchFilter,
-          search_type: undefined,
+          // @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);
-    }
-    // don't rerun when the filter updates
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [similaritySearch, setSearchFilter]);
+      if (newFilter) {
+        setSearchFilter(newFilter);
+      }
+    },
+    [searchFilter, setSearchFilter],
+  );
+
+  useSearchEffect("similarity_search_id", (similarityId) => {
+    updateFilterWithSimilarity({ id: similarityId });
+  });
 
   useEffect(() => {
     if (similaritySearch) {
@@ -261,7 +251,7 @@ export default function Explore() {
         isLoading={isLoading}
         setSearch={setSearch}
         similaritySearch={similaritySearch}
-        setSimilaritySearch={setSimilaritySearch}
+        setSimilaritySearch={updateFilterWithSimilarity}
         onUpdateFilter={onUpdateFilter}
         onOpenSearch={onOpenSearch}
       />