feat: group measurements by study

extensions/cornerstone-dicom-sr/src/commandsModule.ts

@@ -42,9 +42,8 @@ const _generateReport = (measurementData, additionalFindingTypes, options = {})
 };
 
 const commandsModule = (props: withAppTypes) => {
-  const { servicesManager, extensionManager, commandsManager } = props;
-  const { customizationService, measurementService, viewportGridService, uiDialogService } =
-    servicesManager.services;
+  const { servicesManager, extensionManager } = props;
+  const { customizationService, displaySetService, viewportGridService } = servicesManager.services;
 
   const actions = {
     changeColorMeasurement: ({ uid }) => {

extensions/cornerstone/src/panels/PanelMeasurement.tsx

@@ -1,24 +1,28 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { utils } from '@ohif/core';
 import { MeasurementTable } from '@ohif/ui-next';
 import debounce from 'lodash.debounce';
 import { useMeasurements } from '../hooks/useMeasurements';
 
-const { filterAdditionalFinding, filterOr, filterAny } = utils.MeasurementFilters;
+const { filterAdditionalFinding, filterAny } = utils.MeasurementFilters;
 
 export type withAppAndFilters = withAppTypes & {
   measurementFilters: Record<string, (item) => boolean>;
+  groupingFunction: (groupedMeasurements: Map<string, object[]>, item) => Map<string, object[]>;
+  title: string;
 };
 
 export default function PanelMeasurementTable({
   servicesManager,
   commandsManager,
   customHeader,
   measurementFilters = { measurementFilter: filterAny },
+  groupingFunction,
+  title,
 }: withAppAndFilters): React.ReactNode {
   const measurementsPanelRef = useRef(null);
 
-  const { measurementService, customizationService } = servicesManager.services;
+  const { measurementService, displaySetService } = servicesManager.services;
 
   const displayMeasurements = useMeasurements(servicesManager, {
     measurementFilter: measurementFilters.measurementFilter.bind(measurementFilters),
@@ -48,12 +52,29 @@ export default function PanelMeasurementTable({
 
   const additionalFilter = filterAdditionalFinding(measurementService);
 
-  const { measurementFilter: trackedFilter } = measurementFilters;
-  const measurements = displayMeasurements.filter(
-    item => !additionalFilter(item) && trackedFilter(item)
-  );
+  const { measurementFilter } = measurementFilters;
+  const defaultGroupingFunction = (groupedMeasurements, item) => {
+    const displaySet = displaySetService.getDisplaySetByUID(item.displaySetInstanceUID);
+    const key = displaySet.instances[0].StudyDescription;
+
+    if (!groupedMeasurements.has(key)) {
+      groupedMeasurements.set(key, [item]);
+      return groupedMeasurements;
+    }
+
+    const oldValues = groupedMeasurements.get(key);
+    oldValues.push(item);
+    return groupedMeasurements;
+  };
+
+  const effectiveGroupingFunction = groupingFunction ?? defaultGroupingFunction;
+
+  const measurements = displayMeasurements
+    .filter(item => !additionalFilter(item) && measurementFilter(item))
+    .reduce(effectiveGroupingFunction, new Map<string, object[]>());
+
   const additionalFindings = displayMeasurements.filter(
-    item => additionalFilter(item) && trackedFilter(item)
+    item => additionalFilter(item) && measurementFilter(item)
   );
 
   const onArgs = {
@@ -69,29 +90,39 @@ export default function PanelMeasurementTable({
       <div
         className="invisible-scrollbar overflow-y-auto overflow-x-hidden"
         ref={measurementsPanelRef}
-        data-cy={'trackedMeasurements-panel'}
+        data-cy={'measurements-panel'}
       >
-        <MeasurementTable
-          key="tracked"
-          title="Measurements"
-          data={measurements}
-          {...onArgs}
-          // onColor={changeColorMeasurement}
-        >
-          <MeasurementTable.Header>
-            {customHeader && (
-              <>
-                {typeof customHeader === 'function'
-                  ? customHeader({
-                      additionalFindings,
-                      measurements,
-                    })
-                  : customHeader}
-              </>
-            )}
-          </MeasurementTable.Header>
-          <MeasurementTable.Body />
-        </MeasurementTable>
+        {Array.from(measurements).length === 0 && additionalFindings.length === 0 ? (
+          <div className="text-primary-light mb-1 flex flex-1 items-center px-2 py-2 text-base">
+            No measurements
+          </div>
+        ) : (
+          <></>
+        )}
+        {Array.from(measurements).map(([key, value]) => {
+          return (
+            <MeasurementTable
+              key={`${key}`}
+              title={title ? title : `Measurements for ${key}`}
+              data={value}
+              {...onArgs}
+            >
+              <MeasurementTable.Header>
+                {customHeader && (
+                  <>
+                    {typeof customHeader === 'function'
+                      ? customHeader({
+                          additionalFindings,
+                          measurements,
+                        })
+                      : customHeader}
+                  </>
+                )}
+              </MeasurementTable.Header>
+              <MeasurementTable.Body />
+            </MeasurementTable>
+          );
+        })}
         {additionalFindings.length > 0 && (
           <MeasurementTable
             key="additional"

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { DicomMetadataStore, utils } from '@ohif/core';
+import { utils } from '@ohif/core';
 import { useViewportGrid } from '@ohif/ui';
 import { Button, Icons } from '@ohif/ui-next';
 import { PanelMeasurement, StudySummaryFromMetadata } from '@ohif/extension-cornerstone';
 import { useTrackedMeasurements } from '../getContextModule';
 import { useTranslation } from 'react-i18next';
 
-const { filterAny, filterNone, filterNot, filterTracked } = utils.MeasurementFilters;
+const { filterAny, filterNot, filterTracked } = utils.MeasurementFilters;
 
 function PanelMeasurementTableTracking({
   servicesManager,
@@ -28,7 +28,7 @@ function PanelMeasurementTableTracking({
   });
 
   useEffect(() => {
-    let updatedMeasurementFilters = { ...measurementFilters };
+    const updatedMeasurementFilters = { ...measurementFilters };
     if (trackedMeasurements.matches('tracking') && trackedStudy) {
       updatedMeasurementFilters.measurementFilter = filterTracked(trackedStudy, trackedSeries);
     } else {
@@ -53,6 +53,7 @@ function PanelMeasurementTableTracking({
         extensionManager={extensionManager}
         commandsManager={commandsManager}
         measurementFilters={measurementFilters}
+        title="Measurements"
         customHeader={({ additionalFindings, measurements }) => {
           const disabled = additionalFindings.length === 0 && measurements.length === 0;
 

platform/app/cypress/support/aliases.js

@@ -26,7 +26,7 @@ export function initCommonElementsAliases(skipMarkers) {
   cy.get('[data-cy="trackedMeasurements-btn"]').click();
 
   // TODO: Panels are not in DOM when closed, move this somewhere else
-  cy.get('[data-cy="trackedMeasurements-panel"]').as('measurementsPanel');
+  cy.get('[data-cy="measurements-panel"]').as('measurementsPanel');
   cy.get('[data-cy="panelSegmentation-btn"]').as('segmentationPanel');
   cy.get('[data-cy="studyBrowser-panel"]').as('seriesPanel');
   cy.get('[data-cy="viewport-overlay-top-right"]').as('viewportInfoTopRight');