Display the processed status of captures in the session detail view timeline

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

@@ -10,6 +10,7 @@ export type ServerTimelineTick = {
   captures_count: number
   detections_count: number
   detections_avg: number
+  was_processed: boolean
 }
 
 export class TimelineTick {
@@ -31,6 +32,10 @@ export class TimelineTick {
     return this._timelineTick.detections_avg ?? 0
   }
 
+  get wasProcessed(): boolean {
+    return this._timelineTick.was_processed
+  }
+
   get numCaptures(): number {
     return this._timelineTick.captures_count ?? 0
   }

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

@@ -8,6 +8,7 @@ import { useDynamicPlotWidth } from './useDynamicPlotWidth'
 const fontFamily = 'Mazzard, sans-serif'
 const lineColorCaptures = '#4E4F57'
 const lineColorDetections = '#5F8AC6'
+const lineColorProcessed = '#00ff1a'
 const spikeColor = '#FFFFFF'
 const textColor = '#303137'
 const tooltipBgColor = '#FFFFFF'
@@ -54,6 +55,32 @@ const ActivityPlot = ({
               name: 'Captures',
               yaxis: 'y',
             },
+            {
+              x: timeline.map(
+                (timelineTick) => new Date(timelineTick.startDate)
+              ),
+              y: timeline.map((timelineTick) =>
+                timelineTick.numCaptures > 0
+                  ? timelineTick.wasProcessed
+                    ? timelineTick.numCaptures // Show number of captures so value is visible
+                    : 0
+                  : 0
+              ),
+              customdata: timeline.map((timelineTick) =>
+                timelineTick.numCaptures > 0
+                  ? timelineTick.wasProcessed
+                    ? 'Yes'
+                    : 'No'
+                  : 'N/A'
+              ),
+              hovertemplate: 'Was processed: %{customdata}<extra></extra>',
+              fill: 'tozeroy',
+              type: 'scatter',
+              mode: 'lines',
+              line: { color: lineColorProcessed, width: 1 },
+              name: 'Was processed',
+              yaxis: 'y2',
+            },
             {
               x: timeline.map(
                 (timelineTick) => new Date(timelineTick.startDate)