@openmrs/esm-patient-tests-app 11.3.1-pre.9435 → 11.3.1-pre.9439

package/src/test-results/loadPatientTestData/helpers.ts

@@ -39,7 +39,7 @@ export function addUserDataToCache(patientUuid: string, data: PatientData, indic
   }
 }
 
-async function getLatestObsUuid(patientUuid: string): Promise<string> {
+async function getLatestObsUuid(patientUuid: string): Promise<string | undefined> {
   const request = fhirObservationRequests({
     patient: patientUuid,
     category: 'laboratory',
@@ -61,12 +61,13 @@ async function getLatestObsUuid(patientUuid: string): Promise<string> {
  * @param { string } indicator UUID of the newest observation
  */
 export function getUserDataFromCache(patientUuid: string): [PatientData | undefined, Promise<boolean>] {
-  const [data] = patientResultsDataCache[patientUuid] || [];
+  const cacheEntry = patientResultsDataCache[patientUuid];
+  const [data, , indicator] = cacheEntry || [];
 
   return [
     data,
-    !!data
-      ? getLatestObsUuid(patientUuid).then((obsUuid) => obsUuid !== patientResultsDataCache?.[patientUuid]?.[2])
+    !!data && indicator
+      ? getLatestObsUuid(patientUuid).then((obsUuid) => obsUuid !== indicator)
       : Promise.resolve(true),
   ];
 }
@@ -109,31 +110,47 @@ export const loadObsEntries = async (patientUuid: string): Promise<Array<ObsReco
 
   let responses = await Promise.all(retrieveFromIterator(requests, CHUNK_PREFETCH_COUNT));
 
-  const total = responses[0].total;
+  const total = responses[0]?.total ?? 0;
 
   if (total > CHUNK_PREFETCH_COUNT * PAGE_SIZE) {
     const missingRequestsCount = Math.ceil(total / PAGE_SIZE) - CHUNK_PREFETCH_COUNT;
     responses = [...responses, ...(await Promise.all(retrieveFromIterator(requests, missingRequestsCount)))];
   }
 
-  return responses.slice(0, Math.ceil(total / PAGE_SIZE)).flatMap((res) => res.entry.map((e) => e.resource));
+  return responses.slice(0, Math.ceil(total / PAGE_SIZE)).flatMap((res) => res?.entry?.map((e) => e.resource) ?? []);
 };
 
-export const getEntryConceptClassUuid = (entry) => entry.code.coding[0].code;
+export const getEntryConceptClassUuid = (entry: ObsRecord | FHIRObservationResource): string =>
+  entry?.code?.coding?.[0]?.code ?? '';
 
 const conceptCache: Record<ConceptUuid, Promise<ConceptRecord>> = {};
 /**
  * fetch all concepts for all given observation entries
  */
 export function loadPresentConcepts(entries: Array<ObsRecord>): Promise<Array<ConceptRecord>> {
-  return Promise.all(
-    [...new Set(entries.map(getEntryConceptClassUuid))].map(
+  const conceptUuids = [...new Set(entries.map(getEntryConceptClassUuid).filter(Boolean))];
+
+  return Promise.allSettled(
+    conceptUuids.map(
       (conceptUuid) =>
         conceptCache[conceptUuid] ||
-        (conceptCache[conceptUuid] = fetch(`${window.openmrsBase}${restBaseUrl}/concept/${conceptUuid}?v=full`).then(
-          (res) => res.json(),
-        )),
+        (conceptCache[conceptUuid] = fetch(`${window.openmrsBase}${restBaseUrl}/concept/${conceptUuid}?v=full`)
+          .then((res) => {
+            if (!res.ok) {
+              throw new Error(`Failed to fetch concept ${conceptUuid}: ${res.statusText}`);
+            }
+            return res.json();
+          })
+          .catch((error) => {
+            // Remove failed promise from cache so it can be retried
+            delete conceptCache[conceptUuid];
+            throw error;
+          })),
     ),
+  ).then((results) =>
+    results
+      .filter((result): result is PromiseFulfilledResult<ConceptRecord> => result.status === 'fulfilled')
+      .map((result) => result.value),
   );
 }
 

package/src/test-results/loadPatientTestData/usePatientResultsData.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { type PatientData } from '@openmrs/esm-patient-common-lib';
 import loadPatientData from './loadPatientData';
 
@@ -14,18 +14,29 @@ const usePatientResultsData = (patientUuid: string): LoadingState => {
     loaded: false,
     error: undefined,
   });
+  const isMountedRef = useRef(true);
 
   useEffect(() => {
-    let unmounted = false;
+    isMountedRef.current = true;
     if (patientUuid) {
       const [data, reloadedDataPromise] = loadPatientData(patientUuid);
-      if (!!data) setState({ sortedObs: data, loaded: true, error: undefined });
-      reloadedDataPromise.then((reloadedData) => {
-        if (reloadedData !== data && !unmounted) setState({ sortedObs: reloadedData, loaded: true, error: undefined });
-      });
+      if (!!data && isMountedRef.current) {
+        setState({ sortedObs: data, loaded: true, error: undefined });
+      }
+      reloadedDataPromise
+        .then((reloadedData) => {
+          if (reloadedData !== data && isMountedRef.current) {
+            setState({ sortedObs: reloadedData, loaded: true, error: undefined });
+          }
+        })
+        .catch((error) => {
+          if (isMountedRef.current) {
+            setState({ sortedObs: {}, loaded: true, error });
+          }
+        });
     }
     return () => {
-      unmounted = true;
+      isMountedRef.current = false;
     };
   }, [patientUuid]);
 

package/src/test-results/overview/external-overview.extension.tsx

@@ -37,7 +37,6 @@ function getFilteredOverviewData(sortedObs: PatientData, filter) {
 
 function useFilteredOverviewData(patientUuid: string, filter: (filterProps: PanelFilterProps) => boolean = () => true) {
   const { sortedObs, loaded, error } = usePatientResultsData(patientUuid);
-
   const overviewData = useMemo(() => getFilteredOverviewData(sortedObs, filter), [filter, sortedObs]);
 
   return { overviewData, loaded, error };
@@ -46,8 +45,8 @@ function useFilteredOverviewData(patientUuid: string, filter: (filterProps: Pane
 const ExternalOverview: React.FC<ExternalOverviewProps> = ({ patientUuid, filter }) => {
   const { t } = useTranslation();
   const { overviewData, loaded } = useFilteredOverviewData(patientUuid, filter);
-
   const cardTitle = t('recentResults', 'Recent Results');
+
   const handleSeeAll = useCallback(() => {
     navigate({ to: `\${openmrsSpaBase}/patient/${patientUuid}/chart/Results` });
   }, [patientUuid]);

package/src/test-results/print-modal/print-modal.extension.tsx

@@ -87,7 +87,7 @@ function PrintModal({
 
     const identifiers =
       patient?.identifier?.filter(
-        (identifier) => !excludePatientIdentifierCodeTypes?.uuids.includes(identifier.type.coding[0].code),
+        (identifier) => !excludePatientIdentifierCodeTypes?.uuids.includes(identifier.type?.coding?.[0]?.code),
       ) ?? [];
 
     return {

package/src/test-results/results-viewer/results-viewer.extension.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import type { TFunction } from 'i18next';
-import { ContentSwitcher, Switch, Button } from '@carbon/react';
+import { ContentSwitcher, Switch, Button, DataTableSkeleton } from '@carbon/react';
 import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
 import { RenewIcon, useConfig, useLayoutType } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../../config-schema';
@@ -36,9 +36,13 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = ({ basePath, patientUu
     return <ErrorState error={error} headerTitle={t('dataLoadError', 'Data Load Error')} />;
   }
 
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
   if (roots?.length) {
     return (
-      <FilterProvider roots={!isLoading ? (roots as Roots) : []} isLoading={isLoading}>
+      <FilterProvider roots={roots as Roots} isLoading={isLoading}>
         <ResultsViewer patientUuid={patientUuid} basePath={basePath} />
       </FilterProvider>
     );
@@ -47,7 +51,7 @@ const RoutedResultsViewer: React.FC<ResultsViewerProps> = ({ basePath, patientUu
   return (
     <EmptyState
       headerTitle={t('testResults_title', 'Test Results')}
-      displayText={t('testResultsData', 'Test results data')}
+      displayText={t('testResultsData', 'test results data')}
     />
   );
 };

package/src/test-results/tree-view/tree-view.component.tsx

@@ -99,11 +99,16 @@ const TreeView: React.FC<TreeViewProps> = ({ patientUuid, expanded, view }) => {
     return <ErrorState error={error} headerTitle={t('dataLoadError', 'Data Load Error')} />;
   }
 
+  // Don't show empty state while loading - wait for data to finish loading
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
   if (!roots || roots.length === 0) {
     return (
       <EmptyState
         headerTitle={t('testResults_title', 'Test Results')}
-        displayText={t('testResultsData', 'Test results data')}
+        displayText={t('testResultsData', 'test results data')}
       />
     );
   }
@@ -165,13 +170,21 @@ const TreeView: React.FC<TreeViewProps> = ({ patientUuid, expanded, view }) => {
         {isLoading ? (
           <DataTableSkeleton />
         ) : view === 'individual-test' ? (
-          <div className={styles.panelViewTimeline}>
+          tableData && tableData.length > 0 ? (
+            <div className={styles.panelViewTimeline}>
+              <GroupedPanelsTables
+                patientUuid={patientUuid}
+                className={styles.groupPanelsTables}
+                loadingPanelData={isLoading}
+              />
+            </div>
+          ) : (
             <GroupedPanelsTables
               patientUuid={patientUuid}
               className={styles.groupPanelsTables}
               loadingPanelData={isLoading}
             />
-          </div>
+          )
         ) : view === 'over-time' ? (
           <GroupedTimeline patientUuid={patientUuid} />
         ) : null}

package/src/test-results/tree-view/tree-view.test.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { getDefaultsFromConfigSchema, useConfig, useLayoutType } from '@openmrs/esm-framework';
 import { mockPatient } from 'tools';
 import { mockResults } from '__mocks__';
 import { type ConfigObject, configSchema } from '../../config-schema';
 import { useGetManyObstreeData } from '../grouped-timeline';
-import TreeView from './tree-view.component';
 import { FilterProvider, type Roots } from '../filter/filter-context';
 import { type ObsTreeNode } from '../grouped-timeline/useObstreeData';
+import TreeView from './tree-view.component';
 
 const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
 const mockUseLayoutType = jest.mocked(useLayoutType);
@@ -106,4 +107,119 @@ describe('TreeView', () => {
     expect(screen.getAllByText('Haemoglobin').length).toBeGreaterThan(0);
     expect(screen.getAllByText('Hematocrit').length).toBeGreaterThan(0);
   });
+
+  describe('Reset button - Tablet overlay', () => {
+    beforeEach(() => {
+      mockUseLayoutType.mockReturnValue('tablet');
+      mockUseGetManyObstreeData.mockReturnValue({
+        roots: mockResults as unknown as Array<ObsTreeNode>,
+        isLoading: false,
+        error: null,
+      });
+    });
+
+    it('should show reset tree button in tablet overlay when tree is opened', async () => {
+      const user = userEvent.setup();
+
+      renderTreeViewWithMockContext();
+
+      // Open the tree overlay by clicking the tree button
+      const treeButton = screen.getByRole('button', { name: /show tree/i });
+      await user.click(treeButton);
+
+      // Reset tree button should be visible in the overlay
+      const resetButton = screen.getByRole('button', { name: /reset tree/i });
+      expect(resetButton).toBeInTheDocument();
+      expect(resetButton).toBeEnabled();
+    });
+
+    it('should show both reset and view buttons in overlay', async () => {
+      const user = userEvent.setup();
+
+      renderTreeViewWithMockContext();
+
+      // Open the tree overlay
+      const treeButton = screen.getByRole('button', { name: /show tree/i });
+      await user.click(treeButton);
+
+      // Both buttons should be visible and enabled
+      const resetButton = screen.getByRole('button', { name: /reset tree/i });
+      const viewButton = screen.getByRole('button', { name: /view.*results/i });
+
+      expect(resetButton).toBeInTheDocument();
+      expect(resetButton).toBeEnabled();
+      expect(viewButton).toBeInTheDocument();
+      expect(viewButton).toBeEnabled();
+    });
+
+    it('should reset filters when reset tree button is clicked', async () => {
+      const user = userEvent.setup();
+
+      renderTreeViewWithMockContext();
+
+      // Open the tree overlay
+      const treeButton = screen.getByRole('button', { name: /show tree/i });
+      await user.click(treeButton);
+
+      // Find an enabled checkbox (one with hasData: true in mock data)
+      // Mock data has "Platelets" with data
+      const plateletsCheckboxes = screen.getAllByRole('checkbox', { name: /platelets/i });
+      // Find the first enabled one
+      const plateletsCheckbox = plateletsCheckboxes.find((cb) => !cb.hasAttribute('disabled'));
+
+      expect(plateletsCheckbox).toBeDefined();
+      await user.click(plateletsCheckbox);
+      expect(plateletsCheckbox).toBeChecked();
+
+      // Click reset tree button
+      const resetButton = screen.getByRole('button', { name: /reset tree/i });
+      await user.click(resetButton);
+
+      // Checkbox should be unchecked
+      expect(plateletsCheckbox).not.toBeChecked();
+    });
+
+    it('should show filtered results count in view button', async () => {
+      const user = userEvent.setup();
+
+      renderTreeViewWithMockContext();
+
+      // Open the tree overlay
+      const treeButton = screen.getByRole('button', { name: /show tree/i });
+      await user.click(treeButton);
+
+      // Initially should show total count
+      const viewButton = screen.getByRole('button', { name: /view.*results/i });
+      expect(viewButton).toBeInTheDocument();
+
+      // Check a filter - find an enabled checkbox
+      const plateletsCheckboxes = screen.getAllByRole('checkbox', { name: /platelets/i });
+      const plateletsCheckbox = plateletsCheckboxes.find((cb) => !cb.hasAttribute('disabled'));
+      await user.click(plateletsCheckbox);
+
+      // View button should update with filtered count
+      expect(screen.getByRole('button', { name: /view.*results/i })).toBeInTheDocument();
+    });
+
+    it('should close overlay when view results button is clicked', async () => {
+      const user = userEvent.setup();
+
+      renderTreeViewWithMockContext();
+
+      // Open the tree overlay
+      const treeButton = screen.getByRole('button', { name: /show tree/i });
+      await user.click(treeButton);
+
+      // Reset tree button should be visible in the overlay
+      const resetButton = screen.getByRole('button', { name: /reset tree/i });
+      expect(resetButton).toBeInTheDocument();
+
+      // Click view results button
+      const viewButton = screen.getByRole('button', { name: /view.*results/i });
+      await user.click(viewButton);
+
+      // Overlay should be closed (reset button no longer visible)
+      expect(screen.queryByRole('button', { name: /reset tree/i })).not.toBeInTheDocument();
+    });
+  });
 });

package/src/test-results/trendline/trendline.component.tsx

@@ -4,23 +4,43 @@ import { Button, InlineLoading, SkeletonText } from '@carbon/react';
 import { LineChart, ScaleTypes, TickRotations } from '@carbon/charts-react';
 import { ArrowLeftIcon, ConfigurableLink, formatDate } from '@openmrs/esm-framework';
 import { EmptyState, type OBSERVATION_INTERPRETATION } from '@openmrs/esm-patient-common-lib';
-import { useObstreeData } from './trendline-resource';
 import { testResultsBasePath } from '../helpers';
+import { useObstreeData } from './trendline-resource';
 import CommonDataTable from '../overview/common-datatable.component';
 import RangeSelector from './range-selector.component';
 import styles from './trendline.scss';
 
 interface TrendlineProps {
-  patientUuid: string;
-  conceptUuid: string;
   basePath: string;
+  conceptUuid: string;
+  patientUuid: string;
   hideTrendlineHeader?: boolean;
   showBackToTimelineButton?: boolean;
 }
 
-const TrendLineBackground = ({ ...props }) => <div {...props} className={styles.background} />;
+interface TrendLineBackgroundProps {
+  children?: React.ReactNode;
+}
+
+const TrendLineBackground: React.FC<TrendLineBackgroundProps> = ({ ...props }) => (
+  <div {...props} className={styles.background} />
+);
 
-const TrendlineHeader = ({ patientUuid, title, referenceRange, isValidating, showBackToTimelineButton }) => {
+interface TrendlineHeaderProps {
+  isValidating: boolean;
+  patientUuid: string;
+  referenceRange: string;
+  showBackToTimelineButton: boolean;
+  title: string;
+}
+
+const TrendlineHeader: React.FC<TrendlineHeaderProps> = ({
+  patientUuid,
+  title,
+  referenceRange,
+  isValidating,
+  showBackToTimelineButton,
+}) => {
   const { t } = useTranslation();
   return (
     <div className={styles.header}>
@@ -28,9 +48,9 @@ const TrendlineHeader = ({ patientUuid, title, referenceRange, isValidating, sho
         {showBackToTimelineButton && (
           <ConfigurableLink to={testResultsBasePath(`/patient/${patientUuid}/chart`)}>
             <Button
+              iconDescription={t('returnToTimeline', 'Return to timeline')}
               kind="ghost"
               renderIcon={(props: ComponentProps<typeof ArrowLeftIcon>) => <ArrowLeftIcon size={24} {...props} />}
-              iconDescription={t('returnToTimeline', 'Return to timeline')}
             >
               <span>{t('backToTimeline', 'Back to timeline')}</span>
             </Button>
@@ -52,8 +72,8 @@ const Trendline: React.FC<TrendlineProps> = ({
   hideTrendlineHeader = false,
   showBackToTimelineButton = false,
 }) => {
-  const { trendlineData, isLoading, isValidating } = useObstreeData(patientUuid, conceptUuid);
   const { t } = useTranslation();
+  const { trendlineData, isLoading, isValidating } = useObstreeData(patientUuid, conceptUuid);
   const { obs, display: chartTitle, hiNormal, lowNormal, units: leftAxisTitle, range: referenceRange } = trendlineData;
   const bottomAxisTitle = t('date', 'Date');
   const [range, setRange] = useState<[Date, Date]>();
@@ -83,52 +103,52 @@ const Trendline: React.FC<TrendlineProps> = ({
     }
   }, [obs]);
 
-  const data: Array<{
-    date: Date;
-    value: number;
-    group: string;
-    min?: number;
-    max?: number;
-  }> = [];
+  const { data, tableData } = useMemo(() => {
+    const chartData: Array<{
+      date: Date;
+      value: number;
+      group: string;
+      min?: number;
+      max?: number;
+    }> = [];
 
-  const tableData: Array<{
-    id: string;
-    dateTime: string;
-    value:
-      | number
-      | {
-          value: number;
-          interpretation: OBSERVATION_INTERPRETATION;
-        };
-  }> = [];
+    const table: Array<{
+      id: string;
+      dateTime: string;
+      value: {
+        value: number;
+        interpretation: OBSERVATION_INTERPRETATION;
+      };
+    }> = [];
 
-  const dataset = chartTitle;
+    obs.forEach((observation, idx) => {
+      const normalRange =
+        hiNormal && lowNormal
+          ? {
+              max: hiNormal,
+              min: lowNormal,
+            }
+          : {};
 
-  obs.forEach((obs, idx) => {
-    const range =
-      hiNormal && lowNormal
-        ? {
-            max: hiNormal,
-            min: lowNormal,
-          }
-        : {};
+      chartData.push({
+        date: new Date(Date.parse(observation.obsDatetime)),
+        value: parseFloat(observation.value),
+        group: chartTitle,
+        ...normalRange,
+      });
 
-    data.push({
-      date: new Date(Date.parse(obs.obsDatetime)),
-      value: parseFloat(obs.value),
-      group: chartTitle,
-      ...range,
+      table.push({
+        id: `${idx}`,
+        dateTime: observation.obsDatetime,
+        value: {
+          value: parseFloat(observation.value),
+          interpretation: observation.interpretation,
+        },
+      });
     });
 
-    tableData.push({
-      id: `${idx}`,
-      dateTime: obs.obsDatetime,
-      value: {
-        value: parseFloat(obs.value),
-        interpretation: obs.interpretation,
-      },
-    });
-  });
+    return { data: chartData, tableData: table };
+  }, [obs, chartTitle, hiNormal, lowNormal]);
 
   const chartOptions = useMemo(
     () => ({
@@ -143,7 +163,6 @@ const Trendline: React.FC<TrendlineProps> = ({
           scaleType: ScaleTypes.TIME,
           ticks: {
             rotation: TickRotations.ALWAYS,
-            // formatter: x => x.toLocaleDateString("en-US", TableDateFormatOption)
           },
           domain: range,
         },
@@ -239,11 +258,11 @@ const Trendline: React.FC<TrendlineProps> = ({
     <div className={styles.container}>
       {!hideTrendlineHeader && (
         <TrendlineHeader
-          showBackToTimelineButton={showBackToTimelineButton}
           isValidating={isValidating}
           patientUuid={patientUuid}
-          title={dataset}
           referenceRange={referenceRange}
+          showBackToTimelineButton={showBackToTimelineButton}
+          title={chartTitle}
         />
       )}
       <TrendLineBackground>
@@ -269,8 +288,25 @@ const Trendline: React.FC<TrendlineProps> = ({
   );
 };
 
-const DrawTable = React.memo<{ tableData; tableHeaderData }>(({ tableData, tableHeaderData }) => {
-  return <CommonDataTable data={tableData} tableHeaders={tableHeaderData} />;
+interface DrawTableProps {
+  tableData: Array<{
+    id: string;
+    dateTime: string;
+    value: {
+      value: number;
+      interpretation: OBSERVATION_INTERPRETATION;
+    };
+  }>;
+  tableHeaderData: Array<{
+    header: string;
+    key: string;
+  }>;
+}
+
+const DrawTable = React.memo<DrawTableProps>(({ tableData, tableHeaderData }) => {
+  return <CommonDataTable data={tableData as any} tableHeaders={tableHeaderData} />;
 });
 
+DrawTable.displayName = 'DrawTable';
+
 export default Trendline;

package/src/test-results/ui-elements/reset-filters-empty-state/filter-empty-data-illustration.tsx

@@ -14,8 +14,8 @@ const FilterEmptyDataIllustration: React.FC<FilterEmptyDataIllustrationProps> =
       <path
         d="M57 57H1V1h56v56zM1 29h56M1 15h56M1 43h56M29 1v56M15 1v56M43 1v56"
         stroke="#9ACBCA"
-        stroke-width="1.44"
-        stroke-linejoin="round"
+        strokeWidth="1.44"
+        strokeLinejoin="round"
       />
     </g>
   </svg>

package/translations/en.json

@@ -100,7 +100,7 @@
   "testName": "Test name",
   "testResults": "test results",
   "testResults_title": "Test Results",
-  "testResultsData": "Test results data",
+  "testResultsData": "test results data",
   "tests": "Tests",
   "testType": "Test type",
   "testTypeRequired": "Test type is required",