[GLT-4305] select/deselect all QC gates on TAT trend report (#241)

changes/add_GC-10434

@@ -0,0 +1 @@
+Checkbox to select/deselect all QC gates on TAT trend report

src/main/resources/templates/tat-trend.html

@@ -45,6 +45,8 @@ <h1 class="text-green-200 font-sarabun font-light text-32">TAT Trend Report</h1>
         </div>
       </div>
       <div id="gatesCheckboxes" class="flex gap-2 mt-2 font-inter font-medium text-12 items-center">
+        <label class="flex items-center gap-1"><input type="checkbox" id="selectAllGates" checked> Select/Deselect
+          All</label>
         <label class="flex items-center gap-1"><input type="checkbox" value="Receipt" checked> Receipt</label>
         <label class="flex items-center gap-1"><input type="checkbox" value="Extraction" checked> Extraction</label>
         <label class="flex items-center gap-1"><input type="checkbox" value="Library Prep" checked> Library

ts/tat-trend.ts

@@ -177,6 +177,32 @@ function getGroup(date: Date, selectedGrouping: string): string {
   }
 }
 
+function selectAllGates(onUpdate: () => void) {
+  const selectAllCheckboxId = "selectAllGates";
+  const checkboxesContainerId = "gatesCheckboxes";
+
+  const selectAllCheckbox = getRequiredElementById(
+    selectAllCheckboxId
+  ) as HTMLInputElement;
+  const checkboxes = document.querySelectorAll<HTMLInputElement>(
+    `#${checkboxesContainerId} input[type='checkbox']:not(#${selectAllCheckboxId})`
+  );
+  selectAllCheckbox.addEventListener("change", () => {
+    const isChecked = selectAllCheckbox.checked;
+    checkboxes.forEach((checkbox) => {
+      checkbox.checked = isChecked;
+    });
+    onUpdate();
+  });
+  checkboxes.forEach((checkbox) => {
+    checkbox.addEventListener("change", () => {
+      const allChecked = Array.from(checkboxes).every((cb) => cb.checked);
+      selectAllCheckbox.checked = allChecked;
+      onUpdate();
+    });
+  });
+}
+
 function groupData(
   jsonData: any[],
   selectedGrouping: string,
@@ -683,6 +709,7 @@ window.addEventListener("load", () => {
       selectedDataType
     );
   };
+  selectAllGates(handlePlotUpdate);
 
   const handleNewPlot = (event: Event) => {
     const buttons = document.querySelectorAll("#groupingButtons button");