From 2b79bd98593d27601863db511b805a4ec722cd6b Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 19 Feb 2024 15:17:45 +0100
Subject: [PATCH] fix: improve runs page drag

---
 frontend/src/lib/components/RunChart.svelte            |  2 ++
 frontend/src/lib/components/runs/JobLoader.svelte      |  2 +-
 .../routes/(root)/(logged)/runs/[...path]/+page.svelte | 10 +++++++---
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte
index deaa0773a2..9fc6bf6a58 100644
--- a/frontend/src/lib/components/RunChart.svelte
+++ b/frontend/src/lib/components/RunChart.svelte
@@ -75,6 +75,7 @@
 			enabled: true,
 			modifierKey: 'ctrl' as 'ctrl',
 			onPanComplete: ({ chart }) => {
+				console.log(chart.scales.x.min)
 				dispatch('zoom', {
 					min: addSeconds(new Date(chart.scales.x.min), -1),
 					max: addSeconds(new Date(chart.scales.x.max), 1)
@@ -128,6 +129,7 @@
 		minTimeSet: string | undefined,
 		maxTimeSet: string | undefined
 	) {
+		console.log(minTimeSet, maxTimeSet)
 		let minTimeSetDate = minTimeSet ? new Date(minTimeSet) : undefined
 		let maxTimeSetDate = maxTimeSet ? new Date(maxTimeSet) : undefined
 		if (minTimeSetDate && maxTimeSetDate) {
diff --git a/frontend/src/lib/components/runs/JobLoader.svelte b/frontend/src/lib/components/runs/JobLoader.svelte
index ff703c0699..323792b888 100644
--- a/frontend/src/lib/components/runs/JobLoader.svelte
+++ b/frontend/src/lib/components/runs/JobLoader.svelte
@@ -86,7 +86,7 @@
 			jobKinds,
 			success: success == 'success' ? true : success == 'failure' ? false : undefined,
 			running: success == 'running' ? true : undefined,
-			isSkipped: isSkipped ? true : undefined,
+			isSkipped: isSkipped ? undefined : false,
 			isFlowStep: jobKindsCat != 'all' ? false : undefined,
 			args:
 				argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index 1f9bb77238..8a12cc5556 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -322,6 +322,8 @@
 
 		<div class="p-2 w-full">
 			<RunChart
+				minTimeSet={minTs}
+				maxTimeSet={maxTs}
 				maxIsNow={maxTs == undefined}
 				jobs={completedJobs}
 				on:zoom={async (e) => {
@@ -480,6 +482,8 @@
 		</div>
 		<div class="p-2 w-full">
 			<RunChart
+				minTimeSet={minTs}
+				maxTimeSet={maxTs}
 				maxIsNow={maxTs == undefined}
 				jobs={completedJobs}
 				on:zoom={async (e) => {
@@ -489,8 +493,8 @@
 				}}
 			/>
 		</div>
-		<div class="flex flex-col gap-1 md:flex-row w-full p-4">
-			<div class="flex items-center flex-row gap-2 grow mb-4">
+		<div class="flex flex-col gap-4 md:flex-row w-full p-4">
+			<div class="flex items-center flex-row gap-2 grow">
 				{#if queue_count}
 					<RunsQueue {queue_count} {allWorkspaces} />
 				{/if}
@@ -503,7 +507,7 @@
 					on:click={async () => (cancelAllJobs = true)}>Cancel All</Button
 				>
 			</div>
-			<div class="flex flex-row gap-1 w-full max-w-xl">
+			<div class="flex flex-row gap-1 w-full max-w-xl items-center">
 				<div class="relative w-full">
 					<div class="flex gap-1 relative w-full">
 						<span class="text-xs absolute -top-4">Min datetime</span>