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

package/src/test-results/filter/filter-types.ts

@@ -53,7 +53,7 @@ export type LowestNode = Pick<TreeNode, 'display' | 'flatName'>;
 export interface ReducerState {
   checkboxes: TreeCheckboxes;
   parents: TreeParents;
-  roots: Array<LowestNode>;
+  roots: Array<TreeNode>;
   tests: TreeTests;
   lowestParents: Array<TreeNode>;
 }
@@ -147,3 +147,7 @@ export interface RowData extends TreeNode {
     | undefined
   >;
 }
+
+export interface EmptyStateProps {
+  clearFilter(): void;
+}

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

@@ -1,12 +1,14 @@
 import React from 'react';
 import styles from './grid.scss';
 
-export const Grid: React.FC<{
+interface GridProps {
   children?: React.ReactNode;
   style: React.CSSProperties;
   padding?: boolean;
   dataColumns: number;
-}> = ({ dataColumns, style = {}, padding = false, ...props }) => {
+}
+
+export const Grid: React.FC<GridProps> = ({ dataColumns, style = {}, padding = false, ...props }) => {
   return (
     <div
       style={{

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

@@ -21,29 +21,27 @@ export const GroupedTimeline: React.FC<{ patientUuid: string }> = ({ patientUuid
 
   if (activeTests && timelineData && loaded && tableData) {
     return (
-      <div>
-        <div className={styles.timelineDataContainer}>
-          {tableData.map((panel, index) => {
-            // Filter rowData to only include tests that belong to this panel
-            const panelTestNames = panel.entries.map((entry) => entry.flatName);
-            const subRows = rowData?.filter((row: { flatName: string }) => panelTestNames.includes(row.flatName));
+      <div className={styles.timelineDataContainer}>
+        {tableData.map((panel, index) => {
+          // Filter rowData to only include tests that belong to this panel
+          const panelTestNames = panel.entries.map((entry) => entry.flatName);
+          const subRows = rowData?.filter((row: { flatName: string }) => panelTestNames.includes(row.flatName));
 
-            return (
-              subRows?.length > 0 && (
-                <div key={index}>
-                  <TimelineDataGroup
-                    groupNumber={index + 1}
-                    parent={{ display: panel.key, flatName: panel.key }}
-                    patientUuid={patientUuid}
-                    setXScroll={setXScroll}
-                    subRows={subRows}
-                    xScroll={xScroll}
-                  />
-                </div>
-              )
-            );
-          })}
-        </div>
+          return (
+            subRows?.length > 0 && (
+              <div key={index}>
+                <TimelineDataGroup
+                  groupNumber={index + 1}
+                  parent={{ display: panel.key, flatName: panel.key }}
+                  patientUuid={patientUuid}
+                  setXScroll={setXScroll}
+                  subRows={subRows}
+                  xScroll={xScroll}
+                />
+              </div>
+            )
+          );
+        })}
       </div>
     );
   }

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { getByTextWithMarkup } from 'tools';
 import { showModal } from '@openmrs/esm-framework';
 import { mockGroupedResults } from '__mocks__';
@@ -62,7 +62,8 @@ describe('GroupedTimeline', () => {
     expect(screen.getByText('Nov 9')).toBeInTheDocument();
     expect(screen.getByText('01:39 AM')).toBeInTheDocument();
     expect(screen.getByText('Total bilirubin')).toBeInTheDocument();
-    expect(screen.getByText('umol/L')).toBeInTheDocument();
+    // Units are now combined with range, so if there's no range, units won't be displayed separately
+    // Total bilirubin doesn't have a range in timelineData, so units are not displayed
     expect(screen.getByText('261.9')).toBeInTheDocument();
     expect(screen.getByText('21.5')).toBeInTheDocument();
     expect(screen.getByText('Serum glutamic-pyruvic transaminase')).toBeInTheDocument();

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

@@ -1,8 +1,9 @@
 import {
-  selectReferenceRange,
+  formatRangeWithUnits,
   formatReferenceRange,
   getMostRecentObservationWithRange,
   rangeAlreadyHasUnits,
+  selectReferenceRange,
   type ReferenceRanges,
 } from './reference-range-helpers';
 
@@ -269,4 +270,39 @@ describe('Reference Range Helpers', () => {
       expect(rangeAlreadyHasUnits('0 – 50', '')).toBe(false);
     });
   });
+
+  describe('formatRangeWithUnits', () => {
+    it('returns "--" when range is undefined', () => {
+      expect(formatRangeWithUnits(undefined, 'U/L')).toBe('--');
+    });
+
+    it('returns "--" when range is empty string', () => {
+      expect(formatRangeWithUnits('', 'U/L')).toBe('--');
+    });
+
+    it('returns range as-is when range already includes units', () => {
+      expect(formatRangeWithUnits('0 – 50 U/L', 'U/L')).toBe('0 – 50 U/L');
+    });
+
+    it('appends units when range does not include units', () => {
+      expect(formatRangeWithUnits('0 – 50', 'U/L')).toBe('0 – 50 U/L');
+    });
+
+    it('returns range without units when units is undefined', () => {
+      expect(formatRangeWithUnits('0 – 50', undefined)).toBe('0 – 50');
+    });
+
+    it('returns range without units when units is empty', () => {
+      expect(formatRangeWithUnits('0 – 50', '')).toBe('0 – 50');
+    });
+
+    it('handles trimmed strings correctly', () => {
+      expect(formatRangeWithUnits('  0 – 50  ', '  U/L  ')).toBe('0 – 50 U/L');
+    });
+
+    it('handles range with units and different units parameter', () => {
+      // If range already has units, don't append different units
+      expect(formatRangeWithUnits('0 – 50 mg/dL', 'U/L')).toBe('0 – 50 mg/dL');
+    });
+  });
 });

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

@@ -1,5 +1,4 @@
 import { exist } from '../loadPatientTestData/helpers';
-import type { OBSERVATION_INTERPRETATION } from '@openmrs/esm-patient-common-lib';
 
 export interface ReferenceRanges {
   hiAbsolute?: number;
@@ -82,6 +81,56 @@ export function rangeAlreadyHasUnits(range: string | undefined, units: string |
   return trimmedRange.endsWith(trimmedUnits) || trimmedRange.endsWith(` ${trimmedUnits}`);
 }
 
+/**
+ * Checks if a range string already contains any units (common unit patterns).
+ * This helps detect if a range already has units even if they differ from the parameter.
+ * @param range The formatted range string (e.g., "0 – 50 mg/dL")
+ * @returns true if the range appears to already contain units, false otherwise
+ */
+function rangeHasAnyUnits(range: string): boolean {
+  if (!range) {
+    return false;
+  }
+
+  const trimmedRange = range.trim();
+  // Common unit patterns: ends with common unit abbreviations or contains unit-like patterns
+  // This is a heuristic to detect if units are already present
+  const unitPattern = /\s+[a-zA-Z\/%°]+$/;
+  return unitPattern.test(trimmedRange);
+}
+
+/**
+ * Formats a reference range with units for display, avoiding duplicate units.
+ * @param range The formatted range string (may or may not include units)
+ * @param units The units string to append if not already present
+ * @returns Formatted string with range and units (e.g., "0 – 50 U/L")
+ */
+export function formatRangeWithUnits(range: string | undefined, units: string | undefined): string {
+  const trimmedRange = range?.trim() || '';
+  const trimmedUnits = units?.trim() || '';
+
+  // If range is empty, return '--' (even if units exist, we need a range to display)
+  if (!trimmedRange) {
+    return '--';
+  }
+
+  // Check if range already includes the specific units parameter
+  const hasSpecificUnits = rangeAlreadyHasUnits(trimmedRange, trimmedUnits);
+  if (hasSpecificUnits) {
+    return trimmedRange;
+  }
+
+  // Check if range already has any units (even if different from parameter)
+  // This prevents appending units when range already has different units (e.g., "0 – 50 mg/dL" with "U/L" parameter)
+  const hasAnyUnits = rangeHasAnyUnits(trimmedRange);
+  if (hasAnyUnits) {
+    return trimmedRange;
+  }
+
+  // Append units if not already present
+  return trimmedUnits ? `${trimmedRange} ${trimmedUnits}` : trimmedRange;
+}
+
 /**
  * Finds the most recent observation that has reference range data.
  */

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

@@ -9,8 +9,8 @@ import type {
   NewRowStartCellProps,
   TimelineDataGroupProps,
 } from './grouped-timeline-types';
+import { getMostRecentObservationWithRange, formatRangeWithUnits } from './reference-range-helpers';
 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']} />;
@@ -131,6 +131,8 @@ const NewRowStartCell: React.FC<NewRowStartCellProps> = ({
     });
   }, [patientUuid, conceptUuid, title]);
 
+  const rangeUnitsDisplay = formatRangeWithUnits(range, units);
+
   return (
     <div
       className={styles.rowStartCell}
@@ -147,9 +149,7 @@ const NewRowStartCell: React.FC<NewRowStartCellProps> = ({
           <span className={styles.trendlineLink}>{title}</span>
         )}
       </span>
-      <span className={styles.rangeUnits}>
-        {range} {units}
-      </span>
+      <span className={styles.rangeUnits}>{rangeUnitsDisplay}</span>
     </div>
   );
 };