fix: Remove dead code and fix rectangle roi rehydration (#5490)

* Remove dead code and fix rectangle roi rehydration

* Revert bun.lock

* Remove hardcoded modality

* Add e2e tests

* Update screewnshots

* Adjustments to tests

* disabvle test for now

* Add test again

* Use ohif data soure

* Revert changes

* Test

* Update testdata to include point

* Improve tests

* Update screenshot

---------

Co-authored-by: Andrey Fedorov <andrey.fedorov@gmail.com>
Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>

tests/Scoord3dProbe.spec.ts

@@ -0,0 +1,169 @@
+import { test, expect } from 'playwright-test-coverage';
+import { visitStudy, checkForScreenshot, screenShotPaths } from './utils';
+import { viewportLocator } from './utils/locators';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.3.6.1.4.1.14519.5.2.1.7310.5101.860473186348887719777907797922';
+  const mode = 'viewer';
+  
+  await visitStudy(page, studyInstanceUID, mode, 5000);
+  
+  // Log the actual URL that was loaded
+  const currentUrl = page.url();
+  console.log(`✅ Actual page URL: ${currentUrl}\n`);
+  
+  // Remove any webpack dev server overlays that might be blocking interactions
+  await page.evaluate(() => {
+    const overlay = document.getElementById('webpack-dev-server-client-overlay');
+    if (overlay) {
+      overlay.remove();
+    }
+  });
+});
+
+test('should hydrate SCOORD3D probe measurements correctly', async ({ page }) => {
+  // Wait for the side panel to be visible and clickable
+  await page.waitForTimeout(3000);
+  
+  // Navigate to the tracked measurements panel
+  await page.getByTestId('side-panel-header-right').click({ timeout: 15000 });
+  await page.getByTestId('trackedMeasurements-btn').click();
+  
+  // Double-click on the study browser thumbnail to load the SR
+  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+  await page.waitForTimeout(2000);
+  
+  // Wait for the SR to load and stabilize before taking screenshot
+  await page.waitForTimeout(1000);
+  
+  // Take screenshot before hydration - use viewport locator instead of full page
+  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoord3dProbe.scoord3dProbePreHydration);
+
+  // Zoom in to better see the measurements
+  await page.evaluate(() => {
+    // Access cornerstone directly from the window object
+    const cornerstone = (window as any).cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    const viewport = enabledElements[0].viewport;
+    if (viewport) {
+      viewport.setZoom(4);
+      viewport.render();
+    }
+  });
+  
+  // Wait for rendering to complete
+  await page.waitForTimeout(1000);
+
+  // Wait for the hydrate button to be visible and clickable
+  await page.getByTestId('yes-hydrate-btn').waitFor({ state: 'visible', timeout: 15000 });
+  
+  // Click the hydrate button to load the SCOORD3D probe measurements
+  await page.getByTestId('yes-hydrate-btn').click();
+  
+  // Wait for hydration to complete and rendering to stabilize
+  await page.waitForTimeout(3000);
+  
+  // Take screenshot after hydration showing the probe measurements - use viewport locator
+  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoord3dProbe.scoord3dProbePostHydration);
+  
+  // Verify the measurements list has the correct probe measurements
+  const measurementRows = page.getByTestId('data-row');
+  const rowCount = await measurementRows.count();
+  expect(rowCount).toBeGreaterThan(0);
+  
+  // Verify that the measurements are probe measurements (not other types)
+  for (let i = 0; i < rowCount; i++) {
+    const row = measurementRows.nth(i);
+    const rowText = await row.textContent();
+    // Probe measurements should be present, verify they're not other measurement types
+    expect(rowText).toBeTruthy();
+  }
+
+  // Test jumping to a specific measurement by scrolling and clicking
+  await page.evaluate(() => {
+    // Access cornerstone directly from the window object
+    const cornerstone = (window as any).cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    const viewport = enabledElements[0].viewport;
+    if (viewport) {
+      viewport.scroll(20);
+      viewport.render();
+    }
+  });
+
+  // Click on a data row to jump to the measurement
+  await page.getByTestId('data-row').first().click();
+
+  // Take screenshot showing the jump to measurement functionality - use viewport locator
+  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoord3dProbe.scoord3dProbeJumpToMeasurement);
+});
+
+test('should display SCOORD3D probe measurements correctly', async ({ page }) => {
+  // Wait for the side panel to be visible and clickable
+  await page.waitForTimeout(3000);
+  
+  // First hydrate the SR to load the measurements
+  await page.getByTestId('side-panel-header-right').click({ timeout: 15000 });
+  await page.getByTestId('trackedMeasurements-btn').click();
+  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+  await page.waitForTimeout(2000);
+  
+  // Wait for the hydrate button to be visible and clickable
+  await page.getByTestId('yes-hydrate-btn').waitFor({ state: 'visible', timeout: 15000 });
+  await page.getByTestId('yes-hydrate-btn').click();
+  await page.waitForTimeout(2000);
+
+  // Zoom to show the probe measurements clearly
+  await page.evaluate(() => {
+    const cornerstone = (window as any).cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    const viewport = enabledElements[0].viewport;
+    if (viewport) {
+      viewport.setZoom(3);
+      viewport.render();
+    }
+  });
+  
+  // Wait for rendering to complete before taking screenshot
+  await page.waitForTimeout(2000);
+
+  // Take screenshot showing the SCOORD3D probe measurements rendered correctly - use viewport locator
+  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoord3dProbe.scoord3dProbeDisplayedCorrectly);
+  
+  // Verify the measurements list has the correct probe measurements and not others
+  const measurementRows = page.getByTestId('data-row');
+  const rowCount = await measurementRows.count();
+  expect(rowCount).toBeGreaterThan(0);
+  
+  // Verify that the measurements are probe measurements (not other types like rectangle)
+  for (let i = 0; i < rowCount; i++) {
+    const row = measurementRows.nth(i);
+    const rowText = await row.textContent();
+    // Probe measurements should be present, verify they're not other measurement types
+    expect(rowText).toBeTruthy();
+  }
+});

tests/ScoordRectangle.spec.ts

@@ -0,0 +1,170 @@
+import { test, expect } from 'playwright-test-coverage';
+import { visitStudy, checkForScreenshot, screenShotPaths } from './utils';
+import { viewportLocator } from './utils/locators';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.2.840.113654.2.55.242841386983064378162007136685545369722';
+  const mode = 'viewer';
+  
+  await visitStudy(page, studyInstanceUID, mode, 5000);
+  
+  // Log the actual URL that was loaded
+  const currentUrl = page.url();
+  console.log(`✅ Actual page URL: ${currentUrl}\n`);
+  
+  // Remove any webpack dev server overlays that might be blocking interactions
+  await page.evaluate(() => {
+    const overlay = document.getElementById('webpack-dev-server-client-overlay');
+    if (overlay) {
+      overlay.remove();
+    }
+  });
+});
+
+//
+test('should hydrate SCOORD rectangle measurements correctly', async ({ page }) => {
+  // Wait for the side panel to be visible and clickable
+  await page.waitForTimeout(3000);
+  
+  // Navigate to the tracked measurements panel
+  await page.getByTestId('side-panel-header-right').click({ timeout: 15000 });
+  await page.getByTestId('trackedMeasurements-btn').click();
+  
+  // Double-click on the study browser thumbnail to load the SR
+  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+  await page.waitForTimeout(2000);
+  
+  // Wait for the SR to load and stabilize before taking screenshot
+  await page.waitForTimeout(1000);
+  
+  // Take screenshot before hydration - use viewport locator instead of full page
+  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoordRectangle.scoordRectanglePreHydration);
+
+  // Zoom in to better see the measurements
+  await page.evaluate(() => {
+    // Access cornerstone directly from the window object
+    const cornerstone = (window as any).cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    const viewport = enabledElements[0].viewport;
+    if (viewport) {
+      viewport.setZoom(4);
+      viewport.render();
+    }
+  });
+  
+  // Wait for rendering to complete
+  await page.waitForTimeout(1000);
+
+  // Wait for the hydrate button to be visible and clickable
+  await page.getByTestId('yes-hydrate-btn').waitFor({ state: 'visible', timeout: 15000 });
+  
+  // Click the hydrate button to load the SCOORD rectangle measurements
+  await page.getByTestId('yes-hydrate-btn').click();
+  
+  // Wait for hydration to complete and rendering to stabilize
+  await page.waitForTimeout(3000);
+  
+  // Take screenshot after hydration showing the rectangle measurements - use viewport locator
+  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoordRectangle.scoordRectanglePostHydration);
+  
+  // Verify the measurements list has the correct rectangle measurements
+  const measurementRows = page.getByTestId('data-row');
+  const rowCount = await measurementRows.count();
+  expect(rowCount).toBeGreaterThan(0);
+  
+  // Verify that the measurements are rectangle measurements (not other types)
+  for (let i = 0; i < rowCount; i++) {
+    const row = measurementRows.nth(i);
+    const rowText = await row.textContent();
+    // Rectangle measurements should be present, verify they're not other measurement types
+    expect(rowText).toBeTruthy();
+  }
+
+  // Test jumping to a specific measurement by scrolling and clicking
+  await page.evaluate(() => {
+    // Access cornerstone directly from the window object
+    const cornerstone = (window as any).cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    const viewport = enabledElements[0].viewport;
+    if (viewport) {
+      viewport.scroll(20);
+      viewport.render();
+    }
+  });
+
+  // Click on a data row to jump to the measurement
+  await page.getByTestId('data-row').first().click();
+
+  // Take screenshot showing the jump to measurement functionality - use viewport locator
+  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoordRectangle.scoordRectangleJumpToMeasurement);
+});
+
+test('should display SCOORD rectangle measurements correctly', async ({ page }) => {
+  // Wait for the side panel to be visible and clickable
+  await page.waitForTimeout(3000);
+  
+  // First hydrate the SR to load the measurements
+  await page.getByTestId('side-panel-header-right').click({ timeout: 15000 });
+  await page.getByTestId('trackedMeasurements-btn').click();
+  await page.getByTestId('study-browser-thumbnail-no-image').dblclick();
+  await page.waitForTimeout(2000);
+  
+  // Wait for the hydrate button to be visible and clickable
+  await page.getByTestId('yes-hydrate-btn').waitFor({ state: 'visible', timeout: 15000 });
+  await page.getByTestId('yes-hydrate-btn').click();
+  await page.waitForTimeout(2000);
+
+  // Zoom to show the rectangle measurements clearly
+  await page.evaluate(() => {
+    const cornerstone = (window as any).cornerstone;
+    if (!cornerstone) {
+      return;
+    }
+
+    const enabledElements = cornerstone.getEnabledElements();
+    if (enabledElements.length === 0) {
+      return;
+    }
+
+    const viewport = enabledElements[0].viewport;
+    if (viewport) {
+      viewport.setZoom(3);
+      viewport.render();
+    }
+  });
+  
+  // Wait for rendering to complete before taking screenshot
+  await page.waitForTimeout(2000);
+
+  // Take screenshot showing the SCOORD rectangle measurements rendered correctly - use viewport locator
+  await checkForScreenshot(page, viewportLocator({ page, viewportId: 'default' }), screenShotPaths.scoordRectangle.scoordRectangleDisplayedCorrectly);
+  
+  // Verify the measurements list has the correct rectangle measurements and not others
+  const measurementRows = page.getByTestId('data-row');
+  const rowCount = await measurementRows.count();
+  expect(rowCount).toBeGreaterThan(0);
+  
+  // Verify that the measurements are rectangle measurements (not other types like probe)
+  for (let i = 0; i < rowCount; i++) {
+    const row = measurementRows.nth(i);
+    const rowText = await row.textContent();
+    // Rectangle measurements should be present, verify they're not other measurement types
+    expect(rowText).toBeTruthy();
+  }
+});

tests/Worklist.spec.ts

@@ -22,8 +22,18 @@ test('should render scroll bars with the correct look-and-feel', async ({ page }
     'studyRow-1.3.6.1.4.1.14519.5.2.1.5099.8010.217836670708542506360829799868'
   );
 
+  // Wait for the expanded row to be visible and rendered
+  await expandedStudyRow.waitFor({ state: 'visible', timeout: 10000 });
   await expandedStudyRow.scrollIntoViewIfNeeded();
-  await page.waitForTimeout(3000);
+  
+  // Wait for content to load and stabilize, including any lazy-loaded items
+  await page.waitForTimeout(2000);
+  
+  // Wait for network to be idle to ensure all content is loaded
+  await page.waitForLoadState('networkidle');
+  
+  // Additional wait to ensure scrollbar rendering is stable
+  await page.waitForTimeout(1000);
 
   await checkForScreenshot({
     page,

tests/utils/screenShotPaths.ts

@@ -66,6 +66,18 @@ const screenShotPaths = {
   rectangle: {
     rectangleDisplayedCorrectly: 'rectangleDisplayedCorrectly.png',
   },
+  scoord3dProbe: {
+    scoord3dProbeDisplayedCorrectly: 'scoord3dProbeDisplayedCorrectly.png',
+    scoord3dProbePreHydration: 'scoord3dProbePreHydration.png',
+    scoord3dProbePostHydration: 'scoord3dProbePostHydration.png',
+    scoord3dProbeJumpToMeasurement: 'scoord3dProbeJumpToMeasurement.png',
+  },
+  scoordRectangle: {
+    scoordRectangleDisplayedCorrectly: 'scoordRectangleDisplayedCorrectly.png',
+    scoordRectanglePreHydration: 'scoordRectanglePreHydration.png',
+    scoordRectanglePostHydration: 'scoordRectanglePostHydration.png',
+    scoordRectangleJumpToMeasurement: 'scoordRectangleJumpToMeasurement.png',
+  },
   spline: {
     splineDisplayedCorrectly: 'splineDisplayedCorrectly.png',
   },