Implemented editing of a dataset image

Author: zonia3000

src/lib/components/v2/projects/datasets/AddImageModal.svelte renamed to 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}

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'

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,

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');