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

package/src/test-results/grouped-timeline/useObstreeData.test.ts

@@ -0,0 +1,471 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { useGetManyObstreeData, useGetObstreeData, type ObsTreeNode } from './useObstreeData';
+
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+
+describe('useObstreeData', () => {
+  describe('augmentObstreeData via useGetObstreeData', () => {
+    it('should add flatName to nodes', async () => {
+      const mockResponse = {
+        data: {
+          display: 'Hemoglobin',
+          conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          hasData: false,
+          subSets: [],
+          obs: [
+            {
+              value: '12.5',
+              obsDatetime: '2024-01-01',
+              interpretation: 'NORMAL',
+            },
+          ],
+        },
+      };
+
+      mockOpenmrsFetch.mockResolvedValue(mockResponse as any);
+
+      const { result } = renderHook(() => useGetObstreeData('patient-uuid', 'hemoglobin-uuid'));
+
+      await waitFor(() => expect(result.current.loading).toBe(false));
+
+      const data = result.current.data as ObsTreeNode;
+      expect(data.flatName).toBe('Hemoglobin');
+      expect(data.hasData).toBe(true);
+    });
+
+    it('should build hierarchical flatName for nested nodes', async () => {
+      const mockResponse = {
+        data: {
+          display: 'Complete Blood Count',
+          conceptUuid: 'cbc-uuid',
+          hasData: false,
+          subSets: [
+            {
+              display: 'Hemoglobin',
+              conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+              hasData: false,
+              subSets: [],
+              obs: [
+                {
+                  value: '12.5',
+                  obsDatetime: '2024-01-01',
+                },
+              ],
+            },
+          ],
+          obs: [],
+        },
+      };
+
+      mockOpenmrsFetch.mockResolvedValue(mockResponse as any);
+
+      const { result } = renderHook(() => useGetObstreeData('patient-uuid', 'cbc-uuid'));
+
+      await waitFor(() => expect(result.current.loading).toBe(false));
+
+      const data = result.current.data as ObsTreeNode;
+      expect(data.flatName).toBe('Complete Blood Count');
+      expect(data.subSets[0].flatName).toBe('Complete Blood Count-Hemoglobin');
+    });
+
+    it('should handle Bloodwork prefix specially to avoid long names', async () => {
+      const mockResponse = {
+        data: {
+          display: 'Bloodwork',
+          conceptUuid: 'bloodwork-uuid',
+          hasData: false,
+          subSets: [
+            {
+              display: 'Hemoglobin',
+              conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+              hasData: false,
+              subSets: [],
+              obs: [{ value: '12.5', obsDatetime: '2024-01-01' }],
+            },
+          ],
+          obs: [],
+        },
+      };
+
+      mockOpenmrsFetch.mockResolvedValue(mockResponse as any);
+
+      const { result } = renderHook(() => useGetObstreeData('patient-uuid', 'bloodwork-uuid'));
+
+      await waitFor(() => expect(result.current.loading).toBe(false));
+
+      const data = result.current.data as ObsTreeNode;
+      expect(data.flatName).toBe('Bloodwork');
+      // Bloodwork children should use simplified names
+      expect(data.subSets[0].flatName).toBe('Hemoglobin');
+    });
+
+    it('should set hasData to true when node has observations', async () => {
+      const mockResponse = {
+        data: {
+          display: 'Hemoglobin',
+          conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          hasData: false,
+          subSets: [],
+          obs: [
+            {
+              value: '12.5',
+              obsDatetime: '2024-01-01',
+            },
+          ],
+        },
+      };
+
+      mockOpenmrsFetch.mockResolvedValue(mockResponse as any);
+
+      const { result } = renderHook(() => useGetObstreeData('patient-uuid', 'hemoglobin-uuid'));
+
+      await waitFor(() => expect(result.current.loading).toBe(false));
+
+      const data = result.current.data as ObsTreeNode;
+      expect(data.hasData).toBe(true);
+    });
+
+    it('should propagate hasData to parent when child has data', async () => {
+      const mockResponse = {
+        data: {
+          display: 'Complete Blood Count',
+          conceptUuid: 'cbc-uuid',
+          hasData: false,
+          subSets: [
+            {
+              display: 'Hemoglobin',
+              conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+              hasData: false,
+              subSets: [],
+              obs: [{ value: '12.5', obsDatetime: '2024-01-01' }],
+            },
+          ],
+          obs: [],
+        },
+      };
+
+      mockOpenmrsFetch.mockResolvedValue(mockResponse as any);
+
+      const { result } = renderHook(() => useGetObstreeData('patient-uuid', 'cbc-uuid'));
+
+      await waitFor(() => expect(result.current.loading).toBe(false));
+
+      const data = result.current.data as ObsTreeNode;
+      expect(data.hasData).toBe(true);
+      expect(data.subSets[0].hasData).toBe(true);
+    });
+
+    it('should add interpretation to observations without one', async () => {
+      const mockResponse = {
+        data: {
+          display: 'Hemoglobin',
+          conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          lowNormal: 10.4,
+          hiNormal: 17.8,
+          units: 'g/dL',
+          hasData: false,
+          subSets: [],
+          obs: [
+            {
+              value: '5.0', // Below normal
+              obsDatetime: '2024-01-01',
+            },
+          ],
+        },
+      };
+
+      mockOpenmrsFetch.mockResolvedValue(mockResponse as any);
+
+      const { result } = renderHook(() => useGetObstreeData('patient-uuid', 'hemoglobin-uuid'));
+
+      await waitFor(() => expect(result.current.loading).toBe(false));
+
+      // Interpretation is added by assessValue helper
+      const data = result.current.data as ObsTreeNode;
+      expect(data.obs[0].interpretation).toBeDefined();
+    });
+
+    it('should preserve existing interpretation if present', async () => {
+      const mockResponse = {
+        data: {
+          display: 'Hemoglobin',
+          conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          lowNormal: 10.4,
+          hiNormal: 17.8,
+          units: 'g/dL',
+          hasData: false,
+          subSets: [],
+          obs: [
+            {
+              value: '12.5',
+              obsDatetime: '2024-01-01',
+              interpretation: 'NORMAL',
+            },
+          ],
+        },
+      };
+
+      mockOpenmrsFetch.mockResolvedValue(mockResponse as any);
+
+      const { result } = renderHook(() => useGetObstreeData('patient-uuid', 'hemoglobin-uuid'));
+
+      await waitFor(() => expect(result.current.loading).toBe(false));
+
+      const data = result.current.data as ObsTreeNode;
+      expect(data.obs[0].interpretation).toBe('NORMAL');
+    });
+
+    it('should use observation-level reference ranges when available', async () => {
+      const mockResponse = {
+        data: {
+          display: 'Hemoglobin',
+          conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          lowNormal: 10.4,
+          hiNormal: 17.8,
+          units: 'g/dL',
+          hasData: false,
+          subSets: [],
+          obs: [
+            {
+              value: '12.5',
+              obsDatetime: '2024-01-01',
+              // Observation-specific reference ranges (criteria-based)
+              lowNormal: 12.0,
+              hiNormal: 16.0,
+            },
+          ],
+        },
+      };
+
+      mockOpenmrsFetch.mockResolvedValue(mockResponse as any);
+
+      const { result } = renderHook(() => useGetObstreeData('patient-uuid', 'hemoglobin-uuid'));
+
+      await waitFor(() => expect(result.current.loading).toBe(false));
+
+      // Observation should have a range property (formatted by helper)
+      const data = result.current.data as ObsTreeNode;
+      expect(data.obs[0]).toHaveProperty('range');
+      expect((data.obs[0] as any).range).toBeDefined();
+    });
+  });
+
+  describe('filterTreesWithData via useGetManyObstreeData', () => {
+    it('should filter out leaf nodes without data', async () => {
+      mockOpenmrsFetch.mockResolvedValue({
+        data: {
+          display: 'Complete Blood Count',
+          conceptUuid: 'cbc-uuid',
+          hasData: false,
+          subSets: [
+            {
+              display: 'Hemoglobin',
+              conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+              hasData: false,
+              subSets: [],
+              obs: [{ value: '12.5', obsDatetime: '2024-01-01' }],
+            },
+            {
+              display: 'Platelets',
+              conceptUuid: 'platelets-uuid',
+              hasData: false,
+              subSets: [],
+              obs: [], // No data
+            },
+          ],
+          obs: [],
+        },
+      } as any);
+
+      const { result } = renderHook(() => useGetManyObstreeData('patient-uuid', ['cbc-uuid']));
+
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+      expect(result.current.roots).toHaveLength(1);
+      expect(result.current.roots[0].subSets).toHaveLength(1);
+      expect(result.current.roots[0].subSets[0].display).toBe('Hemoglobin');
+    });
+
+    it('should keep parent nodes even if they have no direct observations', async () => {
+      mockOpenmrsFetch.mockResolvedValue({
+        data: {
+          display: 'Hematology',
+          conceptUuid: 'hematology-uuid',
+          hasData: false,
+          subSets: [
+            {
+              display: 'Complete Blood Count',
+              conceptUuid: 'cbc-uuid',
+              hasData: false,
+              subSets: [
+                {
+                  display: 'Hemoglobin',
+                  conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+                  hasData: false,
+                  subSets: [],
+                  obs: [{ value: '12.5', obsDatetime: '2024-01-01' }],
+                },
+              ],
+              obs: [],
+            },
+          ],
+          obs: [],
+        },
+      } as any);
+
+      const { result } = renderHook(() => useGetManyObstreeData('patient-uuid', ['hematology-uuid']));
+
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+      expect(result.current.roots).toHaveLength(1);
+      expect(result.current.roots[0].display).toBe('Hematology');
+      expect(result.current.roots[0].subSets).toHaveLength(1);
+      expect(result.current.roots[0].subSets[0].display).toBe('Complete Blood Count');
+    });
+
+    it('should keep parent nodes even when all leaf nodes have no data', async () => {
+      mockOpenmrsFetch.mockResolvedValue({
+        data: {
+          display: 'Complete Blood Count',
+          conceptUuid: 'cbc-uuid',
+          hasData: false,
+          subSets: [
+            {
+              display: 'Hemoglobin',
+              conceptUuid: '21AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+              hasData: false,
+              subSets: [],
+              obs: [], // No data
+            },
+            {
+              display: 'Hematocrit',
+              conceptUuid: 'hematocrit-uuid',
+              hasData: false,
+              subSets: [],
+              obs: [], // No data
+            },
+          ],
+          obs: [],
+        },
+      } as any);
+
+      const { result } = renderHook(() => useGetManyObstreeData('patient-uuid', ['cbc-uuid']));
+
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+      // Parent node is kept with filtered subSets
+      expect(result.current.roots).toHaveLength(1);
+      expect(result.current.roots[0].display).toBe('Complete Blood Count');
+    });
+
+    it('should handle nodes that are both parent and have observations', async () => {
+      mockOpenmrsFetch.mockResolvedValue({
+        data: {
+          display: 'Test Node',
+          conceptUuid: 'test-uuid',
+          hasData: false,
+          subSets: [
+            {
+              display: 'Child Test',
+              conceptUuid: 'child-uuid',
+              hasData: false,
+              subSets: [],
+              obs: [{ value: '100', obsDatetime: '2024-01-01' }],
+            },
+          ],
+          obs: [{ value: '50', obsDatetime: '2024-01-01' }], // Parent also has obs
+        },
+      } as any);
+
+      const { result } = renderHook(() => useGetManyObstreeData('patient-uuid', ['test-uuid']));
+
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+      expect(result.current.roots).toHaveLength(1);
+      expect(result.current.roots[0].hasData).toBe(true);
+      expect(result.current.roots[0].obs).toHaveLength(1);
+      expect(result.current.roots[0].subSets).toHaveLength(1);
+    });
+  });
+
+  describe('useGetManyObstreeData', () => {
+    it('should tag root nodes with requested conceptUuid', async () => {
+      mockOpenmrsFetch.mockResolvedValue({
+        data: {
+          display: 'Hemoglobin',
+          hasData: false,
+          subSets: [],
+          obs: [{ value: '12.5', obsDatetime: '2024-01-01' }],
+        },
+      } as any);
+
+      const { result } = renderHook(() => useGetManyObstreeData('patient-uuid', ['hemoglobin-uuid']));
+
+      await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+      expect(result.current.roots[0].conceptUuid).toBe('hemoglobin-uuid');
+    });
+  });
+
+  describe('Edge cases', () => {
+    it('should handle nodes without subSets or obs', async () => {
+      mockOpenmrsFetch.mockResolvedValue({
+        data: {
+          display: 'Empty Node',
+          conceptUuid: 'empty-uuid',
+          hasData: false,
+          subSets: [],
+          obs: [],
+        },
+      } as any);
+
+      const { result } = renderHook(() => useGetObstreeData('patient-uuid', 'empty-uuid'));
+
+      await waitFor(() => expect(result.current.loading).toBe(false));
+
+      const data = result.current.data as ObsTreeNode;
+      expect(data.flatName).toBe('Empty Node');
+      // hasData may be set to false or true depending on augmentation logic
+      expect(data).toHaveProperty('hasData');
+    });
+
+    it('should handle deeply nested structures', async () => {
+      mockOpenmrsFetch.mockResolvedValue({
+        data: {
+          display: 'Level1',
+          conceptUuid: 'level1-uuid',
+          hasData: false,
+          subSets: [
+            {
+              display: 'Level2',
+              conceptUuid: 'level2-uuid',
+              hasData: false,
+              subSets: [
+                {
+                  display: 'Level3',
+                  conceptUuid: 'level3-uuid',
+                  hasData: false,
+                  subSets: [],
+                  obs: [{ value: '100', obsDatetime: '2024-01-01' }],
+                },
+              ],
+              obs: [],
+            },
+          ],
+          obs: [],
+        },
+      } as any);
+
+      const { result } = renderHook(() => useGetObstreeData('patient-uuid', 'level1-uuid'));
+
+      await waitFor(() => expect(result.current.loading).toBe(false));
+
+      const data = result.current.data as ObsTreeNode;
+      expect(data.flatName).toBe('Level1');
+      expect(data.subSets[0].flatName).toBe('Level1-Level2');
+      expect(data.subSets[0].subSets[0].flatName).toBe('Level1-Level2-Level3');
+      expect(data.hasData).toBe(true);
+    });
+  });
+});

package/src/test-results/grouped-timeline/useObstreeData.ts

@@ -10,9 +10,10 @@ export const getName = (prefix: string | undefined, name: string) => {
   return prefix ? `${prefix}-${name}` : name;
 };
 
-interface ObsTreeNode {
+export interface ObsTreeNode {
   flatName?: string;
   display: string;
+  conceptUuid?: string;
   hasData: boolean;
   hiAbsolute?: number;
   hiCritical?: number;
@@ -116,6 +117,28 @@ const augmentObstreeData = (node: ObsTreeNode, prefix: string | undefined) => {
   return { ...outData } as ObsTreeNode;
 };
 
+const filterTreesWithData = (node: ObsTreeNode): ObsTreeNode | null => {
+  // If this is a leaf node (has obs array), only keep it if it has data
+  if (node.obs !== undefined) {
+    return node.hasData ? node : null;
+  }
+
+  // This is an intermediate/parent node - always keep it to preserve hierarchy
+  if (node.subSets && node.subSets.length > 0) {
+    // Recursively filter only the leaf children
+    const filteredSubSets = node.subSets
+      .map((subSet) => filterTreesWithData(subSet))
+      .filter((subSet): subSet is ObsTreeNode => subSet !== null);
+
+    // Always keep parent nodes to maintain test hierarchy structure
+    // The UI can choose to grey out parents with no data based on hasData flag
+    return { ...node, subSets: filteredSubSets };
+  }
+
+  // Parent node with empty subSets - keep it to preserve hierarchy
+  return node;
+};
+
 const useGetObstreeData = (patientUuid: string, conceptUuid: string) => {
   const response = useSWR<FetchResponse<ObsTreeNode>, Error>(
     `${restBaseUrl}/obstree?patient=${patientUuid}&concept=${conceptUuid}`,
@@ -152,10 +175,14 @@ const useGetManyObstreeData = (patientUuid: string, uuidArray: Array<string>) =>
 
   const result = useMemo(() => {
     return (
-      data?.map((resp) => {
+      data?.map((resp, index) => {
         if (resp?.data) {
           const { data, ...rest } = resp;
           const newData = augmentObstreeData(data, '');
+          // Tag the root node with the conceptUuid we requested
+          if (index < uuidArray.length && newData) {
+            newData.conceptUuid = uuidArray[index];
+          }
           return { ...rest, loading: false, data: newData };
         } else {
           return {
@@ -172,8 +199,14 @@ const useGetManyObstreeData = (patientUuid: string, uuidArray: Array<string>) =>
         },
       ]
     );
-  }, [data]);
-  const roots = result.map((item) => item.data);
+  }, [data, uuidArray]);
+
+  const roots = result
+    .map((item) => item.data)
+    .filter((node): node is ObsTreeNode => 'display' in node)
+    .map((data: ObsTreeNode) => filterTreesWithData(data))
+    .filter(Boolean);
+
   const isLoading = result.some((item) => item.loading);
 
   return { roots, isLoading, error };

package/src/test-results/individual-results-table/individual-results-table.component.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { rangeAlreadyHasUnits } from '../grouped-timeline/reference-range-helpers';
+import { formatRangeWithUnits } from '../grouped-timeline/reference-range-helpers';
 import {
   DataTable,
   DataTableSkeleton,
@@ -98,12 +98,7 @@ const IndividualResultsTable: React.FC<IndividualResultsTableProps> = ({
         const displayUnits = row.units ?? '';
         const isString = isNaN(parseFloat(row.value));
 
-        // Check if range already includes units to avoid duplication
-        // formatReferenceRange includes units, so if range has units, don't append again
-        const hasUnits = rangeAlreadyHasUnits(displayRange, displayUnits);
-        const referenceRangeDisplay = hasUnits
-          ? displayRange
-          : `${displayRange || '--'} ${displayUnits || ''}`.trim() || '--';
+        const referenceRangeDisplay = formatRangeWithUnits(displayRange, displayUnits);
 
         return {
           ...row,

package/src/test-results/individual-results-table-tablet/individual-results-table-tablet.component.tsx

@@ -4,12 +4,12 @@ import { useTranslation } from 'react-i18next';
 import { DataTableSkeleton, Button, Search, Form } from '@carbon/react';
 import { CloseIcon, SearchIcon, useLayoutType } from '@openmrs/esm-framework';
 import { EmptyState } from '@openmrs/esm-patient-common-lib';
-import { FilterEmptyState } from '../ui-elements/resetFiltersEmptyState/filter-empty-state.component';
-import type { GroupedObservation } from '../../types';
+import FilterContext from '../filter/filter-context';
+import FilterEmptyState from '../ui-elements/reset-filters-empty-state/filter-empty-state.component';
 import LabSetPanel from './lab-set-panel.component';
 import Overlay from '../tablet-overlay/tablet-overlay.component';
-import FilterContext from '../filter/filter-context';
 import TimelineDataGroup from '../grouped-timeline/timeline-data-group.component';
+import type { GroupedObservation } from '../../types';
 import styles from './individual-results-table-tablet.scss';
 
 interface IndividualResultsTableTabletProps {

package/src/test-results/individual-results-table-tablet/lab-set-panel.component.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
-import { rangeAlreadyHasUnits } from '../grouped-timeline/reference-range-helpers';
+import { formatRangeWithUnits } from '../grouped-timeline/reference-range-helpers';
 import {
   DataTable,
   TableContainer,
@@ -71,10 +71,7 @@ const LabSetPanel: React.FC<LabSetPanelProps> = ({ panel, activePanel, setActive
       hasRange
         ? panel.entries.map((test) => {
             const units = test.units ?? '';
-            // Check if range already includes units to avoid duplication
-            // formatReferenceRange includes units, so if range has units, don't append again
-            const hasUnits = rangeAlreadyHasUnits(test.range, units);
-            const range = hasUnits ? test.range : test.range ? `${test.range} ${units}` : '--';
+            const range = formatRangeWithUnits(test.range, units);
             return {
               id: test.conceptUuid,
               testName: test.display,

package/src/test-results/individual-results-table-tablet/usePanelData.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import useSWRInfinite from 'swr/infinite';
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 import { extractMetaInformation, getConceptUuid } from './helper';
 import {
   type Concept,
@@ -159,32 +159,46 @@ export default function usePanelData(patientUuid: string) {
     [observations],
   );
 
-  const setObservations: Array<ObsRecord> = useMemo(
-    () =>
-      observations
-        ? observations
-            .filter((obs) => !!obs.hasMember)
-            .map((obs) => {
-              const relatedObs = [];
-              obs.hasMember.forEach((memb) => {
-                const membUuid = memb.reference.split('/')[1];
-                const memberObservationIndex = individualObservations.findIndex((obs) => obs.id === membUuid);
-                if (memberObservationIndex > -1) {
-                  relatedObs.push(individualObservations[memberObservationIndex]);
-                  individualObservations.splice(memberObservationIndex, 1);
-                }
-              });
-              return {
-                ...obs,
-                relatedObs,
-              };
-            })
-        : [],
-    [individualObservations, observations],
-  );
+  const setObservations: Array<ObsRecord> = useMemo(() => {
+    if (!observations) {
+      return [];
+    }
+
+    // Create a map of individual observations for efficient lookup
+    const individualObsMap = new Map(individualObservations.map((obs) => [obs.id, obs]));
+    const usedIndividualObsIds = new Set<string>();
+
+    return observations
+      .filter((obs) => !!obs.hasMember)
+      .map((obs) => {
+        const relatedObs: Array<ObsRecord> = [];
+        obs.hasMember.forEach((memb) => {
+          const membUuid = memb.reference.split('/')[1];
+          const memberObs = individualObsMap.get(membUuid);
+          if (memberObs && !usedIndividualObsIds.has(membUuid)) {
+            relatedObs.push(memberObs);
+            usedIndividualObsIds.add(membUuid);
+          }
+        });
+        return {
+          ...obs,
+          relatedObs,
+        };
+      });
+  }, [individualObservations, observations]);
+
+  const remainingIndividualObservations = useMemo(() => {
+    const usedIds = new Set<string>();
+    setObservations.forEach((setObs) => {
+      setObs.relatedObs.forEach((relatedObs) => {
+        usedIds.add(relatedObs.id);
+      });
+    });
+    return individualObservations.filter((obs) => !usedIds.has(obs.id));
+  }, [individualObservations, setObservations]);
 
   const panels = useMemo(() => {
-    const allPanels = [...individualObservations, ...setObservations].sort(
+    const allPanels = [...remainingIndividualObservations, ...setObservations].sort(
       (obs1, obs2) => Date.parse(obs2.effectiveDateTime) - Date.parse(obs1.effectiveDateTime),
     );
     const usedConcepts: Set<string> = new Set();
@@ -195,7 +209,7 @@ export default function usePanelData(patientUuid: string) {
       latestPanels.push(panel);
     });
     return latestPanels;
-  }, [individualObservations, setObservations]);
+  }, [remainingIndividualObservations, setObservations]);
 
   const panelsData = useMemo(
     () => ({