Show Summary on Pending Activities (#2729)

* Show summary on pending activities

* Fix sticky div blocking click, fix showing expanded row on readOnly, fix border

Author: Alex-Tideman

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

@@ -161,7 +161,7 @@
         </div>
       </div>
       {#if childWorkflowStartedEvent}
-        <div class="surface-primary px-4">
+        <div class="surface-primary p-4">
           <div class="font-medium leading-4 text-secondary">Child Workflow</div>
           {#key group.eventList.length}
             <GraphWidget
@@ -170,8 +170,8 @@
                 .workflowId}
               runId={childWorkflowStartedEvent.attributes.workflowExecution
                 .runId}
-              viewportHeight={200}
-              class="surface-primary overflow-x-hidden border border-subtle"
+              viewportHeight={320}
+              class="surface-primary overflow-x-hidden border border-b-0 border-subtle"
               onLoad={onDecode}
             />
           {/key}

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

@@ -113,40 +113,30 @@
       />
     {/if}
     {#if showText}
-      {#if pendingActivity}
-        {#key pendingActivity.attempt}
-          <Text
-            point={textPosition}
-            {textAnchor}
-            {backdrop}
-            backdropHeight={radius * 2}
-            config={TimelineConfig}
-            icon="retry"
-          >
-            {group?.displayName} • {translate('workflows.attempt')}
-            {pendingActivity.attempt} / {pendingActivity.maximumAttempts || '∞'}
-          </Text>
-        {/key}
-      {:else}
-        <MetadataDecoder
-          value={group?.userMetadata?.summary}
-          prefix={isActivityTaskScheduledEvent(group.initialEvent)
-            ? group?.displayName
-            : ''}
-          fallback={group?.displayName}
-          let:decodedValue
+      <MetadataDecoder
+        value={group?.userMetadata?.summary}
+        prefix={isActivityTaskScheduledEvent(group.initialEvent)
+          ? group?.displayName
+          : ''}
+        fallback={group?.displayName}
+        let:decodedValue
+      >
+        <Text
+          point={textPosition}
+          {textAnchor}
+          {backdrop}
+          backdropHeight={radius * 2}
+          config={TimelineConfig}
+          icon={pendingActivity ? 'retry' : undefined}
         >
-          <Text
-            point={textPosition}
-            {textAnchor}
-            {backdrop}
-            backdropHeight={radius * 2}
-            config={TimelineConfig}
-          >
-            {decodedValue}
-          </Text>
-        </MetadataDecoder>
-      {/if}
+          {#if pendingActivity}
+            {translate('workflows.attempt')}
+            {pendingActivity.attempt} / {pendingActivity.maximumAttempts || '∞'}
+            {'• '}
+          {/if}
+          {decodedValue}
+        </Text>
+      </MetadataDecoder>
     {/if}
     <Dot
       point={[x, y]}

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

@@ -66,7 +66,10 @@
   on:scroll={handleScroll}
 >
   <EndTimeInterval {workflow} {startTime} let:endTime let:duration>
-    <div class="sticky top-[120px]" class:invisible={!!$activeGroups.length}>
+    <div
+      class="pointer-events-none sticky top-[120px]"
+      class:invisible={!!$activeGroups.length}
+    >
       <div class="flex w-full justify-between text-xs">
         <p class="w-60 -translate-x-24 rotate-90">
           {formatDate(startTime, $timeFormat)}
@@ -118,7 +121,7 @@
             />
           {/key}
         {/if}
-        {#if $activeGroups.includes(group.id)}
+        {#if !readOnly && $activeGroups.includes(group.id)}
           <GroupDetailsRow y={y + 1.33 * radius} {group} {canvasWidth} />
         {/if}
       {/each}