@openmrs/esm-patient-tests-app 11.3.1-patch.9064 → 11.3.1-patch.9310

package/src/test-results/grouped-timeline/grouped-timeline.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { getByTextWithMarkup } from 'tools';
 import { showModal } from '@openmrs/esm-framework';
 import { mockGroupedResults } from '__mocks__';
 import { type FilterContextProps } from '../filter/filter-types';
@@ -70,6 +71,54 @@ describe('GroupedTimeline', () => {
     expect(screen.getByText('2.9')).toBeInTheDocument();
   });
 
+  it('displays most recent observation range when available', () => {
+    const contextWithObservationRanges = {
+      ...mockFilterContext,
+      timelineData: {
+        ...mockFilterContext.timelineData,
+        data: {
+          ...mockFilterContext.timelineData.data,
+          rowData: [
+            {
+              ...mockFilterContext.timelineData.data.rowData[0],
+              range: '0 – 50', // Node-level range
+              units: 'umol/L',
+              entries: [
+                {
+                  obsDatetime: '2024-05-31 01:39:03.0',
+                  value: '261.9',
+                  interpretation: 'NORMAL',
+                  lowNormal: 35,
+                  hiNormal: 50,
+                  range: '35 – 50', // Observation-level range (most recent)
+                  // Note: Units are only at the concept/node level, not observation-level
+                },
+                {
+                  obsDatetime: '2023-11-09 23:15:03.0',
+                  value: '21.5',
+                  interpretation: 'NORMAL',
+                  lowNormal: 20,
+                  hiNormal: 45,
+                  range: '20 – 45', // Older observation-level range
+                  // Note: Units are only at the concept/node level, not observation-level
+                },
+              ],
+            },
+          ],
+        },
+      },
+    };
+
+    renderGroupedTimeline(contextWithObservationRanges as FilterContextProps);
+
+    // Should display most recent observation's range (35 – 50) not node-level (0 – 50)
+    // Range and units are displayed separately in the same element
+    const rangeElement = getByTextWithMarkup(/35 – 50/);
+    expect(rangeElement).toBeInTheDocument();
+    // Verify that the same element also contains the units
+    expect(rangeElement).toHaveTextContent('35 – 50 umol/L');
+  });
+
   it('correctly filters rows based on checkbox selection when someChecked is true', () => {
     renderGroupedTimeline({
       ...mockFilterContext,

package/src/test-results/grouped-timeline/reference-range-helpers.test.ts

@@ -0,0 +1,272 @@
+import {
+  selectReferenceRange,
+  formatReferenceRange,
+  getMostRecentObservationWithRange,
+  rangeAlreadyHasUnits,
+  type ReferenceRanges,
+} from './reference-range-helpers';
+
+describe('Reference Range Helpers', () => {
+  describe('selectReferenceRange', () => {
+    it('returns null when both ranges are null', () => {
+      expect(selectReferenceRange(undefined, undefined)).toBeNull();
+    });
+
+    it('returns node-level range when observation range is not available', () => {
+      const nodeRanges: ReferenceRanges = {
+        lowNormal: 0,
+        hiNormal: 50,
+        units: 'mg/dL',
+      };
+
+      expect(selectReferenceRange(undefined, nodeRanges)).toEqual(nodeRanges);
+    });
+
+    it('returns observation-level range when node range is not available', () => {
+      const observationRanges: ReferenceRanges = {
+        lowNormal: 35,
+        hiNormal: 147,
+        units: 'U/L',
+      };
+
+      expect(selectReferenceRange(observationRanges, undefined)).toEqual(observationRanges);
+    });
+
+    it('merges ranges with observation taking precedence', () => {
+      const observationRanges: ReferenceRanges = {
+        lowNormal: 35,
+        hiNormal: 147,
+        lowCritical: 25,
+        units: 'U/L',
+      };
+
+      const nodeRanges: ReferenceRanges = {
+        lowNormal: 0,
+        hiNormal: 270,
+        hiCritical: 541,
+        units: 'U/L',
+      };
+
+      const result = selectReferenceRange(observationRanges, nodeRanges);
+
+      expect(result).toEqual({
+        lowNormal: 35, // From observation
+        hiNormal: 147, // From observation
+        lowCritical: 25, // From observation
+        hiCritical: 541, // From node (observation doesn't have it)
+        units: 'U/L',
+      });
+    });
+
+    it('handles partial observation ranges', () => {
+      const observationRanges: ReferenceRanges = {
+        hiNormal: 147,
+        // Missing lowNormal
+      };
+
+      const nodeRanges: ReferenceRanges = {
+        lowNormal: 0,
+        hiNormal: 270,
+        units: 'U/L',
+      };
+
+      const result = selectReferenceRange(observationRanges, nodeRanges);
+
+      expect(result).toEqual({
+        lowNormal: 0, // From node (observation doesn't have it)
+        hiNormal: 147, // From observation
+        units: 'U/L',
+      });
+    });
+  });
+
+  describe('formatReferenceRange', () => {
+    it('returns "--" when ranges is null', () => {
+      expect(formatReferenceRange(null)).toBe('--');
+    });
+
+    it('formats range with both lowNormal and hiNormal', () => {
+      const ranges: ReferenceRanges = {
+        lowNormal: 0,
+        hiNormal: 50,
+        units: 'mg/dL',
+      };
+
+      expect(formatReferenceRange(ranges)).toBe('0 – 50 mg/dL');
+    });
+
+    it('formats range without units', () => {
+      const ranges: ReferenceRanges = {
+        lowNormal: 0,
+        hiNormal: 50,
+      };
+
+      expect(formatReferenceRange(ranges)).toBe('0 – 50');
+    });
+
+    it('returns "--" when lowNormal or hiNormal is missing', () => {
+      const ranges1: ReferenceRanges = {
+        hiNormal: 50,
+      };
+
+      const ranges2: ReferenceRanges = {
+        lowNormal: 0,
+      };
+
+      expect(formatReferenceRange(ranges1)).toBe('--');
+      expect(formatReferenceRange(ranges2)).toBe('--');
+    });
+
+    it('uses provided units parameter when ranges.units is not available', () => {
+      const ranges: ReferenceRanges = {
+        lowNormal: 0,
+        hiNormal: 50,
+      };
+
+      expect(formatReferenceRange(ranges, 'mg/dL')).toBe('0 – 50 mg/dL');
+    });
+  });
+
+  describe('getMostRecentObservationWithRange', () => {
+    it('returns null when observations array is empty', () => {
+      expect(getMostRecentObservationWithRange([])).toBeNull();
+    });
+
+    it('returns null when no observations have range data', () => {
+      const observations = [
+        { obsDatetime: '2024-01-01', value: '10' },
+        { obsDatetime: '2024-01-02', value: '20' },
+      ];
+
+      expect(getMostRecentObservationWithRange(observations)).toBeNull();
+    });
+
+    it('returns the most recent observation with range data', () => {
+      const observations = [
+        {
+          obsDatetime: '2024-01-01',
+          value: '10',
+          lowNormal: 0,
+          hiNormal: 50,
+        },
+        {
+          obsDatetime: '2024-01-03',
+          value: '30',
+          lowNormal: 35,
+          hiNormal: 147,
+        },
+        {
+          obsDatetime: '2024-01-02',
+          value: '20',
+          // No range data
+        },
+      ];
+
+      const result = getMostRecentObservationWithRange(observations);
+
+      expect(result).toEqual({
+        obsDatetime: '2024-01-03',
+        value: '30',
+        lowNormal: 35,
+        hiNormal: 147,
+      });
+    });
+
+    it('handles observations with only lowNormal', () => {
+      const observations = [
+        {
+          obsDatetime: '2024-01-01',
+          value: '10',
+          lowNormal: 0,
+        },
+      ];
+
+      const result = getMostRecentObservationWithRange(observations);
+
+      expect(result).toEqual({
+        obsDatetime: '2024-01-01',
+        value: '10',
+        lowNormal: 0,
+      });
+    });
+
+    it('handles observations with only hiNormal', () => {
+      const observations = [
+        {
+          obsDatetime: '2024-01-01',
+          value: '10',
+          hiNormal: 50,
+        },
+      ];
+
+      const result = getMostRecentObservationWithRange(observations);
+
+      expect(result).toEqual({
+        obsDatetime: '2024-01-01',
+        value: '10',
+        hiNormal: 50,
+      });
+    });
+
+    it('filters out undefined entries', () => {
+      const observations = [
+        undefined,
+        {
+          obsDatetime: '2024-01-01',
+          value: '10',
+          lowNormal: 0,
+          hiNormal: 50,
+        },
+        undefined,
+      ];
+
+      const result = getMostRecentObservationWithRange(observations);
+
+      expect(result).toEqual({
+        obsDatetime: '2024-01-01',
+        value: '10',
+        lowNormal: 0,
+        hiNormal: 50,
+      });
+    });
+  });
+
+  describe('rangeAlreadyHasUnits', () => {
+    it('returns false when range is undefined', () => {
+      expect(rangeAlreadyHasUnits(undefined, 'U/L')).toBe(false);
+    });
+
+    it('returns false when units is undefined', () => {
+      expect(rangeAlreadyHasUnits('0 – 50', undefined)).toBe(false);
+    });
+
+    it('returns false when both are undefined', () => {
+      expect(rangeAlreadyHasUnits(undefined, undefined)).toBe(false);
+    });
+
+    it('returns true when range ends with units', () => {
+      expect(rangeAlreadyHasUnits('0 – 50 U/L', 'U/L')).toBe(true);
+    });
+
+    it('returns true when range ends with units with space', () => {
+      expect(rangeAlreadyHasUnits('0 – 50 U/L', 'U/L')).toBe(true);
+    });
+
+    it('returns false when range does not end with units', () => {
+      expect(rangeAlreadyHasUnits('0 – 50', 'U/L')).toBe(false);
+    });
+
+    it('returns false when units appear in the middle of range', () => {
+      expect(rangeAlreadyHasUnits('5 mg/dL value', 'mg/dL')).toBe(false);
+    });
+
+    it('handles trimmed strings correctly', () => {
+      expect(rangeAlreadyHasUnits('  0 – 50 U/L  ', '  U/L  ')).toBe(true);
+    });
+
+    it('returns false for empty strings', () => {
+      expect(rangeAlreadyHasUnits('', 'U/L')).toBe(false);
+      expect(rangeAlreadyHasUnits('0 – 50', '')).toBe(false);
+    });
+  });
+});

package/src/test-results/grouped-timeline/reference-range-helpers.ts

@@ -0,0 +1,112 @@
+import { exist } from '../loadPatientTestData/helpers';
+import type { OBSERVATION_INTERPRETATION } from '@openmrs/esm-patient-common-lib';
+
+export interface ReferenceRanges {
+  hiAbsolute?: number;
+  hiCritical?: number;
+  hiNormal?: number;
+  lowAbsolute?: number;
+  lowCritical?: number;
+  lowNormal?: number;
+  units?: string;
+}
+
+/**
+ * Merges observation-level and node-level reference ranges.
+ * Observation-level ranges take precedence when available.
+ */
+export function selectReferenceRange(
+  observationRanges?: ReferenceRanges,
+  nodeRanges?: ReferenceRanges,
+): ReferenceRanges | null {
+  if (!observationRanges && !nodeRanges) {
+    return null;
+  }
+
+  if (!observationRanges) {
+    return nodeRanges || null;
+  }
+
+  if (!nodeRanges) {
+    return observationRanges;
+  }
+
+  // Merge: observation takes precedence for available fields.
+  // Note: Units are only at the concept/node level, so units will always come from nodeRanges.
+  return {
+    hiAbsolute: observationRanges.hiAbsolute ?? nodeRanges.hiAbsolute,
+    hiCritical: observationRanges.hiCritical ?? nodeRanges.hiCritical,
+    hiNormal: observationRanges.hiNormal ?? nodeRanges.hiNormal,
+    lowAbsolute: observationRanges.lowAbsolute ?? nodeRanges.lowAbsolute,
+    lowCritical: observationRanges.lowCritical ?? nodeRanges.lowCritical,
+    lowNormal: observationRanges.lowNormal ?? nodeRanges.lowNormal,
+    units: observationRanges.units ?? nodeRanges.units,
+  };
+}
+
+/**
+ * Formats reference range string using lowNormal and hiNormal.
+ * Note: Display format using lowAbsolute/hiAbsolute with >/< is handled in a separate ticket.
+ */
+export function formatReferenceRange(ranges: ReferenceRanges | null, units?: string): string {
+  if (!ranges) {
+    return '--';
+  }
+
+  const { lowNormal, hiNormal } = ranges;
+  const displayUnits = ranges.units || units || '';
+
+  if (exist(lowNormal, hiNormal)) {
+    return `${lowNormal} – ${hiNormal}${displayUnits ? ` ${displayUnits}` : ''}`;
+  }
+
+  return '--';
+}
+
+/**
+ * Checks if a formatted range string already includes the units.
+ * This prevents duplicate units when appending units to a range that already has them.
+ * @param range The formatted range string (e.g., "0 – 50 U/L")
+ * @param units The units string (e.g., "U/L")
+ * @returns true if the range already ends with the units, false otherwise
+ */
+export function rangeAlreadyHasUnits(range: string | undefined, units: string | undefined): boolean {
+  if (!range || !units) {
+    return false;
+  }
+
+  // Check if range ends with units (with optional space before)
+  // This is more precise than includes() to avoid false positives
+  const trimmedRange = range.trim();
+  const trimmedUnits = units.trim();
+  return trimmedRange.endsWith(trimmedUnits) || trimmedRange.endsWith(` ${trimmedUnits}`);
+}
+
+/**
+ * Finds the most recent observation that has reference range data.
+ */
+export function getMostRecentObservationWithRange<
+  T extends { obsDatetime: string; lowNormal?: number; hiNormal?: number },
+>(observations: Array<T | undefined>): T | null {
+  if (!observations || observations.length === 0) {
+    return null;
+  }
+
+  // Filter out undefined and find observations with range data
+  const validObservations = observations.filter(
+    (obs): obs is T => obs !== undefined && (obs.lowNormal !== undefined || obs.hiNormal !== undefined),
+  );
+
+  if (validObservations.length === 0) {
+    return null;
+  }
+
+  // Sort by obsDatetime descending (most recent first)
+  const sorted = [...validObservations].sort((a, b) => {
+    const dateA = new Date(a.obsDatetime).getTime();
+    const dateB = new Date(b.obsDatetime).getTime();
+    return dateB - dateA;
+  });
+
+  return sorted[0];
+}

package/src/test-results/grouped-timeline/timeline-data-group.component.tsx

@@ -10,6 +10,7 @@ import type {
   TimelineDataGroupProps,
 } from './grouped-timeline-types';
 import FilterContext from '../filter/filter-context';
+import { getMostRecentObservationWithRange } from './reference-range-helpers';
 import styles from './grouped-timeline.scss';
 
 export const ShadowBox: React.FC = () => <div className={styles['shadow-box']} />;
@@ -196,14 +197,20 @@ const DataRows: React.FC<DataRowsProps> = ({ patientUuid, timeColumns, rowData,
     <Grid dataColumns={timeColumns.length} padding style={{ gridColumn: 'span 2' }}>
       {rowData.map((row, index) => {
         const obs = row.entries;
-        const { units = '', range = '', obs: values } = row;
+        const { obs: values } = row;
         const isString = isNaN(parseFloat(values?.[0]?.value));
+
+        // Note: Units are only at the concept/node level, not observation-level
+        const mostRecentObsWithRange = getMostRecentObservationWithRange(row.entries);
+        const displayRange = mostRecentObsWithRange?.range ?? row.range ?? '';
+        const displayUnits = row.units ?? '';
+
         return (
           <React.Fragment key={index}>
             <NewRowStartCell
               {...{
-                units,
-                range,
+                units: displayUnits,
+                range: displayRange,
                 title: row.display,
                 shadow: showShadow,
                 conceptUuid: row.conceptUuid,

package/src/test-results/grouped-timeline/useObstreeData.ts

@@ -2,8 +2,9 @@ import { useMemo } from 'react';
 import useSWR from 'swr';
 import useSWRInfinite from 'swr/infinite';
 import { openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
-import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import { type OBSERVATION_INTERPRETATION } from '@openmrs/esm-patient-common-lib';
 import { assessValue, exist } from '../loadPatientTestData/helpers';
+import { selectReferenceRange, formatReferenceRange, type ReferenceRanges } from './reference-range-helpers';
 
 export const getName = (prefix: string | undefined, name: string) => {
   return prefix ? `${prefix}-${name}` : name;
@@ -13,11 +14,28 @@ interface ObsTreeNode {
   flatName?: string;
   display: string;
   hasData: boolean;
+  hiAbsolute?: number;
+  hiCritical?: number;
   hiNormal?: number;
+  lowAbsolute?: number;
+  lowCritical?: number;
   lowNormal?: number;
+  units?: string;
   range?: string;
   subSets: Array<ObsTreeNode>;
-  obs: Array<{ value: string }>;
+  obs: Array<{
+    value: string;
+    interpretation?: OBSERVATION_INTERPRETATION;
+    obsDatetime?: string;
+    // Observation-level reference ranges (criteria-based)
+    // Note: Units are only at the concept/node level, not observation-level
+    hiAbsolute?: number;
+    hiCritical?: number;
+    hiNormal?: number;
+    lowAbsolute?: number;
+    lowCritical?: number;
+    lowNormal?: number;
+  }>;
 }
 
 const augmentObstreeData = (node: ObsTreeNode, prefix: string | undefined) => {
@@ -40,20 +58,65 @@ const augmentObstreeData = (node: ObsTreeNode, prefix: string | undefined) => {
     outData.subSets = outData.subSets.map((subNode: ObsTreeNode) => augmentObstreeData(subNode, outData.flatName));
     outData.hasData = outData.subSets.some((subNode: ObsTreeNode) => subNode.hasData);
   }
+  // Format node-level range for display (using lowNormal/hiNormal)
   if (exist(outData?.hiNormal, outData?.lowNormal)) {
-    outData.range = `${outData.lowNormal} – ${outData.hiNormal}`;
+    outData.range = formatReferenceRange(
+      {
+        lowNormal: outData.lowNormal,
+        hiNormal: outData.hiNormal,
+        units: outData.units,
+      },
+      outData.units,
+    );
   }
+
   if (outData?.obs?.length) {
-    const assess = assessValue(outData);
-    outData.obs = outData.obs.map((ob) => ({ ...ob, interpretation: assess(ob.value) }));
+    outData.obs = outData.obs.map((ob) => {
+      // Note: Units are only at the concept/node level, not observation-level
+      const observationRanges: ReferenceRanges | undefined =
+        ob.lowNormal !== undefined || ob.hiNormal !== undefined
+          ? {
+              hiAbsolute: ob.hiAbsolute,
+              hiCritical: ob.hiCritical,
+              hiNormal: ob.hiNormal,
+              lowAbsolute: ob.lowAbsolute,
+              lowCritical: ob.lowCritical,
+              lowNormal: ob.lowNormal,
+            }
+          : undefined;
+
+      const nodeRanges: ReferenceRanges | undefined = {
+        hiAbsolute: outData.hiAbsolute,
+        hiCritical: outData.hiCritical,
+        hiNormal: outData.hiNormal,
+        lowAbsolute: outData.lowAbsolute,
+        lowCritical: outData.lowCritical,
+        lowNormal: outData.lowNormal,
+        units: outData.units,
+      };
+
+      const selectedRanges = selectReferenceRange(observationRanges, nodeRanges);
+      const assess = selectedRanges ? assessValue(selectedRanges) : assessValue(nodeRanges);
+      const interpretation = ob.interpretation ?? assess(ob.value);
+
+      // Always use node-level units since observation-level ranges don't have units
+      const displayRange = observationRanges
+        ? formatReferenceRange(observationRanges, outData.units)
+        : outData.range || '--';
+
+      return {
+        ...ob,
+        interpretation,
+        range: displayRange,
+      };
+    });
     outData.hasData = true;
   }
 
   return { ...outData } as ObsTreeNode;
 };
 
-const useGetObstreeData = (conceptUuid: string) => {
-  const { patientUuid } = usePatientChartStore();
+const useGetObstreeData = (patientUuid: string, conceptUuid: string) => {
   const response = useSWR<FetchResponse<ObsTreeNode>, Error>(
     `${restBaseUrl}/obstree?patient=${patientUuid}&concept=${conceptUuid}`,
     openmrsFetch,
@@ -74,8 +137,7 @@ const useGetObstreeData = (conceptUuid: string) => {
   return result;
 };
 
-const useGetManyObstreeData = (uuidArray: Array<string>) => {
-  const { patientUuid } = usePatientChartStore();
+const useGetManyObstreeData = (patientUuid: string, uuidArray: Array<string>) => {
   const getObstreeUrl = (index: number) => {
     if (index < uuidArray.length && patientUuid) {
       return `${restBaseUrl}/obstree?patient=${patientUuid}&concept=${uuidArray[index]}`;

package/src/test-results/individual-results-table/individual-results-table.component.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import { rangeAlreadyHasUnits } from '../grouped-timeline/reference-range-helpers';
 import {
   DataTable,
   DataTableSkeleton,
@@ -13,11 +14,12 @@ import {
   TableRow,
 } from '@carbon/react';
 import { showModal, useLayoutType, formatDate, parseDate } from '@openmrs/esm-framework';
-import { getPatientUuidFromStore, type OBSERVATION_INTERPRETATION } from '@openmrs/esm-patient-common-lib';
+import { type OBSERVATION_INTERPRETATION } from '@openmrs/esm-patient-common-lib';
 import { type GroupedObservation } from '../../types';
 import styles from './individual-results-table.scss';
 
 interface IndividualResultsTableProps {
+  patientUuid;
   isLoading: boolean;
   subRows: GroupedObservation;
   index: number;
@@ -50,10 +52,15 @@ const getClasses = (interpretation: OBSERVATION_INTERPRETATION) => {
   }
 };
 
-const IndividualResultsTable: React.FC<IndividualResultsTableProps> = ({ isLoading, subRows, index, title }) => {
+const IndividualResultsTable: React.FC<IndividualResultsTableProps> = ({
+  patientUuid,
+  isLoading,
+  subRows,
+  index,
+  title,
+}) => {
   const { t } = useTranslation();
   const layout = useLayoutType();
-  const patientUuid = getPatientUuidFromStore();
   const isDesktop = layout === 'small-desktop' || layout === 'large-desktop';
 
   const headerTitle = t(title);
@@ -85,9 +92,19 @@ const IndividualResultsTable: React.FC<IndividualResultsTableProps> = ({ isLoadi
     () =>
       subRows?.entries.length &&
       subRows.entries.map((row, i) => {
-        const { units = '', range = '' } = row;
+        // Use observation-level range/units if available, otherwise fallback to node-level
+        // MappedObservation has range and units fields, but they may come from node-level
+        const displayRange = row.range ?? '';
+        const displayUnits = row.units ?? '';
         const isString = isNaN(parseFloat(row.value));
 
+        // Check if range already includes units to avoid duplication
+        // formatReferenceRange includes units, so if range has units, don't append again
+        const hasUnits = rangeAlreadyHasUnits(displayRange, displayUnits);
+        const referenceRangeDisplay = hasUnits
+          ? displayRange
+          : `${displayRange || '--'} ${displayUnits || ''}`.trim() || '--';
+
         return {
           ...row,
           id: `${i}-${index}`,
@@ -106,10 +123,10 @@ const IndividualResultsTable: React.FC<IndividualResultsTableProps> = ({ isLoadi
             </span>
           ),
           value: {
-            value: `${row.value} ${row.units ?? ''}`,
+            value: `${row.value} ${displayUnits}`,
             interpretation: row?.interpretation,
           },
-          referenceRange: `${range || '--'} ${units || '--'}`,
+          referenceRange: referenceRangeDisplay,
         };
       }),
     [index, subRows, launchResultsDialog],