@openmrs/esm-patient-vitals-app 9.2.3-pre.7474 → 9.2.3-pre.7482

package/src/vitals/types.ts

@@ -1,13 +1,18 @@
-import { type PatientVitalsAndBiometrics } from '../common';
+import { type PatientVitalsAndBiometrics, type ObservationInterpretation } from '../common';
 
 export interface VitalsTableRow extends PatientVitalsAndBiometrics {
   id: string;
   dateRender: string;
   bloodPressureRender: string;
+  bloodPressureRenderInterpretation?: ObservationInterpretation;
   pulseRender: string | number;
+  pulseRenderInterpretation?: ObservationInterpretation;
   spo2Render: string | number;
+  spo2RenderInterpretation?: ObservationInterpretation;
   temperatureRender: string | number;
+  temperatureRenderInterpretation?: ObservationInterpretation;
   respiratoryRateRender: string | number;
+  respiratoryRateRenderInterpretation?: ObservationInterpretation;
 }
 
 export interface VitalsTableHeader {

package/src/vitals/vitals-overview.component.tsx

@@ -15,14 +15,13 @@ import {
   useLayoutType,
 } from '@openmrs/esm-framework';
 import type { ConfigObject } from '../config-schema';
-import { useLaunchVitalsAndBiometricsForm } from '../utils';
-import { useVitalsAndBiometrics, useVitalsConceptMetadata, withUnit } from '../common';
 import type { VitalsTableHeader, VitalsTableRow } from './types';
+import { useLaunchVitalsAndBiometricsForm } from '../utils';
+import { useVitalsAndBiometrics, useConceptUnits, withUnit } from '../common';
 import PaginatedVitals from './paginated-vitals.component';
 import PrintComponent from './print/print.component';
 import VitalsChart from './vitals-chart.component';
 import styles from './vitals-overview.scss';
-import { useEncounterVitalsAndBiometrics } from '../common/data.resource';
 
 interface VitalsOverviewProps {
   patientUuid: string;
@@ -44,10 +43,9 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
 
   const { excludePatientIdentifierCodeTypes } = useConfig();
   const { data: vitals, error, isLoading, isValidating } = useVitalsAndBiometrics(patientUuid);
-  const { data: conceptUnits } = useVitalsConceptMetadata();
+  const { conceptUnits } = useConceptUnits();
   const showPrintButton = config.vitals.showPrintButton && !chartView;
 
-  useEncounterVitalsAndBiometrics('771bbc44-8d45-4ac3-af6e-059814dd7cde');
   const patientDetails = useMemo(() => {
     const getGender = (gender: string): string => {
       switch (gender) {
@@ -89,7 +87,6 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
       key: 'temperatureRender',
       header: withUnit(t('temperatureAbbreviated', 'Temp'), conceptUnits.get(config.concepts.temperatureUuid) ?? ''),
       isSortable: true,
-
       sortFunc: (valueA, valueB) =>
         valueA.temperature && valueB.temperature ? valueA.temperature - valueB.temperature : 0,
     },
@@ -100,7 +97,6 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
         conceptUnits.get(config.concepts.systolicBloodPressureUuid) ?? '',
       ),
       isSortable: true,
-
       sortFunc: (valueA, valueB) =>
         valueA.systolic && valueB.systolic && valueA.diastolic && valueB.diastolic
           ? valueA.systolic !== valueB.systolic
@@ -112,7 +108,6 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
       key: 'pulseRender',
       header: withUnit(t('pulse', 'Pulse'), conceptUnits.get(config.concepts.pulseUuid) ?? ''),
       isSortable: true,
-
       sortFunc: (valueA, valueB) => (valueA.pulse && valueB.pulse ? valueA.pulse - valueB.pulse : 0),
     },
     {
@@ -122,7 +117,6 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
         conceptUnits.get(config.concepts.respiratoryRateUuid) ?? '',
       ),
       isSortable: true,
-
       sortFunc: (valueA, valueB) =>
         valueA.respiratoryRate && valueB.respiratoryRate ? valueA.respiratoryRate - valueB.respiratoryRate : 0,
     },
@@ -130,7 +124,6 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
       key: 'spo2Render',
       header: withUnit(t('spo2', 'SpO2'), conceptUnits.get(config.concepts.oxygenSaturationUuid) ?? ''),
       isSortable: true,
-
       sortFunc: (valueA, valueB) => (valueA.spo2 && valueB.spo2 ? valueA.spo2 - valueB.spo2 : 0),
     },
   ];
@@ -142,10 +135,15 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
           ...vitalSigns,
           dateRender: formatDate(parseDate(vitalSigns.date.toString()), { mode: 'wide', time: true }),
           bloodPressureRender: `${vitalSigns.systolic ?? '--'} / ${vitalSigns.diastolic ?? '--'}`,
+          bloodPressureRenderInterpretation: vitalSigns.bloodPressureRenderInterpretation,
           pulseRender: vitalSigns.pulse ?? '--',
+          pulseRenderInterpretation: vitalSigns.pulseRenderInterpretation,
           spo2Render: vitalSigns.spo2 ?? '--',
+          spo2RenderInterpretation: vitalSigns.spo2RenderInterpretation,
           temperatureRender: vitalSigns.temperature ?? '--',
+          temperatureRenderInterpretation: vitalSigns.temperatureRenderInterpretation,
           respiratoryRateRender: vitalSigns.respiratoryRate ?? '--',
+          respiratoryRateRenderInterpretation: vitalSigns.respiratoryRateRenderInterpretation,
         };
       }),
     [vitals],
@@ -178,8 +176,14 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
   return (
     <>
       {(() => {
-        if (isLoading) return <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />;
-        if (error) return <ErrorState error={error} headerTitle={headerTitle} />;
+        if (isLoading) {
+          return <DataTableSkeleton role="progressbar" compact={!isTablet} zebra />;
+        }
+
+        if (error) {
+          return <ErrorState error={error} headerTitle={headerTitle} />;
+        }
+
         if (vitals?.length) {
           return (
             <div className={styles.widgetCard}>
@@ -232,11 +236,11 @@ const VitalsOverview: React.FC<VitalsOverviewProps> = ({ patientUuid, patient, p
                   <PrintComponent subheader={headerTitle} patientDetails={patientDetails} />
                   <PaginatedVitals
                     isPrinting={isPrinting}
-                    tableRows={tableRows}
                     pageSize={pageSize}
-                    urlLabel={urlLabel}
                     pageUrl={pageUrl}
                     tableHeaders={tableHeaders}
+                    tableRows={tableRows}
+                    urlLabel={urlLabel}
                   />
                 </div>
               )}

package/src/vitals/vitals-overview.test.tsx

@@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
 import { type ConfigObject, configSchema } from '../config-schema';
-import { formattedVitals, mockConceptMetadata, mockConceptUnits, mockVitalsConfig } from '__mocks__';
+import { formattedVitals, mockConceptUnits, mockVitalsConfig } from '__mocks__';
 import { mockPatient, renderWithSwr, waitForLoadingToFinish } from 'tools';
 import { useVitalsAndBiometrics } from '../common';
 import VitalsOverview from './vitals-overview.component';
@@ -40,9 +40,9 @@ jest.mock('../common', () => {
   return {
     ...originalModule,
     launchPatientWorkspace: jest.fn(),
-    useVitalsConceptMetadata: jest.fn().mockImplementation(() => ({
-      data: mockConceptUnits,
-      conceptMetadata: mockConceptMetadata,
+    useConceptUnits: jest.fn().mockImplementation(() => ({
+      conceptUnits: mockConceptUnits,
+      error: null,
       isLoading: false,
     })),
     useVitalsAndBiometrics: jest.fn(),

package/src/vitals-and-biometrics-header/vitals-header.component.tsx

@@ -14,6 +14,7 @@ import {
   assessValue,
   getReferenceRangesForConcept,
   interpretBloodPressure,
+  useConceptUnits,
   useVitalsAndBiometrics,
   useVitalsConceptMetadata,
 } from '../common';
@@ -34,8 +35,9 @@ interface VitalsHeaderProps {
 const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = false }) => {
   const { t } = useTranslation();
   const config = useConfig<ConfigObject>();
-  const { data: conceptUnits, conceptMetadata } = useVitalsConceptMetadata();
+  const { conceptUnits } = useConceptUnits();
   const { data: vitals, isLoading, isValidating } = useVitalsAndBiometrics(patientUuid, 'both');
+  const { conceptRanges } = useVitalsConceptMetadata(patientUuid);
   const latestVitals = vitals?.[0];
   const [showDetailsPanel, setShowDetailsPanel] = useState(false);
   const toggleDetailsPanel = () => setShowDetailsPanel(!showDetailsPanel);
@@ -59,7 +61,7 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = fa
     );
   }
 
-  if (latestVitals && Object.keys(latestVitals)?.length && conceptMetadata?.length) {
+  if (latestVitals && Object.keys(latestVitals)?.length && conceptRanges?.length) {
     const hasActiveVisit = Boolean(currentVisit?.uuid);
     const vitalsTakenToday = Boolean(dayjs(latestVitals?.date).isToday());
     const vitalsOverdue = hasActiveVisit && !vitalsTakenToday;
@@ -148,7 +150,7 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = fa
                 latestVitals?.systolic,
                 latestVitals?.diastolic,
                 config?.concepts,
-                conceptMetadata,
+                conceptRanges,
               )}
               unitName={t('bp', 'BP')}
               unitSymbol={(latestVitals?.systolic && conceptUnits.get(config.concepts.systolicBloodPressureUuid)) ?? ''}
@@ -157,7 +159,7 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = fa
             <VitalsHeaderItem
               interpretation={assessValue(
                 latestVitals?.pulse,
-                getReferenceRangesForConcept(config.concepts.pulseUuid, conceptMetadata),
+                getReferenceRangesForConcept(config.concepts.pulseUuid, conceptRanges),
               )}
               unitName={t('heartRate', 'Heart rate')}
               unitSymbol={(latestVitals?.pulse && conceptUnits.get(config.concepts.pulseUuid)) ?? ''}
@@ -166,7 +168,7 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = fa
             <VitalsHeaderItem
               interpretation={assessValue(
                 latestVitals?.respiratoryRate,
-                getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptMetadata),
+                getReferenceRangesForConcept(config.concepts.respiratoryRateUuid, conceptRanges),
               )}
               unitName={t('respiratoryRate', 'R. rate')}
               unitSymbol={
@@ -177,7 +179,7 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = fa
             <VitalsHeaderItem
               interpretation={assessValue(
                 latestVitals?.spo2,
-                getReferenceRangesForConcept(config.concepts.oxygenSaturationUuid, conceptMetadata),
+                getReferenceRangesForConcept(config.concepts.oxygenSaturationUuid, conceptRanges),
               )}
               unitName={t('spo2', 'SpO2')}
               unitSymbol={(latestVitals?.spo2 && conceptUnits.get(config.concepts.oxygenSaturationUuid)) ?? ''}
@@ -186,7 +188,7 @@ const VitalsHeader: React.FC<VitalsHeaderProps> = ({ patientUuid, hideLinks = fa
             <VitalsHeaderItem
               interpretation={assessValue(
                 latestVitals?.temperature,
-                getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptMetadata),
+                getReferenceRangesForConcept(config.concepts.temperatureUuid, conceptRanges),
               )}
               unitName={t('temperatureAbbreviated', 'Temp')}
               unitSymbol={(latestVitals?.temperature && conceptUnits.get(config.concepts.temperatureUuid)) ?? ''}

package/src/vitals-and-biometrics-header/vitals-header.test.tsx

@@ -5,10 +5,15 @@ import userEvent from '@testing-library/user-event';
 import { type WorkspacesInfo, getDefaultsFromConfigSchema, useConfig, useWorkspaces } from '@openmrs/esm-framework';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { mockPatient, getByTextWithMarkup, renderWithSwr, waitForLoadingToFinish } from 'tools';
-import { mockVitalsConfig, mockCurrentVisit, mockConceptUnits, mockConceptMetadata, formattedVitals } from '__mocks__';
+import {
+  formattedVitals,
+  mockConceptUnits,
+  mockCurrentVisit,
+  mockVitalsConceptMetadata,
+  mockVitalsConfig,
+} from '__mocks__';
 import { configSchema, type ConfigObject } from '../config-schema';
-import { patientVitalsBiometricsFormWorkspace } from '../constants';
-import { invalidateCachedVitalsAndBiometrics, useVitalsAndBiometrics } from '../common';
+import { useVitalsAndBiometrics } from '../common';
 import VitalsHeader from './vitals-header.component';
 
 const testProps = {
@@ -38,16 +43,17 @@ jest.mock('@openmrs/esm-patient-common-lib', () => {
   };
 });
 
-jest.mock('../common', () => {
-  const originalModule = jest.requireActual('../common');
+jest.mock('../common/data.resource', () => {
+  const originalModule = jest.requireActual('../common/data.resource');
 
   return {
     ...originalModule,
-    useVitalsConceptMetadata: jest.fn().mockImplementation(() => ({
-      data: mockConceptUnits,
-      conceptMetadata: mockConceptMetadata,
+    useConceptUnits: jest.fn().mockImplementation(() => ({
+      conceptUnits: mockConceptUnits,
+      error: null,
       isLoading: false,
     })),
+    useVitalsConceptMetadata: jest.fn().mockImplementation(() => mockVitalsConceptMetadata),
     useVitalsAndBiometrics: jest.fn(),
   };
 });
@@ -74,7 +80,20 @@ describe('VitalsHeader', () => {
 
   it('renders the most recently recorded values in the vitals header', async () => {
     mockUseVitalsAndBiometrics.mockReturnValue({
-      data: formattedVitals,
+      data: [
+        {
+          id: '0',
+          date: '2021-05-19T04:26:51.000Z',
+          pulse: 76,
+          temperature: 37,
+          respiratoryRate: 12,
+          diastolic: 89,
+          systolic: 121,
+          bmi: null,
+          muac: 23,
+          bloodPressureRenderInterpretation: 'normal',
+        },
+      ],
     } as ReturnType<typeof useVitalsAndBiometrics>);
 
     renderWithSwr(<VitalsHeader {...testProps} />);
@@ -134,8 +153,23 @@ describe('VitalsHeader', () => {
   });
 
   it('does not flag normal values that lie within the provided reference ranges', async () => {
+    const normalVitals = [
+      {
+        id: '0',
+        date: '2021-05-19T04:26:51.000Z',
+        pulse: 76,
+        temperature: 37,
+        respiratoryRate: 12,
+        diastolic: 75, // Within normal range (60-80)
+        systolic: 115, // Within normal range (90-120)
+        bmi: null,
+        muac: 23,
+        bloodPressureRenderInterpretation: 'normal',
+      },
+    ];
+
     mockUseVitalsAndBiometrics.mockReturnValue({
-      data: formattedVitals,
+      data: normalVitals,
     } as ReturnType<typeof useVitalsAndBiometrics>);
 
     renderWithSwr(<VitalsHeader {...testProps} />);

package/src/vitals-biometrics-form/vitals-biometrics-form.test.tsx

@@ -4,7 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { type FetchResponse, showSnackbar, useConfig, getDefaultsFromConfigSchema } from '@openmrs/esm-framework';
 import { createOrUpdateVitalsAndBiometrics, useEncounterVitalsAndBiometrics } from '../common';
 import { type ConfigObject, configSchema } from '../config-schema';
-import { mockConceptMetadata, mockConceptRanges, mockConceptUnits, mockVitalsConfig } from '__mocks__';
+import { mockConceptUnits, mockVitalsConceptMetadata, mockVitalsConfig } from '__mocks__';
 import { mockPatient } from 'tools';
 import VitalsAndBiometricsForm from './vitals-biometrics-form.workspace';
 
@@ -40,16 +40,17 @@ jest.mock('../common', () => ({
   invalidateCachedVitalsAndBiometrics: jest.fn(),
   createOrUpdateVitalsAndBiometrics: jest.fn(),
   useVitalsAndBiometrics: jest.fn(),
-  useVitalsConceptMetadata: jest.fn().mockImplementation(() => ({
-    data: mockConceptUnits,
-    conceptMetadata: mockConceptMetadata,
-    conceptRanges: mockConceptRanges,
+  useConceptUnits: jest.fn().mockImplementation(() => ({
+    conceptUnits: mockConceptUnits,
+    error: null,
+    isLoading: false,
   })),
   useEncounterVitalsAndBiometrics: jest.fn().mockImplementation(() => ({
     isLoading: false,
     vitalsAndBiometrics: null,
     mutate: jest.fn(),
   })),
+  useVitalsConceptMetadata: jest.fn().mockImplementation(() => mockVitalsConceptMetadata),
 }));
 
 mockUseConfig.mockReturnValue({
@@ -399,32 +400,4 @@ describe('VitalsBiometricsForm', () => {
       title: 'Error saving Vitals and Biometrics',
     });
   });
-
-  it('Display an inline error notification on submit if value of vitals entered is invalid', async () => {
-    const user = userEvent.setup();
-
-    render(<VitalsAndBiometricsForm {...testProps} />);
-
-    const systolic = screen.getByRole('spinbutton', { name: /systolic/i });
-    const pulse = screen.getByRole('spinbutton', { name: /pulse/i });
-    const oxygenSaturation = screen.getByRole('spinbutton', { name: /oxygen saturation/i });
-    const temperature = screen.getByRole('spinbutton', { name: /temperature/i });
-
-    await user.type(systolic, '1000');
-    await user.type(pulse, pulseValue.toString());
-    await user.type(oxygenSaturation, '200');
-    await user.type(temperature, temperatureValue.toString());
-
-    const saveButton = screen.getByRole('button', { name: /save and close/i });
-    await user.click(saveButton);
-
-    expect(screen.getByText(/Some of the values entered are invalid/i)).toBeInTheDocument();
-
-    // close the inline notification --> resubmit --> check for presence of inline notification
-    const closeInlineNotificationButton = screen.getByTitle(/close notification/i);
-    await user.click(closeInlineNotificationButton);
-    expect(screen.queryByText(/some of the values entered are invalid/i)).not.toBeInTheDocument();
-    await user.click(saveButton);
-    expect(screen.getByText(/Some of the values entered are invalid/i)).toBeInTheDocument();
-  });
 });