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

package/src/test-results/filter/filter-set.component.tsx

@@ -1,15 +1,15 @@
-import React, { useContext, useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import React, { useContext, useEffect, useState } from 'react';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 import { Accordion, AccordionItem, Button, Checkbox } from '@carbon/react';
 import { useConfig, useLayoutType } from '@openmrs/esm-framework';
 import { type ConfigObject } from '../../config-schema';
 import type { FilterNodeProps, FilterLeafProps } from './filter-types';
-import { FilterEmptyState } from '../ui-elements/resetFiltersEmptyState/filter-empty-state.component';
+import FilterEmptyState from '../ui-elements/reset-filters-empty-state/filter-empty-state.component';
 import FilterContext from './filter-context';
 import styles from './filter-set.scss';
 
-const isIndeterminate = (kids, checkboxes) => {
+const isIndeterminate = (kids: Array<string>, checkboxes: Record<string, boolean>) => {
   return kids && !kids?.every((kid) => checkboxes[kid]) && !kids?.every((kid) => !checkboxes[kid]);
 };
 
@@ -17,65 +17,87 @@ interface FilterSetProps {
   hideFilterSetHeader?: boolean;
 }
 
-interface filterNodeParentProps extends Pick<FilterNodeProps, 'root'> {
+interface FilterNodeParentProps extends Pick<FilterNodeProps, 'root'> {
   itemNumber: number;
 }
 
-function filterTreeNode(inputValue, treeNode) {
-  // If the tree node's display value contains the user input, or any of its children's display contains the user input, return true
-  if (
-    treeNode &&
-    (treeNode.display.toLowerCase().includes(inputValue.toLowerCase()) ||
-      (treeNode.subSets && treeNode.subSets.some((child) => filterTreeNode(inputValue, child))))
-  ) {
-    return true;
+function filterTreeNode(inputValue: string, treeNode: any): boolean {
+  if (!treeNode) {
+    return false;
   }
 
-  // Otherwise, return false
-  return false;
+  const matchesSearch = treeNode.display.toLowerCase().includes(inputValue.toLowerCase());
+  const childMatches = treeNode.subSets?.some((child) => filterTreeNode(inputValue, child)) ?? false;
+
+  return matchesSearch || childMatches;
 }
 
 const FilterSet: React.FC<FilterSetProps> = () => {
   const { roots } = useContext(FilterContext);
+  const config = useConfig<ConfigObject>();
   const [searchTerm, setSearchTerm] = useState('');
   const [treeDataFiltered, setTreeDataFiltered] = useState(roots);
 
   useEffect(() => {
-    // Filter the tree data, but ensure only parent categories (with subSets) are at root level
+    const configuredConceptUuids = config?.resultsViewerConcepts?.map((c) => c.conceptUuid) ?? [];
+
+    // Helper to check if a node or its children match configured concepts
+    const isConfiguredNode = (node: any): boolean => {
+      // Check if the node itself has a matching conceptUuid
+      if (node.conceptUuid && configuredConceptUuids.includes(node.conceptUuid)) {
+        return true;
+      }
+      // Check if any direct child has a matching conceptUuid
+      return (
+        node.subSets?.some((child: any) => child.conceptUuid && configuredConceptUuids.includes(child.conceptUuid)) ??
+        false
+      );
+    };
+
+    // Filter the tree data, ensuring only parent categories (with subSets) are at root level
     const filteredData = (roots as any[]).filter((node) => {
-      // Only include nodes that are parent categories (have subSets)
-      if (!node.subSets || !Array.isArray(node.subSets) || node.subSets.length === 0) {
-        return false; // Exclude leaf tests from root level
+      // Only include nodes that have subSets (are parent categories)
+      if (!node.subSets || !Array.isArray(node.subSets)) {
+        return false;
       }
+
+      // Keep configured concepts even if they have no children after filtering
+      const isConfiguredConcept = isConfiguredNode(node);
+      if (node.subSets.length === 0 && !isConfiguredConcept) {
+        return false;
+      }
+
+      // Apply search filter
       return filterTreeNode(searchTerm, node);
     });
+
     setTreeDataFiltered(filteredData);
-  }, [searchTerm, roots]);
+  }, [searchTerm, roots, config]);
 
   return (
-    <div>
-      <div className={styles.filterSetContent}>
-        {treeDataFiltered?.length > 0 ? (
-          treeDataFiltered?.map((root, index) => (
-            <div className={`${styles.nestedAccordion} ${styles.nestedAccordionTablet}`} key={`filter-node-${index}`}>
-              <FilterNodeParent root={root} itemNumber={index} />
-            </div>
-          ))
-        ) : (
-          <FilterEmptyState clearFilter={() => setSearchTerm('')} />
-        )}
-      </div>
+    <div className={styles.filterSetContent}>
+      {treeDataFiltered?.length > 0 ? (
+        treeDataFiltered?.map((root, index) => (
+          <div className={`${styles.nestedAccordion} ${styles.nestedAccordionTablet}`} key={`filter-node-${index}`}>
+            <FilterNodeParent root={root} itemNumber={index} />
+          </div>
+        ))
+      ) : (
+        <FilterEmptyState clearFilter={() => setSearchTerm('')} />
+      )}
     </div>
   );
 };
 
-const FilterNodeParent = ({ root, itemNumber }: filterNodeParentProps) => {
+const FilterNodeParent = ({ root, itemNumber }: FilterNodeParentProps) => {
   const config = useConfig<ConfigObject>();
   const { t } = useTranslation();
   const tablet = useLayoutType() === 'tablet';
   const [expandAll, setExpandAll] = useState<boolean | undefined>(undefined);
 
-  if (!root.subSets) return;
+  if (!root.subSets) {
+    return;
+  }
 
   const filterParent = root.subSets.map((node, key) => {
     // If node has obs data, it's a leaf - render as FilterLeaf
@@ -88,7 +110,7 @@ const FilterNodeParent = ({ root, itemNumber }: filterNodeParentProps) => {
     }
 
     // If node has subSets, it's a parent - render as FilterNode
-    if (node?.subSets && Array.isArray(node.subSets) && node.subSets.length > 0) {
+    if (node?.subSets && Array.isArray(node.subSets)) {
       return (
         <div key={key}>
           <FilterNode
@@ -108,18 +130,22 @@ const FilterNodeParent = ({ root, itemNumber }: filterNodeParentProps) => {
     );
   });
 
+  const hasChildren = root.subSets && root.subSets.length > 0;
+
   return (
     <div>
       <div className={classNames(styles.treeNodeHeader, { [styles.treeNodeHeaderTablet]: tablet })}>
         <h5>{t(root.display)}</h5>
-        <Button
-          className={styles.button}
-          kind="ghost"
-          size={tablet ? 'md' : 'sm'}
-          onClick={() => setExpandAll((prevValue) => !prevValue)}
-        >
-          <span>{expandAll ? t('collapseAll', 'Collapse all') : t('expandAll', 'Expand all')}</span>
-        </Button>
+        {hasChildren && (
+          <Button
+            className={styles.button}
+            kind="ghost"
+            size={tablet ? 'md' : 'sm'}
+            onClick={() => setExpandAll((prevValue) => !prevValue)}
+          >
+            <span>{expandAll ? t('collapseAll', 'Collapse all') : t('expandAll', 'Expand all')}</span>
+          </Button>
+        )}
       </div>
       {filterParent}
     </div>
@@ -134,11 +160,11 @@ const FilterNode = ({ root, level, open }: FilterNodeProps) => {
 
   // Determine if this is a parent (has children) or leaf (individual test)
   const isParent = parents[root.flatName] && parents[root.flatName].length > 0;
-  const isLeaf = !isParent;
 
   return (
     <Accordion align="start" size={tablet ? 'md' : 'sm'}>
       <AccordionItem
+        disabled={!root.hasData}
         title={
           <Checkbox
             id={root?.flatName}
@@ -156,11 +182,8 @@ const FilterNode = ({ root, level, open }: FilterNodeProps) => {
         {/* If this node has obs data, it's a leaf - render as FilterLeaf */}
         {root?.obs && Array.isArray(root.obs) && root.obs.length > 0 ? (
           <FilterLeaf leaf={root} />
-        ) : (
+        ) : root?.subSets && Array.isArray(root.subSets) && root.subSets.length > 0 ? (
           /* If this node has subSets, it's a parent - recursively render children */
-          root?.subSets &&
-          Array.isArray(root.subSets) &&
-          root.subSets.length > 0 &&
           root.subSets.map((child, index) => {
             /* Check if child is a leaf (has obs) or parent (has subSets) */
             if (child?.obs && Array.isArray(child.obs) && child.obs.length > 0) {
@@ -174,6 +197,9 @@ const FilterNode = ({ root, level, open }: FilterNodeProps) => {
               return <FilterLeaf leaf={child} key={index} />;
             }
           })
+        ) : (
+          /* Parent node with empty subSets - render empty div to maintain accordion structure */
+          <div />
         )}
       </AccordionItem>
     </Accordion>
@@ -182,6 +208,7 @@ const FilterNode = ({ root, level, open }: FilterNodeProps) => {
 
 const FilterLeaf = ({ leaf }: FilterLeafProps) => {
   const { checkboxes, toggleVal } = useContext(FilterContext);
+
   return (
     <div className={styles.filterItem}>
       <Checkbox