fix(window level): The window level value is not displayed by default on all the viewports when selecting common/custom layout and TMTV. (#5865)

* fix(window level): Set up listener for viewport availability such that the initial window level can be read and displayed.

* PR feedback.

* PR feedback.

---------

Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>

tests/MeasurementPanel.spec.ts

@@ -117,7 +117,7 @@ test('checks if image would jump when clicked on a measurement item', async ({
   rightPanelPageObject,
   viewportPageObject,
 }) => {
-  const viewportInfoBottomRight = viewportPageObject.active.overlayText.bottomRight;
+  const viewportInfoBottomRight = viewportPageObject.active.overlayText.bottomRight.instanceNumber;
 
   // Image loads on slice 1, confirm on slice 1 then add measurement
   await expect(viewportInfoBottomRight).toContainText('1/', { timeout: 10000 });

tests/SegmentationPanel.spec.ts

@@ -44,7 +44,7 @@ test('checks saved segmentations loads and jumps to slices', async ({
   rightPanelPageObject,
   viewportPageObject,
 }) => {
-  const viewportInfoBottomRight = viewportPageObject.active.overlayText.bottomRight;
+  const viewportInfoBottomRight = viewportPageObject.active.overlayText.bottomRight.instanceNumber;
   // Image loads on slice 1, confirm on slice 1
   await expect(viewportInfoBottomRight).toContainText('1/', { timeout: 10000 });
 

tests/WindowLevelOverlayText.spec.ts

@@ -0,0 +1,40 @@
+import { expect, test, visitStudy } from './utils';
+
+test('should display the window level text as an overlay in various viewport layouts', async ({
+  page,
+  mainToolbarPageObject,
+  viewportPageObject,
+}) => {
+  const studyInstanceUID = '1.3.6.1.4.1.25403.345050719074.3824.20170125095258.1';
+  const mode = 'viewer';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+
+  await expect(viewportPageObject.getNth(0).overlayText.bottomLeft.windowLevel).toBeVisible();
+
+  await mainToolbarPageObject.layoutSelection.click();
+  await page.getByTestId('Layout-3-0').click();
+
+  for (let i = 0; i < 3; i++) {
+    await expect(viewportPageObject.getNth(i).overlayText.bottomLeft.windowLevel).toBeVisible();
+  }
+
+  await mainToolbarPageObject.layoutSelection.click();
+  await page.getByTestId('Layout-1-1').click();
+
+  for (let i = 0; i < 3; i++) {
+    await expect(viewportPageObject.getNth(i).overlayText.bottomLeft.windowLevel).toBeVisible();
+  }
+});
+
+test('should display the window level text as an overlay in the various TMTV viewports', async ({
+  page,
+  viewportPageObject,
+}) => {
+  const studyInstanceUID = '1.3.6.1.4.1.14519.5.2.1.7009.2403.871108593056125491804754960339';
+  const mode = 'tmtv';
+  await visitStudy(page, studyInstanceUID, mode, 2000);
+
+  for (let i = 0; i < 9; i++) {
+    await expect(viewportPageObject.getNth(i).overlayText.bottomLeft.windowLevel).toBeVisible();
+  }
+});

tests/pages/ViewportPageObject.ts

@@ -17,6 +17,23 @@ type NormalizedDragParams = {
   config?: { button?: 'left' | 'right' | 'middle'; delay?: number; steps?: number };
 };
 
+export interface IOverlayText {
+  get windowLevel(): Locator;
+  get instanceNumber(): Locator;
+}
+
+function overlayTextFactory(viewport: Locator, id: string): IOverlayText {
+  const locator = viewport.getByTestId(id);
+  return {
+    get windowLevel() {
+      return locator.getByTitle('Window Level');
+    },
+    get instanceNumber() {
+      return locator.getByTitle('Instance Number');
+    },
+  };
+}
+
 export interface IViewportPageObject {
   nthAnnotation(nth: number): {
     locator: Locator;
@@ -46,10 +63,10 @@ export interface IViewportPageObject {
     bottomMid: Locator;
   };
   overlayText: {
-    topLeft: Locator;
-    topRight: Locator;
-    bottomLeft: Locator;
-    bottomRight: Locator;
+    topLeft: IOverlayText;
+    topRight: IOverlayText;
+    bottomLeft: IOverlayText;
+    bottomRight: IOverlayText;
   };
   overlayMenu: {
     dataOverlay: DataOverlayPageObject;
@@ -122,10 +139,10 @@ export class ViewportPageObject {
 
   private getOverlayText(viewport: Locator) {
     return {
-      topLeft: viewport.getByTestId('viewport-overlay-top-left'),
-      topRight: viewport.getByTestId('viewport-overlay-top-right'),
-      bottomLeft: viewport.getByTestId('viewport-overlay-bottom-left'),
-      bottomRight: viewport.getByTestId('viewport-overlay-bottom-right'),
+      topLeft: overlayTextFactory(viewport, 'viewport-overlay-top-left'),
+      topRight: overlayTextFactory(viewport, 'viewport-overlay-top-right'),
+      bottomLeft: overlayTextFactory(viewport, 'viewport-overlay-bottom-left'),
+      bottomRight: overlayTextFactory(viewport, 'viewport-overlay-bottom-right'),
     };
   }