diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte index 3898bded6d..e976fd3351 100644 --- a/frontend/src/lib/components/RunChart.svelte +++ b/frontend/src/lib/components/RunChart.svelte @@ -249,6 +249,7 @@ if (canSelect) { const ids = u.map((j) => data.datasets[j.datasetIndex].data[j.index].id) selectedIds = ids + dispatch('pointClicked', ids) } }, diff --git a/frontend/src/lib/components/runs/RunsTable.svelte b/frontend/src/lib/components/runs/RunsTable.svelte index e98e00d967..291709e2a5 100644 --- a/frontend/src/lib/components/runs/RunsTable.svelte +++ b/frontend/src/lib/components/runs/RunsTable.svelte @@ -174,6 +174,19 @@ computeHeight() }) const dispatch = createEventDispatcher() + + let scrollToIndex = 0 + + export function scrollToRun(ids: string[]) { + if (flatJobs && ids.length > 0) { + const i = flatJobs.findIndex( + (jobOrDate) => jobOrDate.type === 'job' && jobOrDate.job.id === ids[0] + ) + if (i !== -1) { + scrollToIndex = i + } + } + } computeHeight()} /> @@ -248,6 +261,9 @@ itemSize={42} overscanCount={20} {stickyIndices} + {scrollToIndex} + scrollToAlignment="center" + scrollToBehaviour="smooth" >
{#if flatJobs} diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte index 419465c623..d7a2601df0 100644 --- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte +++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte @@ -166,6 +166,8 @@ let manualDatePicker: ManuelDatePicker + let runsTable: RunsTable + $: (user || label || folder || @@ -755,14 +757,17 @@ minTimeSet={minTs} maxTimeSet={maxTs} maxIsNow={maxTs == undefined} - jobs={completedJobs} on:loadExtra={loadExtra} + jobs={completedJobs} on:zoom={async (e) => { minTs = e.detail.min.toISOString() maxTs = e.detail.max.toISOString() manualDatePicker?.resetChoice() jobLoader?.loadJobs(minTs, maxTs, true) }} + on:pointClicked={(e) => { + runsTable.scrollToRun(e.detail) + }} /> {:else if graph === 'ConcurrencyChart'} {:else}
@@ -1131,6 +1137,9 @@ manualDatePicker?.resetChoice() jobLoader?.loadJobs(minTs, maxTs, true) }} + on:pointClicked={(e) => { + runsTable.scrollToRun(e.detail) + }} /> {:else if graph === 'ConcurrencyChart'}