Handled selectable types on images status modal

Author: zonia3000

src/lib/components/jobs/ImagesStatus.svelte

@@ -58,7 +58,7 @@
 				<button
 					aria-label="Submitted images"
 					class="status-modal-btn btn btn-link text-decoration-none p-0"
-					on:click={() => imagesStatusModal.open(dataset, workflowTask.id)}
+					on:click={() => imagesStatusModal.open(dataset, workflowTask)}
 				>
 					<span class="d-flex pe-1">
 						<span class="pe-1 status-wrapper text-primary">
@@ -77,7 +77,7 @@
 				<button
 					aria-label="Done images"
 					class="status-modal-btn btn btn-link text-decoration-none p-0"
-					on:click={() => imagesStatusModal.open(dataset, workflowTask.id)}
+					on:click={() => imagesStatusModal.open(dataset, workflowTask)}
 				>
 					<span class="d-flex">
 						<span class="status-wrapper text-success ps-1">
@@ -94,7 +94,7 @@
 				<button
 					aria-label="Failed images"
 					class="status-modal-btn btn btn-link text-decoration-none p-0"
-					on:click={() => imagesStatusModal.open(dataset, workflowTask.id)}
+					on:click={() => imagesStatusModal.open(dataset, workflowTask)}
 				>
 					<span class="d-flex">
 						<span class="status-wrapper text-danger ps-1">

src/lib/components/jobs/ImagesStatusModal.svelte

@@ -17,8 +17,10 @@
 
 	/** @type {import('fractal-components/types/api').DatasetV2} */
 	let dataset;
-	/** @type {number} */
-	let workflowTaskId;
+	/** @type {import('fractal-components/types/api').WorkflowTaskV2} */
+	let workflowTask;
+	/** @type {string[]} */
+	let disabledTypes = [];
 
 	/** @type {Modal} */
 	let modal;
@@ -28,25 +30,27 @@
 	/** @type {Array<{text: string, highlight: boolean}>} */
 	let logParts = [];
 	let loadedLogsStatus = '';
-	let projectDir = '';
 
 	/** @type {DatasetImagesTable} */
 	let datasetImagesTable;
 
 	/**
 	 * @param {import('fractal-components/types/api').DatasetV2} _dataset
-	 * @param {number} _workflowTaskId
+	 * @param {import('fractal-components/types/api').WorkflowTaskV2} _workflowTask
 	 */
-	export async function open(_dataset, _workflowTaskId) {
+	export async function open(_dataset, _workflowTask) {
 		loading = true;
 		imagePage = null;
 		loadingLogs = false;
 		logParts = [];
 		selectedLogImage = '';
 		dataset = _dataset;
-		workflowTaskId = _workflowTaskId;
+		workflowTask = _workflowTask;
+		disabledTypes = Object.keys({
+			...workflowTask.type_filters,
+			...workflowTask.task.input_types
+		});
 		modal.show();
-		await loadProjectDir();
 		await loadImages();
 		await tick();
 		await datasetImagesTable.load();
@@ -56,21 +60,11 @@
 		imagePage = null;
 	}
 
-	async function loadProjectDir() {
-		const response = await fetch('/api/auth/current-user/settings');
-		if (!response.ok) {
-			return;
-		}
-		/** @type {import('fractal-components/types/api').UserSettings} */
-		const result = await response.json();
-		projectDir = result.project_dir || '';
-	}
-
 	async function loadImages() {
 		loading = true;
 		const headers = new Headers();
 		headers.set('Content-Type', 'application/json');
-		const url = `/api/v2/project/${dataset.project_id}/status/images?workflowtask_id=${workflowTaskId}&dataset_id=${dataset.id}&page=1&page_size=10`;
+		const url = `/api/v2/project/${dataset.project_id}/status/images?workflowtask_id=${workflowTask.id}&dataset_id=${dataset.id}&page=1&page_size=10`;
 		const response = await fetch(url, {
 			method: 'POST',
 			headers,
@@ -99,7 +93,7 @@
 			method: 'POST',
 			headers,
 			body: JSON.stringify({
-				workflowtask_id: workflowTaskId,
+				workflowtask_id: workflowTask.id,
 				dataset_id: dataset.id,
 				zarr_url: zarrUrl
 			})
@@ -160,8 +154,9 @@
 					{dataset}
 					bind:imagePage
 					{vizarrViewerUrl}
+					{disabledTypes}
 					imagesStatusModal={true}
-					imagesStatusModalUrl={`/api/v2/project/${dataset.project_id}/status/images?workflowtask_id=${workflowTaskId}&dataset_id=${dataset.id}`}
+					imagesStatusModalUrl={`/api/v2/project/${dataset.project_id}/status/images?workflowtask_id=${workflowTask.id}&dataset_id=${dataset.id}`}
 				>
 					<svelte:fragment slot="extra-buttons" let:image>
 						<button

src/lib/components/v2/projects/datasets/DatasetImagesTable.svelte

@@ -230,7 +230,7 @@
 			])
 		);
 
-		if (runWorkflowModal) {
+		if (disabledTypes.length > 0) {
 			for (const [key, typeSelector] of Object.entries(typesSelectors)) {
 				if (disabledTypes.includes(key)) {
 					typeSelector.disable();
@@ -239,12 +239,6 @@
 				}
 			}
 		}
-
-		if (imagesStatusModal) {
-			for (const selector of Object.values(typesSelectors)) {
-				selector.disable();
-			}
-		}
 	}
 
 	/**
@@ -363,7 +357,12 @@
 				}
 			}
 		});
-		setSlimSelectOptions(statusSelector, ['done', 'submitted', 'failed']);
+		setSlimSelectOptions(statusSelector, [
+			'done',
+			'submitted',
+			'failed',
+			{ text: 'not processed', value: 'unset' }
+		]);
 		if (imagesStatusFilter) {
 			statusSelector.setSelected(imagesStatusFilter);
 		}
@@ -372,13 +371,15 @@
 	/**
 	 * Updates SlimSelect options. This rebuilds the HTML elements and unset the selected value.
 	 * @param {SlimSelect|undefined} select
-	 * @param {Array<string>} values
+	 * @param {Array<string | { text: string, value: string }>} values
 	 */
 	function setSlimSelectOptions(select, values) {
 		if (!select) {
 			return;
 		}
-		const options = values.map((v) => ({ text: v.toString(), value: v.toString() }));
+		const options = values.map((v) =>
+			typeof v === 'string' ? { text: v.toString(), value: v.toString() } : v
+		);
 		select.setData([{ text: 'All', placeholder: true }, ...options]);
 	}
 
@@ -444,7 +445,8 @@
 				headers,
 				body: JSON.stringify(
 					stripNullAndEmptyObjectsAndArrays({
-						attribute_filters: attributes
+						attribute_filters: attributes,
+						type_filters: types
 					})
 				)
 			});
@@ -644,7 +646,7 @@
 				<colgroup>
 					<col width="auto" />
 					{#if imagesStatusModal}
-						<col width="150" />
+						<col width="190" />
 					{/if}
 					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each Object.keys(imagePage.attributes) as _}
@@ -752,7 +754,7 @@
 							<td>{getRelativePath(image.zarr_url)}</td>
 							{#if imagesStatusModal}
 								<td>
-									{image.status}
+									{image.status || '-'}
 								</td>
 							{/if}
 							{#each Object.keys(imagePage.attributes) as attribute}