Dt 1142 deep linking activities

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

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+
   import Table from '$lib/holocene/table/table.svelte';
   import type { EventGroup } from '$lib/models/event-groups/event-groups';
   import {
@@ -7,10 +10,27 @@
     eventOrGroupIsTerminated,
   } from '$lib/models/event-groups/get-event-in-group';
   import { isLocalActivityMarkerEvent } from '$lib/utilities/is-event-type';
+  import { routeForEventHistory } from '$lib/utilities/route-for';
 
   export let eventGroup: EventGroup;
   export let selectedId: string;
   export let onGroupClick: (id: string) => void;
+
+  const handleGroupClick = (id: string) => {
+    const { namespace, workflow, run } = $page.params;
+    const queryParams: Record<string, string> = {};
+    $page.url.searchParams.forEach((value, key) => {
+      queryParams[key] = value;
+    });
+    const route = routeForEventHistory({
+      queryParams,
+      namespace,
+      workflow,
+      run,
+    });
+    goto(`${route}#${id}`, { noScroll: true });
+    onGroupClick(id);
+  };
 </script>
 
 <div class="w-full border-gray-700 lg:w-1/3 lg:border-r-2">
@@ -22,11 +42,13 @@
         class:failure={eventOrGroupIsFailureOrTimedOut(eventInGroup)}
         class:canceled={eventOrGroupIsCanceled(eventInGroup)}
         class:terminated={eventOrGroupIsTerminated(eventInGroup)}
-        on:click|preventDefault|stopPropagation={() => onGroupClick(id)}
+        on:click|preventDefault|stopPropagation={() => handleGroupClick(id)}
       >
         <td class="w-1/12" />
         <td class="w-24">
-          <p class="truncate text-sm text-gray-500 md:text-base">{id}</p>
+          <p class="truncate text-sm text-gray-500 md:text-base">
+            {id}
+          </p>
         </td>
         <td>
           <p class="event-type truncate text-sm md:text-base">

src/lib/components/event/event-history-timeline.svelte

@@ -2,6 +2,8 @@
   import { onMount } from 'svelte';
   import { DataSet, Timeline } from 'vis-timeline/standalone';
 
+  import { page } from '$app/stores';
+
   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';
@@ -150,7 +152,14 @@
   ): void => {
     timeline.setGroups(groups);
     timeline.setItems(items);
-    timeline.fit();
+
+    if ($page.url.hash) {
+      setTimeout(() => {
+        timeline.fit();
+      }, 2000);
+    } else {
+      timeline.fit();
+    }
   };
 
   const filterHistory = (

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

@@ -1,7 +1,10 @@
 <script lang="ts">
-  import { noop } from 'svelte/internal';
+  import { noop, onMount } from 'svelte/internal';
   import { fade } from 'svelte/transition';
 
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+
   import Icon from '$lib/holocene/icon/icon.svelte';
   import Link from '$lib/holocene/link.svelte';
   import { isEventGroup } from '$lib/models/event-groups';
@@ -18,6 +21,7 @@
   import { formatDistanceAbbreviated } from '$lib/utilities/format-time';
   import { getSingleAttributeForEvent } from '$lib/utilities/get-single-attribute-for-event';
   import { isLocalActivityMarkerEvent } from '$lib/utilities/is-event-type';
+  import { routeForEventHistory } from '$lib/utilities/route-for';
 
   import EventDetailsFull from './event-details-full.svelte';
   import EventDetailsRow from './event-details-row.svelte';
@@ -30,11 +34,16 @@
   export let active = false;
   export let onRowClick: () => void = noop;
 
+  onMount(() => {
+    const hash = $page.url.hash;
+    if (`#${event.id}` === hash && !expanded) expanded = true;
+  });
+
   let selectedId = isEventGroup(event)
     ? Array.from(event.events.keys()).pop()
     : event.id;
 
-  $: expanded = expandAll || active;
+  $: expanded = expandAll;
 
   $: descending = $eventFilterSort === 'descending';
   $: showElapsed = $eventShowElapsed === 'true';
@@ -61,6 +70,19 @@
 
   const onLinkClick = () => {
     expanded = !expanded;
+    // Dont delete query params like ?per-page
+    const { namespace, workflow, run } = $page.params;
+    const queryParams: Record<string, string> = {};
+    $page.url.searchParams.forEach((value, key) => {
+      queryParams[key] = value;
+    });
+    const route = routeForEventHistory({
+      queryParams,
+      namespace,
+      workflow,
+      run,
+    });
+    goto(`${route}#${event.id}`, { noScroll: true });
     onRowClick();
   };
 
@@ -79,7 +101,7 @@
   class:terminated
   class:typedError
   data-testid="event-summary-row"
-  on:click|stopPropagation={onLinkClick}
+  on:click|preventDefault|stopPropagation={onLinkClick}
 >
   <td />
   <td class="w-24 text-left">

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

@@ -1,4 +1,7 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { goto } from '$app/navigation';
   import { page } from '$app/stores';
 
   import EventSummaryRow from '$lib/components/event/event-summary-row.svelte';
@@ -31,12 +34,29 @@
   $: ({ namespace, workflow: workflowId, run: runId } = $page.params);
 
   let loading = true;
+  let hash = '';
 
   const resetFullHistory = () => {
     $fullEventHistory = [];
     loading = true;
   };
 
+  onMount(() => {
+    hash = $page.url.hash;
+  });
+
+  function scrollIntoView(target, eventHistory) {
+    if (parseInt(target) > eventHistory.length) {
+      window.location.hash = '';
+      return;
+    }
+    const element = document.getElementById(target);
+    if (!element) return;
+    goto(`${$page.url}`, { noScroll: true }).then(() => {
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    });
+  }
+
   const fetchEvents = async (
     namespace: string,
     workflowId: string,
@@ -54,6 +74,9 @@
       sort: compact ? 'ascending' : sort,
     });
     loading = false;
+    setTimeout(() => {
+      scrollIntoView(hash.slice(1), $fullEventHistory);
+    }, 50);
   };
 
   $: $refresh, fetchEvents(namespace, workflowId, runId, $eventFilterSort);
@@ -112,7 +135,7 @@
         {compact}
         expandAll={$expandAllEvents === 'true'}
         {initialItem}
-        active={activeRowIndex === index}
+        active={activeRowIndex === index || event.id === hash.slice(1)}
         onRowClick={() => setActiveRowIndex(index)}
       />
     {:else}

src/lib/holocene/pagination.svelte

@@ -97,6 +97,7 @@
   $: floatStyle = getFloatStyle({ width, height, screenWidth });
 
   async function handleKeydown(event: KeyboardEvent) {
+    console.log(event);
     switch (event.code) {
       case 'ArrowRight':
       case 'KeyL':
@@ -206,6 +207,7 @@
     initialItem={$store.initialItem}
     activeRowIndex={$store.activeRowIndex}
     setActiveRowIndex={store.setActiveRowIndex}
+    store={$store}
   />
   <nav
     class={`flex ${
@@ -228,7 +230,10 @@
         <button
           class="caret"
           disabled={!$store.hasPrevious}
-          on:click={() => store.previous()}
+          on:click={() => {
+            store.previous();
+            handlePageChange();
+          }}
           aria-label={previousButtonLabel}
         >
           <span
@@ -247,7 +252,10 @@
         <button
           class="caret"
           disabled={!$store.hasNext}
-          on:click={() => store.next()}
+          on:click={() => {
+            store.next();
+            handlePageChange();
+          }}
           aria-label={nextButtonLabel}
         >
           <span