Improve ux of compact view left side links (#969)

* Remove first line of event data and hug chevron to event type

* Change row hover to gradient

* Update active row and pill bg color

* Update badge

* Make event group details a table

* Set default selected group to most recent event

* Account for icons with truncated word

* Show event group events in descending order

src/global.d.ts

@@ -119,6 +119,7 @@ type DataEncoderStatus = 'notRequested' | 'success' | 'error';
 
 type Color =
   | 'blue'
+  | 'lightBlue'
   | 'blueGray'
   | 'gray'
   | 'orange'

src/lib/components/event/event-detail-pills.svelte

@@ -5,7 +5,6 @@
     AttributeGrouping,
   } from '$lib/utilities/format-event-attributes';
   import Pill from '$lib/components/pill.svelte';
-  import { count } from 'console';
 
   export let attributeGrouping: AttributeGrouping;
   export let activePill: string;
@@ -24,11 +23,12 @@
   <div class="p-2 text-center xl:text-left">
     <div class="pill-container">
       {#each Object.entries(attributeGrouping) as [key, value] (key)}
+        {@const active = activePill === key}
         {#if value.length}
           <Pill
-            active={activePill === key}
+            {active}
             on:click={() => dispatch('pillChange', { key })}
-            color={attributeGroupingProperties[key].color}
+            color={active ? 'lightBlue' : 'gray'}
             >{attributeGroupingProperties[key].label}</Pill
           >
         {/if}

src/lib/components/event/event-details-row-expanded.svelte

@@ -119,6 +119,6 @@
     @apply border-b-0;
   }
   .badge {
-    @apply bg-gray-300 text-gray-700;
+    @apply rounded-sm bg-gray-100 p-1 text-gray-900;
   }
 </style>

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

@@ -106,6 +106,6 @@
 
 <style lang="postcss">
   .badge {
-    @apply bg-gray-300;
+    @apply rounded-sm bg-gray-100 p-1 text-gray-900;
   }
 </style>

src/lib/components/event/event-group-details.svelte

@@ -11,47 +11,57 @@
   export let onGroupClick: (id: string) => void;
 </script>
 
-<div
-  class="block max-h-full w-full flex-col border-gray-200 p-4 lg:flex lg:w-1/3 lg:border-r-2"
->
-  <ul class="gap-2">
-    {#each [...eventGroup.events] as [id, eventInGroup] (id)}
-      <li on:click|preventDefault|stopPropagation={() => onGroupClick(id)}>
-        <div class="flex gap-2">
-          <span class="mx-1 text-gray-500">{id}</span>
-          <span
-            class="event-type"
-            class:active={id === selectedId}
+<div class="w-full border-gray-700 lg:w-1/3 lg:border-r-2">
+  <table class="w-full table-fixed">
+    {#each [...eventGroup.events].reverse() as [id, eventInGroup] (id)}
+      <tr
+        class="row"
+        class:active={id === selectedId}
+        on:click|preventDefault|stopPropagation={() => onGroupClick(id)}
+      >
+        <td class="cell hidden w-12 py-1 px-3 text-left xl:table-cell">
+          <span class="mx-1 text-sm text-gray-500 md:text-base">{id}</span>
+        </td>
+        <td class="cell flex px-3 pt-1 pb-0 text-left xl:table-cell">
+          <span class="mx-1 text-sm text-gray-500 md:text-base xl:hidden"
+            >{id}</span
+          >
+          <p
+            class="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm md:text-base"
             class:failure={eventOrGroupIsFailureOrTimedOut(eventInGroup)}
             class:canceled={eventOrGroupIsCanceled(eventInGroup)}
             class:terminated={eventOrGroupIsTerminated(eventInGroup)}
-            >{isLocalActivityMarkerEvent(eventInGroup)
-              ? 'LocalActivity'
-              : eventInGroup.eventType}</span
           >
-        </div>
-      </li>
+            {isLocalActivityMarkerEvent(eventInGroup)
+              ? 'LocalActivity'
+              : eventInGroup.eventType}
+          </p>
+        </td>
+      </tr>
     {/each}
-  </ul>
+  </table>
 </div>
 
 <style lang="postcss">
-  li {
-    @apply my-2 cursor-pointer pl-8;
+  .row {
+    @apply table-row;
+  }
+  .row:hover {
+    @apply cursor-pointer bg-gradient-to-b from-blue-100 to-purple-100;
   }
-  .event-type:hover {
-    @apply text-blue-700 underline decoration-blue-700;
+  .active.row {
+    @apply bg-blue-50;
   }
-  .active {
-    @apply text-blue-700 underline decoration-blue-700;
+  .cell {
+    @apply border-b-2 border-gray-700 px-3 py-1 leading-4;
   }
   .failure {
-    @apply text-red-700 decoration-red-700;
+    @apply text-red-700;
   }
   .canceled {
-    @apply text-yellow-700 decoration-yellow-700;
+    @apply text-yellow-700;
   }
   .terminated {
-    @apply text-pink-700 decoration-pink-700;
+    @apply text-pink-700;
   }
 </style>

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

@@ -32,11 +32,12 @@
   export let expandAll = false;
   export let typedError = false;
 
-  let selectedId = event.id;
-
   let eventGroup = isEventGroup(event)
     ? event
     : getGroupForEvent(event, groups);
+  let selectedId = compact
+    ? Array.from(eventGroup.events.keys()).pop()
+    : event.id;
 
   $: expanded = expandAll;
 
@@ -113,22 +114,31 @@
   <td class="cell w-10 text-right text-sm font-normal xl:text-left">
     <p tabindex="0" class="event-name text-sm font-semibold md:text-base">
       {#if compact && failure}
-        <Icon class="inline text-red-700" name="clock" />
+        <Icon class="inline align-top text-red-700" name="clock" />
       {/if}
       {#if compact && canceled}
-        <Icon class="inline text-yellow-700" name="clock" />
+        <Icon class="inline align-top text-yellow-700" name="clock" />
       {/if}
       {#if compact && terminated}
-        <Icon class="inline text-pink-700" name="clock" />
+        <Icon class="inline align-top text-pink-700" name="clock" />
       {/if}
       {getTruncatedWord(
         isLocalActivityMarkerEvent(event) ? 'LocalActivity' : event.name,
-        truncateWidth - 30,
+        truncateWidth -
+          30 *
+            // account for additional width of icons
+            (compact ? (failure || canceled || terminated ? 3 : 2) : 1),
       )}
+      {#if compact}
+        <Icon
+          class="ml-1.5 inline align-top"
+          name={expanded ? 'chevron-up' : 'chevron-down'}
+        />
+      {/if}
     </p>
   </td>
   <td class="cell links">
-    {#if !expanded}
+    {#if !expanded && !compact}
       <EventDetailsRow
         {...getSingleAttributeForEvent(currentEvent)}
         {attributes}
@@ -137,7 +147,9 @@
     {/if}
   </td>
   <td class="cell text-right">
-    <Icon class="inline" name={expanded ? 'chevron-up' : 'chevron-down'} />
+    {#if !compact}
+      <Icon class="inline" name={expanded ? 'chevron-up' : 'chevron-down'} />
+    {/if}
   </td>
 </tr>
 {#if expanded}
@@ -159,11 +171,11 @@
   }
 
   .row:hover {
-    @apply cursor-pointer bg-gray-50;
+    @apply z-50 cursor-pointer bg-gradient-to-b from-blue-100 to-purple-100;
   }
 
   .expanded.row {
-    @apply border-b-0;
+    @apply bg-blue-50;
   }
 
   .failure,
@@ -202,11 +214,6 @@
     @apply hidden border-gray-700 py-1 px-3 leading-4 xl:table-cell xl:border-b-2;
   }
 
-  .expanded .cell,
-  .expanded .id-cell {
-    @apply border-b-0;
-  }
-
   .row:last-of-type .cell,
   .row:last-of-type .id-cell {
     @apply border-b-0 first-of-type:rounded-bl-lg  last-of-type:rounded-br-lg;

src/lib/components/pill.svelte

@@ -46,6 +46,10 @@
     @apply border-2 border-blue-700;
   }
 
+  .lightBlue.active {
+    @apply border-2 border-gray-900 bg-blue-50 text-gray-900;
+  }
+
   .green {
     @apply bg-green-100 text-green-700;
   }

src/lib/utilities/format-event-attributes.ts

@@ -121,20 +121,19 @@ const attributeGroupings: Readonly<AttributeGroup[]> = [
 
 type GroupingOption = {
   label: string;
-  color: Color;
 };
 
 export const attributeGroupingProperties: Readonly<
   Record<AttributeGroup, GroupingOption>
 > = {
-  activity: { label: 'Activity', color: 'gray' },
-  parent: { label: 'Parent', color: 'gray' },
-  retryPolicy: { label: 'Retry Policy', color: 'gray' },
-  schedule: { label: 'Schedule', color: 'gray' },
-  searchAttributes: { label: 'Search Attributes', color: 'gray' },
-  summary: { label: 'Summary', color: 'gray' },
-  taskQueue: { label: 'Task Queue', color: 'gray' },
-  workflow: { label: 'Workflow', color: 'gray' },
+  activity: { label: 'Activity' },
+  parent: { label: 'Parent' },
+  retryPolicy: { label: 'Retry Policy' },
+  schedule: { label: 'Schedule' },
+  searchAttributes: { label: 'Search Attributes' },
+  summary: { label: 'Summary' },
+  taskQueue: { label: 'Task Queue' },
+  workflow: { label: 'Workflow' },
 };
 
 export type AttributeGrouping = Partial<