add ability to filter motion previews via heatmap grid

web/src/components/filter/MotionRegionFilterGrid.tsx

@@ -0,0 +1,110 @@
+import { baseUrl } from "@/api/baseUrl";
+import { useCallback, useRef } from "react";
+
+const GRID_SIZE = 16;
+
+type MotionRegionFilterGridProps = {
+  cameraName: string;
+  selectedCells: Set<number>;
+  onCellsChange: (cells: Set<number>) => void;
+};
+
+export default function MotionRegionFilterGrid({
+  cameraName,
+  selectedCells,
+  onCellsChange,
+}: MotionRegionFilterGridProps) {
+  const paintingRef = useRef<{ active: boolean; adding: boolean }>({
+    active: false,
+    adding: true,
+  });
+
+  const toggleCell = useCallback(
+    (index: number, forceAdd?: boolean) => {
+      const next = new Set(selectedCells);
+
+      if (forceAdd !== undefined) {
+        if (forceAdd) {
+          next.add(index);
+        } else {
+          next.delete(index);
+        }
+      } else if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+
+      onCellsChange(next);
+    },
+    [selectedCells, onCellsChange],
+  );
+
+  const handlePointerDown = useCallback(
+    (index: number) => {
+      const adding = !selectedCells.has(index);
+      paintingRef.current = { active: true, adding };
+      toggleCell(index, adding);
+    },
+    [selectedCells, toggleCell],
+  );
+
+  const handlePointerEnter = useCallback(
+    (index: number) => {
+      if (!paintingRef.current.active) {
+        return;
+      }
+
+      toggleCell(index, paintingRef.current.adding);
+    },
+    [toggleCell],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    paintingRef.current.active = false;
+  }, []);
+
+  return (
+    <div className="space-y-2">
+      <div
+        className="relative aspect-video w-full select-none overflow-hidden rounded-lg"
+        style={{ touchAction: "none" }}
+        onPointerUp={handlePointerUp}
+        onPointerLeave={handlePointerUp}
+      >
+        <img
+          src={`${baseUrl}api/${cameraName}/latest.jpg?h=500`}
+          className="absolute inset-0 size-full object-contain"
+          draggable={false}
+          alt=""
+        />
+        <div
+          className="absolute inset-0 grid"
+          style={{
+            gridTemplateColumns: `repeat(${GRID_SIZE}, 1fr)`,
+            gridTemplateRows: `repeat(${GRID_SIZE}, 1fr)`,
+          }}
+        >
+          {Array.from({ length: GRID_SIZE * GRID_SIZE }, (_, index) => {
+            const isSelected = selectedCells.has(index);
+            return (
+              <div
+                key={index}
+                className={
+                  isSelected
+                    ? "border border-severity_alert/60 bg-severity_alert/40"
+                    : "border border-transparent hover:bg-white/20"
+                }
+                onPointerDown={(e) => {
+                  e.preventDefault();
+                  handlePointerDown(index);
+                }}
+                onPointerEnter={() => handlePointerEnter(index)}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/views/events/EventView.tsx

@@ -79,7 +79,18 @@ import { GiSoundWaves } from "react-icons/gi";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
 import { useTranslation } from "react-i18next";
-import { FaCog } from "react-icons/fa";
+import { FaCog, FaFilter } from "react-icons/fa";
+import MotionRegionFilterGrid from "@/components/filter/MotionRegionFilterGrid";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
 import ReviewActivityCalendar from "@/components/overlay/ReviewActivityCalendar";
 import PlatformAwareDialog from "@/components/overlay/dialog/PlatformAwareDialog";
 import MotionPreviewsPane from "./MotionPreviewsPane";
@@ -1117,6 +1128,13 @@ function MotionReview({
   const [controlsOpen, setControlsOpen] = useState(false);
   const [dimStrength, setDimStrength] = useState(82);
   const [isPreviewSettingsOpen, setIsPreviewSettingsOpen] = useState(false);
+  const [motionFilterCells, setMotionFilterCells] = useState<Set<number>>(
+    new Set(),
+  );
+  const [pendingFilterCells, setPendingFilterCells] = useState<Set<number>>(
+    new Set(),
+  );
+  const [isRegionFilterOpen, setIsRegionFilterOpen] = useState(false);
 
   const objectReviewItems = useMemo(
     () =>
@@ -1314,6 +1332,135 @@ function MotionReview({
                   updateSelectedDay={onUpdateSelectedDay}
                 />
               )}
+              {isDesktop ? (
+                <Dialog
+                  open={isRegionFilterOpen}
+                  onOpenChange={(open) => {
+                    if (open) {
+                      setPendingFilterCells(new Set(motionFilterCells));
+                    }
+                    setIsRegionFilterOpen(open);
+                  }}
+                >
+                  <DialogTrigger asChild>
+                    <Button
+                      className="flex items-center gap-2"
+                      size="sm"
+                      variant={
+                        motionFilterCells.size > 0 ? "select" : "default"
+                      }
+                      aria-label={t("motionPreviews.filter")}
+                    >
+                      <FaFilter
+                        className={
+                          motionFilterCells.size > 0
+                            ? "text-selected-foreground"
+                            : "text-secondary-foreground"
+                        }
+                      />
+                      {t("motionPreviews.filter")}
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-[85%] md:max-w-[70%] lg:max-w-[60%]">
+                    <DialogHeader>
+                      <DialogTitle>{t("motionPreviews.filter")}</DialogTitle>
+                      <DialogDescription>
+                        {t("motionPreviews.filterDesc")}
+                      </DialogDescription>
+                    </DialogHeader>
+                    <MotionRegionFilterGrid
+                      cameraName={selectedMotionPreviewCamera.name}
+                      selectedCells={pendingFilterCells}
+                      onCellsChange={setPendingFilterCells}
+                    />
+                    <DialogFooter className="justify-end gap-1">
+                      <Button
+                        variant="outline"
+                        disabled={pendingFilterCells.size === 0}
+                        onClick={() => {
+                          setPendingFilterCells(new Set());
+                        }}
+                      >
+                        {t("motionPreviews.filterClear")}
+                      </Button>
+                      <Button
+                        variant="select"
+                        onClick={() => {
+                          setMotionFilterCells(new Set(pendingFilterCells));
+                          setIsRegionFilterOpen(false);
+                        }}
+                      >
+                        {t("button.apply", { ns: "common" })}
+                      </Button>
+                    </DialogFooter>
+                  </DialogContent>
+                </Dialog>
+              ) : (
+                <Drawer
+                  open={isRegionFilterOpen}
+                  onOpenChange={(open) => {
+                    if (open) {
+                      setPendingFilterCells(new Set(motionFilterCells));
+                    }
+                    setIsRegionFilterOpen(open);
+                  }}
+                >
+                  <DrawerTrigger asChild>
+                    <Button
+                      className="rounded-lg"
+                      size="sm"
+                      variant={
+                        motionFilterCells.size > 0 ? "select" : "default"
+                      }
+                      aria-label={t("motionPreviews.filter")}
+                    >
+                      <FaFilter
+                        className={
+                          motionFilterCells.size > 0
+                            ? "text-selected-foreground"
+                            : "text-secondary-foreground"
+                        }
+                      />
+                    </Button>
+                  </DrawerTrigger>
+                  <DrawerContent className="max-h-[75dvh] overflow-hidden px-4 pb-4">
+                    <div className="space-y-4 py-2">
+                      <div className="space-y-0.5">
+                        <div className="text-md">
+                          {t("motionPreviews.filter")}
+                        </div>
+                        <div className="text-xs text-muted-foreground">
+                          {t("motionPreviews.filterDesc")}
+                        </div>
+                      </div>
+                      <MotionRegionFilterGrid
+                        cameraName={selectedMotionPreviewCamera.name}
+                        selectedCells={pendingFilterCells}
+                        onCellsChange={setPendingFilterCells}
+                      />
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          variant="outline"
+                          disabled={pendingFilterCells.size === 0}
+                          onClick={() => {
+                            setPendingFilterCells(new Set());
+                          }}
+                        >
+                          {t("motionPreviews.filterClear")}
+                        </Button>
+                        <Button
+                          onClick={() => {
+                            setMotionFilterCells(new Set(pendingFilterCells));
+                            setIsRegionFilterOpen(false);
+                          }}
+                        >
+                          {t("button.apply", { ns: "common" })}
+                        </Button>
+                      </div>
+                    </div>
+                  </DrawerContent>
+                </Drawer>
+              )}
               <PlatformAwareDialog
                 trigger={
                   <Button
@@ -1456,6 +1603,7 @@ function MotionReview({
             }
             playbackRate={playbackRate}
             nonMotionAlpha={dimStrength / 100}
+            motionFilterCells={motionFilterCells}
             onSeek={(timestamp) => {
               onOpenRecording({
                 camera: selectedMotionPreviewCamera.name,

web/src/views/events/MotionPreviewsPane.tsx

@@ -589,6 +589,7 @@ type MotionPreviewsPaneProps = {
   isLoadingMotionRanges?: boolean;
   playbackRate: number;
   nonMotionAlpha: number;
+  motionFilterCells?: Set<number>;
   onSeek: (timestamp: number) => void;
 };
 
@@ -600,6 +601,7 @@ export default function MotionPreviewsPane({
   isLoadingMotionRanges = false,
   playbackRate,
   nonMotionAlpha,
+  motionFilterCells,
   onSeek,
 }: MotionPreviewsPaneProps) {
   const { t } = useTranslation(["views/events"]);
@@ -879,6 +881,26 @@ export default function MotionPreviewsPane({
     ],
   );
 
+  const filteredClipData = useMemo(() => {
+    if (!motionFilterCells || motionFilterCells.size === 0) {
+      return clipData;
+    }
+
+    return clipData.filter(({ motionHeatmap }) => {
+      if (!motionHeatmap) {
+        return false;
+      }
+
+      for (const cellIndex of motionFilterCells) {
+        if ((motionHeatmap[cellIndex.toString()] ?? 0) > 0) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+  }, [clipData, motionFilterCells]);
+
   const hasCurrentHourRanges = useMemo(
     () => motionRanges.some((range) => isCurrentHour(range.end_time)),
     [motionRanges],
@@ -901,13 +923,13 @@ export default function MotionPreviewsPane({
         ref={setContentNode}
         className="no-scrollbar min-h-0 flex-1 overflow-y-auto"
       >
-        {clipData.length === 0 ? (
+        {filteredClipData.length === 0 ? (
           <div className="flex h-full items-center justify-center text-lg text-primary">
             {t("motionPreviews.empty")}
           </div>
         ) : (
           <div className="grid grid-cols-1 gap-2 pb-2 sm:grid-cols-2 md:gap-4 xl:grid-cols-4">
-            {clipData.map(
+            {filteredClipData.map(
               ({ range, preview, fallbackFrameTimes, motionHeatmap }, idx) => {
                 const clipId = `${camera.name}-${range.start_time}-${range.end_time}-${idx}`;
                 const isMounted = mountedClips.has(clipId);