improvements to customize query page - pt 1 (#2642)

* fractionize selection state

* button selection state toggle

* have the links smart toggle

* [pre-commit.ci] auto fixes from pre-commit hooks

* lint

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

containers/tefca-viewer/src/app/query/components/CustomizeQuery.tsx

@@ -59,11 +59,6 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
     (group) => group.items,
   ).length;
 
-  // Check if there are items in the current active tab
-  const hasItemsInTabs = Object.values(valueSetOptions[activeTab]).some(
-    (group) => group.items.length > 0,
-  );
-
   // Keeps track of which side nav tab to display to users
   const handleTabChange = (tab: ValueSetType) => {
     setActiveTab(tab);
@@ -181,16 +176,13 @@ const CustomizeQuery: React.FC<CustomizeQueryProps> = ({
         activeTab={activeTab}
         handleTabChange={handleTabChange}
         handleSelectAllForTab={handleSelectAllForTab}
-        hasItemsInTab={hasItemsInTabs}
+        valueSetOptions={valueSetOptions}
       />
       {Object.entries(valueSetOptions[activeTab]).map(([groupIndex, group]) => {
-        const selectedCount = group.items.filter((item) => item.include).length;
-
         return (
           <Accordion
             title={
               <CustomizeQueryAccordionHeader
-                selectedCount={selectedCount}
                 handleSelectAllChange={handleSelectAllChange}
                 groupIndex={groupIndex}
                 group={group}

containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryAccordionHeader.tsx

@@ -3,7 +3,6 @@ import styles from "./customizeQuery.module.css";
 import { GroupedValueSet } from "./customizeQueryUtils";
 
 type CustomizeQueryAccordionProps = {
-  selectedCount: number;
   handleSelectAllChange: (groupIndex: string, checked: boolean) => void;
   groupIndex: string;
   group: GroupedValueSet;
@@ -12,19 +11,20 @@ type CustomizeQueryAccordionProps = {
 /**
  * Rendering component for customize query header
  * @param param0 - props for rendering
- * @param param0.selectedCount - stateful tally of the number of selected valuesets
  * @param param0.handleSelectAllChange
  * Listner function to include all valuesets when checkbox is selected
  * @param param0.groupIndex - index corresponding to group
  * @param param0.group - matched concept containing all rendered valuesets
  * @returns A component that renders the customization query body
  */
 const CustomizeQueryAccordionHeader: React.FC<CustomizeQueryAccordionProps> = ({
-  selectedCount,
   handleSelectAllChange,
   groupIndex,
   group,
 }) => {
+  const selectedTotal = group.items.length;
+  const selectedCount = group.items.filter((item) => item.include).length;
+
   return (
     <div
       className={`${styles.accordionHeader} display-flex flex-no-wrap flex-align-start customize-query-header`}
@@ -63,7 +63,7 @@ const CustomizeQueryAccordionHeader: React.FC<CustomizeQueryAccordionProps> = ({
           <strong style={{ marginLeft: "20px" }}>System:</strong> {group.system}
         </span>
       </div>
-      <span className="margin-left-auto">{`${selectedCount} selected`}</span>
+      <span className="margin-left-auto">{`${selectedCount} of ${selectedTotal} selected`}</span>
     </div>
   );
 };

containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryBulkSelect.tsx

@@ -0,0 +1,52 @@
+import styles from "../customizeQuery/customizeQuery.module.css";
+
+type CustomizeQueryBulkSelectProps = {
+  allItemsDeselected: boolean;
+  allItemsSelected: boolean;
+  handleBulkSelectForTab: (checked: boolean) => void;
+  activeTab: string;
+};
+/**
+ *
+ * @param root0 - params
+ * @param root0.allItemsDeselected - boolean used for the deselect toggle
+ * @param root0.allItemsSelected - boolean used for the select toggle
+ * @param root0.handleBulkSelectForTab - handler function for the link toggles
+ * @param root0.activeTab - which tab is currently selected
+ * @returns bulk select link selection
+ */
+const CustomizeQueryBulkSelect: React.FC<CustomizeQueryBulkSelectProps> = ({
+  allItemsDeselected,
+  allItemsSelected,
+  handleBulkSelectForTab,
+  activeTab,
+}) => {
+  return (
+    <div className="display-flex">
+      {!allItemsSelected && (
+        <button
+          className={`usa-button usa-button--unstyled ${styles.bulkSelectLink} `}
+          onClick={(e) => {
+            e.preventDefault();
+            handleBulkSelectForTab(true);
+          }}
+        >
+          Select all {activeTab}
+        </button>
+      )}
+      {!allItemsDeselected && (
+        <button
+          className={`usa-button usa-button--unstyled ${styles.bulkSelectLink} `}
+          onClick={(e) => {
+            e.preventDefault();
+            handleBulkSelectForTab(false);
+          }}
+        >
+          Deselect all {activeTab}
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default CustomizeQueryBulkSelect;

containers/tefca-viewer/src/app/query/components/customizeQuery/CustomizeQueryNav.tsx

@@ -1,11 +1,15 @@
 import { ValueSetType } from "@/app/constants";
 import styles from "./customizeQuery.module.css";
+import CustomizeQueryBulkSelect from "./CustomizeQueryBulkSelect";
+import { GroupedValueSet } from "./customizeQueryUtils";
 
 type CustomizeQueryNavProps = {
-  activeTab: string;
+  activeTab: ValueSetType;
   handleTabChange: (tabName: ValueSetType) => void;
   handleSelectAllForTab: (checked: boolean) => void;
-  hasItemsInTab: boolean;
+  valueSetOptions: {
+    [key in ValueSetType]: { [vsNameAuthorSystem: string]: GroupedValueSet };
+  };
 };
 
 /**
@@ -15,15 +19,26 @@ type CustomizeQueryNavProps = {
  * @param param0.activeTab - currently active tab
  * @param param0.handleSelectAllForTab - Listener function to grab all the
  * returned labs when the select all button is hit
- * @param param0.hasItemsInTab - Boolean indicating if there are items in the current tab
+ * @param param0.valueSetOptions - the selected ValueSet items
  * @returns Nav component for the customize query page
  */
 const CustomizeQueryNav: React.FC<CustomizeQueryNavProps> = ({
   handleTabChange,
   activeTab,
   handleSelectAllForTab,
-  hasItemsInTab,
+  valueSetOptions,
 }) => {
+  const hasSelectableItems = Object.values(valueSetOptions[activeTab]).some(
+    (group) => group.items.length > 0,
+  );
+  const allItemsDeselected = Object.values(valueSetOptions[activeTab])
+    .flatMap((groupedValSets) => groupedValSets.items.flatMap((i) => i.include))
+    .every((p) => !p);
+
+  const allItemsSelected = Object.values(valueSetOptions[activeTab])
+    .flatMap((groupedValSets) => groupedValSets.items.flatMap((i) => i.include))
+    .every((p) => p);
+
   return (
     <>
       <nav className={`${styles.customizeQueryNav}`}>
@@ -66,18 +81,13 @@ const CustomizeQueryNav: React.FC<CustomizeQueryNavProps> = ({
 
       <ul className="usa-nav__primary usa-accordion"></ul>
       <hr className="custom-hr"></hr>
-      {hasItemsInTab ? (
-        <a
-          href="#"
-          type="button"
-          className="include-all-link"
-          onClick={(e) => {
-            e.preventDefault();
-            handleSelectAllForTab(true);
-          }}
-        >
-          Include all {activeTab}
-        </a>
+      {hasSelectableItems ? (
+        <CustomizeQueryBulkSelect
+          allItemsDeselected={allItemsDeselected}
+          allItemsSelected={allItemsSelected}
+          handleBulkSelectForTab={handleSelectAllForTab}
+          activeTab={activeTab}
+        />
       ) : (
         <div className="font-sans-sm text-light padding-y-3">
           No {activeTab} available for this query.

containers/tefca-viewer/src/app/query/components/customizeQuery/customizeQuery.module.css

@@ -172,3 +172,9 @@
 .customizeQueryGridRow:last-child {
   border-bottom: none;
 }
+
+.bulkSelectLink {
+  padding: 1.25rem 0;
+  text-decoration: underline;
+  padding-right: 1rem;
+}