diff --git a/web/src/views/explore/ExploreView.tsx b/web/src/views/explore/ExploreView.tsx index 2e3dd4755..a05dae5e2 100644 --- a/web/src/views/explore/ExploreView.tsx +++ b/web/src/views/explore/ExploreView.tsx @@ -16,7 +16,6 @@ import ImageLoadingIndicator from "@/components/indicators/ImageLoadingIndicator import useImageLoaded from "@/hooks/use-image-loaded"; import ActivityIndicator from "@/components/indicators/activity-indicator"; import { useTrackedObjectUpdate } from "@/api/ws"; -import { isEqual } from "lodash"; import TimeAgo from "@/components/dynamic/TimeAgo"; import SearchResultActions from "@/components/menu/SearchResultActions"; import { SearchTab } from "@/components/overlay/detail/SearchDetailDialog"; @@ -25,14 +24,12 @@ import { useTranslation } from "react-i18next"; import { getTranslatedLabel } from "@/utils/i18n"; type ExploreViewProps = { - searchDetail: SearchResult | undefined; setSearchDetail: (search: SearchResult | undefined) => void; setSimilaritySearch: (search: SearchResult) => void; onSelectSearch: (item: SearchResult, ctrl: boolean, page?: SearchTab) => void; }; export default function ExploreView({ - searchDetail, setSearchDetail, setSimilaritySearch, onSelectSearch, @@ -83,20 +80,6 @@ export default function ExploreView({ } }, [wsUpdate, mutate]); - // update search detail when results change - - useEffect(() => { - if (searchDetail && events) { - const updatedSearchDetail = events.find( - (result) => result.id === searchDetail.id, - ); - - if (updatedSearchDetail && !isEqual(updatedSearchDetail, searchDetail)) { - setSearchDetail(updatedSearchDetail); - } - } - }, [events, searchDetail, setSearchDetail]); - if (isLoading) { return ( diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx index bbe2078aa..36e600838 100644 --- a/web/src/views/search/SearchView.tsx +++ b/web/src/views/search/SearchView.tsx @@ -19,7 +19,6 @@ import useKeyboardListener, { import scrollIntoView from "scroll-into-view-if-needed"; import InputWithTags from "@/components/input/InputWithTags"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; -import { isEqual } from "lodash"; import { formatDateToLocaleString } from "@/utils/dateUtil"; import SearchThumbnailFooter from "@/components/card/SearchThumbnailFooter"; import ExploreSettings from "@/components/settings/SearchSettings"; @@ -213,7 +212,7 @@ export default function SearchView({ // detail - const [searchDetail, setSearchDetail] = useState(); + const [selectedId, setSelectedId] = useState(); const [page, setPage] = useState("snapshot"); // remove duplicate event ids @@ -229,6 +228,16 @@ export default function SearchView({ return results; }, [searchResults]); + const searchDetail = useMemo(() => { + if (!selectedId) return undefined; + // summary view + if (defaultView === "summary" && exploreEvents) { + return exploreEvents.find((r) => r.id === selectedId); + } + // grid view + return uniqueResults.find((r) => r.id === selectedId); + }, [selectedId, uniqueResults, exploreEvents, defaultView]); + // search interaction const [selectedObjects, setSelectedObjects] = useState([]); @@ -256,7 +265,7 @@ export default function SearchView({ } } else { setPage(page); - setSearchDetail(item); + setSelectedId(item.id); } }, [selectedObjects], @@ -295,26 +304,12 @@ export default function SearchView({ } }; - // update search detail when results change - + // clear selected item when search results clear useEffect(() => { - if (searchDetail) { - const results = - defaultView === "summary" ? exploreEvents : searchResults?.flat(); - if (results) { - const updatedSearchDetail = results.find( - (result) => result.id === searchDetail.id, - ); - - if ( - updatedSearchDetail && - !isEqual(updatedSearchDetail, searchDetail) - ) { - setSearchDetail(updatedSearchDetail); - } - } + if (!searchResults && !exploreEvents) { + setSelectedId(undefined); } - }, [searchResults, exploreEvents, searchDetail, defaultView]); + }, [searchResults, exploreEvents]); const hasExistingSearch = useMemo( () => searchResults != undefined || searchFilter != undefined, @@ -340,7 +335,7 @@ export default function SearchView({ ? results.length - 1 : (currentIndex - 1 + results.length) % results.length; - setSearchDetail(results[newIndex]); + setSelectedId(results[newIndex].id); } }, [uniqueResults, exploreEvents, searchDetail, defaultView]); @@ -357,7 +352,7 @@ export default function SearchView({ const newIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % results.length; - setSearchDetail(results[newIndex]); + setSelectedId(results[newIndex].id); } }, [uniqueResults, exploreEvents, searchDetail, defaultView]); @@ -509,7 +504,7 @@ export default function SearchView({ setSelectedId(item?.id)} setSearchPage={setPage} setSimilarity={ searchDetail && (() => setSimilaritySearch(searchDetail)) @@ -629,7 +624,7 @@ export default function SearchView({ detail: boolean, ) => { if (detail && selectedObjects.length == 0) { - setSearchDetail(value); + setSelectedId(value.id); } else { onSelectSearch( value, @@ -724,8 +719,7 @@ export default function SearchView({ defaultView == "summary" && (
setSelectedId(item?.id)} setSimilaritySearch={setSimilaritySearch} onSelectSearch={onSelectSearch} />