Explore pane infinite loading (#13738)

* swr for infinite loading * search detail language change * drawer padding * spacing * center calendar * padding * catch error * use limit const
2024-11-22 08:57:20 -06:00 · 2024-09-14 08:42:56 -05:00 · 2024-09-14 08:42:56 -05:00 · 2a66923524
commit 2a66923524
parent 088a0fb4a5
9 changed files with 162 additions and 36 deletions
--- a/web/src/components/filter/CamerasFilterButton.tsx
+++ b/web/src/components/filter/CamerasFilterButton.tsx
@ -90,7 +90,7 @@ export function CamerasFilterButton({
          <DropdownMenuSeparator />
        </>
      )}
-      <div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden p-4">
+      <div className="scrollbar-container flex h-auto max-h-[80dvh] flex-col gap-2 overflow-y-auto overflow-x-hidden p-4">
        <FilterSwitch
          isChecked={allCamerasSelected}
          label="All Cameras"
@ -106,12 +106,12 @@ export function CamerasFilterButton({
        />
        {groups.length > 0 && (
          <>
-            <DropdownMenuSeparator className="mt-2" />
+            <DropdownMenuSeparator />
            {groups.map(([name, conf]) => {
              return (
                <div
                  key={name}
-                  className="w-full cursor-pointer rounded-lg px-2 py-1.5 text-sm capitalize text-primary hover:bg-muted"
+                  className="w-full cursor-pointer rounded-lg px-2 py-0.5 text-sm capitalize text-primary hover:bg-muted"
                  onClick={() => setCurrentCameras([...conf.cameras])}
                >
                  {name}
@ -120,7 +120,7 @@ export function CamerasFilterButton({
            })}
          </>
        )}
-        <DropdownMenuSeparator className="my-2" />
+        <DropdownMenuSeparator />
        <div className="flex flex-col gap-2.5">
          {allCameras.map((item) => (
            <FilterSwitch
@ -158,7 +158,7 @@ export function CamerasFilterButton({
          ))}
        </div>
      </div>
-      <DropdownMenuSeparator className="my-2" />
+      <DropdownMenuSeparator />
      <div className="flex items-center justify-evenly p-2">
        <Button
          variant="select"
--- a/web/src/components/filter/SearchFilterGroup.tsx
+++ b/web/src/components/filter/SearchFilterGroup.tsx
@ -5,7 +5,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { DropdownMenuSeparator } from "../ui/dropdown-menu";
 import { getEndOfDayTimestamp } from "@/utils/dateUtil";
-import { isMobile } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import { Switch } from "../ui/switch";
 import { Label } from "../ui/label";
@ -309,7 +309,7 @@ function GeneralFilterButton({
        }}
      >
        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+        <DrawerContent className="max-h-[75dvh] overflow-hidden p-4">
          {content}
        </DrawerContent>
      </Drawer>
@ -503,7 +503,7 @@ function ZoneFilterButton({
        }}
      >
        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+        <DrawerContent className="max-h-[75dvh] overflow-hidden p-4">
          {content}
        </DrawerContent>
      </Drawer>
@ -548,7 +548,7 @@ export function ZoneFilterContent({
      <div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
        {allZones && setCurrentZones && (
          <>
-            <DropdownMenuSeparator />
+            {isDesktop && <DropdownMenuSeparator />}
            <div className="mb-5 mt-2.5 flex items-center justify-between">
              <Label
                className="mx-2 cursor-pointer text-primary"
@ -599,7 +599,7 @@ export function ZoneFilterContent({
          </>
        )}
      </div>
-      <DropdownMenuSeparator />
+      {isDesktop && <DropdownMenuSeparator />}
      <div className="flex items-center justify-evenly p-2">
        <Button
          variant="select"
@ -697,7 +697,7 @@ function SubFilterButton({
        }}
      >
        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+        <DrawerContent className="max-h-[75dvh] overflow-hidden p-4">
          {content}
        </DrawerContent>
      </Drawer>
@ -788,7 +788,7 @@ export function SubFilterContent({
          ))}
        </div>
      </div>
-      <DropdownMenuSeparator />
+      {isDesktop && <DropdownMenuSeparator />}
      <div className="flex items-center justify-evenly p-2">
        <Button
          variant="select"
@ -877,7 +877,7 @@ function SearchTypeButton({
        }}
      >
        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+        <DrawerContent className="max-h-[75dvh] overflow-hidden p-4">
          {content}
        </DrawerContent>
      </Drawer>
@ -956,7 +956,7 @@ export function SearchTypeContent({
            }}
          />
        </div>
-        <DropdownMenuSeparator />
+        {isDesktop && <DropdownMenuSeparator />}
        <div className="flex items-center justify-evenly p-2">
          <Button
            variant="select"
--- a/web/src/components/overlay/detail/ObjectLifecycle.tsx
+++ b/web/src/components/overlay/detail/ObjectLifecycle.tsx
@ -193,7 +193,7 @@ export default function ObjectLifecycle({
  };

  useEffect(() => {
-    if (eventSequence) {
+    if (eventSequence && eventSequence.length > 0) {
      setTimeIndex(eventSequence?.[current].timestamp);
      handleSetBox(eventSequence?.[current].data.box ?? []);
      setLifecycleZones(eventSequence?.[current].data.zones);
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@ -237,7 +237,7 @@ function ObjectDetailsTab({
  const [desc, setDesc] = useState(search?.data.description);

  // we have to make sure the current selected search item stays in sync
-  useEffect(() => setDesc(search?.data.description), [search]);
+  useEffect(() => setDesc(search?.data.description ?? ""), [search]);

  const formattedDate = useFormattedTimestamp(
    search?.start_time ?? 0,
@ -351,7 +351,7 @@ function ObjectDetailsTab({
        <div className="text-sm text-primary/40">Description</div>
        <Textarea
          className="md:h-64"
-          placeholder="Description of the event"
+          placeholder="Description of the tracked object"
          value={desc}
          onChange={(e) => setDesc(e.target.value)}
        />
--- a/web/src/components/ui/calendar-range.tsx
+++ b/web/src/components/ui/calendar-range.tsx
@ -315,7 +315,7 @@ export function DateRangePicker({

  return (
    <div className="w-full">
-      <div className="flex py-2">
+      <div className="flex flex-row items-start justify-center py-2">
        <div className="flex">
          <div className="flex flex-col">
            <div className="flex flex-col items-center justify-end gap-2 px-3 pb-4 lg:flex-row lg:items-start lg:pb-0">
--- a/web/src/pages/Explore.tsx
+++ b/web/src/pages/Explore.tsx
@ -3,12 +3,15 @@ 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 { SearchFilter, SearchResult } from "@/types/search";
+import { SearchFilter, SearchQuery, SearchResult } from "@/types/search";
 import { TimeRange } from "@/types/timeline";
 import { RecordingView } from "@/views/recording/RecordingView";
 import SearchView from "@/views/search/SearchView";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import useSWR from "swr";
+import useSWRInfinite from "swr/infinite";
+
+const API_LIMIT = 25;

 export default function Explore() {
  const { data: config } = useSWR<FrigateConfig>("config", {
@ -61,7 +64,7 @@ export default function Explore() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [search]);

-  const searchQuery = useMemo(() => {
+  const searchQuery: SearchQuery = useMemo(() => {
    if (similaritySearch) {
      return [
        "events/search",
@ -107,7 +110,8 @@ export default function Explore() {
          before: searchSearchParams["before"],
          after: searchSearchParams["after"],
          search_type: searchSearchParams["search_type"],
-          limit: Object.keys(searchSearchParams).length == 0 ? 20 : null,
+          limit:
+            Object.keys(searchSearchParams).length == 0 ? API_LIMIT : undefined,
          in_progress: 0,
          include_thumbnails: 0,
        },
@ -117,8 +121,66 @@ export default function Explore() {
    return null;
  }, [searchTerm, searchSearchParams, similaritySearch]);

-  const { data: searchResults, isLoading } =
-    useSWR<SearchResult[]>(searchQuery);
+  // paging
+
+  const getKey = (
+    pageIndex: number,
+    previousPageData: SearchResult[] | null,
+  ): SearchQuery => {
+    if (previousPageData && !previousPageData.length) return null; // reached the end
+    if (!searchQuery) return null;
+
+    const [url, params] = searchQuery;
+
+    // If it's not the first page, use the last item's start_time as the 'before' parameter
+    if (pageIndex > 0 && previousPageData) {
+      const lastDate = previousPageData[previousPageData.length - 1].start_time;
+      return [
+        url,
+        { ...params, before: lastDate.toString(), limit: API_LIMIT },
+      ];
+    }
+
+    // For the first page, use the original params
+    return [url, { ...params, limit: API_LIMIT }];
+  };
+
+  const { data, size, setSize, isValidating } = useSWRInfinite<SearchResult[]>(
+    getKey,
+    {
+      revalidateFirstPage: false,
+      revalidateAll: false,
+    },
+  );
+
+  const searchResults = useMemo(
+    () => (data ? ([] as SearchResult[]).concat(...data) : []),
+    [data],
+  );
+  const isLoadingInitialData = !data && !isValidating;
+  const isLoadingMore =
+    isLoadingInitialData ||
+    (size > 0 && data && typeof data[size - 1] === "undefined");
+  const isEmpty = data?.[0]?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.length < API_LIMIT);
+
+  const loadMore = useCallback(() => {
+    if (!isReachingEnd && !isLoadingMore) {
+      if (searchQuery) {
+        const [url] = searchQuery;
+
+        // for chroma, only load 100 results for description and similarity
+        if (url === "events/search" && searchResults.length >= 100) {
+          return;
+        }
+      }
+
+      setSize(size + 1);
+    }
+  }, [isReachingEnd, isLoadingMore, setSize, size, searchResults, searchQuery]);
+
+  // previews

  const previewTimeRange = useMemo<TimeRange>(() => {
    if (!searchResults) {
@ -212,11 +274,13 @@ export default function Explore() {
        searchTerm={searchTerm}
        searchFilter={searchFilter}
        searchResults={searchResults}
-        isLoading={isLoading}
+        isLoading={(isLoadingInitialData || isLoadingMore) ?? true}
        setSearch={setSearch}
        setSimilaritySearch={(search) => setSearch(`similarity:${search.id}`)}
        onUpdateFilter={setSearchFilter}
        onOpenSearch={onOpenSearch}
+        loadMore={loadMore}
+        hasMore={!isReachingEnd}
      />
    );
  }
--- a/web/src/types/search.ts
+++ b/web/src/types/search.ts
@ -38,3 +38,20 @@ export type SearchFilter = {
  search_type?: SearchSource[];
  event_id?: string;
 };
+
+export type SearchQueryParams = {
+  cameras?: string[];
+  labels?: string[];
+  sub_labels?: string[];
+  zones?: string[];
+  before?: string;
+  after?: string;
+  search_type?: string;
+  limit?: number;
+  in_progress?: number;
+  include_thumbnails?: number;
+  query?: string;
+  page?: number;
+};
+
+export type SearchQuery = [string, SearchQueryParams] | null;
--- a/web/src/views/explore/ExploreView.tsx
+++ b/web/src/views/explore/ExploreView.tsx
@ -94,7 +94,7 @@ function ThumbnailRow({
  };

  return (
-    <div className="rounded-lg bg-background_alt p-2 md:p-4">
+    <div className="rounded-lg bg-background_alt p-2 md:px-4">
      <div className="text-lg capitalize">
        {objectType.replaceAll("_", " ")}
        {searchResults && (
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@ -33,6 +33,8 @@ type SearchViewProps = {
  setSimilaritySearch: (search: SearchResult) => void;
  onUpdateFilter: (filter: SearchFilter) => void;
  onOpenSearch: (item: SearchResult) => void;
+  loadMore: () => void;
+  hasMore: boolean;
 };
 export default function SearchView({
  search,
@ -43,6 +45,8 @@ export default function SearchView({
  setSearch,
  setSimilaritySearch,
  onUpdateFilter,
+  loadMore,
+  hasMore,
 }: SearchViewProps) {
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
@ -143,7 +147,37 @@ export default function SearchView({
        scrollMode: "if-needed",
      });
    }
-  }, [selectedIndex, uniqueResults]);
+    // we only want to scroll when the index changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedIndex]);
+
+  // observer for loading more
+
+  const observerTarget = useRef<HTMLDivElement>(null);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !isLoading) {
+          loadMore();
+        }
+      },
+      { threshold: 1.0 },
+    );
+
+    if (observerTarget.current) {
+      observer.observe(observerTarget.current);
+    }
+
+    observerRef.current = observer;
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [hasMore, isLoading, loadMore]);

  return (
    <div className="flex size-full flex-col pt-2 md:py-2">
@ -199,20 +233,23 @@ export default function SearchView({
        )}
      </div>

-      <div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
-        {searchTerm.length > 0 && searchResults?.length == 0 && (
+      <div className="no-scrollbar flex flex-1 flex-wrap content-start gap-2 overflow-y-auto">
+        {uniqueResults?.length == 0 && !isLoading && (
          <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">
            <LuSearchX className="size-16" />
            No Tracked Objects Found
          </div>
        )}

-        {isLoading && (
-          <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
-        )}
+        {uniqueResults?.length == 0 &&
+          isLoading &&
+          searchFilter &&
+          Object.keys(searchFilter).length !== 0 && (
+            <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
+          )}

        {uniqueResults && (
-          <div className="mt-2 grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-4 md:gap-4 3xl:grid-cols-6">
+          <div className="grid w-full gap-2 px-1 sm:grid-cols-2 md:mx-2 md:grid-cols-4 md:gap-4 3xl:grid-cols-6">
            {uniqueResults &&
              uniqueResults.map((value, index) => {
                const selected = selectedIndex === index;
@ -273,12 +310,20 @@ export default function SearchView({
              })}
          </div>
        )}
-        {!uniqueResults && !isLoading && (
-          <div className="scrollbar-container flex size-full flex-col overflow-y-auto">
-            <ExploreView onSelectSearch={onSelectSearch} />
-          </div>
+        {uniqueResults && uniqueResults.length > 0 && (
+          <>
+            <div ref={observerTarget} className="h-10 w-full" />
+            <div className="flex h-12 w-full justify-center">
+              {hasMore && isLoading && <ActivityIndicator />}
+            </div>
+          </>
        )}
      </div>
+      {searchFilter && Object.keys(searchFilter).length === 0 && (
+        <div className="scrollbar-container flex size-full flex-col overflow-y-auto">
+          <ExploreView onSelectSearch={onSelectSearch} />
+        </div>
+      )}
    </div>
  );
 }