feat: add config URL parameter to load configs before data

Implements ?config= URL parameter to ensure configuration files
are loaded before data files, eliminating race conditions when
both are specified.

Fixes #817

Author: PaulHax

docs/configuration_file.md

@@ -8,6 +8,14 @@ By loading a JSON file, you can set VolView's configuration:
 - Visibility of Sample Data section
 - Keyboard shortcuts
 
+## Loading Configuration Files
+
+Use the `config` URL parameter to load configuration before data files:
+
+```
+https://volview.kitware.com/?config=https://example.com/config.json&urls=https://example.com/data.nrrd
+```
+
 ## View Layouts
 
 Define one or more named layouts using the `layouts` key. VolView will use the first layout as the default. Each named layout will be in the layout selector menu. Layout are specified in three formats:

src/actions/loadUserFiles.ts

@@ -323,17 +323,25 @@ export async function loadUserPromptedFiles() {
   return loadFiles(files);
 }
 
+function urlsToDataSources(urls: string[], names: string[] = []): DataSource[] {
+  return urls.map((url, idx) => {
+    const defaultName =
+      basename(parseUrl(url, window.location.href).pathname) || url;
+    return uriToDataSource(url, names[idx] || defaultName);
+  });
+}
+
 export async function loadUrls(params: UrlParams) {
-  const urls = wrapInArray(params.urls);
-  const names = wrapInArray(params.names ?? []); // optional names should resolve to [] if params.names === undefined
-  const sources = urls.map((url, idx) =>
-    uriToDataSource(
-      url,
-      names[idx] ||
-        basename(parseUrl(url, window.location.href).pathname) ||
-        url
-    )
-  );
+  if (params.config) {
+    const configUrls = wrapInArray(params.config);
+    const configSources = urlsToDataSources(configUrls);
+    await loadDataSources(configSources);
+  }
 
-  return loadDataSources(sources);
+  if (params.urls) {
+    const urls = wrapInArray(params.urls);
+    const names = wrapInArray(params.names ?? []);
+    const sources = urlsToDataSources(urls, names);
+    await loadDataSources(sources);
+  }
 }

src/components/App.vue

@@ -149,10 +149,6 @@ export default defineComponent({
     const urlParams = vtkURLExtract.extractURLParameters() as UrlParams;
 
     onMounted(() => {
-      if (!urlParams.urls) {
-        return;
-      }
-
       loadUrls(urlParams);
     });
 

tests/specs/configTestUtils.ts

@@ -31,35 +31,18 @@ export type DatasetResource = {
   name?: string;
 };
 
-export const createConfigManifest = async (
+export const openConfigAndDataset = async (
   config: unknown,
   name: string,
   dataset: DatasetResource = ONE_CT_SLICE_DICOM
 ) => {
   const configFileName = `${name}-config.json`;
-  const manifestFileName = `${name}-manifest.json`;
-
   await writeManifestToFile(config, configFileName);
 
-  const manifest = {
-    resources: [{ url: `/tmp/${configFileName}` }, dataset],
-  };
-
-  await writeManifestToFile(manifest, manifestFileName);
-  return manifestFileName;
-};
-
-export const openConfigAndWait = async (
-  config: unknown,
-  name: string,
-  dataset: DatasetResource = ONE_CT_SLICE_DICOM
-) => {
-  const manifestFileNameOnDisk = await createConfigManifest(
-    config,
-    name,
-    dataset
+  await volViewPage.open(
+    `?config=[tmp/${configFileName}]&urls=${dataset.url}&names=${
+      dataset.name ?? ''
+    }`
   );
-
-  await volViewPage.open(`?urls=[tmp/${manifestFileNameOnDisk}]`);
   await volViewPage.waitForViews();
 };

tests/specs/layout-config.e2e.ts

@@ -1,5 +1,5 @@
 import { volViewPage } from '../pageobjects/volview.page';
-import { PROSTATEX_DATASET, openConfigAndWait } from './configTestUtils';
+import { PROSTATEX_DATASET, openConfigAndDataset } from './configTestUtils';
 
 describe('VolView Layout Configuration', () => {
   it('should create a 2x2 grid layout from simple string array', async () => {
@@ -12,7 +12,7 @@ describe('VolView Layout Configuration', () => {
       },
     };
 
-    await openConfigAndWait(config, 'layout-grid');
+    await openConfigAndDataset(config, 'layout-grid');
 
     await volViewPage.waitForViewCounts(3, true);
   });
@@ -33,7 +33,7 @@ describe('VolView Layout Configuration', () => {
       },
     };
 
-    await openConfigAndWait(config, 'layout-nested');
+    await openConfigAndDataset(config, 'layout-nested');
 
     await volViewPage.waitForViewCounts(3, true);
   });
@@ -68,7 +68,7 @@ describe('VolView Layout Configuration', () => {
       },
     };
 
-    await openConfigAndWait(config, 'layout-custom-views');
+    await openConfigAndDataset(config, 'layout-custom-views');
 
     await volViewPage.waitForViewCounts(2, true);
   });
@@ -85,7 +85,7 @@ describe('VolView Layout Configuration', () => {
       },
     };
 
-    await openConfigAndWait(config, 'multiple-layouts', PROSTATEX_DATASET);
+    await openConfigAndDataset(config, 'multiple-layouts', PROSTATEX_DATASET);
 
     await volViewPage.waitForViewCounts(4, false);
 
@@ -129,7 +129,7 @@ describe('VolView Layout Configuration', () => {
       disabledViewTypes: ['3D', 'Oblique'],
     };
 
-    await openConfigAndWait(config, 'disabled-view-types');
+    await openConfigAndDataset(config, 'disabled-view-types');
 
     await volViewPage.waitForViewCounts(4, false);
 

tests/specs/windowing-config.e2e.ts

@@ -1,7 +1,7 @@
 import { volViewPage } from '../pageobjects/volview.page';
 import { openUrls } from './utils';
 import {
-  openConfigAndWait,
+  openConfigAndDataset,
   ONE_CT_SLICE_DICOM,
   MINIMAL_DICOM,
 } from './configTestUtils';
@@ -17,7 +17,7 @@ describe('VolView windowing configuration', () => {
       windowing: runtimeWindowLevel,
     };
 
-    await openConfigAndWait(config, 'windowing');
+    await openConfigAndDataset(config, 'windowing');
 
     const view = await $('div[data-testid="vtk-view vtk-two-view"]');