feat: Add grid layout configuration support

- Replace old layout constants with flexible gridSize configuration
- Add e2e test for single view (1x1) layout configuration
- Update documentation to reflect new gridSize format

Author: PaulHax

docs/configuration_file.md

@@ -2,19 +2,19 @@
 
 By loading a JSON file, you can set VolView's configuration:
 
-- Starting view layout (Axial Only, 3D Primary, etc).
+- Starting view layout grid size
 - Labels for tools
 - Visibility of Sample Data section
 - Keyboard shortcuts
 
 ## Starting view layout
 
-The `activeLayout` key has options (Axial Only, 3D Primary, etc.) defined in `config.ts`
+The `gridSize` key sets the initial layout grid as `[width, height]`. For example, `[2, 2]` creates a 2x2 grid of views.
 
 ```json
 {
   "layout": {
-    "activeLayout": "Axial Only"
+    "gridSize": [2, 2]
   }
 }
 ```
@@ -110,7 +110,7 @@ Simplify the data browser by hiding the Sample Data expandable section.
     }
   },
   "layout": {
-    "activeLayout": "Axial Only"
+    "gridSize": [1, 1]
   }
 }
 ```
@@ -143,7 +143,7 @@ Simplify the data browser by hiding the Sample Data expandable section.
     }
   },
   "layout": {
-    "activeLayout": "Axial Only"
+    "gridSize": [2, 2]
   },
   "dataBrowser": {
     "hideSampleData": false

src/io/import/configJson.ts

@@ -1,14 +1,13 @@
 import { z } from 'zod';
 import { zodEnumFromObjKeys } from '@/src/utils';
 import { ACTIONS } from '@/src/constants';
-// import { Layouts } from '@/src/config';
 
 // for applyConfig
 import { useRectangleStore } from '@/src/store/tools/rectangles';
 import { useRulerStore } from '@/src/store/tools/rulers';
 import { useDataBrowserStore } from '@/src/store/data-browser';
 import { usePolygonStore } from '@/src/store/tools/polygons';
-// import { useViewStore } from '@/src/store/views';
+import { useViewStore } from '@/src/store/views';
 import { useWindowingStore } from '@/src/store/view-configs/windowing';
 import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
 import { useSegmentGroupStore } from '@/src/store/segmentGroups';
@@ -20,7 +19,7 @@ import useLoadDataStore from '@/src/store/load-data';
 
 const layout = z
   .object({
-    // activeLayout: zodEnumFromObjKeys(Layouts).optional(),
+    gridSize: z.tuple([z.number(), z.number()]).optional(),
   })
   .optional();
 
@@ -128,12 +127,11 @@ const applySampleData = (manifest: Config) => {
   useDataBrowserStore().hideSampleData = !!manifest.dataBrowser?.hideSampleData;
 };
 
-// const applyLayout = (manifest: Config) => {
-//   if (manifest.layout?.activeLayout) {
-//     const startingLayout = Layouts[manifest.layout.activeLayout];
-//     useViewStore().setLayout(startingLayout);
-//   }
-// };
+const applyLayout = (manifest: Config) => {
+  if (manifest.layout?.gridSize) {
+    useViewStore().setLayoutFromGrid(manifest.layout.gridSize);
+  }
+};
 
 const applyShortcuts = (manifest: Config) => {
   if (!manifest.shortcuts) return;
@@ -159,7 +157,7 @@ const applyWindowing = (manifest: Config) => {
 };
 
 export const applyConfig = (manifest: Config) => {
-  // applyLayout(manifest);
+  applyLayout(manifest);
   applyLabels(manifest);
   applySampleData(manifest);
   applyShortcuts(manifest);

tests/fixtures/config-layout-1x1.json

@@ -0,0 +1,8 @@
+{
+  "layout": {
+    "gridSize": [1, 1]
+  },
+  "dataBrowser": {
+    "hideSampleData": false
+  }
+}

tests/pageobjects/volview.page.ts

@@ -50,51 +50,41 @@ class VolViewPage extends Page {
     await browser.waitUntil(
       async () => {
         try {
-          // Query views fresh each time to avoid stale references
-          const views = await this.views;
-          const viewCount = await views.length;
+          // Query views once per iteration to avoid multiple queries that could become stale
+          const currentViews = await this.views;
+          const viewCount = await currentViews.length;
 
           if (viewCount === 0) {
             return false;
           }
 
-          // Check if at least one view has real dimensions
-          const freshViews = await this.views;
-          const freshCount = await freshViews.length;
-
-          const viewChecks = Array.from({ length: viewCount }, (_, i) => i);
-
-          const results = await Promise.all(
-            viewChecks.map(async (i) => {
-              if (i >= freshCount) {
-                return false;
+          // Check each view's dimensions in a single pass
+          const viewPromises = currentViews.map(async (view) => {
+            try {
+              // Get attributes directly from the element reference
+              const width = await view.getAttribute('width');
+              const height = await view.getAttribute('height');
+
+              if (width && height) {
+                const w = parseInt(width, 10);
+                const h = parseInt(height, 10);
+                // Canvas should have real dimensions, not be a 1x1 placeholder
+                // Accept any size > 10 as a real view
+                return w > 10 && h > 10;
               }
+              return false;
+            } catch (err) {
+              // Element may have been removed/recreated - that's ok, we'll retry
+              return false;
+            }
+          });
 
-              try {
-                const view = freshViews[i];
-                const [width, height] = await Promise.all([
-                  view.getAttribute('width').catch(() => null),
-                  view.getAttribute('height').catch(() => null),
-                ]);
-
-                if (width && height) {
-                  const w = parseInt(width, 10);
-                  const h = parseInt(height, 10);
-                  // Canvas should have real dimensions, not be a 1x1 placeholder
-                  // Accept any size > 10 as a real view
-                  return w > 10 && h > 10;
-                }
-                return false;
-              } catch (err) {
-                // Handle stale element errors
-                return false;
-              }
-            })
-          );
+          const results = await Promise.all(await viewPromises);
 
+          // At least one view must have real dimensions
           return results.some((result) => result);
         } catch (error) {
-          // Log but don't throw - let it retry
+          // DOM may be updating, retry on next iteration
           return false;
         }
       },

tests/specs/layout-config.e2e.ts

@@ -0,0 +1,54 @@
+import * as path from 'path';
+import * as fs from 'fs';
+import { volViewPage } from '../pageobjects/volview.page';
+import { FIXTURES, DOWNLOAD_TIMEOUT } from '../../wdio.shared.conf';
+import { writeManifestToFile } from './utils';
+
+describe('VolView Layout Configuration', () => {
+  it('should load single view layout from config', async () => {
+    const configPath = path.join(FIXTURES, 'config-layout-1x1.json');
+    const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+    const configFileName = 'config-layout-1x1.json';
+    await writeManifestToFile(config, configFileName);
+
+    await volViewPage.open(`?urls=[tmp/${configFileName}]`);
+
+    await browser.pause(2000);
+
+    await volViewPage.downloadProstateSample();
+
+    await volViewPage.waitForViews();
+
+    await browser.waitUntil(
+      async () => {
+        const currentViews = await volViewPage.views;
+        const viewCount = await currentViews.length;
+
+        if (viewCount !== 1) {
+          return false;
+        }
+
+        const view = currentViews[0];
+        const width = await view.getAttribute('width');
+        const height = await view.getAttribute('height');
+
+        if (!width || !height) {
+          return false;
+        }
+
+        const w = parseInt(width, 10);
+        const h = parseInt(height, 10);
+
+        return w > 200 && h > 200;
+      },
+      {
+        timeout: DOWNLOAD_TIMEOUT,
+        timeoutMsg: 'Expected exactly 1 view with rendered content',
+        interval: 1000,
+      }
+    );
+
+    const views = await volViewPage.views;
+    await expect(views).toHaveLength(1);
+  });
+});