Displayed applied filters in workflow execution modal

Author: zonia3000

CHANGELOG.md

@@ -20,6 +20,7 @@
     * used switches to represent boolean flags (\#457);
     * implemented continue/restart workflow (\#465);
     * set default first task when continuing a workflow (\#466);
+    * displayed applied filters in workflow execution modal (\#466);
 
 # 0.10.2
 

__tests__/v2/RunWorkflowModal.test.js

@@ -0,0 +1,135 @@
+import { describe, it, expect, vi } from 'vitest';
+import { fireEvent, render } from '@testing-library/svelte';
+import { readable } from 'svelte/store';
+
+// Mocking fetch
+global.fetch = vi.fn();
+
+// Mocking the page store
+vi.mock('$app/stores', () => {
+	return {
+		page: readable({
+			data: {
+				userInfo: { slurm_accounts: [] }
+			}
+		})
+	};
+});
+
+// Mocking bootstrap.Modal
+class MockModal {
+	show = vi.fn();
+	hide = vi.fn();
+}
+MockModal.getInstance = vi.fn();
+
+global.window.bootstrap = {
+	Modal: MockModal
+};
+
+import RunWorkflowModal from '../../src/lib/components/v2/workflow/RunWorkflowModal.svelte';
+
+const dataset1 = {
+	id: 1,
+	filters: {
+		attributes: {
+			k1: 'dataset-value1',
+			k3: 'dataset-value3'
+		},
+		types: {
+			t1: false,
+			t3: true
+		}
+	}
+};
+
+const workflow1 = {
+	id: 1,
+	task_list: [
+		{
+			id: 1,
+			task: { name: 'task1' },
+			input_filters: {
+				attributes: { k1: 'wft-value1', k2: 'wft-value2' },
+				types: { t1: true, t2: false }
+			}
+		}
+	]
+};
+
+describe('RunWorkflowModal', () => {
+	it('When continuing a workflow, show applied filters prioritizing the first workflow task filters', async () => {
+		const result = render(RunWorkflowModal, {
+			datasets: [dataset1],
+			selectedDatasetId: 1,
+			workflow: workflow1,
+			onJobSubmitted: vi.fn(),
+			onDatasetsUpdated: vi.fn(),
+			statuses: { 1: 'failed' }
+		});
+
+		result.component.open('continue');
+		await fireEvent.click(result.getByRole('button', { name: 'Run' }));
+
+		const items = await result.findAllByRole('listitem');
+
+		expect(items.length).toEqual(6);
+		expect(result.getByText('k1:').innerHTML).toContain('wft-value1');
+		expect(result.getByText('k2:').innerHTML).toContain('wft-value2');
+		expect(result.getByText('k3:').innerHTML).toContain('dataset-value3');
+		expect(result.getByText('t1:').innerHTML).toContain('text-success');
+		expect(result.getByText('t2:').innerHTML).toContain('text-danger');
+		expect(result.getByText('t3:').innerHTML).toContain('text-success');
+	});
+
+	it('When restarting a workflow, show applied filters from workflow task only', async () => {
+		const result = render(RunWorkflowModal, {
+			datasets: [dataset1],
+			selectedDatasetId: 1,
+			workflow: workflow1,
+			onJobSubmitted: vi.fn(),
+			onDatasetsUpdated: vi.fn(),
+			statuses: { 1: 'done' }
+		});
+
+		result.component.open('restart');
+		await fireEvent.click(result.getByRole('button', { name: 'Run' }));
+
+		const items = await result.findAllByRole('listitem');
+
+		expect(items.length).toEqual(4);
+		expect(result.getByText('k1:').innerHTML).toContain('wft-value1');
+		expect(result.getByText('k2:').innerHTML).toContain('wft-value2');
+		expect(result.getByText('t1:').innerHTML).toContain('text-success');
+		expect(result.getByText('t2:').innerHTML).toContain('text-danger');
+	});
+
+	it('Handles empty filters list', async () => {
+		const result = render(RunWorkflowModal, {
+			datasets: [
+				{
+					id: 1,
+					filters: { attributes: {}, types: {} }
+				}
+			],
+			selectedDatasetId: 1,
+			workflow: {
+				id: 1,
+				task_list: [
+					{
+						id: 1,
+						task: { name: 'task1' },
+						input_filters: { attributes: {}, types: {} }
+					}
+				]
+			},
+			onJobSubmitted: vi.fn(),
+			onDatasetsUpdated: vi.fn(),
+			statuses: { 1: 'failed' }
+		});
+
+		result.component.open('continue');
+		await fireEvent.click(result.getByRole('button', { name: 'Run' }));
+		expect(result.getByText('No filters')).toBeDefined();
+	});
+});

src/lib/components/common/BooleanIcon.svelte

@@ -19,6 +19,6 @@
 		font-weight: bold;
 		margin: 0 -5px -5px -5px;
 		line-height: 0;
-		display: block;
+		display: inline-block;
 	}
 </style>

src/lib/components/v2/workflow/RunWorkflowModal.svelte

@@ -2,7 +2,11 @@
 	import { page } from '$app/stores';
 	import { replaceEmptyStrings } from '$lib/common/component_utilities';
 	import { AlertError } from '$lib/common/errors';
-	import { generateNewUniqueDatasetName, getFirstTaskIndexForContinuingWorkflow } from '$lib/common/job_utilities';
+	import {
+		generateNewUniqueDatasetName,
+		getFirstTaskIndexForContinuingWorkflow
+	} from '$lib/common/job_utilities';
+	import BooleanIcon from '$lib/components/common/BooleanIcon.svelte';
 	import Modal from '$lib/components/common/Modal.svelte';
 
 	/** @type {import('$lib/types-v2').DatasetV2[]} */
@@ -50,8 +54,10 @@
 	export function open(action) {
 		mode = action;
 		replaceExistingDataset = true;
+		applyingWorkflow = false;
+		checkingConfiguration = false;
 		workerInitControl = '';
-		if ((mode === 'run' || mode === 'restart') && workflow.task_list.length > 0) {
+		if (mode === 'run' || mode === 'restart') {
 			firstTaskIndex = 0;
 		} else {
 			firstTaskIndex = getFirstTaskIndexForContinuingWorkflow(workflow.task_list, statuses);
@@ -121,7 +127,9 @@
 	}
 
 	async function replaceDataset() {
-		const { id, name, zarr_dir } = getSelectedDataset();
+		const { id, name, zarr_dir } = /** @type {import('$lib/types-v2').DatasetV2} */ (
+			selectedDataset
+		);
 		await handleDatasetDelete(id);
 		const newDatasets = datasets.filter((d) => d.id !== id);
 		const newDataset = await handleDatasetCreate(name, zarr_dir);
@@ -130,7 +138,7 @@
 	}
 
 	async function createNewDataset() {
-		const { zarr_dir } = getSelectedDataset();
+		const { zarr_dir } = /** @type {import('$lib/types-v2').DatasetV2} */ (selectedDataset);
 		const newDataset = await handleDatasetCreate(newDatasetName, zarr_dir);
 		onDatasetsUpdated([...datasets, newDataset], newDataset.id);
 	}
@@ -185,14 +193,27 @@
 		}
 	}
 
-	function computeNewDatasetName() {
-		newDatasetName = generateNewUniqueDatasetName(datasets, getSelectedDataset().name);
+	/** @type {{ [key: string]: string|number|boolean }} */
+	let appliedAttributeFilters = {};
+	/** @type {{ [key: string]: boolean }} */
+	let appliedTypeFilters = {};
+
+	function showConfirmRun() {
+		checkingConfiguration = true;
+		const wft = workflow.task_list[firstTaskIndex || 0];
+		if (mode === 'restart') {
+			appliedAttributeFilters = { ...wft.input_filters.attributes };
+			appliedTypeFilters = { ...wft.input_filters.types };
+		} else {
+			const dataset = /** @type {import('$lib/types-v2').DatasetV2} */ (selectedDataset);
+			appliedAttributeFilters = { ...dataset.filters.attributes, ...wft.input_filters.attributes };
+			appliedTypeFilters = { ...dataset.filters.types, ...wft.input_filters.types };
+		}
 	}
 
-	function getSelectedDataset() {
-		return /** @type {import('$lib/types-v2').DatasetV2}*/ (
-			datasets.find((d) => d.id === selectedDatasetId)
-		);
+	function computeNewDatasetName() {
+		const dataset = /** @type {import('$lib/types-v2').DatasetV2} */ (selectedDataset);
+		newDatasetName = generateNewUniqueDatasetName(datasets, dataset.name);
 	}
 </script>
 
@@ -384,6 +405,28 @@
 					</div>
 				</div>
 			</div>
+			{#if checkingConfiguration}
+				<hr />
+				<h6 class="mt-3">Applied filters</h6>
+				{#if Object.entries(appliedAttributeFilters).length > 0 || Object.entries(appliedTypeFilters).length > 0}
+					<p>
+						Currently, the following filters are applied to the image list before it is passed to
+						the first task:
+					</p>
+					<ul class="mb-0">
+						{#each Object.entries(appliedAttributeFilters) as [key, value]}
+							<li>{key}: <code>{value}</code></li>
+						{/each}
+					</ul>
+					<ul class="mt-0 mb-1">
+						{#each Object.entries(appliedTypeFilters) as [key, value]}
+							<li>{key}: <BooleanIcon {value} /></li>
+						{/each}
+					</ul>
+				{:else}
+					<p class="mb-0">No filters</p>
+				{/if}
+			{/if}
 		</form>
 	</svelte:fragment>
 	<svelte:fragment slot="footer">
@@ -402,13 +445,15 @@
 				Confirm
 			</button>
 		{:else}
-			<button
-				class="btn btn-primary"
-				on:click={() => (checkingConfiguration = true)}
-				disabled={runBtnDisabled}
-			>
+			<button class="btn btn-primary" on:click={showConfirmRun} disabled={runBtnDisabled}>
 				Run
 			</button>
 		{/if}
 	</svelte:fragment>
 </Modal>
+
+<style>
+	:global(.boolean-icon) {
+		vertical-align: top;
+	}
+</style>

src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte

@@ -717,20 +717,22 @@
 					<button
 						class="btn btn-success"
 						on:click|preventDefault={() => openRunWorkflowModal('run')}
-						disabled={selectedDatasetId === undefined}
+						disabled={selectedDatasetId === undefined || workflow.task_list.length === 0}
 					>
 						<i class="bi-play-fill" /> Run workflow
 					</button>
 				{:else}
 					<button
 						class="btn btn-success"
 						on:click|preventDefault={() => openRunWorkflowModal('continue')}
+						disabled={workflow.task_list.length === 0}
 					>
 						<i class="bi-play-fill" /> Continue workflow
 					</button>
 					<button
 						class="btn btn-primary"
 						on:click|preventDefault={() => openRunWorkflowModal('restart')}
+						disabled={workflow.task_list.length === 0}
 					>
 						<i class="bi bi-arrow-clockwise" /> Restart workflow
 					</button>

tests/v2/run_mock_tasks.spec.js

@@ -230,7 +230,7 @@ test('Collect and run mock tasks [v2]', async ({ page, workflow, request }) => {
 		await modal.waitFor();
 		await expect(
 			modal
-				.getByRole('combobox', { name: 'First task (Optional)' })
+				.getByRole('combobox', { name: 'First task (Required)' })
 				.getByRole('option', { selected: true })
 		).toHaveText('generic_task');
 		await modal.getByRole('button', { name: 'Run', exact: true }).click();