From bce27966bc1bfed993c5271965884bfbaffc6e70 Mon Sep 17 00:00:00 2001 From: Gemma Date: Wed, 10 Jan 2024 10:03:45 +0100 Subject: [PATCH] elixir-bsc --- frontend/src/App.js | 6 +- .../Biosamples/BiosamplesResults.js | 151 ++- frontend/src/components/Cohorts/Cohorts.css | 123 ++- frontend/src/components/Cohorts/Cohorts.js | 613 ++++++----- .../src/components/Cohorts/CohortsModule.js | 15 +- .../GenomicVariations/VariantsResults.js | 10 +- .../Individuals/IndividualsResults.js | 4 +- frontend/src/components/Layout/Layout.js | 25 +- frontend/src/components/NavBar/Navbar.css | 3 + frontend/src/components/NavBar/Navbar.js | 4 +- .../TableResultsBiosamples.js | 990 ++++++++++++++---- .../TableResultsIndividuals.js | 2 +- .../Verifier.css => Validator/Validator.css} | 0 .../Verifier.js => Validator/Validator.js} | 8 +- 14 files changed, 1352 insertions(+), 602 deletions(-) rename frontend/src/components/{Verifier/Verifier.css => Validator/Validator.css} (100%) rename frontend/src/components/{Verifier/Verifier.js => Validator/Validator.js} (96%) diff --git a/frontend/src/App.js b/frontend/src/App.js index 4032192..ec73074 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -15,7 +15,7 @@ import SignInForm from './components/SignIn/SignInForm' import ResultsDatasets from './components/Datasets/ResultsDatasets' import CrossQueries from './components/CrossQueries/CrossQueries' import LoggedIn from './components/SignIn/LoggedIn' -import Verifier from './components/Verifier/Verifier' +import Validator from './components/Validator/Validator' import SignInFormNoLS from './components/SignIn/SignInFormNoLS' import AboutSection from './components/AboutSection/AboutSection' import SignInOptions from './components/SignInOptions/SignInOptions' @@ -37,8 +37,8 @@ function App () { } /> } /> } /> - } /> - } /> + } /> + } /> } /> } /> diff --git a/frontend/src/components/Biosamples/BiosamplesResults.js b/frontend/src/components/Biosamples/BiosamplesResults.js index 9b33814..c9272ea 100644 --- a/frontend/src/components/Biosamples/BiosamplesResults.js +++ b/frontend/src/components/Biosamples/BiosamplesResults.js @@ -1,18 +1,21 @@ import '../Individuals/Individuals.css' import '../../App.css' +import TableResultsBiosamples from '../Results/BiosamplesResults/TableResultsBiosamples' import { useState, useEffect } from 'react' import axios from 'axios' import { AuthContext } from '../context/AuthContext' import { useAuth } from 'oidc-react' import configData from '../../config.json' import { useContext } from 'react' -import TableResultsBiosamples from '../Results/BiosamplesResults/TableResultsBiosamples' + function BiosamplesResults (props) { + const [showLayout, setShowLayout] = useState(false) + const [beaconsList, setBeaconsList] = useState([]) const [error, setError] = useState(false) - const [response, setResponse] = useState(null) + const [numberResults, setNumberResults] = useState(0) const [boolean, setBoolean] = useState(false) const [results, setResults] = useState([]) @@ -20,10 +23,13 @@ function BiosamplesResults (props) { const [show2, setShow2] = useState(false) const [show3, setShow3] = useState(false) + const [resultsPerDataset, setResultsDataset] = useState([]) + const [resultsNotPerDataset, setResultsNotPerDataset] = useState([]) + const [timeOut, setTimeOut] = useState(false) - const [logInRequired, setLoginRequired] = useState(true) - const [messageLoginCount, setMessageLoginCount] = useState('') + const [logInRequired, setLoginRequired] = useState(false) + const [messageLoginFullResp, setMessageLoginFullResp] = useState('') const [limit, setLimit] = useState(0) @@ -57,7 +63,6 @@ function BiosamplesResults (props) { if (props.query !== null) { if (props.query.includes(',')) { queryStringTerm = props.query.split(',') - queryStringTerm.forEach((element, index) => { element = element.trim() if ( @@ -83,7 +88,6 @@ function BiosamplesResults (props) { queryArray[index] = element.split('%') queryArray[index].push('%') } - const alphaNumFilter = { id: queryArray[index][0], operator: queryArray[index][2], @@ -148,7 +152,7 @@ function BiosamplesResults (props) { beaconsList.reverse() if (props.query === null) { - // show all biosamples + // show all individuals var jsonData1 = { meta: { @@ -188,16 +192,54 @@ function BiosamplesResults (props) { { headers: headers } ) } - setTimeOut(true) - if (res.data.responseSummary.numTotalResults < 1) { - setError('No results. Please check the query and retry') + if ( + res.data.responseSummary.numTotalResults < 1 || + res.data.responseSummary.numTotalResults === undefined + ) { + setError('ERROR. Please check the query and retry') setNumberResults(0) setBoolean(false) } else { res.data.response.resultSets.forEach((element, index) => { - if (res.data.response.resultSets[index].resultsCount > 0) { + + if (element.id && element.id !== '') { + if (resultsPerDataset.length > 0) { + console.log(resultsPerDataset) + resultsPerDataset.forEach(element2 => { + if (element2[0] === element.beaconId) { + element2[1].push(element.id) + element2[2].push(element.exists) + element2[3].push(element.resultsCount) + } else { + + let arrayResultsPerDataset = [ + element.beaconId, + [element.id], + [element.exists], + [element.resultsCount] + ] + resultsPerDataset.push(arrayResultsPerDataset) + } + }) + } else { + let arrayResultsPerDataset = [ + element.beaconId, + [element.id], + [element.exists], + [element.resultsCount] + ] + resultsPerDataset.push(arrayResultsPerDataset) + } + } + + if (element.id === undefined || element.id === '') { + let arrayResultsNoDatasets = [element.beaconId] + resultsNotPerDataset.push(arrayResultsNoDatasets) + } + + if (res.data.response.resultSets[index].results) { res.data.response.resultSets[index].results.forEach( (element2, index2) => { let arrayResult = [ @@ -209,9 +251,6 @@ function BiosamplesResults (props) { ) } }) - - setNumberResults(res.data.responseSummary.numTotalResults) - setBoolean(res.data.responseSummary.exists) } } else { var jsonData2 = { @@ -230,7 +269,6 @@ function BiosamplesResults (props) { } } jsonData2 = JSON.stringify(jsonData2) - let token = null if (auth.userData === null) { token = getStoredToken() @@ -260,15 +298,63 @@ function BiosamplesResults (props) { res.data.responseSummary.numTotalResults < 1 || res.data.responseSummary.numTotalResults === undefined ) { - setError('No results. Please check the query and retry') + setError('ERROR. Please check the query and retry') setNumberResults(0) setBoolean(false) } else { - 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) + if (element.id && element.id !== '') { + console.log(resultsPerDataset) + if (resultsPerDataset.length > 0) { + resultsPerDataset.forEach(element2 => { + console.log(element2[0]) + console.log(element.beaconId) + if (element2[0] === element.beaconId) { + element2[1].push(element.id) + element2[2].push(element.exists) + element2[3].push(element.resultsCount) + } else { + console.log('hola') + + let arrayResultsPerDataset = [ + element.beaconId, + [element.id], + [element.exists], + [element.resultsCount] + ] + let found = false + + console.log(arrayResultsPerDataset) + resultsPerDataset.forEach(element => { + if (element[0] === arrayResultsPerDataset[0]) { + found = true + } + console.log(found) + }) + if (found === false) { + resultsPerDataset.push(arrayResultsPerDataset) + } + } + }) + } else { + let arrayResultsPerDataset = [ + element.beaconId, + [element.id], + [element.exists], + [element.resultsCount] + ] + console.log(arrayResultsPerDataset) + resultsPerDataset.push(arrayResultsPerDataset) + } + } + + if (element.id === undefined || element.id === '') { + let arrayResultsNoDatasets = [element.beaconId] + resultsNotPerDataset.push(arrayResultsNoDatasets) + } + + if (res.data.response.resultSets[index].results) { res.data.response.resultSets[index].results.forEach( (element2, index2) => { let arrayResult = [ @@ -283,8 +369,8 @@ function BiosamplesResults (props) { } } } catch (error) { - setError('Error. Please retry') - setTimeOut(false) + setError('Connection error. Please retry') + setTimeOut(true) console.log(error) } } @@ -308,15 +394,6 @@ function BiosamplesResults (props) { setShow1(false) setShow2(false) } - - const handleSkipChanges = e => { - setSkip(Number(e.target.value)) - } - - const handleLimitChanges = e => { - setLimit(Number(e.target.value)) - } - const onSubmit = () => { setSkipTrigger(skip) setLimitTrigger(limit) @@ -339,7 +416,7 @@ function BiosamplesResults (props) {
{' '} - {timeOut && ( + {timeOut && error !== 'Connection error. Please retry' && (

Granularity:

@@ -355,11 +432,15 @@ function BiosamplesResults (props) {
)} + {timeOut && error === 'Connection error. Please retry' && ( +

  {error}

+ )} {show3 && logInRequired === false && !error && (
@@ -370,6 +451,8 @@ function BiosamplesResults (props) {
@@ -379,6 +462,8 @@ function BiosamplesResults (props) {
@@ -390,4 +475,4 @@ function BiosamplesResults (props) { ) } -export default BiosamplesResults +export default BiosamplesResults \ No newline at end of file diff --git a/frontend/src/components/Cohorts/Cohorts.css b/frontend/src/components/Cohorts/Cohorts.css index 16d6a59..75fde08 100644 --- a/frontend/src/components/Cohorts/Cohorts.css +++ b/frontend/src/components/Cohorts/Cohorts.css @@ -8,7 +8,7 @@ } #chartEthnicity { - width: 90vw; + width: 90%; margin-top: 29px; } @@ -107,6 +107,115 @@ align-items: center; } +.tab-content { + display: none; +} + +.tab:target .tab-content, +.tab:last-of-type .tab-content { + display: block; +} + +.tab:target ~ .tab:last-of-type .tab-content { + display: none; +} + +.tabs * { + box-sizing: border-box; +} + +.tab-container { + position: relative; + padding-top: var(--tabs-height); /* en esta zona colocaremos las pestañas */ + margin-left: 40px; + margin-right: 40px; + margin-top: 0px; +} +#tab1 > a { + --tabs-position: 0; +} +#tab2 > a { + --tabs-position: 1; +} +#tab3 > a { + --tabs-position: 2; +} +#tab4 > a { + --tabs-position: 3; +} +#tab5 > a { + --tabs-position: 4; +} +#tab6 > a { + --tabs-position: 5; +} +#tab7 > a { + --tabs-position: 6; +} +#tab8 > a { + --tabs-position: 7; +} +#tab9 > a { + --tabs-position: 8; +} +.tab > a { + text-align: center; + position: absolute; + width: calc(var(--tabs-width)); + height: calc(var(--tabs-height) + var(--tabs-border-size)); + top: 0; + left: calc( + var(--tabs-width) * var(--tabs-position) + ); /* posición de cada pestaña */ +} +:root { + --tabs-border-color: #abcdef; + --tabs-border-size: 3px; + --tabs-text-color: white; + --tabs-dark-color: #2768aa; + --tabs-lite-color: #adafc2; + --tabs-width: 150px; + --tabs-height: 60px; + font-size: 14px; + margin: 10px; +} +.tabs { + width: 100vw; + color: var(--tabs-text-color); +} +.tab-content { + background-color: var(--tabs-lite-color); + padding: 20px; + border: var(--tabs-border-size) solid var(--tabs-border-color); + border-radius: 0 0 10px 10px; + position: relative; + z-index: 100; +} +.tab > a { + background-color: var(--tabs-dark-color); + padding: 10px; + border: var(--tabs-border-size) solid var(--tabs-border-color); + border-radius: 10px 10px 0 0; + border-bottom: 0; +} +.tab:target > a, +.tab:last-of-type > a { + background-color: var(--tabs-lite-color); + z-index: 200; +} +.tab:target ~ .tab:last-of-type > a { + background-color: var(--tabs-dark-color); + z-index: 0; +} + +h2, +p { + margin: 0; +} +a { + color: inherit; + text-decoration: none; +} .ethFilters { display: flex; margin-top: 31px; @@ -213,11 +322,19 @@ } #chartDiseases { - width: 100vw; + width: 100%; min-height: 300px !important; margin-top: 29px; } +.diseases{ + width: 100%; +} + +.ethnicity{ + width: 100%; +} + h12 { color: #7fb68c; font-weight: 500; @@ -316,7 +433,7 @@ h12 { } 50% { transform: scaleY(1); - background: #8fed0b; + background: #34ce7e; } 100% { transform: scaleY(0.1); diff --git a/frontend/src/components/Cohorts/Cohorts.js b/frontend/src/components/Cohorts/Cohorts.js index 89fb0ba..8f27fbc 100644 --- a/frontend/src/components/Cohorts/Cohorts.js +++ b/frontend/src/components/Cohorts/Cohorts.js @@ -60,9 +60,9 @@ function Cohorts (props) { const [noCollectionEvents, setNoCollectionEvents] = useState(false) - const handleSelectedFilter = e => { - setSelectedFilter(e.target.value) - } + //const handleSelectedFilter = e => { + //setSelectedFilter(e.target.value) + //} const handleSelectedValue = e => { setSelectedValue(e.target.value) @@ -186,351 +186,346 @@ function Cohorts (props) { } }, [response]) - const submitFilters = e => { - if (selectedFilter === 'dis_eth') { - setShowDis2(false) - setShowEth2(false) - setShowEth(false) - setShowDis(true) - if ( - dis_eth[valueToFilter] !== null && - dis_eth[valueToFilter] !== undefined - ) { - setResponse(dis_eth[`${valueToFilter}`]) - } else { - setError('Not found') - } - } else if (selectedFilter === 'dis_sex') { - setShowDis(false) - setShowEth2(false) - setShowEth(false) - setShowDis2(true) - if ( - dis_sex[valueToFilter] !== null && - dis_sex[valueToFilter] !== undefined - ) { - setResponse(dis_sex[`${valueToFilter}`]) - } else { - setError('Not found') - } - } else if (selectedFilter === 'eth_sex') { - setShowDis2(false) - setShowDis(false) - setShowEth(false) - setShowEth2(true) - if ( - eth_sex[valueToFilter] !== null && - eth_sex[valueToFilter] !== undefined - ) { - setResponse(eth_sex[`${valueToFilter}`]) - } else { - setError('Not found') - } - } else if (selectedFilter === 'eth_dis') { - setShowDis2(false) - setShowDis(false) - setShowEth2(false) - setShowEth(true) - if ( - eth_dis[valueToFilter] !== null && - eth_dis[valueToFilter] !== undefined - ) { - setResponse(eth_dis[`${valueToFilter}`]) - } else { - setError('Not found') - } - } - } + // const submitFilters = e => { + // if (selectedFilter === 'dis_eth') { + // setShowDis2(false) + // setShowEth2(false) + // setShowEth(false) + // setShowDis(true) + // if ( + // dis_eth[valueToFilter] !== null && + // dis_eth[valueToFilter] !== undefined + // ) { + // setResponse(dis_eth[`${valueToFilter}`]) + // } else { + // setError('Not found') + // } + // } else if (selectedFilter === 'dis_sex') { + // setShowDis(false) + // setShowEth2(false) + // setShowEth(false) + // setShowDis2(true) + // if ( + // dis_sex[valueToFilter] !== null && + // dis_sex[valueToFilter] !== undefined + // ) { + // setResponse(dis_sex[`${valueToFilter}`]) + // } else { + // setError('Not found') + // } + // } else if (selectedFilter === 'eth_sex') { + // setShowDis2(false) + // setShowDis(false) + // setShowEth(false) + // setShowEth2(true) + // if ( + // eth_sex[valueToFilter] !== null && + // eth_sex[valueToFilter] !== undefined + // ) { + // setResponse(eth_sex[`${valueToFilter}`]) + // } else { + // setError('Not found') + // } + // } else if (selectedFilter === 'eth_dis') { + // setShowDis2(false) + // setShowDis(false) + // setShowEth2(false) + // setShowEth(true) + // if ( + // eth_dis[valueToFilter] !== null && + // eth_dis[valueToFilter] !== undefined + // ) { + // setResponse(eth_dis[`${valueToFilter}`]) + // } else { + // setError('Not found') + // } + // } + // } useEffect(() => { console.log(selectedCohorts) console.log(arrayCohorts) const apiCall = () => { arrayCohorts.forEach(element => { - console.log(element) - selectedCohorts.forEach(element2 => { - if (element.id === element2[0].value) { - - if (element.collectionEvents) { - console.log("holi") - element.collectionEvents.forEach(element2 => { - if (Object.keys(element2).length !== 0) { - let sexs = '' - let ethnicities = '' - let geoData = '' - let diseasesData = '' - let diseases_eth = '' - let diseases_sex = '' - let ethnicities_dis = '' - let ethnicities_sex = '' - let valuesSex = '' - let labelsSex = '' - let valuesEthnicities = '' - let labelsEthnicities = '' - let valuesGeo = '' - let labelsGeo = '' - let entriesGeo = '' - let valuesDiseases = '' - let labelsDiseases = '' - - // for (var i = 0; i < res.data.response.collections.length; i++) { - if (element2.eventGenders !== undefined) { - sexs = element2.eventGenders.distribution.genders - - setDataAvailable(true) - } - if (element2.eventEthnicities !== undefined) { - ethnicities = - element2.eventEthnicities.distribution.ethnicities - } - if (element2.eventLocations !== undefined) { - geoData = element2.eventLocations.distribution.locations - } - if (element2.eventDiseases !== undefined) { - diseasesData = element2.eventDiseases.distribution.diseases - diseases_eth = - element2.eventDiseases.distribution.diseases_ethnicity - diseases_sex = - element2.eventDiseases.distribution.diseases_sex - } + console.log(element) + + if (element.id === selectedCohorts.value) { + if (element.collectionEvents) { + element.collectionEvents.forEach(element2 => { + if (Object.keys(element2).length !== 0) { + let sexs = '' + let ethnicities = '' + let geoData = '' + let diseasesData = '' + let diseases_eth = '' + let diseases_sex = '' + let ethnicities_dis = '' + let ethnicities_sex = '' + let valuesSex = '' + let labelsSex = '' + let valuesEthnicities = '' + let labelsEthnicities = '' + let valuesGeo = '' + let labelsGeo = '' + let entriesGeo = '' + let valuesDiseases = '' + let labelsDiseases = '' + + // for (var i = 0; i < res.data.response.collections.length; i++) { + if (element2.eventGenders !== undefined) { + sexs = element2.eventGenders.distribution.genders + + setDataAvailable(true) + } + if (element2.eventEthnicities !== undefined) { + ethnicities = + element2.eventEthnicities.distribution.ethnicities + } + if (element2.eventLocations !== undefined) { + geoData = element2.eventLocations.distribution.locations + } + if (element2.eventDiseases !== undefined) { + diseasesData = element2.eventDiseases.distribution.diseases + diseases_eth = + element2.eventDiseases.distribution.diseases_ethnicity + diseases_sex = + element2.eventDiseases.distribution.diseases_sex + } - if (diseases_eth !== '') { - setDisEth(diseases_eth) - setFilterDisEth(true) - } - if (diseases_sex !== '') { - setDisSex(diseases_sex) - setFilterDisSex(true) - } + if (diseases_eth !== '') { + setDisEth(diseases_eth) + setFilterDisEth(true) + } + if (diseases_sex !== '') { + setDisSex(diseases_sex) + setFilterDisSex(true) + } - if (element2.eventEthnicities !== undefined) { - ethnicities_dis = - element2.eventEthnicities.distribution.ethnicities_disease - ethnicities_sex = - element2.eventEthnicities.distribution.ethnicities_sex - } + if (element2.eventEthnicities !== undefined) { + ethnicities_dis = + element2.eventEthnicities.distribution.ethnicities_disease + ethnicities_sex = + element2.eventEthnicities.distribution.ethnicities_sex + } - if (ethnicities_dis !== '') { - setEthDis(ethnicities_dis) - setFilterEthDis(true) - } - if (ethnicities_sex !== '') { - setEthSex(ethnicities_sex) - setFilterEthSex(true) - } + if (ethnicities_dis !== '') { + setEthDis(ethnicities_dis) + setFilterEthDis(true) + } + if (ethnicities_sex !== '') { + setEthSex(ethnicities_sex) + setFilterEthSex(true) + } - setNameCohort(element.name) + setNameCohort(element.name) - if (sexs !== '') { - valuesSex = Object.values(sexs) - labelsSex = Object.keys(sexs) - } + if (sexs !== '') { + valuesSex = Object.values(sexs) + labelsSex = Object.keys(sexs) + } - if (ethnicities !== '') { - valuesEthnicities = Object.values(ethnicities) - labelsEthnicities = Object.keys(ethnicities) - } + if (ethnicities !== '') { + valuesEthnicities = Object.values(ethnicities) + labelsEthnicities = Object.keys(ethnicities) + } - if (labelsEthnicities !== '') { - setLabelsEthnicities(labelsEthnicities) - } - console.log(geoData) - if (geoData !== '') { - valuesGeo = Object.values(geoData) - labelsGeo = Object.keys(geoData) - entriesGeo = Object.entries(geoData) - } + if (labelsEthnicities !== '') { + setLabelsEthnicities(labelsEthnicities) + } + console.log(geoData) + if (geoData !== '') { + valuesGeo = Object.values(geoData) + labelsGeo = Object.keys(geoData) + entriesGeo = Object.entries(geoData) + } - if (diseasesData !== '') { - valuesDiseases = Object.values(diseasesData) - labelsDiseases = Object.keys(diseasesData) - } + if (diseasesData !== '') { + valuesDiseases = Object.values(diseasesData) + labelsDiseases = Object.keys(diseasesData) + } - if (labelsDiseases !== '') { - setLabelsDiseases(labelsDiseases) - } + if (labelsDiseases !== '') { + setLabelsDiseases(labelsDiseases) + } - if (valuesSex !== '' && labelsSex !== '') { - var optionsSex = { - chart: { - type: 'donut' - }, - title: { - text: 'Sex' - }, - series: valuesSex, - labels: labelsSex - } + if (valuesSex !== '' && labelsSex !== '') { + var optionsSex = { + chart: { + type: 'donut' + }, + title: { + text: 'Sex' + }, + series: valuesSex, + labels: labelsSex + } - var chartSex = new ApexCharts( - document.querySelector('#chartSex'), - optionsSex - ) + var chartSex = new ApexCharts( + document.querySelector('#chartSex'), + optionsSex + ) - chartSex.render() - } + chartSex.render() + } - if (valuesEthnicities !== '' && labelsEthnicities !== '') { - var optionsEthnicity = { - chart: { - type: 'bar' - }, - title: { - text: 'Ethnicity', - align: 'center', - floating: true - }, - series: [ - { - name: 'Number of individuals', - data: valuesEthnicities - } - ], - xaxis: { - categories: labelsEthnicities + if (valuesEthnicities !== '' && labelsEthnicities !== '') { + var optionsEthnicity = { + chart: { + type: 'bar' + }, + title: { + text: 'Ethnicity', + align: 'center', + floating: true + }, + series: [ + { + name: 'Number of individuals', + data: valuesEthnicities } + ], + xaxis: { + categories: labelsEthnicities } - - var chartEthnicity = new ApexCharts( - document.querySelector('#chartEthnicity'), - optionsEthnicity - ) - chartEthnicity.render() } - if (valuesGeo !== '' && labelsGeo !== '') { - var optionsGeo = { - chart: { - type: 'pie' - }, - title: { - text: 'Geographical origin' - }, - series: valuesGeo, - labels: labelsGeo - } + var chartEthnicity = new ApexCharts( + document.querySelector('#chartEthnicity'), + optionsEthnicity + ) + chartEthnicity.render() + } - var chartGeo = new ApexCharts( - document.querySelector('#chartGeo'), - optionsGeo - ) - chartGeo.render() + if (valuesGeo !== '' && labelsGeo !== '') { + var optionsGeo = { + chart: { + type: 'pie' + }, + title: { + text: 'Geographical origin' + }, + series: valuesGeo, + labels: labelsGeo } - if (valuesDiseases !== '' && labelsDiseases !== '') { - var optionsDiseases = { - series: [ - { - data: valuesDiseases - } - ], - chart: { - type: 'bar', - height: 630 - }, - plotOptions: { - bar: { - barHeight: '100%', - distributed: true, - horizontal: true, - dataLabels: { - position: 'bottom' - } - } - }, - colors: [ - '#33b2df', - '#546E7A', - '#FFD700', - '#2b908f', - '#DC143C', - '#f48024', - '#69d2e7', - '#13d8aa', - '#A5978B', - '#f9a3a4', - '#FF4500', - '#51f08e', - '#b051f0', - '#CCFF33', - '#FF66CC', - '#FF3333', - '#6633CC', - '#CD853F', - '#3333FF', - '#FF3333' - ], - dataLabels: { - enabled: true, - textAnchor: 'start', - style: { - colors: ['#fff'] - }, - formatter: function (val, opt) { - return ( - opt.w.globals.labels[opt.dataPointIndex] + - ': ' + - val - ) - }, - offsetX: 0, - dropShadow: { - enabled: true + var chartGeo = new ApexCharts( + document.querySelector('#chartGeo'), + optionsGeo + ) + chartGeo.render() + } + + if (valuesDiseases !== '' && labelsDiseases !== '') { + var optionsDiseases = { + series: [ + { + data: valuesDiseases + } + ], + chart: { + type: 'bar', + height: 630 + }, + plotOptions: { + bar: { + barHeight: '100%', + distributed: true, + horizontal: true, + dataLabels: { + position: 'bottom' } - }, - stroke: { - width: 1, + } + }, + colors: [ + '#33b2df', + '#546E7A', + '#FFD700', + '#2b908f', + '#DC143C', + '#f48024', + '#69d2e7', + '#13d8aa', + '#A5978B', + '#f9a3a4', + '#FF4500', + '#51f08e', + '#b051f0', + '#CCFF33', + '#FF66CC', + '#FF3333', + '#6633CC', + '#CD853F', + '#3333FF', + '#FF3333' + ], + dataLabels: { + enabled: true, + textAnchor: 'start', + style: { colors: ['#fff'] }, - xaxis: { - categories: labelsDiseases + formatter: function (val, opt) { + return ( + opt.w.globals.labels[opt.dataPointIndex] + ': ' + val + ) }, - yaxis: { - labels: { - show: false - } - }, - title: { - text: 'Diseases', - align: 'center', - floating: true + offsetX: 0, + dropShadow: { + enabled: true + } + }, + stroke: { + width: 1, + colors: ['#fff'] + }, + xaxis: { + categories: labelsDiseases + }, + yaxis: { + labels: { + show: false + } + }, + title: { + text: 'Diseases', + align: 'center', + floating: true + }, + tooltip: { + theme: 'dark', + x: { + show: false }, - tooltip: { - theme: 'dark', - x: { - show: false - }, - y: { - title: { - formatter: function () { - return '' - } + y: { + title: { + formatter: function () { + return '' } } } } - - var chartDiseases = new ApexCharts( - document.querySelector('#chartDiseases'), - optionsDiseases - ) - chartDiseases.render() } - setTimeOut(true) - } else { - setTimeOut(true) - setDataAvailable(false) + + var chartDiseases = new ApexCharts( + document.querySelector('#chartDiseases'), + optionsDiseases + ) + chartDiseases.render() } - }) - } else { - setNoCollectionEvents(true) - } + setTimeOut(true) + } else { + setTimeOut(true) + setDataAvailable(false) + } + }) + } else { + setNoCollectionEvents(true) } - }) + } }) } setTrigger(true) - if (selectedCohorts.length > 0) { + if (selectedCohorts) { apiCall() } }, [showGraphs, trigger]) @@ -674,7 +669,9 @@ function Cohorts (props) { )} - {trigger && noCollectionEvents && NO GRAPHICS AVAILABLE FOR THE SELECTED COHORTS} + {trigger && noCollectionEvents && ( + NO GRAPHICS AVAILABLE FOR THE SELECTED COHORTS + )} {showGraphs === true && dataAvailable === false && timeOut === true && (
diff --git a/frontend/src/components/Cohorts/CohortsModule.js b/frontend/src/components/Cohorts/CohortsModule.js index 5ad4c8e..2dbe074 100644 --- a/frontend/src/components/Cohorts/CohortsModule.js +++ b/frontend/src/components/Cohorts/CohortsModule.js @@ -6,30 +6,27 @@ import makeAnimated from 'react-select/animated' function CohortsModule (props) { const [results, setResults] = useState(null) - const [selectedCohortsAux, setSelectedCohortsAux] = useState([]) + const animatedComponents = makeAnimated() + const [selected, setSelected] = useState(null) const onSubmitCohorts = () => { setResults('Cohorts') props.setShowGraphs(true) } const handleChangeCohorts = selectedOption => { - setSelectedCohortsAux([]) - selectedCohortsAux.push(selectedOption) - props.setSelectedCohorts(selectedCohortsAux) + console.log(selectedOption) + setSelected(selectedOption) + + props.setSelectedCohorts(selectedOption) } return (
isActive ? 'Cross-queries2' : 'Cross-queries' } @@ -334,7 +334,7 @@ function Navbar () { isActive ? 'Cross-queries2' : 'Cross-queries' diff --git a/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js b/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js index 73df938..fde31f2 100644 --- a/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js +++ b/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js @@ -58,7 +58,6 @@ function TableResultsBiosamples (props) { const handleClickDatasets = e => { console.log(e) - openDatasetArray[e] = true console.log(openDatasetArray) @@ -67,7 +66,7 @@ function TableResultsBiosamples (props) { setTrigger(!trigger) } - const columns = [ + let columns = [ { field: 'id', headerName: 'Row', @@ -75,13 +74,13 @@ function TableResultsBiosamples (props) { headerClassName: 'super-app-theme--header' }, { - field: 'IndividualId', - headerName: 'Individual ID', + field: 'BiosampleId', + headerName: 'Biosample ID', width: 150, headerClassName: 'super-app-theme--header', renderCell: params => ( - - {params.row.IndividualId} + + {params.row.BiosampleId} ) }, @@ -92,47 +91,108 @@ function TableResultsBiosamples (props) { headerClassName: 'super-app-theme--header' }, { - field: 'ethnicity', - headerName: 'ethnicity', + field: 'individualId', + headerName: 'Individual ID', + width: 150, + headerClassName: 'super-app-theme--header' + }, + { + field: 'biosampleStatus', + headerName: 'Biosample status', width: 240, headerClassName: 'super-app-theme--header' }, { - field: 'geographicOrigin', - headerName: 'geographicOrigin', + field: 'collectionDate', + headerName: 'Collection date', width: 250, headerClassName: 'super-app-theme--header' }, { - field: 'interventionsOrProcedures', - headerName: 'interventionsOrProcedures', + field: 'collectionMoment', + headerName: 'Collection moment', width: 350, headerClassName: 'super-app-theme--header' }, { - field: 'measures', - headerName: 'measures', + field: 'sampleOriginType', + headerName: 'Sample origin type', width: 350, headerClassName: 'super-app-theme--header', cellClass: 'pre' }, { - field: 'sex', - headerName: 'sex', + field: 'sampleOriginDetail', + headerName: 'Sample origin detail', + width: 200, + headerClassName: 'super-app-theme--header' + }, + { + field: 'obtentionProcedure', + headerName: 'Obtention procedure', + width: 300, + headerClassName: 'super-app-theme--header' + }, + { + field: 'tumorProgression', + headerName: 'Tumor progression', + width: 350, + headerClassName: 'super-app-theme--header' + }, + { + field: 'tumorGrade', + headerName: 'Tumor Grade', width: 200, headerClassName: 'super-app-theme--header' }, { - field: 'diseases', - headerName: 'diseases', + field: 'pathologicalStage', + headerName: 'Pathological stage', + width: 350, + headerClassName: 'super-app-theme--header' + }, + { + field: 'pathologicalTnmFinding', + headerName: 'Pathological TNM findings', + width: 300, + headerClassName: 'super-app-theme--header' + }, + { + field: 'histologicalDiagnosis', + headerName: 'Histological diagnosis', width: 350, headerClassName: 'super-app-theme--header' + }, + { + field: 'diagnosticMarkers', + headerName: 'Diagnostic markers', + width: 300, + headerClassName: 'super-app-theme--header' + }, + { + field: 'phenotypicFeatures', + headerName: 'Phenotypic features', + width: 300, + headerClassName: 'super-app-theme--header' + }, + { + field: 'measurements', + headerName: 'Measurements', + width: 300, + headerClassName: 'super-app-theme--header' + }, + { + field: 'sampleProcessing', + headerName: 'Sample processing', + width: 300, + headerClassName: 'super-app-theme--header' + }, + { + field: 'sampleStorage', + headerName: 'Sample storage', + width: 300, + headerClassName: 'super-app-theme--header' } - // { field: 'pedigrees', headerName: 'pedigrees', width: 150 }, - // { field: 'treatments', headerName: 'treatments', width: 150 }, - //{ field: 'interventionsOrProcedures', headerName: 'interventionsOrProcedures', width: 150 }, - // { field: 'exposures', headerName: 'exposures', width: 150 }, - // { field: 'karyotypicSex', headerName: 'karyotypicSex', width: 150 }, ] const handleSeeResults = e => { @@ -161,53 +221,175 @@ function TableResultsBiosamples (props) { }) resultsSelectedFinal.forEach((element, index) => { if (element[1] !== undefined) { - let eth_id = '' - let eth_label = '' - let stringEth = '' + console.log(element[0]) + let biosampleStatus_id = '' + let biosampleStatus_label = '' + let stringBiosampleStatus = '' - if (element[1].ethnicity !== '' && element[1].ethnicity !== undefined) { - if (element[1].ethnicity.id !== undefined) { - eth_id = element[1].ethnicity.id + if ( + element[1].biosampleStatus !== '' && + element[1].biosampleStatus !== undefined + ) { + if (element[1].biosampleStatus.id !== undefined) { + biosampleStatus_id = element[1].biosampleStatus.id } - eth_label = element[1].ethnicity.label - stringEth = `${eth_id} / ${eth_label} ` + biosampleStatus_label = element[1].biosampleStatus.label + stringBiosampleStatus = `${biosampleStatus_id} / ${biosampleStatus_label} ` } else { - stringEth = '' + stringBiosampleStatus = '' } - let sex_id = '' - let sex_label = '' - let stringSex = '' + let sampleOriginType_id = '' + let sampleOriginType_label = '' + let stringSampleOriginType = '' - if (element[1].sex !== '') { - sex_id = element[1].sex.id - sex_label = element[1].sex.label - stringSex = `${element[1].sex.label} / ${element[1].sex.id}` + if (element[1].sampleOriginType !== '') { + sampleOriginType_id = element[1].sampleOriginType.id + sampleOriginType_label = element[1].sampleOriginType.label + stringSampleOriginType = `${element[1].sampleOriginType.label} / ${element[1].sampleOriginType.id}` } else { - stringSex = '' + stringSampleOriginType = '' } - let geographic_id = '' - let geographic_label = '' - let stringGeographic = '' + let sampleOriginDetail_id = '' + let sampleOriginDetail_label = '' + let stringSampleOriginDetail = '' if ( - element[1].geographicOrigin !== '' && - element[1].geographicOrigin !== undefined + element[1].sampleOriginDetail !== '' && + element[1].sampleOriginDetail !== undefined ) { - geographic_id = element[1].geographicOrigin.id - geographic_label = element[1].geographicOrigin.label - stringGeographic = `${geographic_id} / ${geographic_label}` + sampleOriginDetail_id = element[1].sampleOriginDetail.id + sampleOriginDetail_label = element[1].sampleOriginDetail.label + stringSampleOriginDetail = `${sampleOriginDetail_id} / ${sampleOriginDetail_label}` } else { - stringGeographic = '' + stringSampleOriginDetail = '' + } + + let collectionDateJson = [] + if ( + element[1].collectionDate !== '' && + element[1].collectionDate !== undefined + ) { + if (typeof element[1].collectionDate === 'string') { + collectionDateJson = element[1].collectionDate + } + } + + let collectionMomentJson = [] + if ( + element[1].collectionMoment !== '' && + element[1].collectionMoment !== undefined + ) { + if (typeof element[1].collectionMoment === 'string') { + collectionMomentJson = element[1].collectionMoment + } + } + + let obtentionProcedureJson = [] + + if ( + element[1].obtentionProcedure !== '' && + element[1].obtentionProcedure !== undefined + ) { + if (typeof element[1].obtentionProcedure === 'object') { + element[1].obtentionProcedure.forEach(element2 => { + obtentionProcedureJson.push( + JSON.stringify(element2, null, 2) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + ) + }) + obtentionProcedureJson = obtentionProcedureJson.toString() + obtentionProcedureJson = obtentionProcedureJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + obtentionProcedureJson = obtentionProcedureJson.replaceAll(',', '') + } else { + obtentionProcedureJson = JSON.stringify( + element[1].obtentionProcedure, + null, + 2 + ) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + obtentionProcedureJson = obtentionProcedureJson.toString() + obtentionProcedureJson = obtentionProcedureJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + obtentionProcedureJson = obtentionProcedureJson.replaceAll(',', '') + } + } + + let tumorProgressionJson = [] + + if ( + element[1].tumorProgression !== '' && + element[1].tumorProgression !== undefined + ) { + if (typeof element[1].tumorProgression === 'object') { + element[1].tumorProgression.forEach(element2 => { + tumorProgressionJson.push( + JSON.stringify(element2, null, 2) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + ) + }) + tumorProgressionJson = tumorProgressionJson.toString() + tumorProgressionJson = tumorProgressionJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + tumorProgressionJson = tumorProgressionJson.replaceAll(',', '') + } else { + tumorProgressionJson = JSON.stringify( + element[1].tumorProgression, + null, + 2 + ) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + tumorProgressionJson = tumorProgressionJson.toString() + tumorProgressionJson = tumorProgressionJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + tumorProgressionJson = tumorProgressionJson.replaceAll(',', '') + } } - let measuresJson = [] - if (element[1].measures !== '' && element[1].measures !== undefined) { - if (typeof element[1].measures === 'object') { - element[1].measures.forEach(element2 => { - measuresJson.push( + let tumorGradeJson = [] + + if ( + element[1].tumorGrade !== '' && + element[1].tumorGrade !== undefined + ) { + if (typeof element[1].tumorGrade === 'object') { + element[1].tumorGrade.forEach(element2 => { + tumorGradeJson.push( JSON.stringify(element2, null, 2) .replaceAll('[', '') .replaceAll(']', '') @@ -219,13 +401,13 @@ function TableResultsBiosamples (props) { .replaceAll('"', '') ) }) - measuresJson = measuresJson.toString() - measuresJson = measuresJson + tumorGradeJson = tumorGradeJson.toString() + tumorGradeJson = tumorGradeJson .replaceAll(', ', ',') .replaceAll(' ,', ',') - measuresJson = measuresJson.replaceAll(',', '') + tumorGradeJson = tumorGradeJson.replaceAll(',', '') } else { - measuresJson = JSON.stringify(element[1].measures, null, 2) + tumorGradeJson = JSON.stringify(element[1].tumorGrade, null, 2) .replaceAll('[', '') .replaceAll(']', '') .replaceAll('{', '') @@ -234,24 +416,123 @@ function TableResultsBiosamples (props) { .replaceAll(' ,', '') .replaceAll(', ', '') .replaceAll('"', '') + tumorGradeJson = tumorGradeJson.toString() + tumorGradeJson = tumorGradeJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + tumorGradeJson = tumorGradeJson.replaceAll(',', '') + } + } - measuresJson = measuresJson.toString() - measuresJson = measuresJson + let pathologicalStageJson = [] + + if ( + element[1].pathologicalStage !== '' && + element[1].pathologicalStage !== undefined + ) { + if (typeof element[1].pathologicalStage === 'object') { + element[1].pathologicalStage.forEach(element2 => { + pathologicalStageJson.push( + JSON.stringify(element2, null, 2) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + ) + }) + pathologicalStageJson = pathologicalStageJson.toString() + pathologicalStageJson = pathologicalStageJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + pathologicalStageJson = pathologicalStageJson.replaceAll(',', '') + } else { + pathologicalStageJson = JSON.stringify( + element[1].pathologicalStage, + null, + 2 + ) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + pathologicalStageJson = pathologicalStageJson.toString() + pathologicalStageJson = pathologicalStageJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + pathologicalStageJson = pathologicalStageJson.replaceAll(',', '') + } + } + + let pathologicalTnmFindingJson = [] + + if ( + element[1].pathologicalTnmFinding !== '' && + element[1].pathologicalTnmFinding !== undefined + ) { + if (typeof element[1].pathologicalTnmFinding === 'object') { + element[1].pathologicalTnmFinding.forEach(element2 => { + pathologicalTnmFindingJson.push( + JSON.stringify(element2, null, 2) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + ) + }) + pathologicalTnmFindingJson = pathologicalTnmFindingJson.toString() + pathologicalTnmFindingJson = pathologicalTnmFindingJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + pathologicalTnmFindingJson = pathologicalTnmFindingJson.replaceAll( + ',', + '' + ) + } else { + pathologicalTnmFindingJson = JSON.stringify( + element[1].pathologicalTnmFinding, + null, + 2 + ) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + pathologicalTnmFindingJson = pathologicalTnmFindingJson.toString() + pathologicalTnmFindingJson = pathologicalTnmFindingJson .replaceAll(', ', ',') .replaceAll(' ,', ',') - measuresJson = measuresJson.replaceAll(',', '') + pathologicalTnmFindingJson = pathologicalTnmFindingJson.replaceAll( + ',', + '' + ) } } - let interventionsProcedures = [] + let histologicalDiagnosisJson = [] if ( - element[1].interventionsOrProcedures !== '' && - element[1].interventionsOrProcedures !== undefined + element[1].histologicalDiagnosis !== '' && + element[1].histologicalDiagnosis !== undefined ) { - if (typeof element[1].interventionsOrProcedures === 'object') { - element[1].interventionsOrProcedures.forEach(element2 => { - interventionsProcedures.push( + if (typeof element[1].histologicalDiagnosis === 'object') { + element[1].histologicalDiagnosis.forEach(element2 => { + histologicalDiagnosisJson.push( JSON.stringify(element2, null, 2) .replaceAll('[', '') .replaceAll(']', '') @@ -263,17 +544,17 @@ function TableResultsBiosamples (props) { .replaceAll('"', '') ) }) - interventionsProcedures = interventionsProcedures.toString() - interventionsProcedures = interventionsProcedures + histologicalDiagnosisJson = histologicalDiagnosisJson.toString() + histologicalDiagnosisJson = histologicalDiagnosisJson .replaceAll(', ', ',') .replaceAll(' ,', ',') - interventionsProcedures = interventionsProcedures.replaceAll( + histologicalDiagnosisJson = histologicalDiagnosisJson.replaceAll( ',', '' ) } else { - interventionsProcedures = JSON.stringify( - element[1].interventionsOrProcedures, + histologicalDiagnosisJson = JSON.stringify( + element[1].histologicalDiagnosis, null, 2 ) @@ -285,23 +566,26 @@ function TableResultsBiosamples (props) { .replaceAll(' ,', '') .replaceAll(', ', '') .replaceAll('"', '') - interventionsProcedures = interventionsProcedures.toString() - interventionsProcedures = interventionsProcedures + histologicalDiagnosisJson = histologicalDiagnosisJson.toString() + histologicalDiagnosisJson = histologicalDiagnosisJson .replaceAll(', ', ',') .replaceAll(' ,', ',') - interventionsProcedures = interventionsProcedures.replaceAll( + histologicalDiagnosisJson = histologicalDiagnosisJson.replaceAll( ',', '' ) } } - let diseases = [] + let diagnosticMarkersJson = [] - if (element[1].diseases !== '' && element[1].diseases !== undefined) { - if (typeof element[1].diseases === 'object') { - element[1].diseases.forEach(element2 => { - diseases.push( + if ( + element[1].diagnosticMarkers !== '' && + element[1].diagnosticMarkers !== undefined + ) { + if (typeof element[1].diagnosticMarkers === 'object') { + element[1].diagnosticMarkers.forEach(element2 => { + diagnosticMarkersJson.push( JSON.stringify(element2, null, 2) .replaceAll('[', '') .replaceAll(']', '') @@ -313,11 +597,17 @@ function TableResultsBiosamples (props) { .replaceAll('"', '') ) }) - diseases = diseases.toString() - diseases = diseases.replaceAll(', ', ',').replaceAll(' ,', ',') - diseases = diseases.replaceAll(',', '') + diagnosticMarkersJson = diagnosticMarkersJson.toString() + diagnosticMarkersJson = diagnosticMarkersJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + diagnosticMarkersJson = diagnosticMarkersJson.replaceAll(',', '') } else { - diseases = JSON.stringify(element[1].diseases, null, 2) + diagnosticMarkersJson = JSON.stringify( + element[1].diagnosticMarkers, + null, + 2 + ) .replaceAll('[', '') .replaceAll(']', '') .replaceAll('{', '') @@ -326,26 +616,269 @@ function TableResultsBiosamples (props) { .replaceAll(' ,', '') .replaceAll(', ', '') .replaceAll('"', '') - diseases = diseases.toString() - diseases = diseases.replaceAll(', ', ',').replaceAll(' ,', ',') - diseases = diseases.replaceAll(',', '') + diagnosticMarkersJson = diagnosticMarkersJson.toString() + diagnosticMarkersJson = diagnosticMarkersJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + diagnosticMarkersJson = diagnosticMarkersJson.replaceAll(',', '') } } - rows.push({ - id: index, - IndividualId: element[1].id, - Beacon: element[0], - ethnicity: stringEth, - geographicOrigin: stringGeographic, - interventionsOrProcedures: interventionsProcedures, - measures: measuresJson, - sex: stringSex, - diseases: diseases - }) + let phenotypicFeaturesJson = [] + + if ( + element[1].phenotypicFeatures !== '' && + element[1].phenotypicFeatures !== undefined + ) { + if (typeof element[1].phenotypicFeatures === 'object') { + element[1].phenotypicFeatures.forEach(element2 => { + phenotypicFeaturesJson.push( + JSON.stringify(element2, null, 2) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + ) + }) + phenotypicFeaturesJson = phenotypicFeaturesJson.toString() + phenotypicFeaturesJson = phenotypicFeaturesJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + phenotypicFeaturesJson = phenotypicFeaturesJson.replaceAll(',', '') + } else { + phenotypicFeaturesJson = JSON.stringify( + element[1].phenotypicFeatures, + null, + 2 + ) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + phenotypicFeaturesJson = phenotypicFeaturesJson.toString() + phenotypicFeaturesJson = phenotypicFeaturesJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + phenotypicFeaturesJson = phenotypicFeaturesJson.replaceAll(',', '') + } + } + + let measurementsJson = [] + + if ( + element[1].measurements !== '' && + element[1].measurements !== undefined + ) { + if (typeof element[1].measurements === 'object') { + element[1].measurements.forEach(element2 => { + measurementsJson.push( + JSON.stringify(element2, null, 2) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + ) + }) + measurementsJson = measurementsJson.toString() + measurementsJson = measurementsJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + measurementsJson = measurementsJson.replaceAll(',', '') + } else { + measurementsJson = JSON.stringify(element[1].measurements, null, 2) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + measurementsJson = measurementsJson.toString() + measurementsJson = measurementsJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + measurementsJson = measurementsJson.replaceAll(',', '') + } + } + + let sampleProcessingJson = [] + + if ( + element[1].sampleProcessing !== '' && + element[1].sampleProcessing !== undefined + ) { + if (typeof element[1].sampleProcessing === 'object') { + element[1].sampleProcessing.forEach(element2 => { + sampleProcessingJson.push( + JSON.stringify(element2, null, 2) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + ) + }) + sampleProcessingJson = sampleProcessingJson.toString() + sampleProcessingJson = sampleProcessingJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + sampleProcessingJson = sampleProcessingJson.replaceAll(',', '') + } else { + sampleProcessingJson = JSON.stringify( + element[1].sampleProcessing, + null, + 2 + ) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + sampleProcessingJson = sampleProcessingJson.toString() + sampleProcessingJson = sampleProcessingJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + sampleProcessingJson = sampleProcessingJson.replaceAll(',', '') + } + } + + let sampleStorageJson = [] + + if ( + element[1].sampleStorage !== '' && + element[1].sampleStorage !== undefined + ) { + if (typeof element[1].sampleStorage === 'object') { + element[1].sampleStorage.forEach(element2 => { + sampleStorageJson.push( + JSON.stringify(element2, null, 2) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + ) + }) + sampleStorageJson = sampleStorageJson.toString() + sampleStorageJson = sampleStorageJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + sampleStorageJson = sampleStorageJson.replaceAll(',', '') + } else { + sampleStorageJson = JSON.stringify( + element[1].sampleStorage, + null, + 2 + ) + .replaceAll('[', '') + .replaceAll(']', '') + .replaceAll('{', '') + .replaceAll('}', '') + .replaceAll(',', '') + .replaceAll(' ,', '') + .replaceAll(', ', '') + .replaceAll('"', '') + sampleStorageJson = sampleStorageJson.toString() + sampleStorageJson = sampleStorageJson + .replaceAll(', ', ',') + .replaceAll(' ,', ',') + sampleStorageJson = sampleStorageJson.replaceAll(',', '') + } + } + + var myObjRows = new Object() + myObjRows.id = index + if (element[1].id !== '') { + myObjRows.BiosampleId = element[1].id + } + if (element[1].individualId !== '') { + myObjRows.individualId = element[1].individualId + } + myObjRows.Beacon = element[0] + + if (stringBiosampleStatus !== '') { + myObjRows.biosampleStatus = stringBiosampleStatus + } + if (stringSampleOriginType !== '') { + myObjRows.sampleOriginType = stringSampleOriginType + } + + console.log(stringSampleOriginDetail) + if (stringSampleOriginDetail !== '') { + myObjRows.sampleOriginDetail = stringSampleOriginDetail + } + + if (collectionDateJson !== '') { + myObjRows.collectionDate = collectionDateJson + } + if (collectionMomentJson !== '') { + myObjRows.collectionMoment = collectionMomentJson + } + if (obtentionProcedureJson !== '') { + myObjRows.obtentionProcedure = obtentionProcedureJson + } + if (tumorProgressionJson !== '') { + myObjRows.tumorProgression = tumorProgressionJson + } + if (tumorGradeJson !== '') { + myObjRows.tumorGrade = tumorGradeJson + } + + if (pathologicalStageJson !== '') { + myObjRows.pathologicalStage = pathologicalStageJson + } + + if (pathologicalTnmFindingJson !== '') { + myObjRows.pathologicalTnmFinding = pathologicalTnmFindingJson + } + + if (histologicalDiagnosisJson !== '') { + myObjRows.histologicalDiagnosis = histologicalDiagnosisJson + } + if (diagnosticMarkersJson !== '') { + myObjRows.diagnosticMarkers = diagnosticMarkersJson + } + if (phenotypicFeaturesJson !== '') { + myObjRows.phenotypicFeatures = phenotypicFeaturesJson + } + if (measurementsJson !== '') { + myObjRows.measurements = measurementsJson + } + if (sampleProcessingJson !== '') { + myObjRows.sampleProcessing = sampleProcessingJson + } + if (sampleStorageJson !== '') { + myObjRows.sampleStorage = sampleStorageJson + } + + rows.push(myObjRows) + console.log(rows) if (index === resultsSelectedFinal.length - 1) { setEditable(rows.map(o => ({ ...o }))) + setTrigger2(true) } } @@ -377,6 +910,8 @@ function TableResultsBiosamples (props) { }) setShowDatasets(true) + console.log(props.resultsNotPerDataset) + console.log(props.resultsPerDataset) }, []) return ( @@ -388,10 +923,76 @@ function TableResultsBiosamples (props) { <> {props.show !== 'full' && ( <> - {props.resultsPerDataset.map((element, index) => { - return ( - <> - {element[0] === result[0].meta.beaconId && ( + {props.resultsPerDataset.map((element, index) => { + return ( + <> + {element[0] === result[0].meta.beaconId && ( +
+
+
+ {result[0].meta.beaconId} +

{result[0].response.organization.name}

+
+ + {element[1].map((datasetObject, indexDataset) => { + return ( +
+ + {openDatasetArray[[index, indexDataset]] === + true && + triggerArray[[index, indexDataset]] === + true && + element[2][indexDataset] === true && + props.show === 'boolean' && ( +
FOUND
+ )} + {openDatasetArray[[index, indexDataset]] === + true && + triggerArray[[index, indexDataset]] === + true && + element[2][indexDataset] === false && + props.show === 'boolean' && ( +
NOT FOUND
+ )} + {props.show === 'count' && + triggerArray[[index, indexDataset]] === + true && ( +
+ {element[3][indexDataset]} RESULTS +
+ )} +
+ ) + })} +
+
+ )} + + ) + })} + + {props.resultsNotPerDataset.map(element => { + return ( + <> + {result[2] === true && + props.show === 'boolean' && + element[0] === result[0].meta.beaconId && (
@@ -407,135 +1008,78 @@ function TableResultsBiosamples (props) {
- {element[1].map((datasetObject, indexDataset) => { - return ( - -
- - {openDatasetArray[[index,indexDataset]] === true && - triggerArray[[index,indexDataset]] === true && - element[2][indexDataset] === true && - props.show === 'boolean' &&
FOUND
} - {openDatasetArray[[index,indexDataset]] === true && - triggerArray[[index,indexDataset]] === true && - element[2][indexDataset] === false && - props.show === 'boolean' && ( -
NOT FOUND
- )} - {props.show === 'count' && - triggerArray[[index,indexDataset]] === true && ( -
{element[3][indexDataset]}
- )} -
- ) - })} - - +
+ No datasets available +
FOUND
+
)} - - ) - })} - - {props.resultsNotPerDataset.map(element => { - return ( - <> - {result[2] === true && - props.show === 'boolean' && - element[0] === result[0].meta.beaconId && ( -
-
-
- {result[0].meta.beaconId} -

- {result[0].response.organization.name} -

-
- -
- No datasets available -
FOUND
-
+ {result[2] === false && + props.show === 'boolean' && + element[0] === result[0].meta.beaconId && ( +
+
+
+ {result[0].meta.beaconId} +

+ {result[0].response.organization.name} +

-
- )} - {result[2] === false && - props.show === 'boolean' && - element[0] === result[0].meta.beaconId && ( -
-
-
- {result[0].meta.beaconId} -

- {result[0].response.organization.name} -

-
-
- No datasets available -
NOT FOUND
-
+
+ No datasets available +
NOT FOUND
- )} - - {props.show === 'count' && - element[0] === result[0].meta.beaconId && ( -
-
-
- {result[0].meta.beaconId} -

- {result[0].response.organization.name} -

-
-
- No datasets available -
- {result[1]} results -
-
- +
+ )} + + {props.show === 'count' && + element[0] === result[0].meta.beaconId && ( +
+
+
+ {result[0].meta.beaconId} +

+ {result[0].response.organization.name} +

+
+ No datasets available +
+ {result[1]} results +
+
+
- )} - - ) - })} - +
+ )} + + ) + })} + )} {props.show === 'full' && result[2] === true && (
diff --git a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js index c2cea0f..58d3d2e 100644 --- a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js +++ b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js @@ -79,7 +79,7 @@ function TableResultsIndividuals (props) { width: 150, headerClassName: 'super-app-theme--header', renderCell: params => ( - + {params.row.IndividualId} ) diff --git a/frontend/src/components/Verifier/Verifier.css b/frontend/src/components/Validator/Validator.css similarity index 100% rename from frontend/src/components/Verifier/Verifier.css rename to frontend/src/components/Validator/Validator.css diff --git a/frontend/src/components/Verifier/Verifier.js b/frontend/src/components/Validator/Validator.js similarity index 96% rename from frontend/src/components/Verifier/Verifier.js rename to frontend/src/components/Validator/Validator.js index 2db30e2..adc4196 100644 --- a/frontend/src/components/Verifier/Verifier.js +++ b/frontend/src/components/Validator/Validator.js @@ -1,9 +1,9 @@ -import './Verifier.css' +import './Validator.css' import { useState, useEffect } from 'react' import axios from 'axios' import configData from '../../config.json' -function Verifier () { +function Validator () { const [verifierUrl, setVerifierUrl] = useState('') const [response, setResponse] = useState([]) const [showResults, setShowResults] = useState(false) @@ -121,8 +121,6 @@ function Verifier () {
Code:

{element.code}

- Path: -

{element.path}

Location:

{element.location}

Message: @@ -145,4 +143,4 @@ function Verifier () { ) } -export default Verifier +export default Validator