windmill-components 1.352.9 → 1.362.0

package/package/components/graph/model.d.ts

@@ -47,11 +47,16 @@ export type GraphModuleState = {
     type: FlowStatusModule['type'];
     args: any;
     logs?: string;
+    flow_jobs_results?: any;
+    branchChosen?: number;
     result?: any;
     scheduled_for?: Date;
     job_id?: string;
     parent_module?: string;
-    iteration?: number;
+    selectedForloop?: string;
+    selectedForloopIndex?: number;
+    flow_jobs_success?: (boolean | undefined)[];
+    flow_jobs?: string[];
     iteration_total?: number;
     retries?: number;
     duration_ms?: number;

package/package/components/graph/svelvet/container/controllers/middleware.js

@@ -3,7 +3,7 @@ This file contains "middleware" functions that sanitize user input (UserNodeType
 maintain consistency between previous
 
 */
-import { bottomCb, leftCb, rightCb, topCb, } from '../../edges/controllers/anchorCbUser';
+import { bottomCb, leftCb, rightCb, topCb } from '../../edges/controllers/anchorCbUser';
 /**
  * sanitizeUserNodesAndEdges will sanitize the data initially passed in to Svelvet component. For example, the node that user specified have an integar as its id but to instantiate a Node and be compatible with uuid we will need to convert the integar id to a string.
  * @param userNodes The array of nodes that have a UserNodeType
@@ -51,6 +51,8 @@ function convertAnchorPositionsToCallbacks(userNodes, userEdges) {
     for (let userEdge of userEdges) {
         const userNodeSource = userNodesObj[userEdge.source];
         const userNodeTarget = userNodesObj[userEdge.target];
+        if (!userNodeSource || !userNodeTarget)
+            continue;
         const sourcePosition = userNodeSource.sourcePosition;
         const targetPosition = userNodeTarget.targetPosition;
         const cbs = { left: leftCb, right: rightCb, top: topCb, bottom: bottomCb };
@@ -68,9 +70,7 @@ function convertIdToString(userNodes) {
     userNodes = userNodes.map((node) => {
         node.id = node.id.toString();
         node.childNodes =
-            node.childNodes === undefined
-                ? []
-                : node.childNodes.map((childId) => childId.toString());
+            node.childNodes === undefined ? [] : node.childNodes.map((childId) => childId.toString());
         return node;
     });
 }

package/package/components/graph/svelvet/container/views/GraphView.svelte

@@ -123,6 +123,8 @@ $: {
 								on:nodeInsert={(e) => node?.data?.custom?.cb?.('nodeInsert', e.detail)}
 								on:addBranch={(e) => node?.data?.custom?.cb?.('addBranch', e.detail)}
 								on:removeBranch={(e) => node?.data?.custom?.cb?.('removeBranch', e.detail)}
+								on:selectedIteration={(e) =>
+									node?.data?.custom?.cb?.('selectedIteration', e.detail)}
 								{...node.data.custom.props}
 							/>
 						</Node>

package/package/components/graph/svelvet/edges/views/Edges/EdgeText.svelte

@@ -1,7 +1,6 @@
 <script>// destructuring props to pass into BaseEdge component
 export let edgeTextProps;
-$: ({ label, labelBgColor, labelTextColor, centerX, centerY } =
-    edgeTextProps);
+$: ({ label, labelBgColor, labelTextColor, centerX, centerY } = edgeTextProps);
 const shiftRectY = 7;
 $: pxRatio = label.length < 3 ? 9 : 7;
 // determine the center point of the edge to be used in the EdgeText component
@@ -16,28 +15,28 @@ $: labelPx = newLength * pxRatio;
 </script>
 
 {#if typeof label === 'undefined' || !label}
-  {null}
+	{null}
 {:else}
-  <g>
-    <rect
-      class="EdgeTextBg"
-      data-testid="edge-text-bg"
-      fill={labelBgColor ? labelBgColor : 'white'}
-      x={textCenterX - labelPx / 2}
-      y={textCenterY - shiftRectY}
-      width={labelPx}
-      height={16}
-    />
-    <text
-      class="EdgeText"
-      x={textCenterX}
-      y={textCenterY}
-      font-size="12px"
-      dominant-baseline="central"
-      text-anchor="middle"
-      fill={labelTextColor ? labelTextColor : 'black'}
-    >
-      {label}
-    </text>
-  </g>
+	<g>
+		<rect
+			class="EdgeTextBg"
+			data-testid="edge-text-bg"
+			fill={labelBgColor ? labelBgColor : 'white'}
+			x={textCenterX - labelPx / 2}
+			y={textCenterY - shiftRectY}
+			width={labelPx}
+			height={16}
+		/>
+		<text
+			class="EdgeText"
+			x={textCenterX}
+			y={textCenterY}
+			font-size="12px"
+			dominant-baseline="central"
+			text-anchor="middle"
+			fill={labelTextColor ? labelTextColor : 'black'}
+		>
+			{label}
+		</text>
+	</g>
 {/if}

package/package/components/graph/util.d.ts

@@ -8,4 +8,4 @@ export declare const NODE: {
     };
 };
 export declare function createIdGenerator(): Generator<number, number, unknown>;
-export declare function getStateColor(state: FlowStatusModule['type'] | undefined): string;
+export declare function getStateColor(state: FlowStatusModule['type'] | undefined, isDark: boolean): string;

package/package/components/graph/util.js

@@ -12,8 +12,7 @@ export function* createIdGenerator() {
         yield id++;
     }
 }
-export function getStateColor(state) {
-    const isDark = document.documentElement.classList.contains('dark');
+export function getStateColor(state, isDark) {
     switch (state) {
         case 'Success':
             return isDark ? '#059669' : 'rgb(193, 255, 216)';

package/package/components/home/ItemsList.svelte

@@ -16,13 +16,13 @@ import FlowIcon from './FlowIcon.svelte';
 import { canWrite, getLocalSetting, storeLocalSetting } from '../../utils';
 import { page } from '$app/stores';
 import { setQuery } from '../../navigation';
-import ContentSearch from '../ContentSearch.svelte';
 import Drawer from '../common/drawer/Drawer.svelte';
 import HighlightCode from '../HighlightCode.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
 import Item from './Item.svelte';
 import TreeViewRoot from './TreeViewRoot.svelte';
 import { Popup } from '../common';
+import { getContext } from 'svelte';
 let scripts;
 let flows;
 let apps;
@@ -31,11 +31,12 @@ let filteredItems = [];
 let itemKind = $page.url.searchParams.get('kind') ?? 'all';
 let loading = true;
 let nbDisplayed = 15;
-async function loadScripts(hideWithoutMain) {
+async function loadScripts(includeWithoutMain) {
     const loadedScripts = await ScriptService.listScripts({
         workspace: $workspaceStore,
         showArchived: archived ? true : undefined,
-        hideWithoutMain: hideWithoutMain ? true : undefined
+        includeWithoutMain: includeWithoutMain ? true : undefined,
+        includeDraftOnly: true
     });
     scripts = loadedScripts.map((script) => {
         return {
@@ -48,7 +49,8 @@ async function loadScripts(hideWithoutMain) {
 async function loadFlows() {
     flows = (await FlowService.listFlows({
         workspace: $workspaceStore,
-        showArchived: archived ? true : undefined
+        showArchived: archived ? true : undefined,
+        includeDraftOnly: true
     })).map((x) => {
         return {
             canWrite: canWrite(x.path, x.extra_perms, $userStore) &&
@@ -60,7 +62,7 @@ async function loadFlows() {
     loading = false;
 }
 async function loadApps() {
-    apps = (await AppService.listApps({ workspace: $workspaceStore })).map((app) => {
+    apps = (await AppService.listApps({ workspace: $workspaceStore, includeDraftOnly: true })).map((app) => {
         return {
             canWrite: canWrite(app.path, app.extra_perms, $userStore) &&
                 app.workspace_id == $workspaceStore &&
@@ -131,7 +133,7 @@ $: if ($workspaceStore) {
 }
 $: {
     if ($userStore && $workspaceStore) {
-        loadScripts(hideWithoutMain);
+        loadScripts(includeWithoutMain);
         loadFlows();
         if (!archived) {
             loadApps();
@@ -187,14 +189,16 @@ $: items && resetScroll();
 let archived = false;
 const TREE_VIEW_SETTING_NAME = 'treeView';
 const FILTER_USER_FOLDER_SETTING_NAME = 'filterUserFolders';
-const HIDE_WITHOUT_MAIN_SETTING = 'hideWithoutMain';
+const INCLUDE_WITHOUT_MAIN_SETTING_NAME = 'includeWithoutMain';
 let treeView = getLocalSetting(TREE_VIEW_SETTING_NAME) == 'true';
 let filterUserFolders = getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true';
-let hideWithoutMain = getLocalSetting(HIDE_WITHOUT_MAIN_SETTING) == 'true';
+let includeWithoutMain = getLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME)
+    ? getLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME) == 'true'
+    : true;
 $: storeLocalSetting(TREE_VIEW_SETTING_NAME, treeView ? 'true' : undefined);
 $: storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined);
-$: storeLocalSetting(HIDE_WITHOUT_MAIN_SETTING, hideWithoutMain ? 'true' : undefined);
-let contentSearch;
+$: storeLocalSetting(INCLUDE_WITHOUT_MAIN_SETTING_NAME, includeWithoutMain ? 'true' : undefined);
+const openSearchWithPrefilledText = getContext("openSearchWithPrefilledText");
 let viewCodeDrawer;
 let viewCodeTitle;
 let script;
@@ -235,7 +239,6 @@ let collapseAll = true;
 	</DrawerContent>
 </Drawer>
 
-<ContentSearch bind:this={contentSearch} />
 <CenteredPage>
 	<div class="flex flex-wrap gap-2 items-center justify-between w-full mt-2">
 		<div class="flex justify-start">
@@ -300,7 +303,7 @@ let collapseAll = true;
 			</button>
 		</div>
 		<Button
-			on:click={() => contentSearch?.open()}
+			on:click={() => openSearchWithPrefilledText("#")}
 			variant="border"
 			size="sm"
 			spacingSize="lg"
@@ -345,12 +348,12 @@ let collapseAll = true;
 					<div>
 						<span class="text-sm font-semibold">Filters</span>
 						<div class="flex flex-col gap-2 mt-2">
-							<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} />
+							<Toggle size="xs" bind:checked={archived} options={{ right: 'Only archived' }} />
 							{#if $userStore && !$userStore.operator}
 								<Toggle
 									size="xs"
-									bind:checked={hideWithoutMain}
-									options={{ right: 'Hide without main function' }}
+									bind:checked={includeWithoutMain}
+									options={{ right: 'Include without main function' }}
 								/>
 							{/if}
 						</div>
@@ -402,12 +405,12 @@ let collapseAll = true;
 				{nbDisplayed}
 				{collapseAll}
 				isSearching={filter !== ''}
-				on:scriptChanged={() => loadScripts(hideWithoutMain)}
+				on:scriptChanged={() => loadScripts(includeWithoutMain)}
 				on:flowChanged={loadFlows}
 				on:appChanged={loadApps}
 				on:rawAppChanged={loadRawApps}
 				on:reload={() => {
-					loadScripts(hideWithoutMain)
+					loadScripts(includeWithoutMain)
 					loadFlows()
 					loadApps()
 					loadRawApps()
@@ -419,12 +422,12 @@ let collapseAll = true;
 				{#each (items ?? []).slice(0, nbDisplayed) as item (item.type + '/' + item.path)}
 					<Item
 						{item}
-						on:scriptChanged={() => loadScripts(hideWithoutMain)}
+						on:scriptChanged={() => loadScripts(includeWithoutMain)}
 						on:flowChanged={loadFlows}
 						on:appChanged={loadApps}
 						on:rawAppChanged={loadRawApps}
 						on:reload={() => {
-							loadScripts(hideWithoutMain)
+							loadScripts(includeWithoutMain)
 							loadFlows()
 							loadApps()
 							loadRawApps()

package/package/components/jobs/JobPreview.svelte

@@ -12,6 +12,7 @@ import LogViewer from '../LogViewer.svelte';
 import { Badge } from '../common';
 import { forLater } from '../../forLater';
 import DurationMs from '../DurationMs.svelte';
+import { workspaceStore } from '../../stores';
 const POPUP_HEIGHT = 320;
 export let id;
 let job = undefined;
@@ -95,7 +96,11 @@ onDestroy(() => {
 					Mem: {job?.['mem_peak'] ? `${(job['mem_peak'] / 1024).toPrecision(4)}MB` : 'N/A'}
 				</Badge>
 				{#if job?.['duration_ms']}
-					<DurationMs duration_ms={job?.['duration_ms']} self_wait_time_ms={job?.self_wait_time_ms} aggregate_wait_time_ms={job?.aggregate_wait_time_ms} />
+					<DurationMs
+						duration_ms={job?.['duration_ms']}
+						self_wait_time_ms={job?.self_wait_time_ms}
+						aggregate_wait_time_ms={job?.aggregate_wait_time_ms}
+					/>
 				{/if}
 				{#if job?.['labels'] && Array.isArray(job?.['labels']) && job?.['labels'].length > 0}
 					{#each job?.['labels'] as label}
@@ -104,7 +109,11 @@ onDestroy(() => {
 				{/if}
 			</div>
 			<div class="w-1/2 h-full overflow-auto">
-				<JobArgs args={job?.args} />
+				<JobArgs
+					id={job?.id}
+					workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
+					args={job?.args}
+				/>
 			</div>
 			<div class="w-1/2 h-full overflow-auto p-2">
 				{#if job && 'scheduled_for' in job && !job.running && job.scheduled_for && forLater(job.scheduled_for)}

package/package/components/propertyPicker/PropPicker.svelte

@@ -97,6 +97,36 @@ async function loadResources() {
 					on:select
 				/>
 			</div>
+			{#if Object.keys(pickableProperties.priorIds).length > 0}
+				{#if suggestedPropsFiltered && Object.keys(suggestedPropsFiltered).length > 0}
+					<span class="font-bold text-sm">Suggested Results</span>
+					<div class="overflow-y-auto mb-2">
+						<ObjectViewer
+							allowCopy={false}
+							topLevelNode
+							pureViewer={!$propPickerConfig}
+							collapsed={false}
+							json={suggestedPropsFiltered}
+							on:select={(e) => {
+								dispatch('select', `results.${e.detail}`)
+							}}
+						/>
+					</div>
+				{/if}
+				<span class="font-bold text-sm">All Results</span>
+				<div class="overflow-y-auto mb-2">
+					<ObjectViewer
+						allowCopy={false}
+						topLevelNode
+						pureViewer={!$propPickerConfig}
+						collapsed={true}
+						json={resultByIdFiltered}
+						on:select={(e) => {
+							dispatch('select', `results.${e.detail}`)
+						}}
+					/>
+				</div>
+			{/if}
 		{:else}
 			{#if previousId}
 				<span class="font-bold text-sm">Previous Result</span>

package/package/components/propertyPicker/PropPickerResult.svelte

@@ -1,5 +1,8 @@
-<script>import ObjectViewer from './ObjectViewer.svelte';
+<script>import { createEventDispatcher } from 'svelte';
+import ObjectViewer from './ObjectViewer.svelte';
 export let result;
+export let flow_input = undefined;
+const dispatch = createEventDispatcher();
 </script>
 
 <div class="w-full px-2">
@@ -7,4 +10,14 @@ export let result;
 	<div class="overflow-y-auto mb-2 w-full">
 		<ObjectViewer allowCopy={false} json={{ result }} on:select />
 	</div>
+	{#if flow_input}
+		<span class="font-bold text-sm">Flow Input</span>
+		<div class="overflow-y-auto w-full">
+			<ObjectViewer
+				allowCopy={false}
+				json={flow_input}
+				on:select={(e) => dispatch('select', `flow_input.${e.detail}`)}
+			/>
+		</div>
+	{/if}
 </div>

package/package/components/propertyPicker/PropPickerResult.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         result: any;
+        flow_input?: any;
     };
     events: {
         select: CustomEvent<any>;

package/package/components/runs/JobLoader.svelte

@@ -3,6 +3,7 @@ import { JobService, ConcurrencyGroupsService } from '../../gen';
 import { sendUserToast } from '../../toast';
 import { workspaceStore } from '../../stores';
 import { tweened } from 'svelte/motion';
+import { subtractDaysFromDateString } from '../../utils';
 export let jobs;
 export let user;
 export let label = null;
@@ -32,6 +33,8 @@ export let refreshRate = 5000;
 export let syncQueuedRunsCount = true;
 export let allWorkspaces = false;
 export let computeMinAndMax;
+export let lookback = 0;
+export let perPage = undefined;
 let intervalId;
 let sync = true;
 $: jobKinds = computeJobKinds(jobKindsCat);
@@ -42,6 +45,7 @@ $: ($workspaceStore && loadJobsIntern(true)) ||
         isSkipped != undefined &&
         jobKinds &&
         concurrencyKey &&
+        lookback &&
         user &&
         folder &&
         showFutureJobs != undefined &&
@@ -91,11 +95,12 @@ function computeJobKinds(jobKindsCat) {
         return kinds.join(',');
     }
 }
-async function fetchJobs(startedBefore, startedAfter) {
+async function fetchJobs(startedBefore, startedAfter, startedAfterCompletedJobs) {
     return JobService.listJobs({
         workspace: $workspaceStore,
         createdOrStartedBefore: startedBefore,
         createdOrStartedAfter: startedAfter,
+        createdOrStartedAfterCompletedJobs: startedAfterCompletedJobs,
         schedulePath,
         scriptPathExact: path === null || path === '' ? undefined : path,
         createdBy: user === null || user === '' ? undefined : user,
@@ -112,16 +117,18 @@ async function fetchJobs(startedBefore, startedAfter) {
         result: resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
             ? resultFilter
             : undefined,
-        allWorkspaces: allWorkspaces ? true : undefined
+        allWorkspaces: allWorkspaces ? true : undefined,
+        perPage
     });
 }
-async function fetchExtendedJobs(concurrencyKey, startedBefore, startedAfter) {
+async function fetchExtendedJobs(concurrencyKey, startedBefore, startedAfter, startedAfterCompletedJobs) {
     return ConcurrencyGroupsService.listExtendedJobs({
         rowLimit: 1000,
         concurrencyKey: concurrencyKey == null || concurrencyKey == '' ? undefined : concurrencyKey,
         workspace: $workspaceStore,
         createdOrStartedBefore: startedBefore,
         createdOrStartedAfter: startedAfter,
+        createdOrStartedAfterCompletedJobs: startedAfterCompletedJobs,
         schedulePath,
         scriptPathExact: path === null || path === '' ? undefined : path,
         createdBy: user === null || user === '' ? undefined : user,
@@ -138,7 +145,8 @@ async function fetchExtendedJobs(concurrencyKey, startedBefore, startedAfter) {
         result: resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
             ? resultFilter
             : undefined,
-        allWorkspaces: allWorkspaces ? true : undefined
+        allWorkspaces: allWorkspaces ? true : undefined,
+        perPage
     });
 }
 export async function loadJobs(nMinTs, nMaxTs, reset, shouldGetCount) {
@@ -160,8 +168,12 @@ async function loadJobsIntern(shouldGetCount) {
     }
     loading = true;
     try {
+        // Extend MinTs to fetch jobs mefore minTs and show a correct concurrency graph
+        // TODO: when an ended_at column is created on the completed_job table,
+        // lookback won't be needed anymore (just filter ended_at > minTs instead
+        const extendedMinTs = subtractDaysFromDateString(minTs, lookback);
         if (concurrencyKey == null || concurrencyKey === '') {
-            let newJobs = await fetchJobs(maxTs, undefined);
+            let newJobs = await fetchJobs(maxTs, undefined, extendedMinTs);
             extendedJobs = { jobs: newJobs, obscured_jobs: [] };
             // Filter on minTs here and not in the backend
             // to get enough data for the concurrency graph
@@ -169,7 +181,7 @@ async function loadJobsIntern(shouldGetCount) {
             externalJobs = [];
         }
         else {
-            extendedJobs = await fetchExtendedJobs(concurrencyKey, maxTs, undefined);
+            extendedJobs = await fetchExtendedJobs(concurrencyKey, maxTs, undefined, extendedMinTs);
             const newJobs = extendedJobs.jobs;
             const newExternalJobs = extendedJobs.obscured_jobs;
             // Filter on minTs here and not in the backend
@@ -245,11 +257,11 @@ async function syncer() {
                 loading = true;
                 let newJobs;
                 if (concurrencyKey == null || concurrencyKey === '') {
-                    newJobs = await fetchJobs(maxTs, minTs ?? ts);
+                    newJobs = await fetchJobs(maxTs, minTs ?? ts, undefined);
                 }
                 else {
                     // Obscured jobs have no ids, so we have to do the full request
-                    extendedJobs = await fetchExtendedJobs(concurrencyKey, maxTs, undefined);
+                    extendedJobs = await fetchExtendedJobs(concurrencyKey, maxTs, undefined, minTs ?? ts);
                     externalJobs = computeExternalJobs(extendedJobs.obscured_jobs);
                     // Filter on minTs here and not in the backend
                     // to get enough data for the concurrency graph
@@ -336,6 +348,7 @@ onMount(() => {
     };
 });
 onDestroy(() => {
+    sync = false;
     if (intervalId) {
         clearInterval(intervalId);
     }

package/package/components/runs/JobLoader.svelte.d.ts

@@ -35,6 +35,8 @@ declare const __propDef: {
             minTs: string;
             maxTs: string;
         } | undefined) | undefined;
+        lookback?: number | undefined;
+        perPage?: number | undefined;
         loadJobs?: ((nMinTs: string | undefined, nMaxTs: string | undefined, reset: boolean, shouldGetCount?: boolean) => Promise<void>) | undefined;
     };
     events: {

package/package/components/runs/JobPreview.svelte

@@ -121,7 +121,11 @@ const dispatch = createEventDispatcher();
 		<span class="font-semibold text-xs leading-6">Arguments</span>
 
 		<div class="w-full">
-			<JobArgs args={job?.args} />
+			<JobArgs
+				id={job?.id}
+				workspace={job?.workspace_id ?? $workspaceStore ?? 'no_w'}
+				args={job?.args}
+			/>
 		</div>
 
 		{#if job?.type === 'CompletedJob'}

package/package/components/runs/RunRow.svelte

@@ -1,5 +1,5 @@
 <script>import { goto } from '$app/navigation';
-import { displayDate, msToSec, truncateHash, truncateRev } from '../../utils';
+import { displayDate, msToReadableTime, truncateHash, truncateRev } from '../../utils';
 import { Badge, Button } from '../common';
 import ScheduleEditor from '../ScheduleEditor.svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
@@ -45,9 +45,9 @@ function isJobCancelable(j) {
 >
 	<div class="w-1/12 flex justify-center">
 		{#if isSelectingJobsToCancel && isJobCancelable(job)}
-		<div class="px-2">
-			<input type="checkbox" checked={selected}/>
-		</div>
+			<div class="px-2">
+				<input type="checkbox" checked={selected} />
+			</div>
 		{/if}
 		{#if isExternal}
 			<Badge color="gray" baseClass="!px-1.5">
@@ -86,11 +86,11 @@ function isJobCancelable(j) {
 		<div class="flex flex-row items-center gap-1 text-gray-500 dark:text-gray-300 text-2xs">
 			{#if job}
 				{#if 'started_at' in job && job.started_at}
-					Started <TimeAgo date={job.started_at ?? ''} />
+					Started <TimeAgo withDate agoOnlyIfRecent date={job.started_at ?? ''} />
 					{#if job && 'duration_ms' in job && job.duration_ms != undefined}
-						(Ran in {msToSec(
+						(Ran in {msToReadableTime(
 							job.duration_ms
-						)}s{#if job.job_kind == 'flow' || job.job_kind == 'flowpreview'}&nbsp;total{/if})
+						)}{#if job.job_kind == 'flow' || job.job_kind == 'flowpreview'}&nbsp;total{/if})
 					{/if}
 					{#if job && (job.self_wait_time_ms || job.aggregate_wait_time_ms)}
 						<WaitTimeWarning
@@ -102,7 +102,11 @@ function isJobCancelable(j) {
 				{:else if `scheduled_for` in job && job.scheduled_for && forLater(job.scheduled_for)}
 					Scheduled for {displayDate(job.scheduled_for)}
 				{:else}
-					Waiting for executor (created <TimeAgo date={job.created_at || ''} />)
+					Waiting for executor (created <TimeAgo
+						withDate
+						agoOnlyIfRecent
+						date={job.created_at || ''}
+					/>)
 				{/if}
 			{/if}
 		</div>

package/package/components/runs/RunsFilter.svelte

@@ -530,10 +530,10 @@ let concurrencyKeyTimeout = undefined;
 					{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
 				</span>
 				<Label label="Filter by args">
-					<JsonEditor on:change bind:error={argError} bind:code={copyArgFilter} />
+					<JsonEditor bind:error={argError} bind:code={copyArgFilter} />
 				</Label>
 				<Label label="Filter by result">
-					<JsonEditor on:change bind:error={resultError} bind:code={copyResultFilter} />
+					<JsonEditor bind:error={resultError} bind:code={copyResultFilter} />
 				</Label>
 
 				<div class="flex flex-row gap-2 justify-between">
@@ -543,7 +543,6 @@ let concurrencyKeyTimeout = undefined;
 						on:click={() => {
 							argFilter = ''
 							resultFilter = ''
-							close(null)
 						}}
 					>
 						Clear
@@ -555,7 +554,6 @@ let concurrencyKeyTimeout = undefined;
 						on:click={() => {
 							argFilter = copyArgFilter
 							resultFilter = copyResultFilter
-							close(null)
 						}}
 					>
 						Set args/result filter

package/package/components/runs/RunsFilter.svelte.d.ts

@@ -21,7 +21,6 @@ declare const __propDef: {
         filterBy?: "path" | "folder" | "user" | "label" | "concurrencyKey" | undefined;
     };
     events: {
-        change: CustomEvent<any>;
         reset: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;