administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-14 23:25:25 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

similarity search tweaks

Browse Source
This commit is contained in:
Josh Hawkins 2024-09-17 12:20:04 -05:00
parent 6bc26cd59d
commit 615bedfa9c
1 changed files with 62 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
web/src/components/input/InputWithTags.tsx
View File

@ -7,7 +7,7 @@ import React, {
} from "react"; } from "react";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { LuX, LuFilter } from "react-icons/lu"; import { LuX, LuFilter, LuImage } from "react-icons/lu";
import { SearchFilter, SearchSource } from "@/types/search"; import { SearchFilter, SearchSource } from "@/types/search";
type FilterType = keyof SearchFilter; type FilterType = keyof SearchFilter;
@ -442,7 +442,7 @@ export default function InputWithTags({
aria-expanded={showSuggestions} aria-expanded={showSuggestions}
/> />
<div className="absolute right-2 top-1/2 -translate-y-1/2 transform space-x-1"> <div className="absolute right-2 top-1/2 -translate-y-1/2 transform space-x-1">
{Object.keys(filters).length > 0 && ( {(Object.keys(filters).length > 0 || isSimilaritySearch) && (
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
@ -454,7 +454,11 @@ export default function InputWithTags({
: "text-secondary-foreground" : "text-secondary-foreground"
} }
> >
<LuFilter className="h-4 w-4" /> {isSimilaritySearch ? (
<LuImage className="size-4" />
) : (
<LuFilter className="size-4" />
)}
</Button> </Button>
)} )}
{(inputValue || Object.keys(filters).length > 0) && ( {(inputValue || Object.keys(filters).length > 0) && (
@ -472,66 +476,67 @@ export default function InputWithTags({
{((showFilters && {((showFilters &&
(Object.keys(filters).length > 0 || isSimilaritySearch)) || (Object.keys(filters).length > 0 || isSimilaritySearch)) ||
showSuggestions) && ( showSuggestions) && (
<div className="absolute left-0 top-12 z-[100] w-full rounded-md border border-t-0 border-secondary-foreground bg-background p-2 text-primary shadow-md"> <div className="absolute left-0 top-12 z-[100] w-full rounded-md border border-input bg-background p-2 text-primary shadow-md">
{showFilters && Object.keys(filters).length > 0 && ( {showFilters &&
<div ref={filterRef} className="my-2 flex flex-wrap gap-2"> (Object.keys(filters).length > 0 || isSimilaritySearch) && (
{isSimilaritySearch && ( <div ref={filterRef} className="my-2 flex flex-wrap gap-2">
<span className="inline-flex items-center whitespace-nowrap rounded-full bg-blue-100 px-2 py-0.5 text-sm text-blue-800"> {isSimilaritySearch && (
Similarity Search <span className="inline-flex items-center whitespace-nowrap rounded-full bg-blue-100 px-2 py-0.5 text-sm text-blue-800">
<button Similarity Search
onClick={handleClearInput}
className="ml-1 focus:outline-none"
aria-label="Clear similarity search"
>
<LuX className="h-3 w-3" />
</button>
</span>
)}
{Object.entries(filters).map(([filterType, filterValues]) =>
Array.isArray(filterValues) ? (
filterValues.map((value, index) => (
<span
key={`${filterType}-${index}`}
className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm text-green-800"
>
{filterType}:{value}
<button
onClick={() =>
removeFilter(filterType as FilterType, value)
}
className="ml-1 focus:outline-none"
aria-label={`Remove ${filterType}:${value} filter`}
>
<LuX className="h-3 w-3" />
</button>
</span>
))
) : (
<span
key={filterType}
className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm text-green-800"
>
{filterType}:
{filterType === "before" || filterType === "after"
? new Date(filterValues as number).toLocaleDateString()
: filterValues}
<button <button
onClick={() => onClick={handleClearInput}
removeFilter(
filterType as FilterType,
filterValues as string | number,
)
}
className="ml-1 focus:outline-none" className="ml-1 focus:outline-none"
aria-label={`Remove ${filterType}:${filterValues} filter`} aria-label="Clear similarity search"
> >
<LuX className="h-3 w-3" /> <LuX className="h-3 w-3" />
</button> </button>
</span> </span>
), )}
)} {Object.entries(filters).map(([filterType, filterValues]) =>
</div> Array.isArray(filterValues) ? (
)} filterValues.map((value, index) => (
<span
key={`${filterType}-${index}`}
className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm text-green-800"
>
{filterType}:{value}
<button
onClick={() =>
removeFilter(filterType as FilterType, value)
}
className="ml-1 focus:outline-none"
aria-label={`Remove ${filterType}:${value} filter`}
>
<LuX className="h-3 w-3" />
</button>
</span>
))
) : (
<span
key={filterType}
className="inline-flex items-center whitespace-nowrap rounded-full bg-green-100 px-2 py-0.5 text-sm text-green-800"
>
{filterType}:
{filterType === "before" || filterType === "after"
? new Date(filterValues as number).toLocaleDateString()
: filterValues}
<button
onClick={() =>
removeFilter(
filterType as FilterType,
filterValues as string | number,
)
}
className="ml-1 focus:outline-none"
aria-label={`Remove ${filterType}:${filterValues} filter`}
>
<LuX className="h-3 w-3" />
</button>
</span>
),
)}
</div>
)}
{showSuggestions && ( {showSuggestions && (
<div <div
ref={suggestionRef} ref={suggestionRef}