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

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')}
       />
     );
   }

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",