Fix pending activity text in timeline (#2392)

* Revert offset for Text component * Update copy in Text for pending activity so UI updates accordingly
temporalio · Oct 15, 2024 · 8e3486f · 8e3486f
1 parent 6eb3c15
commit 8e3486f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 84 deletions.
diff --git a/src/lib/components/lines-and-dots/constants.ts b/src/lib/components/lines-and-dots/constants.ts
@@ -69,11 +69,6 @@ export const CategoryIcon: Record<EventTypeCategory, IconName> = {
   other: 'terminal',
 };
 
-export const textBackdropOffsetWithIcon = 36;
-export const textBackdropOffset = 12;
-
-export const getTextOffset = (radius: number) => 1.5 * radius;
-
 export const timelineTextPosition = (
   points: number[],
   y: number,
@@ -95,7 +90,7 @@ export const timelineTextPosition = (
   if (textToLeft) textAnchor = 'end';
   if (textToRight) textIndex = points.indexOf(lastPoint);
 
-  const offset = getTextOffset(radius);
+  const offset = 1.5 * radius;
   let textX = textToRight ? lastPoint + offset : firstPoint - offset;
 
   // Pending or long events

diff --git a/src/lib/components/lines-and-dots/svg/text.svelte b/src/lib/components/lines-and-dots/svg/text.svelte
@@ -2,12 +2,7 @@
   import type { IconName } from '$lib/holocene/icon';
   import Icon from '$lib/holocene/icon/icon.svelte';
 
-  import {
-    getTextOffset,
-    type GraphConfig,
-    textBackdropOffset,
-    textBackdropOffsetWithIcon,
-  } from '../constants';
+  import type { GraphConfig } from '../constants';
 
   import Line from './line.svelte';
 
@@ -22,22 +17,15 @@
   export let icon: IconName | undefined = undefined;
   export let config: GraphConfig | undefined = undefined;
   export let label = false;
-  export let textWidth = 0;
-  export let noOffset = false;
-  export let dark = false;
 
   $: [x, y] = point;
 
   let textElement: SVGTextElement;
 
   $: showIcon = icon && config;
   $: textWidth = textElement?.getBBox()?.width || 0;
-  $: backdropWidth =
-    showIcon && !noOffset
-      ? textWidth + textBackdropOffsetWithIcon
-      : textWidth + textBackdropOffset;
+  $: backdropWidth = showIcon ? textWidth + 36 : textWidth + 12;
   $: textX = showIcon && textAnchor === 'start' ? x + config.radius * 2 : x;
-  $: offset = noOffset ? getTextOffset(config.radius || 0) : 0;
 </script>
 
 {#if backdrop}
@@ -48,36 +36,27 @@
     strokeWidth={backdropHeight}
   />
 {/if}
-{#if showIcon && textAnchor === 'start'}
+{#if showIcon}
   <Icon
     name={icon}
-    x={x - offset}
+    x={textAnchor === 'end' ? x - textWidth - backdropHeight : x}
     y={y - 8}
-    class={dark ? 'text-black' : !backdrop ? 'text-primary' : 'text-white'}
+    class={!backdrop ? 'text-primary' : 'text-white'}
   />
 {/if}
 <text
   bind:this={textElement}
   class="cursor-pointer select-none outline-none {category} text-primary"
   class:label
   class:backdrop
-  class:dark
-  x={textX - offset}
+  x={textX}
   {y}
   font-size={fontSize}
   font-weight={fontWeight}
   text-anchor={textAnchor}
 >
   <slot />
 </text>
-{#if showIcon && textAnchor === 'end'}
-  <Icon
-    name={icon}
-    x={x - offset}
-    y={y - 8}
-    class={dark ? 'text-black' : !backdrop ? 'text-primary' : 'text-white'}
-  />
-{/if}
 
 <style lang="postcss">
   text {
@@ -131,7 +110,6 @@
     fill: #ff4518;
   }
 
-  text.dark,
   text.none {
     fill: theme('colors.space-black');
   }

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
@@ -5,12 +5,9 @@
   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,
-    textBackdropOffset,
-    textBackdropOffsetWithIcon,
     TimelineConfig,
     timelineTextPosition,
   } from '../constants';
@@ -30,14 +27,9 @@
 
   const { height, gutter, radius } = TimelineConfig;
 
-  let textWidth = 0;
-  let retryAttemptTextWidth = 0;
-
   $: timelineWidth = canvasWidth - 2 * gutter;
   $: active = !activeGroups.length || activeGroups.includes(group.id);
-  $: ({ pendingActivity } = group);
-  $: showRetryAttempts =
-    isPendingActivity(pendingActivity) && pendingActivity.attempt > 1;
+  $: pendingActivity = group?.pendingActivity;
 
   const getDistancePointsAndPositions = (
     endTime: string | Date,
@@ -108,8 +100,8 @@
       <Line
         startPoint={[x, y]}
         endPoint={[canvasWidth - gutter, y]}
-        category={group?.pendingActivity
-          ? group?.pendingActivity.attempt > 1
+        category={pendingActivity
+          ? pendingActivity.attempt > 1
             ? 'retry'
             : 'pending'
           : group.category}
@@ -119,45 +111,31 @@
       />
     {/if}
     {#if showText}
-      <Text
-        point={[
-          showRetryAttempts && textAnchor === 'end'
-            ? textPosition[0] -
-              retryAttemptTextWidth -
-              textBackdropOffsetWithIcon
-            : textPosition[0],
-          textPosition[1],
-        ]}
-        {textAnchor}
-        {backdrop}
-        backdropHeight={radius * 2}
-        config={TimelineConfig}
-        bind:textWidth
-      >
-        {group?.displayName}
-      </Text>
-    {/if}
-    {#if showRetryAttempts}
-      <Text
-        point={[
-          textAnchor === 'end'
-            ? textPosition[0] - retryAttemptTextWidth - textBackdropOffset
-            : textPosition[0] + textWidth + textBackdropOffsetWithIcon,
-          textPosition[1],
-        ]}
-        textAnchor="start"
-        {backdrop}
-        backdropHeight={radius * 2}
-        config={TimelineConfig}
-        icon="retry"
-        status="retry"
-        noOffset
-        dark={backdrop}
-        bind:textWidth={retryAttemptTextWidth}
-      >
-        {translate('workflows.retry')}
-        {pendingActivity.attempt} / {pendingActivity.maximumAttempts || '∞'}
-      </Text>
+      {#if pendingActivity}
+        {#key pendingActivity.attempt}
+          <Text
+            point={textPosition}
+            {textAnchor}
+            {backdrop}
+            backdropHeight={radius * 2}
+            config={TimelineConfig}
+            icon="retry"
+          >
+            {group?.displayName} • {translate('workflows.retry')}
+            {pendingActivity.attempt} / {pendingActivity.maximumAttempts || '∞'}
+          </Text>
+        {/key}
+      {:else}
+        <Text
+          point={textPosition}
+          {textAnchor}
+          {backdrop}
+          backdropHeight={radius * 2}
+          config={TimelineConfig}
+        >
+          {group?.displayName}
+        </Text>
+      {/if}
     {/if}
     <Dot
       point={[x, y]}