fix(microscopy): rename measurement in microscopy mode (#5866)

extensions/dicom-microscopy/src/getCommandsModule.ts

@@ -1,6 +1,7 @@
 import { CommandsManager, ExtensionManager } from '@ohif/core';
 import { callInputDialog } from '@ohif/extension-default';
 import styles from './utils/styles';
+import i18n from '@ohif/i18n';
 
 export default function getCommandsModule({
   servicesManager,
@@ -24,16 +25,22 @@ export default function getCommandsModule({
       }
     },
 
-    setLabel: ({ uid }) => {
+    setLabel: async ({ uid }) => {
       const roiAnnotation = microscopyService.getAnnotation(uid);
-      callInputDialog({
+      if (!roiAnnotation) {
+        return;
+      }
+      const value = await callInputDialog({
         uiDialogService,
-        defaultValue: '',
+        title: i18n.t('Tools:Edit Measurement Label'),
-        onSave: (value: string) => {
+        placeholder: roiAnnotation.label || i18n.t('Tools:Enter new label'),
-          roiAnnotation.setLabel(value);
+        defaultValue: roiAnnotation.label,
-          microscopyService.triggerRelabel(roiAnnotation);
-        },
       });
+
+      if (value != null) {
+        roiAnnotation.setLabel(value);
+        microscopyService.triggerRelabel(roiAnnotation);
+      }
     },
 
     setToolActive: ({ toolName, toolGroupId = 'MICROSCOPY' }) => {

platform/ui-next/src/components/DataRow/DataRow.tsx

@@ -280,6 +280,7 @@ const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
               <Tooltip>
                 <TooltipTrigger asChild>
                   <span
+                    data-cy="data-row-title"
                     className={`cursor-default text-base ${
                       isSelected ? 'text-highlight' : 'text-muted-foreground'
                     } [overflow:hidden] [display:-webkit-box] [-webkit-line-clamp:2] [-webkit-box-orient:vertical]`}
@@ -296,6 +297,7 @@ const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
               </Tooltip>
             ) : (
               <span
+                data-cy="data-row-title"
                 className={`text-base ${
                   isSelected ? 'text-highlight' : 'text-muted-foreground'
                 } [overflow:hidden] [display:-webkit-box] [-webkit-line-clamp:2] [-webkit-box-orient:vertical]`}

tests/MicroscopyPanel.spec.ts

@@ -0,0 +1,33 @@
+import { test, visitStudy, expect } from './utils';
+
+test.beforeEach(async ({ page }) => {
+  const studyInstanceUID = '1.2.276.0.7230010.3.1.2.296485376.1.1665793212.499772';
+  const mode = 'microscopy';
+  await visitStudy(page, studyInstanceUID, mode, 5000);
+});
+test('should rename a microscopy measurement label', async ({
+  page,
+  mainToolbarPageObject,
+  DOMOverlayPageObject,
+  rightPanelPageObject,
+  viewportPageObject,
+}) => {
+  const newLabel = 'Renamed Measurement';
+
+  await mainToolbarPageObject.measurementTools.line.click();
+
+  await viewportPageObject.active.clickAt([{ x: 400, y: 200 }]);
+  await page.waitForTimeout(200);
+  await viewportPageObject.active.clickAt([{ x: 550, y: 250 }]);
+
+  const measurementRow = rightPanelPageObject.microscopyPanel.nthMeasurement(0);
+  await expect(measurementRow.locator).toBeVisible();
+
+  await expect(measurementRow.title).toHaveText('(empty)');
+
+  await measurementRow.actions.rename(newLabel);
+
+  await expect(DOMOverlayPageObject.dialog.input.locator).toBeHidden();
+
+  await expect(measurementRow.title).toHaveText(newLabel);
+});

tests/pages/MainToolbarPageObject.ts

@@ -194,7 +194,6 @@ export class MainToolbarPageObject {
           },
         };
       },
-
       get freehandROI() {
         const button = page.getByTestId('PlanarFreehandROI');
         return {
@@ -205,6 +204,21 @@ export class MainToolbarPageObject {
           },
         };
       },
+      /* microscopy specific tools */
+      // `.last()` targets the menu item inside the dropdown, not the active-tool
+      // indicator inside the split-button primary
+      // because both share the same data-cy value (e.g. "line")
+      // Other microscopy tools might follow the same pattern
+      get line() {
+        const button = page.getByTestId('line').last();
+        return {
+          button,
+          async click() {
+            await measurementTools.click();
+            await button.click();
+          },
+        };
+      },
     };
   }
 

tests/pages/RightPanelPageObject.ts

@@ -46,6 +46,9 @@ export class RightPanelPageObject {
       get actions() {
         return getActionsMenu(row);
       },
+      get title() {
+        return row.getByTestId('data-row-title');
+      },
       click: async () => {
         await row.click();
       },
@@ -323,4 +326,23 @@ export class RightPanelPageObject {
       },
     };
   }
+
+  get microscopyPanel() {
+    const page = this.page;
+    const getMeasurementByIdx = (index: number) => this.getPanelRowByIdx(index);
+    const getMeasurementByText = (text: string) => this.getPanelRowByText(text);
+
+    return {
+      locator: page.getByTestId('measurements-panel'),
+      getMeasurementCount: async () => {
+        return await page.getByTestId('data-row').count();
+      },
+      nthMeasurement(index: number) {
+        return getMeasurementByIdx(index);
+      },
+      measurementByText(text: string) {
+        return getMeasurementByText(text);
+      },
+    };
+  }
 }