windmill-components 1.339.2 → 1.352.0

package/package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -22,7 +22,7 @@ export let disableTutorials = false;
 export let disableAi = false;
 export let smallErrorHandler = false;
 let flowTutorials = undefined;
-const { selectedId, moving, history, flowStateStore, flowStore } = getContext('FlowEditorContext');
+const { selectedId, moving, history, flowStateStore, flowStore, flowInputsStore } = getContext('FlowEditorContext');
 async function insertNewModuleAtIndex(modules, index, kind, wsScript) {
     push(history, $flowStore);
     var module = emptyModule($flowStateStore, $flowStore, kind == 'flow');
@@ -195,6 +195,7 @@ const dispatch = createEventDispatcher();
 			maxHeight={minHeight}
 			modules={$flowStore.value?.modules}
 			{selectedId}
+			{flowInputsStore}
 			on:delete={({ detail }) => {
 				let e = detail.detail
 				dependents = getDependentComponents(e.id, $flowStore)
@@ -202,6 +203,10 @@ const dispatch = createEventDispatcher();
 					push(history, $flowStore)
 					selectNextId(e.id)
 					removeAtId($flowStore.value.modules, e.id)
+
+					if ($flowInputsStore) {
+						delete $flowInputsStore[e.id]
+					}
 					$flowStore = $flowStore
 				}
 

package/package/components/flows/types.d.ts

@@ -5,6 +5,9 @@ import type { Writable } from 'svelte/store';
 import type ScriptEditorDrawer from './content/ScriptEditorDrawer.svelte';
 import type { FlowState } from './flowState';
 import type { Schedule } from './scheduleUtils';
+export type FlowInput = Record<string, {
+    requiredInputsFilled?: Record<string, boolean>;
+}>;
 export type FlowEditorContext = {
     selectedId: Writable<string>;
     moving: Writable<{
@@ -26,4 +29,5 @@ export type FlowEditorContext = {
     testStepStore: Writable<Record<string, any>>;
     saveDraft: () => void;
     initialPath: string;
+    flowInputsStore: Writable<FlowInput | undefined>;
 };

package/package/components/flows/utils.d.ts

@@ -1,6 +1,7 @@
-import { type FlowModule, type Job, type RestartedFrom, type OpenFlow } from '../../gen';
+import { type FlowModule, type InputTransform, type Job, type RestartedFrom, type OpenFlow, type FlowModuleValue } from '../../gen';
 import type { FlowModuleState } from './flowState';
 import type { PickableProperties } from './previousResults';
+import type { Schema } from '../../common';
 export declare function evalValue(k: string, mod: FlowModule, testStepStore: Record<string, any>, pickableProperties: PickableProperties | undefined, showError: boolean): any;
 export declare function cleanInputs(flow: OpenFlow | any): OpenFlow & {
     tag?: string;
@@ -15,3 +16,6 @@ export declare function runFlowPreview(args: Record<string, any>, flow: OpenFlow
 }, path: string, restartedFrom: RestartedFrom | undefined): Promise<string>;
 export declare function codeToStaticTemplate(code?: string): string | undefined;
 export declare function emptyFlowModuleState(): FlowModuleState;
+export declare function isInputFilled(inputTransforms: Record<string, InputTransform>, key: string, schema: Schema): boolean;
+export declare function setRequiredInputFilled(argName: string, flowModuleValue: FlowModuleValue, requiredInputsFilled: Record<string, boolean>, schema: Schema): Record<string, boolean>;
+export declare function initRequiredInputFilled(flowModuleValue: FlowModuleValue, schema: Schema): Record<string, boolean>;

package/package/components/flows/utils.js

@@ -118,3 +118,39 @@ export function emptyFlowModuleState() {
         previewResult: NEVER_TESTED_THIS_FAR
     };
 }
+export function isInputFilled(inputTransforms, key, schema) {
+    const required = schema?.required?.includes(key) ?? false;
+    if (!required) {
+        return true;
+    }
+    if (inputTransforms.hasOwnProperty(key)) {
+        const transform = inputTransforms[key];
+        if (transform?.type === 'static' &&
+            (transform?.value === undefined || transform?.value === '' || transform?.value === null)) {
+            return false;
+        }
+        else if (transform?.type === 'javascript' &&
+            (transform?.expr === undefined || transform?.expr === '' || transform?.expr === null)) {
+            return false;
+        }
+    }
+    return true;
+}
+export function setRequiredInputFilled(argName, flowModuleValue, requiredInputsFilled, schema) {
+    const type = flowModuleValue.type;
+    if (type == 'rawscript' || type == 'script' || type == 'flow') {
+        requiredInputsFilled[argName] = isInputFilled(flowModuleValue.input_transforms, argName, schema ?? {});
+    }
+    return requiredInputsFilled;
+}
+export function initRequiredInputFilled(flowModuleValue, schema) {
+    const requiredInputsFilled = {};
+    const type = flowModuleValue.type;
+    if (type == 'rawscript' || type == 'script' || type == 'flow') {
+        const keys = Object.keys(flowModuleValue.input_transforms);
+        for (const key of keys) {
+            requiredInputsFilled[key] = isInputFilled(flowModuleValue.input_transforms, key, schema ?? {});
+        }
+    }
+    return requiredInputsFilled;
+}

package/package/components/graph/FlowGraph.svelte

@@ -25,7 +25,8 @@ export let scroll = false;
 export let download = false;
 export let fullSize = false;
 export let disableAi = false;
-setContext('FlowGraphContext', { selectedId });
+export let flowInputsStore = writable(undefined);
+setContext('FlowGraphContext', { selectedId, flowInputsStore });
 let idGenerator;
 let nestedNodes;
 let nodes = [];
@@ -33,6 +34,7 @@ let edges = [];
 let width, height;
 let fullWidth;
 let errorHandlers = {};
+let containerHeight = window.innerHeight;
 let error = undefined;
 $: showDataflow =
     $selectedId != undefined &&
@@ -95,7 +97,7 @@ async function createGraph() {
         nodes = layered.nodes;
         let hfull = Math.max(layered.height, minHeight);
         fullWidth = layered.width;
-        height = fullSize ? hfull : Math.min(hfull, maxHeight ?? window.innerHeight * 1.5);
+        height = fullSize ? hfull : Math.max(hfull, maxHeight ?? containerHeight);
         let useDataflow = dataflow && showDataflow;
         edges = useDataflow ? [] : createEdges(nodes);
         if (useDataflow && $selectedId) {
@@ -525,6 +527,7 @@ onMount(() => {
 <!-- {JSON.stringify(flowModuleStates)} -->
 <div
 	bind:clientWidth={width}
+	bind:clientHeight={containerHeight}
 	class={fullSize ? '' : 'w-full h-full overflow-hidden relative'}
 	id="flow-graph"
 >

package/package/components/graph/FlowGraph.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import { type FlowModule } from '../../gen';
 import { type GraphModuleState } from '.';
 import { type Writable } from 'svelte/store';
+import type { FlowInput } from '../flows/types';
 declare const __propDef: {
     props: {
         success?: boolean | undefined;
@@ -19,6 +20,7 @@ declare const __propDef: {
         download?: boolean | undefined;
         fullSize?: boolean | undefined;
         disableAi?: boolean | undefined;
+        flowInputsStore?: Writable<FlowInput | undefined> | undefined;
     };
     events: {
         delete: CustomEvent<any>;

package/package/components/graph/svelvet/container/models/index.d.ts

@@ -1,5 +0,0 @@
-export declare const SVELVET_CONTEXT_KEY: "svelvet_settings_context";
-export type SvelvetSettingsContext = {
-    /** Sets the height of the canvas to `100%` instead of an arbitrary value in pixels */
-    fullHeight: boolean;
-};

package/package/components/graph/svelvet/container/models/index.js

@@ -1 +1 @@
-export const SVELVET_CONTEXT_KEY = 'svelvet_settings_context';
+"use strict";

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

@@ -1,10 +1,8 @@
 <script>const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7);
 import { createStoreEmpty, populateSvelvetStoreFromUserInput } from '../../store/controllers/storeApi';
-import { afterUpdate, onMount, getContext } from 'svelte';
+import { afterUpdate, onMount } from 'svelte';
 import GraphView from './GraphView.svelte';
 import { sanitizeUserNodesAndEdges } from '../controllers/middleware';
-import { SVELVET_CONTEXT_KEY } from '../models';
-const settings = getContext(SVELVET_CONTEXT_KEY);
 export let nodes;
 export let edges;
 export let width = 600;
@@ -23,7 +21,6 @@ export let scroll = false;
 export let download = false;
 export let dataflow = false;
 export let nodeSelected = false;
-const fullHeight = settings?.fullHeight ?? false;
 // generates a unique string for each svelvet component's unique store instance
 // creates a store that uses the unique sting as the key to create and look up the corresponding store
 // this way we can have multiple Svelvet Components on the same page and prevent overlap of information
@@ -95,7 +92,7 @@ afterUpdate(() => {
 <!-- Now that a store has been created from the initial nodes and initial edges we drill props from the store down to the D3 GraphView along with the unique key -->
 <div
 	class="Svelvet bg-surface-secondary"
-	style={`width: ${width}px; height: ${fullHeight ? '100%' : height + 'px'};`}
+	style={`width: ${width}px; min-height: 100%; height: ${height}px;`}
 >
 	{#if error != ''}
 		<div class="error text-red-600 center-center p-4">{error}</div>

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

@@ -1,6 +1,4 @@
-import type { FlowStatusModule, FlowModule } from '../../gen';
-import MapItem from '../flows/map/MapItem.svelte';
-import type { GraphModuleState } from './model';
+import type { FlowStatusModule } from '../../gen';
 export declare const NODE: {
     width: number;
     height: number;
@@ -11,37 +9,3 @@ export declare const NODE: {
 };
 export declare function createIdGenerator(): Generator<number, number, unknown>;
 export declare function getStateColor(state: FlowStatusModule['type'] | undefined): string;
-export declare function flowModuleToNode(parentIds: string[], mod: FlowModule, edgeLabel: string | undefined, annotation: string | undefined, loopDepth: number, insertableEnd: boolean, branchable: boolean, modules: FlowModule[], callbackHandler: (event: string, detail: any) => void, flowModuleStates: Record<string, GraphModuleState>, insertable: boolean, moving: boolean, disableAi: boolean): {
-    type: string;
-    id: string;
-    position: {
-        x: number;
-        y: number;
-    };
-    data: {
-        custom: {
-            component: typeof MapItem;
-            props: {
-                trigger: boolean;
-                mod: FlowModule;
-                insertable: boolean;
-                insertableEnd: boolean;
-                branchable: boolean;
-                duration_ms: number | undefined;
-                bgColor: string;
-                annotation: string | undefined;
-                modules: FlowModule[];
-                moving: boolean;
-                disableAi: boolean;
-            };
-            cb: (event: string, detail: any) => void;
-        };
-    };
-    width: number;
-    height: number;
-    parentIds: string[];
-    sourcePosition: string;
-    targetPosition: string;
-    edgeLabel: string | undefined;
-    loopDepth: number;
-};

package/package/components/graph/util.js

@@ -1,4 +1,3 @@
-import MapItem from '../flows/map/MapItem.svelte';
 export const NODE = {
     width: 275,
     height: 34,
@@ -30,36 +29,3 @@ export function getStateColor(state) {
             return isDark ? '#2e3440' : '#fff';
     }
 }
-export function flowModuleToNode(parentIds, mod, edgeLabel, annotation, loopDepth, insertableEnd, branchable, modules, callbackHandler, flowModuleStates, insertable, moving, disableAi) {
-    return {
-        type: 'node',
-        id: mod.id,
-        position: { x: -1, y: -1 },
-        data: {
-            custom: {
-                component: MapItem,
-                props: {
-                    trigger: parentIds.length == 0,
-                    mod,
-                    insertable,
-                    insertableEnd,
-                    branchable,
-                    duration_ms: flowModuleStates?.[mod.id]?.duration_ms,
-                    bgColor: getStateColor(flowModuleStates?.[mod.id]?.type),
-                    annotation,
-                    modules,
-                    moving,
-                    disableAi
-                },
-                cb: callbackHandler
-            }
-        },
-        width: NODE.width,
-        height: NODE.height,
-        parentIds,
-        sourcePosition: 'bottom',
-        targetPosition: 'top',
-        edgeLabel,
-        loopDepth
-    };
-}

package/package/components/instanceSettings.js

@@ -100,7 +100,8 @@ export const settings = {
         },
         {
             label: 'Private hub base url',
-            description: 'Base url of your private hub instance',
+            description: 'Base url of your private hub instance, without trailing slash',
+            placeholder: 'https://hub.company.com',
             key: 'hub_base_url',
             fieldType: 'text',
             storage: 'setting',

package/package/components/jobs/JobPreview.svelte

@@ -95,7 +95,7 @@ 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']} />
+					<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}

package/package/components/multiselect/MultiSelect.svelte

@@ -63,6 +63,7 @@ export let style = null;
 export let ulSelectedClass = ``;
 export let ulSelectedStyle = null;
 export let value = null;
+export let disableRemoveAll = false;
 const selected_to_value = (selected) => {
     value = maxSelect === 1 ? selected[0] ?? null : selected;
 };
@@ -456,7 +457,7 @@ $: required, form_input?.setCustomValidity(``);
 						class="remove"
 					>
 						<slot name="remove-icon">
-							<X size={20} class="text-primary p-0.5" />
+							<X size={20} class="text-primary dark:text-primary-inverse p-0.5" />
 						</slot>
 					</button>
 				{/if}
@@ -501,7 +502,7 @@ $: required, form_input?.setCustomValidity(``);
 	{#if disabled}
 		<slot name="disabled-icon">disable</slot>
 	{:else if selected.length > 0}
-		{#if maxSelect !== 1 && selected.length > 1}
+		{#if maxSelect !== 1 && selected.length > 1 && !disableRemoveAll}
 			<button
 				type="button"
 				class="remove remove-all"
@@ -597,7 +598,7 @@ $: required, form_input?.setCustomValidity(``);
 						on:blur={() => (option_msg_is_active = false)}
 						role="option"
 						aria-selected="false"
-						class="user-msg"
+						class="user-msg p-1"
 						style:cursor={{
 							dupe: `not-allowed`,
 							create: `pointer`,

package/package/components/multiselect/MultiSelect.svelte.d.ts

@@ -52,6 +52,7 @@ declare class __sveltets_Render<Option extends T> {
         ulSelectedClass?: string | undefined;
         ulSelectedStyle?: string | null | undefined;
         value?: Option | Option[] | null | undefined;
+        disableRemoveAll?: boolean | undefined;
     };
     events(): MultiSelectEvents;
     slots(): {

package/package/components/multiselect/MultiSelectWrapper.svelte

@@ -0,0 +1,89 @@
+<script>// @ts-ignore
+import Portal from 'svelte-portal';
+import { createFloatingActions } from 'svelte-floating-ui';
+import { tick } from 'svelte';
+import { offset, flip, shift } from 'svelte-floating-ui/dom';
+import MultiSelect from './MultiSelect.svelte';
+import DarkModeObserver from '../DarkModeObserver.svelte';
+const [floatingRef, floatingContent] = createFloatingActions({
+    strategy: 'absolute',
+    middleware: [offset(5), flip(), shift()]
+});
+export let items;
+export let value = [];
+let outerDiv = undefined;
+let portalRef = undefined;
+function moveOptionsToPortal() {
+    // Find ul element with class 'options' within the outerDiv
+    const ul = outerDiv?.querySelector('.options');
+    if (ul) {
+        // Move the ul element to the portal
+        portalRef?.appendChild(ul);
+    }
+}
+$: if (portalRef && outerDiv && items?.length > 0) {
+    tick().then(() => {
+        moveOptionsToPortal();
+    });
+}
+// bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900
+let darkMode = false;
+let w = 0;
+let open = false;
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div use:floatingRef bind:clientWidth={w}>
+	{#if !value || Array.isArray(value)}
+		<div class="border rounded-md border-gray-300 shadow-sm dark:border-gray-600 !w-full">
+			<MultiSelect
+				outerDivClass={`!text-xs`}
+				ulSelectedClass="overflow-auto"
+				bind:outerDiv
+				--sms-border={'none'}
+				--sms-min-height={'30px'}
+				--sms-focus-border={'none'}
+				--sms-selected-bg={darkMode ? '#c7d2fe' : '#e0e7ff'}
+				--sms-selected-text-color={darkMode ? '#312e81' : '#3730a3'}
+				bind:selected={value}
+				options={items}
+				on:close={() => {
+					open = false
+				}}
+				on:open={() => {
+					open = true
+				}}
+				let:option
+				disableRemoveAll
+			>
+				<!-- needed because portal doesn't work for mouseup event en mobile -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div
+					class="w-full text-sm"
+					on:mouseup|stopPropagation
+					on:pointerdown|stopPropagation={(e) => {
+						let newe = new MouseEvent('mouseup')
+						e.target?.['parentElement']?.dispatchEvent(newe)
+					}}
+				>
+					{option}
+				</div>
+			</MultiSelect>
+		</div>
+		<Portal>
+			<div use:floatingContent class="z5000" hidden={!open}>
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div
+					bind:this={portalRef}
+					class="multiselect"
+					style={`min-width: ${w}px;`}
+					on:click|stopPropagation
+				/>
+			</div>
+		</Portal>
+	{:else}
+		Value {value} is not an array
+	{/if}
+</div>

package/package/components/multiselect/MultiSelectWrapper.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        items: any[];
+        value?: string[] | undefined;
+    };
+    events: {
+        mouseup: MouseEvent;
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MultiSelectWrapperProps = typeof __propDef.props;
+export type MultiSelectWrapperEvents = typeof __propDef.events;
+export type MultiSelectWrapperSlots = typeof __propDef.slots;
+export default class MultiSelectWrapper extends SvelteComponent<MultiSelectWrapperProps, MultiSelectWrapperEvents, MultiSelectWrapperSlots> {
+}
+export {};

package/package/components/propertyPicker/ObjectViewer.svelte

@@ -98,7 +98,9 @@ $: fullyCollapsed = keys.length > 1 && collapsed;
 							<button
 								class="val text-left {pureViewer
 									? 'cursor-auto'
-									: ''} rounded px-1 hover:bg-blue-100 dark:hover:bg-blue-100/10 {getTypeAsString(json[key])}"
+									: ''} rounded px-1 hover:bg-blue-100 dark:hover:bg-blue-100/10 {getTypeAsString(
+									json[key]
+								)}"
 								on:click={() => selectProp(key, json[key])}
 							>
 								{#if json[key] === NEVER_TESTED_THIS_FAR}
@@ -131,7 +133,9 @@ $: fullyCollapsed = keys.length > 1 && collapsed;
 					{#if getTypeAsString(json) === 's3object'}
 						<a
 							class="text-secondary underline font-semibold text-2xs whitespace-nowrap ml-1 w-fit"
-							href={`/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${json?.s3}`}
+							href={`/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${json?.s3}${
+								json?.storage ? `&storage=${json.storage}` : ''
+							}`}
 							download={json?.s3.split('/').pop() ?? 'unnamed_download.file'}
 						>
 							<span class="flex items-center gap-1"><Download size={12} />download</span>

package/package/components/runs/JobPreview.svelte

@@ -63,7 +63,11 @@ const dispatch = createEventDispatcher();
 				</Badge>
 			{/if}
 			{#if job && 'duration_ms' in job && job.duration_ms != undefined}
-				<DurationMs duration_ms={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}
+				/>
 			{/if}
 			{#if job?.['mem_peak']}
 				<Badge large>

package/package/components/runs/RunRow.svelte

@@ -9,15 +9,20 @@ import TimeAgo from '../TimeAgo.svelte';
 import { forLater } from '../../forLater';
 import { twMerge } from 'tailwind-merge';
 import Portal from 'svelte-portal';
+import WaitTimeWarning from '../common/waitTimeWarning/WaitTimeWarning.svelte';
 const dispatch = createEventDispatcher();
 export let job;
-export let selectedId = undefined;
+export let selected = false;
 export let containerWidth = 0;
 export let containsLabel = false;
 export let activeLabel;
+export let isSelectingJobsToCancel = false;
 let scheduleEditor;
 $: isExternal = job && job.id === '-';
 let triggeredByWidth = 0;
+function isJobCancelable(j) {
+    return j.type === 'QueuedJob' && !j.schedule_path;
+}
 </script>
 
 <Portal>
@@ -28,15 +33,22 @@ let triggeredByWidth = 0;
 <div
 	class={twMerge(
 		'hover:bg-surface-hover cursor-pointer',
-		selectedId === job.id && !isExternal ? 'bg-blue-50 dark:bg-blue-900/50' : '',
+		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
 		'flex flex-row items-center h-full'
 	)}
 	style="width: {containerWidth}px"
 	on:click={() => {
-		dispatch('select')
+		if (!isSelectingJobsToCancel || isJobCancelable(job)) {
+			dispatch('select')
+		}
 	}}
 >
 	<div class="w-1/12 flex justify-center">
+		{#if isSelectingJobsToCancel && isJobCancelable(job)}
+		<div class="px-2">
+			<input type="checkbox" checked={selected}/>
+		</div>
+		{/if}
 		{#if isExternal}
 			<Badge color="gray" baseClass="!px-1.5">
 				<ShieldQuestion size={14} />
@@ -80,6 +92,13 @@ let triggeredByWidth = 0;
 							job.duration_ms
 						)}s{#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
+							self_wait_time_ms={job.self_wait_time_ms}
+							aggregate_wait_time_ms={job.aggregate_wait_time_ms}
+							variant="icon"
+						/>
+					{/if}
 				{:else if `scheduled_for` in job && job.scheduled_for && forLater(job.scheduled_for)}
 					Scheduled for {displayDate(job.scheduled_for)}
 				{:else}

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

@@ -3,10 +3,11 @@ import type { Job } from '../../gen';
 declare const __propDef: {
     props: {
         job: Job;
-        selectedId?: string | undefined;
+        selected?: boolean | undefined;
         containerWidth?: number | undefined;
         containsLabel?: boolean | undefined;
         activeLabel: string | null;
+        isSelectingJobsToCancel?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/package/components/runs/RunsTable.svelte

@@ -10,7 +10,8 @@ export let jobs = undefined;
 export let externalJobs = [];
 export let omittedObscuredJobs;
 export let showExternalJobs = false;
-export let selectedId = undefined;
+export let isSelectingJobsToCancel = false;
+export let selectedIds = [];
 export let selectedWorkspace = undefined;
 export let activeLabel = null;
 // const loadMoreQuantity: number = 100
@@ -106,7 +107,7 @@ function infiniteHandler({ detail: { loaded, error, complete } }) {
 */
 function jobCountString(jobCount) {
     const jc = jobCount;
-    const isTruncated = jc == 1000;
+    const isTruncated = jc >= 1000;
     return `${jc}${isTruncated ? '+' : ''} job${jc != 1 ? 's' : ''}`;
 }
 function computeHeight() {
@@ -137,13 +138,14 @@ const dispatch = createEventDispatcher();
 					>
 				</div>
 			</div>
-		{:else if $workspaceStore !== 'admins' &&  omittedObscuredJobs}
+		{:else if $workspaceStore !== 'admins' && omittedObscuredJobs}
 			<div class="w-1/12 text-2xs flex flex-row">
 				{jobs && jobCountString(jobs.length)}
 				<Popover>
-					<AlertTriangle size={16} class="ml-0.5 text-yellow-500"/>
+					<AlertTriangle size={16} class="ml-0.5 text-yellow-500" />
 					<svelte:fragment slot="text">
-						Too specific filtering may have caused the omission of obscured jobs. This is done for security reasons. To see obscured jobs, try removing some filters.
+						Too specific filtering may have caused the omission of obscured jobs. This is done for
+						security reasons. To see obscured jobs, try removing some filters.
 					</svelte:fragment>
 				</Popover>
 			</div>
@@ -179,11 +181,22 @@ const dispatch = createEventDispatcher();
 							<RunRow
 								{containsLabel}
 								job={jobOrDate.job}
-								{selectedId}
+								selected={jobOrDate.job.id !== '-' && selectedIds.includes(jobOrDate.job.id)}
+								{isSelectingJobsToCancel}
 								on:select={() => {
-									selectedWorkspace = jobOrDate.job.workspace_id
-									selectedId = jobOrDate.job.id
-									dispatch('select')
+									const jobId = jobOrDate.job.id
+									if (isSelectingJobsToCancel) {
+										if (selectedIds.includes(jobOrDate.job.id)) {
+											selectedIds = selectedIds.filter((id) => id != jobId)
+										} else {
+											selectedIds.push(jobId)
+											selectedIds = selectedIds
+										}
+									} else {
+										selectedWorkspace = jobOrDate.job.workspace_id
+										selectedIds = [jobOrDate.job.id]
+										dispatch('select')
+									}
 								}}
 								{activeLabel}
 								on:filterByLabel

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

@@ -6,7 +6,8 @@ declare const __propDef: {
         externalJobs?: Job[] | undefined;
         omittedObscuredJobs: boolean;
         showExternalJobs?: boolean | undefined;
-        selectedId?: string | undefined;
+        isSelectingJobsToCancel?: boolean | undefined;
+        selectedIds?: string[] | undefined;
         selectedWorkspace?: string | undefined;
         activeLabel?: string | null | undefined;
     };