From 2045fee70453dcb680c4d13fba36a73609347b70 Mon Sep 17 00:00:00 2001
From: porink0424 <daichi5967@gmail.com>
Date: Wed, 2 Oct 2024 13:56:07 +0900
Subject: [PATCH] Add "Check All" toggle button

---
 .../src/components/PlotParallelCoordinate.tsx | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/tslib/react/src/components/PlotParallelCoordinate.tsx b/tslib/react/src/components/PlotParallelCoordinate.tsx
index 1745789d..b97fd547 100644
--- a/tslib/react/src/components/PlotParallelCoordinate.tsx
+++ b/tslib/react/src/components/PlotParallelCoordinate.tsx
@@ -1,5 +1,6 @@
 import {
   Checkbox,
+  Divider,
   FormControlLabel,
   FormGroup,
   Grid,
@@ -243,6 +244,16 @@ const useTargets = (
   const searchSpace = useMergedUnionSearchSpace(study?.union_search_space)
   const [targets2] = useParamTargets(searchSpace)
   const [checked, setChecked] = useState<boolean[]>([true])
+  const [checkedAll, setCheckedAll] = useState<boolean>(true)
+
+  const toggleCheckedAll = () => {
+    if (checkedAll) {
+      setChecked(checked.map(() => false))
+    } else {
+      setChecked(checked.map(() => true))
+    }
+    setCheckedAll((prevCheckedAll) => !prevCheckedAll)
+  }
 
   const allTargets = [...targets1, ...targets2]
   useEffect(() => {
@@ -276,6 +287,17 @@ const useTargets = (
 
   const renderCheckBoxes = (): ReactNode => (
     <FormGroup>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={checkedAll}
+            onChange={toggleCheckedAll}
+            name="checkedAll"
+          />
+        }
+        label="Check All"
+      />
+      <Divider />
       {allTargets.map((t, i) => {
         const key = t.toLabel(study?.metric_names)
         return (