refactor: rename TimelineStatistics to RouteStatistics (commaai#527)

Author: incognitojam

src/api/derived.ts

@@ -70,7 +70,7 @@ type UserFlagTimelineEvent = {
 
 export type TimelineEvent = EngagedTimelineEvent | AlertTimelineEvent | OverridingTimelineEvent | UserFlagTimelineEvent
 
-export interface TimelineStatistics {
+export interface RouteStatistics {
   duration: number
   engagedDuration: number
   userFlags: number
@@ -189,7 +189,7 @@ const generateTimelineEvents = (route: Route, events: DriveEvent[]): TimelineEve
 export const getTimelineEvents = (route: Route): Promise<TimelineEvent[]> =>
   getDriveEvents(route).then((events) => generateTimelineEvents(route, events))
 
-export const generateTimelineStatistics = (route: Route | undefined, timeline: TimelineEvent[]): TimelineStatistics => {
+export const generateRouteStatistics = (route: Route | undefined, timeline: TimelineEvent[]): RouteStatistics => {
   let engagedDuration = 0
   let userFlags = 0
   timeline.forEach((ev) => {
@@ -207,5 +207,5 @@ export const generateTimelineStatistics = (route: Route | undefined, timeline: T
   }
 }
 
-export const getTimelineStatistics = async (route: Route): Promise<TimelineStatistics> =>
-  getTimelineEvents(route).then((timeline) => generateTimelineStatistics(route, timeline))
+export const getRouteStatistics = async (route: Route): Promise<RouteStatistics> =>
+  getTimelineEvents(route).then((timeline) => generateRouteStatistics(route, timeline))

src/components/RouteStatistics.tsx src/components/RouteStatisticsBar.tsxsrc/components/RouteStatistics.tsx renamed to src/components/RouteStatisticsBar.tsx

@@ -1,27 +1,29 @@
 import type { VoidComponent } from 'solid-js'
 
-import type { TimelineStatistics } from '~/api/derived'
+import type { RouteStatistics } from '~/api/derived'
 import type { Route } from '~/api/types'
 import { formatDistance, formatRouteDuration } from '~/utils/format'
 import StatisticBar from './StatisticBar'
 
-const formatEngagement = (timeline: TimelineStatistics | undefined): string | undefined => {
-  if (!timeline || timeline.duration === 0) return undefined
-  const { engagedDuration, duration } = timeline
+const formatEngagement = (statistics: RouteStatistics | undefined): string | undefined => {
+  if (!statistics || statistics.duration === 0) return undefined
+  const { engagedDuration, duration } = statistics
   return `${(100 * (engagedDuration / duration)).toFixed(0)}%`
 }
 
-const RouteStatistics: VoidComponent<{ class?: string; route: Route | undefined; timeline: TimelineStatistics | undefined }> = (props) => {
+const RouteStatisticsBar: VoidComponent<{ class?: string; route: Route | undefined; statistics: RouteStatistics | undefined }> = (
+  props,
+) => {
   return (
     <StatisticBar
       class={props.class}
       statistics={[
         { label: 'Distance', value: () => formatDistance(props.route?.length) },
         { label: 'Duration', value: () => (props.route ? formatRouteDuration(props.route) : undefined) },
-        { label: 'Engaged', value: () => formatEngagement(props.timeline) },
+        { label: 'Engaged', value: () => formatEngagement(props.statistics) },
       ]}
     />
   )
 }
 
-export default RouteStatistics
+export default RouteStatisticsBar

src/pages/dashboard/activities/RouteActivity.tsx

@@ -10,11 +10,11 @@ import IconButton from '~/components/material/IconButton'
 import TopAppBar from '~/components/material/TopAppBar'
 import RouteActions from '~/components/RouteActions'
 import RouteStaticMap from '~/components/RouteStaticMap'
-import RouteStatistics from '~/components/RouteStatistics'
+import RouteStatisticsBar from '~/components/RouteStatisticsBar'
 import RouteVideoPlayer from '~/components/RouteVideoPlayer'
 import RouteUploadButtons from '~/components/RouteUploadButtons'
 import Timeline from '~/components/Timeline'
-import { generateTimelineStatistics, getTimelineEvents } from '~/api/derived'
+import { generateRouteStatistics, getTimelineEvents } from '~/api/derived'
 import { A } from '@solidjs/router'
 
 type RouteActivityProps = {
@@ -36,9 +36,9 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
 
   // FIXME: generateTimelineStatistics is given different versions of TimelineEvents multiple times, leading to stuttering engaged % on switch
   const [events] = createResource(route, getTimelineEvents, { initialValue: [] })
-  const [timeline] = createResource(
+  const [statistics] = createResource(
     () => [route(), events()] as const,
-    ([r, e]) => generateTimelineStatistics(r, e),
+    ([r, e]) => generateRouteStatistics(r, e),
   )
 
   const onTimelineChange = (newTime: number) => {
@@ -85,7 +85,7 @@ const RouteActivity: VoidComponent<RouteActivityProps> = (props) => {
         <div class="flex flex-col gap-2">
           <span class="text-label-md uppercase">Route Info</span>
           <div class="flex flex-col rounded-md overflow-hidden bg-surface-container">
-            <RouteStatistics class="p-5" route={route()} timeline={timeline()} />
+            <RouteStatisticsBar class="p-5" route={route()} statistics={statistics()} />
 
             <RouteActions routeName={routeName()} route={route()} />
           </div>

src/pages/dashboard/components/RouteList.tsx

@@ -6,10 +6,10 @@ dayjs.extend(utc)
 dayjs.extend(timezone)
 
 import { fetcher } from '~/api'
-import { getTimelineStatistics } from '~/api/derived'
+import { getRouteStatistics } from '~/api/derived'
 import Card, { CardContent, CardHeader } from '~/components/material/Card'
 import Icon from '~/components/material/Icon'
-import RouteStatistics from '~/components/RouteStatistics'
+import RouteStatisticsBar from '~/components/RouteStatisticsBar'
 import { getPlaceName } from '~/map/geocode'
 import type { Route } from '~/api/types'
 import { dateTimeToColorBetween } from '~/utils/format'
@@ -22,7 +22,7 @@ const RouteCard: VoidComponent<RouteCardProps> = (props) => {
   const startTime = () => dayjs.utc(props.route.start_time).local()
   const endTime = () => dayjs.utc(props.route.end_time).local()
   const color = () => dateTimeToColorBetween(startTime().toDate(), endTime().toDate(), [30, 57, 138], [218, 161, 28])
-  const [timeline] = createResource(() => props.route, getTimelineStatistics)
+  const [statistics] = createResource(() => props.route, getRouteStatistics)
   const [location] = createResource(async () => {
     const startPos = [props.route.start_lng || 0, props.route.start_lat || 0]
     const endPos = [props.route.end_lng || 0, props.route.end_lat || 0]
@@ -45,7 +45,7 @@ const RouteCard: VoidComponent<RouteCardProps> = (props) => {
         subhead={<Suspense fallback={<div class="h-[20px] w-auto skeleton-loader rounded-xs" />}>{location()}</Suspense>}
         trailing={
           <Suspense>
-            <Show when={timeline()?.userFlags}>
+            <Show when={statistics()?.userFlags}>
               <div class="flex items-center justify-center rounded-full p-1 border-amber-300 border-2">
                 <Icon class="text-yellow-300" size="24" name="flag" filled />
               </div>
@@ -55,7 +55,7 @@ const RouteCard: VoidComponent<RouteCardProps> = (props) => {
       />
 
       <CardContent>
-        <RouteStatistics route={props.route} timeline={timeline()} />
+        <RouteStatisticsBar route={props.route} statistics={statistics()} />
       </CardContent>
       <div class="h-2.5 w-full" style={{ background: color() }} />
     </Card>