Session details improvements (#568)

* feat: use hover mode "x unified" in activity plot

* fix: update plot tick format

* fix: hide plots with one or none data points

* feat: go to closest capture on click if interval has no captures

Author: annavik

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

@@ -1,5 +1,3 @@
-import { getCompactTimespanString } from 'utils/date/getCompactTimespanString/getCompactTimespanString'
-
 export type ServerTimelineTick = {
   start: string
   end: string
@@ -60,16 +58,4 @@ export class TimelineTick {
   get representativeCaptureId(): string | undefined {
     return this.topCaptureId ?? this.firstCaptureId
   }
-
-  get tooltip(): string {
-    const timespanString = getCompactTimespanString({
-      date1: this.startDate,
-      date2: this.endDate,
-      options: {
-        second: true,
-      },
-    })
-
-    return `${timespanString}<br>Captures: ${this.numCaptures}<br>Avg. detections: ${this.avgDetections}`
-  }
 }

ui/src/design-system/components/plot/plot.tsx

@@ -81,7 +81,6 @@ const Plot = ({
           zeroline: false,
           tickvals: data.tickvals,
           ticktext: data.ticktext,
-          tickformat: 'd',
           automargin: true,
           ...(showRangeSlider
             ? {

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

@@ -2,15 +2,17 @@ import { SessionDetails } from 'data-services/models/session-details'
 import { TimelineTick } from 'data-services/models/timeline-tick'
 import { useRef } from 'react'
 import Plot from 'react-plotly.js'
+import { getCompactTimespanString } from 'utils/date/getCompactTimespanString/getCompactTimespanString'
 import { useDynamicPlotWidth } from './useDynamicPlotWidth'
+import { findClosestCaptureId } from '../session-captures-slider/utils'
 
 const fontFamily = 'Mazzard, sans-serif'
 const lineColorCaptures = '#4E4F57'
 const lineColorDetections = '#5F8AC6'
+const spikeColor = '#FFFFFF'
 const textColor = '#303137'
-const tooltipBgColor = '#ffffff'
+const tooltipBgColor = '#FFFFFF'
 const tooltipBorderColor = '#303137'
-const gridLineColor = '#4E4F57'
 
 export const ActivityPlot = ({
   session,
@@ -48,8 +50,7 @@ export const ActivityPlot = ({
                 (timelineTick) => new Date(timelineTick.startDate)
               ),
               y: timeline.map((timelineTick) => timelineTick.numCaptures),
-              text: timeline.map((timelineTick) => timelineTick.tooltip),
-              hovertemplate: '%{text}<extra></extra>',
+              hovertemplate: 'Captures: %{y}<extra></extra>',
               fill: 'tozeroy',
               type: 'scatter',
               mode: 'lines',
@@ -62,8 +63,7 @@ export const ActivityPlot = ({
                 (timelineTick) => new Date(timelineTick.startDate)
               ),
               y: timeline.map((timelineTick) => timelineTick.avgDetections),
-              text: timeline.map((timelineTick) => timelineTick.tooltip),
-              hovertemplate: '%{text}<extra></extra>',
+              hovertemplate: 'Avg. detections: %{y}<extra></extra>',
               fill: 'tozeroy',
               type: 'scatter',
               mode: 'lines',
@@ -84,6 +84,7 @@ export const ActivityPlot = ({
               t: 0,
               pad: 0,
             },
+            hovermode: 'x unified',
             // y-axis for captures
             yaxis: {
               showgrid: false,
@@ -106,16 +107,26 @@ export const ActivityPlot = ({
               overlaying: 'y',
             },
             xaxis: {
+              fixedrange: true,
+              range: [new Date(session.startDate), new Date(session.endDate)],
+              showgrid: false,
               showline: false,
-              showgrid: true,
-              griddash: 'dot',
-              gridwidth: 1,
-              gridcolor: gridLineColor,
               showticklabels: false,
+              spikecolor: spikeColor,
+              spikethickness: -2,
+              ticktext: timeline.map((timelineTick) =>
+                getCompactTimespanString({
+                  date1: timelineTick.startDate,
+                  date2: timelineTick.endDate,
+                  options: {
+                    second: true,
+                  },
+                })
+              ),
+              tickvals: timeline.map(
+                (timelineTick) => new Date(timelineTick.startDate)
+              ),
               zeroline: false,
-              fixedrange: true,
-              range: [new Date(session.startDate), new Date(session.endDate)],
-              dtick: 3600000, // milliseconds in an hour
             },
             hoverlabel: {
               bgcolor: tooltipBgColor,
@@ -134,8 +145,17 @@ export const ActivityPlot = ({
           onClick={(data) => {
             const timelineTickIndex = data.points[0].pointIndex
             const timelineTick = timeline[timelineTickIndex]
-            if (timelineTick?.representativeCaptureId) {
-              setActiveCaptureId(timelineTick.representativeCaptureId)
+
+            if (!timelineTick) {
+              return
+            }
+
+            const captureId =
+              timelineTick.representativeCaptureId ??
+              findClosestCaptureId(timeline, timelineTick.startDate)
+
+            if (captureId) {
+              setActiveCaptureId(captureId)
             }
           }}
         />

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

@@ -60,16 +60,22 @@ export const SessionDetails = () => {
             <SessionInfo session={session} />
           </div>
         </Box>
-        {session.summaryData.map((summary, index) => (
-          <Box key={index}>
-            <Plot
-              title={summary.title}
-              data={summary.data}
-              orientation={summary.orientation}
-              type={summary.type}
-            />
-          </Box>
-        ))}
+        {session.summaryData.map((summary, index) => {
+          if (summary.data.x.length <= 1) {
+            return null
+          }
+
+          return (
+            <Box key={index}>
+              <Plot
+                title={summary.title}
+                data={summary.data}
+                orientation={summary.orientation}
+                type={summary.type}
+              />
+            </Box>
+          )
+        })}
       </PlotGrid>
     </div>
   )