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

package/src/test-results/grouped-timeline/timeline-data-group.component.tsx

@@ -9,6 +9,7 @@ import type {
   NewRowStartCellProps,
   TimelineDataGroupProps,
 } from './grouped-timeline-types';
+import { getMostRecentObservationWithRange, formatRangeWithUnits } from './reference-range-helpers';
 import FilterContext from '../filter/filter-context';
 import styles from './grouped-timeline.scss';
 
@@ -130,6 +131,8 @@ const NewRowStartCell: React.FC<NewRowStartCellProps> = ({
     });
   }, [patientUuid, conceptUuid, title]);
 
+  const rangeUnitsDisplay = formatRangeWithUnits(range, units);
+
   return (
     <div
       className={styles.rowStartCell}
@@ -146,9 +149,7 @@ const NewRowStartCell: React.FC<NewRowStartCellProps> = ({
           <span className={styles.trendlineLink}>{title}</span>
         )}
       </span>
-      <span className={styles.rangeUnits}>
-        {range} {units}
-      </span>
+      <span className={styles.rangeUnits}>{rangeUnitsDisplay}</span>
     </div>
   );
 };
@@ -196,14 +197,20 @@ const DataRows: React.FC<DataRowsProps> = ({ patientUuid, timeColumns, rowData,
     <Grid dataColumns={timeColumns.length} padding style={{ gridColumn: 'span 2' }}>
       {rowData.map((row, index) => {
         const obs = row.entries;
-        const { units = '', range = '', obs: values } = row;
+        const { obs: values } = row;
         const isString = isNaN(parseFloat(values?.[0]?.value));
+
+        // Note: Units are only at the concept/node level, not observation-level
+        const mostRecentObsWithRange = getMostRecentObservationWithRange(row.entries);
+        const displayRange = mostRecentObsWithRange?.range ?? row.range ?? '';
+        const displayUnits = row.units ?? '';
+
         return (
           <React.Fragment key={index}>
             <NewRowStartCell
               {...{
-                units,
-                range,
+                units: displayUnits,
+                range: displayRange,
                 title: row.display,
                 shadow: showShadow,
                 conceptUuid: row.conceptUuid,

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

@@ -2,22 +2,41 @@ import { useMemo } from 'react';
 import useSWR from 'swr';
 import useSWRInfinite from 'swr/infinite';
 import { openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
-import { usePatientChartStore } from '@openmrs/esm-patient-common-lib';
+import { type OBSERVATION_INTERPRETATION } from '@openmrs/esm-patient-common-lib';
 import { assessValue, exist } from '../loadPatientTestData/helpers';
+import { selectReferenceRange, formatReferenceRange, type ReferenceRanges } from './reference-range-helpers';
 
 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;
   hiNormal?: number;
+  lowAbsolute?: number;
+  lowCritical?: number;
   lowNormal?: number;
+  units?: string;
   range?: string;
   subSets: Array<ObsTreeNode>;
-  obs: Array<{ value: string }>;
+  obs: Array<{
+    value: string;
+    interpretation?: OBSERVATION_INTERPRETATION;
+    obsDatetime?: string;
+    // Observation-level reference ranges (criteria-based)
+    // Note: Units are only at the concept/node level, not observation-level
+    hiAbsolute?: number;
+    hiCritical?: number;
+    hiNormal?: number;
+    lowAbsolute?: number;
+    lowCritical?: number;
+    lowNormal?: number;
+  }>;
 }
 
 const augmentObstreeData = (node: ObsTreeNode, prefix: string | undefined) => {
@@ -40,20 +59,87 @@ const augmentObstreeData = (node: ObsTreeNode, prefix: string | undefined) => {
     outData.subSets = outData.subSets.map((subNode: ObsTreeNode) => augmentObstreeData(subNode, outData.flatName));
     outData.hasData = outData.subSets.some((subNode: ObsTreeNode) => subNode.hasData);
   }
+  // Format node-level range for display (using lowNormal/hiNormal)
   if (exist(outData?.hiNormal, outData?.lowNormal)) {
-    outData.range = `${outData.lowNormal} – ${outData.hiNormal}`;
+    outData.range = formatReferenceRange(
+      {
+        lowNormal: outData.lowNormal,
+        hiNormal: outData.hiNormal,
+        units: outData.units,
+      },
+      outData.units,
+    );
   }
+
   if (outData?.obs?.length) {
-    const assess = assessValue(outData);
-    outData.obs = outData.obs.map((ob) => ({ ...ob, interpretation: assess(ob.value) }));
+    outData.obs = outData.obs.map((ob) => {
+      // Note: Units are only at the concept/node level, not observation-level
+      const observationRanges: ReferenceRanges | undefined =
+        ob.lowNormal !== undefined || ob.hiNormal !== undefined
+          ? {
+              hiAbsolute: ob.hiAbsolute,
+              hiCritical: ob.hiCritical,
+              hiNormal: ob.hiNormal,
+              lowAbsolute: ob.lowAbsolute,
+              lowCritical: ob.lowCritical,
+              lowNormal: ob.lowNormal,
+            }
+          : undefined;
+
+      const nodeRanges: ReferenceRanges | undefined = {
+        hiAbsolute: outData.hiAbsolute,
+        hiCritical: outData.hiCritical,
+        hiNormal: outData.hiNormal,
+        lowAbsolute: outData.lowAbsolute,
+        lowCritical: outData.lowCritical,
+        lowNormal: outData.lowNormal,
+        units: outData.units,
+      };
+
+      const selectedRanges = selectReferenceRange(observationRanges, nodeRanges);
+      const assess = selectedRanges ? assessValue(selectedRanges) : assessValue(nodeRanges);
+      const interpretation = ob.interpretation ?? assess(ob.value);
+
+      // Always use node-level units since observation-level ranges don't have units
+      const displayRange = observationRanges
+        ? formatReferenceRange(observationRanges, outData.units)
+        : outData.range || '--';
+
+      return {
+        ...ob,
+        interpretation,
+        range: displayRange,
+      };
+    });
     outData.hasData = true;
   }
 
   return { ...outData } as ObsTreeNode;
 };
 
-const useGetObstreeData = (conceptUuid: string) => {
-  const { patientUuid } = usePatientChartStore();
+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}`,
     openmrsFetch,
@@ -74,8 +160,7 @@ const useGetObstreeData = (conceptUuid: string) => {
   return result;
 };
 
-const useGetManyObstreeData = (uuidArray: Array<string>) => {
-  const { patientUuid } = usePatientChartStore();
+const useGetManyObstreeData = (patientUuid: string, uuidArray: Array<string>) => {
   const getObstreeUrl = (index: number) => {
     if (index < uuidArray.length && patientUuid) {
       return `${restBaseUrl}/obstree?patient=${patientUuid}&concept=${uuidArray[index]}`;
@@ -90,10 +175,14 @@ const useGetManyObstreeData = (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 {
@@ -110,8 +199,14 @@ const useGetManyObstreeData = (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 };