Feat/contour and label color change coverage

[diattamo]

Context

Add coverage for changing the color of contours and labelmaps

Changes & Results

• tests/utils/screenShotPaths.ts — registered new
  labelMapSegmentationColorChange baseline keys.
• tests/ContourSegmentColorChange.spec.ts — four tests covering:
  opening the dialog with the current hex prefilled, saving a new
  color, cancelling the dialog, and verifying a duplicated contour
  segment is created with a different stroke color. Verification uses
  getSvgAttribute(... 'stroke') for the canvas-side check.
• tests/LabelMapSegmentationColorChange.spec.ts — three tests
  covering: opening the dialog with the current hex prefilled, saving
  a new color, and cancelling the dialog. Verification uses
  checkForScreenshot scoped to the default viewport for the
  canvas-side check; four baseline screenshots are added under
  tests/screenshots/chromium/LabelMapSegmentationColorChange.spec.ts/.

Testing

1. From the repo root, run both new specs:

   yarn playwright test tests/ContourSegmentColorChange.spec.ts 
   yarn playwright test tests/LabelMapSegmentationColorChange.spec.ts

2. To regenerate the labelmap baselines after an intentional rendering
   change:

   yarn playwright test tests/LabelMapSegmentationColorChange.spec.ts --update-snapshots

Checklist

PR

• My Pull Request title is descriptive, accurate and follows the
  semantic-release format and guidelines.

Code

• My code has been well-documented (function documentation, inline comments, etc.)

Public Documentation Updates

• The documentation page has been updated as necessary for any public API additions or removals.

Tested Environment

• OS: macOS 15 (Darwin 25.3.0)
• Node version: 25.4.0
• Browser: Chrome 148.0.7778.179 (Chromium via Playwright)

Greptile Summary

This PR adds Playwright test coverage for changing the color of contour and labelmap segmentations, along with the data-cy instrumentation needed to make those tests work. Production changes are minimal — adding data-cy attributes to the color picker dialog, its action buttons, and the DataRow color swatch.

• colorPickerDialog.tsx and DataRow.tsx gain data-cy hooks; FooterAction already forwards dataCY via Button, so the wiring is correct.
• ContourSegmentColorChange.spec.ts covers open/save/cancel/duplicate flows using SVG stroke-attribute assertions; LabelMapSegmentationColorChange.spec.ts covers open/save/cancel using screenshot comparison, with four baseline images committed.
• DOMOverlayPageObject gains a colorPicker sub-object and RightPanelPageObject gains changeColor/cancelChangeColor actions and segmentsVisibilityToggle for the labelmap panel.

Confidence Score: 5/5

Safe to merge — production changes are limited to additive data-cy attributes with no behavioral impact; new tests are well-structured and hydration is handled correctly.

The only production code changed is the addition of test-id attributes, which cannot affect runtime behavior. Test logic is sound: hydration is confirmed and clicked in both beforeEach blocks, the duplicate-segment count guard is present, and screenshot baselines are committed.

No files require special attention.

Important Files Changed

Filename	Overview
extensions/default/src/utils/colorPickerDialog.tsx	Adds data-cy attributes to the dialog wrapper and both action buttons so Playwright can locate them reliably.
platform/ui-next/src/components/DataRow/DataRow.tsx	Adds data-cy="data-row-colorhex" to the color swatch span so tests can assert its CSS background-color.
tests/ContourSegmentColorChange.spec.ts	Four new tests covering contour color change flow; hydration is handled in beforeEach; minor misleading comment in the cancel test.
tests/LabelMapSegmentationColorChange.spec.ts	Three new tests covering labelmap color change flow; hydration is handled; uses screenshot comparison for render verification.
tests/pages/DOMOverlayPageObject.ts	Adds colorPicker getter to dialog object; hexInput is dialog-scoped but save/cancel buttons are page-scoped — inconsistent locator strategy.
tests/pages/RightPanelPageObject.ts	Adds openChangeColor, changeColor, and cancelChangeColor actions to the segment actions menu; exposes rowDataColorHex and segmentsVisibilityToggle on labelmap panel.
tests/utils/screenShotPaths.ts	Registers four new baseline screenshot keys under labelMapSegmentationColorChange.

Prompt To Fix All With AI

Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
tests/ContourSegmentColorChange.spec.ts:117
**Misleading inline comment in cancel test**

The comment on this line reads "check svg path stroke attribute is updated with new color", but this is the cancel test — the assertion immediately below checks that the stroke equals `THRESHOLD_CONTOUR_DEFAULT_CSS_RGBA` (i.e., it should _not_ have changed). A reader scanning the test will get the opposite impression of what is being verified.

### Issue 2 of 2
tests/pages/DOMOverlayPageObject.ts:64-67
**Save/cancel button locators are page-scoped instead of dialog-scoped**

`hexInput` is correctly scoped to `locator` (the `color-picker-dialog` element), but `saveButton` and `cancelButton` query the entire page. Since both buttons are rendered inside the dialog, scoping them to `locator` makes the selectors more precise and consistent. If the page ever renders two dialogs simultaneously (e.g. a nested dialog), the page-level locators would match the wrong element.

```suggestion
        const locator = page.getByTestId('color-picker-dialog');
        const hexInput = locator.getByLabel('hex');
        const saveButton = locator.getByTestId('color-picker-save-btn');
        const cancelButton = locator.getByTestId('color-picker-cancel-btn');
```

_{Reviews (2): Last reviewed commit: "Fix gereptile comments" | Re-trigger Greptile}

[claude]

Claude Code Review

This pull request is from a fork — automated review is disabled. A repository maintainer can comment @claude review to run a one-time review.

[netlify]

❌ Deploy Preview for ohif-dev failed. Why did it fail? →

Name	Link
🔨 Latest commit	2722802
🔍 Latest deploy log	https://app.netlify.com/projects/ohif-dev/deploys/6a15fe410b062c0008c934e8

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 8e93133f-15f3-450d-9a0b-d8393b591e5c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}