Fixes to the session captures timeline data

ami/main/api/serializers.py

@@ -1217,8 +1217,10 @@ class EventTimelineIntervalSerializer(serializers.Serializer):
     start = serializers.DateTimeField()
     end = serializers.DateTimeField()
     first_capture = EventTimelineSourceImageSerializer(allow_null=True)
+    top_capture = EventTimelineSourceImageSerializer(allow_null=True)
     captures_count = serializers.IntegerField()
     detections_count = serializers.IntegerField()
+    detections_avg = serializers.IntegerField()
 
 
 class EventTimelineMetaSerializer(serializers.Serializer):

ami/main/api/views.py

@@ -1,5 +1,6 @@
 import datetime
 import logging
+from statistics import mode
 
 from django.contrib.postgres.search import TrigramSimilarity
 from django.core import exceptions
@@ -280,8 +281,10 @@ def timeline(self, request, pk=None):
                 "start": current_time,
                 "end": interval_end,
                 "first_capture": None,
+                "top_capture": None,
                 "captures_count": 0,
                 "detections_count": 0,
+                "detection_counts": [],
             }
 
             while image_index < len(source_images) and source_images[image_index]["timestamp"] <= interval_end:
@@ -290,8 +293,16 @@ def timeline(self, request, pk=None):
                     interval_data["first_capture"] = SourceImage(pk=image["id"])
                 interval_data["captures_count"] += 1
                 interval_data["detections_count"] += image["detections_count"] or 0
+                interval_data["detection_counts"] += [image["detections_count"]]
+                if image["detections_count"] >= max(interval_data["detection_counts"]):
+                    interval_data["top_capture"] = SourceImage(pk=image["id"])
                 image_index += 1
 
+            # Set a meaningful average detection count to display for the interval
+            # Remove zero values and calculate the mode
+            interval_data["detection_counts"] = [x for x in interval_data["detection_counts"] if x > 0]
+            interval_data["detections_avg"] = mode(interval_data["detection_counts"] or [0])
+
             timeline.append(interval_data)
             current_time = interval_end
 

ui/src/data-services/models/timeline-tick.ts

@@ -6,8 +6,12 @@ export type ServerTimelineTick = {
   first_capture: {
     id: number
   } | null
+  top_capture: {
+    id: number
+  } | null
   captures_count: number
   detections_count: number
+  detections_avg: number
 }
 
 export class TimelineTick {
@@ -25,6 +29,10 @@ export class TimelineTick {
     return this._timelineTick.detections_count ?? 0
   }
 
+  get avgDetections(): number {
+    return this._timelineTick.detections_avg ?? 0
+  }
+
   get numCaptures(): number {
     return this._timelineTick.captures_count ?? 0
   }
@@ -41,6 +49,18 @@ export class TimelineTick {
     return `${this._timelineTick.first_capture.id}`
   }
 
+  get topCaptureId(): string | undefined {
+    if (!this._timelineTick.top_capture) {
+      return undefined
+    }
+
+    return `${this._timelineTick.top_capture.id}`
+  }
+
+  get representativeCaptureId(): string | undefined {
+    return this.topCaptureId ?? this.firstCaptureId
+  }
+
   get tooltip(): string {
     const timespanString = getCompactTimespanString({
       date1: this.startDate,
@@ -50,6 +70,6 @@ export class TimelineTick {
       },
     })
 
-    return `${timespanString}<br>Captures: ${this.numCaptures}<br>Detections: ${this.numDetections}`
+    return `${timespanString}<br>Captures: ${this.numCaptures}<br>Avg. detections: ${this.avgDetections}`
   }
 }

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

@@ -10,6 +10,7 @@ const lineColorDetections = '#5f8ac6'
 const textColor = '#222426'
 const tooltipBgColor = '#ffffff'
 const tooltipBorderColor = '#222426'
+const gridLineColor = '#f36399'
 
 export const ActivityPlot = ({
   session,
@@ -22,14 +23,30 @@ export const ActivityPlot = ({
 }) => {
   const containerRef = useRef(null)
   const width = useDynamicPlotWidth(containerRef)
+
+  // Calculate the average number of captures
+  const avgCaptures =
+    timeline.reduce((sum, tick) => sum + tick.numCaptures, 0) / timeline.length
+
+  // Calculate the maximum deviation from the average
+  const maxDeviation = Math.max(
+    ...timeline.map((tick) => Math.abs(tick.numCaptures - avgCaptures))
+  )
+
+  // Set the y-axis range to be centered around the average
+  const yAxisMin = Math.max(0, avgCaptures - maxDeviation)
+  const yAxisMax = avgCaptures + maxDeviation
+
   return (
     <div style={{ margin: '0 14px -10px' }}>
       <div ref={containerRef}>
         <Plot
           style={{ display: 'block' }}
           data={[
             {
-              x: timeline.map((timelineTick) => timelineTick.startDate),
+              x: timeline.map(
+                (timelineTick) => new Date(timelineTick.startDate)
+              ),
               y: timeline.map((timelineTick) => timelineTick.numCaptures),
               text: timeline.map((timelineTick) => timelineTick.tooltip),
               hovertemplate: '%{text}<extra></extra>',
@@ -38,17 +55,21 @@ export const ActivityPlot = ({
               mode: 'lines',
               line: { color: lineColorCaptures, width: 1 },
               name: 'Captures',
+              yaxis: 'y',
             },
             {
-              x: timeline.map((timelineTick) => timelineTick.startDate),
-              y: timeline.map((timelineTick) => timelineTick.numDetections),
+              x: timeline.map(
+                (timelineTick) => new Date(timelineTick.startDate)
+              ),
+              y: timeline.map((timelineTick) => timelineTick.avgDetections),
               text: timeline.map((timelineTick) => timelineTick.tooltip),
               hovertemplate: '%{text}<extra></extra>',
               fill: 'tozeroy',
               type: 'scatter',
               mode: 'lines',
               line: { color: lineColorDetections, width: 1 },
-              name: 'Detections',
+              name: 'Avg. detections',
+              yaxis: 'y2',
             },
           ]}
           layout={{
@@ -63,20 +84,38 @@ export const ActivityPlot = ({
               t: 0,
               pad: 0,
             },
+            // y-axis for captures
             yaxis: {
               showgrid: false,
               showticklabels: false,
               zeroline: false,
               rangemode: 'nonnegative',
               fixedrange: true,
+              range: [yAxisMin, yAxisMax],
+              side: 'left',
             },
-            xaxis: {
-              showline: true,
+            // y-axis for detections
+            yaxis2: {
               showgrid: false,
               showticklabels: false,
               zeroline: false,
+              rangemode: 'nonnegative',
+              fixedrange: true,
+              range: [0, Math.max(session.detectionsMaxCount ?? 0, 1)], // Ensure a minimum range of 1
+              side: 'right',
+              overlaying: 'y',
+            },
+            xaxis: {
+              showline: false,
+              showgrid: true,
+              griddash: 'dot',
+              gridwidth: 1,
+              gridcolor: gridLineColor,
+              showticklabels: false,
+              zeroline: false,
               fixedrange: true,
-              range: [session.startDate, session.endDate],
+              range: [new Date(session.startDate), new Date(session.endDate)],
+              dtick: 3600000, // milliseconds in an hour
             },
             hoverlabel: {
               bgcolor: tooltipBgColor,
@@ -95,8 +134,8 @@ export const ActivityPlot = ({
           onClick={(data) => {
             const timelineTickIndex = data.points[0].pointIndex
             const timelineTick = timeline[timelineTickIndex]
-            if (timelineTick?.firstCaptureId) {
-              setActiveCaptureId(timelineTick.firstCaptureId)
+            if (timelineTick?.representativeCaptureId) {
+              setActiveCaptureId(timelineTick.representativeCaptureId)
             }
           }}
         />

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

@@ -69,7 +69,7 @@ export const CaptureNavigation = ({
       />
       {totalCaptures && (
         <span>
-          {currentIndex} / {totalCaptures}
+          {currentIndex?.toLocaleString()} / {totalCaptures.toLocaleString()}
         </span>
       )}
       <IconButton