diff --git a/ui/src/data-services/models/timeline-tick.ts b/ui/src/data-services/models/timeline-tick.ts index 49d7553f3..1e432db65 100644 --- a/ui/src/data-services/models/timeline-tick.ts +++ b/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 } diff --git a/ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx b/ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx index 2b2c84811..13318ff35 100644 --- a/ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx +++ b/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}', + fill: 'tozeroy', + type: 'scatter', + mode: 'lines', + line: { color: lineColorProcessed, width: 1 }, + name: 'Was processed', + yaxis: 'y2', + }, { x: timeline.map( (timelineTick) => new Date(timelineTick.startDate)