Merge pull request #30 from elixir-europe/elixir-bsc

Elixir bsc
elixir-europe · Dec 14, 2023 · f0f834c · f0f834c
2 parents c086e6f + 7457f5b
commit f0f834c
Show file tree

Hide file tree

Showing 34 changed files with 1,464 additions and 885 deletions.
diff --git a/frontend/public/padlock.png b/frontend/public/padlock.png
diff --git a/frontend/public/right-arrow.png b/frontend/public/right-arrow.png
diff --git a/frontend/public/user.png b/frontend/public/user.png
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -58,6 +58,13 @@ html {
   margin-top: 5px;
 }
 
+.containerTableResults {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+}
+
 .newSearchButton:hover {
   color: rgb(118, 151, 228);
 }
@@ -279,7 +286,12 @@ html {
 
 .spanQE {
   display: block;
-  padding: 14px 15px;
+  padding: 8px 4px;
+  font-size: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
 }
 
 .btn-3::before,
@@ -626,7 +638,8 @@ hr {
 
 .bulbLogo {
   height: 16px;
-  margin-right: 10px;
+  margin-right: 11px;
+  margin-left: 4px;
 }
 
 .arrowLogo {
@@ -679,7 +692,7 @@ hr {
 .example {
   display: flex;
   align-items: center;
-  margin-right: -114px;
+  margin-right: -117px;
   margin-top: 22px;
   margin-bottom: 22px;
   flex-direction: row-reverse;

diff --git a/frontend/src/components/Biosamples/BiosamplesResults.js b/frontend/src/components/Biosamples/BiosamplesResults.js
@@ -54,18 +54,10 @@ function BiosamplesResults (props) {
         }
       }
 
-      if (isAuthenticated) {
-        setLoginRequired(false)
-      } else {
-        setLoginRequired(true)
-        setMessageLoginCount('PLEASE LOG IN FOR GETTING THE NUMBER OF RESULTS')
-        setMessageLoginFullResp('PLEASE LOG IN FOR GETTING THE FULL RESPONSE')
-      }
-
       if (props.query !== null) {
         if (props.query.includes(',')) {
           queryStringTerm = props.query.split(',')
-          console.log(queryStringTerm)
+
           queryStringTerm.forEach((element, index) => {
             element = element.trim()
             if (
@@ -92,7 +84,6 @@ function BiosamplesResults (props) {
                 queryArray[index].push('%')
               }
 
-              console.log(queryArray)
               const alphaNumFilter = {
                 id: queryArray[index][0],
                 operator: queryArray[index][2],
@@ -157,7 +148,7 @@ function BiosamplesResults (props) {
         beaconsList.reverse()
 
         if (props.query === null) {
-          // show all individuals
+          // show all biosamples
 
           var jsonData1 = {
             meta: {
@@ -175,19 +166,29 @@ function BiosamplesResults (props) {
             }
           }
           jsonData1 = JSON.stringify(jsonData1)
-          console.log(jsonData1)
 
-          const token = auth.userData.access_token
-          console.log(token)
-          const headers = { Authorization: `Bearer ${token}` }
+          let token = null
+          if (auth.userData === null) {
+            token = getStoredToken()
+          } else {
+            token = auth.userData.access_token
+          }
+
+          if (token === null) {
+            res = await axios.post(
+              configData.API_URL + '/biosamples',
+              jsonData1
+            )
+          } else {
+            const headers = { Authorization: `Bearer ${token}` }
 
-          res = await axios.post(
-            configData.API_URL + '/biosamples',
-            jsonData1,
-            { headers: headers }
-          )
+            res = await axios.post(
+              configData.API_URL + '/biosamples',
+              jsonData1,
+              { headers: headers }
+            )
+          }
 
-          console.log(res)
           setTimeOut(true)
 
           if (res.data.responseSummary.numTotalResults < 1) {
@@ -197,7 +198,6 @@ function BiosamplesResults (props) {
           } else {
             res.data.response.resultSets.forEach((element, index) => {
               if (res.data.response.resultSets[index].resultsCount > 0) {
-                console.log(res.data.response.resultSets[index].results.length)
                 res.data.response.resultSets[index].results.forEach(
                   (element2, index2) => {
                     let arrayResult = [
@@ -230,15 +230,30 @@ function BiosamplesResults (props) {
             }
           }
           jsonData2 = JSON.stringify(jsonData2)
-          console.log(jsonData2)
-
-          const token = auth.userData.access_token
-          console.log(token)
-          const headers = { Authorization: `Bearer ${token}` }
 
-          res = await axios.post(configData.API_URL + '/biosamples', jsonData2, {headers: headers})
+          let token = null
+          if (auth.userData === null) {
+            token = getStoredToken()
+          } else {
+            token = auth.userData.access_token
+          }
 
-          console.log(res)
+          if (token === null) {
+            console.log('Querying without token')
+            res = await axios.post(
+              configData.API_URL + '/biosamples',
+              jsonData2
+            )
+          } else {
+            console.log('Querying WITH token')
+            const headers = { Authorization: `Bearer ${token}` }
+
+            res = await axios.post(
+              configData.API_URL + '/biosamples',
+              jsonData2,
+              { headers: headers }
+            )
+          }
           setTimeOut(true)
 
           if (
@@ -249,25 +264,20 @@ function BiosamplesResults (props) {
             setNumberResults(0)
             setBoolean(false)
           } else {
-            console.log(res.data.responseSummary.numTotalResults)
             setNumberResults(res.data.responseSummary.numTotalResults)
             setBoolean(res.data.responseSummary.exists)
 
             res.data.response.resultSets.forEach((element, index) => {
               if (res.data.response.resultSets[index].resultsCount > 0) {
-                console.log(res.data.response.resultSets[index].results.length)
                 res.data.response.resultSets[index].results.forEach(
                   (element2, index2) => {
                     let arrayResult = [
                       res.data.response.resultSets[index].beaconId,
                       res.data.response.resultSets[index].results[index2]
                     ]
                     results.push(arrayResult)
-                    console.log(arrayResult)
                   }
                 )
-
-                console.log(results)
               }
             })
           }
@@ -346,27 +356,34 @@ function BiosamplesResults (props) {
             </div>
           )}
           {show3 && logInRequired === false && !error && (
-            <div>
+            <div className='containerTableResults'>
               <TableResultsBiosamples
+                show={'full'}
                 results={results}
                 beaconsList={beaconsList}
               ></TableResultsBiosamples>
             </div>
           )}
           {show3 && logInRequired === true && <h3>{messageLoginFullResp}</h3>}
           {show3 && error && <h3>&nbsp; {error} </h3>}
-          <div className='resultsContainer'>
-            {show1 && boolean && <p className='p1'>YES</p>}
-            {show1 && !boolean && <p className='p1'>NO</p>}
-
-            {show2 && logInRequired === false && numberResults !== 1 && (
-              <p className='p1'>{numberResults} &nbsp; Results</p>
-            )}
-            {show2 && numberResults === 1 && logInRequired === false && (
-              <p className='p1'>{numberResults} &nbsp; Result</p>
-            )}
-            {show2 && logInRequired === true && <h3>{messageLoginCount}</h3>}
-          </div>
+          {show2 && (
+            <div className='containerTableResults'>
+              <TableResultsBiosamples
+                show={'count'}
+                results={results}
+                beaconsList={beaconsList}
+              ></TableResultsBiosamples>
+            </div>
+          )}
+          {show1 && (
+            <div className='containerTableResults'>
+              <TableResultsBiosamples
+                show={'boolean'}
+                results={results}
+                beaconsList={beaconsList}
+              ></TableResultsBiosamples>
+            </div>
+          )}
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/Cohorts/Cohorts.js b/frontend/src/components/Cohorts/Cohorts.js
@@ -66,14 +66,12 @@ function Cohorts (props) {
 
   const handleSelectedValue = e => {
     setSelectedValue(e.target.value)
-    console.log(e.target.value)
   }
 
   useEffect(() => {
     const fetchDataCohorts = async () => {
       try {
         let res = await axios.get(configData.API_URL + '/cohorts/')
-        console.log(res)
         res.data.response.collections.forEach(element => {
           if (cohortsIds.includes(element.id)) {
             if (element.cohortName !== undefined) {
@@ -143,9 +141,6 @@ function Cohorts (props) {
       values = Object.values(response)
       labels = Object.keys(response)
     }
-    console.log(values)
-    console.log(labels)
-
     if (values.length > 0 && labels.length > 0) {
       var options = {
         chart: {
@@ -201,9 +196,6 @@ function Cohorts (props) {
         series: values,
         labels: labels
       }
-
-      console.log(options)
-
       if (selectedFilter === 'dis_eth') {
         var chartFiltered = new ApexCharts(
           document.querySelector('#chartFilteredDisease'),
@@ -235,8 +227,6 @@ function Cohorts (props) {
   }, [response])
 
   const submitFilters = e => {
-    console.log('hola')
-
     if (selectedFilter === 'dis_eth') {
       setShowDis2(false)
       setShowEth2(false)
@@ -281,7 +271,6 @@ function Cohorts (props) {
       setShowDis(false)
       setShowEth2(false)
       setShowEth(true)
-      console.log(eth_dis)
       if (
         eth_dis[valueToFilter] !== null &&
         eth_dis[valueToFilter] !== undefined
@@ -294,23 +283,19 @@ function Cohorts (props) {
   }
 
   useEffect(() => {
-    console.log(showGraphs)
-
-    console.log(selectedCohorts)
-
     const apiCall = () => {
       arrayCohorts.forEach(element => {
         selectedCohorts.forEach(element2 => {
-          console.log(element2[0].value)
+
           if (
             element.name === element2[0].value ||
             element.cohortName === element2[0].value
           ) {
             if (element.collectionEvents !== undefined) {
-              console.log(element.collectionEvents.length)
+
               element.collectionEvents.forEach(element2 => {
                 if (Object.keys(element2).length !== 0) {
-                  console.log(element2)
+
                   let sexs = ''
                   let ethnicities = ''
                   let geoData = ''
@@ -332,7 +317,7 @@ function Cohorts (props) {
                   // for (var i = 0; i < res.data.response.collections.length; i++) {
                   if (element2.eventGenders !== undefined) {
                     sexs = element2.eventGenders.distribution.genders
-                    console.log(sexs)
+
                     setDataAvailable(true)
                   }
                   if (element2.eventEthnicities !== undefined) {
@@ -378,8 +363,6 @@ function Cohorts (props) {
                   setNameCohort(element.name)
 
                   if (sexs !== '') {
-                    console.log(sexs)
-                    console.log(valuesSex)
                     valuesSex = Object.values(sexs)
                     labelsSex = Object.keys(sexs)
                   }
@@ -576,7 +559,6 @@ function Cohorts (props) {
                   }
                   setTimeOut(true)
                 } else {
-                  console.log('hola')
                   setTimeOut(true)
                   setDataAvailable(false)
                 }
@@ -629,7 +611,7 @@ function Cohorts (props) {
       {trigger && (
         <>
           {nameCohort !== '' && <h3>{nameCohort}</h3>}
-          {showGraphs === true  && (
+          {showGraphs === true && (
             <div className='chartModule'>
               <div id='chartSex'></div>
               <div id='chartGeo'></div>

diff --git a/frontend/src/components/Cohorts/CohortsModule.js b/frontend/src/components/Cohorts/CohortsModule.js
@@ -14,7 +14,6 @@ function CohortsModule (props) {
     props.setShowGraphs(true)
   }
   const handleChangeCohorts = selectedOption => {
-    console.log(selectedOption)
     setSelectedCohortsAux([])
     selectedCohortsAux.push(selectedOption)
     props.setSelectedCohorts(selectedCohortsAux)

diff --git a/frontend/src/components/CrossQueries/CrossQueries.css b/frontend/src/components/CrossQueries/CrossQueries.css
@@ -72,10 +72,7 @@ h5 {
 h5:hover {
   color: rgb(118, 151, 228);
   font-weight: bold;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+
 }
 
 .preCrossQueries {