Show detail icon indicating if a car has a plate recognized that is not a known plate (#17601)

This commit is contained in:
Nicolas Mowen 2025-04-08 09:08:01 -06:00 committed by GitHub
parent f618f25d7e
commit 269cadff15
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 2 deletions

View File

@ -56,6 +56,11 @@ export default function SearchThumbnail({
return `${searchResult.label}-verified`;
}, [config, searchResult]);
const hasRecognizedPlate = useMemo(
() => (searchResult.data.recognized_license_plate?.length || 0) > 0,
[searchResult],
);
return (
<div
className="relative size-full cursor-pointer"
@ -97,7 +102,10 @@ export default function SearchThumbnail({
className={`z-0 flex items-center justify-between gap-1 space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500 text-xs`}
onClick={() => onClick(searchResult, false, true)}
>
{getIconForLabel(objectLabel, "size-3 text-white")}
{getIconForLabel(
`${objectLabel}${hasRecognizedPlate ? "-plate" : ""}`,
"size-3 text-white",
)}
{Math.round(
(searchResult.data.score ??
searchResult.data.top_score ??

View File

@ -32,7 +32,7 @@ import {
GiRaccoonHead,
GiSailboat,
} from "react-icons/gi";
import { LuBox, LuLassoSelect } from "react-icons/lu";
import { LuBox, LuLassoSelect, LuScanBarcode } from "react-icons/lu";
import * as LuIcons from "react-icons/lu";
import { MdRecordVoiceOver } from "react-icons/md";
import { PiBirdFill } from "react-icons/pi";
@ -57,6 +57,8 @@ export function isValidIconName(value: string): value is IconName {
export function getIconForLabel(label: string, className?: string) {
if (label.endsWith("-verified")) {
return getVerifiedIcon(label, className);
} else if (label.endsWith("-plate")) {
return getRecognizedPlateIcon(label, className);
}
switch (label) {
@ -153,3 +155,14 @@ function getVerifiedIcon(label: string, className?: string) {
</div>
);
}
function getRecognizedPlateIcon(label: string, className?: string) {
const simpleLabel = label.substring(0, label.lastIndexOf("-"));
return (
<div key={label} className="flex items-center">
{getIconForLabel(simpleLabel, className)}
<LuScanBarcode className="absolute size-2.5 translate-x-[50%] translate-y-3/4" />
</div>
);
}