tweak batch selection of concepts; wip on checkbox toggle; use DibbsV…

…alueSetType
CDCgov · Dec 2, 2024 · 3b9b22e · 3b9b22e
1 parent e762bca
commit 3b9b22e
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 26 deletions.
diff --git a/query-connector/src/app/queryBuilding/buildFromTemplates/buildfromTemplate.module.scss b/query-connector/src/app/queryBuilding/buildFromTemplates/buildfromTemplate.module.scss
@@ -207,6 +207,7 @@
 .valueSetTemplate__toggleRowHeader > svg {
   color: black;
 }
+
 .valueSetTemplate__checkbox {
   margin-left: 6.5px;
 }
@@ -225,6 +226,17 @@
   background-color: #fff;
   display: flex;
   justify-content: space-between;
+
+  .valueSetTemplate__checkbox label {
+    background-color: #fff;
+  }
+}
+div.accordionBodyExpanded:last-of-type {
+  border-bottom: 1px #dfe1e2 solid;
+
+  .accordionExpandedInner {
+    border-bottom: none !important;
+  }
 }
 
 .accordionExpandedInner {
@@ -245,7 +257,6 @@
 
 .expandedContent > div {
   text-transform: none !important;
-  white-space: nowrap;
   padding-right: 1rem;
 }
 
@@ -257,3 +268,9 @@
   color: #919191;
   display: flex;
 }
+
+.accordionBodyExpanded__right {
+  padding-bottom: 1rem;
+  display: flex;
+  align-items: center;
+}
diff --git a/query-connector/src/app/queryBuilding/components/ConditionSelection.tsx b/query-connector/src/app/queryBuilding/components/ConditionSelection.tsx
@@ -12,7 +12,7 @@ import {
   CategoryNameToConditionOptionMap,
   mapFetchedDataToFrontendStructure,
   ConditionIdToValueSetArray,
-  setIncludeAll,
+  batchSelectConcepts,
 } from "../utils";
 import ConditionColumnDisplay from "../buildFromTemplates/ConditionColumnDisplay";
 import SearchField from "@/app/query/designSystem/searchField/SearchField";
@@ -123,7 +123,7 @@ export const ConditionSelection: React.FC<ConditionSelectionProps> = ({
       // when fetching directly from conditions table (as opposed to a saved query),
       // default to including all value sets
       formattedResults.forEach((result) => {
-        setIncludeAll(result);
+        batchSelectConcepts(result, true);
         return (result.includeValueSet = true);
       });
       ConditionValueSets[id] = formattedResults;

diff --git a/query-connector/src/app/queryBuilding/components/SelectionTable.tsx b/query-connector/src/app/queryBuilding/components/SelectionTable.tsx
@@ -1,15 +1,17 @@
 "use client";
-
+import { useEffect } from "react";
 import styles from "../buildFromTemplates/buildfromTemplate.module.scss";
-import { ValueSetsByGroup, ConditionToValueSetMap } from "../utils";
+import { ValueSetsByGroup, batchSelectConcepts } from "../utils";
 import { DibbsValueSetType } from "@/app/constants";
 import Accordion from "../../query/designSystem/Accordion";
 import SelectionViewAccordionHeader from "./SelectionViewAccordionHeader";
 import SelectionViewAccordionBody from "./SelectionViewAccordionBody";
+import { ValueSet } from "@/app/constants";
+import { GroupedValueSet } from "@/app/query/components/customizeQuery/customizeQueryUtils";
 
 type SelectionTableProps = {
   conditionId: string;
-  valueSets: ConditionToValueSetMap;
+  valueSets: ValueSetsByGroup;
 };
 
 // * @param root0.conditionId - ID of the active/selected condition
@@ -26,27 +28,44 @@ export const SelectionTable: React.FC<SelectionTableProps> = ({
   conditionId,
   valueSets,
 }) => {
+  useEffect(() => {});
+
   return (
     <div data-testid="accordion" className={""}>
-      {renderValueSetAccordions(conditionId, valueSets[conditionId])}
+      {renderValueSetAccordions(conditionId, valueSets)}
     </div>
   );
 };
 
+function toggleVSConceptCheckboxes(items: ValueSet[], setTo: boolean) {
+  items.forEach((item) => {
+    batchSelectConcepts(item, setTo);
+  });
+  return items;
+}
+
 function renderValueSetAccordions(
   conditionId: string,
   valueSets: ValueSetsByGroup
 ) {
-  const handleCheckboxToggle = (valueSetType: string, conditionId: string) => {
+  const handleCheckboxToggle = (
+    valueSetType: DibbsValueSetType,
+    conditionId: string
+  ) => {
     console.log(
+      valueSets[valueSetType],
       `placeholder: deselect all child values (${valueSetType}) for condition ID: ${conditionId}`
     );
   };
+
   const types = Object.keys(valueSets) as Array<DibbsValueSetType>;
 
   const ValueSetAccordionItem = Object.values(types).map(
     function (valueSetType) {
-      const valueSetsForType = Object.values(valueSets[valueSetType]);
+      const valueSetsForType: GroupedValueSet[] = Object.values(
+        valueSets[valueSetType]
+      );
+
       return (
         <div
           className={styles.valueSetTemplate__accordionContainer}
@@ -78,5 +97,6 @@ function renderValueSetAccordions(
       );
     }
   );
+
   return <div>{ValueSetAccordionItem}</div>;
 }
diff --git a/query-connector/src/app/queryBuilding/components/SelectionViewAccordionBody.tsx b/query-connector/src/app/queryBuilding/components/SelectionViewAccordionBody.tsx
@@ -3,12 +3,16 @@ import styles from "../buildFromTemplates/buildfromTemplate.module.scss";
 import { GroupedValueSet } from "@/app/query/components/customizeQuery/customizeQueryUtils";
 import { formatDiseaseDisplay } from "../utils";
 import { tallyConceptsForSingleValueSet } from "../utils";
+import { DibbsValueSetType } from "@/app/constants";
 
 type SelectionViewAccordionBodyProps = {
   id?: string;
-  valueSetType: string;
+  valueSetType: DibbsValueSetType;
   valueSets: GroupedValueSet[];
-  handleCheckboxToggle: (valueSetType: string, conditionId: string) => void;
+  handleCheckboxToggle: (
+    valueSetType: DibbsValueSetType,
+    conditionId: string
+  ) => void;
 };
 
 /**
@@ -47,7 +51,7 @@ const SelectionViewAccordionBody: React.FC<SelectionViewAccordionBodyProps> = ({
                 // disabled={selectedCount == 0}
               />{" "}
             </div>
-            <div>
+            <div className={styles.accordionBodyExpanded__right}>
               {selectedCount}/{totalCount}
             </div>
           </div>

diff --git a/query-connector/src/app/queryBuilding/components/SelectionViewAccordionHeader.tsx b/query-connector/src/app/queryBuilding/components/SelectionViewAccordionHeader.tsx
@@ -2,12 +2,16 @@ import styles from "../buildFromTemplates/buildfromTemplate.module.scss";
 import { Checkbox, Icon } from "@trussworks/react-uswds";
 import { GroupedValueSet } from "@/app/query/components/customizeQuery/customizeQueryUtils";
 import { tallyConcpetsForValueSetGroup } from "../utils";
+import { DibbsValueSetType } from "@/app/constants";
 
 type SelectionViewAccordionBodyProps = {
-  valueSetType: string;
+  valueSetType: DibbsValueSetType;
   conditionId: string;
   valueSets: GroupedValueSet[] | null;
-  handleCheckboxToggle: (valueSetType: string, conditionId: string) => void;
+  handleCheckboxToggle: (
+    valueSetType: DibbsValueSetType,
+    conditionId: string
+  ) => void;
 };
 
 /**

diff --git a/query-connector/src/app/queryBuilding/components/ValueSetSelection.tsx b/query-connector/src/app/queryBuilding/components/ValueSetSelection.tsx
@@ -34,15 +34,6 @@ type ConditionSelectionProps = {
   valueSetsByCondition: ConditionIdToValueSetArray;
 };
 
-// const renderSelectionTable = (
-//   activeCondition: string,
-//   valueSets: ValueSetsByGroup
-// ) => {
-//   return (
-//     <SelectionTable conditionId={activeCondition ?? ""} valueSets={valueSets} />
-//   );
-// };
-
 /**
  * Display component for a condition on the query building page
  * @param root0 - params
@@ -217,7 +208,7 @@ export const ValueSetSelection: React.FC<ConditionSelectionProps> = ({
             {valueSets && (
               <SelectionTable
                 conditionId={activeCondition ?? ""}
-                valueSets={valueSets}
+                valueSets={valueSets[activeCondition]}
               />
             )}
           </div>

diff --git a/query-connector/src/app/queryBuilding/utils.ts b/query-connector/src/app/queryBuilding/utils.ts
@@ -166,11 +166,12 @@ export function tallyConcpetsForValueSetGroup (
  * Utility method that marks all concepts as included for
  * a given ValueSet
  * @param input - the ValueSet to update
+ * @param value - the value to set for each concept.include
  * @returns the updated ValueSet
  */
-export const setIncludeAll = (input: ValueSet) => {
+export const batchSelectConcepts = (input: ValueSet, value: boolean) => {
   input.concepts.forEach((concept) => {
-    concept.include = true;
+    concept.include = value;
   });
 
   return input