From 688da081627ac79d1011d9bab867adc043d82593 Mon Sep 17 00:00:00 2001 From: Gemma Date: Thu, 28 Sep 2023 15:19:56 +0200 Subject: [PATCH 1/4] 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 (
- {showGraphs === false && ( + {triggerLayout === false && ( +
+
+
+
+
+
+
+
+
+
+ )} + {showGraphs === false && triggerLayout && ( )} 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 ( +
+ - -
- {results !== 'Cohorts' && ( - - )} -
-
- )} + } +
)} From 59a35c5e42d590d62de8566867907651f0ea5e31 Mon Sep 17 00:00:00 2001 From: Gemma Date: Thu, 28 Sep 2023 16:23:21 +0200 Subject: [PATCH 2/4] changes cohorts --- frontend/src/components/Cohorts/Cohorts.css | 18 ++- frontend/src/components/Cohorts/Cohorts.js | 144 ++++++++++++-------- frontend/src/components/Layout/Layout.js | 1 + 3 files changed, 103 insertions(+), 60 deletions(-) diff --git a/frontend/src/components/Cohorts/Cohorts.css b/frontend/src/components/Cohorts/Cohorts.css index 1345cdb8..03be0224 100644 --- a/frontend/src/components/Cohorts/Cohorts.css +++ b/frontend/src/components/Cohorts/Cohorts.css @@ -4,7 +4,7 @@ width: 100vw; flex-wrap: wrap; justify-content: center; - margin-top: 10px; + margin-top: 44px; } #chartEthnicity { @@ -191,6 +191,7 @@ #chartDiseases { width: 1000px; margin: 38px; + min-height: 300px !important; } h12 { @@ -216,6 +217,17 @@ h12 { display: flex; align-items: center; justify-content: center; + flex-direction: column; +} + +.graphsDiv h3 { + color: #e16e00; + text-transform: uppercase; + margin-top: 32px; + font-size: 14px; + display: flex; + align-content: center; + justify-content: center; } .middle { @@ -262,11 +274,11 @@ h12 { @keyframes loader { 0% { transform: scaleY(0.1); - background: #34495e ; + background: #34495e; } 50% { transform: scaleY(1); - background:#6ad513; + background: #6ad513; } 100% { transform: scaleY(0.1); diff --git a/frontend/src/components/Cohorts/Cohorts.js b/frontend/src/components/Cohorts/Cohorts.js index 8f7f5186..5d8dc8c4 100644 --- a/frontend/src/components/Cohorts/Cohorts.js +++ b/frontend/src/components/Cohorts/Cohorts.js @@ -41,7 +41,13 @@ function Cohorts (props) { const [showDisFiltered, setShowDis] = useState(false) const [showDisFiltered2, setShowDis2] = useState(false) + const [filterDisEth, setFilterDisEth] = useState(false) + const [filterDisSex, setFilterDisSex] = useState(false) + const [filterEthDis, setFilterEthDis] = useState(false) + const [filterEthSex, setFilterEthSex] = useState(false) + const [dataAvailable, setDataAvailable] = useState(false) + const [timeOut, setTimeOut] = useState(false) const [triggerLayout, setTriggerLayout] = useState(false) @@ -260,9 +266,9 @@ function Cohorts (props) { element.cohortName === element2[0].value ) { if (element.collectionEvents !== undefined) { + setDataAvailable(true) element.collectionEvents.forEach(element2 => { if (Object.keys(element2).length !== 0) { - setDataAvailable(true) console.log(element2) let sexs = '' let ethnicities = '' @@ -285,6 +291,8 @@ 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) { ethnicities = @@ -304,9 +312,11 @@ function Cohorts (props) { if (diseases_eth !== '') { setDisEth(diseases_eth) + setFilterDisEth(true) } if (diseases_sex !== '') { setDisSex(diseases_sex) + setFilterDisSex(true) } if (element2.eventEthnicities !== undefined) { @@ -319,14 +329,18 @@ function Cohorts (props) { if (ethnicities_dis !== '') { setEthDis(ethnicities_dis) + setFilterEthDis(true) } if (ethnicities_sex !== '') { setEthSex(ethnicities_sex) + setFilterEthSex(true) } setNameCohort(element.name) if (sexs !== '') { + console.log(sexs) + console.log(valuesSex) valuesSex = Object.values(sexs) labelsSex = Object.keys(sexs) } @@ -371,6 +385,7 @@ function Cohorts (props) { document.querySelector('#chartSex'), optionsSex ) + chartSex.render() } @@ -520,6 +535,7 @@ function Cohorts (props) { ) chartDiseases.render() } + setTimeOut(true) } else { setDataAvailable(false) } @@ -541,7 +557,7 @@ function Cohorts (props) { return (
- {triggerLayout === false && ( + {showGraphs === false && triggerLayout === false && (
@@ -564,39 +580,46 @@ function Cohorts (props) { )} {nameCohort !== '' &&

{nameCohort}

} - {showGraphs === true && dataAvailable === true && ( + {showGraphs === true && (
-
- - - - - - -
+ {filterEthSex || + (filterEthDis && ( +
+ + + + + + +
+ ))} {showEthFiltered && (
@@ -611,32 +634,39 @@ function Cohorts (props) {
-
- - - - - -
+ {filterDisSex || + (filterDisEth && ( +
+ + + + + +
+ ))} {showDisFiltered && (
@@ -651,7 +681,7 @@ function Cohorts (props) {
)} - {showGraphs === true && dataAvailable === false && ( + {showGraphs === true && dataAvailable === false && timeOut === true && (
UNFORTUNATELY, THERE ARE NO GRAPHICS AVAILABLE RIGHT NOW