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

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 { formatRangeWithUnits } 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,14 @@ 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));
 
+        const referenceRangeDisplay = formatRangeWithUnits(displayRange, displayUnits);
+
         return {
           ...row,
           id: `${i}-${index}`,
@@ -106,10 +118,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],

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

@@ -21,10 +21,41 @@ describe('IndividualResultsTable', () => {
         units: 'copies/ml',
         flatName: 'HIV viral load-HIV viral load',
         hasData: true,
+        range: '0 – 50', // Node-level range
+        lowNormal: 0,
+        hiNormal: 50,
       },
     ],
   } as GroupedObservation;
 
+  const mockSubRowsWithObservationRange = {
+    key: 'Alkaline phosphatase',
+    date: '2024-10-15',
+    flatName: 'Alkaline phosphatase',
+    entries: [
+      {
+        obsDatetime: '2024-10-15 03:20:19.0',
+        value: '15',
+        interpretation: 'CRITICALLY_LOW',
+        key: 'Alkaline phosphatase',
+        datatype: 'Numeric',
+        lowAbsolute: 0,
+        display: 'Alkaline phosphatase',
+        conceptUuid: '785AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        units: 'U/L',
+        flatName: 'Alkaline phosphatase',
+        hasData: true,
+        range: '35 – 147', // Observation-level range (different from node-level)
+        lowNormal: 35,
+        hiNormal: 147,
+        lowCritical: 25,
+        hiCritical: 200,
+      },
+    ],
+    range: '0 – 270', // Node-level range (fallback)
+    units: 'U/L',
+  } as GroupedObservation;
+
   const mockEmptySubRows = {
     key: 'HIV viral load',
     date: '2024-10-15',
@@ -33,18 +64,49 @@ describe('IndividualResultsTable', () => {
   } as GroupedObservation;
 
   it('renders a loading skeleton when fetching results data', () => {
-    render(<IndividualResultsTable isLoading={true} subRows={mockEmptySubRows} index={0} title={'HIV viral load'} />);
+    render(
+      <IndividualResultsTable
+        patientUuid={'patient-uuid'}
+        isLoading={true}
+        subRows={mockEmptySubRows}
+        index={0}
+        title={'HIV viral load'}
+      />,
+    );
 
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
   it('renders a tabular overview of the available test result data', () => {
-    render(<IndividualResultsTable isLoading={false} subRows={mockSubRows} index={0} title={'HIV viral load'} />);
+    render(
+      <IndividualResultsTable
+        patientUuid={'patient-uuid'}
+        isLoading={false}
+        subRows={mockSubRows}
+        index={0}
+        title={'HIV viral load'}
+      />,
+    );
 
     expect(screen.getByRole('table')).toBeInTheDocument();
     expect(screen.getByText(/15-Oct-2024/i)).toBeInTheDocument();
     expect(screen.getByText(/test name/i)).toBeInTheDocument();
     expect(screen.getByText(/reference range/i)).toBeInTheDocument();
-    expect(screen.getByRole('row', { name: /hiv viral load 45 copies\/ml -- copies\/ml/i })).toBeInTheDocument();
+    expect(screen.getByRole('row', { name: /hiv viral load 45 copies\/ml 0 – 50 copies\/ml/i })).toBeInTheDocument();
+  });
+
+  it('uses observation-level range when available', () => {
+    render(
+      <IndividualResultsTable
+        patientUuid={'patient-uuid'}
+        isLoading={false}
+        subRows={mockSubRowsWithObservationRange}
+        index={0}
+        title={'Alkaline phosphatase'}
+      />,
+    );
+
+    // Should display observation-level range (35 – 147) not node-level (0 – 270)
+    expect(screen.getByRole('row', { name: /alkaline phosphatase 15 u\/l 35 – 147 u\/l/i })).toBeInTheDocument();
   });
 });

package/src/test-results/individual-results-table-tablet/helper.tsx

@@ -1,8 +1,14 @@
 import { type OBSERVATION_INTERPRETATION } from '@openmrs/esm-patient-common-lib';
-import { type Concept, type ConceptMeta, type FHIRObservationResource, observationInterpretation } from '../../types';
+import {
+  type Concept,
+  type ConceptMeta,
+  type FHIRObservationResource,
+  type ObsRecord,
+  observationInterpretation,
+} from '../../types';
 import styles from './lab-set-panel.scss';
 
-export const getConceptUuid = (obs: FHIRObservationResource) => obs?.code.coding[0].code;
+export const getConceptUuid = (obs: FHIRObservationResource | ObsRecord) => obs?.code.coding?.[0]?.code;
 
 export const getClass = (interpretation: OBSERVATION_INTERPRETATION) => {
   switch (interpretation) {

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

@@ -4,12 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { DataTableSkeleton, Button, Search, Form } from '@carbon/react';
 import { CloseIcon, SearchIcon, useLayoutType } from '@openmrs/esm-framework';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
-import { FilterEmptyState } from '../ui-elements/resetFiltersEmptyState/filter-empty-state.component';
-import type { GroupedObservation } from '../../types';
+import FilterContext from '../filter/filter-context';
+import FilterEmptyState from '../ui-elements/reset-filters-empty-state/filter-empty-state.component';
 import LabSetPanel from './lab-set-panel.component';
 import Overlay from '../tablet-overlay/tablet-overlay.component';
-import FilterContext from '../filter/filter-context';
 import TimelineDataGroup from '../grouped-timeline/timeline-data-group.component';
+import type { GroupedObservation } from '../../types';
 import styles from './individual-results-table-tablet.scss';
 
 interface IndividualResultsTableTabletProps {
@@ -233,7 +233,7 @@ const IndividualResultsTableTabletHeader: React.FC<IndividualResultsTableTabletH
           <Form onSubmit={handleSearchTerm} className={styles.flexBaseline}>
             <Search
               autoFocus
-              labelText=""
+              labelText={t('searchByTestName', 'Search by test name')}
               onChange={(e) => setLocalSearchTerm(e.target.value)}
               placeholder={t('searchByTestName', 'Search by test name')}
               size="sm"
@@ -263,7 +263,7 @@ const IndividualResultsTableTabletHeader: React.FC<IndividualResultsTableTabletH
             <Form onSubmit={handleSearchTerm} className={classNames(styles.flex)}>
               <Search
                 autoFocus
-                labelText=""
+                labelText={t('searchByTestName', 'Search by test name')}
                 onChange={(e) => setLocalSearchTerm(e.target.value)}
                 placeholder={t('searchByTestName', 'Search by test name')}
                 size="lg"

package/src/test-results/individual-results-table-tablet/lab-set-panel.component.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import { formatRangeWithUnits } from '../grouped-timeline/reference-range-helpers';
 import {
   DataTable,
   TableContainer,
@@ -70,7 +71,7 @@ const LabSetPanel: React.FC<LabSetPanelProps> = ({ panel, activePanel, setActive
       hasRange
         ? panel.entries.map((test) => {
             const units = test.units ?? '';
-            const range = test.range ? `${test.range} ${units}` : '--';
+            const range = formatRangeWithUnits(test.range, units);
             return {
               id: test.conceptUuid,
               testName: test.display,

package/src/test-results/individual-results-table-tablet/usePanelData.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWRInfinite from 'swr/infinite';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { extractMetaInformation, getConceptUuid } from './helper';
 import {
   type Concept,
@@ -159,32 +159,46 @@ export default function usePanelData(patientUuid: string) {
     [observations],
   );
 
-  const setObservations: Array<ObsRecord> = useMemo(
-    () =>
-      observations
-        ? observations
-            .filter((obs) => !!obs.hasMember)
-            .map((obs) => {
-              const relatedObs = [];
-              obs.hasMember.forEach((memb) => {
-                const membUuid = memb.reference.split('/')[1];
-                const memberObservationIndex = individualObservations.findIndex((obs) => obs.id === membUuid);
-                if (memberObservationIndex > -1) {
-                  relatedObs.push(individualObservations[memberObservationIndex]);
-                  individualObservations.splice(memberObservationIndex, 1);
-                }
-              });
-              return {
-                ...obs,
-                relatedObs,
-              };
-            })
-        : [],
-    [individualObservations, observations],
-  );
+  const setObservations: Array<ObsRecord> = useMemo(() => {
+    if (!observations) {
+      return [];
+    }
+
+    // Create a map of individual observations for efficient lookup
+    const individualObsMap = new Map(individualObservations.map((obs) => [obs.id, obs]));
+    const usedIndividualObsIds = new Set<string>();
+
+    return observations
+      .filter((obs) => !!obs.hasMember)
+      .map((obs) => {
+        const relatedObs: Array<ObsRecord> = [];
+        obs.hasMember.forEach((memb) => {
+          const membUuid = memb.reference.split('/')[1];
+          const memberObs = individualObsMap.get(membUuid);
+          if (memberObs && !usedIndividualObsIds.has(membUuid)) {
+            relatedObs.push(memberObs);
+            usedIndividualObsIds.add(membUuid);
+          }
+        });
+        return {
+          ...obs,
+          relatedObs,
+        };
+      });
+  }, [individualObservations, observations]);
+
+  const remainingIndividualObservations = useMemo(() => {
+    const usedIds = new Set<string>();
+    setObservations.forEach((setObs) => {
+      setObs.relatedObs.forEach((relatedObs) => {
+        usedIds.add(relatedObs.id);
+      });
+    });
+    return individualObservations.filter((obs) => !usedIds.has(obs.id));
+  }, [individualObservations, setObservations]);
 
   const panels = useMemo(() => {
-    const allPanels = [...individualObservations, ...setObservations].sort(
+    const allPanels = [...remainingIndividualObservations, ...setObservations].sort(
       (obs1, obs2) => Date.parse(obs2.effectiveDateTime) - Date.parse(obs1.effectiveDateTime),
     );
     const usedConcepts: Set<string> = new Set();
@@ -195,7 +209,7 @@ export default function usePanelData(patientUuid: string) {
       latestPanels.push(panel);
     });
     return latestPanels;
-  }, [individualObservations, setObservations]);
+  }, [remainingIndividualObservations, setObservations]);
 
   const panelsData = useMemo(
     () => ({