From 570ca0f134a3bbdabef16df14a6badb3af2b4989 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Fri, 11 Oct 2024 17:27:07 -0600
Subject: [PATCH] Fix retry attempt text when textAnchor is end (#2381)

---
 .../components/lines-and-dots/svg/text.svelte |  4 ++--
 .../svg/timeline-graph-row.svelte             | 23 +++++++++++++++----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/lines-and-dots/svg/text.svelte b/src/lib/components/lines-and-dots/svg/text.svelte
index 7b1377fda..157d9f1ae 100644
--- a/src/lib/components/lines-and-dots/svg/text.svelte
+++ b/src/lib/components/lines-and-dots/svg/text.svelte
@@ -53,7 +53,7 @@
     name={icon}
     x={x - offset}
     y={y - 8}
-    class={dark ? 'text-black' : 'text-white'}
+    class={dark ? 'text-black' : !backdrop ? 'text-primary' : 'text-white'}
   />
 {/if}
 <text
@@ -75,7 +75,7 @@
     name={icon}
     x={x - offset}
     y={y - 8}
-    class={dark ? 'text-black' : 'text-white'}
+    class={dark ? 'text-black' : !backdrop ? 'text-primary' : 'text-white'}
   />
 {/if}
 
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
index 259facd58..e33ffe4ad 100644
--- a/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
+++ b/src/lib/components/lines-and-dots/svg/timeline-graph-row.svelte
@@ -9,6 +9,7 @@
 
   import {
     CategoryIcon,
+    textBackdropOffset,
     textBackdropOffsetWithIcon,
     TimelineConfig,
     timelineTextPosition,
@@ -30,11 +31,13 @@
   const { height, gutter, radius } = TimelineConfig;
 
   let textWidth = 0;
+  let retryAttemptTextWidth = 0;
 
   $: timelineWidth = canvasWidth - 2 * gutter;
   $: active = !activeGroups.length || activeGroups.includes(group.id);
   $: ({ pendingActivity } = group);
-  $: hasPendingActivity = isPendingActivity(pendingActivity);
+  $: showRetryAttempts =
+    isPendingActivity(pendingActivity) && pendingActivity.attempt > 1;
 
   const getDistancePointsAndPositions = (
     endTime: string | Date,
@@ -117,7 +120,14 @@
     {/if}
     {#if showText}
       <Text
-        point={textPosition}
+        point={[
+          showRetryAttempts && textAnchor === 'end'
+            ? textPosition[0] -
+              retryAttemptTextWidth -
+              textBackdropOffsetWithIcon
+            : textPosition[0],
+          textPosition[1],
+        ]}
         {textAnchor}
         {backdrop}
         backdropHeight={radius * 2}
@@ -127,10 +137,12 @@
         {group?.displayName}
       </Text>
     {/if}
-    {#if hasPendingActivity && pendingActivity.attempt > 1}
+    {#if showRetryAttempts}
       <Text
         point={[
-          textPosition[0] + textWidth + textBackdropOffsetWithIcon,
+          textAnchor === 'end'
+            ? textPosition[0] - retryAttemptTextWidth - textBackdropOffset
+            : textPosition[0] + textWidth + textBackdropOffsetWithIcon,
           textPosition[1],
         ]}
         textAnchor="start"
@@ -140,7 +152,8 @@
         icon="retry"
         status="retry"
         noOffset
-        dark
+        dark={backdrop}
+        bind:textWidth={retryAttemptTextWidth}
       >
         {translate('workflows.retry')}
         {pendingActivity.attempt} / {pendingActivity.maximumAttempts || '∞'}