Add support for selecting zones

web/src/components/filter/ReviewFilterGroup.tsx

@@ -30,6 +30,7 @@ import MobileReviewSettingsDrawer, {
 } from "../overlay/MobileReviewSettingsDrawer";
 import useOptimisticState from "@/hooks/use-optimistic-state";
 import FilterSwitch from "./FilterSwitch";
+import { FilterList } from "@/types/filter";
 
 const REVIEW_FILTERS = [
   "cameras",
@@ -53,7 +54,7 @@ type ReviewFilterGroupProps = {
   reviewSummary?: ReviewSummary;
   filter?: ReviewFilter;
   motionOnly: boolean;
-  filterLabels?: string[];
+  filterList?: FilterList;
   onUpdateFilter: (filter: ReviewFilter) => void;
   setMotionOnly: React.Dispatch<React.SetStateAction<boolean>>;
 };
@@ -64,15 +65,15 @@ export default function ReviewFilterGroup({
   reviewSummary,
   filter,
   motionOnly,
-  filterLabels,
+  filterList,
   onUpdateFilter,
   setMotionOnly,
 }: ReviewFilterGroupProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
 
   const allLabels = useMemo<string[]>(() => {
-    if (filterLabels) {
-      return filterLabels;
+    if (filterList?.labels) {
+      return filterList.labels;
     }
 
     if (!config) {
@@ -99,14 +100,43 @@ export default function ReviewFilterGroup({
     });
 
     return [...labels].sort();
-  }, [config, filterLabels, filter]);
+  }, [config, filterList, filter]);
+
+  const allZones = useMemo<string[]>(() => {
+    if (filterList?.zones) {
+      return filterList.zones;
+    }
+
+    if (!config) {
+      return [];
+    }
+
+    const zones = new Set<string>();
+    const cameras = filter?.cameras || Object.keys(config.cameras);
+
+    cameras.forEach((camera) => {
+      if (camera == "birdseye") {
+        return;
+      }
+      const cameraConfig = config.cameras[camera];
+      cameraConfig.review.alerts.required_zones.forEach((zone) => {
+        zones.add(zone);
+      });
+      cameraConfig.review.detections.required_zones.forEach((zone) => {
+        zones.add(zone);
+      });
+    });
+
+    return [...zones].sort();
+  }, [config, filterList, filter]);
 
   const filterValues = useMemo(
     () => ({
       cameras: Object.keys(config?.cameras || {}),
       labels: Object.values(allLabels || {}),
+      zones: Object.values(allZones || {}),
     }),
-    [config, allLabels],
+    [config, allLabels, allZones],
   );
 
   const groups = useMemo(() => {
@@ -189,12 +219,17 @@ export default function ReviewFilterGroup({
           selectedLabels={filter?.labels}
           currentSeverity={currentSeverity}
           showAll={filter?.showAll == true}
+          allZones={filterValues.zones}
+          selectedZones={filter?.zones}
           setShowAll={(showAll) => {
             onUpdateFilter({ ...filter, showAll });
           }}
           updateLabelFilter={(newLabels) => {
             onUpdateFilter({ ...filter, labels: newLabels });
           }}
+          updateZoneFilter={(newZones) =>
+            onUpdateFilter({ ...filter, zones: newZones })
+          }
         />
       )}
       {isMobile && mobileSettingsFeatures.length > 0 && (
@@ -495,21 +530,30 @@ type GeneralFilterButtonProps = {
   selectedLabels: string[] | undefined;
   currentSeverity?: ReviewSeverity;
   showAll: boolean;
+  allZones: string[];
+  selectedZones?: string[];
   setShowAll: (showAll: boolean) => void;
   updateLabelFilter: (labels: string[] | undefined) => void;
+  updateZoneFilter: (zones: string[] | undefined) => void;
 };
 function GeneralFilterButton({
   allLabels,
   selectedLabels,
   currentSeverity,
   showAll,
+  allZones,
+  selectedZones,
   setShowAll,
   updateLabelFilter,
+  updateZoneFilter,
 }: GeneralFilterButtonProps) {
   const [open, setOpen] = useState(false);
   const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
     selectedLabels,
   );
+  const [currentZones, setCurrentZones] = useState<string[] | undefined>(
+    selectedZones,
+  );
 
   const trigger = (
     <Button
@@ -534,6 +578,11 @@ function GeneralFilterButton({
       currentLabels={currentLabels}
       currentSeverity={currentSeverity}
       showAll={showAll}
+      allZones={allZones}
+      selectedZones={selectedZones}
+      currentZones={currentZones}
+      setCurrentZones={setCurrentZones}
+      updateZoneFilter={updateZoneFilter}
       setShowAll={setShowAll}
       updateLabelFilter={updateLabelFilter}
       setCurrentLabels={setCurrentLabels}
@@ -584,9 +633,14 @@ type GeneralFilterContentProps = {
   currentLabels: string[] | undefined;
   currentSeverity?: ReviewSeverity;
   showAll?: boolean;
+  allZones?: string[];
+  selectedZones?: string[];
+  currentZones?: string[];
   setShowAll?: (showAll: boolean) => void;
   updateLabelFilter: (labels: string[] | undefined) => void;
   setCurrentLabels: (labels: string[] | undefined) => void;
+  updateZoneFilter?: (zones: string[] | undefined) => void;
+  setCurrentZones?: (zones: string[] | undefined) => void;
   onClose: () => void;
 };
 export function GeneralFilterContent({
@@ -595,9 +649,14 @@ export function GeneralFilterContent({
   currentLabels,
   currentSeverity,
   showAll,
+  allZones,
+  selectedZones,
+  currentZones,
   setShowAll,
   updateLabelFilter,
   setCurrentLabels,
+  updateZoneFilter,
+  setCurrentZones,
   onClose,
 }: GeneralFilterContentProps) {
   return (
@@ -640,7 +699,6 @@ export function GeneralFilterContent({
             }}
           />
         </div>
-        <DropdownMenuSeparator />
         <div className="my-2.5 flex flex-col gap-2.5">
           {allLabels.map((item) => (
             <FilterSwitch
@@ -666,6 +724,53 @@ export function GeneralFilterContent({
           ))}
         </div>
       </div>
+      {allZones && setCurrentZones && (
+        <>
+          <DropdownMenuSeparator />
+          <div className="my-2.5 flex items-center justify-between">
+            <Label
+              className="mx-2 cursor-pointer text-primary"
+              htmlFor="allZones"
+            >
+              All Zones
+            </Label>
+            <Switch
+              className="ml-1"
+              id="allZones"
+              checked={currentZones == undefined}
+              onCheckedChange={(isChecked) => {
+                if (isChecked) {
+                  setCurrentZones(undefined);
+                }
+              }}
+            />
+          </div>
+          <div className="my-2.5 flex flex-col gap-2.5">
+            {allZones.map((item) => (
+              <FilterSwitch
+                label={item.replaceAll("_", " ")}
+                isChecked={currentZones?.includes(item) ?? false}
+                onCheckedChange={(isChecked) => {
+                  if (isChecked) {
+                    const updatedZones = currentZones ? [...currentZones] : [];
+
+                    updatedZones.push(item);
+                    setCurrentZones(updatedZones);
+                  } else {
+                    const updatedZones = currentZones ? [...currentZones] : [];
+
+                    // can not deselect the last item
+                    if (updatedZones.length > 1) {
+                      updatedZones.splice(updatedZones.indexOf(item), 1);
+                      setCurrentZones(updatedZones);
+                    }
+                  }
+                }}
+              />
+            ))}
+          </div>
+        </>
+      )}
       <DropdownMenuSeparator />
       <div className="flex items-center justify-evenly p-2">
         <Button
@@ -675,6 +780,10 @@ export function GeneralFilterContent({
               updateLabelFilter(currentLabels);
             }
 
+            if (updateZoneFilter && selectedZones != currentZones) {
+              updateZoneFilter(currentZones);
+            }
+
             onClose();
           }}
         >

web/src/types/filter.ts

@@ -3,3 +3,8 @@
 export type FilterType = { [searchKey: string]: any };
 
 export type ExportMode = "select" | "timeline" | "none";
+
+export type FilterList = {
+  labels?: string[];
+  zones?: string[];
+};

web/src/types/review.ts

@@ -32,6 +32,7 @@ export type SegmentedReviewData =
 export type ReviewFilter = {
   cameras?: string[];
   labels?: string[];
+  zones?: string[];
   before?: number;
   after?: number;
   showReviewed?: 0 | 1;

web/src/views/events/EventView.tsx

@@ -49,6 +49,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
+import { FilterList } from "@/types/filter";
 
 type EventViewProps = {
   reviewItems?: SegmentedReviewData;
@@ -203,8 +204,9 @@ export default function EventView({
 
   // review filter info
 
-  const reviewLabels = useMemo(() => {
+  const reviewFilterList = useMemo<FilterList>(() => {
     const uniqueLabels = new Set<string>();
+    const uniqueZones = new Set<string>();
 
     reviewItems?.all?.forEach((rev) => {
       rev.data.objects.forEach((obj) =>
@@ -213,7 +215,11 @@ export default function EventView({
       rev.data.audio.forEach((aud) => uniqueLabels.add(aud));
     });
 
-    return [...uniqueLabels];
+    reviewItems?.all?.forEach((rev) => {
+      rev.data.zones.forEach((zone) => uniqueZones.add(zone));
+    });
+
+    return { labels: [...uniqueLabels], zones: [...uniqueZones] };
   }, [reviewItems]);
 
   if (!config) {
@@ -282,7 +288,7 @@ export default function EventView({
             reviewSummary={reviewSummary}
             filter={filter}
             motionOnly={motionOnly}
-            filterLabels={reviewLabels}
+            filterList={reviewFilterList}
             onUpdateFilter={updateFilter}
             setMotionOnly={setMotionOnly}
           />