Explore page optimizations (#13682)

* Fix video scaling

* Simplify similarity searching

* Hide source filter when doing similarity search

* Fix up

* Remove frigate plus view

* Add icons to detail tabs

* Cleanup

web/src/App.tsx

@@ -15,7 +15,6 @@ const Live = lazy(() => import("@/pages/Live"));
 const Events = lazy(() => import("@/pages/Events"));
 const Explore = lazy(() => import("@/pages/Explore"));
 const Exports = lazy(() => import("@/pages/Exports"));
-const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
 const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
 const System = lazy(() => import("@/pages/System"));
 const Settings = lazy(() => import("@/pages/Settings"));
@@ -47,7 +46,6 @@ function App() {
                   <Route path="/review" element={<Events />} />
                   <Route path="/explore" element={<Explore />} />
                   <Route path="/export" element={<Exports />} />
-                  <Route path="/plus" element={<SubmitPlus />} />
                   <Route path="/system" element={<System />} />
                   <Route path="/settings" element={<Settings />} />
                   <Route path="/config" element={<ConfigEditor />} />

web/src/components/filter/SearchFilterGroup.tsx

@@ -43,14 +43,15 @@ type SearchFilterGroupProps = {
   className: string;
   filters?: SearchFilters[];
   filter?: SearchFilter;
+  searchTerm: string;
   filterList?: FilterList;
   onUpdateFilter: (filter: SearchFilter) => void;
 };
-
 export default function SearchFilterGroup({
   className,
   filters = DEFAULT_REVIEW_FILTERS,
   filter,
+  searchTerm,
   filterList,
   onUpdateFilter,
 }: SearchFilterGroupProps) {
@@ -213,16 +214,18 @@ export default function SearchFilterGroup({
           }
         />
       )}
-      {config?.semantic_search?.enabled && filters.includes("source") && (
+      {config?.semantic_search?.enabled &&
-        <SearchTypeButton
+        filters.includes("source") &&
-          selectedSearchSources={
+        !searchTerm.includes("similarity:") && (
-            filter?.search_type ?? ["thumbnail", "description"]
+          <SearchTypeButton
-          }
+            selectedSearchSources={
-          updateSearchSourceFilter={(newSearchSource) =>
+              filter?.search_type ?? ["thumbnail", "description"]
-            onUpdateFilter({ ...filter, search_type: newSearchSource })
+            }
-          }
+            updateSearchSourceFilter={(newSearchSource) =>
-        />
+              onUpdateFilter({ ...filter, search_type: newSearchSource })
-      )}
+            }
+          />
+        )}
     </div>
   );
 }

web/src/components/overlay/detail/SearchDetailDialog.tsx

@@ -33,8 +33,11 @@ import HlsVideoPlayer from "@/components/player/HlsVideoPlayer";
 import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { ASPECT_VERTICAL_LAYOUT, ASPECT_WIDE_LAYOUT } from "@/types/record";
+import { FaRegListAlt, FaVideo } from "react-icons/fa";
+import FrigatePlusIcon from "@/components/icons/FrigatePlusIcon";
 
-const SEARCH_TABS = ["details", "Frigate+", "video"] as const;
+const SEARCH_TABS = ["details", "frigate+", "video"] as const;
 type SearchTab = (typeof SEARCH_TABS)[number];
 
 type SearchDetailDialogProps = {
@@ -64,7 +67,7 @@ export default function SearchDetailDialog({
     const views = [...SEARCH_TABS];
 
     if (!config.plus.enabled || !search.has_snapshot) {
-      const index = views.indexOf("Frigate+");
+      const index = views.indexOf("frigate+");
       views.splice(index, 1);
     }
 
@@ -132,6 +135,9 @@ export default function SearchDetailDialog({
                   data-nav-item={item}
                   aria-label={`Select ${item}`}
                 >
+                  {item == "details" && <FaRegListAlt className="size-4" />}
+                  {item == "frigate+" && <FrigatePlusIcon className="size-4" />}
+                  {item == "video" && <FaVideo className="size-4" />}
                   <div className="capitalize">{item}</div>
                 </ToggleGroupItem>
               ))}
@@ -147,7 +153,7 @@ export default function SearchDetailDialog({
             setSimilarity={setSimilarity}
           />
         )}
-        {page == "Frigate+" && (
+        {page == "frigate+" && (
           <FrigatePlusDialog
             upload={search as unknown as Event}
             dialog={false}
@@ -157,7 +163,7 @@ export default function SearchDetailDialog({
             }}
           />
         )}
-        {page == "video" && <VideoTab search={search} />}
+        {page == "video" && <VideoTab search={search} config={config} />}
       </Content>
     </Overlay>
   );
@@ -311,28 +317,79 @@ function ObjectDetailsTab({
 
 type VideoTabProps = {
   search: SearchResult;
+  config?: FrigateConfig;
 };
-function VideoTab({ search }: VideoTabProps) {
+function VideoTab({ search, config }: VideoTabProps) {
   const [isLoading, setIsLoading] = useState(true);
   const videoRef = useRef<HTMLVideoElement | null>(null);
 
   const endTime = useMemo(() => search.end_time ?? Date.now() / 1000, [search]);
 
+  const mainCameraAspect = useMemo(() => {
+    const camera = config?.cameras?.[search.camera];
+
+    if (!camera) {
+      return "normal";
+    }
+
+    const aspectRatio = camera.detect.width / camera.detect.height;
+
+    if (!aspectRatio) {
+      return "normal";
+    } else if (aspectRatio > ASPECT_WIDE_LAYOUT) {
+      return "wide";
+    } else if (aspectRatio < ASPECT_VERTICAL_LAYOUT) {
+      return "tall";
+    } else {
+      return "normal";
+    }
+  }, [config, search]);
+
+  const containerClassName = useMemo(() => {
+    if (mainCameraAspect == "wide") {
+      return "flex justify-center items-center";
+    } else if (mainCameraAspect == "tall") {
+      if (isDesktop) {
+        return "size-full flex flex-col justify-center items-center";
+      } else {
+        return "size-full";
+      }
+    } else {
+      return "";
+    }
+  }, [mainCameraAspect]);
+
+  const videoClassName = useMemo(() => {
+    if (mainCameraAspect == "wide") {
+      return "w-full aspect-wide";
+    } else if (mainCameraAspect == "tall") {
+      if (isDesktop) {
+        return "w-[50%] aspect-tall flex justify-center";
+      } else {
+        return "size-full";
+      }
+    } else {
+      return "w-full aspect-video";
+    }
+  }, [mainCameraAspect]);
+
   return (
-    <>
+    <div className={`aspect-video ${containerClassName}`}>
       {isLoading && (
         <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
       )}
-      <HlsVideoPlayer
+      <div className={videoClassName}>
-        videoRef={videoRef}
+        <HlsVideoPlayer
-        currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`}
+          videoRef={videoRef}
-        hotKeys
+          currentSource={`${baseUrl}vod/${search.camera}/start/${search.start_time}/end/${endTime}/index.m3u8`}
-        visible
+          hotKeys
-        frigateControls={false}
+          visible
-        fullscreen={false}
+          frigateControls={false}
-        supportsFullscreen={false}
+          fullscreen={false}
-        onPlaying={() => setIsLoading(false)}
+          supportsFullscreen={false}
-      />
+          onPlaying={() => setIsLoading(false)}
-    </>
+        />
+      </div>
+    </div>
   );
 }

web/src/hooks/use-navigation.ts

@@ -1,28 +1,20 @@
-import Logo from "@/components/Logo";
 import { ENV } from "@/env";
-import { FrigateConfig } from "@/types/frigateConfig";
 import { NavData } from "@/types/navigation";
 import { useMemo } from "react";
 import { FaCompactDisc, FaVideo } from "react-icons/fa";
 import { IoSearch } from "react-icons/io5";
 import { LuConstruction } from "react-icons/lu";
 import { MdVideoLibrary } from "react-icons/md";
-import useSWR from "swr";
 
 export const ID_LIVE = 1;
 export const ID_REVIEW = 2;
 export const ID_EXPLORE = 3;
 export const ID_EXPORT = 4;
-export const ID_PLUS = 5;
+export const ID_PLAYGROUND = 5;
-export const ID_PLAYGROUND = 6;
 
 export default function useNavigation(
   variant: "primary" | "secondary" = "primary",
 ) {
-  const { data: config } = useSWR<FrigateConfig>("config", {
-    revalidateOnFocus: false,
-  });
-
   return useMemo(
     () =>
       [
@@ -54,14 +46,6 @@ export default function useNavigation(
           title: "Export",
           url: "/export",
         },
-        {
-          id: ID_PLUS,
-          variant,
-          icon: Logo,
-          title: "Frigate+",
-          url: "/plus",
-          enabled: config?.plus?.enabled == true,
-        },
         {
           id: ID_PLAYGROUND,
           variant,
@@ -71,6 +55,6 @@ export default function useNavigation(
           enabled: ENV !== "production",
         },
       ] as NavData[],
-    [config?.plus.enabled, variant],
+    [variant],
   );
 }

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(`similarity:${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/pages/SubmitPlus.tsx

@@ -1,636 +0,0 @@
-import { baseUrl } from "@/api/baseUrl";
-import { CamerasFilterButton } from "@/components/filter/CamerasFilterButton";
-import { GeneralFilterContent } from "@/components/filter/ReviewFilterGroup";
-import Chip from "@/components/indicators/Chip";
-import ActivityIndicator from "@/components/indicators/activity-indicator";
-import { FrigatePlusDialog } from "@/components/overlay/dialog/FrigatePlusDialog";
-import { Button } from "@/components/ui/button";
-import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { DualThumbSlider } from "@/components/ui/slider";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Event } from "@/types/event";
-import { ATTRIBUTE_LABELS, FrigateConfig } from "@/types/frigateConfig";
-import { getIconForLabel } from "@/utils/iconUtil";
-import { capitalizeFirstLetter } from "@/utils/stringUtil";
-import axios from "axios";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { isMobile } from "react-device-detect";
-import {
-  FaList,
-  FaSort,
-  FaSortAmountDown,
-  FaSortAmountUp,
-} from "react-icons/fa";
-import { LuFolderX } from "react-icons/lu";
-import { PiSlidersHorizontalFill } from "react-icons/pi";
-import useSWR from "swr";
-import useSWRInfinite from "swr/infinite";
-
-const API_LIMIT = 100;
-
-export default function SubmitPlus() {
-  // title
-
-  useEffect(() => {
-    document.title = "Plus - Frigate";
-  }, []);
-
-  // filters
-
-  const [selectedCameras, setSelectedCameras] = useState<string[]>();
-  const [selectedLabels, setSelectedLabels] = useState<string[]>();
-  const [scoreRange, setScoreRange] = useState<number[]>();
-
-  // sort
-
-  const [sort, setSort] = useState<string>();
-
-  // data
-
-  const eventFetcher = useCallback((key: string) => {
-    const [path, params] = Array.isArray(key) ? key : [key, undefined];
-    return axios.get(path, { params }).then((res) => res.data);
-  }, []);
-
-  const getKey = useCallback(
-    (index: number, prevData: Event[]) => {
-      if (index > 0) {
-        const lastDate = prevData[prevData.length - 1].start_time;
-        return [
-          "events",
-          {
-            limit: API_LIMIT,
-            in_progress: 0,
-            is_submitted: 0,
-            has_snapshot: 1,
-            cameras: selectedCameras ? selectedCameras.join(",") : null,
-            labels: selectedLabels ? selectedLabels.join(",") : null,
-            min_score: scoreRange ? scoreRange[0] : null,
-            max_score: scoreRange ? scoreRange[1] : null,
-            sort: sort ? sort : null,
-            before: lastDate,
-          },
-        ];
-      }
-
-      return [
-        "events",
-        {
-          limit: 100,
-          in_progress: 0,
-          is_submitted: 0,
-          has_snapshot: 1,
-          cameras: selectedCameras ? selectedCameras.join(",") : null,
-          labels: selectedLabels ? selectedLabels.join(",") : null,
-          min_score: scoreRange ? scoreRange[0] : null,
-          max_score: scoreRange ? scoreRange[1] : null,
-          sort: sort ? sort : null,
-        },
-      ];
-    },
-    [scoreRange, selectedCameras, selectedLabels, sort],
-  );
-
-  const {
-    data: eventPages,
-    mutate: refresh,
-    size,
-    setSize,
-    isValidating,
-  } = useSWRInfinite<Event[]>(getKey, eventFetcher, {
-    revalidateOnFocus: false,
-  });
-
-  const events = useMemo(
-    () => (eventPages ? eventPages.flat() : []),
-    [eventPages],
-  );
-
-  const [upload, setUpload] = useState<Event>();
-
-  // paging
-
-  const isDone = useMemo(
-    () => (eventPages?.at(-1)?.length ?? 0) < API_LIMIT,
-    [eventPages],
-  );
-
-  const pagingObserver = useRef<IntersectionObserver | null>();
-  const lastEventRef = useCallback(
-    (node: HTMLElement | null) => {
-      if (isValidating) return;
-      if (pagingObserver.current) pagingObserver.current.disconnect();
-      try {
-        pagingObserver.current = new IntersectionObserver((entries) => {
-          if (entries[0].isIntersecting && !isDone) {
-            setSize(size + 1);
-          }
-        });
-        if (node) pagingObserver.current.observe(node);
-      } catch (e) {
-        // no op
-      }
-    },
-    [isValidating, isDone, size, setSize],
-  );
-
-  return (
-    <div className="flex size-full flex-col">
-      <div className="scrollbar-container flex h-16 w-full items-center justify-between overflow-x-auto px-2">
-        <PlusFilterGroup
-          selectedCameras={selectedCameras}
-          selectedLabels={selectedLabels}
-          selectedScoreRange={scoreRange}
-          setSelectedCameras={setSelectedCameras}
-          setSelectedLabels={setSelectedLabels}
-          setSelectedScoreRange={setScoreRange}
-        />
-        <PlusSortSelector selectedSort={sort} setSelectedSort={setSort} />
-      </div>
-      <div className="no-scrollbar flex size-full flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
-        {!events?.length ? (
-          <>
-            {isValidating ? (
-              <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
-            ) : (
-              <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">
-                <LuFolderX className="size-16" />
-                No snapshots found
-              </div>
-            )}
-          </>
-        ) : (
-          <>
-            <div className="grid w-full gap-2 p-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
-              <FrigatePlusDialog
-                upload={upload}
-                onClose={() => setUpload(undefined)}
-                onEventUploaded={() => {
-                  refresh(
-                    (data: Event[][] | undefined) => {
-                      if (!data || !upload) {
-                        return data;
-                      }
-
-                      let pageIndex = -1;
-                      let index = -1;
-
-                      data.forEach((page, pIdx) => {
-                        const search = page.findIndex((e) => e.id == upload.id);
-
-                        if (search != -1) {
-                          pageIndex = pIdx;
-                          index = search;
-                        }
-                      });
-
-                      if (index == -1) {
-                        return data;
-                      }
-
-                      return [
-                        ...data.slice(0, pageIndex),
-                        [
-                          ...data[pageIndex].slice(0, index),
-                          { ...data[pageIndex][index], plus_id: "new_upload" },
-                          ...data[pageIndex].slice(index + 1),
-                        ],
-                        ...data.slice(pageIndex + 1),
-                      ];
-                    },
-                    { revalidate: false, populateCache: true },
-                  );
-                }}
-              />
-
-              {events?.map((event) => {
-                if (event.data.type != "object" || event.plus_id) {
-                  return;
-                }
-
-                return (
-                  <div
-                    key={event.id}
-                    className="relative flex aspect-video w-full cursor-pointer items-center justify-center rounded-lg bg-black md:rounded-2xl"
-                    onClick={() => setUpload(event)}
-                  >
-                    <div className="absolute left-0 top-2 z-40">
-                      <Tooltip>
-                        <div className="flex">
-                          <TooltipTrigger asChild>
-                            <div className="mx-3 pb-1 text-sm text-white">
-                              <Chip
-                                className={`z-0 flex items-center justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`}
-                              >
-                                {[event.label].map((object) => {
-                                  return getIconForLabel(
-                                    object,
-                                    "size-3 text-white",
-                                  );
-                                })}
-                                <div className="text-xs">
-                                  {Math.round(event.data.score * 100)}%
-                                </div>
-                              </Chip>
-                            </div>
-                          </TooltipTrigger>
-                        </div>
-                        <TooltipContent className="capitalize">
-                          {[event.label]
-                            .map((text) => capitalizeFirstLetter(text))
-                            .sort()
-                            .join(", ")
-                            .replaceAll("-verified", "")}
-                        </TooltipContent>
-                      </Tooltip>
-                    </div>
-                    <img
-                      className="aspect-video h-full rounded-lg object-contain md:rounded-2xl"
-                      src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}
-                      loading="lazy"
-                    />
-                  </div>
-                );
-              })}
-            </div>
-            {!isDone && isValidating ? (
-              <div className="flex w-full items-center justify-center">
-                <ActivityIndicator />
-              </div>
-            ) : (
-              <div ref={lastEventRef} />
-            )}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-type PlusFilterGroupProps = {
-  selectedCameras: string[] | undefined;
-  selectedLabels: string[] | undefined;
-  selectedScoreRange: number[] | undefined;
-  setSelectedCameras: (cameras: string[] | undefined) => void;
-  setSelectedLabels: (cameras: string[] | undefined) => void;
-  setSelectedScoreRange: (range: number[] | undefined) => void;
-};
-function PlusFilterGroup({
-  selectedCameras,
-  selectedLabels,
-  selectedScoreRange,
-  setSelectedCameras,
-  setSelectedLabels,
-  setSelectedScoreRange,
-}: PlusFilterGroupProps) {
-  const { data: config } = useSWR<FrigateConfig>("config");
-
-  const allCameras = useMemo(() => {
-    if (!config) {
-      return [];
-    }
-
-    return Object.keys(config.cameras);
-  }, [config]);
-  const allLabels = useMemo<string[]>(() => {
-    if (!config) {
-      return [];
-    }
-
-    const labels = new Set<string>();
-    const cameras = selectedCameras || Object.keys(config.cameras);
-
-    cameras.forEach((camera) => {
-      const cameraConfig = config.cameras[camera];
-      cameraConfig.objects.track.forEach((label) => {
-        if (!ATTRIBUTE_LABELS.includes(label)) {
-          labels.add(label);
-        }
-      });
-    });
-
-    return [...labels].sort();
-  }, [config, selectedCameras]);
-
-  const [open, setOpen] = useState<"none" | "camera" | "label" | "score">(
-    "none",
-  );
-  const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
-    undefined,
-  );
-  const [currentScoreRange, setCurrentScoreRange] = useState<
-    number[] | undefined
-  >(undefined);
-
-  const Menu = isMobile ? Drawer : DropdownMenu;
-  const Trigger = isMobile ? DrawerTrigger : DropdownMenuTrigger;
-  const Content = isMobile ? DrawerContent : DropdownMenuContent;
-
-  return (
-    <div className="flex h-full items-center justify-start gap-2">
-      <CamerasFilterButton
-        allCameras={allCameras}
-        groups={[]}
-        selectedCameras={selectedCameras}
-        updateCameraFilter={setSelectedCameras}
-      />
-      <Menu
-        open={open == "label"}
-        onOpenChange={(open) => {
-          if (!open) {
-            setCurrentLabels(selectedLabels);
-          }
-          setOpen(open ? "label" : "none");
-        }}
-      >
-        <Trigger asChild>
-          <Button
-            className="flex items-center gap-2 capitalize"
-            size="sm"
-            variant={selectedLabels == undefined ? "default" : "select"}
-          >
-            <FaList
-              className={`${selectedLabels == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
-            />
-            <div className="hidden text-primary md:block">
-              {selectedLabels == undefined
-                ? "All Labels"
-                : `${selectedLabels.length} Labels`}
-            </div>
-          </Button>
-        </Trigger>
-        <Content className={isMobile ? "max-h-[75dvh]" : ""}>
-          <GeneralFilterContent
-            allLabels={allLabels}
-            selectedLabels={selectedLabels}
-            currentLabels={currentLabels}
-            setCurrentLabels={setCurrentLabels}
-            updateLabelFilter={setSelectedLabels}
-            onClose={() => setOpen("none")}
-          />
-        </Content>
-      </Menu>
-      <Menu
-        open={open == "score"}
-        onOpenChange={(open) => {
-          setOpen(open ? "score" : "none");
-        }}
-      >
-        <Trigger asChild>
-          <Button
-            className="flex items-center gap-2 capitalize"
-            size="sm"
-            variant={selectedScoreRange == undefined ? "default" : "select"}
-          >
-            <PiSlidersHorizontalFill
-              className={`${selectedScoreRange == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
-            />
-            <div className="hidden text-primary md:block">
-              {selectedScoreRange == undefined
-                ? "Score Range"
-                : `${Math.round(selectedScoreRange[0] * 100)}% - ${Math.round(selectedScoreRange[1] * 100)}%`}
-            </div>
-          </Button>
-        </Trigger>
-        <Content
-          className={`flex min-w-80 flex-col justify-center p-2 ${isMobile ? "gap-2 *:max-h-[75dvh]" : ""}`}
-        >
-          <div className="flex items-center gap-1">
-            <Input
-              className="w-12"
-              inputMode="numeric"
-              value={Math.round((currentScoreRange?.at(0) ?? 0.5) * 100)}
-              onChange={(e) => {
-                const value = e.target.value;
-
-                if (value) {
-                  setCurrentScoreRange([
-                    parseInt(value) / 100.0,
-                    currentScoreRange?.at(1) ?? 1.0,
-                  ]);
-                }
-              }}
-            />
-            <DualThumbSlider
-              className="w-full"
-              min={0.5}
-              max={1.0}
-              step={0.01}
-              value={currentScoreRange ?? [0.5, 1.0]}
-              onValueChange={setCurrentScoreRange}
-            />
-            <Input
-              className="w-12"
-              inputMode="numeric"
-              value={Math.round((currentScoreRange?.at(1) ?? 1.0) * 100)}
-              onChange={(e) => {
-                const value = e.target.value;
-
-                if (value) {
-                  setCurrentScoreRange([
-                    currentScoreRange?.at(0) ?? 0.5,
-                    parseInt(value) / 100.0,
-                  ]);
-                }
-              }}
-            />
-          </div>
-          <DropdownMenuSeparator />
-          <div className="flex items-center justify-evenly p-2">
-            <Button
-              variant="select"
-              onClick={() => {
-                setSelectedScoreRange(currentScoreRange);
-                setOpen("none");
-              }}
-            >
-              Apply
-            </Button>
-            <Button
-              onClick={() => {
-                setCurrentScoreRange(undefined);
-                setSelectedScoreRange(undefined);
-              }}
-            >
-              Reset
-            </Button>
-          </div>
-        </Content>
-      </Menu>
-    </div>
-  );
-}
-
-type PlusSortSelectorProps = {
-  selectedSort?: string;
-  setSelectedSort: (sort: string | undefined) => void;
-};
-function PlusSortSelector({
-  selectedSort,
-  setSelectedSort,
-}: PlusSortSelectorProps) {
-  // menu state
-
-  const [open, setOpen] = useState(false);
-
-  // sort
-
-  const [currentSort, setCurrentSort] = useState<string>();
-  const [currentDir, setCurrentDir] = useState<string>("desc");
-
-  // components
-
-  const Sort = selectedSort
-    ? selectedSort.split("_")[1] == "desc"
-      ? FaSortAmountDown
-      : FaSortAmountUp
-    : FaSort;
-  const Menu = isMobile ? Drawer : DropdownMenu;
-  const Trigger = isMobile ? DrawerTrigger : DropdownMenuTrigger;
-  const Content = isMobile ? DrawerContent : DropdownMenuContent;
-
-  return (
-    <div className="flex h-full items-center justify-start gap-2">
-      <Menu
-        open={open}
-        onOpenChange={(open) => {
-          setOpen(open);
-
-          if (!open) {
-            const parts = selectedSort?.split("_");
-
-            if (parts?.length == 2) {
-              setCurrentSort(parts[0]);
-              setCurrentDir(parts[1]);
-            }
-          }
-        }}
-      >
-        <Trigger asChild>
-          <Button
-            className="flex items-center gap-2 capitalize"
-            size="sm"
-            variant={selectedSort == undefined ? "default" : "select"}
-          >
-            <Sort
-              className={`${selectedSort == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`}
-            />
-            <div className="hidden text-primary md:block">
-              {selectedSort == undefined ? "Sort" : selectedSort.split("_")[0]}
-            </div>
-          </Button>
-        </Trigger>
-        <Content
-          className={`flex flex-col justify-center gap-2 p-2 ${isMobile ? "max-h-[75dvh]" : ""}`}
-        >
-          <RadioGroup
-            className={`flex flex-col gap-4 ${isMobile ? "mt-4" : ""}`}
-            onValueChange={(value) => setCurrentSort(value)}
-          >
-            <div className="flex w-full items-center gap-2">
-              <RadioGroupItem
-                className={
-                  currentSort == "date"
-                    ? "bg-selected from-selected/50 to-selected/90 text-selected"
-                    : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
-                }
-                id="date"
-                value="date"
-              />
-              <Label
-                className="w-full cursor-pointer capitalize"
-                htmlFor="date"
-              >
-                Date
-              </Label>
-              {currentSort == "date" ? (
-                currentDir == "desc" ? (
-                  <FaSortAmountDown
-                    className="size-5 cursor-pointer"
-                    onClick={() => setCurrentDir("asc")}
-                  />
-                ) : (
-                  <FaSortAmountUp
-                    className="size-5 cursor-pointer"
-                    onClick={() => setCurrentDir("desc")}
-                  />
-                )
-              ) : (
-                <div className="size-5" />
-              )}
-            </div>
-            <div className="flex w-full items-center gap-2">
-              <RadioGroupItem
-                className={
-                  currentSort == "score"
-                    ? "bg-selected from-selected/50 to-selected/90 text-selected"
-                    : "bg-secondary from-secondary/50 to-secondary/90 text-secondary"
-                }
-                id="score"
-                value="score"
-              />
-              <Label
-                className="w-full cursor-pointer capitalize"
-                htmlFor="score"
-              >
-                Score
-              </Label>
-              {currentSort == "score" ? (
-                currentDir == "desc" ? (
-                  <FaSortAmountDown
-                    className="size-5 cursor-pointer"
-                    onClick={() => setCurrentDir("asc")}
-                  />
-                ) : (
-                  <FaSortAmountUp
-                    className="size-5 cursor-pointer"
-                    onClick={() => setCurrentDir("desc")}
-                  />
-                )
-              ) : (
-                <div className="size-5" />
-              )}
-            </div>
-          </RadioGroup>
-          <DropdownMenuSeparator />
-          <div className="flex items-center justify-evenly p-2">
-            <Button
-              variant="select"
-              disabled={!currentSort}
-              onClick={() => {
-                if (currentSort) {
-                  setSelectedSort(`${currentSort}_${currentDir}`);
-                  setOpen(false);
-                }
-              }}
-            >
-              Apply
-            </Button>
-            <Button
-              onClick={() => {
-                setCurrentSort(undefined);
-                setCurrentDir("desc");
-                setSelectedSort(undefined);
-              }}
-            >
-              Reset
-            </Button>
-          </div>
-        </Content>
-      </Menu>
-    </div>
-  );
-}

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 && (
@@ -141,6 +135,7 @@ export default function SearchView({
               "w-full justify-between md:justify-start lg:justify-end",
             )}
             filter={searchFilter}
+            searchTerm={searchTerm}
             onUpdateFilter={onUpdateFilter}
           />
         )}
@@ -180,7 +175,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>