windmill-components 1.613.5 → 1.623.1

package/package/components/RunsPage.svelte

@@ -1,3 +1,6 @@
+<script module lang="ts">export let DEFAULT_RUNS_PER_PAGE = 1000;
+</script>
+
 <script lang="ts">import { JobService, UserService, FolderService, ScriptService, FlowService, OpenAPI } from '../gen';
 import { sendUserToast } from '../toast';
 import { userStore, workspaceStore, userWorkspaces } from '../stores';
@@ -8,15 +11,17 @@ import Tooltip from './Tooltip.svelte';
 import CalendarPicker from './common/calendarPicker/CalendarPicker.svelte';
 import RunsTable from './runs/RunsTable.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import RunsFilter, { runsFiltersSchema } from './runs/RunsFilter.svelte';
+import RunsFilter from './runs/RunsFilter.svelte';
 import Toggle from './Toggle.svelte';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import RunsQueue from './runs/RunsQueue.svelte';
 import { twMerge } from 'tailwind-merge';
 import ManuelDatePicker from './runs/ManuelDatePicker.svelte';
-import { computeJobKinds, useJobsLoader } from './runs/useJobsLoader.svelte';
+import JobsLoader from './runs/JobsLoader.svelte';
 import { Calendar, Clock, TriangleAlert } from 'lucide-svelte';
 import ConcurrentJobsChart from './ConcurrentJobsChart.svelte';
+import { goto } from '$app/navigation';
+import { base } from '$app/paths';
 import { isJobSelectable } from '../utils';
 import BatchReRunOptionsPane, {} from './runs/BatchReRunOptionsPane.svelte';
 import { untrack } from 'svelte';
@@ -30,22 +35,102 @@ import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import Select from './select/Select.svelte';
 import AnimatedPane from './splitPanes/AnimatedPane.svelte';
-import { useSearchParams } from '../svelte5UtilsKit.svelte';
-import { StaleWhileLoading } from '../svelte5Utils.svelte';
-let { initialPath } = $props();
-let filters = useSearchParams(runsFiltersSchema);
-// Initialize path filter from route param if provided and not already set via query params
-if (initialPath && !filters.path) {
-    filters.path = initialPath;
-}
+let { perPage = $bindable() } = $props();
+let jobs = $state();
 let selectedIds = $state([]);
 let loadingSelectedIds = $state(false);
 let selectedWorkspace = $state(undefined);
 let batchReRunOptions = $state({ flow: {}, script: {} });
-let jobKinds = $derived(computeJobKinds(filters.job_kinds));
+// All Filters
+// Filter by
+let path = $state(page.params.path ?? null);
+let worker = $state(page.url.searchParams.get('worker'));
+let user = $state(page.url.searchParams.get('user'));
+let folder = $state(page.url.searchParams.get('folder'));
+let label = $state(page.url.searchParams.get('label'));
+let allowWildcards = $state(page.url.searchParams.get('allow_wildcards') == 'true');
+let concurrencyKey = $state(page.url.searchParams.get('concurrency_key'));
+let tag = $state(page.url.searchParams.get('tag'));
+// Rest of filters handled by RunsFilter
+let success = $state((page.url.searchParams.get('success') ?? undefined));
+let showSkipped = $state(page.url.searchParams.get('show_skipped') != undefined
+    ? page.url.searchParams.get('show_skipped') == 'true'
+    : false);
+let showSchedules = $state(page.url.searchParams.get('show_schedules') != undefined
+    ? page.url.searchParams.get('show_schedules') == 'true'
+    : localStorage.getItem('show_schedules_in_run') == 'false'
+        ? false
+        : true);
+let showFutureJobs = $state(page.url.searchParams.get('show_future_jobs') != undefined
+    ? page.url.searchParams.get('show_future_jobs') == 'true'
+    : localStorage.getItem('show_future_jobs') == 'false'
+        ? false
+        : true);
+let argFilter = $state(page.url.searchParams.get('arg')
+    ? JSON.parse(decodeURIComponent(page.url.searchParams.get('arg') ?? '{}'))
+    : undefined);
+let resultFilter = $state(page.url.searchParams.get('result')
+    ? JSON.parse(decodeURIComponent(page.url.searchParams.get('result') ?? '{}'))
+    : undefined);
+let jobTriggerKind = $state(page.url.searchParams.get('job_trigger_kind') ?? undefined);
+// Handled on the main page
+let minTs = $state(page.url.searchParams.get('min_ts') ?? undefined);
+let maxTs = $state(page.url.searchParams.get('max_ts') ?? undefined);
+let schedulePath = $state(page.url.searchParams.get('schedule_path') ?? undefined);
+let jobKindsCat = $state(page.url.searchParams.get('job_kinds') ?? 'runs');
+let allWorkspaces = $state(page.url.searchParams.get('all_workspaces') == 'true');
+let lastFetchWentToEnd = $state(false);
+function loadFromQuery() {
+    path = page.params.path ?? null;
+    user = page.url.searchParams.get('user');
+    folder = page.url.searchParams.get('folder');
+    label = page.url.searchParams.get('label');
+    concurrencyKey = page.url.searchParams.get('concurrency_key');
+    tag = page.url.searchParams.get('tag');
+    worker = page.url.searchParams.get('worker');
+    allowWildcards = page.url.searchParams.get('allow_wildcards') == 'true';
+    // Rest of filters handled by RunsFilter
+    success = (page.url.searchParams.get('success') ?? undefined);
+    showSkipped =
+        page.url.searchParams.get('show_skipped') != undefined
+            ? page.url.searchParams.get('show_skipped') == 'true'
+            : false;
+    showSchedules =
+        page.url.searchParams.get('show_schedules') != undefined
+            ? page.url.searchParams.get('show_schedules') == 'true'
+            : localStorage.getItem('show_schedules_in_run') == 'false'
+                ? false
+                : true;
+    showFutureJobs =
+        page.url.searchParams.get('show_future_jobs') != undefined
+            ? page.url.searchParams.get('show_future_jobs') == 'true'
+            : localStorage.getItem('show_future_jobs') == 'false'
+                ? false
+                : true;
+    argFilter = page.url.searchParams.get('arg')
+        ? JSON.parse(decodeURIComponent(page.url.searchParams.get('arg') ?? '{}'))
+        : undefined;
+    resultFilter = page.url.searchParams.get('result')
+        ? JSON.parse(decodeURIComponent(page.url.searchParams.get('result') ?? '{}'))
+        : undefined;
+    jobTriggerKind = page.url.searchParams.get('job_trigger_kind') ?? undefined;
+    // Handled on the main page
+    minTs = page.url.searchParams.get('min_ts') ?? undefined;
+    maxTs = page.url.searchParams.get('max_ts') ?? undefined;
+    schedulePath = page.url.searchParams.get('schedule_path') ?? undefined;
+    perPage = parseInt(page.url.searchParams.get('per_page') ?? DEFAULT_RUNS_PER_PAGE.toString());
+    jobKindsCat = page.url.searchParams.get('job_kinds') ?? 'runs';
+    allWorkspaces = page.url.searchParams.get('all_workspaces') == 'true';
+}
+let queue_count = $state(undefined);
+let suspended_count = $state(undefined);
+let jobKinds = $state(undefined);
+let loading = $state(false);
 let paths = $state([]);
 let usernames = $state([]);
 let folders = $state([]);
+let completedJobs = $state(undefined);
+let extendedJobs = $state(undefined);
 let argError = $state('');
 let resultError = $state('');
 let filterTimeout = undefined;
@@ -63,52 +148,173 @@ function getAutoRefresh() {
         return true;
     }
 }
-let manualDatePicker = $state(undefined);
+let innerWidth = $state(window.innerWidth);
+let jobsLoader = $state(undefined);
+let externalJobs = $state(undefined);
 let graph = $state(typeOfChart(page.url.searchParams.get('graph')));
 let graphIsRunsChart = $state(untrack(() => graph) === 'RunChart');
-let innerWidth = $state(window.innerWidth);
-let jobsLoader = useJobsLoader(() => ({
-    filters,
-    computeMinAndMax: manualDatePicker?.computeMinMax,
-    jobKinds,
-    autoRefresh,
-    argError,
-    resultError,
-    lookback: graphIsRunsChart ? 0 : lookback,
-    onSetPerPage: (p) => (filters.per_page = p),
-    onSetMinMaxTs: (minTs, maxTs) => ((filters.min_ts = minTs), (filters.max_ts = maxTs)),
-    currentWorkspace: $workspaceStore ?? ''
-}));
-let lastFetchWentToEnd = $derived(jobsLoader.lastFetchWentToEnd);
-let queue_count = $derived(jobsLoader.queue_count);
-let suspended_count = $derived(jobsLoader.suspended_count);
-let loading = $derived(jobsLoader.loading);
-let externalJobs = $derived(jobsLoader.externalJobs);
-let extendedJobs = $derived(jobsLoader.extendedJobs);
-// Avoid flicker, but still show empty if loading takes too long
-let debouncedCompletedJobs = new StaleWhileLoading(() => jobsLoader.completedJobs);
-let debouncedJobs = new StaleWhileLoading(() => jobsLoader.jobs);
-let completedJobs = $derived(jobsLoader.completedJobs ?? debouncedCompletedJobs.current);
-let jobs = $derived(jobsLoader.jobs ?? debouncedJobs.current);
+let manualDatePicker = $state(undefined);
 let runsTable = $state(undefined);
+function setQuery(replaceState) {
+    let searchParams = new URLSearchParams();
+    if (user) {
+        searchParams.set('user', user);
+    }
+    else {
+        searchParams.delete('user');
+    }
+    if (worker) {
+        searchParams.set('worker', worker);
+    }
+    else {
+        searchParams.delete('worker');
+    }
+    if (folder) {
+        searchParams.set('folder', folder);
+    }
+    else {
+        searchParams.delete('folder');
+    }
+    if (success !== undefined) {
+        searchParams.set('success', success.toString());
+    }
+    else {
+        searchParams.delete('success');
+    }
+    if (showSkipped) {
+        searchParams.set('show_skipped', showSkipped.toString());
+    }
+    else {
+        searchParams.delete('show_skipped');
+    }
+    if (showSchedules) {
+        searchParams.set('show_schedules', showSchedules.toString());
+    }
+    else {
+        searchParams.delete('show_schedules');
+    }
+    if (showFutureJobs) {
+        searchParams.set('show_future_jobs', showFutureJobs.toString());
+    }
+    else {
+        searchParams.delete('show_future_jobs');
+    }
+    if (allWorkspaces && $workspaceStore == 'admins') {
+        searchParams.set('all_workspaces', allWorkspaces.toString());
+        searchParams.set('workspace', 'admins');
+    }
+    else {
+        searchParams.delete('all_workspaces');
+    }
+    // ArgFilter is an object. Encode it to a string
+    if (argFilter) {
+        searchParams.set('arg', encodeURIComponent(JSON.stringify(argFilter)));
+    }
+    else {
+        searchParams.delete('arg');
+    }
+    if (resultFilter) {
+        searchParams.set('result', encodeURIComponent(JSON.stringify(resultFilter)));
+    }
+    else {
+        searchParams.delete('result');
+    }
+    if (jobTriggerKind) {
+        searchParams.set('job_trigger_kind', jobTriggerKind);
+    }
+    else {
+        searchParams.delete('job_trigger_kind');
+    }
+    if (schedulePath) {
+        searchParams.set('schedule_path', schedulePath);
+    }
+    else {
+        searchParams.delete('schedule_path');
+    }
+    if (jobKindsCat != 'runs') {
+        searchParams.set('job_kinds', jobKindsCat);
+    }
+    else {
+        searchParams.delete('job_kinds');
+    }
+    if (minTs) {
+        searchParams.set('min_ts', minTs);
+    }
+    else {
+        searchParams.delete('min_ts');
+    }
+    if (maxTs) {
+        searchParams.set('max_ts', maxTs);
+    }
+    else {
+        searchParams.delete('max_ts');
+    }
+    if (concurrencyKey) {
+        searchParams.set('concurrency_key', concurrencyKey);
+    }
+    else {
+        searchParams.delete('concurrency_key');
+    }
+    if (tag) {
+        searchParams.set('tag', tag);
+    }
+    else {
+        searchParams.delete('tag');
+    }
+    if (label) {
+        searchParams.set('label', label);
+    }
+    else {
+        searchParams.delete('label');
+    }
+    if (allowWildcards) {
+        searchParams.set('allow_wildcards', allowWildcards.toString());
+    }
+    else {
+        searchParams.delete('allow_wildcards');
+    }
+    if (graph != 'RunChart') {
+        searchParams.set('graph', graph);
+    }
+    else {
+        searchParams.delete('graph');
+    }
+    if (perPage != DEFAULT_RUNS_PER_PAGE) {
+        searchParams.set('per_page', perPage.toString());
+    }
+    else {
+        searchParams.delete('per_page');
+    }
+    let newPath = path ? `/${path}` : '';
+    let newUrl = `${base}/runs${newPath}?${searchParams.toString()}`;
+    if (page.url.searchParams.toString() != searchParams.toString() ||
+        page.url.pathname != newUrl.split('?')[0]) {
+        // replaceState(newUrl.toString(), $page.state)
+        goto(newUrl.toString(), { replaceState: replaceState, keepFocus: true });
+    }
+}
 function reloadJobsWithoutFilterError() {
     if (resultError == '' && argError == '') {
         filterTimeout && clearTimeout(filterTimeout);
         filterTimeout = setTimeout(() => {
-            jobsLoader?.loadJobs(true);
+            jobsLoader?.loadJobs(minTs, maxTs, true);
         }, 2000);
     }
 }
 function reset() {
-    filters.min_ts = null;
-    filters.max_ts = null;
+    path = page.params.path ?? null;
+    minTs = undefined;
+    maxTs = undefined;
+    jobs = undefined;
+    completedJobs = undefined;
+    lastFetchWentToEnd = false;
     selectedManualDate = 0;
     selectedIds = [];
-    filters.schedule_path = null;
+    schedulePath = undefined;
     batchReRunOptions = { flow: {}, script: {} };
     selectionMode = false;
     selectedWorkspace = undefined;
-    jobsLoader?.loadJobs(true);
+    jobsLoader?.loadJobs(minTs, maxTs, true);
 }
 async function loadUsernames() {
     usernames = await UserService.listUsernames({ workspace: $workspaceStore });
@@ -123,27 +329,89 @@ async function loadPaths() {
     const npaths_flows = await FlowService.listFlowPaths({ workspace: $workspaceStore ?? '' });
     paths = npaths_scripts.concat(npaths_flows).sort();
 }
-function resetAndFilterBy(setter) {
-    return (e) => {
-        filters.path = null;
-        filters.user = null;
-        filters.folder = null;
-        filters.label = null;
-        filters.concurrency_key = null;
-        filters.tag = null;
-        filters.worker = null;
-        filters.schedule_path = null;
-        setter(e.detail);
-    };
+function filterByPath(e) {
+    path = e.detail;
+    user = null;
+    folder = null;
+    label = null;
+    concurrencyKey = null;
+    tag = null;
+    schedulePath = undefined;
+    worker = null;
+}
+function filterByUser(e) {
+    path = null;
+    folder = null;
+    user = e.detail;
+    label = null;
+    concurrencyKey = null;
+    tag = null;
+    schedulePath = undefined;
+}
+function filterByFolder(e) {
+    path = null;
+    user = null;
+    folder = e.detail;
+    label = null;
+    concurrencyKey = null;
+    tag = null;
+    schedulePath = undefined;
+    worker = null;
 }
-const filterByPath = resetAndFilterBy((s) => (filters.path = s));
-const filterByUser = resetAndFilterBy((s) => (filters.user = s));
-const filterByFolder = resetAndFilterBy((s) => (filters.folder = s));
-const filterByLabel = resetAndFilterBy((s) => (filters.label = s));
-const filterByConcurrencyKey = resetAndFilterBy((s) => (filters.concurrency_key = s));
-const filterByTag = resetAndFilterBy((s) => (filters.tag = s));
-const filterBySchedule = resetAndFilterBy((s) => (filters.schedule_path = s));
-const filterByWorker = resetAndFilterBy((s) => (filters.worker = s));
+function filterByLabel(e) {
+    path = null;
+    user = null;
+    folder = null;
+    label = e.detail;
+    concurrencyKey = null;
+    tag = null;
+    schedulePath = undefined;
+    worker = null;
+    allowWildcards = false;
+}
+function filterByConcurrencyKey(e) {
+    path = null;
+    user = null;
+    folder = null;
+    label = null;
+    concurrencyKey = e.detail;
+    tag = null;
+    schedulePath = undefined;
+    worker = null;
+}
+function filterByTag(e) {
+    path = null;
+    user = null;
+    folder = null;
+    label = null;
+    concurrencyKey = null;
+    tag = e.detail;
+    schedulePath = undefined;
+    worker = null;
+    allowWildcards = false;
+}
+function filterBySchedule(e) {
+    path = null;
+    user = null;
+    folder = null;
+    label = null;
+    concurrencyKey = null;
+    tag = null;
+    schedulePath = e.detail;
+    worker = null;
+}
+function filterByWorker(e) {
+    path = null;
+    user = null;
+    folder = null;
+    label = null;
+    concurrencyKey = null;
+    tag = null;
+    schedulePath = undefined;
+    worker = e.detail;
+    allowWildcards = false;
+}
+let calendarChangeTimeout = $state(undefined);
 function typeOfChart(s) {
     switch (s) {
         case 'RunChart':
@@ -170,47 +438,43 @@ async function onSetSelectionMode(mode) {
     }
 }
 function getSelectedFilters() {
-    const argFilter = filters.arg && JSON.parse(filters.arg);
-    const resultFilter = filters.result && JSON.parse(filters.result);
     return {
         workspace: $workspaceStore ?? '',
-        startedBefore: filters.max_ts ?? undefined,
-        startedAfter: filters.min_ts ?? undefined,
-        schedulePath: filters.schedule_path ?? undefined,
-        scriptPathExact: filters.path === null || filters.path === '' ? undefined : filters.path,
-        createdBy: filters.user || undefined,
-        scriptPathStart: filters.folder ? `f/${filters.folder}/` : undefined,
+        startedBefore: maxTs,
+        startedAfter: minTs,
+        schedulePath,
+        scriptPathExact: path === null || path === '' ? undefined : path,
+        createdBy: user === null || user === '' ? undefined : user,
+        scriptPathStart: folder === null || folder === '' ? undefined : `f/${folder}/`,
         jobKinds: jobKinds == '' ? undefined : jobKinds,
-        success: filters.success == 'success' ? true : filters.success == 'failure' ? false : undefined,
-        running: filters.success == 'running' || filters.success == 'suspended'
+        success: success == 'success' ? true : success == 'failure' ? false : undefined,
+        running: success == 'running' || success == 'suspended'
             ? true
-            : filters.success == 'waiting'
+            : success == 'waiting'
                 ? false
                 : undefined,
-        isSkipped: filters.show_skipped ? undefined : false,
+        isSkipped: showSkipped ? undefined : false,
         // isFlowStep: jobKindsCat != 'all' ? false : undefined,
-        hasNullParent: filters.path != undefined || filters.path != undefined || filters.job_kinds != 'all'
+        hasNullParent: path != undefined || path != undefined || jobKindsCat != 'all' ? true : undefined,
+        label: label === null || label === '' ? undefined : label,
+        tag: tag === null || tag === '' ? undefined : tag,
+        isNotSchedule: showSchedules == false ? true : undefined,
+        suspended: success == 'waiting' ? false : success == 'suspended' ? true : undefined,
+        scheduledForBeforeNow: showFutureJobs == false || success == 'waiting' || success == 'suspended'
             ? true
             : undefined,
-        label: filters.label || undefined,
-        tag: filters.tag || undefined,
-        isNotSchedule: filters.show_schedules == false ? true : undefined,
-        suspended: filters.success == 'waiting' ? false : filters.success == 'suspended' ? true : undefined,
-        scheduledForBeforeNow: filters.show_future_jobs == false ||
-            filters.success == 'waiting' ||
-            filters.success == 'suspended'
-            ? true
+        args: argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
+        result: resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
+            ? resultFilter
             : undefined,
-        args: argFilter && Object.keys(argFilter).length && !argError ? argFilter : undefined,
-        result: resultFilter && Object.keys(resultFilter).length && !resultError ? resultFilter : undefined,
-        jobTriggerKind: filters.job_trigger_kind || undefined,
-        allWorkspaces: filters.all_workspaces || undefined,
-        allowWildcards: filters.allow_wildcards || undefined
+        jobTriggerKind,
+        allWorkspaces: allWorkspaces ? true : undefined,
+        allowWildcards: allowWildcards ? true : undefined
     };
 }
 $effect(() => {
-    if (filters.job_trigger_kind === 'schedule' && !filters.show_schedules) {
-        filters.show_schedules = true;
+    if (jobTriggerKind === 'schedule' && !showSchedules) {
+        showSchedules = true;
     }
 });
 async function cancelJobs(uuidsToCancel, forceCancel = false) {
@@ -220,7 +484,7 @@ async function cancelJobs(uuidsToCancel, forceCancel = false) {
         forceCancel: forceCancel
     });
     selectedIds = [];
-    jobsLoader?.loadJobs(true, true);
+    jobsLoader?.loadJobs(minTs, maxTs, true, true);
     sendUserToast(`Canceled ${uuids.length} jobs`);
     selectionMode = false;
 }
@@ -318,14 +582,14 @@ async function reRunJobs(jobIdsToReRun) {
     });
     selectedIds = [];
     batchReRunOptions = { flow: {}, script: {} };
-    jobsLoader?.loadJobs(true, true);
+    jobsLoader?.loadJobs(minTs, maxTs, true, true);
     selectionMode = false;
 }
 async function onReRunFilteredJobs() {
     const selectedFilters = getSelectedFilters();
     selectedIds = [];
     loadingSelectedIds = true;
-    if (filters.job_kinds !== 'runs') {
+    if (jobKindsCat !== 'runs') {
         sendUserToast('Batch re-run is only supported for scripts and flows', true);
     }
     selectedIds = await JobService.listFilteredJobsUuids({
@@ -349,28 +613,66 @@ function setLookback(lookbackInDays) {
     lookback = lookbackInDays;
 }
 async function loadExtra() {
-    await jobsLoader?.loadExtraJobs();
+    if (jobsLoader) {
+        lastFetchWentToEnd = await jobsLoader.loadExtraJobs();
+    }
 }
 function jobsFilter(f) {
-    filters.path = null;
-    filters.user = null;
-    filters.folder = null;
-    filters.label = null;
-    filters.concurrency_key = null;
-    filters.tag = null;
-    filters.worker = null;
-    filters.schedule_path = null;
-    if (filters.success == f) {
-        filters.success = null;
+    path = null;
+    user = null;
+    folder = null;
+    label = null;
+    concurrencyKey = null;
+    schedulePath = undefined;
+    path = null;
+    tag = null;
+    worker = null;
+    if (success == f) {
+        success = undefined;
     }
     else {
-        filters.success = f;
+        success = f;
     }
-    filters.job_kinds = 'all';
+    jobKindsCat = 'all';
 }
 $effect(() => {
     loadingSelectedIds && selectedIds.length && setTimeout(() => (loadingSelectedIds = false), 250);
 });
+$effect(() => {
+    ;
+    [
+        user,
+        worker,
+        label,
+        folder,
+        path,
+        success !== undefined,
+        showSkipped,
+        showSchedules,
+        showFutureJobs,
+        argFilter,
+        resultFilter,
+        jobTriggerKind,
+        schedulePath,
+        jobKindsCat,
+        concurrencyKey,
+        tag,
+        graph,
+        maxTs,
+        minTs,
+        allWorkspaces,
+        allowWildcards,
+        $workspaceStore,
+        perPage
+    ];
+    untrack(() => setQuery(false));
+});
+$effect(() => {
+    minTs || untrack(() => setQuery(true));
+});
+$effect(() => {
+    maxTs || untrack(() => setQuery(true));
+});
 $effect(() => {
     if ($workspaceStore) {
         untrack(() => {
@@ -411,9 +713,47 @@ let tableTopBarWidth = $state(0);
 const smallScreenWidth = 1920;
 const verySmallScreenWidth = 1300;
 let forceCancelInPopup = $state(false);
-const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last ${filters.per_page} jobs are taken into account: a job that was started earlier than this limit will not be taken into account`);
+const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last ${perPage} jobs are taken into account: a job that was started earlier than this limit will not be taken into account`);
 </script>
 
+<JobsLoader
+	{allowWildcards}
+	{allWorkspaces}
+	bind:jobs
+	{user}
+	{folder}
+	{path}
+	{worker}
+	{label}
+	{success}
+	{showSkipped}
+	{argFilter}
+	{resultFilter}
+	{jobTriggerKind}
+	{showSchedules}
+	{showFutureJobs}
+	{schedulePath}
+	{jobKindsCat}
+	computeMinAndMax={manualDatePicker?.computeMinMax}
+	bind:minTs
+	bind:maxTs
+	bind:jobKinds
+	bind:queue_count
+	bind:suspended_count
+	{autoRefresh}
+	bind:completedJobs
+	bind:externalJobs
+	bind:extendedJobs
+	{concurrencyKey}
+	{argError}
+	{resultError}
+	{tag}
+	bind:perPage
+	bind:loading
+	bind:this={jobsLoader}
+	lookback={graphIsRunsChart ? 0 : lookback}
+/>
+
 <ConfirmationModal
 	title={askingForConfirmation?.title ?? ''}
 	confirmationText={askingForConfirmation?.confirmBtnText ?? ''}
@@ -470,6 +810,7 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 <svelte:window
 	onpopstate={() => {
 		reset()
+		loadFromQuery()
 	}}
 />
 
@@ -503,7 +844,7 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 
 				<!-- Queue -->
 				<RunsQueue
-					success={filters.success}
+					{success}
 					{queue_count}
 					{suspended_count}
 					onJobsWaiting={() => {
@@ -520,52 +861,70 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 				<!-- Dates -->
 				<div class="flex flex-row gap-2">
 					<RunOption label="From" for="min-datetimes">
-						{#if filters.min_ts || filters.max_ts}
+						{#if minTs || maxTs}
 							<input
 								type="text"
 								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
-								value={filters.min_ts
-									? new Date(filters.min_ts).toLocaleString()
-									: 'zoom x axis to set min'}
+								value={minTs ? new Date(minTs).toLocaleString() : 'zoom x axis to set min'}
 								disabled
 								name="min-datetimes"
 							/>
 						{/if}
 						<CalendarPicker
 							clearable={true}
-							bind:date={filters.min_ts}
-							on:clear={() => (filters.min_ts = null)}
+							date={minTs}
 							label="From"
-							class={filters.min_ts || filters.max_ts
-								? ''
-								: 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
+							class={minTs || maxTs ? '' : 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
+							on:change={async ({ detail }) => {
+								minTs = new Date(detail).toISOString()
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobsLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
+							}}
+							on:clear={async () => {
+								minTs = undefined
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobsLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
+							}}
 						/>
 					</RunOption>
 
 					<RunOption label="To" for="max-datetimes">
-						{#if filters.max_ts || filters.min_ts}
+						{#if maxTs || minTs}
 							<input
 								type="text"
 								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
-								value={filters.max_ts
-									? new Date(filters.max_ts).toLocaleString()
-									: 'zoom x axis to set max'}
+								value={maxTs ? new Date(maxTs).toLocaleString() : 'zoom x axis to set max'}
 								name="max-datetimes"
 								disabled
 							/>
 						{/if}
 						<CalendarPicker
 							clearable={true}
-							on:clear={() => (filters.max_ts = null)}
-							bind:date={filters.max_ts}
+							date={maxTs}
 							label="To"
-							class={filters.min_ts || filters.max_ts
-								? ''
-								: 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
+							class={minTs || maxTs ? '' : 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
+							on:change={async ({ detail }) => {
+								maxTs = new Date(detail).toISOString()
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobsLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
+							}}
+							on:clear={async () => {
+								maxTs = undefined
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobsLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
+							}}
 						/>
 					</RunOption>
 
-					{#if filters.min_ts || filters.max_ts}
+					{#if minTs || maxTs}
 						<RunOption label="Reset" for="reset" noLabel>
 							<Button variant="default" size="xs" onClick={reset} btnClasses="h-9">Reset</Button>
 						</RunOption>
@@ -575,28 +934,28 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 				<!-- Filters 1 -->
 				<div class="flex flex-row gap-2">
 					<RunsFilter
-						bind:allowWildcards={filters.allow_wildcards}
-						bind:user={filters.user}
-						bind:folder={filters.folder}
-						bind:label={filters.label}
-						bind:concurrencyKey={filters.concurrency_key}
-						bind:tag={filters.tag}
-						bind:worker={filters.worker}
-						bind:showSkipped={filters.show_skipped}
-						bind:path={filters.path}
-						bind:success={filters.success}
-						bind:jobTriggerKind={filters.job_trigger_kind}
+						bind:allowWildcards
+						bind:showSkipped
+						bind:user
+						bind:folder
+						bind:label
+						bind:concurrencyKey
+						bind:tag
+						bind:worker
+						bind:path
+						bind:success
+						bind:argFilter
+						bind:resultFilter
+						bind:jobTriggerKind
 						bind:argError
 						bind:resultError
-						bind:jobKindsCat={filters.job_kinds}
-						bind:allWorkspaces={filters.all_workspaces}
-						bind:schedulePath={filters.schedule_path}
-						bind:argFilter={filters.arg}
-						bind:resultFilter={filters.result}
+						bind:jobKindsCat
+						bind:allWorkspaces
+						bind:schedulePath
 						on:change={reloadJobsWithoutFilterError}
 						on:successChange={(e) => {
-							if (e.detail == 'running' && filters.max_ts != undefined) {
-								filters.max_ts = null
+							if (e.detail == 'running' && maxTs != undefined) {
+								maxTs = undefined
 							}
 						}}
 						{usernames}
@@ -604,7 +963,7 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 						{paths}
 						mobile={innerWidth < verySmallScreenWidth}
 						small={innerWidth < smallScreenWidth}
-						calendarSmall={!filters.min_ts && !filters.max_ts}
+						calendarSmall={!minTs && !maxTs}
 					/>
 				</div>
 			</div>
@@ -678,17 +1037,17 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 					{lastFetchWentToEnd}
 					bind:selectedIds
 					canSelect={!selectionMode}
-					minTimeSet={filters.min_ts}
-					maxTimeSet={filters.max_ts}
+					minTimeSet={minTs}
+					maxTimeSet={maxTs}
 					totalRowsFetched={jobs?.length ?? 0}
-					maxIsNow={filters.max_ts == undefined}
+					maxIsNow={maxTs == undefined}
 					onLoadExtra={loadExtra}
 					jobs={completedJobs}
 					onZoom={async (zoom) => {
-						filters.min_ts = zoom.min.toISOString()
-						filters.max_ts = zoom.max.toISOString()
+						minTs = zoom.min.toISOString()
+						maxTs = zoom.max.toISOString()
 						manualDatePicker?.resetChoice()
-						jobsLoader?.loadJobs(true)
+						jobsLoader?.loadJobs(minTs, maxTs, true)
 					}}
 					onPointClicked={(ids) => {
 						runsTable?.scrollToRun(ids)
@@ -696,14 +1055,14 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 				/>
 			{:else if graph === 'ConcurrencyChart'}
 				<ConcurrentJobsChart
-					minTimeSet={filters.min_ts}
-					maxTimeSet={filters.max_ts}
-					maxIsNow={filters.max_ts == undefined}
+					minTimeSet={minTs}
+					maxTimeSet={maxTs}
+					maxIsNow={maxTs == undefined}
 					{extendedJobs}
 					onZoom={async (zoom) => {
-						filters.min_ts = zoom.min.toISOString()
-						filters.max_ts = zoom.max.toISOString()
-						jobsLoader?.loadJobs(true)
+						minTs = zoom.min.toISOString()
+						maxTs = zoom.max.toISOString()
+						jobsLoader?.loadJobs(minTs, maxTs, true)
 					}}
 				/>
 			{/if}
@@ -756,11 +1115,17 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 							</div>
 
 							<div class="flex flex-row gap-4 items-center">
-								{#if !filters.job_trigger_kind}
+								{#if !jobTriggerKind}
 									<div class="flex flex-row gap-1 items-center">
 										<Toggle
 											id="cron-schedules"
-											bind:checked={filters.show_schedules}
+											bind:checked={showSchedules}
+											on:change={() => {
+												localStorage.setItem(
+													'show_schedules_in_run',
+													showSchedules ? 'true' : 'false'
+												)
+											}}
 											options={tableTopBarWidth < 800 || selectionMode
 												? {}
 												: { right: 'Schedules' }}
@@ -774,7 +1139,10 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 								<div class="flex flex-row gap-1 items-center">
 									<Toggle
 										size="sm"
-										bind:checked={filters.show_future_jobs}
+										bind:checked={showFutureJobs}
+										on:change={() => {
+											localStorage.setItem('show_future_jobs', showFutureJobs ? 'true' : 'false')
+										}}
 										id="planned-later"
 										options={tableTopBarWidth < 800 || selectionMode
 											? {}
@@ -787,14 +1155,15 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 								<div class="flex flex-row gap-2 items-center">
 									<ManuelDatePicker
 										on:loadJobs={() => {
-											jobsLoader?.loadJobs(true)
+											lastFetchWentToEnd = false
+											jobsLoader?.loadJobs(minTs, maxTs, true)
 										}}
-										bind:minTs={filters.min_ts}
-										bind:maxTs={filters.max_ts}
+										bind:minTs
+										bind:maxTs
 										bind:selectedManualDate
 										{loading}
 										bind:this={manualDatePicker}
-										numberOfLastJobsToFetch={filters.per_page}
+										numberOfLastJobsToFetch={perPage}
 									/>
 									<Toggle
 										size="sm"
@@ -817,11 +1186,11 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 									externalJobs={externalJobs ?? []}
 									omittedObscuredJobs={extendedJobs?.omitted_obscured_jobs ?? false}
 									showExternalJobs={!graphIsRunsChart}
-									activeLabel={filters.label}
+									activeLabel={label}
 									{selectionMode}
-									{lastFetchWentToEnd}
 									bind:selectedIds
 									bind:selectedWorkspace
+									bind:lastFetchWentToEnd
 									on:loadExtra={loadExtra}
 									on:filterByPath={filterByPath}
 									on:filterByUser={filterByUser}
@@ -832,7 +1201,7 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 									on:filterBySchedule={filterBySchedule}
 									on:filterByWorker={filterByWorker}
 									bind:this={runsTable}
-									perPage={filters.per_page}
+									{perPage}
 								></RunsTable>
 							{:else}
 								<div class="gap-1 flex flex-col">
@@ -849,13 +1218,13 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 							<Select
 								class="w-20"
 								bind:value={
-									() => filters.per_page,
+									() => perPage,
 									(newPerPage) => {
-										filters.per_page = newPerPage
+										perPage = newPerPage
 										if (newPerPage > (jobs?.length ?? 1000)) loadExtra()
 									}
 								}
-								onCreateItem={(v) => (filters.per_page = parseInt(v))}
+								onCreateItem={(v) => (perPage = parseInt(v))}
 								items={[
 									{ value: 25, label: '25' },
 									{ value: 100, label: '100' },