Present filtered detections in playback view (#1172)

* feat: show filtered detections in playback view

* feat: consider default filter setting for displayed occurrence count

Author: annavik

ui/src/pages/session-details/playback/capture-details/capture-details.tsx

@@ -21,9 +21,11 @@ import { ProcessNow } from './capture-job/process-now'
 export const CaptureDetails = ({
   capture,
   captureId,
+  defaultFilters,
 }: {
   capture?: Capture
   captureId: string
+  defaultFilters: boolean
 }) => {
   const { user } = useUser()
   const { projectId } = useParams()
@@ -112,13 +114,20 @@ export const CaptureDetails = ({
                 to: APP_ROUTES.OCCURRENCES({
                   projectId: projectId as string,
                 }),
-                filters: {
-                  detections__source_image: capture.id,
-                },
+                filters: defaultFilters
+                  ? {
+                      detections__source_image: capture.id,
+                    }
+                  : {
+                      detections__source_image: capture.id,
+                      apply_defaults: 'false',
+                    },
               })}
             >
               <span className={classNames(styles.value, styles.bubble)}>
-                {capture.numOccurrences}
+                {defaultFilters
+                  ? capture.numOccurrences
+                  : capture.numDetections}
               </span>
             </Link>
           </div>

ui/src/pages/session-details/playback/frame/frame.module.scss

@@ -46,6 +46,10 @@
     outline-color: $color-destructive-500;
   }
 
+  &.filtered {
+    outline: 2px solid $color-neutral-300;
+  }
+
   &.active {
     outline: 2px solid $color-primary-2-500;
   }

ui/src/pages/session-details/playback/frame/frame.tsx

@@ -19,19 +19,21 @@ import { BoxStyle } from './types'
 const FALLBACK_RATIO = 16 / 9
 
 interface FrameProps {
-  src?: string
-  width: number | null
-  height: number | null
+  defaultFilters: boolean
   detections: CaptureDetection[]
+  height: number | null
   showDetections?: boolean
+  src?: string
+  width: number | null
 }
 
 export const Frame = ({
-  src,
-  width,
-  height,
+  defaultFilters,
   detections,
+  height,
   showDetections,
+  src,
+  width,
 }: FrameProps) => {
   const [naturalSize, setNaturalSize] = useState<{
     width: number
@@ -127,6 +129,7 @@ export const Frame = ({
         {renderOverlay && <FrameOverlay boxStyles={boxStyles} />}
         <FrameDetections
           boxStyles={boxStyles}
+          defaultFilters={defaultFilters}
           detections={detections}
           showDetections={showDetections}
         />
@@ -173,10 +176,12 @@ const FrameOverlay = ({
 
 const FrameDetections = ({
   boxStyles,
+  defaultFilters,
   detections,
   showDetections,
 }: {
   boxStyles: { [key: number]: BoxStyle }
+  defaultFilters: boolean
   detections: CaptureDetection[]
   showDetections?: boolean
 }) => {
@@ -218,9 +223,12 @@ const FrameDetections = ({
                     style={style}
                     className={classNames(styles.detection, {
                       [styles.active]: isActive,
+                      [styles.filtered]: defaultFilters
+                        ? !detection.occurrenceMeetsCriteria
+                        : false,
+                      [styles.alert]: detection.score < SCORE_THRESHOLDS.ALERT,
                       [styles.warning]:
                         detection.score < SCORE_THRESHOLDS.WARNING,
-                      [styles.alert]: detection.score < SCORE_THRESHOLDS.ALERT,
                       [styles.clickable]: !!detection.occurrenceId,
                     })}
                     onClick={() => {

ui/src/pages/session-details/playback/playback.tsx

@@ -9,7 +9,7 @@ import {
   CheckboxTheme,
 } from 'design-system/components/checkbox/checkbox'
 import { IconButtonTheme } from 'design-system/components/icon-button/icon-button'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { ActivityPlot } from './activity-plot/lazy-activity-plot'
 import { CaptureDetails } from './capture-details/capture-details'
 import { CaptureNavigation } from './capture-navigation/capture-navigation'
@@ -51,19 +51,7 @@ export const Playback = ({
     }
   }, [activeCapture])
 
-  const detections = useMemo(() => {
-    if (!activeCapture?.detections) {
-      return []
-    }
-
-    if (!defaultFilters) {
-      return activeCapture.detections
-    }
-
-    return activeCapture.detections.filter(
-      (detection) => detection.occurrenceMeetsCriteria
-    )
-  }, [activeCapture?.detections, defaultFilters])
+  const detections = activeCapture?.detections ?? []
 
   if (!session.firstCapture) {
     return null
@@ -79,6 +67,7 @@ export const Playback = ({
               <CaptureDetails
                 capture={activeCapture}
                 captureId={activeCaptureId}
+                defaultFilters={defaultFilters}
               />
             </div>
           )}
@@ -118,11 +107,12 @@ export const Playback = ({
         </div>
       </div>
       <Frame
-        src={activeCapture?.src}
-        width={activeCapture?.width ?? session.firstCapture.width}
-        height={activeCapture?.height ?? session.firstCapture.height}
+        defaultFilters={defaultFilters}
         detections={detections}
+        height={activeCapture?.height ?? session.firstCapture.height}
         showDetections={showDetections}
+        src={activeCapture?.src}
+        width={activeCapture?.width ?? session.firstCapture.width}
       />
       <div className={styles.bottomBar}>
         <div className={styles.captureNavigationWrapper}>

ui/src/utils/getAppRoute.ts

@@ -1,4 +1,5 @@
 type FilterType =
+  | 'apply_defaults'
   | 'capture'
   | 'collection'
   | 'collections'