feat(slice scrollbar): Integrate ViewportSliceProgressScrollbar with customizations and docs (#5960)

Co-authored-by: Dan Rukas <dan.rukas@gmail.com>

tests/ContourSegLocking.spec.ts

@@ -1,4 +1,4 @@
-import { expect, test, visitStudy } from './utils';
+import { addOHIFGlobalCustomizations, expect, test, visitStudy } from './utils';
 import { simulateNormalizedDragOnElement } from './utils/simulateDragOnElement';
 
 const studyInstanceUID = '1.2.840.113619.2.290.3.3767434740.226.1600859119.501';
@@ -63,13 +63,8 @@ test('should not allow contours to be edited when panelSegmentation.disableEditi
   await page.waitForTimeout(5000);
 
   // disable editing of segmentations via the customization service
-  await page.evaluate(() => {
-    window.services.customizationService.setGlobalCustomization(
-      'panelSegmentation.disableEditing',
-      {
-        $set: true,
-      }
-    );
+  await addOHIFGlobalCustomizations(page, {
+    'panelSegmentation.disableEditing': true,
   });
 
   await DOMOverlayPageObject.viewport.segmentationHydration.yes.click();
@@ -117,13 +112,8 @@ test('should allow contours to be edited when panelSegmentation.disableEditing i
   await page.waitForTimeout(5000);
 
   // disable editing of segmentations via the customization service
-  await page.evaluate(() => {
-    window.services.customizationService.setGlobalCustomization(
-      'panelSegmentation.disableEditing',
-      {
-        $set: false,
-      }
-    );
+  await addOHIFGlobalCustomizations(page, {
+    'panelSegmentation.disableEditing': false,
   });
 
   await DOMOverlayPageObject.viewport.segmentationHydration.yes.click();

tests/LabelMapSegLocking.spec.ts

@@ -1,4 +1,10 @@
-import { checkForScreenshot, screenShotPaths, test, visitStudy } from './utils';
+import {
+  addOHIFGlobalCustomizations,
+  checkForScreenshot,
+  screenShotPaths,
+  test,
+  visitStudy,
+} from './utils';
 import { press } from './utils/keyboardUtils';
 
 test.beforeEach(async ({ page }) => {
@@ -15,13 +21,8 @@ test('should prevent editing of label map segmentations when panelSegmentation.d
   viewportPageObject,
 }) => {
   // disable editing of segmentations via the customization service
-  await page.evaluate(() => {
-    window.services.customizationService.setGlobalCustomization(
-      'panelSegmentation.disableEditing',
-      {
-        $set: true,
-      }
-    );
+  await addOHIFGlobalCustomizations(page, {
+    'panelSegmentation.disableEditing': true,
   });
   await rightPanelPageObject.labelMapSegmentationPanel.select();
 
@@ -71,13 +72,8 @@ test('should allow editing of label map segmentations when panelSegmentation.dis
   viewportPageObject,
 }) => {
   // disable editing of segmentations via the customization service
-  await page.evaluate(() => {
-    window.services.customizationService.setGlobalCustomization(
-      'panelSegmentation.disableEditing',
-      {
-        $set: false,
-      }
-    );
+  await addOHIFGlobalCustomizations(page, {
+    'panelSegmentation.disableEditing': false,
   });
 
   await rightPanelPageObject.labelMapSegmentationPanel.select();

tests/TMTVRendering.spec.ts

@@ -1,5 +1,4 @@
-import { test } from 'playwright-test-coverage';
-import { visitStudy, checkForScreenshot, screenShotPaths } from './utils/index.js';
+import { test, visitStudy, checkForScreenshot, screenShotPaths } from './utils';
 
 test.skip('should render TMTV correctly.', async ({ page }) => {
   const studyInstanceUID = '1.2.840.113619.2.290.3.3767434740.226.1600859119.501';

tests/Worklist.spec.ts

@@ -1,5 +1,4 @@
-import { test } from 'playwright-test-coverage';
-import { checkForScreenshot, screenShotPaths } from './utils';
+import { test, checkForScreenshot, screenShotPaths } from './utils';
 
 test.beforeEach(async ({ page }) => {
   await page.goto(`/?datasources=ohif`);

tests/mpr2.spec.ts

@@ -7,11 +7,19 @@ test.beforeEach(async ({ page }) => {
   await visitStudy(page, studyInstanceUID, mode, 10000);
 });
 
-test('should properly display MPR for MR', async ({ page, mainToolbarPageObject }) => {
+test('should properly display MPR for MR', async ({
+  page,
+  mainToolbarPageObject,
+  viewportPageObject,
+}) => {
   await mainToolbarPageObject.waitForVolumeLoad();
   await page.getByTestId('side-panel-header-right').click();
   // await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
-  await checkForScreenshot(page, page, screenShotPaths.mpr2.mprDisplayedCorrectly);
+  await checkForScreenshot({
+    page,
+    locator: viewportPageObject.grid,
+    screenshotPath: screenShotPaths.mpr2.mprDisplayedCorrectly,
+  });
 
   await page.evaluate(() => {
     // Access cornerstone directly from the window object
@@ -35,5 +43,9 @@ test('should properly display MPR for MR', async ({ page, mainToolbarPageObject
     }
   });
 
-  await checkForScreenshot(page, page, screenShotPaths.mpr2.mprDisplayedCorrectlyZoomed);
+  await checkForScreenshot({
+    page,
+    locator: viewportPageObject.grid,
+    screenshotPath: screenShotPaths.mpr2.mprDisplayedCorrectlyZoomed,
+  });
 });

tests/utils/OHIFConfiguration.ts

@@ -1,6 +1,31 @@
-import { Page } from 'playwright-test-coverage';
+import type { Page } from '@playwright/test';
+
+// Global per-test configuration skeleton.
+// Keep this empty by default and add top-level window.config overrides here when needed.
+export const DEFAULT_E2E_OHIF_CONFIGURATION: Record<string, unknown> = {};
+
+// Global per-test customization baseline.
+export const DEFAULT_E2E_OHIF_CUSTOMIZATIONS: Record<string, unknown> = {
+  'viewportScrollbar.showViewedFill': false,
+  'viewportScrollbar.showLoadingPattern': false,
+  'viewportScrollbar.showLoadedFill': false,
+  'viewportScrollbar.showLoadedEndpoints': false,
+};
 
 export async function addOHIFConfiguration(page: Page, configToAdd: Record<string, unknown>) {
+  const customizationSetters = Object.fromEntries(
+    Object.entries(DEFAULT_E2E_OHIF_CUSTOMIZATIONS || {}).map(([key, value]) => [
+      key,
+      { $set: value },
+    ])
+  );
+
+  const baselinePlusConfigToAdd = {
+    ...DEFAULT_E2E_OHIF_CONFIGURATION,
+    customizationService: [customizationSetters],
+    ...configToAdd,
+  };
+
   await page.addInitScript(config => {
     let _config;
     Object.defineProperty(window, 'config', {
@@ -15,5 +40,21 @@ export async function addOHIFConfiguration(page: Page, configToAdd: Record<strin
       },
       configurable: true,
     });
-  }, configToAdd);
+  }, baselinePlusConfigToAdd);
+}
+
+export async function addOHIFGlobalCustomizations(
+  page: Page,
+  customizationsToAdd: Record<string, unknown>
+) {
+  await page.evaluate(customizations => {
+    const customizationService = (window as any).services?.customizationService;
+    if (!customizationService?.setGlobalCustomization) {
+      return;
+    }
+
+    Object.entries(customizations || {}).forEach(([key, value]) => {
+      customizationService.setGlobalCustomization(key, value);
+    });
+  }, customizationsToAdd);
 }

tests/utils/fixture.ts

@@ -1,4 +1,5 @@
 import { test as base } from 'playwright-test-coverage';
+import { addOHIFConfiguration } from './OHIFConfiguration';
 import {
   DOMOverlayPageObject,
   MainToolbarPageObject,
@@ -17,7 +18,18 @@ type PageObjects = {
   notFoundStudyPageObject: NotFoundStudyPageObject;
 };
 
-export const test = base.extend<PageObjects>({
+type TestFixtures = PageObjects & {
+  _applyGlobalE2EOHIFBaseline: void;
+};
+
+export const test = base.extend<TestFixtures>({
+  _applyGlobalE2EOHIFBaseline: [
+    async ({ page }, use) => {
+      await addOHIFConfiguration(page, {});
+      await use();
+    },
+    { auto: true },
+  ],
   DOMOverlayPageObject: async ({ page }, use) => {
     await use(new DOMOverlayPageObject(page));
   },

tests/utils/index.ts

@@ -1,5 +1,8 @@
 import { visitStudy } from './visitStudy';
-import { addOHIFConfiguration } from './OHIFConfiguration';
+import {
+  addOHIFConfiguration,
+  addOHIFGlobalCustomizations,
+} from './OHIFConfiguration';
 import { checkForScreenshot } from './checkForScreenshot';
 import { screenShotPaths } from './screenShotPaths';
 import {
@@ -25,6 +28,7 @@ import { subscribeToMeasurementAdded } from './subscribeToMeasurement';
 export {
   visitStudy,
   addOHIFConfiguration,
+  addOHIFGlobalCustomizations,
   checkForScreenshot,
   screenShotPaths,
   simulateClicksOnElement,