granularity css for all collections

elixir-europe · Feb 21, 2024 · 0c44127 · 0c44127
1 parent ab6a89c
commit 0c44127
Show file tree

Hide file tree

Showing 7 changed files with 225 additions and 110 deletions.
diff --git a/frontend/src/components/Analyses/AnalysesResults.js b/frontend/src/components/Analyses/AnalysesResults.js
@@ -40,6 +40,10 @@ function AnalysesResults (props) {
   const [queryArray, setQueryArray] = useState([])
   const [arrayFilter, setArrayFilter] = useState([])
 
+  const [isActive1, setIsActive1] = useState(false)
+  const [isActive2, setIsActive2] = useState(false)
+  const [isActive3, setIsActive3] = useState(false)
+
   const { getStoredToken, authenticateUser } = useContext(AuthContext)
   let queryStringTerm = ''
 
@@ -48,6 +52,33 @@ function AnalysesResults (props) {
   const auth = useAuth()
   let isAuthenticated = auth.userData?.id_token ? true : false
 
+  const handleTypeResults1 = () => {
+    setShow1(true)
+    setShow2(false)
+    setShow3(false)
+    setIsActive1(true)
+    setIsActive2(false)
+    setIsActive3(false)
+  }
+
+  const handleTypeResults2 = () => {
+    setShow2(true)
+    setShow1(false)
+    setShow3(false)
+    setIsActive2(true)
+    setIsActive3(false)
+    setIsActive1(false)
+  }
+
+  const handleTypeResults3 = () => {
+    setShow3(true)
+    setShow1(false)
+    setShow2(false)
+    setIsActive3(true)
+    setIsActive1(false)
+    setIsActive2(false)
+  }
+
   useEffect(() => {
     const apiCall = async () => {
       if (isAuthenticated === false) {
@@ -198,10 +229,7 @@ function AnalysesResults (props) {
           }
 
           if (token === null) {
-            res = await axios.post(
-              configData.API_URL + '/analyses',
-              jsonData1
-            )
+            res = await axios.post(configData.API_URL + '/analyses', jsonData1)
           } else {
             const headers = { Authorization: `Bearer ${token}` }
 
@@ -305,10 +333,7 @@ function AnalysesResults (props) {
 
           if (token === null) {
             console.log('Querying without token')
-            res = await axios.post(
-              configData.API_URL + '/analyses',
-              jsonData2
-            )
+            res = await axios.post(configData.API_URL + '/analyses', jsonData2)
           } else {
             console.log('Querying WITH token')
             const headers = { Authorization: `Bearer ${token}` }
@@ -394,28 +419,12 @@ function AnalysesResults (props) {
     apiCall()
   }, [])
 
-  const handleTypeResults1 = () => {
-    setShow1(true)
-    setShow2(false)
-    setShow3(false)
-  }
-
-  const handleTypeResults2 = () => {
-    setShow2(true)
-    setShow1(false)
-    setShow3(false)
-  }
-
-  const handleTypeResults3 = () => {
-    setShow3(true)
-    setShow1(false)
-    setShow2(false)
-  }
   const onSubmit = () => {
     setSkipTrigger(skip)
     setLimitTrigger(limit)
     setTimeOut(false)
   }
+
   return (
     <div>
       {timeOut === false && (
@@ -435,17 +444,35 @@ function AnalysesResults (props) {
           {' '}
           {timeOut && error !== 'Connection error. Please retry' && (
             <div>
-              <div className='selectGranularity'>
+          <div className='selectGranularity'>
                 <h4>Granularity:</h4>
                 <button className='typeResults' onClick={handleTypeResults1}>
-                  <h5>Boolean</h5>
+                  <h5
+                    className={
+                      isActive1 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Boolean
+                  </h5>
                 </button>
                 <button className='typeResults' onClick={handleTypeResults2}>
-                  <h5>Count</h5>
+                  <h5
+                    className={
+                      isActive2 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Count
+                  </h5>
                 </button>
                 {props.resultSets !== 'MISS' && (
                   <button className='typeResults' onClick={handleTypeResults3}>
-                    <h5>Full response</h5>
+                    <h5
+                      className={
+                        isActive3 ? 'granularityActive' : 'granularityNoActive'
+                      }
+                    >
+                      Full response
+                    </h5>
                   </button>
                 )}
               </div>

diff --git a/frontend/src/components/Biosamples/BiosamplesResults.js b/frontend/src/components/Biosamples/BiosamplesResults.js
@@ -40,6 +40,10 @@ function BiosamplesResults (props) {
   const [queryArray, setQueryArray] = useState([])
   const [arrayFilter, setArrayFilter] = useState([])
 
+  const [isActive1, setIsActive1] = useState(false)
+  const [isActive2, setIsActive2] = useState(false)
+  const [isActive3, setIsActive3] = useState(false)
+
   const { getStoredToken, authenticateUser } = useContext(AuthContext)
   let queryStringTerm = ''
 
@@ -48,6 +52,39 @@ function BiosamplesResults (props) {
   const auth = useAuth()
   let isAuthenticated = auth.userData?.id_token ? true : false
 
+  const handleTypeResults1 = () => {
+    setShow1(true)
+    setShow2(false)
+    setShow3(false)
+    setIsActive1(true)
+    setIsActive2(false)
+    setIsActive3(false)
+  }
+
+  const handleTypeResults2 = () => {
+    setShow2(true)
+    setShow1(false)
+    setShow3(false)
+    setIsActive2(true)
+    setIsActive3(false)
+    setIsActive1(false)
+  }
+
+  const handleTypeResults3 = () => {
+    setShow3(true)
+    setShow1(false)
+    setShow2(false)
+    setIsActive3(true)
+    setIsActive1(false)
+    setIsActive2(false)
+  }
+
+  const onSubmit = () => {
+    setSkipTrigger(skip)
+    setLimitTrigger(limit)
+    setTimeOut(false)
+  }
+
   useEffect(() => {
     const apiCall = async () => {
       if (isAuthenticated === false) {
@@ -394,28 +431,7 @@ function BiosamplesResults (props) {
     apiCall()
   }, [])
 
-  const handleTypeResults1 = () => {
-    setShow1(true)
-    setShow2(false)
-    setShow3(false)
-  }
-
-  const handleTypeResults2 = () => {
-    setShow2(true)
-    setShow1(false)
-    setShow3(false)
-  }
 
-  const handleTypeResults3 = () => {
-    setShow3(true)
-    setShow1(false)
-    setShow2(false)
-  }
-  const onSubmit = () => {
-    setSkipTrigger(skip)
-    setLimitTrigger(limit)
-    setTimeOut(false)
-  }
   return (
     <div>
       {timeOut === false && (
@@ -438,14 +454,34 @@ function BiosamplesResults (props) {
               <div className='selectGranularity'>
                 <h4>Granularity:</h4>
                 <button className='typeResults' onClick={handleTypeResults1}>
-                  <h5>Boolean</h5>
+                  <h5
+                    className={
+                      isActive1 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Boolean
+                  </h5>
                 </button>
                 <button className='typeResults' onClick={handleTypeResults2}>
-                  <h5>Count</h5>
+                  <h5
+                    className={
+                      isActive2 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Count
+                  </h5>
                 </button>
-                {props.resultSets !== 'MISS' && <button className='typeResults' onClick={handleTypeResults3}>
-                  <h5>Full response</h5>
-                </button>}
+                {props.resultSets !== 'MISS' && (
+                  <button className='typeResults' onClick={handleTypeResults3}>
+                    <h5
+                      className={
+                        isActive3 ? 'granularityActive' : 'granularityNoActive'
+                      }
+                    >
+                      Full response
+                    </h5>
+                  </button>
+                )}
               </div>
             </div>
           )}

diff --git a/frontend/src/components/Datasets/ResultsDatasets.css b/frontend/src/components/Datasets/ResultsDatasets.css
@@ -382,9 +382,9 @@ p a {
     justify-content: center;
     align-items: center;
     width: -moz-fit-content;
-    width: 100%;
+    width: fit-content;
     background: #c8d4e6;
-    height: 60px;
+    height: fit-content;
     margin-top: 2px;
   }
 }
diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js
@@ -36,23 +36,38 @@ function VariantsResults (props) {
   const [resultsPerDataset, setResultsDataset] = useState([])
   const [resultsNotPerDataset, setResultsNotPerDataset] = useState([])
 
+  const [isActive1, setIsActive1] = useState(false)
+  const [isActive2, setIsActive2] = useState(false)
+  const [isActive3, setIsActive3] = useState(false)
+
   let queryStringTerm = ''
+
+
   const handleTypeResults1 = () => {
     setShow1(true)
     setShow2(false)
     setShow3(false)
+    setIsActive1(true)
+    setIsActive2(false)
+    setIsActive3(false)
   }
 
   const handleTypeResults2 = () => {
     setShow2(true)
     setShow1(false)
     setShow3(false)
+    setIsActive2(true)
+    setIsActive3(false)
+    setIsActive1(false)
   }
 
   const handleTypeResults3 = () => {
     setShow3(true)
     setShow1(false)
     setShow2(false)
+    setIsActive3(true)
+    setIsActive1(false)
+    setIsActive2(false)
   }
 
   const auth = useAuth()
@@ -653,17 +668,35 @@ function VariantsResults (props) {
           )}
           {timeOut && error !== 'Connection error. Please retry' && (
             <div>
-              <div className='selectGranularity'>
+               <div className='selectGranularity'>
                 <h4>Granularity:</h4>
                 <button className='typeResults' onClick={handleTypeResults1}>
-                  <h5>Boolean</h5>
+                  <h5
+                    className={
+                      isActive1 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Boolean
+                  </h5>
                 </button>
                 <button className='typeResults' onClick={handleTypeResults2}>
-                  <h5>Count</h5>
+                  <h5
+                    className={
+                      isActive2 ? 'granularityActive' : 'granularityNoActive'
+                    }
+                  >
+                    Count
+                  </h5>
                 </button>
                 {props.resultSets !== 'MISS' && (
                   <button className='typeResults' onClick={handleTypeResults3}>
-                    <h5>Full response</h5>
+                    <h5
+                      className={
+                        isActive3 ? 'granularityActive' : 'granularityNoActive'
+                      }
+                    >
+                      Full response
+                    </h5>
                   </button>
                 )}
               </div>

diff --git a/frontend/src/components/Individuals/IndividualsResults.js b/frontend/src/components/Individuals/IndividualsResults.js
@@ -403,20 +403,26 @@ function IndividualsResults (props) {
     setShow2(false)
     setShow3(false)
     setIsActive1(true)
+    setIsActive2(false)
+    setIsActive3(false)
   }
 
   const handleTypeResults2 = () => {
     setShow2(true)
     setShow1(false)
     setShow3(false)
     setIsActive2(true)
+    setIsActive3(false)
+    setIsActive1(false)
   }
 
   const handleTypeResults3 = () => {
     setShow3(true)
     setShow1(false)
     setShow2(false)
     setIsActive3(true)
+    setIsActive1(false)
+    setIsActive2(false)
   }
   const onSubmit = () => {
     setSkipTrigger(skip)