Add motion previews filter (#22347)

* add ability to filter motion previews via heatmap grid

* i18n

* use dialog on mobile

web/src/views/events/EventView.tsx

@@ -79,7 +79,17 @@ 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 ReviewActivityCalendar from "@/components/overlay/ReviewActivityCalendar";
 import PlatformAwareDialog from "@/components/overlay/dialog/PlatformAwareDialog";
 import MotionPreviewsPane from "./MotionPreviewsPane";
@@ -1117,6 +1127,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 +1331,68 @@ function MotionReview({
                   updateSelectedDay={onUpdateSelectedDay}
                 />
               )}
+              <Dialog
+                open={isRegionFilterOpen}
+                onOpenChange={(open) => {
+                  if (open) {
+                    setPendingFilterCells(new Set(motionFilterCells));
+                  }
+                  setIsRegionFilterOpen(open);
+                }}
+              >
+                <DialogTrigger asChild>
+                  <Button
+                    className={cn(
+                      isDesktop ? "flex items-center gap-2" : "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"
+                      }
+                    />
+                    {isDesktop && 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>
               <PlatformAwareDialog
                 trigger={
                   <Button
@@ -1456,6 +1535,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);