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

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

@@ -7,6 +7,8 @@ import {
   type ObsMetaInfo,
   type OBSERVATION_INTERPRETATION,
 } from '@openmrs/esm-patient-common-lib';
+import type { FHIRObservationResource } from '../../types';
+import { type ReferenceRanges } from '../grouped-timeline/reference-range-helpers';
 
 const PAGE_SIZE = 300;
 const CHUNK_PREFETCH_COUNT = 1;
@@ -37,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',
@@ -59,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),
   ];
 }
@@ -107,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),
   );
 }
 
@@ -151,6 +170,118 @@ export function exist(...args: any[]): boolean {
   return true;
 }
 
+/**
+ * Extracts reference ranges from FHIR Observation referenceRange field.
+ * Handles different range types: normal, treatment, and absolute.
+ */
+export function extractObservationReferenceRanges(
+  resource: FHIRObservationResource | ObsRecord,
+): ReferenceRanges | undefined {
+  if (!resource.referenceRange || resource.referenceRange.length === 0) {
+    return undefined;
+  }
+
+  const ranges: ReferenceRanges = {
+    units: resource.valueQuantity?.unit,
+  };
+
+  resource.referenceRange.forEach((range) => {
+    const rangeType = range.type?.coding?.[0]?.code;
+    const rangeSystem = range.type?.coding?.[0]?.system;
+
+    if (rangeSystem === 'http://terminology.hl7.org/CodeSystem/referencerange-meaning') {
+      if (rangeType === 'normal') {
+        ranges.hiNormal = range.high?.value;
+        ranges.lowNormal = range.low?.value;
+      } else if (rangeType === 'treatment') {
+        ranges.hiCritical = range.high?.value;
+        ranges.lowCritical = range.low?.value;
+      }
+    } else if (rangeSystem === 'http://fhir.openmrs.org/ext/obs/reference-range' && rangeType === 'absolute') {
+      ranges.hiAbsolute = range.high?.value;
+      ranges.lowAbsolute = range.low?.value;
+    }
+  });
+
+  // Only return if we found at least one range value
+  if (
+    ranges.hiNormal !== undefined ||
+    ranges.lowNormal !== undefined ||
+    ranges.hiCritical !== undefined ||
+    ranges.lowCritical !== undefined ||
+    ranges.hiAbsolute !== undefined ||
+    ranges.lowAbsolute !== undefined
+  ) {
+    return ranges;
+  }
+
+  return undefined;
+}
+
+/**
+ * Extracts and maps FHIR Observation interpretation to OBSERVATION_INTERPRETATION.
+ * Supports both interpretation codes (e.g., "LL", "N", "H") and display values (e.g., "Critically Low", "Normal").
+ */
+export function extractObservationInterpretation(
+  resource: FHIRObservationResource | ObsRecord,
+): OBSERVATION_INTERPRETATION | undefined {
+  if (!resource.interpretation || resource.interpretation.length === 0) {
+    return undefined;
+  }
+
+  const interpretation = resource.interpretation[0];
+  const code = interpretation.coding?.[0]?.code;
+  const display = interpretation.coding?.[0]?.display || interpretation.text;
+
+  // Map FHIR interpretation codes (HL7 v3 ObservationInterpretation codes)
+  if (code) {
+    switch (code.toUpperCase()) {
+      case 'LL':
+        return 'CRITICALLY_LOW';
+      case 'HH':
+        return 'CRITICALLY_HIGH';
+      case 'L':
+        return 'LOW';
+      case 'H':
+        return 'HIGH';
+      case 'N':
+        return 'NORMAL';
+      case 'LU':
+        return 'OFF_SCALE_LOW';
+      case 'HU':
+        return 'OFF_SCALE_HIGH';
+      default:
+        // Fall through to display mapping
+        break;
+    }
+  }
+
+  // Map FHIR interpretation display values
+  if (display) {
+    const normalized = display.trim().toLowerCase();
+    switch (normalized) {
+      case 'critically low':
+        return 'CRITICALLY_LOW';
+      case 'critically high':
+        return 'CRITICALLY_HIGH';
+      case 'low':
+        return 'LOW';
+      case 'high':
+        return 'HIGH';
+      case 'normal':
+        return 'NORMAL';
+      case 'off scale low':
+        return 'OFF_SCALE_LOW';
+      case 'off scale high':
+        return 'OFF_SCALE_HIGH';
+      default:
+        return undefined;
+    }
+  }
+
+  return undefined;
+}
+
 export const assessValue =
   (meta: ObsMetaInfo) =>
   (value: string): OBSERVATION_INTERPRETATION => {

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

@@ -7,13 +7,21 @@ import {
   type ObsMetaInfo,
 } from '@openmrs/esm-patient-common-lib';
 import {
+  addUserDataToCache,
+  assessValue,
+  extractMetaInformation,
+  extractObservationReferenceRanges,
+  extractObservationInterpretation,
   getEntryConceptClassUuid,
   getUserDataFromCache,
   loadObsEntries,
   loadPresentConcepts,
-  extractMetaInformation,
-  addUserDataToCache,
 } from './helpers';
+import {
+  selectReferenceRange,
+  formatReferenceRange,
+  type ReferenceRanges,
+} from '../grouped-timeline/reference-range-helpers';
 
 function parseSingleObsData(
   testConceptNameMap: Record<ConceptUuid, string>,
@@ -23,6 +31,11 @@ function parseSingleObsData(
   return (entry: ObsRecord) => {
     entry.conceptClass = getEntryConceptClassUuid(entry);
 
+    // Extract observation-level reference ranges from FHIR Observation referenceRange field
+    const observationRanges = extractObservationReferenceRanges(entry);
+    // Extract observation-level interpretation from FHIR Observation interpretation field
+    const observationInterpretation = extractObservationInterpretation(entry);
+
     if (entry.hasMember) {
       // is a panel
       entry.members = new Array(entry.hasMember.length);
@@ -31,17 +44,59 @@ function parseSingleObsData(
       });
     } else {
       // is a single test
-      entry.meta = metaInfomation[entry.conceptClass];
-    }
 
-    if (entry.valueQuantity) {
-      entry.value = entry.valueQuantity.value;
-      delete entry.valueQuantity;
-    }
+      // Extract value FIRST before computing interpretation
+      if (entry.valueQuantity) {
+        entry.value = String(entry.valueQuantity.value);
+        delete entry.valueQuantity;
+      } else if (entry.valueCodeableConcept) {
+        entry.value = entry.valueCodeableConcept.coding?.[0]?.display;
+        delete entry.valueCodeableConcept;
+      } else if (entry.valueString) {
+        entry.value = entry.valueString;
+        delete entry.valueString;
+      }
 
-    if (entry.valueCodeableConcept) {
-      entry.value = entry?.valueCodeableConcept.coding[0].display;
-      delete entry.valueCodeableConcept;
+      const conceptMeta = metaInfomation[entry.conceptClass];
+
+      // Node-level (concept-level) reference ranges
+      const nodeRanges: ReferenceRanges = {
+        hiAbsolute: conceptMeta.hiAbsolute,
+        hiCritical: conceptMeta.hiCritical,
+        hiNormal: conceptMeta.hiNormal,
+        lowAbsolute: conceptMeta.lowAbsolute,
+        lowCritical: conceptMeta.lowCritical,
+        lowNormal: conceptMeta.lowNormal,
+        units: conceptMeta.units,
+      };
+
+      // Merge observation-level and concept-level ranges (observation takes precedence)
+      const selectedRanges = selectReferenceRange(observationRanges, nodeRanges);
+
+      // Create merged meta with observation-level ranges taking precedence
+      const mergedMeta: ObsMetaInfo = {
+        ...conceptMeta,
+        // Update meta with merged ranges
+        hiAbsolute: selectedRanges?.hiAbsolute ?? conceptMeta.hiAbsolute,
+        hiCritical: selectedRanges?.hiCritical ?? conceptMeta.hiCritical,
+        hiNormal: selectedRanges?.hiNormal ?? conceptMeta.hiNormal,
+        lowAbsolute: selectedRanges?.lowAbsolute ?? conceptMeta.lowAbsolute,
+        lowCritical: selectedRanges?.lowCritical ?? conceptMeta.lowCritical,
+        lowNormal: selectedRanges?.lowNormal ?? conceptMeta.lowNormal,
+        units: selectedRanges?.units ?? conceptMeta.units,
+        // Update range string with merged ranges
+        range: selectedRanges ? formatReferenceRange(selectedRanges, selectedRanges.units) : conceptMeta.range,
+      };
+
+      // Always update assessValue to use merged ranges (computed after mergedMeta to avoid unsafe cast)
+      // This ensures assessValue is computed even when only concept-level ranges exist
+      mergedMeta.assessValue = assessValue(mergedMeta);
+
+      entry.meta = mergedMeta;
+
+      // Use observation-level interpretation if available, otherwise compute using merged ranges
+      entry.interpretation =
+        observationInterpretation ?? (mergedMeta.assessValue ? mergedMeta.assessValue(entry.value) : 'NORMAL');
     }
 
     entry.name = testConceptNameMap[entry.conceptClass];

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { type PatientData } from '@openmrs/esm-patient-common-lib';
 import loadPatientData from './loadPatientData';
 
@@ -9,23 +9,34 @@ type LoadingState = {
 };
 
 const usePatientResultsData = (patientUuid: string): LoadingState => {
-  const [state, setState] = React.useState<LoadingState>({
+  const [state, setState] = useState<LoadingState>({
     sortedObs: {},
     loaded: false,
     error: undefined,
   });
+  const isMountedRef = useRef(true);
 
-  React.useEffect(() => {
-    let unmounted = false;
+  useEffect(() => {
+    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/common-datatable.component.tsx

@@ -77,7 +77,7 @@ const CommonDataTable: React.FC<CommonDataTableProps> = ({ title, data, descript
               {rows.map((row, i) => (
                 <TypedTableRow
                   key={row.id}
-                  interpretation={data[i]?.value?.interpretation as OBSERVATION_INTERPRETATION}
+                  interpretation={data[i]?.interpretation as OBSERVATION_INTERPRETATION}
                   {...getRowProps({ row })}
                 >
                   {row.cells.map((cell) => {

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/overview/useOverviewData.ts

@@ -23,24 +23,36 @@ export type OverviewPanelEntry = [string, string, Array<OverviewPanelData>, Date
 
 export function parseSingleEntry(entry: ObsRecord, type: string, panelName: string): Array<OverviewPanelData> {
   if (type === 'Test') {
+    // Use observation-level interpretation set during data loading
+    const interpretation = entry.interpretation || 'NORMAL';
     return [
       {
         id: entry.id,
         name: panelName,
         range: entry.meta?.range || '--',
-        interpretation: entry.meta.assessValue ? entry.meta.assessValue(entry.value) : '--',
-        value: entry.value,
+        interpretation,
+        value: {
+          value: entry.value,
+          interpretation,
+        },
       },
     ];
   } else {
-    return entry.members.map((gm) => ({
-      id: gm.id,
-      key: gm.id,
-      name: gm.name,
-      range: gm.meta?.range || '--',
-      interpretation: gm.meta.assessValue(gm.value),
-      value: gm.value,
-    }));
+    return entry.members.map((member) => {
+      // Use observation-level interpretation set during data loading
+      const interpretation = member.interpretation || 'NORMAL';
+      return {
+        id: member.id,
+        key: member.id,
+        name: member.name,
+        range: member.meta?.range || '--',
+        interpretation,
+        value: {
+          value: member.value,
+          interpretation,
+        },
+      };
+    });
   }
 }
 

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

@@ -1,17 +1,18 @@
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { type TFunction, useTranslation } from 'react-i18next';
-import { ContentSwitcher, Switch, Button } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import type { TFunction } from 'i18next';
+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';
 import { type viewOpts } from '../../types';
+import { type Roots } from '../filter/filter-context';
 import { FilterContext, FilterProvider } from '../filter';
 import { useGetManyObstreeData } from '../grouped-timeline';
 import IndividualResultsTableTablet from '../individual-results-table-tablet/individual-results-table-tablet.component';
 import TreeView from '../tree-view/tree-view.component';
 import styles from './results-viewer.scss';
-import { type Roots } from '../filter/filter-context';
 
 type panelOpts = 'tree' | 'panel';
 
@@ -22,22 +23,26 @@ interface RefreshDataButtonProps {
 
 interface ResultsViewerProps {
   basePath: string;
-  patientUuid?: string;
+  patientUuid: string;
 }
 
 const RoutedResultsViewer: React.FC<ResultsViewerProps> = ({ basePath, patientUuid }) => {
   const { t } = useTranslation();
   const config = useConfig<ConfigObject>();
   const conceptUuids = config.resultsViewerConcepts.map((concept) => concept.conceptUuid) ?? [];
-  const { roots, isLoading, error } = useGetManyObstreeData(conceptUuids);
+  const { roots, isLoading, error } = useGetManyObstreeData(patientUuid, conceptUuids);
 
   if (error) {
     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>
     );
@@ -46,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

@@ -1,7 +1,7 @@
 import React, { useContext, useState, useMemo } from 'react';
 import classNames from 'classnames';
+import { AccordionSkeleton, Button, DataTableSkeleton, Layer } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
-import { AccordionSkeleton, DataTableSkeleton, Button, Layer } from '@carbon/react';
 import { useLayoutType, TreeViewAltIcon, useConfig } from '@openmrs/esm-framework';
 import { EmptyState, ErrorState } from '@openmrs/esm-patient-common-lib';
 import { type ConfigObject } from '../../config-schema';
@@ -19,9 +19,10 @@ interface TreeViewProps {
   error?: string;
 }
 
-const GroupedPanelsTables: React.FC<{ className: string; loadingPanelData: boolean }> = ({
+const GroupedPanelsTables: React.FC<{ patientUuid: string; className: string; loadingPanelData: boolean }> = ({
   className,
   loadingPanelData,
+  patientUuid,
 }) => {
   const { t } = useTranslation();
   const { checkboxes, someChecked, tableData } = useContext(FilterContext);
@@ -70,6 +71,7 @@ const GroupedPanelsTables: React.FC<{ className: string; loadingPanelData: boole
             })}
           >
             <IndividualResultsTable
+              patientUuid={patientUuid}
               isLoading={loadingPanelData}
               subRows={filteredSubRows}
               index={index}
@@ -88,7 +90,7 @@ const TreeView: React.FC<TreeViewProps> = ({ patientUuid, expanded, view }) => {
   const [showTreeOverlay, setShowTreeOverlay] = useState(false);
   const config = useConfig<ConfigObject>();
   const conceptUuids = config?.resultsViewerConcepts?.map((c) => c.conceptUuid) ?? [];
-  const { roots, error } = useGetManyObstreeData(conceptUuids);
+  const { roots, error } = useGetManyObstreeData(patientUuid, conceptUuids);
 
   const { timelineData, tableData, totalResultsCount, filteredResultsCount, resetTree, isLoading } =
     useContext(FilterContext);
@@ -97,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')}
       />
     );
   }
@@ -113,7 +120,11 @@ const TreeView: React.FC<TreeViewProps> = ({ patientUuid, expanded, view }) => {
           {!isLoading && view === 'over-time' ? (
             <GroupedTimeline patientUuid={patientUuid} />
           ) : view === 'individual-test' ? (
-            <GroupedPanelsTables className={styles.groupPanelsTables} loadingPanelData={isLoading} />
+            <GroupedPanelsTables
+              patientUuid={patientUuid}
+              className={styles.groupPanelsTables}
+              loadingPanelData={isLoading}
+            />
           ) : (
             <DataTableSkeleton role="progressbar" />
           )}
@@ -159,9 +170,21 @@ const TreeView: React.FC<TreeViewProps> = ({ patientUuid, expanded, view }) => {
         {isLoading ? (
           <DataTableSkeleton />
         ) : view === 'individual-test' ? (
-          <div className={styles.panelViewTimeline}>
-            <GroupedPanelsTables className={styles.groupPanelsTables} loadingPanelData={isLoading} />
-          </div>
+          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}
+            />
+          )
         ) : view === 'over-time' ? (
           <GroupedTimeline patientUuid={patientUuid} />
         ) : null}