diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx index 2038aef42..a92399539 100644 --- a/web/src/components/filter/ReviewFilterGroup.tsx +++ b/web/src/components/filter/ReviewFilterGroup.tsx @@ -209,7 +209,7 @@ type CameraFilterButtonProps = { selectedCameras: string[] | undefined; updateCameraFilter: (cameras: string[] | undefined) => void; }; -function CamerasFilterButton({ +export function CamerasFilterButton({ allCameras, groups, selectedCameras, @@ -227,7 +227,7 @@ function CamerasFilterButton({ size="sm" > = 1 ? "text-selected-foreground" : "text-secondary-foreground"}`} />
(); const [selectedLabels, setSelectedLabels] = useState(); + const [scoreRange, setScoreRange] = useState(); // data @@ -217,7 +220,9 @@ function PlusFilterGroup({ return [...labels].sort(); }, [config, selectedCameras]); - const [open, setOpen] = useState<"none" | "camera" | "label">("none"); + const [open, setOpen] = useState<"none" | "camera" | "label" | "score">( + "none", + ); const [currentCameras, setCurrentCameras] = useState( undefined, ); @@ -230,84 +235,13 @@ function PlusFilterGroup({ const Content = isMobile ? DrawerContent : DropdownMenuContent; return ( -
- { - if (!open) { - setCurrentCameras(selectedCameras); - } - setOpen(open ? "camera" : "none"); - }} - > - - - - - - Filter Cameras - - - { - if (isChecked) { - setCurrentCameras(undefined); - } - }} - /> - -
- {allCameras.map((item) => ( - { - if (isChecked) { - const updatedCameras = currentCameras - ? [...currentCameras] - : []; - - updatedCameras.push(item); - setCurrentCameras(updatedCameras); - } else { - const updatedCameras = currentCameras - ? [...currentCameras] - : []; - - // can not deselect the last item - if (updatedCameras.length > 1) { - updatedCameras.splice(updatedCameras.indexOf(item), 1); - setCurrentCameras(updatedCameras); - } - } - }} - /> - ))} -
- -
- -
-
-
+
+ { @@ -318,8 +252,8 @@ function PlusFilterGroup({ }} > - + { + if (!open) { + setCurrentCameras(selectedCameras); + } + setOpen(open ? "score" : "none"); + }} + > + + + + + + Filter Cameras + + + { + if (isChecked) { + setCurrentCameras(undefined); + } + }} + /> + +
+ {allCameras.map((item) => ( + { + if (isChecked) { + const updatedCameras = currentCameras + ? [...currentCameras] + : []; + + updatedCameras.push(item); + setCurrentCameras(updatedCameras); + } else { + const updatedCameras = currentCameras + ? [...currentCameras] + : []; + + // can not deselect the last item + if (updatedCameras.length > 1) { + updatedCameras.splice(updatedCameras.indexOf(item), 1); + setCurrentCameras(updatedCameras); + } + } + }} + /> + ))} +
+ +
+ +
+
+
); }