refactor(report): improve report summary

apps/client/src/features/rundown/rundown-event/composite/RundownEventChip.tsx

@@ -6,6 +6,7 @@ import { IoCheckmarkCircle } from 'react-icons/io5';
 import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import useReport from '../../../../common/hooks-query/useReport';
 import { usePlayback } from '../../../../common/hooks/useSocket';
+import { getEventVariance } from '../../../../common/utils/report';
 import { cx } from '../../../../common/utils/styleUtils';
 import { formatDuration, useTimeUntilExpectedStart } from '../../../../common/utils/time';
 
@@ -20,7 +21,6 @@ interface RundownEventChipProps {
   isLoaded: boolean;
   className: string;
   totalGap: number;
-  duration: number;
   isLinkedToLoaded: boolean;
 }
 
@@ -33,7 +33,6 @@ export default function RundownEventChip({
   className,
   totalGap,
   id,
-  duration,
   isLinkedToLoaded,
 }: RundownEventChipProps) {
   const playback = usePlayback();
@@ -45,25 +44,20 @@ export default function RundownEventChip({
   const playbackActive = isPlaybackActive(playback);
 
   if (!playbackActive || isPast) {
-    return <EventReport className={className} id={id} duration={duration} />;
+    return <EventReport className={className} id={id} />;
   }
 
-  if (playbackActive) {
-    // we extracted the component to avoid unnecessary calculations and re-renders
-    return (
-      <Tooltip text='Expected time until start' render={<span />} className={className}>
-        <EventUntil
-          timeStart={timeStart}
-          delay={delay}
-          dayOffset={dayOffset}
-          totalGap={totalGap}
-          isLinkedToLoaded={isLinkedToLoaded}
-        />
-      </Tooltip>
-    );
-  }
-
-  return null;
+  return (
+    <Tooltip text='Expected time until start' render={<span />} className={className}>
+      <EventUntil
+        timeStart={timeStart}
+        delay={delay}
+        dayOffset={dayOffset}
+        totalGap={totalGap}
+        isLinkedToLoaded={isLinkedToLoaded}
+      />
+    </Tooltip>
+  );
 }
 
 interface EventUntilProps {
@@ -86,41 +80,30 @@ function EventUntil({ timeStart, delay, dayOffset, totalGap, isLinkedToLoaded }:
 interface EventReportProps {
   className: string;
   id: string;
-  duration: number;
 }
 
-function EventReport(props: EventReportProps) {
-  const { className, id, duration } = props;
+function EventReport({ className, id }: EventReportProps) {
   const { data } = useReport();
   const currentReport = data[id];
 
   const [value, overUnderStyle, tooltip] = useMemo(() => {
-    if (!currentReport) {
+    // Use the schedule recorded when the event ran so later rundown edits do
+    // not change its report.
+    const variance = getEventVariance(currentReport);
+    if (variance.status === 'not-run') {
       return [null, 'none', ''];
     }
 
-    const { startedAt, endedAt } = currentReport;
-    if (!startedAt || !endedAt) {
-      return [null, 'none', ''];
-    }
-
-    const actualDuration = endedAt - startedAt;
-    const difference = actualDuration - duration;
-    const absDifference = Math.abs(difference);
-
-    if (absDifference < MILLIS_PER_SECOND) {
+    if (variance.status === 'ontime') {
       return ['ontime', 'under', 'Event finished on time'];
     }
 
-    const isOver = difference > 0;
-
-    const fullTimeValue = millisToString(absDifference);
-
-    const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${fullTimeValue}`;
-
+    const absDifference = Math.abs(variance.delta);
+    const isOver = variance.status === 'over';
+    const tooltip = `Event ran ${isOver ? 'over' : 'under'} time by ${millisToString(absDifference)}`;
     const value = `${isOver ? '+' : '-'}${formatDuration(absDifference, absDifference > 2 * MILLIS_PER_MINUTE)}`;
-    return [value, isOver ? 'over' : 'under', tooltip];
-  }, [currentReport, duration]);
+    return [value, variance.status, tooltip];
+  }, [currentReport]);
 
   if (!value) {
     return null;