Add event time filter to timeline

src/lib/components/lines-and-dots/end-time-interval.svelte

@@ -8,6 +8,7 @@
 
   export let workflow: WorkflowExecution;
   export let startTime: string | Timestamp;
+  export let overrideEndTime: string | undefined = undefined;
 
   let currentTime = Date.now();
 
@@ -16,29 +17,29 @@
     return currentTime + 1000;
   };
 
-  $: endTime = workflow?.endTime || rightNow();
+  $: endTime = overrideEndTime || workflow?.endTime || rightNow();
   $: duration = getMillisecondDuration({
     start: startTime,
     end: endTime,
     onlyUnderSecond: false,
   });
 
-  let endTimeInterval;
+  let endTimeInterval: ReturnType<typeof setInterval> | null = null;
 
   const clearEndTimeInterval = (endTime: string) => {
     if (endTime) {
-      clearInterval(endTimeInterval);
+      if (endTimeInterval) clearInterval(endTimeInterval);
       endTimeInterval = null;
     }
   };
 
-  const startStopInterval = (pauseLiveUpdates) => {
-    if (pauseLiveUpdates) {
-      clearInterval(endTimeInterval);
+  const startStopInterval = (pauseLiveUpdates: boolean) => {
+    if (pauseLiveUpdates || overrideEndTime) {
+      if (endTimeInterval) clearInterval(endTimeInterval);
       endTimeInterval = null;
     } else if (!endTimeInterval && (workflow.isRunning || workflow.isPaused)) {
       endTimeInterval = setInterval(() => {
         endTime = rightNow();
       }, 1000);
     }
   };
@@ -47,7 +48,7 @@
   $: startStopInterval($pauseLiveUpdates);
 
   onDestroy(() => {
-    clearInterval(endTimeInterval);
+    if (endTimeInterval) clearInterval(endTimeInterval);
     endTimeInterval = null;
     $pauseLiveUpdates = false;
   });

src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte

@@ -86,14 +86,16 @@
       onlyUnderSecond: false,
     });
 
+    const clampRatio = (r: number) => Math.max(0, Math.min(1, r));
+
     const points = group.eventList.map((event) => {
       const distance = getMillisecondDuration({
         start: startTime,
         end: event.eventTime,
         onlyUnderSecond: false,
       });
 
-      const ratio = distance / workflowDistance;
+      const ratio = clampRatio((distance ?? 0) / (workflowDistance ?? 1));
       return Math.round(ratio * timelineWidth) + gutter;
     });
 
@@ -104,7 +106,7 @@
         onlyUnderSecond: false,
       });
 
-      const ratio = distance / workflowDistance;
+      const ratio = clampRatio((distance ?? 0) / (workflowDistance ?? 1));
       const pausePoint = Math.round(ratio * timelineWidth) + gutter;
       points.push(pausePoint);
     }
@@ -239,7 +241,7 @@
         startPoint={[x, y]}
         endPoint={[canvasWidth - gutter, y]}
         category={pendingActivity
-          ? pendingActivity.attempt > 1
+          ? (pendingActivity.attempt ?? 0) > 1
             ? 'retry'
             : 'pending'
           : group.category}

src/lib/components/lines-and-dots/svg/timeline-graph.svelte

@@ -25,6 +25,8 @@
     viewportHeight: number | undefined;
     readOnly?: boolean;
     error?: boolean;
+    overrideStartTime?: string;
+    overrideEndTime?: string;
   }
 
   let {
@@ -35,6 +37,8 @@
     viewportHeight,
     readOnly = false,
     error = false,
+    overrideStartTime,
+    overrideEndTime,
   }: Props = $props();
 
   const { height, gutter, radius } = TimelineConfig;
@@ -59,7 +63,9 @@
   });
 
   const startTime = $derived(
-    (!isWorkflowDelayed(workflow) && firstStartTime) || workflow.startTime,
+    overrideStartTime ||
+      (!isWorkflowDelayed(workflow) && firstStartTime) ||
+      workflow.startTime,
   );
   const timelineHeight = $derived(
     Math.max(height * (filteredGroups.length + 2), 120) + expandedGroupHeight,
@@ -93,6 +99,7 @@
   <EndTimeInterval
     {workflow}
     {startTime}
+    {overrideEndTime}
     let:endTime
     let:duration
     let:currentTime