From f672511caf20ee8b7eefd342d5b0bace3f71d211 Mon Sep 17 00:00:00 2001
From: Gemma <johndoe@example.com>
Date: Wed, 10 Jan 2024 12:13:52 +0100
Subject: [PATCH] options cohorts visible

---
 frontend/src/components/Cohorts/Cohorts.js    | 180 +++++++++++++++---
 .../src/components/Cohorts/CohortsModule.js   |  44 +++--
 frontend/src/components/Layout/Layout.js      |   6 +-
 3 files changed, 188 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/Cohorts/Cohorts.js b/frontend/src/components/Cohorts/Cohorts.js
index 8f27fbc..794bfc9 100644
--- a/frontend/src/components/Cohorts/Cohorts.js
+++ b/frontend/src/components/Cohorts/Cohorts.js
@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react'
 import Layout from '../Layout/Layout'
 import { NavLink, useNavigate } from 'react-router-dom'
 import configData from '../../config.json'
+import CohortsModule from './CohortsModule'
 
 function Cohorts (props) {
   const API_ENDPOINT = configData.API_URL + '/cohorts'
@@ -58,8 +59,11 @@ function Cohorts (props) {
 
   const [trigger, setTrigger] = useState(false)
 
+  const [trigger2, setTrigger2] = useState(false)
   const [noCollectionEvents, setNoCollectionEvents] = useState(false)
 
+  const [alreadySelectedCohort, setAlreadySelectedCohort] = useState(true)
+
   //const handleSelectedFilter = e => {
   //setSelectedFilter(e.target.value)
   //}
@@ -69,29 +73,33 @@ function Cohorts (props) {
   }
 
   useEffect(() => {
-    const fetchDataCohorts = async () => {
-      try {
-        let res = await axios.get(configData.API_URL + '/cohorts')
-        console.log(res)
-        res.data.response.collections.forEach(element => {
-          let obj = {
-            value: element.id,
-            label: element.id
-          }
-          optionsCohorts.push(obj)
-          arrayCohorts.push(element)
-          const timer = setTimeout(() => {
-            setTriggerLayout(true)
-          }, 2000)
-          return () => clearTimeout(timer)
-        })
-      } catch (error) {
-        setTimeOut(true)
-        console.log(error)
-        setError('Unexpected error. Please retry')
+    if (!props.newSearch) {
+      const fetchDataCohorts = async () => {
+        try {
+          let res = await axios.get(configData.API_URL + '/cohorts')
+          console.log(res)
+          res.data.response.collections.forEach(element => {
+            let obj = {
+              value: element.id,
+              label: element.id
+            }
+            optionsCohorts.push(obj)
+            arrayCohorts.push(element)
+            const timer = setTimeout(() => {
+              setTriggerLayout(true)
+            }, 2000)
+            return () => clearTimeout(timer)
+          })
+        } catch (error) {
+          setTimeOut(true)
+          console.log(error)
+          setError('Unexpected error. Please retry')
+        }
       }
+      fetchDataCohorts().catch(console.error)
+    } else {
+      setTimeOut(true)
     }
-    fetchDataCohorts().catch(console.error)
   }, [])
 
   useEffect(() => {
@@ -528,7 +536,7 @@ function Cohorts (props) {
     if (selectedCohorts) {
       apiCall()
     }
-  }, [showGraphs, trigger])
+  }, [showGraphs, trigger, trigger2])
 
   return (
     <div className='graphsDiv'>
@@ -566,8 +574,132 @@ function Cohorts (props) {
 
       {error !== '' && <h10>{error}</h10>}
 
-      {trigger && !noCollectionEvents && (
+      {trigger && trigger2 && !noCollectionEvents && showGraphs && (
+        <>
+          <CohortsModule
+            optionsCohorts={optionsCohorts}
+            selectedCohorts={selectedCohorts}
+            setSelectedCohorts={setSelectedCohorts}
+            setShowGraphs={setShowGraphs}
+            alreadySelectedCohort={alreadySelectedCohort}
+            response={response}
+            setResponse={setResponse}
+            setTrigger2={setTrigger2}
+            trigger2={trigger2}
+          />
+          {nameCohort !== '' && <h3>{nameCohort}</h3>}
+          {showGraphs === true && (
+            <div className='chartModule'>
+              <div id='chartSex'></div>
+              <div id='chartGeo'></div>
+              <hr></hr>
+              <div className='ethnicity'>
+                {/* <div className='ethFilters'>
+                  <label for='ethnicities'>Filter:</label>
+                  <select
+                    name='filters'
+                    id='filtersSelect'
+                    onChange={handleSelectedFilter}
+                  >
+                    <option value=''></option>
+                    {filterEthSex && (
+                      <option value='eth_sex'>Ethnicities by sex</option>
+                    )}
+                    {filterEthDis && (
+                      <option value='eth_dis'>Ethnicities by disease</option>
+                    )}
+                  </select>
+
+                  <label for='ethnicities'>Select the ethnicity:</label>
+                  <select
+                    name='ethnicities'
+                    id='ethnicitiesSelect'
+                    onChange={handleSelectedValue}
+                  >
+                    <option value=''></option>
+                    {labelsEthnicities.map(element => {
+                      return <option value={element}>{element}</option>
+                    })}
+                  </select>
+                  <button className='buttonSubmit' onClick={submitFilters}>
+                    Submit
+                  </button>
+                </div> */}
+
+                {/* {showEthFiltered && (
+                  <div className='moduleFiltered'>
+                    <div id='chartFilteredEthnicity'></div>
+                  </div>
+                )}
+                {showEthFiltered2 && (
+                  <div className='moduleFiltered'>
+                    <div id='chartFilteredEthnicity2'></div>
+                  </div>
+                )} */}
+                <div id='chartEthnicity'></div>
+              </div>
+              <hr></hr>
+              <div className='diseases'>
+                {/* <div className='diseasesFilters'>
+                  <label for='ethnicities'>Filter:</label>
+                  <select
+                    name='filters'
+                    id='filtersSelect'
+                    onChange={handleSelectedFilter}
+                  >
+                    <option value=''></option>
+                    {filterDisEth && (
+                      <option value='dis_eth'>Diseases by ethnicity</option>
+                    )}
+                    {filterDisSex && (
+                      <option value='dis_sex'>Diseases by sex</option>
+                    )}
+                  </select>
+
+                  <select
+                    name='diseases'
+                    id='diseasesSelect'
+                    onChange={handleSelectedValue}
+                  >
+                    <option value=''></option>
+                    {labelsDiseases.map(element => {
+                      return <option value={element}>{element}</option>
+                    })}
+                  </select>
+                  <button className='buttonSubmit' onClick={submitFilters}>
+                    Submit
+                  </button>
+                </div>
+
+                {showDisFiltered && (
+                  <div className='moduleFiltered'>
+                    <div id='chartFilteredDisease'></div>
+                  </div>
+                )}
+                {showDisFiltered2 && (
+                  <div className='moduleFiltered'>
+                    <div id='chartFilteredDisease2'></div>
+                  </div>
+                )} */}
+                <div id='chartDiseases'></div>
+              </div>
+            </div>
+          )}
+        </>
+      )}
+      {trigger && !trigger2 && !noCollectionEvents && showGraphs && (
         <>
+          <CohortsModule
+            optionsCohorts={optionsCohorts}
+            selectedCohorts={selectedCohorts}
+            setSelectedCohorts={setSelectedCohorts}
+            setShowGraphs={setShowGraphs}
+            alreadySelectedCohort={alreadySelectedCohort}
+            response={response}
+            setResponse={setResponse}
+            setTrigger2={setTrigger2}
+            trigger2={trigger2}
+          />
           {nameCohort !== '' && <h3>{nameCohort}</h3>}
           {showGraphs === true && (
             <div className='chartModule'>
@@ -669,7 +801,7 @@ function Cohorts (props) {
         </>
       )}
 
-      {trigger && noCollectionEvents && (
+      {trigger && noCollectionEvents && showGraphs && (
         <h10>NO GRAPHICS AVAILABLE FOR THE SELECTED COHORTS</h10>
       )}
       {showGraphs === true && dataAvailable === false && timeOut === true && (
diff --git a/frontend/src/components/Cohorts/CohortsModule.js b/frontend/src/components/Cohorts/CohortsModule.js
index 2dbe074..46fe51d 100644
--- a/frontend/src/components/Cohorts/CohortsModule.js
+++ b/frontend/src/components/Cohorts/CohortsModule.js
@@ -3,24 +3,33 @@ import './Cohorts.css'
 import React, { useState, useEffect } from 'react'
 import Select from 'react-select'
 import makeAnimated from 'react-select/animated'
+import Cohorts from './Cohorts'
 
 function CohortsModule (props) {
   const [results, setResults] = useState(null)
 
   const animatedComponents = makeAnimated()
   const [selected, setSelected] = useState(null)
+
+  const [trigger, setTrigger] = useState(false)
+  const [newSearch, setNewSearch] = useState(true)
+
   const onSubmitCohorts = () => {
     setResults('Cohorts')
-
     props.setShowGraphs(true)
   }
   const handleChangeCohorts = selectedOption => {
     console.log(selectedOption)
     setSelected(selectedOption)
-
     props.setSelectedCohorts(selectedOption)
   }
 
+  const handleSearchAgain = () => {
+    setTrigger(true)
+    props.setResponse('')
+    props.setTrigger2(!props.trigger2)
+  }
+
   return (
     <div className='cohortsModule'>
       <Select
@@ -29,17 +38,26 @@ function CohortsModule (props) {
         autoFocus={true}
       />
 
-      <form className='d-flex2' onSubmit={onSubmitCohorts}>
-        {results !== 'Cohorts' && (
-          <button className='searchButton2' type='submit'>
-            <img
-              className='forwardIcon'
-              src='./next.png'
-              alt='searchIcon'
-            ></img>
-          </button>
-        )}
-      </form>
+      {!props.alreadySelectedCohort && (
+        <form className='d-flex2' onSubmit={onSubmitCohorts}>
+          {results !== 'Cohorts' && (
+            <button className='searchButton2' type='submit'>
+              <img
+                className='forwardIcon'
+                src='./next.png'
+                alt='searchIcon'
+              ></img>
+            </button>
+          )}
+        </form>
+      )}
+      {props.alreadySelectedCohort && (
+        <button className='searchButton2' onClick={handleSearchAgain}>
+          <img className='forwardIcon' src='./next.png' alt='searchIcon'></img>
+        </button>
+      )}
+
+      {trigger && <Cohorts newSearch={newSearch} setNewSearch={setNewSearch} />}
     </div>
   )
 }
diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js
index 7329fee..f2928e8 100644
--- a/frontend/src/components/Layout/Layout.js
+++ b/frontend/src/components/Layout/Layout.js
@@ -592,13 +592,10 @@ function Layout (props) {
 
         <div className='additionalOptions'>
           <div className='example'>
-            
             {cohorts === false && props.collection !== '' && showBar === true && (
               <div className='bulbExample'>
-            
                 <button className='exampleQueries' onClick={handleExQueries}>
                   Query Examples
-                  
                 </button>
                 <img
                   className='bulbLogo'
@@ -606,7 +603,6 @@ function Layout (props) {
                   alt='bulbIcon'
                 ></img>
                 <div className='examplesQueriesList'>
-                  
                   {exampleQ[0] &&
                     exampleQ.map(result => {
                       return (
@@ -1007,7 +1003,7 @@ function Layout (props) {
                   </div>
                 </section>
                 <section id='gene' className='tab-panel'>
-                <button
+                  <button
                     className='variantExampleButton'
                     onClick={handleGeneExample}
                     type='button'