Viewer paths page improvements

Author: zonia3000

CHANGELOG.md

@@ -8,6 +8,7 @@
     * Added Manage button to deactivate and reactivate task groups (\#640);
     * Removed usage of DB_ENGINE and SQLITE_PATH variables (\#643);
     * Displayed `timestamp_last_used` property in task-group info modal (\#643);
+    * Viewer paths page improvements (\#643);
 
 # 1.10.1
 

src/routes/viewer-paths/+page.server.js

@@ -1,4 +1,4 @@
-import { getCurrentUserViewerPaths } from '$lib/server/api/auth_api.js';
+import { getCurrentUserSettings, getCurrentUserViewerPaths } from '$lib/server/api/auth_api.js';
 import { getLogger } from '$lib/server/logger.js';
 
 const logger = getLogger('viewer paths page');
@@ -7,8 +7,10 @@ export async function load({ fetch }) {
 	logger.trace('Load viewer paths page');
 
 	const viewerPaths = await getCurrentUserViewerPaths(fetch);
+	const settings = await getCurrentUserSettings(fetch);
 
 	return {
-		viewerPaths
+		viewerPaths,
+		settings
 	};
 }

src/routes/viewer-paths/+page.svelte

@@ -2,13 +2,40 @@
 	import { page } from '$app/stores';
 
 	/** @type {string[]} */
-	let viewerPaths = $page.data.viewerPaths;
+	const viewerPaths = $page.data.viewerPaths;
+	/** @type {import('$lib/types').UserSettings} */
+	const settings = $page.data.settings;
 </script>
 
 <h1 class="fw-light mb-3">Viewer paths</h1>
 
+<p>
+	This Fractal instance includes an online viewer for OME-Zarrs, based on
+	<a href="https://github.com/hms-dbmi/vizarr" target="_blank">vizarr</a>. Browse to a dataset page,
+	and you will find links to view the available images in the browser.
+</p>
+
+<p>
+	Note that access to image data is restricted to OME-Zarrs within certain paths (and their
+	subfolders).
+	{#if settings.project_dir || viewerPaths.length > 0}
+		The list of paths accessible to the current user includes:
+	{:else}
+		The list of paths accessible to the current user is empty.
+	{/if}
+</p>
+
 <ul>
+	{#if settings.project_dir}
+		<li><code>{settings.project_dir}</code></li>
+	{/if}
 	{#each viewerPaths as viewerPath}
 		<li><code>{viewerPath}</code></li>
 	{/each}
 </ul>
+
+<p>
+	Depending on the Fractal configuration, you may also have access to additional paths.<br />
+	Please contact an admin if you see an error message like <code>403 Forbidden</code> when opening the
+	image viewer.
+</p>

tests/v2/viewer_paths.spec.js

@@ -43,6 +43,11 @@ test('Viewer paths', async ({ page }) => {
 		await addUserToGroup(page, randomEmail);
 	});
 
+	await test.step('Add project dir to the group', async () => {
+		await page.getByRole('textbox', { name: 'Project dir' }).fill('/path/to/project_dir');
+		await page.getByRole('button', { name: 'Save' }).nth(1).click();
+	});
+
 	await test.step('Add viewer paths', async () => {
 		const addViewerPathBtn = page.getByRole('button', { name: 'Add viewer path' });
 		await addViewerPathBtn.click();
@@ -79,6 +84,7 @@ test('Viewer paths', async ({ page }) => {
 		await page.getByRole('link', { name: 'Viewer paths' }).click();
 		await waitPageLoading(page);
 		await expect(page.getByText('/path/to/1')).toBeVisible();
+		await expect(page.getByText('/path/to/project_dir')).toBeVisible();
 		await logout(page, randomEmail);
 	});
 });