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

package/src/obs-switchable/obs-switchable.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { prettyDOM, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { LineChart } from '@carbon/charts-react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
@@ -15,19 +15,12 @@ const mockLineChart = jest.mocked(LineChart);
 
 const mockUseConfig = jest.mocked(useConfig);
 
+// Make sure this respects the sort order of useObs
 const mockObsData = [
   {
     code: { text: 'Height' },
     conceptUuid: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    dataType: 'Number',
-    effectiveDateTime: '2021-01-01T00:00:00Z',
-    valueQuantity: { value: 180 },
-    encounter: { reference: 'Encounter/123' },
-  },
-  {
-    code: { text: 'Height' },
-    conceptUuid: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    dataType: 'Number',
+    dataType: 'Numeric',
     effectiveDateTime: '2021-02-01T00:00:00Z',
     valueQuantity: { value: 182 },
     encounter: { reference: 'Encounter/234' },
@@ -35,18 +28,26 @@ const mockObsData = [
   {
     code: { text: 'Weight' },
     conceptUuid: '2154AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    dataType: 'Number',
+    dataType: 'Numeric',
+    effectiveDateTime: '2021-02-01T00:00:00Z',
+    valueQuantity: { value: 72 },
+    encounter: { reference: 'Encounter/234' },
+  },
+  {
+    code: { text: 'Height' },
+    conceptUuid: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+    dataType: 'Numeric',
     effectiveDateTime: '2021-01-01T00:00:00Z',
-    valueQuantity: { value: 70 },
+    valueQuantity: { value: 180 },
     encounter: { reference: 'Encounter/123' },
   },
   {
     code: { text: 'Weight' },
     conceptUuid: '2154AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    dataType: 'Number',
-    effectiveDateTime: '2021-02-01T00:00:00Z',
-    valueQuantity: { value: 72 },
-    encounter: { reference: 'Encounter/234' },
+    dataType: 'Numeric',
+    effectiveDateTime: '2021-01-01T00:00:00Z',
+    valueQuantity: { value: 70 },
+    encounter: { reference: 'Encounter/123' },
   },
   {
     code: { text: 'Chief Complaint' },
@@ -59,22 +60,35 @@ const mockObsData = [
   {
     code: { text: 'Power Level' },
     conceptUuid: '164163AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
-    dataType: 'Number',
+    dataType: 'Numeric',
     effectiveDateTime: '2021-01-01T00:00:00Z',
     valueQuantity: { value: 9001 },
     encounter: { reference: 'Encounter/123' },
   },
 ];
 
+const mockConceptData = [
+  { uuid: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Height', dataType: 'Numeric' },
+  { uuid: '2154AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Weight', dataType: 'Numeric' },
+  { uuid: '164162AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Chief Complaint', dataType: 'Text' },
+  { uuid: '164163AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Power Level', dataType: 'Numeric' },
+];
+
+const mockEncounters = [
+  { reference: 'Encounter/123', display: 'Outpatient Visit', encounterTypeUuid: 'encounter-type-uuid-1' },
+  { reference: 'Encounter/234', display: 'Outpatient Visit', encounterTypeUuid: 'encounter-type-uuid-1' },
+];
+
 const mockUseObs = jest.mocked(useObs);
 
 describe('ObsSwitchable', () => {
   it('should render all obs in table and numeric obs in graph', async () => {
     mockUseObs.mockReturnValue({
-      data: mockObsData as Array<ObsResult>,
+      data: { observations: mockObsData as Array<ObsResult>, concepts: mockConceptData, encounters: mockEncounters },
       error: null,
       isLoading: false,
       isValidating: false,
+      mutate: jest.fn(),
     });
     mockUseConfig.mockReturnValue({
       ...(getDefaultsFromConfigSchema(configSchemaSwitchable) as Object),
@@ -102,15 +116,17 @@ describe('ObsSwitchable', () => {
     expect(headerRow).toHaveTextContent('Chief Complaint');
     expect(headerRow).toHaveTextContent('Power Level');
     const firstRow = screen.getAllByRole('row')[1];
-    expect(firstRow).toHaveTextContent('180');
-    expect(firstRow).toHaveTextContent('70');
-    expect(firstRow).toHaveTextContent('Too strong');
-    expect(firstRow).toHaveTextContent('9001');
+    expect(firstRow).toHaveTextContent('Feb');
+    expect(firstRow).toHaveTextContent('182');
+    expect(firstRow).toHaveTextContent('72');
+    expect(firstRow).toHaveTextContent('--');
+    expect(firstRow).toHaveTextContent('--');
     const secondRow = screen.getAllByRole('row')[2];
-    expect(secondRow).toHaveTextContent('182');
-    expect(secondRow).toHaveTextContent('72');
-    expect(secondRow).toHaveTextContent('--');
-    expect(secondRow).toHaveTextContent('--');
+    expect(secondRow).toHaveTextContent('Jan');
+    expect(secondRow).toHaveTextContent('180');
+    expect(secondRow).toHaveTextContent('70');
+    expect(secondRow).toHaveTextContent('Too strong');
+    expect(secondRow).toHaveTextContent('9001');
 
     const user = userEvent.setup();
     const chartViewButton = screen.getByLabelText('Chart view');
@@ -122,13 +138,14 @@ describe('ObsSwitchable', () => {
     expect(tabs).toHaveTextContent('Weight');
     expect(tabs).not.toHaveTextContent('Chief Complaint');
     expect(tabs).toHaveTextContent('Power Level');
+    expect(tabs).not.toHaveTextContent('Mystery Concept');
 
     expect(mockLineChart).toHaveBeenNthCalledWith(
       1,
       expect.objectContaining({
         data: [
-          { group: 'Tallitude', key: '01-Jan-2021', value: 180 },
-          { group: 'Tallitude', key: '01-Feb-2021', value: 182 },
+          { group: 'Tallitude', key: new Date('2021-02-01T00:00:00.000Z'), value: 182 },
+          { group: 'Tallitude', key: new Date('2021-01-01T00:00:00.000Z'), value: 180 },
         ],
         options: expect.any(Object),
       }),
@@ -139,8 +156,8 @@ describe('ObsSwitchable', () => {
       2,
       expect.objectContaining({
         data: [
-          { group: 'Weight', key: '01-Jan-2021', value: 70 },
-          { group: 'Weight', key: '01-Feb-2021', value: 72 },
+          { group: 'Weight', key: new Date('2021-02-01T00:00:00.000Z'), value: 72 },
+          { group: 'Weight', key: new Date('2021-01-01T00:00:00.000Z'), value: 70 },
         ],
         options: expect.any(Object),
       }),
@@ -158,19 +175,97 @@ describe('ObsSwitchable', () => {
     expect(mockLineChart).toHaveBeenNthCalledWith(
       3,
       expect.objectContaining({
-        data: [{ group: 'Power Level', key: '01-Jan-2021', value: 9001 }],
+        data: [{ group: 'Power Level', key: new Date('2021-01-01T00:00:00.000Z'), value: 9001 }],
         options: expect.any(Object),
       }),
       {},
     );
   });
 
+  it('should sort by date and by obs correctly', async () => {
+    mockUseObs.mockReturnValue({
+      data: { observations: mockObsData as Array<ObsResult>, concepts: mockConceptData, encounters: mockEncounters },
+      error: null,
+      isLoading: false,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+    mockUseConfig.mockReturnValue({
+      ...(getDefaultsFromConfigSchema(configSchemaSwitchable) as Object),
+      title: 'My Stats',
+      data: [
+        {
+          concept: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          label: 'Tallitude',
+        },
+        {
+          concept: '2154AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        },
+        { concept: '164162AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' },
+        { concept: '164163AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' },
+      ],
+    });
+
+    render(<ObsSwitchable patientUuid="123" />);
+
+    const user = userEvent.setup();
+
+    const firstRowInitial = screen.getAllByRole('row')[1];
+    expect(firstRowInitial).toHaveTextContent('01 — Feb — 2021');
+    const secondRowInitial = screen.getAllByRole('row')[2];
+    expect(secondRowInitial).toHaveTextContent('01 — Jan — 2021');
+
+    const dateHeader = screen.getByText('Date and time');
+    await user.click(dateHeader);
+
+    const firstRow = screen.getAllByRole('row')[1];
+    expect(firstRow).toHaveTextContent('01 — Feb — 2021');
+    const secondRow = screen.getAllByRole('row')[2];
+    expect(secondRow).toHaveTextContent('01 — Jan — 2021');
+
+    await user.click(dateHeader);
+    const firstRow2 = screen.getAllByRole('row')[1];
+    expect(firstRow2).toHaveTextContent('01 — Jan — 2021');
+    const secondRow2 = screen.getAllByRole('row')[2];
+    expect(secondRow2).toHaveTextContent('01 — Feb — 2021');
+  });
+
+  it('supports table sorting oldest to newest', async () => {
+    mockUseObs.mockReturnValue({
+      data: { observations: mockObsData as Array<ObsResult>, concepts: mockConceptData, encounters: mockEncounters },
+      error: null,
+      isLoading: false,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    mockUseConfig.mockReturnValue({
+      ...(getDefaultsFromConfigSchema(configSchemaSwitchable) as Object),
+      title: 'My Stats',
+      data: [{ concept: '5090AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' }, { concept: '2154AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' }],
+      tableSortOldestFirst: true,
+    });
+
+    render(<ObsSwitchable patientUuid="123" />);
+
+    const user = userEvent.setup();
+
+    const dateHeader = screen.getByText('Date and time');
+    await user.click(dateHeader);
+
+    const firstRow = screen.getAllByRole('row')[1];
+    expect(firstRow).toHaveTextContent('01 — Jan — 2021');
+    const secondRow = screen.getAllByRole('row')[2];
+    expect(secondRow).toHaveTextContent('01 — Feb — 2021');
+  });
+
   it('should support showing graph tab by default', async () => {
     mockUseObs.mockReturnValue({
-      data: mockObsData as Array<ObsResult>,
+      data: { observations: mockObsData as Array<ObsResult>, concepts: mockConceptData, encounters: mockEncounters },
       error: null,
       isLoading: false,
       isValidating: false,
+      mutate: jest.fn(),
     });
     mockUseConfig.mockReturnValue({
       ...(getDefaultsFromConfigSchema(configSchemaSwitchable) as Object),
@@ -189,8 +284,8 @@ describe('ObsSwitchable', () => {
       1,
       expect.objectContaining({
         data: [
-          { group: 'Height', key: '01-Jan-2021', value: 180 },
-          { group: 'Height', key: '01-Feb-2021', value: 182 },
+          { group: 'Height', key: new Date('2021-02-01T00:00:00.000Z'), value: 182 },
+          { group: 'Height', key: new Date('2021-01-01T00:00:00.000Z'), value: 180 },
         ],
         options: expect.any(Object),
       }),
@@ -200,10 +295,11 @@ describe('ObsSwitchable', () => {
 
   it('should support grouping into multiline graphs', async () => {
     mockUseObs.mockReturnValue({
-      data: mockObsData as Array<ObsResult>,
+      data: { observations: mockObsData as Array<ObsResult>, concepts: mockConceptData, encounters: mockEncounters },
       error: null,
       isLoading: false,
       isValidating: false,
+      mutate: jest.fn(),
     });
     mockUseConfig.mockReturnValue({
       ...(getDefaultsFromConfigSchema(configSchemaSwitchable) as Object),
@@ -225,7 +321,7 @@ describe('ObsSwitchable', () => {
     expect(mockLineChart).toHaveBeenNthCalledWith(
       1,
       expect.objectContaining({
-        data: [{ group: 'Power Level', key: '01-Jan-2021', value: 9001 }],
+        data: [{ group: 'Power Level', key: new Date('2021-01-01T00:00:00.000Z'), value: 9001 }],
         options: expect.any(Object),
       }),
       {},
@@ -235,10 +331,10 @@ describe('ObsSwitchable', () => {
       2,
       expect.objectContaining({
         data: [
-          { group: 'Height', key: '01-Jan-2021', value: 180 },
-          { group: 'Height', key: '01-Feb-2021', value: 182 },
-          { group: 'Weight', key: '01-Jan-2021', value: 70 },
-          { group: 'Weight', key: '01-Feb-2021', value: 72 },
+          { group: 'Height', key: new Date('2021-02-01T00:00:00.000Z'), value: 182 },
+          { group: 'Height', key: new Date('2021-01-01T00:00:00.000Z'), value: 180 },
+          { group: 'Weight', key: new Date('2021-02-01T00:00:00.000Z'), value: 72 },
+          { group: 'Weight', key: new Date('2021-01-01T00:00:00.000Z'), value: 70 },
         ],
         options: expect.any(Object),
       }),
@@ -248,10 +344,17 @@ describe('ObsSwitchable', () => {
 
   it('should hide the graph tab selection if there is only one graph', async () => {
     mockUseObs.mockReturnValue({
-      data: mockObsData.filter((o) => o.conceptUuid === '164163AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA') as Array<ObsResult>,
+      data: {
+        observations: mockObsData.filter(
+          (o) => o.conceptUuid === '164163AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        ) as Array<ObsResult>,
+        concepts: mockConceptData,
+        encounters: mockEncounters,
+      },
       error: null,
       isLoading: false,
       isValidating: false,
+      mutate: jest.fn(),
     });
     mockUseConfig.mockReturnValue({
       ...(getDefaultsFromConfigSchema(configSchemaSwitchable) as Object),
@@ -266,7 +369,7 @@ describe('ObsSwitchable', () => {
 
     expect(mockLineChart).toHaveBeenCalledWith(
       expect.objectContaining({
-        data: [{ group: 'Power Level', key: '01-Jan-2021', value: 9001 }],
+        data: [{ group: 'Power Level', key: new Date('2021-01-01T00:00:00.000Z'), value: 9001 }],
         options: expect.any(Object),
       }),
       {},

package/src/obs-table/obs-table.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo, useState, useCallback } from 'react';
 import {
   DataTable,
   Table,
@@ -8,6 +8,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  type DataTableSortState,
 } from '@carbon/react';
 import { usePagination, useConfig, formatDatetime, formatDate, formatTime } from '@openmrs/esm-framework';
 import { PatientChartPagination } from '@openmrs/esm-patient-common-lib';
@@ -20,33 +21,77 @@ interface ObsTableProps {
   patientUuid: string;
 }
 
+interface Row {
+  id: string;
+  date: string;
+  rawDate: string;
+  encounter: string;
+  [conceptUuid: string]: string | number;
+}
+
+interface Header {
+  key: string;
+  header: string;
+  sortFunc: (rowA: Row, rowB: Row) => number;
+}
+
 const ObsTable: React.FC<ObsTableProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const config = useConfig<ConfigObjectSwitchable>();
-  const { data: obss } = useObs(patientUuid, config.showEncounterType);
-  const uniqueEncounterReferences = [...new Set(obss.map((o) => o.encounter.reference))].sort();
+  const {
+    data: { observations, concepts },
+  } = useObs(patientUuid);
+
+  const uniqueEncounterReferences = [...new Set(observations.map((o) => o.encounter.reference))].sort();
   const obssGroupedByEncounters = uniqueEncounterReferences.map((reference) =>
-    obss.filter((o) => o.encounter.reference === reference),
+    observations.filter((o) => o.encounter.reference === reference),
   );
 
-  const tableHeaders = [
-    { key: 'date', header: t('dateAndTime', 'Date and time'), isSortable: true },
-    ...config.data.map(({ concept, label }) => ({
-      key: concept,
-      header: label || obss.find((o) => o.conceptUuid == concept)?.code.text,
-    })),
-  ];
-
-  if (config.showEncounterType) {
-    tableHeaders.splice(1, 0, { key: 'encounter', header: t('encounterType', 'Encounter type'), isSortable: true });
-  }
+  const tableHeaders: Array<Header> = useMemo(() => {
+    const headers: Array<Header> = [
+      {
+        key: 'date',
+        header: t('dateAndTime', 'Date and time'),
+        sortFunc: (rowA: Row, rowB: Row) => new Date(rowB.rawDate).getTime() - new Date(rowA.rawDate).getTime(),
+      },
+    ];
+    if (config.showEncounterType) {
+      headers.splice(1, 0, {
+        key: 'encounter',
+        header: t('encounterType', 'Encounter type'),
+        sortFunc: (rowA: Row, rowB: Row) => rowA.encounter.localeCompare(rowB.encounter) as 1 | -1,
+      });
+    }
+    headers.push(
+      ...config.data.map(({ concept, label }) => ({
+        key: concept,
+        header: label || concepts.find((c) => c.uuid == concept)?.display,
+        sortFunc: (rowA: Row, rowB: Row) => {
+          const a = rowA[concept];
+          const b = rowB[concept];
+          if (a === b) {
+            return 0;
+          }
+          if (a == null) {
+            return 1;
+          }
+          if (b == null) {
+            return -1;
+          }
+          return a < b ? 1 : -1;
+        },
+      })),
+    );
+    return headers;
+  }, [t, config.data, config.showEncounterType, concepts]);
 
-  const tableRows = React.useMemo(
+  const tableRows: Array<Row> = React.useMemo(
     () =>
       obssGroupedByEncounters?.map((obss, index) => {
         const rowData = {
           id: `${index}`,
           date: formatDatetime(new Date(obss[0].effectiveDateTime), { mode: 'wide' }),
+          rawDate: obss[0].effectiveDateTime,
           encounter: obss[0].encounter.name,
         };
 
@@ -56,7 +101,7 @@ const ObsTable: React.FC<ObsTableProps> = ({ patientUuid }) => {
               rowData[obs.conceptUuid] = obs.valueString;
               break;
 
-            case 'Number': {
+            case 'Numeric': {
               const decimalPlaces: number | undefined = config.data.find(
                 (ele: any) => ele.concept === obs.conceptUuid,
               )?.decimalPlaces;
@@ -98,11 +143,50 @@ const ObsTable: React.FC<ObsTableProps> = ({ patientUuid }) => {
     [config.data, config?.dateFormat, obssGroupedByEncounters],
   );
 
-  const { results, goTo, currentPage } = usePagination(tableRows, config.table.pageSize);
+  const [sortParams, setSortParams] = useState<{ key: string; sortDirection: 'ASC' | 'DESC' | 'NONE' }>({
+    key: 'date',
+    sortDirection: config.tableSortOldestFirst ? 'ASC' : 'DESC',
+  });
+
+  const handleSorting = useCallback(
+    (cellA: any, cellB: any, { key, sortDirection }: { key: string; sortDirection: DataTableSortState }) => {
+      // Use setTimeout to avoid setState during render
+      setTimeout(() => {
+        if (sortDirection === 'NONE') {
+          setSortParams({ key: '', sortDirection });
+        } else {
+          setSortParams({ key, sortDirection });
+        }
+      }, 0);
+      return 0;
+    },
+    [],
+  );
+
+  const sortedData: Array<any> = useMemo(() => {
+    if (sortParams.sortDirection === 'NONE') {
+      return tableRows;
+    }
+
+    const header = tableHeaders.find((header) => header.key === sortParams.key);
+
+    if (!header) {
+      return tableRows;
+    }
+
+    const sortedRows = tableRows.slice().sort((rowA, rowB) => {
+      const sortingNum = header.sortFunc(rowA, rowB);
+      return sortParams.sortDirection === 'DESC' ? sortingNum : -sortingNum;
+    });
+
+    return sortedRows;
+  }, [tableHeaders, tableRows, sortParams]);
+
+  const { results, goTo, currentPage } = usePagination(sortedData, config.table.pageSize);
 
   return (
     <div>
-      <DataTable rows={results} headers={tableHeaders} isSortable size="sm" useZebraStyles>
+      <DataTable rows={results} headers={tableHeaders} isSortable sortRow={handleSorting} size="sm" useZebraStyles>
         {({ rows, headers, getHeaderProps, getTableProps }) => (
           <TableContainer>
             <Table {...getTableProps()} className={styles.customRow}>
@@ -135,7 +219,7 @@ const ObsTable: React.FC<ObsTableProps> = ({ patientUuid }) => {
       </DataTable>
       <PatientChartPagination
         pageNumber={currentPage}
-        totalItems={tableRows.length}
+        totalItems={sortedData.length}
         currentItems={results.length}
         pageSize={config.table.pageSize}
         onPageNumberChange={({ page }) => goTo(page)}