From b55146e1285a739d2a7fdfc72ac969cb04dda029 Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Wed, 17 Apr 2024 15:52:10 +0200
Subject: [PATCH 01/11] Renamed FiltersCreationForm to AttributesTypesForm,
 made buttons text configurable

---
 ...rm.test.js => AttributesTypesForm.test.js} |  24 ++---
 .../v2/projects/datasets/AddImageModal.svelte |  14 +--
 ...Form.svelte => AttributesTypesForm.svelte} | 102 +++++++++++-------
 .../datasets/CreateDatasetModal.svelte        |   6 +-
 .../datasets/DatasetFiltersModal.svelte       |   6 +-
 .../v2/workflow/InputFiltersTab.svelte        |   6 +-
 tests/v2/images.spec.js                       |  10 +-
 7 files changed, 95 insertions(+), 73 deletions(-)
 rename __tests__/v2/{FiltersCreationForm.test.js => AttributesTypesForm.test.js} (88%)
 rename src/lib/components/v2/projects/datasets/{FiltersCreationForm.svelte => AttributesTypesForm.svelte} (79%)

diff --git a/__tests__/v2/FiltersCreationForm.test.js b/__tests__/v2/AttributesTypesForm.test.js
similarity index 88%
rename from __tests__/v2/FiltersCreationForm.test.js
rename to __tests__/v2/AttributesTypesForm.test.js
index 5fe71e53..3701c9da 100644
--- a/__tests__/v2/FiltersCreationForm.test.js
+++ b/__tests__/v2/AttributesTypesForm.test.js
@@ -1,12 +1,12 @@
 import { describe, it, expect } from 'vitest';
 import { fireEvent, render } from '@testing-library/svelte';
 
-import FiltersCreationForm from '../../src/lib/components/v2/projects/datasets/FiltersCreationForm.svelte';
+import AttributesTypesForm from '../../src/lib/components/v2/projects/datasets/AttributesTypesForm.svelte';
 import { tick } from 'svelte';
 
-describe('FiltersCreationForm', () => {
+describe('AttributesTypesForm', () => {
 	it('init with existing filters', async () => {
-		const result = render(FiltersCreationForm);
+		const result = render(AttributesTypesForm);
 		result.component.init(
 			{
 				key1: 'value1',
@@ -29,7 +29,7 @@ describe('FiltersCreationForm', () => {
 	});
 
 	it('add and remove attribute filter', async () => {
-		const result = render(FiltersCreationForm);
+		const result = render(AttributesTypesForm);
 		expect(result.queryAllByPlaceholderText('Key').length).eq(0);
 		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
 		expect(result.queryAllByPlaceholderText('Key').length).eq(1);
@@ -38,7 +38,7 @@ describe('FiltersCreationForm', () => {
 	});
 
 	it('add and remove type filter', async () => {
-		const result = render(FiltersCreationForm);
+		const result = render(AttributesTypesForm);
 		expect(result.queryAllByPlaceholderText('Key').length).eq(0);
 		await fireEvent.click(result.getByRole('button', { name: 'Add type filter' }));
 		expect(result.queryAllByPlaceholderText('Key').length).eq(1);
@@ -47,7 +47,7 @@ describe('FiltersCreationForm', () => {
 	});
 
 	it('validate missing attribute filter key', async () => {
-		const result = render(FiltersCreationForm);
+		const result = render(AttributesTypesForm);
 		result.component.init({}, {});
 		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
 		expect(result.component.validateFields()).false;
@@ -56,7 +56,7 @@ describe('FiltersCreationForm', () => {
 	});
 
 	it('validate missing attribute filter value', async () => {
-		const result = render(FiltersCreationForm);
+		const result = render(AttributesTypesForm);
 		result.component.init({}, {});
 		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
 		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
@@ -66,7 +66,7 @@ describe('FiltersCreationForm', () => {
 	});
 
 	it('validate invalid number', async () => {
-		const result = render(FiltersCreationForm);
+		const result = render(AttributesTypesForm);
 		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
 		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
 		await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'number' } });
@@ -77,7 +77,7 @@ describe('FiltersCreationForm', () => {
 	});
 
 	it('switch to boolean attribute', async () => {
-		const result = render(FiltersCreationForm);
+		const result = render(AttributesTypesForm);
 		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
 		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
 		await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'boolean' } });
@@ -86,7 +86,7 @@ describe('FiltersCreationForm', () => {
 	});
 
 	it('validate duplicated attribute key', async () => {
-		const result = render(FiltersCreationForm);
+		const result = render(AttributesTypesForm);
 		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
 		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
 		await fireEvent.input(result.getByPlaceholderText('Value'), { target: { value: 'foo' } });
@@ -103,7 +103,7 @@ describe('FiltersCreationForm', () => {
 	});
 
 	it('validate missing type filter key', async () => {
-		const result = render(FiltersCreationForm);
+		const result = render(AttributesTypesForm);
 		result.component.init({}, {});
 		await fireEvent.click(result.getByRole('button', { name: 'Add type filter' }));
 		expect(result.component.validateFields()).false;
@@ -112,7 +112,7 @@ describe('FiltersCreationForm', () => {
 	});
 
 	it('validate duplicated type filter key', async () => {
-		const result = render(FiltersCreationForm);
+		const result = render(AttributesTypesForm);
 		result.component.init({}, {});
 		await fireEvent.click(result.getByRole('button', { name: 'Add type filter' }));
 		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
diff --git a/src/lib/components/v2/projects/datasets/AddImageModal.svelte b/src/lib/components/v2/projects/datasets/AddImageModal.svelte
index 59203b8f..ddfcbec8 100644
--- a/src/lib/components/v2/projects/datasets/AddImageModal.svelte
+++ b/src/lib/components/v2/projects/datasets/AddImageModal.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { AlertError } from '$lib/common/errors';
 	import Modal from '$lib/components/common/Modal.svelte';
-	import FiltersCreationForm from './FiltersCreationForm.svelte';
+	import AttributesTypesForm from './AttributesTypesForm.svelte';
 
 	/** @type {import('$lib/types-v2').DatasetV2} */
 	export let dataset;
@@ -14,13 +14,13 @@
 	let zarr_url = '';
 	let saving = false;
 
-	/** @type {FiltersCreationForm} */
-	let filtersCreationForm;
+	/** @type {AttributesTypesForm} */
+	let attributesTypesForm;
 
 	function onOpen() {
 		zarr_url = '';
 		saving = false;
-		filtersCreationForm.init({}, {});
+		attributesTypesForm.init({}, {});
 	}
 
 	async function createNewImage() {
@@ -37,8 +37,8 @@
 						headers,
 						body: JSON.stringify({
 							zarr_url,
-							attributes: filtersCreationForm.getAttributes(),
-							types: filtersCreationForm.getTypes()
+							attributes: attributesTypesForm.getAttributes(),
+							types: attributesTypesForm.getTypes()
 						})
 					}
 				);
@@ -76,7 +76,7 @@
 				<input type="text" class="form-control" bind:value={zarr_url} id="new-image-zarr-url" />
 			</div>
 		</div>
-		<FiltersCreationForm bind:this={filtersCreationForm} />
+		<AttributesTypesForm bind:this={attributesTypesForm} filters={false} />
 		<div id="errorAlert-datasetAddImageModal" class="mt-3" />
 	</svelte:fragment>
 	<svelte:fragment slot="footer">
diff --git a/src/lib/components/v2/projects/datasets/FiltersCreationForm.svelte b/src/lib/components/v2/projects/datasets/AttributesTypesForm.svelte
similarity index 79%
rename from src/lib/components/v2/projects/datasets/FiltersCreationForm.svelte
rename to src/lib/components/v2/projects/datasets/AttributesTypesForm.svelte
index 1d605b29..c9fb5e9f 100644
--- a/src/lib/components/v2/projects/datasets/FiltersCreationForm.svelte
+++ b/src/lib/components/v2/projects/datasets/AttributesTypesForm.svelte
@@ -2,6 +2,8 @@
 	import { objectChanged } from '$lib/common/component_utilities';
 	import { tick } from 'svelte';
 
+	export let filters = true;
+
 	/** @type {{ [key: string]: string | number | boolean }} */
 	let initialAttributeFields = {};
 	/** @type {{ [key: string]: boolean }} */
@@ -95,27 +97,27 @@
 	}
 
 	export function validateFields() {
-		let validFilters = true;
+		let validFields = true;
 		const keys = [];
 		for (const attributeField of attributeFields) {
 			if (!attributeField.key) {
 				attributeField.error = 'Key is required';
-				validFilters = false;
+				validFields = false;
 				continue;
 			}
 			if (!attributeField.value) {
 				attributeField.error = 'Value is required';
-				validFilters = false;
+				validFields = false;
 				continue;
 			}
 			if (attributeField.type === 'number' && !attributeField.value.match(/^\d+\.*\d*$/)) {
 				attributeField.error = 'Invalid number';
-				validFilters = false;
+				validFields = false;
 				continue;
 			}
 			if (keys.includes(attributeField.key)) {
 				attributeField.error = 'Duplicated key';
-				validFilters = false;
+				validFields = false;
 				continue;
 			} else {
 				keys.push(attributeField.key);
@@ -124,21 +126,21 @@
 		for (const typeField of typeFields) {
 			if (!typeField.key) {
 				typeField.error = 'Key is required';
-				validFilters = false;
+				validFields = false;
 				continue;
 			}
 			if (keys.includes(typeField.key)) {
 				typeField.error = 'Duplicated key';
-				validFilters = false;
+				validFields = false;
 				continue;
 			} else {
 				keys.push(typeField.key);
 			}
 		}
-		// Trigger filters update
+		// Trigger items update
 		attributeFields = attributeFields;
 		typeFields = typeFields;
-		return validFilters;
+		return validFields;
 	}
 
 	export function resetErrors() {
@@ -148,19 +150,19 @@
 	}
 
 	/**
-	 * @param {{ value: string, type: string }} filter
+	 * @param {{ value: string, type: string }} item
 	 * @returns {string | number | boolean}
 	 */
-	export function getTypedAttributeValue(filter) {
-		switch (filter.type) {
+	export function getTypedAttributeValue(item) {
+		switch (item.type) {
 			case 'string':
-				return filter.value;
+				return item.value;
 			case 'number':
-				return parseFloat(filter.value);
+				return parseFloat(item.value);
 			case 'boolean':
-				return filter.value.toLowerCase() === 'true';
+				return item.value.toLowerCase() === 'true';
 			default:
-				throw new Error(`Unsupported type: ${filter.type}`);
+				throw new Error(`Unsupported type: ${item.type}`);
 		}
 	}
 
@@ -175,22 +177,22 @@
 		}
 	}
 
-	async function addAttributeFilter() {
-		const filter = { key: '', value: '', type: 'string', error: '' };
-		attributeFields = [...attributeFields, filter];
-		// Set focus to last filter key input
+	async function addAttribute() {
+		const item = { key: '', value: '', type: 'string', error: '' };
+		attributeFields = [...attributeFields, item];
+		// Set focus to last key input
 		await tick();
-		const allKeyInputs = document.querySelectorAll('.attribute-filter-key');
+		const allKeyInputs = document.querySelectorAll('.attribute-key');
 		const lastKeyInput = /**@type {HTMLInputElement}*/ (allKeyInputs[allKeyInputs.length - 1]);
 		lastKeyInput.focus();
 	}
 
-	async function addTypeFilter() {
-		const filter = { key: '', value: false, error: '' };
-		typeFields = [...typeFields, filter];
-		// Set focus to last filter key input
+	async function addType() {
+		const item = { key: '', value: false, error: '' };
+		typeFields = [...typeFields, item];
+		// Set focus to last key input
 		await tick();
-		const allKeyInputs = document.querySelectorAll('.type-filter-key');
+		const allKeyInputs = document.querySelectorAll('.type-key');
 		const lastKeyInput = /**@type {HTMLInputElement}*/ (allKeyInputs[allKeyInputs.length - 1]);
 		lastKeyInput.focus();
 	}
@@ -198,26 +200,32 @@
 	/**
 	 * @param {number} index
 	 */
-	function removeAttributeFilter(index) {
+	function removeAttribute(index) {
 		attributeFields = attributeFields.filter((_, i) => i !== index);
 	}
 
 	/**
 	 * @param {number} index
 	 */
-	function removeTypeFilter(index) {
+	function removeType(index) {
 		typeFields = typeFields.filter((_, i) => i !== index);
 	}
 </script>
 
 {#if attributeFields.length > 0}
-	<h5>Attribute filters</h5>
+	<h5>
+		{#if filters}
+			Attribute filters
+		{:else}
+			Attributes
+		{/if}
+	</h5>
 {/if}
 {#each attributeFields as field, index}
 	<div class="input-group mb-3" class:has-validation={field.error}>
 		<input
 			type="text"
-			class="form-control attribute-filter-key"
+			class="form-control attribute-key"
 			placeholder="Key"
 			bind:value={field.key}
 			class:is-invalid={field.error}
@@ -250,8 +258,8 @@
 		<button
 			class="btn btn-outline-danger"
 			type="button"
-			on:click={() => removeAttributeFilter(index)}
-			aria-label="Remove attribute filter"
+			on:click={() => removeAttribute(index)}
+			aria-label={filters ? 'Remove attribute filter' : 'Remove attribute'}
 		>
 			<i class="bi bi-trash" />
 		</button>
@@ -262,7 +270,13 @@
 {/each}
 
 {#if typeFields.length > 0}
-	<h5>Type filters</h5>
+	<h5>
+		{#if filters}
+			Type filters
+		{:else}
+			Types
+		{/if}
+	</h5>
 {/if}
 {#each typeFields as field, index}
 	<div class="row">
@@ -270,7 +284,7 @@
 			<div class="input-group mb-3" class:has-validation={field.error}>
 				<input
 					type="text"
-					class="form-control type-filter-key"
+					class="form-control type-key"
 					placeholder="Key"
 					bind:value={field.key}
 					class:is-invalid={field.error}
@@ -289,8 +303,8 @@
 				<button
 					class="btn btn-outline-danger"
 					type="button"
-					on:click={() => removeTypeFilter(index)}
-					aria-label="Remove type filter"
+					on:click={() => removeType(index)}
+					aria-label={filters ? 'Remove type filter' : 'Remove type'}
 				>
 					<i class="bi bi-trash" />
 				</button>
@@ -304,11 +318,19 @@
 
 <div class="row mb-3">
 	<div class="col-12">
-		<button class="btn btn-outline-primary" type="button" on:click={addAttributeFilter}>
-			Add attribute filter
+		<button class="btn btn-outline-primary" type="button" on:click={addAttribute}>
+			{#if filters}
+				Add attribute filter
+			{:else}
+				Add attribute
+			{/if}
 		</button>
-		<button class="btn btn-outline-primary" type="button" on:click={addTypeFilter}>
-			Add type filter
+		<button class="btn btn-outline-primary" type="button" on:click={addType}>
+			{#if filters}
+				Add type filter
+			{:else}
+				Add type
+			{/if}
 		</button>
 	</div>
 </div>
diff --git a/src/lib/components/v2/projects/datasets/CreateDatasetModal.svelte b/src/lib/components/v2/projects/datasets/CreateDatasetModal.svelte
index 85790b3d..5b08219a 100644
--- a/src/lib/components/v2/projects/datasets/CreateDatasetModal.svelte
+++ b/src/lib/components/v2/projects/datasets/CreateDatasetModal.svelte
@@ -2,7 +2,7 @@
 	import { page } from '$app/stores';
 	import { AlertError } from '$lib/common/errors';
 	import Modal from '../../../common/Modal.svelte';
-	import FiltersCreationForm from './FiltersCreationForm.svelte';
+	import AttributesTypesForm from './AttributesTypesForm.svelte';
 
 	/** @type {(dataset: import('$lib/types-v2').DatasetV2) => void} */
 	export let createDatasetCallback;
@@ -16,7 +16,7 @@
 	let saving = false;
 	let creatingDataset = false;
 
-	/** @type {FiltersCreationForm} */
+	/** @type {AttributesTypesForm} */
 	let filtersCreationForm;
 
 	function onOpen() {
@@ -131,7 +131,7 @@
 					</div>
 				</div>
 			</div>
-			<FiltersCreationForm bind:this={filtersCreationForm} />
+			<AttributesTypesForm bind:this={filtersCreationForm} />
 		</form>
 	</svelte:fragment>
 	<svelte:fragment slot="footer">
diff --git a/src/lib/components/v2/projects/datasets/DatasetFiltersModal.svelte b/src/lib/components/v2/projects/datasets/DatasetFiltersModal.svelte
index b8dc9b0b..a49a508c 100644
--- a/src/lib/components/v2/projects/datasets/DatasetFiltersModal.svelte
+++ b/src/lib/components/v2/projects/datasets/DatasetFiltersModal.svelte
@@ -2,7 +2,7 @@
 	import { page } from '$app/stores';
 	import { AlertError } from '$lib/common/errors';
 	import Modal from '$lib/components/common/Modal.svelte';
-	import FiltersCreationForm from './FiltersCreationForm.svelte';
+	import AttributesTypesForm from './AttributesTypesForm.svelte';
 
 	/** @type {import('$lib/types-v2').DatasetV2} */
 	export let dataset;
@@ -12,7 +12,7 @@
 	/** @type {Modal} */
 	let modal;
 
-	/** @type {FiltersCreationForm} */
+	/** @type {AttributesTypesForm} */
 	let filtersCreationForm;
 
 	let saving = false;
@@ -72,7 +72,7 @@
 		<h5 class="modal-title">Dataset filters</h5>
 	</svelte:fragment>
 	<svelte:fragment slot="body">
-		<FiltersCreationForm bind:this={filtersCreationForm} />
+		<AttributesTypesForm bind:this={filtersCreationForm} />
 	</svelte:fragment>
 	<svelte:fragment slot="footer">
 		<button class="btn btn-primary" on:click={handleSave} disabled={saving}>
diff --git a/src/lib/components/v2/workflow/InputFiltersTab.svelte b/src/lib/components/v2/workflow/InputFiltersTab.svelte
index 03893ee3..2d53391c 100644
--- a/src/lib/components/v2/workflow/InputFiltersTab.svelte
+++ b/src/lib/components/v2/workflow/InputFiltersTab.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { onMount } from 'svelte';
-	import FiltersCreationForm from '../projects/datasets/FiltersCreationForm.svelte';
+	import AttributesTypesForm from '../projects/datasets/AttributesTypesForm.svelte';
 	import { displayStandardErrorAlert } from '$lib/common/errors';
 	import Modal from '$lib/components/common/Modal.svelte';
 
@@ -13,7 +13,7 @@
 	/** @type {(wft: import("$lib/types-v2").WorkflowTaskV2) => void} */
 	export let updateWorkflowTaskCallback;
 
-	/** @type {FiltersCreationForm} */
+	/** @type {AttributesTypesForm} */
 	let form;
 
 	let saving = false;
@@ -141,7 +141,7 @@
 </script>
 
 <div class="p-3">
-	<FiltersCreationForm bind:this={form} />
+	<AttributesTypesForm bind:this={form} />
 
 	{#if loadingDatasetFilters}
 		<span class="spinner-border spinner-border-sm mb-3" role="status" aria-hidden="true" />
diff --git a/tests/v2/images.spec.js b/tests/v2/images.spec.js
index ce470ccc..00b76c03 100644
--- a/tests/v2/images.spec.js
+++ b/tests/v2/images.spec.js
@@ -12,7 +12,7 @@ test('Dataset images [v2]', async ({ page, project }) => {
 		await modal.waitFor();
 		await modal.getByRole('textbox', { name: 'Dataset Name' }).fill('test-dataset');
 		await modal.getByRole('textbox', { name: 'Zarr dir' }).fill('/tmp');
-		await modal.getByRole('button', { name: 'Add attribute filter' }).click();
+		await modal.getByRole('button', { name: 'Add attribute' }).click();
 		await modal.getByPlaceholder('Key').fill('k1');
 		await modal.getByPlaceholder('Value').fill('v1');
 		await modal.getByRole('button', { name: 'Save' }).click();
@@ -31,7 +31,7 @@ test('Dataset images [v2]', async ({ page, project }) => {
 
 	await test.step('Create an image with string attribute filter', async () => {
 		await createImage(page, 'img2', async function (modal) {
-			await modal.getByRole('button', { name: 'Add attribute filter' }).click();
+			await modal.getByRole('button', { name: 'Add attribute' }).click();
 			await modal.getByPlaceholder('Key').fill('k1');
 			await modal.getByPlaceholder('Value').fill('v1');
 		});
@@ -39,7 +39,7 @@ test('Dataset images [v2]', async ({ page, project }) => {
 
 	await test.step('Create an image with numeric attribute filter', async () => {
 		await createImage(page, 'img3', async function (modal) {
-			await modal.getByRole('button', { name: 'Add attribute filter' }).click();
+			await modal.getByRole('button', { name: 'Add attribute' }).click();
 			await modal.getByPlaceholder('Key').fill('k2');
 			await modal.getByPlaceholder('Value').fill('42');
 			await modal.getByRole('combobox').selectOption('Number');
@@ -48,14 +48,14 @@ test('Dataset images [v2]', async ({ page, project }) => {
 
 	await test.step('Create an image with false type filter', async () => {
 		await createImage(page, 'img4', async function (modal) {
-			await modal.getByRole('button', { name: 'Add type filter' }).click();
+			await modal.getByRole('button', { name: 'Add type' }).click();
 			await modal.getByPlaceholder('Key').fill('k3');
 		});
 	});
 
 	await test.step('Create an image with true type filter', async () => {
 		await createImage(page, 'img5', async function (modal) {
-			await modal.getByRole('button', { name: 'Add type filter' }).click();
+			await modal.getByRole('button', { name: 'Add type' }).click();
 			await modal.getByPlaceholder('Key').fill('k3');
 			await modal.getByRole('checkbox').check();
 		});

From 8d788051bf88ea155fb2e694389af791981ec05d Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Wed, 17 Apr 2024 15:52:41 +0200
Subject: [PATCH 02/11] Added more workflow task input filters tests

---
 tests/v2/workflow_task_input_filters.spec.js | 230 ++++++++++++++++++-
 1 file changed, 218 insertions(+), 12 deletions(-)

diff --git a/tests/v2/workflow_task_input_filters.spec.js b/tests/v2/workflow_task_input_filters.spec.js
index 2ce5c5a1..c1b675b3 100644
--- a/tests/v2/workflow_task_input_filters.spec.js
+++ b/tests/v2/workflow_task_input_filters.spec.js
@@ -1,23 +1,74 @@
 import { expect, test } from './workflow_fixture.js';
-import { waitPageLoading } from '../utils.js';
+import { waitModalClosed, waitPageLoading } from '../utils.js';
 import { createFakeTask, deleteTask } from './task_utils.js';
+import { createDataset } from './dataset_utils.js';
 
 test('Workflow task input filters [v2]', async ({ page, workflow }) => {
 	await page.waitForURL(workflow.url);
 	await waitPageLoading(page);
 
-	let taskName;
-	await test.step('Create test task', async () => {
-		taskName = await createFakeTask(page, { type: 'non_parallel' });
+	let taskName1, taskName2;
+	await test.step('Create test tasks', async () => {
+		taskName1 = await createFakeTask(page, { type: 'non_parallel' });
+		taskName2 = await createFakeTask(page, { type: 'non_parallel' });
+	});
+
+	let datasetId, datasetName;
+	await test.step('Create test dataset', async () => {
+		const { id, name } = await createDataset(page, workflow.projectId);
+		datasetId = id;
+		datasetName = name;
+	});
+
+	await test.step('Add images to test dataset', async () => {
+		await page.goto(`/v2/projects/${workflow.projectId}/datasets/${datasetId}`);
+		await waitPageLoading(page);
+		await page.getByRole('button', { name: 'Add an image list entry' }).click();
+		let modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await modal
+			.getByRole('textbox', { name: 'Zarr URL' })
+			.fill(`/tmp/playwight/datasets/${datasetName}/img1`);
+		await modal.getByRole('button', { name: 'Add attribute' }).click();
+		await modal.getByPlaceholder('Key').fill('k1');
+		await modal.getByPlaceholder('Value').fill('value1');
+		await modal.getByRole('button', { name: 'Add attribute' }).click();
+		await modal.getByPlaceholder('Key').nth(1).fill('k2');
+		await modal.getByPlaceholder('Value').nth(1).fill('42');
+		await modal.getByRole('combobox').nth(1).selectOption('Number');
+		await modal.getByRole('button', { name: 'Add attribute' }).click();
+		await modal.getByPlaceholder('Key').nth(2).fill('k3');
+		await modal.getByRole('combobox').nth(2).selectOption('Boolean');
+		await modal.getByRole('button', { name: 'Add type' }).click();
+		await modal.getByPlaceholder('Key').nth(3).fill('k4');
+		let saveBtn = modal.getByRole('button', { name: 'Save' });
+		await saveBtn.click();
+		await waitModalClosed(page);
+		await page.getByRole('button', { name: 'Add an image list entry' }).click();
+		modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await modal
+			.getByRole('textbox', { name: 'Zarr URL' })
+			.fill(`/tmp/playwight/datasets/${datasetName}/img2`);
+		await modal.getByRole('button', { name: 'Add attribute' }).click();
+		await modal.getByPlaceholder('Key').fill('k1');
+		await modal.getByPlaceholder('Value').fill('value2');
+		await modal.getByRole('button', { name: 'Add type' }).click();
+		await modal.getByPlaceholder('Key').nth(1).fill('k4');
+		await modal.getByRole('checkbox').check();
+		saveBtn = modal.getByRole('button', { name: 'Save' });
+		await saveBtn.click();
+		await waitModalClosed(page);
 	});
 
 	await test.step('Open workflow page', async () => {
 		await workflow.openWorkflowPage();
 	});
 
-	await test.step('Add task to workflow', async () => {
-		await workflow.addUserTask(taskName);
-		await workflow.selectTask(taskName);
+	await test.step('Add tasks to workflow', async () => {
+		await workflow.addUserTask(taskName1);
+		await workflow.addUserTask(taskName2);
+		await workflow.selectTask(taskName1);
 	});
 
 	await test.step('Open Input Filters tab', async () => {
@@ -25,7 +76,7 @@ test('Workflow task input filters [v2]', async ({ page, workflow }) => {
 	});
 
 	await test.step('Add empty attribute filter and trigger validation', async () => {
-		await page.getByRole('button', { name: 'Add attribute filter' }).click();
+		await page.getByRole('button', { name: 'Add attribute' }).click();
 		await page.getByRole('button', { name: 'Save' }).click();
 		await page.getByText('Key is required').waitFor();
 	});
@@ -33,23 +84,178 @@ test('Workflow task input filters [v2]', async ({ page, workflow }) => {
 	await test.step('Add valid filters', async () => {
 		await page.getByPlaceholder('Key').fill('key1');
 		await page.getByPlaceholder('Value').fill('value1');
-		await page.getByRole('button', { name: 'Add type filter' }).click();
+		await page.getByRole('button', { name: 'Add type' }).click();
 		await page.getByPlaceholder('Key').nth(1).fill('key2');
 		await page.getByRole('button', { name: 'Save' }).click();
 		await page.getByText('Input filters successfully updated').waitFor();
 	});
 
-	await test.step('Reload the page and check save filters', async () => {
+	await test.step('Reload the page and check saved filters', async () => {
 		await page.reload();
-		await workflow.selectTask(taskName);
+		await workflow.selectTask(taskName1);
 		await page.getByText('Input Filters').click();
 		await expect(page.getByPlaceholder('Key').first()).toHaveValue('key1');
 		await expect(page.getByPlaceholder('Value').first()).toHaveValue('value1');
 		await expect(page.getByPlaceholder('Key').nth(1)).toHaveValue('key2');
 	});
 
+	await test.step('Trigger pending changes modal from changing tab', async () => {
+		await page.getByPlaceholder('Value').first().fill('value1-mod');
+		await page.getByRole('button', { name: 'Info', exact: true }).click();
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await page.getByText('There are filter changes unsaved').waitFor();
+		await modal.getByRole('button', { name: 'Cancel' }).click();
+		await waitModalClosed(page);
+		await expect(page.getByPlaceholder('Value').first()).toHaveValue('value1-mod');
+	});
+
+	await test.step('Trigger pending changes modal from clicking to "Run workflow" button', async () => {
+		await page.getByRole('button', { name: 'Run workflow' }).click();
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await page.getByText('There are filter changes unsaved').waitFor();
+		await modal.getByRole('button', { name: 'Cancel' }).click();
+		await waitModalClosed(page);
+		await expect(page.getByPlaceholder('Value').first()).toHaveValue('value1-mod');
+	});
+
+	await test.step('Trigger pending changes modal from navigation', async () => {
+		await page.getByRole('link', { name: 'List jobs' }).click();
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await page.getByText('There are filter changes unsaved').waitFor();
+		await modal.getByRole('button', { name: 'Cancel' }).click();
+		await waitModalClosed(page);
+		await expect(page.getByPlaceholder('Value').first()).toHaveValue('value1-mod');
+	});
+
+	await test.step('Trigger pending changes modal from changing task selection, discard changes', async () => {
+		await expect(page.locator('.list-group .list-group-item-action.active')).toContainText(
+			taskName1
+		);
+		await workflow.selectTask(taskName2);
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await page.getByText('There are filter changes unsaved').waitFor();
+		await modal.getByRole('button', { name: 'Discard changes' }).click();
+		await waitModalClosed(page);
+		await expect(page.locator('.list-group .list-group-item-action.active')).toContainText(
+			taskName2
+		);
+		await workflow.selectTask(taskName1);
+		await expect(page.getByPlaceholder('Value').first()).toHaveValue('value1');
+	});
+
+	await test.step('Trigger pending changes modal from changing task selection, save changes', async () => {
+		await expect(page.locator('.list-group .list-group-item-action.active')).toContainText(
+			taskName1
+		);
+		await page.getByPlaceholder('Value').first().fill('value1-mod');
+		await workflow.selectTask(taskName2);
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await page.getByText('There are filter changes unsaved').waitFor();
+		await modal.getByRole('button', { name: 'Save changes' }).click();
+		await waitModalClosed(page);
+		await page.getByText('Input filters successfully updated').waitFor();
+		await expect(page.locator('.list-group .list-group-item-action.active')).toContainText(
+			taskName1
+		);
+		await expect(page.getByPlaceholder('Value').first()).toHaveValue('value1-mod');
+	});
+
+	await test.step('Select dataset and task2', async () => {
+		await page.getByRole('combobox', { name: 'Dataset', exact: true }).selectOption(datasetName);
+		await workflow.selectTask(taskName2);
+	});
+
+	await test.step('Add attribute filter from dataset: string', async () => {
+		await page.getByRole('button', { name: 'Add attribute filter from dataset' }).click();
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await modal.getByRole('combobox', { name: 'Attribute Key' }).selectOption('k1');
+		await modal.getByRole('combobox', { name: 'Attribute Value' }).selectOption('value1');
+		await modal.getByRole('button', { name: 'Add' }).click();
+		await waitModalClosed(page);
+		await expect(page.getByPlaceholder('Key')).toHaveCount(1);
+		await expect(page.getByPlaceholder('Key')).toHaveValue('k1');
+		await expect(page.getByPlaceholder('Value')).toHaveValue('value1');
+		await expect(page.getByLabel('Type', { exact: true })).toHaveValue('string');
+	});
+
+	await test.step('Add attribute filter from dataset: number', async () => {
+		await page.getByRole('button', { name: 'Add attribute filter from dataset' }).click();
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await modal.getByRole('combobox', { name: 'Attribute Key' }).selectOption('k2');
+		await modal.getByRole('combobox', { name: 'Attribute Value' }).selectOption('42');
+		await modal.getByRole('button', { name: 'Add' }).click();
+		await waitModalClosed(page);
+		await expect(page.getByPlaceholder('Key')).toHaveCount(2);
+		await expect(page.getByPlaceholder('Key').nth(1)).toHaveValue('k2');
+		await expect(page.getByPlaceholder('Value').nth(1)).toHaveValue('42');
+		await expect(page.getByLabel('Type', { exact: true }).nth(1)).toHaveValue('number');
+	});
+
+	await test.step('Add attribute filter from dataset: boolean', async () => {
+		await page.getByRole('button', { name: 'Add attribute filter from dataset' }).click();
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await modal.getByRole('combobox', { name: 'Attribute Key' }).selectOption('k3');
+		await modal.getByRole('combobox', { name: 'Attribute Value' }).selectOption('True');
+		await modal.getByRole('button', { name: 'Add' }).click();
+		await waitModalClosed(page);
+		await expect(page.getByPlaceholder('Key')).toHaveCount(3);
+		await expect(page.getByPlaceholder('Key').nth(2)).toHaveValue('k3');
+		await expect(page.getByLabel('Value', { exact: true })).toHaveValue('true');
+		await expect(page.getByLabel('Type', { exact: true }).nth(2)).toHaveValue('boolean');
+	});
+
+	await test.step('Add already existing attribute filter from dataset', async () => {
+		await page.getByRole('button', { name: 'Add attribute filter from dataset' }).click();
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await modal.getByRole('combobox', { name: 'Attribute Key' }).selectOption('k1');
+		await modal.getByRole('combobox', { name: 'Attribute Value' }).selectOption('value2');
+		await modal.getByRole('button', { name: 'Add' }).click();
+		await waitModalClosed(page);
+		await expect(page.getByPlaceholder('Key')).toHaveCount(3);
+		await expect(page.getByPlaceholder('Key').nth(0)).toHaveValue('k1');
+		await expect(page.getByPlaceholder('Value').nth(0)).toHaveValue('value2');
+		await expect(page.getByLabel('Type', { exact: true }).nth(0)).toHaveValue('string');
+	});
+
+	await test.step('Add type filter from dataset', async () => {
+		await page.getByRole('button', { name: 'Add type filter from dataset' }).click();
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await modal.getByRole('combobox', { name: 'Type Key' }).selectOption('k4');
+		await modal.getByRole('button', { name: 'Add' }).click();
+		await waitModalClosed(page);
+		await expect(page.getByPlaceholder('Key')).toHaveCount(4);
+		await expect(page.getByPlaceholder('Key').nth(3)).toHaveValue('k4');
+		await expect(page.getByRole('checkbox')).toBeChecked();
+	});
+
+	await test.step('Add already existing type filter from dataset', async () => {
+		await page.getByRole('button', { name: 'Add type filter from dataset' }).click();
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		await modal.getByRole('combobox', { name: 'Type Key' }).selectOption('k4');
+		await modal.getByRole('combobox', { name: 'Type Value' }).selectOption('False');
+		await modal.getByRole('button', { name: 'Add' }).click();
+		await waitModalClosed(page);
+		await expect(page.getByPlaceholder('Key')).toHaveCount(4);
+		await expect(page.getByPlaceholder('Key').nth(3)).toHaveValue('k4');
+		await expect(page.getByRole('checkbox')).not.toBeChecked();
+	});
+
 	await test.step('Cleanup', async () => {
 		await workflow.removeCurrentTask();
-		await deleteTask(page, taskName);
+		await workflow.selectTask(taskName1);
+		await workflow.removeCurrentTask();
+		await deleteTask(page, taskName1);
+		await deleteTask(page, taskName2);
 	});
 });

From a8670081c1a435bdd2da67ff084129aea58904ff Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Wed, 17 Apr 2024 16:09:28 +0200
Subject: [PATCH 03/11] Fixed bug in workflow task PATCH

---
 src/lib/components/v2/workflow/ArgumentsSchema.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/v2/workflow/ArgumentsSchema.svelte b/src/lib/components/v2/workflow/ArgumentsSchema.svelte
index 8d5e57fb..33afa753 100644
--- a/src/lib/components/v2/workflow/ArgumentsSchema.svelte
+++ b/src/lib/components/v2/workflow/ArgumentsSchema.svelte
@@ -4,6 +4,7 @@
 	import { displayStandardErrorAlert } from '$lib/common/errors';
 	import FormBuilder from './FormBuilder.svelte';
 	import ImportExportArgs from './ImportExportArgs.svelte';
+	import { stripNullAndEmptyObjectsAndArrays } from '$lib/components/common/jschema/schema_management';
 
 	const SUPPORTED_SCHEMA_VERSIONS = ['pydantic_v1'];
 
@@ -94,7 +95,7 @@
 				method: 'PATCH',
 				credentials: 'include',
 				headers,
-				body: JSON.stringify(payload)
+				body: JSON.stringify(stripNullAndEmptyObjectsAndArrays(payload))
 			}
 		);
 

From 54f3c84ae19e204b61f7eaa83ee872a25ede4248 Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Wed, 17 Apr 2024 17:23:03 +0200
Subject: [PATCH 04/11] Improved v1/v2 version switch layout

---
 src/routes/+layout.svelte | 91 ++++++++++++++++++++++++---------------
 src/routes/+page.svelte   | 11 +++++
 2 files changed, 67 insertions(+), 35 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 91f2fb67..715dea34 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,18 +2,20 @@
 	import { browser } from '$app/environment';
 	import { page } from '$app/stores';
 	import { navigating } from '$app/stores';
-	import { reloadVersionedPage, versionsLabels } from '$lib/common/selected_api_version';
+	import { reloadVersionedPage } from '$lib/common/selected_api_version';
 	import { onMount } from 'svelte';
 
 	$: userLoggedIn = !!$page.data.userInfo;
 	$: isAdmin = userLoggedIn && $page.data.userInfo.is_superuser;
 	$: server = $page.data.serverInfo || {};
+	/** @type {'v1'|'v2'} */
 	let apiVersion = $page.data.apiVersion;
 	// @ts-ignore
 	// eslint-disable-next-line no-undef
 	let clientVersion = __APP_VERSION__;
 
-	$: displayVersionSelector = !isSubPage($page.url.pathname, apiVersion);
+	$: displayVersionSelector =
+		!isSubPage($page.url.pathname, apiVersion) && selectedSection !== 'home';
 
 	/**
 	 * Returns true if the URL indicates a subpage.
@@ -76,7 +78,7 @@
 	}
 
 	/**
-	 * @param {string} version
+	 * @param {'v1'|'v2'} version
 	 */
 	function setSelecteApiVersion(version) {
 		apiVersion = version;
@@ -85,6 +87,12 @@
 
 	let loading = true;
 
+	$: {
+		if (selectedSection === 'home') {
+			setSelecteApiVersion('v2');
+		}
+	}
+
 	onMount(() => {
 		loading = false;
 		if (sessionStorage && userLoggedIn) {
@@ -94,7 +102,7 @@
 </script>
 
 <main>
-	<nav class="bg-light border-bottom">
+	<nav class="bg-light border-bottom" class:legacy={apiVersion === 'v1'}>
 		<div class="container d-flex flex-wrap">
 			<ul class="nav me-auto">
 				<li class="nav-item">
@@ -120,17 +128,17 @@
 						</a>
 					</li>
 					<li class="nav-item">
-						<a
-							href="/{apiVersion}/jobs"
-							class="nav-link"
-							class:active={selectedSection === 'jobs'}
-						>
+						<a href="/{apiVersion}/jobs" class="nav-link" class:active={selectedSection === 'jobs'}>
 							Jobs
 						</a>
 					</li>
 					{#if isAdmin}
 						<li class="nav-item">
-							<a href="/{apiVersion}/admin" class="nav-link" class:admin-active={selectedSection === 'admin'}>
+							<a
+								href="/{apiVersion}/admin"
+								class="nav-link"
+								class:admin-active={selectedSection === 'admin'}
+							>
 								Admin area
 							</a>
 						</li>
@@ -140,33 +148,28 @@
 			<ul class="nav">
 				{#if userLoggedIn}
 					{#if displayVersionSelector}
-						<li class="nav-item dropdown">
-							<a
-								class="nav-link dropdown-toggle"
-								href="#api-version"
-								role="button"
-								data-bs-toggle="dropdown"
-								aria-expanded="false"
-							>
-								{versionsLabels[apiVersion]}
-							</a>
-							<ul class="dropdown-menu">
-								{#each Object.entries(versionsLabels) as [version, label]}
-									<li>
-										<button
-											class="dropdown-item"
-											type="button"
-											on:click={() => setSelecteApiVersion(version)}
-										>
-											{label}
-										</button>
-									</li>
-								{/each}
-							</ul>
+						<li class="nav-item">
+							{#if apiVersion === 'v1'}
+								<button
+									class="btn btn-info mt-1 pt-1 pb-1 border-primary"
+									type="button"
+									on:click={() => setSelecteApiVersion('v2')}
+								>
+									Switch to Fractal V2
+								</button>
+							{:else}
+								<button
+									class="btn btn-outline-secondary mt-1 pt-1 pb-1"
+									type="button"
+									on:click={() => setSelecteApiVersion('v1')}
+								>
+									Switch to legacy Fractal
+								</button>
+							{/if}
 						</li>
-					{:else}
+					{:else if apiVersion === 'v1'}
 						<li class="navbar-text me-3">
-							<span class="badge text-bg-info">{versionsLabels[apiVersion]}</span>
+							<span class="badge text-bg-secondary">legacy</span>
 						</li>
 					{/if}
 					<li class="nav-item dropdown">
@@ -195,6 +198,9 @@
 			</ul>
 		</div>
 	</nav>
+	{#if apiVersion === 'v1'}
+		<div class="legacy-border" />
+	{/if}
 	{#if selectedSection === 'admin'}
 		<div class="admin-border" />
 	{/if}
@@ -235,6 +241,20 @@
 </main>
 
 <style>
+	nav.legacy {
+		background-color: #e4e4e4 !important;
+		border-bottom-color: #888 !important;
+	}
+
+	nav.legacy .nav-link.active {
+		background-color: #d0d0d0 !important;
+	}
+
+	.legacy-border {
+		height: 6px;
+		background-color: #888;
+	}
+
 	.nav-link.active {
 		background-color: #eee;
 		border-bottom-width: 3px;
@@ -249,6 +269,7 @@
 		height: 8px;
 		background-color: #dc3545;
 	}
+
 	.loading {
 		position: fixed;
 		top: 0;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6b8582a4..d60107cc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -29,6 +29,17 @@
 		<a href="/v2/jobs" class="btn btn-primary">Jobs</a>
 	</div>
 
+	<p>
+		This is the new version 2 of Fractal. Your older projects and workflows are still available in
+		the legacy version that you can access here (links to legacy project page). We encourage you to
+		switch to Fractal V2 for all new projects and report any issues you find.
+	</p>
+	<p>
+		We strictly separate projects, datasets and workflows into Fractal V2 and legacy. You can use
+		many of your existing tasks in the Fractal V2 version without any changes required. If you don't
+		find the task you require in Fractal V2, please reach out to the support.
+	</p>
+
 	{#if PUBLIC_FRACTAL_ADMIN_SUPPORT_EMAIL}
 		<h3 class="fw-light">Where to get support</h3>
 		<p>

From 64ffe971f61a4ef6cc824768c07431da42adab6f Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Wed, 17 Apr 2024 17:40:52 +0200
Subject: [PATCH 05/11] Fixed Stop workflow not disappearing when deselecting
 dataset

---
 .../v2/projects/[projectId]/workflows/[workflowId]/+page.svelte  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte b/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte
index bd5424a9..6c69aacf 100644
--- a/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte
+++ b/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte
@@ -583,6 +583,7 @@
 			statuses = {};
 			jobError = '';
 			failedJob = undefined;
+			selectedSubmittedJob = undefined;
 			return;
 		}
 		selectedSubmittedJob = await getSelectedSubmittedJob(selectedDatasetId);

From a94820b13bb9378e4ff4a3dcad065887821ce743 Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Thu, 18 Apr 2024 10:05:53 +0200
Subject: [PATCH 06/11] Changed home page text and improved version switcher

---
 src/lib/common/selected_api_version.js |  5 -----
 src/routes/+layout.server.js           | 10 +++-------
 src/routes/+layout.svelte              |  3 +--
 src/routes/+page.svelte                |  4 ++--
 4 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/lib/common/selected_api_version.js b/src/lib/common/selected_api_version.js
index 1724ee09..4f4a11fc 100644
--- a/src/lib/common/selected_api_version.js
+++ b/src/lib/common/selected_api_version.js
@@ -1,10 +1,5 @@
 import { goto } from "$app/navigation";
 
-export const versionsLabels = {
-	v1: 'legacy',
-	v2: 'current'
-};
-
 /**
  * Save the selected API version in the cookie and reload the page.
  * This function is called from the Svelte frontend.
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index a672a199..7223eb75 100644
--- a/src/routes/+layout.server.js
+++ b/src/routes/+layout.server.js
@@ -1,7 +1,7 @@
 import { FRACTAL_SERVER_HOST } from '$env/static/private';
 import { getCurrentUser } from '$lib/server/api/v1/auth_api';
 
-export async function load({ fetch, cookies, request }) {
+export async function load({ fetch, cookies }) {
 	// This is a mark to notify and log when the server is running SSR
 	console.log('SSR - Main layout');
 
@@ -16,8 +16,6 @@ export async function load({ fetch, cookies, request }) {
 			console.error(error);
 		});
 
-	const apiVersion = request.url.includes('/v1/') ? 'v1' : 'v2';
-
 	// Check user info
 	// Check auth cookie is present
 	const fastApiUsersAuth = cookies.get('fastapiusersauth');
@@ -25,8 +23,7 @@ export async function load({ fetch, cookies, request }) {
 		console.log('No auth cookie found');
 		return {
 			serverInfo,
-			userInfo: null,
-			apiVersion
+			userInfo: null
 		};
 	}
 
@@ -38,7 +35,6 @@ export async function load({ fetch, cookies, request }) {
 
 	return {
 		serverInfo,
-		userInfo,
-		apiVersion
+		userInfo
 	};
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 715dea34..7b11bdc1 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,7 +9,7 @@
 	$: isAdmin = userLoggedIn && $page.data.userInfo.is_superuser;
 	$: server = $page.data.serverInfo || {};
 	/** @type {'v1'|'v2'} */
-	let apiVersion = $page.data.apiVersion;
+	$: apiVersion = $page.url.pathname.startsWith('/v1') ? 'v1': 'v2';
 	// @ts-ignore
 	// eslint-disable-next-line no-undef
 	let clientVersion = __APP_VERSION__;
@@ -81,7 +81,6 @@
 	 * @param {'v1'|'v2'} version
 	 */
 	function setSelecteApiVersion(version) {
-		apiVersion = version;
 		reloadVersionedPage($page.url.pathname, version);
 	}
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d60107cc..b29a414e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -31,8 +31,8 @@
 
 	<p>
 		This is the new version 2 of Fractal. Your older projects and workflows are still available in
-		the legacy version that you can access here (links to legacy project page). We encourage you to
-		switch to Fractal V2 for all new projects and report any issues you find.
+		the legacy version that you can access in <a href="/v1/projects">the legacy project page</a>. We
+		encourage you to switch to Fractal V2 for all new projects and report any issues you find.
 	</p>
 	<p>
 		We strictly separate projects, datasets and workflows into Fractal V2 and legacy. You can use

From 6d0f945b36bf6ab27c6c177f7c09d7d652c0be30 Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Thu, 18 Apr 2024 10:18:01 +0200
Subject: [PATCH 07/11] Implemented editing of a dataset image

---
 ...l.svelte => CreateUpdateImageModal.svelte} | 85 +++++++++++++++++--
 src/lib/types-v2.d.ts                         | 12 +--
 .../datasets/[datasetId]/+page.svelte         | 26 +++---
 tests/v2/images.spec.js                       | 20 +++++
 4 files changed, 119 insertions(+), 24 deletions(-)
 rename src/lib/components/v2/projects/datasets/{AddImageModal.svelte => CreateUpdateImageModal.svelte} (52%)

diff --git a/src/lib/components/v2/projects/datasets/AddImageModal.svelte b/src/lib/components/v2/projects/datasets/CreateUpdateImageModal.svelte
similarity index 52%
rename from src/lib/components/v2/projects/datasets/AddImageModal.svelte
rename to src/lib/components/v2/projects/datasets/CreateUpdateImageModal.svelte
index ddfcbec8..705264e8 100644
--- a/src/lib/components/v2/projects/datasets/AddImageModal.svelte
+++ b/src/lib/components/v2/projects/datasets/CreateUpdateImageModal.svelte
@@ -13,14 +13,36 @@
 
 	let zarr_url = '';
 	let saving = false;
+	let isNew = false;
 
 	/** @type {AttributesTypesForm} */
 	let attributesTypesForm;
 
-	function onOpen() {
-		zarr_url = '';
+	export function openForCreate() {
+		isNew = true;
 		saving = false;
+		zarr_url = '';
 		attributesTypesForm.init({}, {});
+		modal.show();
+	}
+
+	/**
+	 * @param {import('$lib/types-v2').Image} image
+	 */
+	export function openForEditing(image) {
+		isNew = false;
+		saving = false;
+		zarr_url = image.zarr_url;
+		attributesTypesForm.init(image.attributes, image.types);
+		modal.show();
+	}
+
+	async function saveImage() {
+		if (isNew) {
+			await createNewImage();
+		} else {
+			await updateImage();
+		}
 	}
 
 	async function createNewImage() {
@@ -56,31 +78,76 @@
 			}
 		);
 	}
+
+	async function updateImage() {
+		let success = false;
+		modal.confirmAndHide(
+			async () => {
+				saving = true;
+				const headers = new Headers();
+				headers.set('Content-Type', 'application/json');
+				const response = await fetch(
+					`/api/v2/project/${dataset.project_id}/dataset/${dataset.id}/images`,
+					{
+						method: 'PATCH',
+						headers,
+						body: JSON.stringify({
+							zarr_url,
+							attributes: attributesTypesForm.getAttributes(),
+							types: attributesTypesForm.getTypes()
+						})
+					}
+				);
+				if (!response.ok) {
+					saving = false;
+					throw new AlertError(await response.json());
+				}
+				success = true;
+			},
+			async () => {
+				if (success) {
+					await onImageSave();
+					saving = false;
+				}
+			}
+		);
+	}
 </script>
 
 <Modal
-	id="datasetAddImageModal"
+	id="datasetCreateUpdateImageModal"
 	size="lg"
 	centered={true}
 	scrollable={true}
-	{onOpen}
 	bind:this={modal}
 >
 	<svelte:fragment slot="header">
-		<h5 class="modal-title">Add an image list entry</h5>
+		<h5 class="modal-title">
+			{#if isNew}
+				Add an image list entry
+			{:else}
+				Edit an image list entry
+			{/if}
+		</h5>
 	</svelte:fragment>
 	<svelte:fragment slot="body">
 		<div class="row mb-3">
-			<label class="col-3 col-lg-2 col-form-label" for="new-image-zarr-url"> Zarr URL </label>
+			<label class="col-3 col-lg-2 col-form-label" for="image-zarr-url"> Zarr URL </label>
 			<div class="col col-lg-10">
-				<input type="text" class="form-control" bind:value={zarr_url} id="new-image-zarr-url" />
+				<input
+					type="text"
+					class="form-control"
+					bind:value={zarr_url}
+					disabled={!isNew}
+					id="image-zarr-url"
+				/>
 			</div>
 		</div>
 		<AttributesTypesForm bind:this={attributesTypesForm} filters={false} />
-		<div id="errorAlert-datasetAddImageModal" class="mt-3" />
+		<div id="errorAlert-datasetCreateUpdateImageModal" class="mt-3" />
 	</svelte:fragment>
 	<svelte:fragment slot="footer">
-		<button class="btn btn-primary" on:click={createNewImage} disabled={saving}>
+		<button class="btn btn-primary" on:click={saveImage} disabled={saving}>
 			{#if saving}
 				<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" />
 			{/if}
diff --git a/src/lib/types-v2.d.ts b/src/lib/types-v2.d.ts
index 2e466a87..851be1e0 100644
--- a/src/lib/types-v2.d.ts
+++ b/src/lib/types-v2.d.ts
@@ -27,17 +27,19 @@ export type DatasetHistoryItemV2 = {
   parallelization: object
 }
 
+export type Image = {
+  zarr_url: string
+  attributes: { [key: string]: string | number | boolean }
+  types: { [key: string]: boolean }
+}
+
 export type ImagePage = {
   total_count: number
   page_size: number
   current_page: number
   attributes: { [key: string]: Array<string | number | boolean> }
   types: Array<string>
-  images: Array<{
-    zarr_url: string
-    attributes: { [key: string]: string | number | boolean }
-    types: { [key: string]: boolean }
-  }>
+  images: Array<Image>
 }
 
 export type TaskV2Type = 'non_parallel' | 'parallel' | 'compound'
diff --git a/src/routes/v2/projects/[projectId]/datasets/[datasetId]/+page.svelte b/src/routes/v2/projects/[projectId]/datasets/[datasetId]/+page.svelte
index 42682d65..1d90314c 100644
--- a/src/routes/v2/projects/[projectId]/datasets/[datasetId]/+page.svelte
+++ b/src/routes/v2/projects/[projectId]/datasets/[datasetId]/+page.svelte
@@ -6,7 +6,7 @@
 	import DatasetFiltersModal from '$lib/components/v2/projects/datasets/DatasetFiltersModal.svelte';
 	import DatasetInfoModal from '$lib/components/v2/projects/datasets/DatasetInfoModal.svelte';
 	import DatasetHistoryModal from '$lib/components/v2/projects/datasets/DatasetHistoryModal.svelte';
-	import AddImageModal from '$lib/components/v2/projects/datasets/AddImageModal.svelte';
+	import CreateUpdateImageModal from '$lib/components/v2/projects/datasets/CreateUpdateImageModal.svelte';
 	import BooleanIcon from '$lib/components/common/BooleanIcon.svelte';
 	import SlimSelect from 'slim-select';
 	import { onMount, tick } from 'svelte';
@@ -40,6 +40,9 @@
 	/** @type {{ [key: string]: boolean | null }}} */
 	let lastAppliedTypeFilters = getTypeFilterBaseValues(imagePage);
 
+	/** @type {CreateUpdateImageModal|undefined} */
+	let imageModal = undefined;
+
 	onMount(() => {
 		loadAttributesSelectors();
 		loadTypesSelector();
@@ -372,11 +375,7 @@
 
 {#if !showTable}
 	<p class="fw-bold ms-4 mt-5">No entries in the image list yet</p>
-	<button
-		class="btn btn-outline-secondary ms-4"
-		data-bs-target="#datasetAddImageModal"
-		data-bs-toggle="modal"
-	>
+	<button class="btn btn-outline-secondary ms-4" on:click={() => imageModal?.openForCreate()}>
 		<i class="bi bi-plus-circle" />
 		Add an image list entry
 	</button>
@@ -472,12 +471,20 @@
 						<tr>
 							<td>{getRelativePath(image.zarr_url)}</td>
 							{#each Object.keys(imagePage.attributes) as attribute}
-								<td>{image.attributes[attribute] || ''}</td>
+								<td>
+									{#if image.attributes[attribute] !== null && image.attributes[attribute] !== undefined}
+										{image.attributes[attribute]}
+									{/if}
+								</td>
 							{/each}
 							{#each imagePage.types as typeKey}
 								<td><BooleanIcon value={image.types[typeKey]} /></td>
 							{/each}
 							<td class="col-2">
+								<button class="btn btn-primary" on:click={() => imageModal?.openForEditing(image)}>
+									<i class="bi bi-pencil" />
+									Edit
+								</button>
 								<ConfirmActionButton
 									modalId={'deleteConfirmImageModal-' + getIdFromValue(image.zarr_url)}
 									style={'danger'}
@@ -548,8 +555,7 @@
 				<div class="col-lg-3">
 					<button
 						class="btn btn-outline-secondary float-end"
-						data-bs-target="#datasetAddImageModal"
-						data-bs-toggle="modal"
+						on:click={() => imageModal?.openForCreate()}
 					>
 						<i class="bi bi-plus-circle" />
 						Add an image list entry
@@ -563,7 +569,7 @@
 <DatasetInfoModal {dataset} updateDatasetCallback={(d) => (dataset = d)} />
 <DatasetFiltersModal {dataset} updateDatasetCallback={updateDatasetFiltersCallback} />
 <DatasetHistoryModal {dataset} />
-<AddImageModal {dataset} onImageSave={searchImages} />
+<CreateUpdateImageModal {dataset} onImageSave={searchImages} bind:this={imageModal} />
 
 <style>
 	#dataset-images-table td:last-child,
diff --git a/tests/v2/images.spec.js b/tests/v2/images.spec.js
index 00b76c03..2caa68b4 100644
--- a/tests/v2/images.spec.js
+++ b/tests/v2/images.spec.js
@@ -109,6 +109,26 @@ test('Dataset images [v2]', async ({ page, project }) => {
 		await expect(page.getByRole('row')).toHaveCount(7);
 	});
 
+	await test.step('Edit image', async () => {
+		await page.getByRole('button', { name: 'Edit' }).nth(1).click();
+		const modal = page.locator('.modal.show');
+		await modal.waitFor();
+		const zarrUrlInput = modal.getByRole('textbox', { name: 'Zarr URL' });
+		await expect(zarrUrlInput).toHaveValue('/tmp/img2');
+		await expect(zarrUrlInput).toBeDisabled();
+		await expect(modal.getByPlaceholder('Key')).toHaveValue('k1');
+		await expect(modal.getByPlaceholder('Value')).toHaveValue('v1');
+		await modal.getByPlaceholder('Value').fill('v1-mod');
+		await modal.getByRole('button', { name: 'Add attribute' }).click();
+		await modal.getByPlaceholder('Key').nth(1).fill('k2');
+		await modal.getByPlaceholder('Value').nth(1).fill('9999');
+		await modal.getByRole('combobox').nth(1).selectOption('Number');
+		await modal.getByRole('button', { name: 'Save' }).click();
+		await waitModalClosed(page);
+		await page.getByRole('cell', { name: 'v1-mod' }).waitFor();
+		await page.getByRole('cell', { name: '9999' }).waitFor();
+	});
+
 	await test.step('Delete one image', async () => {
 		await page.getByRole('button', { name: 'Delete' }).first().click();
 		const modal = page.locator('.modal.show');

From bb65e6463c98cada7e1c3ba3e75afa7284abdf5f Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Thu, 18 Apr 2024 12:15:45 +0200
Subject: [PATCH 08/11] Used switches to represent boolean flags

---
 __tests__/v1/JSchema.test.js                  | 12 +++++-
 __tests__/v2/AttributesTypesForm.test.js      | 32 +++++++++++++-
 .../common/jschema/BooleanProperty.svelte     | 42 +++++++++++++------
 .../datasets/AttributesTypesForm.svelte       | 21 ++++++----
 tests/v2/images.spec.js                       |  2 +-
 tests/v2/run_mock_tasks.spec.js               |  2 +-
 tests/v2/workflow_task_input_filters.spec.js  |  7 ++--
 7 files changed, 91 insertions(+), 27 deletions(-)

diff --git a/__tests__/v1/JSchema.test.js b/__tests__/v1/JSchema.test.js
index 0c52f725..b1770663 100644
--- a/__tests__/v1/JSchema.test.js
+++ b/__tests__/v1/JSchema.test.js
@@ -1,8 +1,18 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/svelte';
+import { readable } from 'svelte/store';
 
 import JSchema from '../../src/lib/components/v1/workflow/JSchema.svelte';
 
+// Mocking the page store
+vi.mock('$app/stores', () => {
+	return {
+		page: readable({
+			url: { pathname: '/v1/projects/1/workflows/1' }
+		})
+	};
+});
+
 describe('JSchema', () => {
 	it('Required NumberProperty with title', async () => {
 		const result = renderSchemaWithSingleProperty(
diff --git a/__tests__/v2/AttributesTypesForm.test.js b/__tests__/v2/AttributesTypesForm.test.js
index 3701c9da..75bcf130 100644
--- a/__tests__/v2/AttributesTypesForm.test.js
+++ b/__tests__/v2/AttributesTypesForm.test.js
@@ -76,10 +76,40 @@ describe('AttributesTypesForm', () => {
 		expect(result.getByText('Invalid number')).toBeDefined();
 	});
 
-	it('switch to boolean attribute', async () => {
+	it('switch to number attribute from string containing a numeric value (number is preserved)', async () => {
 		const result = render(AttributesTypesForm);
 		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
 		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
+		await fireEvent.input(result.getByPlaceholderText('Value'), { target: { value: '42' } });
+		await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'number' } });
+		expect(result.getByPlaceholderText('Value').value).eq('42');
+		expect(result.component.validateFields()).true;
+	});
+
+	it('switch to number attribute from string containing text (number is reset)', async () => {
+		const result = render(AttributesTypesForm);
+		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
+		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
+		await fireEvent.input(result.getByPlaceholderText('Value'), { target: { value: 'foo' } });
+		await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'number' } });
+		expect(result.getByPlaceholderText('Value').value).eq('');
+		expect(result.component.validateFields()).false;
+	});
+
+	it('switch to boolean attribute, default to false', async () => {
+		const result = render(AttributesTypesForm);
+		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
+		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
+		await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'boolean' } });
+		expect(result.getByLabelText('Value').value).eq('false');
+		expect(result.component.validateFields()).true;
+	});
+
+	it('switch to boolean attribute from string equals to "true", true is set', async () => {
+		const result = render(AttributesTypesForm);
+		await fireEvent.click(result.getByRole('button', { name: 'Add attribute filter' }));
+		await fireEvent.input(result.getByPlaceholderText('Key'), { target: { value: 'my-key' } });
+		await fireEvent.input(result.getByPlaceholderText('Value'), { target: { value: 'true' } });
 		await fireEvent.change(result.getByLabelText('Type'), { target: { value: 'boolean' } });
 		expect(result.getByLabelText('Value').value).eq('true');
 		expect(result.component.validateFields()).true;
diff --git a/src/lib/components/common/jschema/BooleanProperty.svelte b/src/lib/components/common/jschema/BooleanProperty.svelte
index dc02cf5c..43e1ac3f 100644
--- a/src/lib/components/common/jschema/BooleanProperty.svelte
+++ b/src/lib/components/common/jschema/BooleanProperty.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { getContext } from 'svelte';
 	import PropertyDescription from '$lib/components/common/jschema/PropertyDescription.svelte';
+	import { page } from '$app/stores';
 
 	const schemaManager = getContext('schemaManager');
 
@@ -14,21 +15,36 @@
 
 <div class="d-flex align-items-center p-2">
 	<div class="property-metadata d-flex flex-row align-self-center w-50">
-		<span class={schemaProperty.isRequired() ? 'fw-bold' : ''}>{schemaProperty.title || 'Boolean argument'}</span>
+		<span class={schemaProperty.isRequired() ? 'fw-bold' : ''}>
+			{schemaProperty.title || 'Boolean argument'}
+		</span>
 		<PropertyDescription description={schemaProperty.description} />
 	</div>
 	<div class="property-input ms-auto w-25">
-		<div class="form-check">
-			<input
-				id="property-{schemaProperty.key}"
-				type="checkbox"
-				bind:checked={schemaProperty.value}
-				on:change={handleValueChange}
-				class="form-check-input"
-			/>
-			<label class="form-check-label" for="property-{schemaProperty.key}">
-				{schemaProperty.value}
-			</label>
-		</div>
+		{#if $page.url.pathname.startsWith('/v1')}
+			<div class="form-check">
+				<input
+					id="property-{schemaProperty.key}"
+					type="checkbox"
+					bind:checked={schemaProperty.value}
+					on:change={handleValueChange}
+					class="form-check-input"
+				/>
+				<label class="form-check-label" for="property-{schemaProperty.key}">
+					{schemaProperty.value}
+				</label>
+			</div>
+		{:else}
+			<div class="form-check form-switch">
+				<input
+					id="property-{schemaProperty.key}"
+					class="form-check-input"
+					type="checkbox"
+					bind:checked={schemaProperty.value}
+					on:change={handleValueChange}
+					role="switch"
+				/>
+			</div>
+		{/if}
 	</div>
 </div>
diff --git a/src/lib/components/v2/projects/datasets/AttributesTypesForm.svelte b/src/lib/components/v2/projects/datasets/AttributesTypesForm.svelte
index c9fb5e9f..88fc8cea 100644
--- a/src/lib/components/v2/projects/datasets/AttributesTypesForm.svelte
+++ b/src/lib/components/v2/projects/datasets/AttributesTypesForm.svelte
@@ -168,13 +168,19 @@
 
 	/**
 	 * @param {{ key: string, value: string, type: string, error: string }} field
+	 * @param {number} index
 	 */
-	function fieldTypeChanged(field) {
+	function fieldTypeChanged(field, index) {
 		if (field.type === 'boolean') {
-			field.value = 'true';
+			if (field.value.toLowerCase() === 'true') {
+				field.value = 'true';
+			} else {
+				field.value = 'false';
+			}
 		} else if (field.type !== 'number' || !field.value.match(/^\d+\.*\d*$/)) {
 			field.value = '';
 		}
+		attributeFields = attributeFields.filter((f, i) => (i === index ? field : f));
 	}
 
 	async function addAttribute() {
@@ -249,7 +255,7 @@
 			bind:value={field.type}
 			class:is-invalid={field.error}
 			aria-label="Type"
-			on:change={() => fieldTypeChanged(field)}
+			on:change={() => fieldTypeChanged(field, index)}
 		>
 			<option value="string">String</option>
 			<option value="number">Number</option>
@@ -290,15 +296,16 @@
 					class:is-invalid={field.error}
 				/>
 				<div class="input-group-text">
-					<label>
+					<div class="form-check form-switch">
 						<input
-							class="form-check-input me-1"
+							id="type-{index}"
+							class="form-check-input"
 							type="checkbox"
 							bind:checked={field.value}
+							role="switch"
 							aria-label="Value for {field.key}"
 						/>
-						{field.value}
-					</label>
+					</div>
 				</div>
 				<button
 					class="btn btn-outline-danger"
diff --git a/tests/v2/images.spec.js b/tests/v2/images.spec.js
index 2caa68b4..db9ac4c2 100644
--- a/tests/v2/images.spec.js
+++ b/tests/v2/images.spec.js
@@ -57,7 +57,7 @@ test('Dataset images [v2]', async ({ page, project }) => {
 		await createImage(page, 'img5', async function (modal) {
 			await modal.getByRole('button', { name: 'Add type' }).click();
 			await modal.getByPlaceholder('Key').fill('k3');
-			await modal.getByRole('checkbox').check();
+			await modal.getByRole('switch').check();
 		});
 	});
 
diff --git a/tests/v2/run_mock_tasks.spec.js b/tests/v2/run_mock_tasks.spec.js
index aefc85b7..70b65bed 100644
--- a/tests/v2/run_mock_tasks.spec.js
+++ b/tests/v2/run_mock_tasks.spec.js
@@ -178,7 +178,7 @@ test('Collect and run mock tasks [v2]', async ({ page, workflow, request }) => {
 	});
 
 	await test.step('Fill arguments', async () => {
-		await page.getByRole('checkbox').check();
+		await page.getByRole('switch').check();
 		await page.getByRole('button', { name: 'Save changes' }).click();
 		await page.getByText('Arguments changes saved successfully').waitFor();
 	});
diff --git a/tests/v2/workflow_task_input_filters.spec.js b/tests/v2/workflow_task_input_filters.spec.js
index c1b675b3..3398a25f 100644
--- a/tests/v2/workflow_task_input_filters.spec.js
+++ b/tests/v2/workflow_task_input_filters.spec.js
@@ -38,6 +38,7 @@ test('Workflow task input filters [v2]', async ({ page, workflow }) => {
 		await modal.getByRole('combobox').nth(1).selectOption('Number');
 		await modal.getByRole('button', { name: 'Add attribute' }).click();
 		await modal.getByPlaceholder('Key').nth(2).fill('k3');
+		await modal.getByPlaceholder('Value').nth(2).fill('true');
 		await modal.getByRole('combobox').nth(2).selectOption('Boolean');
 		await modal.getByRole('button', { name: 'Add type' }).click();
 		await modal.getByPlaceholder('Key').nth(3).fill('k4');
@@ -55,7 +56,7 @@ test('Workflow task input filters [v2]', async ({ page, workflow }) => {
 		await modal.getByPlaceholder('Value').fill('value2');
 		await modal.getByRole('button', { name: 'Add type' }).click();
 		await modal.getByPlaceholder('Key').nth(1).fill('k4');
-		await modal.getByRole('checkbox').check();
+		await modal.getByRole('switch').check();
 		saveBtn = modal.getByRole('button', { name: 'Save' });
 		await saveBtn.click();
 		await waitModalClosed(page);
@@ -235,7 +236,7 @@ test('Workflow task input filters [v2]', async ({ page, workflow }) => {
 		await waitModalClosed(page);
 		await expect(page.getByPlaceholder('Key')).toHaveCount(4);
 		await expect(page.getByPlaceholder('Key').nth(3)).toHaveValue('k4');
-		await expect(page.getByRole('checkbox')).toBeChecked();
+		await expect(page.getByRole('switch')).toBeChecked();
 	});
 
 	await test.step('Add already existing type filter from dataset', async () => {
@@ -248,7 +249,7 @@ test('Workflow task input filters [v2]', async ({ page, workflow }) => {
 		await waitModalClosed(page);
 		await expect(page.getByPlaceholder('Key')).toHaveCount(4);
 		await expect(page.getByPlaceholder('Key').nth(3)).toHaveValue('k4');
-		await expect(page.getByRole('checkbox')).not.toBeChecked();
+		await expect(page.getByRole('switch')).not.toBeChecked();
 	});
 
 	await test.step('Cleanup', async () => {

From 69eb04c00199f87edb61441385bdc24611c6f01e Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Thu, 18 Apr 2024 12:20:50 +0200
Subject: [PATCH 09/11] Updated CHANGELOG.md

---
 CHANGELOG.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b062bad6..b9dbb006 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,7 @@
 # Unreleased
 
 * Supported fractal-server API V2:
-    * added menu switch to support legacy and current API (\#434);
+    * added menu switch to support legacy and current API (\#434, \#457);
     * Dataset V2 CRUD with attribute and type filters (\#434);
     * new Dataset page with image list and filters (\#434);
     * updated Single Task form to handle parallel and non parallel fields (\#434);
@@ -13,9 +13,11 @@
     * added admin "Tasks V1/V2 compatibility" page (\#450);
     * supported adding V1 task in V2 workflow (\#450);
     * removed read only property from V2 datasets (\#450);
-    * added input filters tab in workflow task page (\#452);
+    * added input filters tab in workflow task page (\#452, \#457);
     * added searchable dropdowns for image filters (\#452);
     * moved editing of dataset inside dataset page (\#452);
+    * supported editing of single dataset images (\#457);
+    * used switches to represent boolean flags (\#457);
 
 # 0.10.2
 

From 540dbac65ad80a5a33278afda78712ecc313ab1e Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Thu, 18 Apr 2024 12:44:42 +0200
Subject: [PATCH 10/11] Hided advanced options on workflow submission modal

---
 .../workflows/[workflowId]/+page.svelte       | 102 +++++++++++-------
 1 file changed, 64 insertions(+), 38 deletions(-)

diff --git a/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte b/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte
index 6c69aacf..a38845b2 100644
--- a/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte
+++ b/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte
@@ -1197,46 +1197,72 @@
 					{/each}
 				</select>
 			</div>
-			<div class="mb-3">
-				<label for="workerInit" class="form-label">Worker initialization (Optional)</label>
-				<textarea
-					name="workerInit"
-					id="workerInit"
-					class="form-control font-monospace"
-					rows="5"
-					disabled={checkingConfiguration}
-					bind:value={workerInitControl}
-				/>
-			</div>
-			{#if $page.data.userInfo.slurm_accounts.length > 0}
-				<div class="mb-3">
-					<div class="form-check">
-						<input
-							class="form-check-input"
-							type="checkbox"
-							id="setSlurmAccount"
-							bind:checked={setSlurmAccount}
-						/>
-						<label class="form-check-label" for="setSlurmAccount"> Set SLURM account </label>
-					</div>
-				</div>
-				{#if setSlurmAccount}
-					<div class="mb-3">
-						<label for="slurmAccount" class="form-label">SLURM account</label>
-						<select
-							name="slurmAccount"
-							id="slurmAccount"
-							class="form-control"
-							disabled={checkingConfiguration}
-							bind:value={slurmAccount}
+			<div class="accordion" id="accordion-workflow-advanced-options">
+				<div class="accordion-item">
+					<h2 class="accordion-header">
+						<button
+							class="accordion-button collapsed"
+							type="button"
+							data-bs-toggle="collapse"
+							data-bs-target="#collapse-workflow-advanced-options"
+							aria-expanded="false"
+							aria-controls="collapse-workflow-advanced-options"
 						>
-							{#each $page.data.userInfo.slurm_accounts as account}
-								<option>{account}</option>
-							{/each}
-						</select>
+							Advanced Options
+						</button>
+					</h2>
+					<div
+						id="collapse-workflow-advanced-options"
+						class="accordion-collapse collapse"
+						data-bs-parent="#accordion-workflow-advanced-options"
+					>
+						<div class="accordion-body">
+							<div class="mb-3">
+								<label for="workerInit" class="form-label">Worker initialization (Optional)</label>
+								<textarea
+									name="workerInit"
+									id="workerInit"
+									class="form-control font-monospace"
+									rows="5"
+									disabled={checkingConfiguration}
+									bind:value={workerInitControl}
+								/>
+							</div>
+							{#if $page.data.userInfo.slurm_accounts.length > 0}
+								<div class="mb-3">
+									<div class="form-check">
+										<input
+											class="form-check-input"
+											type="checkbox"
+											id="setSlurmAccount"
+											bind:checked={setSlurmAccount}
+										/>
+										<label class="form-check-label" for="setSlurmAccount">
+											Set SLURM account
+										</label>
+									</div>
+								</div>
+								{#if setSlurmAccount}
+									<div class="mb-3">
+										<label for="slurmAccount" class="form-label">SLURM account</label>
+										<select
+											name="slurmAccount"
+											id="slurmAccount"
+											class="form-control"
+											disabled={checkingConfiguration}
+											bind:value={slurmAccount}
+										>
+											{#each $page.data.userInfo.slurm_accounts as account}
+												<option>{account}</option>
+											{/each}
+										</select>
+									</div>
+								{/if}
+							{/if}
+						</div>
 					</div>
-				{/if}
-			{/if}
+				</div>
+			</div>
 		</form>
 	</svelte:fragment>
 	<svelte:fragment slot="footer">

From d138d9233d432275101a4a205b6d647c2e968459 Mon Sep 17 00:00:00 2001
From: Sonia Zorba <sonia.zorba@mailbox.org>
Date: Fri, 19 Apr 2024 10:20:48 +0200
Subject: [PATCH 11/11] Aligned with fractal-server 2.0.0a10

---
 playwright.config.js                                            | 2 +-
 .../v2/projects/[projectId]/workflows/[workflowId]/+page.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/playwright.config.js b/playwright.config.js
index f51a33d1..6b85bae5 100644
--- a/playwright.config.js
+++ b/playwright.config.js
@@ -47,7 +47,7 @@ export default defineConfig({
 
 	webServer: [
 		{
-			command: './tests/start-test-server.sh 2.0.0a8',
+			command: './tests/start-test-server.sh 2.0.0a10',
 			port: 8000,
 			waitForPort: true,
 			stdout: 'pipe',
diff --git a/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte b/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte
index a38845b2..1ab2021a 100644
--- a/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte
+++ b/src/routes/v2/projects/[projectId]/workflows/[workflowId]/+page.svelte
@@ -588,7 +588,7 @@
 		}
 		selectedSubmittedJob = await getSelectedSubmittedJob(selectedDatasetId);
 		const outputStatusResponse = await fetch(
-			`/api/v2/project/${project.id}/dataset/${selectedDatasetId}/status`,
+			`/api/v2/project/${project.id}/status?dataset_id=${selectedDatasetId}&workflow_id=${workflow.id}`,
 			{
 				method: 'GET',
 				credentials: 'include'