From 94b1b9bc5cf72436ed88145359943b6c020db064 Mon Sep 17 00:00:00 2001
From: Alex Tideman <alex.tideman@gmail.com>
Date: Tue, 3 Oct 2023 13:49:58 -0500
Subject: [PATCH] Timeline Improvements (#1658)

* Add event filters, lock view from start to end

* Make it better with tooltips, collapse vertical, event filters, label improvements

* Don't follow mouse

* Add togglebuttons group, add displayName to group, cleanup

* Add Timeline to Accordion, use start/endOfMinute for min/max to provide a little zoomout ability to see all events

* Remove paginated-table changes

* Update snapshots and pass testid

* Fix float tests

* Remove event type filter in timeline

* Add types

* Fix strings to single quotes
---
 .../event/event-category-filter.svelte        |  10 +-
 .../event/event-history-timeline-helpers.ts   | 126 ++++++++++
 .../event/event-history-timeline.svelte       | 238 +++++++++++-------
 .../components/event/event-summary-row.svelte |   6 +-
 .../event/event-summary-table.svelte          |   2 +-
 src/lib/components/event/event-summary.svelte |   2 +-
 src/lib/holocene/menu/menu-button.svelte      |  10 +-
 src/lib/holocene/menu/menu-container.svelte   |   2 +-
 src/lib/i18n/locales/en/common.ts             |   1 +
 src/lib/i18n/locales/en/workflows.ts          |   4 +-
 .../layouts/workflow-history-layout.svelte    |  17 +-
 .../models/event-groups/create-event-group.ts |  11 +-
 src/lib/models/event-groups/event-groups.d.ts |   2 +
 src/lib/models/event-groups/get-group-name.ts |  61 ++++-
 .../models/event-groups/group-events.test.ts  |  22 +-
 .../get-event-categorization.test.ts          |  14 ++
 .../event-history/get-event-categorization.ts |   4 +
 src/lib/pages/import-events-view.svelte       |   2 +-
 src/lib/stores/workflow-run.ts                |   5 +
 src/lib/utilities/get-float-style.test.ts     |   4 +-
 src/lib/utilities/get-float-style.ts          |   2 +-
 .../[run]/history/compact/+page.svelte        |   2 +-
 .../[run]/history/feed/+page.svelte           |   2 +-
 .../[workflow]/[run]/history/+page.svelte     |   3 -
 24 files changed, 412 insertions(+), 140 deletions(-)
 create mode 100644 src/lib/components/event/event-history-timeline-helpers.ts

diff --git a/src/lib/components/event/event-category-filter.svelte b/src/lib/components/event/event-category-filter.svelte
index d0df07671..1e4784d2a 100644
--- a/src/lib/components/event/event-category-filter.svelte
+++ b/src/lib/components/event/event-category-filter.svelte
@@ -8,6 +8,7 @@
     MenuContainer,
     MenuItem,
   } from '$lib/holocene/menu';
+  import type { MenuButtonVariant } from '$lib/holocene/menu/menu-button.svelte';
   import { translate } from '$lib/i18n/translate';
   import {
     allEventTypeOptions,
@@ -19,6 +20,7 @@
   import { isVersionNewer } from '$lib/utilities/version-check';
 
   export let compact = false;
+  export let variant: MenuButtonVariant = 'table-header';
 
   $: label = compact
     ? translate('events', 'event-type')
@@ -27,8 +29,10 @@
   let parameter = 'category';
   let options = compact ? compactEventTypeOptions : allEventTypeOptions;
 
-  if (isVersionNewer('1.21', $temporalVersion)) {
-    options = options.filter(({ option }) => option !== 'update');
+  $: {
+    if (isVersionNewer('1.21', $temporalVersion)) {
+      options = options.filter(({ option }) => option !== 'update');
+    }
   }
 
   $: visibleOption = options.find(
@@ -48,7 +52,7 @@
 <MenuContainer>
   <MenuButton
     active={!!$eventCategoryFilter}
-    variant="table-header"
+    {variant}
     data-testid="event-category-filter"
     controls="event-category-filter-menu"
   >
diff --git a/src/lib/components/event/event-history-timeline-helpers.ts b/src/lib/components/event/event-history-timeline-helpers.ts
new file mode 100644
index 000000000..27bb1a5e5
--- /dev/null
+++ b/src/lib/components/event/event-history-timeline-helpers.ts
@@ -0,0 +1,126 @@
+import { get } from 'svelte/store';
+
+import { endOfMinute, startOfMinute } from 'date-fns';
+import type { TimelineOptionsZoomKey } from 'vis-timeline';
+
+import { relativeTime, timeFormat } from '$lib/stores/time-format';
+import type { WorkflowExecution } from '$lib/types/workflows';
+import { formatDate } from '$lib/utilities/format-date';
+import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
+
+type TimelineOptionsTooltipOverflow = 'flip' | 'none' | 'cap';
+
+export const getTimelineOptions = (workflow: WorkflowExecution) => ({
+  stackSubgroups: true,
+  maxHeight: 520,
+  min: startOfMinute(new Date(workflow.startTime)),
+  max: workflow?.endTime
+    ? endOfMinute(new Date(workflow?.endTime))
+    : Date.now(),
+  horizontalScroll: true,
+  verticalScroll: true,
+  zoomKey: 'ctrlKey' as TimelineOptionsZoomKey,
+  orientation: {
+    axis: 'both',
+    item: 'center',
+  },
+  tooltip: {
+    delay: 0,
+    overflowMethod: 'flip' as TimelineOptionsTooltipOverflow,
+    followMouse: false,
+    template: tooltipTemplate,
+  },
+  rollingMode: {
+    follow: false,
+  },
+  format: {
+    majorLabels: {
+      millisecond: 'D MMMM HH:mm:ss',
+      second: 'D MMMM HH:mm',
+      minute: 'ddd D MMMM',
+      hour: 'ddd D MMMM',
+      weekday: 'MMMM YYYY',
+      day: 'MMMM YYYY',
+      week: 'MMMM YYYY',
+      month: 'YYYY',
+      year: '',
+    },
+  },
+  xss: {
+    disabled: true,
+    filterOptions: {
+      whiteList: {
+        div: ['class'],
+      },
+    },
+  },
+});
+
+export const tooltipTemplate = (item, _parsedItems): string => {
+  if (!item?.data?.eventList) return workflowExecutionTooltipTemplate(item);
+  if (item?.data.eventList.length === 1)
+    return singleEventTooltipTemplate(item);
+  return groupEventTooltipTemplate(item);
+};
+
+const workflowExecutionTooltipTemplate = (item): string => {
+  return `<div class="flex flex-col gap-1">
+    <div class="flex gap-2"><div class="font-bold w-16">Start</div>
+      <div>${formatDate(item.start, get(timeFormat), {
+        relative: get(relativeTime),
+      })}
+      </div>
+    </div>
+  <div class="flex gap-2">
+    <div class="font-bold w-16">End</div>
+    <div>${formatDate(item.end, get(timeFormat), {
+      relative: get(relativeTime),
+    })}</div>
+  </div>
+  <div class="flex gap-2"><div class="font-bold w-16">Duration</div><div>${formatDistanceAbbreviated(
+    {
+      start: item.start,
+      end: item.end,
+      includeMilliseconds: true,
+    },
+  )}</div>
+  </div>
+  </div>`;
+};
+
+const singleEventTooltipTemplate = (item): string => {
+  return `<div class="flex flex-col gap-1">
+  <div class="flex gap-2"><div class="font-bold w-16">Event Time</div>
+      <div>${formatDate(item.start, get(timeFormat), {
+        relative: get(relativeTime),
+      })}
+      </div>
+    </div>
+    </div>
+  </div>`;
+};
+
+const groupEventTooltipTemplate = (item): string => {
+  return `<div class="flex flex-col gap-1">
+    <div class="flex gap-2"><div class="font-bold w-16">Start</div>
+      <div>${formatDate(item.start, get(timeFormat), {
+        relative: get(relativeTime),
+      })}
+      </div>
+    </div>
+  <div class="flex gap-2">
+    <div class="font-bold w-16">End</div>
+    <div>${formatDate(item.end, get(timeFormat), {
+      relative: get(relativeTime),
+    })}</div>
+  </div>
+  <div class="flex gap-2"><div class="font-bold w-16">Duration</div><div>${formatDistanceAbbreviated(
+    {
+      start: item.start,
+      end: item.end,
+      includeMilliseconds: true,
+    },
+  )}</div>
+  </div>
+  </div>`;
+};
diff --git a/src/lib/components/event/event-history-timeline.svelte b/src/lib/components/event/event-history-timeline.svelte
index 9ffc013f7..f15711eae 100644
--- a/src/lib/components/event/event-history-timeline.svelte
+++ b/src/lib/components/event/event-history-timeline.svelte
@@ -1,76 +1,103 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import {
-    DataSet,
-    Timeline,
-    type TimelineOptionsGroupHeightModeType,
-    type TimelineOptionsZoomKey,
-  } from 'vis-timeline/standalone';
+  import { DataSet, Timeline } from 'vis-timeline/standalone';
 
-  import Button from '$lib/holocene/button.svelte';
+  import Accordion from '$lib/holocene/accordion.svelte';
   import Icon from '$lib/holocene/icon/icon.svelte';
+  import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
+  import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
+  import { translate } from '$lib/i18n/translate';
   import { groupEvents } from '$lib/models/event-groups';
+  import type { EventGroups } from '$lib/models/event-groups/event-groups';
+  import { CATEGORIES } from '$lib/models/event-history/get-event-categorization';
   import { eventFilterSort, eventViewType } from '$lib/stores/event-view';
-  import { workflowRun } from '$lib/stores/workflow-run';
-  import type { CommonHistoryEvent } from '$lib/types/events';
+  import { eventCategoryFilter } from '$lib/stores/filters';
+  import {
+    workflowRun,
+    workflowTimelineViewOpen,
+  } from '$lib/stores/workflow-run';
+  import type {
+    CommonHistoryEvent,
+    EventTypeCategory,
+  } from '$lib/types/events';
   import { capitalize } from '$lib/utilities/format-camel-case';
+  import { isLocalActivityMarkerEvent } from '$lib/utilities/is-event-type';
+  import { stringifyWithBigInt } from '$lib/utilities/parse-with-big-int';
+
+  import { getTimelineOptions } from './event-history-timeline-helpers';
 
   export let history: CommonHistoryEvent[] = [];
 
   let visualizationRef;
   let timeline;
 
+  $: category = $eventCategoryFilter as EventTypeCategory;
+
   function renderComponentToHTML(Component, props) {
     const container = document.createElement('div');
     new Component({ target: container, props });
     return container.innerHTML;
   }
+
   function renderGroupName(group) {
-    const groupName = capitalize(group.category);
+    const groupName = capitalize(group.label || group.category);
     return `<div class="flex gap-2 items-center">${groupName}</div>`;
   }
+
   function renderExecutionName() {
     return '<div class="flex gap-1 items-center">Workflow Execution</div>';
   }
+
   function renderPendingAttempts(name, attempt) {
     const retryIcon = renderComponentToHTML(Icon, {
       name: 'retry',
     });
-    return `<div class="flex gap-1 items-center justify-between"><div class="bar-content"><p>${name}</p></div><div class="flex gap-1 items-center">${retryIcon}${attempt.toString()}</div></div>`;
+    return `<div class="flex gap-1 items-center"><div class="flex gap-1 items-center">${retryIcon}${attempt.toString()}</div><div class="bar-content"><p>${name}</p></div></div>`;
   }
-  const createGroupItems = (eventGroups, isRunning, sortedHistory) => {
+
+  type GroupItems = {
+    items: DataSet<unknown, 'id'>;
+    groups: DataSet<unknown, 'id'>;
+  };
+
+  const createGroupItems = (
+    eventGroups: EventGroups,
+    isRunning: boolean,
+    sortedHistory: CommonHistoryEvent[],
+  ): GroupItems => {
     const items = new DataSet([]);
     const groups = new DataSet([]);
     const firstEvent = sortedHistory[0];
     const finalEvent = sortedHistory[sortedHistory.length - 1];
-    if ($workflowRun?.workflow?.status) {
+
+    if (!category) {
       groups.add({
         id: 'workflow',
         content: renderExecutionName(),
         order: -1,
       });
-    }
-    if (isRunning) {
       items.add({
         id: 'workflow',
         group: 'workflow',
         start: firstEvent.eventTime,
-        end: Date.now(),
+        end: isRunning ? Date.now() : finalEvent.eventTime,
         type: 'range',
+        title: stringifyWithBigInt(
+          {
+            startTime: $workflowRun.workflow.startTime,
+            endTime: $workflowRun.workflow?.endTime || Date.now(),
+          },
+          undefined,
+          2,
+        ),
         content: $workflowRun.workflow.runId,
-        className: `${finalEvent.category} Running`,
-      });
-    } else {
-      items.add({
-        id: 'workflow',
-        group: 'workflow',
-        start: firstEvent.eventTime,
-        end: finalEvent.eventTime,
-        type: 'range',
-        content: $workflowRun.workflow.runId,
-        className: `${finalEvent.category} ${finalEvent.classification}`,
+        className: isRunning
+          ? `${finalEvent.category} Running`
+          : `${finalEvent.category} ${finalEvent.classification}`,
+        editable: false,
       });
     }
+
     eventGroups.forEach((group, i) => {
       const initialEvent = group.initialEvent;
       const lastEvent = group?.lastEvent;
@@ -89,12 +116,14 @@
             groupPendingActivity.attempt,
           ),
           className: `${lastEvent.category} ${lastEvent.classification}`,
+          editable: false,
         });
       } else {
         items.add({
           id: `event-range-${initialEvent.id}`,
           group: group.id,
           start: initialEvent.eventTime,
+          data: group,
           content:
             group.eventList.length === 1
               ? group.name
@@ -102,6 +131,7 @@
           end: lastEvent.eventTime,
           type: group.eventList.length === 1 ? 'point' : 'range',
           className: `${lastEvent.category} ${lastEvent.classification}`,
+          editable: false,
         });
       }
       groups.add({
@@ -112,88 +142,100 @@
     });
     return { items, groups };
   };
-  const options = {
-    stack: false,
-    stackSubgroups: true,
-    maxHeight: 600,
-    horizontalScroll: true,
-    verticalScroll: true,
-    groupHeightMode: 'fixed' as TimelineOptionsGroupHeightModeType,
-    zoomKey: 'ctrlKey' as TimelineOptionsZoomKey,
-    orientation: {
-      axis: 'both',
-      item: 'center',
-    },
-    xss: {
-      disabled: true,
-      filterOptions: {
-        whiteList: {
-          p: ['class'],
-          div: ['class'],
-          h1: ['class'],
-          input: ['class', 'id', 'check'],
-          label: ['class', 'id', 'for'],
-          li: ['class'],
-          ul: ['class'],
-        },
-      },
-    },
+
+  const setVizItems = (
+    items: DataSet<unknown, 'id'>,
+    groups: DataSet<unknown, 'id'>,
+  ): void => {
+    timeline.setGroups(groups);
+    timeline.setItems(items);
+    timeline.fit();
   };
-  onMount(() => {
+
+  const filterHistory = (
+    history: CommonHistoryEvent[],
+    category: EventTypeCategory,
+  ): CommonHistoryEvent[] => {
+    if (!category) return history;
+    return history.filter((i) => {
+      if (category === CATEGORIES.LOCAL_ACTIVITY) {
+        return isLocalActivityMarkerEvent(i);
+      }
+      return i.category === category;
+    });
+  };
+
+  const buildTimeline = (category: EventTypeCategory): void => {
     timeline = new Timeline(
       visualizationRef,
       new DataSet([]),
       new DataSet([]),
-      options,
+      getTimelineOptions($workflowRun.workflow),
     );
-    return () => timeline.destroy();
-  });
-  const setVizItems = (items, groups) => {
-    timeline.setGroups(groups);
-    timeline.setItems(items);
-    timeline.fit();
+    const reverseHistory =
+      $eventFilterSort === 'descending' && $eventViewType !== 'compact';
+    const sortedHistory = reverseHistory
+      ? [...history].reverse()
+      : [...history];
+    const filteredHistory = filterHistory(sortedHistory, category);
+    const eventGroups = groupEvents(filteredHistory);
+    const { groups, items } = createGroupItems(
+      eventGroups,
+      $workflowRun?.workflow?.isRunning,
+      sortedHistory,
+    );
+    setVizItems(items, groups);
   };
 
+  onMount(() => {
+    return () => timeline?.destroy();
+  });
+
+  $: readyToDraw =
+    $workflowTimelineViewOpen &&
+    $workflowRun.workflow &&
+    history.length &&
+    visualizationRef;
   $: {
-    if (history.length && timeline) {
-      const reverseHistory =
-        $eventFilterSort === 'descending' && $eventViewType !== 'compact';
-      const sortedHistory = reverseHistory
-        ? [...history].reverse()
-        : [...history];
-      const eventGroups = groupEvents(sortedHistory);
-      const { groups, items } = createGroupItems(
-        eventGroups,
-        $workflowRun?.workflow?.isRunning,
-        sortedHistory,
-      );
-      setVizItems(items, groups);
+    if (readyToDraw) {
+      if (timeline) {
+        timeline.destroy();
+      }
+      buildTimeline(category);
     }
   }
-  const resetTimelineView = () => {
-    timeline.focus('workflow');
-  };
 </script>
 
-<div
-  class="flex w-full flex-col gap-4 rounded-xl border-2 border-gray-900 bg-white p-4"
+<Accordion
+  title={translate('timeline')}
+  icon="timeline"
+  open={$workflowTimelineViewOpen}
+  onToggle={() => {
+    $workflowTimelineViewOpen = !$workflowTimelineViewOpen;
+  }}
 >
-  <div class="flex items-center justify-between gap-2">
-    <h3 class="text-xl">Timeline</h3>
-    <div class="flex gap-2">
-      <Button variant="secondary" on:click={() => timeline.zoomIn(1)}
-        >Zoom In</Button
-      >
-      <Button variant="secondary" on:click={() => timeline.zoomOut(1)}
-        >Zoom Out</Button
-      >
-      <Button variant="secondary" on:click={resetTimelineView}
-        >Zoom to Fit</Button
-      >
+  <div class="flex flex-col gap-2">
+    <div class="flex items-center justify-end gap-2">
+      <div class="flex gap-2">
+        <ToggleButtons>
+          <ToggleButton
+            data-testid="zoom-in"
+            on:click={() => timeline.zoomIn(1)}>+</ToggleButton
+          >
+          <ToggleButton
+            data-testid="zoom-in"
+            on:click={() => timeline.zoomOut(1)}>-</ToggleButton
+          >
+          <ToggleButton
+            data-testid="zoom-in"
+            on:click={() => timeline.focus('workflow')}>Fit</ToggleButton
+          >
+        </ToggleButtons>
+      </div>
     </div>
+    <div class="timeline" bind:this={visualizationRef} />
   </div>
-  <div bind:this={visualizationRef} />
-</div>
+</Accordion>
 
 <style lang="postcss">
   :global(.vis-item-content) {
@@ -248,6 +290,16 @@
     overflow: visible !important;
   }
 
+  :global(.vis-tooltip) {
+    background-color: #18181b !important;
+    color: white !important;
+    border-radius: 0.75rem !important;
+    border-width: 2px !important;
+    border: 2px solid #18181b !important;
+    height: auto !important;
+    font-size: 0.5em !important;
+  }
+
   :global(.vis-item.Card) {
     width: 100% !important;
   }
diff --git a/src/lib/components/event/event-summary-row.svelte b/src/lib/components/event/event-summary-row.svelte
index 77a262ce3..42fd7bb36 100644
--- a/src/lib/components/event/event-summary-row.svelte
+++ b/src/lib/components/event/event-summary-row.svelte
@@ -130,7 +130,11 @@
       </div>
       <div class="flex w-full items-center justify-between truncate">
         <p class="event-name truncate text-sm font-semibold md:text-base">
-          {isLocalActivityMarkerEvent(event) ? 'LocalActivity' : event.name}
+          {isEventGroup(event)
+            ? event.displayName
+            : isLocalActivityMarkerEvent(event)
+            ? 'LocalActivity'
+            : event.name}
         </p>
         {#if expanded}
           <div>
diff --git a/src/lib/components/event/event-summary-table.svelte b/src/lib/components/event/event-summary-table.svelte
index 72d1438db..fb3ea62b7 100644
--- a/src/lib/components/event/event-summary-table.svelte
+++ b/src/lib/components/event/event-summary-table.svelte
@@ -26,7 +26,7 @@
 
 <Table {updating} class="dark w-full table-fixed">
   <caption class="sr-only" slot="caption"
-    >{translate('workflows', 'recent-events')}</caption
+    >{translate('workflows', 'event-history')}</caption
   >
   <TableHeaderRow slot="headers">
     <td class="w-14 xl:w-10" />
diff --git a/src/lib/components/event/event-summary.svelte b/src/lib/components/event/event-summary.svelte
index de0833188..d646755b0 100644
--- a/src/lib/components/event/event-summary.svelte
+++ b/src/lib/components/event/event-summary.svelte
@@ -100,7 +100,7 @@
   let:visibleItems
   let:activeRowIndex
   let:setActiveRowIndex
-  aria-label={translate('workflows', 'recent-events')}
+  aria-label={translate('workflows', 'event-history')}
   pageSizeSelectLabel={translate('per-page')}
   previousButtonLabel={translate('previous')}
   nextButtonLabel={translate('next')}
diff --git a/src/lib/holocene/menu/menu-button.svelte b/src/lib/holocene/menu/menu-button.svelte
index 64fa1d51f..afa3ea537 100644
--- a/src/lib/holocene/menu/menu-button.svelte
+++ b/src/lib/holocene/menu/menu-button.svelte
@@ -1,3 +1,11 @@
+<script lang="ts" context="module">
+  export type MenuButtonVariant =
+    | 'primary'
+    | 'secondary'
+    | 'ghost'
+    | 'table-header';
+</script>
+
 <script lang="ts">
   import type { HTMLButtonAttributes } from 'svelte/elements';
 
@@ -11,8 +19,6 @@
   } from '$lib/holocene/menu/menu-container.svelte';
   import { MENU_ITEM_SELECTORS } from '$lib/holocene/menu/menu-item.svelte';
 
-  type MenuButtonVariant = 'primary' | 'secondary' | 'ghost' | 'table-header';
-
   interface $$Props extends HTMLButtonAttributes {
     controls: string;
     count?: number;
diff --git a/src/lib/holocene/menu/menu-container.svelte b/src/lib/holocene/menu/menu-container.svelte
index c049c5494..a6c77362b 100644
--- a/src/lib/holocene/menu/menu-container.svelte
+++ b/src/lib/holocene/menu/menu-container.svelte
@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
   import type { HTMLAttributes } from 'svelte/elements';
-  import { type Writable, writable } from 'svelte/store';
+  import { writable, type Writable } from 'svelte/store';
 
   import { createEventDispatcher, setContext } from 'svelte';
 
diff --git a/src/lib/i18n/locales/en/common.ts b/src/lib/i18n/locales/en/common.ts
index d35e72181..854604f93 100644
--- a/src/lib/i18n/locales/en/common.ts
+++ b/src/lib/i18n/locales/en/common.ts
@@ -134,6 +134,7 @@ export const Strings = {
   'based-on-time-preface': 'Based on',
   'download-json': 'Download JSON',
   'skip-nav': 'Skip to Main Content',
+  timeline: 'Timeline',
   'equal-to': 'Equal to',
   'not-equal-to': 'Not equal to',
 } as const;
diff --git a/src/lib/i18n/locales/en/workflows.ts b/src/lib/i18n/locales/en/workflows.ts
index edbb27172..79178d955 100644
--- a/src/lib/i18n/locales/en/workflows.ts
+++ b/src/lib/i18n/locales/en/workflows.ts
@@ -63,8 +63,8 @@ export const Strings = {
   'input-and-results': 'Input and Results',
   'continued-as-new-with-input': 'Continued as New with Input',
   results: 'Results',
-  'recent-events': 'Recent Events',
-  'recent-events-view': 'Recent Events View',
+  'event-history-view': 'Event History View',
+  'event-history': 'Event History',
   history: 'History',
   compact: 'Compact',
   json: 'JSON',
diff --git a/src/lib/layouts/workflow-history-layout.svelte b/src/lib/layouts/workflow-history-layout.svelte
index cf94ccd3b..a564e8dad 100644
--- a/src/lib/layouts/workflow-history-layout.svelte
+++ b/src/lib/layouts/workflow-history-layout.svelte
@@ -10,7 +10,6 @@
   import WorkflowSummary from '$lib/components/workflow/workflow-summary.svelte';
   import WorkflowTypedError from '$lib/components/workflow/workflow-typed-error.svelte';
   import Accordion from '$lib/holocene/accordion.svelte';
-  import LabsModeGuard from '$lib/holocene/labs-mode-guard.svelte';
   import ToggleButton from '$lib/holocene/toggle-button/toggle-button.svelte';
   import ToggleButtons from '$lib/holocene/toggle-button/toggle-buttons.svelte';
   import { translate } from '$lib/i18n/translate';
@@ -45,7 +44,7 @@
   };
 </script>
 
-<div class="flex flex-col gap-4">
+<div class="flex flex-col gap-2">
   <WorkflowStackTraceError />
   {#if workflowEvents.error}
     <WorkflowTypedError error={workflowEvents.error} />
@@ -78,18 +77,16 @@
       </div>
     </Accordion>
   </section>
-  <LabsModeGuard>
-    <EventHistoryTimeline history={$fullEventHistory} />
-  </LabsModeGuard>
+  <EventHistoryTimeline history={$fullEventHistory} />
   <section id="event-history">
     <nav
-      class="flex flex-col items-center justify-between gap-4 pb-4 lg:flex-row lg:items-end"
-      aria-label={translate('workflows', 'recent-events-view')}
+      class="flex flex-col items-center justify-between gap-4 lg:flex-row lg:items-end"
+      aria-label={translate('workflows', 'event-history-view')}
     >
-      <h2 class="text-lg font-medium">
-        {translate('workflows', 'recent-events')}
+      <h2 class="text-2xl font-medium">
+        {translate('workflows', 'event-history')}
       </h2>
-      <div id="event-view-toggle" class="flex gap-4 bg-white">
+      <div id="event-view-toggle" class="mt-4 flex gap-4 bg-white">
         <ToggleButtons>
           <ToggleButton
             icon="feed"
diff --git a/src/lib/models/event-groups/create-event-group.ts b/src/lib/models/event-groups/create-event-group.ts
index 43ec27007..fe058afdc 100644
--- a/src/lib/models/event-groups/create-event-group.ts
+++ b/src/lib/models/event-groups/create-event-group.ts
@@ -26,7 +26,11 @@ import {
   eventIsTerminated,
 } from './get-event-in-group';
 import { getGroupId } from './get-group-id';
-import { getEventGroupName } from './get-group-name';
+import {
+  getEventGroupDisplayName,
+  getEventGroupLabel,
+  getEventGroupName,
+} from './get-group-name';
 import { getLastEvent } from './get-last-event';
 
 type StartingEvents = {
@@ -60,6 +64,9 @@ const createGroupFor = <K extends keyof StartingEvents>(
 ): EventGroup => {
   const id = getGroupId(event);
   const name = getEventGroupName(event);
+  const label = getEventGroupLabel(event);
+  const displayName = getEventGroupDisplayName(event);
+
   const { timestamp, category, classification } = event;
 
   const initialEvent = getInitialEvent(event, events);
@@ -80,6 +87,8 @@ const createGroupFor = <K extends keyof StartingEvents>(
   return {
     id,
     name,
+    label,
+    displayName,
     events: groupEvents,
     eventIds: groupEventIds,
     initialEvent,
diff --git a/src/lib/models/event-groups/event-groups.d.ts b/src/lib/models/event-groups/event-groups.d.ts
index 8850bfe8a..ee570a54f 100644
--- a/src/lib/models/event-groups/event-groups.d.ts
+++ b/src/lib/models/event-groups/event-groups.d.ts
@@ -10,6 +10,8 @@ interface EventGroup
   > {
   id: EventId;
   name: string;
+  label: string;
+  displayName: string;
   events: Map<EventId, WorkflowEvent>;
   eventIds: Set<EventId>;
   initialEvent: WorkflowEvent;
diff --git a/src/lib/models/event-groups/get-group-name.ts b/src/lib/models/event-groups/get-group-name.ts
index 9076f5ae7..d319d9e3f 100644
--- a/src/lib/models/event-groups/get-group-name.ts
+++ b/src/lib/models/event-groups/get-group-name.ts
@@ -12,14 +12,14 @@ import {
 } from '$lib/utilities/is-event-type';
 
 export const getEventGroupName = (event: CommonHistoryEvent): string => {
-  if (!event) return;
+  if (!event) return '';
 
   if (isActivityTaskScheduledEvent(event)) {
     return event.activityTaskScheduledEventAttributes?.activityType?.name;
   }
 
   if (isTimerStartedEvent(event)) {
-    return `Timer ${event.timerStartedEventAttributes
+    return `${event.timerStartedEventAttributes
       ?.timerId} (${formatDurationAbbreviated(
       event.timerStartedEventAttributes
         ?.startToFireTimeout as unknown as Duration,
@@ -27,25 +27,72 @@ export const getEventGroupName = (event: CommonHistoryEvent): string => {
   }
 
   if (isSignalExternalWorkflowExecutionInitiatedEvent(event)) {
-    return `Signal: ${event.signalExternalWorkflowExecutionInitiatedEventAttributes?.signalName}`;
+    return event.signalExternalWorkflowExecutionInitiatedEventAttributes
+      ?.signalName;
   }
 
   if (isWorkflowExecutionSignaledEvent(event)) {
-    return `Signal received: ${event.workflowExecutionSignaledEventAttributes?.signalName}`;
+    return event.workflowExecutionSignaledEventAttributes?.signalName;
   }
 
   if (isMarkerRecordedEvent(event)) {
     if (isLocalActivityMarkerEvent(event)) {
       return 'Local Activity';
     }
-    return `Marker: ${event.markerRecordedEventAttributes?.markerName}`;
+    return event.markerRecordedEventAttributes?.markerName;
   }
 
   if (isStartChildWorkflowExecutionInitiatedEvent(event)) {
-    return `Child Workflow: ${event.startChildWorkflowExecutionInitiatedEventAttributes?.workflowType?.name}`;
+    return event.startChildWorkflowExecutionInitiatedEventAttributes
+      ?.workflowType?.name;
   }
 
   if (isWorkflowExecutionUpdateAcceptedEvent(event)) {
-    return `${event.workflowExecutionUpdateAcceptedEventAttributes?.acceptedRequest?.input?.name}`;
+    return event.workflowExecutionUpdateAcceptedEventAttributes?.acceptedRequest
+      ?.input?.name;
   }
 };
+
+export const getEventGroupLabel = (event: CommonHistoryEvent): string => {
+  if (!event) return '';
+
+  if (isActivityTaskScheduledEvent(event)) {
+    return '';
+  }
+
+  if (isTimerStartedEvent(event)) {
+    return 'Timer';
+  }
+
+  if (isSignalExternalWorkflowExecutionInitiatedEvent(event)) {
+    return 'Signal';
+  }
+
+  if (isWorkflowExecutionSignaledEvent(event)) {
+    return 'Signal received';
+  }
+
+  if (isMarkerRecordedEvent(event)) {
+    if (isLocalActivityMarkerEvent(event)) {
+      return 'Local Activity';
+    }
+    return 'Marker';
+  }
+
+  if (isStartChildWorkflowExecutionInitiatedEvent(event)) {
+    return 'Child Workflow';
+  }
+
+  if (isWorkflowExecutionUpdateAcceptedEvent(event)) {
+    return '';
+  }
+};
+
+export const getEventGroupDisplayName = (event: CommonHistoryEvent): string => {
+  if (!event) return '';
+
+  if (getEventGroupLabel(event)) {
+    return `${getEventGroupLabel(event)}: ${getEventGroupName(event)}`;
+  }
+  return getEventGroupName(event);
+};
diff --git a/src/lib/models/event-groups/group-events.test.ts b/src/lib/models/event-groups/group-events.test.ts
index 48c255f97..cdaca5cf4 100644
--- a/src/lib/models/event-groups/group-events.test.ts
+++ b/src/lib/models/event-groups/group-events.test.ts
@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest';
 import type { CommonHistoryEvent, WorkflowEvents } from '$lib/types/events';
 
 import { groupEvents } from './';
-import { getEventGroupName } from './get-group-name';
+import { getEventGroupDisplayName } from './get-group-name';
 
 const scheduledEvent = {
   id: '5',
@@ -155,14 +155,14 @@ describe('groupEvents', () => {
   });
 });
 
-describe('getEventGroupName', () => {
+describe('getEventGroupDisplayName', () => {
   it('should get the name of the eventGroup', () => {
     const [group] = groupEvents(eventHistory);
     expect(group.name).toBe('CompletedActivity');
   });
 
   it('should guard against empty arguments', () => {
-    expect(getEventGroupName(undefined as CommonHistoryEvent)).toBeUndefined();
+    expect(getEventGroupDisplayName(undefined as CommonHistoryEvent)).toBe('');
   });
 
   it('should get the name of a TimerStartedEvent', () => {
@@ -177,7 +177,7 @@ describe('getEventGroupName', () => {
       name: 'TimerStarted',
     } as unknown as CommonHistoryEvent;
 
-    expect(getEventGroupName(timerStartedEvent)).toBe('Timer 8 (4s)');
+    expect(getEventGroupDisplayName(timerStartedEvent)).toBe('Timer: 8 (4s)');
   });
 
   it('should get the name of a SignalExternalWorkflowExecutionInitiatedEvent', () => {
@@ -188,7 +188,9 @@ describe('getEventGroupName', () => {
       },
       name: 'WorkflowExecutionSignaled',
     } as unknown as CommonHistoryEvent;
-    expect(getEventGroupName(signalEvent)).toBe('Signal: WorkflowSignal');
+    expect(getEventGroupDisplayName(signalEvent)).toBe(
+      'Signal: WorkflowSignal',
+    );
   });
 
   it('should get the name of a WorkflowExecutionSignaledEvent', () => {
@@ -200,7 +202,7 @@ describe('getEventGroupName', () => {
       name: 'WorkflowExecutionSignaled',
     } as unknown as CommonHistoryEvent;
 
-    expect(getEventGroupName(workflowExectutionSignaledEvent)).toBe(
+    expect(getEventGroupDisplayName(workflowExectutionSignaledEvent)).toBe(
       'Signal received: signalBeforeReset',
     );
   });
@@ -218,7 +220,9 @@ describe('getEventGroupName', () => {
       timestamp: '2022-07-01 UTC 20:23:49.13',
     } as unknown as CommonHistoryEvent;
 
-    expect(getEventGroupName(markerRecordedEvent)).toBe('Marker: Version');
+    expect(getEventGroupDisplayName(markerRecordedEvent)).toBe(
+      'Marker: Version',
+    );
   });
 
   it('should get the name of a StartChildWorkflowExecutionInitiatedEvent', () => {
@@ -230,7 +234,7 @@ describe('getEventGroupName', () => {
       },
     } as unknown as CommonHistoryEvent;
 
-    expect(getEventGroupName(startChildWorkflowEvent)).toBe(
+    expect(getEventGroupDisplayName(startChildWorkflowEvent)).toBe(
       'Child Workflow: Workflow Name',
     );
   });
@@ -246,7 +250,7 @@ describe('getEventGroupName', () => {
       },
     } as unknown as CommonHistoryEvent;
 
-    expect(getEventGroupName(workflowUpdateAcceptedEvent)).toBe(
+    expect(getEventGroupDisplayName(workflowUpdateAcceptedEvent)).toBe(
       'Start the update',
     );
   });
diff --git a/src/lib/models/event-history/get-event-categorization.test.ts b/src/lib/models/event-history/get-event-categorization.test.ts
index ba7f239f0..9e6df89df 100644
--- a/src/lib/models/event-history/get-event-categorization.test.ts
+++ b/src/lib/models/event-history/get-event-categorization.test.ts
@@ -134,10 +134,20 @@ describe('Event Category Data Structures', () => {
           "label": "category-activity",
           "option": "activity",
         },
+        {
+          "color": "#F59E0B",
+          "label": "category-child-workflow",
+          "option": "child-workflow",
+        },
         {
           "label": "category-local-activity",
           "option": "local-activity",
         },
+        {
+          "color": "#EC4899",
+          "label": "category-marker",
+          "option": "marker",
+        },
         {
           "color": "#DD6B20",
           "label": "category-signal",
@@ -148,6 +158,10 @@ describe('Event Category Data Structures', () => {
           "label": "category-timer",
           "option": "timer",
         },
+        {
+          "label": "category-update",
+          "option": "update",
+        },
       ]
     `);
   });
diff --git a/src/lib/models/event-history/get-event-categorization.ts b/src/lib/models/event-history/get-event-categorization.ts
index 91f21cb17..a0d5c0063 100644
--- a/src/lib/models/event-history/get-event-categorization.ts
+++ b/src/lib/models/event-history/get-event-categorization.ts
@@ -128,9 +128,13 @@ const compactEventTypes: (EventTypeCategory | undefined)[] = [
   undefined,
   CATEGORIES.ACTIVITY,
   CATEGORIES.LOCAL_ACTIVITY,
+  CATEGORIES.CHILD_WORKFLOW,
   CATEGORIES.SIGNAL,
   CATEGORIES.TIMER,
+  CATEGORIES.MARKER,
+  CATEGORIES.UPDATE,
 ];
+
 export const compactEventTypeOptions: EventTypeOption[] =
   allEventTypeOptions.filter(({ option }) =>
     compactEventTypes.includes(option),
diff --git a/src/lib/pages/import-events-view.svelte b/src/lib/pages/import-events-view.svelte
index 9be9405ad..5709c534d 100644
--- a/src/lib/pages/import-events-view.svelte
+++ b/src/lib/pages/import-events-view.svelte
@@ -20,7 +20,7 @@
     </div>
   </nav>
   <nav
-    class="my-4 flex items-end justify-end gap-4"
+    class="flex items-end justify-end gap-4"
     aria-label={translate('events', 'event-history-view')}
   >
     <div id="event-view-toggle" class="flex gap-4 bg-white">
diff --git a/src/lib/stores/workflow-run.ts b/src/lib/stores/workflow-run.ts
index 797d9bd56..fdd5bece4 100644
--- a/src/lib/stores/workflow-run.ts
+++ b/src/lib/stores/workflow-run.ts
@@ -28,3 +28,8 @@ export const workflowSummaryViewOpen = persistStore<boolean>(
   true,
   true,
 );
+export const workflowTimelineViewOpen = persistStore<boolean>(
+  'workflowTimelineView',
+  true,
+  true,
+);
diff --git a/src/lib/utilities/get-float-style.test.ts b/src/lib/utilities/get-float-style.test.ts
index e6313bcb0..a90577b3c 100644
--- a/src/lib/utilities/get-float-style.test.ts
+++ b/src/lib/utilities/get-float-style.test.ts
@@ -6,7 +6,7 @@ describe('getFloatStyle', () => {
   it('should return a style string for a width/height and screenWidth over default breakpoint', () => {
     const dimensions = {
       width: 390,
-      height: 82,
+      height: 96,
       screenWidth: 1400,
     };
     const style = 'position: absolute; right: 410px; top: -96px';
@@ -15,7 +15,7 @@ describe('getFloatStyle', () => {
   it('should return a style string for a width/height and screenWidth over custom breakpoint', () => {
     const dimensions = {
       width: 390,
-      height: 82,
+      height: 96,
       screenWidth: 1400,
       breakpoint: 900,
     };
diff --git a/src/lib/utilities/get-float-style.ts b/src/lib/utilities/get-float-style.ts
index 5c4fe6d3e..021cec7cb 100644
--- a/src/lib/utilities/get-float-style.ts
+++ b/src/lib/utilities/get-float-style.ts
@@ -10,6 +10,6 @@ export const getFloatStyle = ({
   breakpoint?: number;
 }): string => {
   return width && height && screenWidth > breakpoint
-    ? `position: absolute; right: ${width + 20}px; top: -${height + 14}px`
+    ? `position: absolute; right: ${width + 20}px; top: -${height}px`
     : '';
 };
diff --git a/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/compact/+page.svelte b/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/compact/+page.svelte
index 4ab8e6c52..5c219ae5f 100644
--- a/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/compact/+page.svelte
+++ b/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/compact/+page.svelte
@@ -32,7 +32,7 @@
   floatId="event-view-toggle"
   let:visibleItems
   let:initialItem
-  aria-label={translate('workflows', 'recent-events')}
+  aria-label={translate('workflows', 'event-history')}
   pageSizeSelectLabel={translate('per-page')}
   previousButtonLabel={translate('previous')}
   nextButtonLabel={translate('next')}
diff --git a/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/feed/+page.svelte b/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/feed/+page.svelte
index dbb37aa1d..6b75f0f3e 100644
--- a/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/feed/+page.svelte
+++ b/src/routes/(app)/import/events/[namespace]/[workflow]/[run]/history/feed/+page.svelte
@@ -31,7 +31,7 @@
   floatId="event-view-toggle"
   let:visibleItems
   let:initialItem
-  aria-label={translate('workflows', 'recent-events')}
+  aria-label={translate('workflows', 'event-history')}
   pageSizeSelectLabel={translate('per-page')}
   previousButtonLabel={translate('previous')}
   nextButtonLabel={translate('next')}
diff --git a/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/history/+page.svelte b/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/history/+page.svelte
index 0e804a9b2..11870f626 100644
--- a/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/history/+page.svelte
+++ b/src/routes/(app)/namespaces/[namespace]/workflows/[workflow]/[run]/history/+page.svelte
@@ -23,8 +23,5 @@
   url={$page.url.href}
 />
 <WorkflowHistoryLayout>
-  <!-- <svelte:fragment slot="timeline">
-    <EventHistoryTimelineContainer />
-    </svelte:fragment> -->
   <svelte:component this={view} />
 </WorkflowHistoryLayout>