Add pending activity attempt count to timeline row

temporalio · Oct 7, 2024 · db78cf6 · db78cf6
1 parent 9996963
commit db78cf6
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/src/lib/components/lines-and-dots/svg/text.svelte b/src/lib/components/lines-and-dots/svg/text.svelte
@@ -8,6 +8,7 @@
 
   export let point: [number, number] = [0, 0];
   export let category: string | undefined = undefined;
+  export let status: string | undefined = 'none';
   export let fontSize = '14px';
   export let fontWeight = '400';
   export let textAnchor = 'start';
@@ -16,34 +17,37 @@
   export let icon: IconName | undefined = undefined;
   export let config: GraphConfig | undefined = undefined;
   export let label = false;
+  export let textWidth = 0;
+  export let noOffset = false;
 
   $: [x, y] = point;
 
   let textElement: SVGTextElement;
 
   $: showIcon = icon && config;
   $: textWidth = textElement?.getBBox()?.width || 0;
-  $: backdropWidth = showIcon ? textWidth + 36 : textWidth + 12;
+  $: backdropWidth = showIcon && !noOffset ? textWidth + 36 : textWidth + 12;
   $: textX = showIcon && textAnchor === 'start' ? x + config.radius * 2 : x;
+  $: offset = noOffset ? config.radius * 1.5 : 0;
 </script>
 
 {#if backdrop}
   <Line
     startPoint={[x - backdropHeight, y]}
     endPoint={[x + backdropWidth, y]}
-    status="none"
+    {status}
     strokeWidth={backdropHeight}
   />
 {/if}
 {#if showIcon && textAnchor === 'start'}
-  <Icon name={icon} {x} y={y - 8} class="text-white" />
+  <Icon name={icon} x={x - offset} y={y - 8} class="text-white" />
 {/if}
 <text
   bind:this={textElement}
   class="cursor-pointer select-none outline-none {category} text-primary"
   class:label
   class:backdrop
-  x={textX}
+  x={textX - offset}
   {y}
   font-size={fontSize}
   font-weight={fontWeight}
@@ -52,12 +56,7 @@
   <slot />
 </text>
 {#if showIcon && textAnchor === 'end'}
-  <Icon
-    name={icon}
-    x={x - textWidth - config.radius * 1.5}
-    y={y - 8}
-    class="text-white"
-  />
+  <Icon name={icon} x={x - offset} y={y - 8} class="text-white" />
 {/if}
 
 <style lang="postcss">

diff --git a/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte b/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
@@ -4,6 +4,7 @@
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import { setActiveGroup } from '$lib/stores/active-events';
   import { getMillisecondDuration } from '$lib/utilities/format-time';
+  import { isPendingActivity } from '$lib/utilities/is-pending-activity';
 
   import {
     CategoryIcon,
@@ -26,8 +27,12 @@
 
   const { height, gutter, radius } = TimelineConfig;
 
+  let textWidth = 0;
+
   $: timelineWidth = canvasWidth - 2 * gutter;
   $: active = !activeGroups.length || activeGroups.includes(group.id);
+  $: ({ pendingActivity } = group);
+  $: hasPendingActivity = isPendingActivity(pendingActivity);
 
   const getDistancePointsAndPositions = (
     endTime: string | Date,
@@ -115,10 +120,25 @@
         {backdrop}
         backdropHeight={radius * 2}
         config={TimelineConfig}
+        bind:textWidth
       >
         {group?.displayName}
       </Text>
     {/if}
+    {#if hasPendingActivity}
+      <Text
+        point={[textPosition[0] + textWidth + 36, textPosition[1]]}
+        textAnchor="start"
+        {backdrop}
+        backdropHeight={radius * 2}
+        config={TimelineConfig}
+        icon="retry"
+        status="retry"
+        noOffset
+      >
+        {pendingActivity.attempt} / {pendingActivity.maximumAttempts || '∞'}
+      </Text>
+    {/if}
     <Dot
       point={[x, y]}
       classification={group.eventList[index]?.classification}