From d6b16a77478fc3ddf6dd9487d54aaa9edfeb8dc4 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 6 Sep 2024 14:26:32 -0500
Subject: [PATCH] Semantic search UI tweaks (#13591)

* Semantic search UI tweaks

* clean up
---
 .../filter/CalendarFilterButton.tsx           | 25 +++++-----
 web/src/components/ui/calendar-range.tsx      | 23 +++++-----
 web/src/views/search/SearchView.tsx           | 46 +++++++++++++++----
 3 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/web/src/components/filter/CalendarFilterButton.tsx b/web/src/components/filter/CalendarFilterButton.tsx
index 9b630b893..cfa69faf6 100644
--- a/web/src/components/filter/CalendarFilterButton.tsx
+++ b/web/src/components/filter/CalendarFilterButton.tsx
@@ -12,6 +12,7 @@ import { isMobile } from "react-device-detect";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { DateRangePicker } from "../ui/calendar-range";
 import { DateRange } from "react-day-picker";
+import { useState } from "react";
 
 type CalendarFilterButtonProps = {
   reviewSummary?: ReviewSummary;
@@ -91,6 +92,8 @@ export function CalendarRangeFilterButton({
   defaultText,
   updateSelectedRange,
 }: CalendarRangeFilterButtonProps) {
+  const [open, setOpen] = useState(false);
+
   const selectedDate = useFormattedRange(
     range?.from == undefined ? 0 : range.from.getTime() / 1000 + 1,
     range?.to == undefined ? 0 : range.to.getTime() / 1000 - 1,
@@ -119,24 +122,18 @@ export function CalendarRangeFilterButton({
         initialDateFrom={range?.from}
         initialDateTo={range?.to}
         showCompare={false}
-        onUpdate={(range) => updateSelectedRange(range.range)}
+        onUpdate={(range) => {
+          updateSelectedRange(range.range);
+          setOpen(false);
+        }}
+        onReset={() => updateSelectedRange(undefined)}
       />
-      <DropdownMenuSeparator />
-      <div className="flex items-center justify-center p-2">
-        <Button
-          onClick={() => {
-            updateSelectedRange(undefined);
-          }}
-        >
-          Reset
-        </Button>
-      </div>
     </>
   );
 
   if (isMobile) {
     return (
-      <Drawer>
+      <Drawer open={open} onOpenChange={setOpen}>
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
         <DrawerContent>{content}</DrawerContent>
       </Drawer>
@@ -144,9 +141,9 @@ export function CalendarRangeFilterButton({
   }
 
   return (
-    <Popover>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>{trigger}</PopoverTrigger>
-      <PopoverContent className="w-[840px]">{content}</PopoverContent>
+      <PopoverContent className="w-auto">{content}</PopoverContent>
     </Popover>
   );
 }
diff --git a/web/src/components/ui/calendar-range.tsx b/web/src/components/ui/calendar-range.tsx
index f940e772e..5629c5ce9 100644
--- a/web/src/components/ui/calendar-range.tsx
+++ b/web/src/components/ui/calendar-range.tsx
@@ -1,7 +1,4 @@
-/* eslint-disable max-lines */
-"use client";
-
-import { type FC, useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Button } from "./button";
 import { Calendar } from "./calendar";
 import { Label } from "./label";
@@ -19,6 +16,7 @@ import { LuCheck } from "react-icons/lu";
 export interface DateRangePickerProps {
   /** Click handler for applying the updates from DateRangePicker. */
   onUpdate?: (values: { range: DateRange; rangeCompare?: DateRange }) => void;
+  onReset?: () => void;
   /** Initial value for start date */
   initialDateFrom?: Date | string;
   /** Initial value for end date */
@@ -73,14 +71,15 @@ const PRESETS: Preset[] = [
 ];
 
 /** The DateRangePicker component allows a user to select a range of dates */
-export const DateRangePicker: FC<DateRangePickerProps> = ({
+export function DateRangePicker({
   initialDateFrom = new Date(new Date().setHours(0, 0, 0, 0)),
   initialDateTo,
   initialCompareFrom,
   initialCompareTo,
   onUpdate,
+  onReset,
   showCompare = true,
-}): JSX.Element => {
+}: DateRangePickerProps) {
   const [isOpen, setIsOpen] = useState(false);
 
   const [range, setRange] = useState<DateRange>({
@@ -283,7 +282,7 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
     isSelected: boolean;
   }): JSX.Element => (
     <Button
-      className={cn(isSelected && "pointer-events-none text-white")}
+      className={cn(isSelected && "pointer-events-none text-primary")}
       variant="ghost"
       onClick={() => {
         setPreset(preset);
@@ -415,17 +414,19 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
           </div>
         )}
       </div>
-      <div className="flex justify-end gap-2 py-2 pr-4">
+      <div className="flex justify-center gap-2 py-2 pr-4">
         <Button
           onClick={() => {
             setIsOpen(false);
             resetValues();
+            onReset?.();
           }}
           variant="ghost"
         >
-          Cancel
+          Reset
         </Button>
         <Button
+          variant="select"
           onClick={() => {
             setIsOpen(false);
             if (
@@ -436,9 +437,9 @@ export const DateRangePicker: FC<DateRangePickerProps> = ({
             }
           }}
         >
-          Update
+          Apply
         </Button>
       </div>
     </div>
   );
-};
+}
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index a14521cb4..065478c31 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -8,7 +8,13 @@ import { cn } from "@/lib/utils";
 import { Preview } from "@/types/preview";
 import { SearchFilter, SearchResult } from "@/types/search";
 import { useCallback, useState } from "react";
-import { LuSearchCheck, LuSearchX } from "react-icons/lu";
+import {
+  LuExternalLink,
+  LuSearchCheck,
+  LuSearchX,
+  LuXCircle,
+} from "react-icons/lu";
+import { Link } from "react-router-dom";
 
 type SearchViewProps = {
   search: string;
@@ -63,12 +69,20 @@ export default function SearchView({
       />
 
       <div className="relative mb-2 flex h-11 items-center justify-between pl-2 pr-2 md:pl-3">
-        <Input
-          className={"text-md mr-2 w-full bg-muted md:mr-0 md:w-1/3"}
-          placeholder="Search for a specific detection..."
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-        />
+        <div className="relative w-full md:w-1/3">
+          <Input
+            className="text-md w-full bg-muted pr-10"
+            placeholder="Search for a specific detected object..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          {search && (
+            <LuXCircle
+              className="absolute right-2 top-1/2 h-5 w-5 -translate-y-1/2 cursor-pointer text-muted-foreground hover:text-primary"
+              onClick={() => setSearch("")}
+            />
+          )}
+        </div>
 
         <SearchFilterGroup
           filter={searchFilter}
@@ -80,14 +94,28 @@ export default function SearchView({
         {searchTerm.length == 0 && (
           <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">
             <LuSearchCheck className="size-16" />
-            Search For Detections
+            Search
+            <div className="mt-2 max-w-64 text-sm text-secondary-foreground">
+              Frigate can find detected objects in your review items.
+            </div>
+            <div className="mt-2 flex items-center text-center text-sm text-primary">
+              <Link
+                to="https://docs.frigate.video/configuration/semantic_search"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline"
+              >
+                Read the Documentation{" "}
+                <LuExternalLink className="ml-2 inline-flex size-3" />
+              </Link>
+            </div>
           </div>
         )}
 
         {searchTerm.length > 0 && searchResults?.length == 0 && (
           <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 Detections Found
+            No Detected Objects Found
           </div>
         )}