fix(segmentation): List surface representations in the segmentation table for 3D views. (#5700)

This was done by using an array of representation types instead of a single type for a panel.
The first element of the array is the primary type of the panel, and the rest are secondary types
that can also be displayed in the panel.

PR feedback:
- added test to check number of segments in side panel for 3D only view
- fixed jumping to segment in 3D only view
- fixed exception when adding contour segment in 3D only view

tests/RTHydration.spec.ts

@@ -21,9 +21,7 @@ test('should hydrate RT reports correctly', async ({
   await page.waitForTimeout(5000);
   await checkForScreenshot(page, page, screenShotPaths.rtHydration.rtPostHydration);
 
-  await rightPanelPageObject.labelMapSegmentationPanel.panel
-    .segmentationByText('Small Sphere')
-    .click();
+  await rightPanelPageObject.labelMapSegmentationPanel.panel.segmentByText('Small Sphere').click();
   await page.waitForTimeout(5000);
   await checkForScreenshot(page, page, screenShotPaths.rtHydration.rtJumpToStructure);
 });

tests/SEGHydrationThen3DOnly.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test, visitStudy } from './utils';
+
+test.beforeEach(
+  async ({
+    page,
+    rightPanelPageObject,
+    leftPanelPageObject,
+    DOMOverlayPageObject,
+    mainToolbarPageObject,
+  }) => {
+    const studyInstanceUID = '1.3.6.1.4.1.14519.5.2.1.256467663913010332776401703474716742458';
+    const mode = 'viewer';
+    await visitStudy(page, studyInstanceUID, mode, 2000);
+    await rightPanelPageObject.toggle();
+    await leftPanelPageObject.loadSeriesByDescription('SEG');
+
+    await DOMOverlayPageObject.viewport.segmentationHydration.yes.click();
+    await page.waitForTimeout(5000);
+
+    await mainToolbarPageObject.layoutSelection.threeDOnly.click();
+    await page.waitForTimeout(5000);
+  }
+);
+
+test('should list segments in side panel for 3D only view', async ({ rightPanelPageObject }) => {
+  const numberOfSegments =
+    await rightPanelPageObject.labelMapSegmentationPanel.panel.getSegmentCount();
+  expect(numberOfSegments, 'The side panel should list 13 segments for the 3D only view.').toBe(13);
+});

tests/SegmentationPanel.spec.ts

@@ -19,8 +19,8 @@ test('checks basic add, rename, delete segments from panel', async ({ rightPanel
   await rightPanelPageObject.labelMapSegmentationPanel.addSegmentationButton.click();
 
   // Expect new segmentation and blank segment named "Segment 1"
-  const segment1 = rightPanelPageObject.labelMapSegmentationPanel.panel.nthSegmentation(0);
-  expect(await rightPanelPageObject.labelMapSegmentationPanel.panel.getSegmentationCount()).toBe(1);
+  const segment1 = rightPanelPageObject.labelMapSegmentationPanel.panel.nthSegment(0);
+  expect(await rightPanelPageObject.labelMapSegmentationPanel.panel.getSegmentCount()).toBe(1);
   await expect(segment1.locator).toContainText('Segment 1');
 
   // Rename
@@ -32,7 +32,7 @@ test('checks basic add, rename, delete segments from panel', async ({ rightPanel
   // Delete
   await segment1.actions.delete();
 
-  expect(await rightPanelPageObject.labelMapSegmentationPanel.panel.getSegmentationCount()).toBe(0);
+  expect(await rightPanelPageObject.labelMapSegmentationPanel.panel.getSegmentCount()).toBe(0);
 });
 
 test('checks saved segmentations loads and jumps to slices', async ({
@@ -62,19 +62,17 @@ test('checks saved segmentations loads and jumps to slices', async ({
   // Confirm spleen jumps to slice 17
   // First iteration repeat to account for segmentation loading delays
   await expect(async () => {
-    await rightPanelPageObject.labelMapSegmentationPanel.panel.segmentationByText('Spleen').click();
+    await rightPanelPageObject.labelMapSegmentationPanel.panel.segmentByText('Spleen').click();
     await expect(viewportInfoBottomRight).toContainText('17/');
   }).toPass({
     timeout: 10000,
   });
 
   // Esophagus - 5
-  await rightPanelPageObject.labelMapSegmentationPanel.panel
-    .segmentationByText('Esophagus')
-    .click();
+  await rightPanelPageObject.labelMapSegmentationPanel.panel.segmentByText('Esophagus').click();
   await expect(viewportInfoBottomRight).toContainText('5/');
 
   // Pancreas - 22
-  await rightPanelPageObject.labelMapSegmentationPanel.panel.segmentationByText('Pancreas').click();
+  await rightPanelPageObject.labelMapSegmentationPanel.panel.segmentByText('Pancreas').click();
   await expect(viewportInfoBottomRight).toContainText('22/');
 });

tests/pages/RightPanelPageObject.ts

@@ -111,20 +111,20 @@ export class RightPanelPageObject {
 
   private get segmentationPanel() {
     const page = this.page;
-    const getSegmentationByIdx = (index: number) => this.getPanelRowByIdx(index);
-    const getSegmentationByText = (text: string) => this.getPanelRowByText(text);
+    const getSegmentByIdx = (index: number) => this.getPanelRowByIdx(index);
+    const getSegmentByText = (text: string) => this.getPanelRowByText(text);
 
     return {
-      getSegmentationCount: async () => {
+      getSegmentCount: async () => {
         return await page.getByTestId('data-row').count();
       },
       // No data-cy exists in this panel, using Segmentation header button
       locator: page.getByRole('button', { name: 'Segmentations' }),
-      nthSegmentation(index: number) {
-        return getSegmentationByIdx(index);
+      nthSegment(index: number) {
+        return getSegmentByIdx(index);
       },
-      segmentationByText(text: string) {
-        return getSegmentationByText(text);
+      segmentByText(text: string) {
+        return getSegmentByText(text);
       },
     };
   }