feat: Scroll to element in virtual list when clicking on graph point (#4532)

* Scroll to element in virtual list when clicking on graph point

* Remove debug statements

* Remove reactive statement in favor of eventful triggering

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)
 			}
 		},
 

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
+			}
+		}
+	}
 </script>
 
 <svelte:window on:resize={() => computeHeight()} />
@@ -248,6 +261,9 @@
 			itemSize={42}
 			overscanCount={20}
 			{stickyIndices}
+			{scrollToIndex}
+			scrollToAlignment="center"
+			scrollToBehaviour="smooth"
 		>
 			<div slot="item" let:index let:style {style} class="w-full">
 				{#if flatJobs}

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'}
 				<ConcurrentJobsChart
@@ -988,6 +993,7 @@
 							on:filterByConcurrencyKey={filterByConcurrencyKey}
 							on:filterByTag={filterByTag}
 							on:filterBySchedule={filterBySchedule}
+							bind:this={runsTable}
 						/>
 					{:else}
 						<div class="gap-1 flex flex-col">
@@ -1131,6 +1137,9 @@
 						manualDatePicker?.resetChoice()
 						jobLoader?.loadJobs(minTs, maxTs, true)
 					}}
+					on:pointClicked={(e) => {
+						runsTable.scrollToRun(e.detail)
+					}}
 				/>
 			{:else if graph === 'ConcurrencyChart'}
 				<ConcurrentJobsChart
@@ -1359,6 +1368,7 @@
 				on:filterByLabel={filterByLabel}
 				on:filterByConcurrencyKey={filterByConcurrencyKey}
 				on:filterByTag={filterByTag}
+				bind:this={runsTable}
 			/>
 		</div>
 	</div>