From 688da081627ac79d1011d9bab867adc043d82593 Mon Sep 17 00:00:00 2001
From: Gemma <johndoe@example.com>
Date: Thu, 28 Sep 2023 15:19:56 +0200
Subject: [PATCH] cohorts fixed

---
 frontend/src/components/Cohorts/Cohorts.css   | 56 ++++++++++++
 frontend/src/components/Cohorts/Cohorts.js    | 87 +++++++++++--------
 .../src/components/Cohorts/CohortsModule.js   | 50 +++++++++++
 .../Individuals/IndividualsResults.js         |  7 +-
 frontend/src/components/Layout/Layout.js      | 69 +++------------
 5 files changed, 175 insertions(+), 94 deletions(-)
 create mode 100644 frontend/src/components/Cohorts/CohortsModule.js

diff --git a/frontend/src/components/Cohorts/Cohorts.css b/frontend/src/components/Cohorts/Cohorts.css
index 2c005d48..1345cdb8 100644
--- a/frontend/src/components/Cohorts/Cohorts.css
+++ b/frontend/src/components/Cohorts/Cohorts.css
@@ -217,3 +217,59 @@ h12 {
   align-items: center;
   justify-content: center;
 }
+
+.middle {
+  top: 30%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+}
+.bar {
+  width: 12px;
+  height: 90px;
+  background: #fff;
+  display: inline-block;
+  transform-origin: bottom center;
+  border-top-right-radius: 20px;
+  border-top-left-radius: 20px;
+  /*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
+  animation: loader 1.2s linear infinite;
+}
+.bar1 {
+  animation-delay: 0.1s;
+}
+.bar2 {
+  animation-delay: 0.2s;
+}
+.bar3 {
+  animation-delay: 0.3s;
+}
+.bar4 {
+  animation-delay: 0.4s;
+}
+.bar5 {
+  animation-delay: 0.5s;
+}
+.bar6 {
+  animation-delay: 0.6s;
+}
+.bar7 {
+  animation-delay: 0.7s;
+}
+.bar8 {
+  animation-delay: 0.8s;
+}
+
+@keyframes loader {
+  0% {
+    transform: scaleY(0.1);
+    background: #34495e ;
+  }
+  50% {
+    transform: scaleY(1);
+    background:#6ad513;
+  }
+  100% {
+    transform: scaleY(0.1);
+    background: transparent;
+  }
+}
diff --git a/frontend/src/components/Cohorts/Cohorts.js b/frontend/src/components/Cohorts/Cohorts.js
index cb1b9c83..8f7f5186 100644
--- a/frontend/src/components/Cohorts/Cohorts.js
+++ b/frontend/src/components/Cohorts/Cohorts.js
@@ -4,15 +4,16 @@ import axios from 'axios'
 import { useState, useEffect } from 'react'
 import Layout from '../Layout/Layout'
 import { NavLink, useNavigate } from 'react-router-dom'
-import configData from "../../config.json";
+import configData from '../../config.json'
+import CohortsModule from './CohortsModule'
 
 function Cohorts (props) {
-  const API_ENDPOINT = configData.API_URL + "/cohorts"
+  const API_ENDPOINT = configData.API_URL + '/cohorts'
 
   const [error, setError] = useState(false)
   const navigate = useNavigate()
 
-  const [options, setOptions] = useState([])
+  const [optionsCohorts, setOptionsCohorts] = useState([])
 
   const [selectedCohorts, setSelectedCohorts] = useState([])
 
@@ -42,6 +43,8 @@ function Cohorts (props) {
 
   const [dataAvailable, setDataAvailable] = useState(false)
 
+  const [triggerLayout, setTriggerLayout] = useState(false)
+
   const handleSelectedFilter = e => {
     setSelectedFilter(e.target.value)
   }
@@ -51,6 +54,37 @@ function Cohorts (props) {
     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 (element.name === undefined && element.cohortName !== undefined) {
+            let obj = {
+              value: element.cohortName,
+              label: element.cohortName
+            }
+            optionsCohorts.push(obj)
+          } else if (element.name !== undefined) {
+            let obj = {
+              value: element.name,
+              label: element.name
+            }
+            optionsCohorts.push(obj)
+          }
+          const timer = setTimeout(() => {
+            setTriggerLayout(true)
+          }, 2000)
+          return () => clearTimeout(timer)
+        })
+      } catch (error) {
+        console.log(error)
+      }
+    }
+    fetchDataCohorts().catch(console.error)
+  }, [])
+
   useEffect(() => {
     let values = []
     let labels = []
@@ -505,46 +539,27 @@ function Cohorts (props) {
     }
   }, [showGraphs])
 
-  useEffect(() => {
-    const fetchDataCohorts = async () => {
-      try {
-        let res = await axios.get(
-         configData.API_URL + "/cohorts"
-        )
-
-        res.data.response.collections.forEach(element => {
-          if (element.name === undefined && element.cohortName !== undefined) {
-            let obj = {
-              value: element.cohortName,
-              label: element.cohortName
-            }
-            options.push(obj)
-          } else if (element.name !== undefined) {
-            let obj = {
-              value: element.name,
-              label: element.name
-            }
-            options.push(obj)
-          }
-
-          console.log(options)
-        })
-      } catch (error) {
-        console.log(error)
-      }
-    }
-    fetchDataCohorts().catch(console.error)
-  }, [])
-
   return (
     <div className='graphsDiv'>
-      {showGraphs === false && (
+      {triggerLayout === false && (
+        <div class='middle'>
+          <div class='bar bar1'></div>
+          <div class='bar bar2'></div>
+          <div class='bar bar3'></div>
+          <div class='bar bar4'></div>
+          <div class='bar bar5'></div>
+          <div class='bar bar6'></div>
+          <div class='bar bar7'></div>
+          <div class='bar bar8'></div>
+        </div>
+      )}
+      {showGraphs === false && triggerLayout && (
         <Layout
           collection={'Cohorts'}
           setShowGraphs={setShowGraphs}
           selectedCohorts={selectedCohorts}
           setSelectedCohorts={setSelectedCohorts}
-          options={options}
+          optionsCohorts={optionsCohorts}
         />
       )}
 
diff --git a/frontend/src/components/Cohorts/CohortsModule.js b/frontend/src/components/Cohorts/CohortsModule.js
new file mode 100644
index 00000000..43cf4941
--- /dev/null
+++ b/frontend/src/components/Cohorts/CohortsModule.js
@@ -0,0 +1,50 @@
+import '../../App.css'
+import './Cohorts.css'
+import React, { useState, useEffect } from 'react'
+import Select from 'react-select'
+import makeAnimated from 'react-select/animated'
+
+function CohortsModule (props) {
+  const [results, setResults] = useState(null)
+  const [selectedCohortsAux, setSelectedCohortsAux] = useState([])
+  const animatedComponents = makeAnimated()
+  const onSubmitCohorts = () => {
+    setResults('Cohorts')
+
+    props.setShowGraphs(true)
+  }
+  const handleChangeCohorts = selectedOption => {
+    setSelectedCohortsAux([])
+    selectedCohortsAux.push(selectedOption)
+    props.setSelectedCohorts(selectedCohortsAux)
+  }
+
+  return (
+    <div className='cohortsModule'>
+      <Select
+        closeMenuOnSelect={false}
+        components={animatedComponents}
+        defaultValue={[]}
+        isMulti
+        options={props.optionsCohorts}
+        onChange={handleChangeCohorts}
+        autoFocus={true}
+        //onToggleCallback={onToggle3}
+      />
+
+      <form className='d-flex2' onSubmit={onSubmitCohorts}>
+        {results !== 'Cohorts' && (
+          <button className='searchButton2' type='submit'>
+            <img
+              className='forwardIcon'
+              src='./adelante.png'
+              alt='searchIcon'
+            ></img>
+          </button>
+        )}
+      </form>
+    </div>
+  )
+}
+
+export default CohortsModule
diff --git a/frontend/src/components/Individuals/IndividualsResults.js b/frontend/src/components/Individuals/IndividualsResults.js
index 60337947..c9eae18f 100644
--- a/frontend/src/components/Individuals/IndividualsResults.js
+++ b/frontend/src/components/Individuals/IndividualsResults.js
@@ -42,7 +42,8 @@ function IndividualsResults (props) {
 
   const auth = useAuth()
   const isAuthenticated = auth.userData?.id_token ? true : false
-  console.log(isAuthenticated)
+  
+ // const isAuthenticated = true
 
   useEffect(() => {
     console.log(props.query)
@@ -177,7 +178,7 @@ function IndividualsResults (props) {
 
           //res = await axios.post("https://beacons.bsc.es/beacon-network/v2.0.0/individuals/", jsonData1, { headers: headers })
           res = await axios.post(
-            configData.API_URL + '/individuals/?skip=0&limit=0',
+            configData.API_URL + '/individuals',
             jsonData1
           )
 
@@ -232,7 +233,7 @@ function IndividualsResults (props) {
 
           //res = await axios.post("https://beacons.bsc.es/beacon-network/v2.0.0/individuals/", jsonData2, { headers: headers })
           res = await axios.post(
-            configData.API_URL + '/individuals/?skip=0&limit=0',
+            configData.API_URL + '/individuals',
             jsonData2
           )
 
diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
index eaf56e38..a61a4d44 100644
--- a/frontend/src/components/Layout/Layout.js
+++ b/frontend/src/components/Layout/Layout.js
@@ -7,7 +7,6 @@ import ResultsDatasets from '../Datasets/ResultsDatasets'
 import VariantsResults from '../GenomicVariations/VariantsResults'
 import HorizontalExpansion from '../QueryExpansion/HorizontalExpansion'
 
-import Select from 'react-select'
 import React, { useState, useEffect } from 'react'
 import { AuthContext } from '../context/AuthContext'
 import { useContext } from 'react'
@@ -15,14 +14,14 @@ import { useContext } from 'react'
 import Switch from '@mui/material/Switch'
 import MultiSwitch from 'react-multi-switch-toggle'
 
-import configData from "../../config.json";
+import configData from '../../config.json'
 
 import axios from 'axios'
 
 import ReactModal from 'react-modal'
-import makeAnimated from 'react-select/animated'
 
 import IndividualsResults from '../Individuals/IndividualsResults'
+import CohortsModule from '../Cohorts/CohortsModule'
 
 function Layout (props) {
   console.log(props)
@@ -62,6 +61,8 @@ function Layout (props) {
 
   const [showResultsVariants, setShowResultsVariants] = useState(true)
 
+  const [triggerCohorts, setTriggerCohorts] = useState(true)
+
   const [trigger, setTrigger] = useState(false)
   const {
     storeToken,
@@ -83,8 +84,6 @@ function Layout (props) {
   const [showExtraIndividuals, setExtraIndividuals] = useState(false)
   const [showOptions, setShowOptions] = useState(false)
 
-  const [options, setOptions] = useState(props.options)
-
   const [referenceName, setRefName] = useState('')
   const [referenceName2, setRefName2] = useState('')
   const [start, setStart] = useState('')
@@ -106,8 +105,6 @@ function Layout (props) {
 
   const [hideForm, setHideForm] = useState(false)
 
-  const animatedComponents = makeAnimated()
-
   const [resetSearch, setResetSearch] = useState(false)
 
   const [state, setstate] = useState({
@@ -122,8 +119,6 @@ function Layout (props) {
 
   const [isSubmitted, setIsSub] = useState(false)
 
-  const [selectedCohortsAux, setSelectedCohortsAux] = useState([])
-
   const [arrayFilteringTerms, setArrayFilteringTerms] = useState([])
 
   const [showIds, setShowIds] = useState(false)
@@ -157,16 +152,6 @@ function Layout (props) {
     }
   }
 
-  const triggerOptions = () => {
-    setOptions(options)
-  }
-
-  const handleChangeCohorts = selectedOption => {
-    setSelectedCohortsAux([])
-    selectedCohortsAux.push(selectedOption)
-    props.setSelectedCohorts(selectedCohortsAux)
-  }
-
   const handleCloseModal1 = () => {
     setIsOpenModal1(false)
   }
@@ -260,9 +245,7 @@ function Layout (props) {
       }
     } else if (props.collection === 'Runs') {
       try {
-        let res = await axios.get(
-          configData.API_URL + '/runs/filtering_terms'
-        )
+        let res = await axios.get(configData.API_URL + '/runs/filtering_terms')
         setTimeOut(true)
         if (res.data.response.filteringTerms !== undefined) {
           setFilteringTerms(res)
@@ -390,6 +373,7 @@ function Layout (props) {
   }
 
   useEffect(() => {
+    
     if (props.collection === 'Individuals') {
       setPlaceholder('filtering term comma-separated, ID><=value')
       setExtraIndividuals(true)
@@ -485,12 +469,6 @@ function Layout (props) {
     }
   }
 
-  const onSubmitCohorts = () => {
-    setResults('Cohorts')
-
-    props.setShowGraphs(true)
-  }
-
   function search (e) {
     setQuery(e.target.value)
   }
@@ -606,34 +584,15 @@ function Layout (props) {
                 </form>
               </div>
             )}
-
-            {cohorts && (
-              <div className='cohortsModule'>
-                <Select
-                  onClick={triggerOptions}
-                  closeMenuOnSelect={false}
-                  components={animatedComponents}
-                  defaultValue={[]}
-                  isMulti
-                  options={options}
-                  onChange={handleChangeCohorts}
-                  autoFocus={true}
-                  //onToggleCallback={onToggle3}
+            {props.collection === 'Cohorts' &&
+             
+                <CohortsModule
+                  optionsCohorts={props.optionsCohorts}
+                  selectedCohorts={props.selectedCohorts}
+                  setSelectedCohorts={props.setSelectedCohorts}
                 />
-
-                <form className='d-flex2' onSubmit={onSubmitCohorts}>
-                  {results !== 'Cohorts' && (
-                    <button className='searchButton2' type='submit'>
-                      <img
-                        className='forwardIcon'
-                        src='./adelante.png'
-                        alt='searchIcon'
-                      ></img>
-                    </button>
-                  )}
-                </form>
-              </div>
-            )}
+              }
+        
           </div>
         )}