Show current duration for pending timeline events (#3346)

* Show current duration for running timeline events

* Switch to use endTime

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

Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io>

---------

Co-authored-by: Laura Whitaker <laura.whitaker@temporal.io>

Author: Alex-Tideman

src/lib/components/event/event-summary-row.svelte

@@ -21,6 +21,7 @@
   import { isCloud } from '$lib/stores/advanced-visibility';
   import type { IterableEvent, WorkflowEvent } from '$lib/types/events';
   import { decodeLocalActivity } from '$lib/utilities/decode-local-activity';
+  import { formatEventGroupDuration } from '$lib/utilities/event-group-duration';
   import { spaceBetweenCapitalLetters } from '$lib/utilities/format-camel-case';
   import { formatAttributes } from '$lib/utilities/format-event-attributes';
   import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
@@ -97,9 +98,8 @@
 
   const duration = $derived(
     isEventGroup(event)
-      ? formatDistanceAbbreviated({
-          start: event.initialEvent?.eventTime,
-          end: event.lastEvent?.eventTime,
+      ? formatEventGroupDuration({
+          group: event,
           includeMillisecondsForUnderSecond: true,
         })
       : '',

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

@@ -9,10 +9,11 @@
   export let workflow: WorkflowExecution;
   export let startTime: string | Timestamp;
 
+  let currentTime = Date.now();
+
   const rightNow = () => {
-    const now = new Date();
-    now.setSeconds(now.getSeconds() + 1);
-    return now;
+    currentTime = Date.now();
+    return currentTime + 1000;
   };
 
   $: endTime = workflow?.endTime || rightNow();
@@ -52,4 +53,4 @@
   });
 </script>
 
-<slot {endTime} {duration} />
+<slot {endTime} {duration} {currentTime} />

src/lib/components/lines-and-dots/svg/group-details-row.svelte

@@ -10,13 +10,14 @@
   import { translate } from '$lib/i18n/translate';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import { activeGroupHeight, setActiveGroup } from '$lib/stores/active-events';
-  import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
+  import { formatEventGroupDuration } from '$lib/utilities/event-group-duration';
   import { isChildWorkflowExecutionStartedEvent } from '$lib/utilities/is-event-type';
 
   import GraphWidget from './graph-widget.svelte';
 
   export let group: EventGroup;
   export let canvasWidth: number;
+  export let endTime: string | Date | number = Date.now();
   export let x = 0;
   export let y: number;
 
@@ -37,9 +38,9 @@
   $: childWorkflowStartedEvent =
     group && group.eventList.find(isChildWorkflowExecutionStartedEvent);
 
-  $: duration = formatDistanceAbbreviated({
-    start: group?.initialEvent?.eventTime,
-    end: group?.lastEvent?.eventTime,
+  $: duration = formatEventGroupDuration({
+    group,
+    endTime,
     includeMilliseconds: true,
   });
 

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

@@ -34,7 +34,7 @@
     y: number;
     group: EventGroup;
     startTime: string | Timestamp;
-    endTime: string | Date;
+    endTime: string | Date | number;
     canvasWidth: number;
     readOnly: boolean;
   };
@@ -76,7 +76,7 @@
   });
 
   const getDistancePointsAndPositions = (
-    endTime: string | Date,
+    endTime: string | Date | number,
     timelineWidth: number,
     y: number,
   ) => {

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

@@ -64,7 +64,13 @@
   style={viewportHeight ? `max-height: ${viewportHeight}px;` : ''}
   on:scroll={handleScroll}
 >
-  <EndTimeInterval {workflow} {startTime} let:endTime let:duration>
+  <EndTimeInterval
+    {workflow}
+    {startTime}
+    let:endTime
+    let:duration
+    let:currentTime
+  >
     <div
       class="pointer-events-none sticky top-[120px]"
       class:invisible={!!$activeGroups.length}
@@ -120,7 +126,12 @@
           {/key}
         {/if}
         {#if !readOnly && $activeGroups.includes(group.id)}
-          <GroupDetailsRow y={y + 1.33 * radius} {group} {canvasWidth} />
+          <GroupDetailsRow
+            y={y + 1.33 * radius}
+            {group}
+            {canvasWidth}
+            endTime={workflow?.endTime ? endTime : currentTime}
+          />
         {/if}
       {/each}
     </svg>

src/lib/utilities/event-group-duration.test.ts

@@ -0,0 +1,118 @@
+import { describe, expect, it } from 'vitest';
+
+import type { EventGroup } from '$lib/models/event-groups/event-groups';
+
+import {
+  eventGroupUsesCurrentDuration,
+  formatEventGroupDuration,
+  getEventGroupDurationEnd,
+} from './event-group-duration';
+
+const event = (id: string, eventTime: string) => ({ id, eventTime });
+
+const group = ({
+  initialEvent = event('1', '2026-04-28T10:00:00Z'),
+  lastEvent = event('2', '2026-04-28T10:05:00Z'),
+  isPending = false,
+  pendingActivity = undefined,
+  pendingNexusOperation = undefined,
+}: Partial<EventGroup> = {}): EventGroup =>
+  ({
+    initialEvent,
+    lastEvent,
+    isPending,
+    pendingActivity,
+    pendingNexusOperation,
+  }) as EventGroup;
+
+describe('eventGroupUsesCurrentDuration', () => {
+  it('uses the current time for pending activity groups', () => {
+    const pendingActivityGroup = group({
+      isPending: true,
+      pendingActivity: {
+        activityId: 'activity-id',
+      } as EventGroup['pendingActivity'],
+    });
+
+    expect(eventGroupUsesCurrentDuration(pendingActivityGroup)).toBe(true);
+  });
+
+  it('uses the current time for pending Nexus operation groups', () => {
+    const pendingNexusGroup = group({
+      isPending: true,
+      pendingNexusOperation: {
+        scheduledEventId: '1',
+      } as EventGroup['pendingNexusOperation'],
+    });
+
+    expect(eventGroupUsesCurrentDuration(pendingNexusGroup)).toBe(true);
+  });
+
+  it('does not use the current time for closed groups', () => {
+    expect(eventGroupUsesCurrentDuration(group())).toBe(false);
+  });
+
+  it('does not use the current time for pending non-activity groups', () => {
+    expect(eventGroupUsesCurrentDuration(group({ isPending: true }))).toBe(
+      false,
+    );
+  });
+});
+
+describe('getEventGroupDurationEnd', () => {
+  it('returns the last event time for closed groups', () => {
+    const closedGroup = group();
+
+    expect(getEventGroupDurationEnd(closedGroup, '2026-04-28T10:20:00Z')).toBe(
+      closedGroup.lastEvent.eventTime,
+    );
+  });
+
+  it('returns the current time for pending activity and Nexus groups', () => {
+    const endTime = '2026-04-28T10:20:00Z';
+
+    expect(
+      getEventGroupDurationEnd(
+        group({
+          isPending: true,
+          pendingActivity: {
+            activityId: 'activity-id',
+          } as EventGroup['pendingActivity'],
+        }),
+        endTime,
+      ),
+    ).toBe(endTime);
+
+    expect(
+      getEventGroupDurationEnd(
+        group({
+          isPending: true,
+          pendingNexusOperation: {
+            scheduledEventId: '1',
+          } as EventGroup['pendingNexusOperation'],
+        }),
+        endTime,
+      ),
+    ).toBe(endTime);
+  });
+});
+
+describe('formatEventGroupDuration', () => {
+  it('formats closed groups from scheduled event time to last event time', () => {
+    expect(formatEventGroupDuration({ group: group() })).toBe('5m');
+  });
+
+  it('formats pending activity groups from scheduled event time to current time', () => {
+    expect(
+      formatEventGroupDuration({
+        group: group({
+          isPending: true,
+          pendingActivity: {
+            activityId: 'activity-id',
+          } as EventGroup['pendingActivity'],
+        }),
+        endTime: '2026-04-28T10:20:00Z',
+      }),
+    ).toBe('20m');
+  });
+});

src/lib/utilities/event-group-duration.ts

@@ -0,0 +1,39 @@
+import type { EventGroup } from '$lib/models/event-groups/event-groups';
+
+import { formatDistanceAbbreviated, type ValidTime } from './format-time';
+
+export const eventGroupUsesCurrentDuration = (
+  group: EventGroup | undefined,
+): boolean => {
+  return Boolean(
+    group?.isPending && (group.pendingActivity || group.pendingNexusOperation),
+  );
+};
+
+export const getEventGroupDurationEnd = (
+  group: EventGroup | undefined,
+  endTime: ValidTime = new Date(),
+): ValidTime | null | undefined => {
+  if (!group) return undefined;
+  if (eventGroupUsesCurrentDuration(group)) return endTime;
+  return group.lastEvent?.eventTime;
+};
+
+export const formatEventGroupDuration = ({
+  group,
+  endTime,
+  includeMilliseconds = false,
+  includeMillisecondsForUnderSecond = false,
+}: {
+  group: EventGroup | undefined;
+  endTime?: ValidTime;
+  includeMilliseconds?: boolean;
+  includeMillisecondsForUnderSecond?: boolean;
+}): string => {
+  return formatDistanceAbbreviated({
+    start: group?.initialEvent?.eventTime,
+    end: getEventGroupDurationEnd(group, endTime),
+    includeMilliseconds,
+    includeMillisecondsForUnderSecond,
+  });
+};