From 35c81e421b27fa96b5574daedc52f76fbf7dab91 Mon Sep 17 00:00:00 2001 From: Gemma Date: Tue, 16 Jan 2024 17:36:25 +0100 Subject: [PATCH] runs and analyses --- frontend/src/App.css | 5 + .../components/Analyses/AnalysesResults.js | 477 ++++++++++++++ .../Biosamples/BiosamplesResults.js | 13 +- frontend/src/components/Cohorts/Cohorts.css | 101 --- frontend/src/components/Cohorts/Cohorts.js | 2 +- .../components/CrossQueries/CrossQueries.css | 27 +- .../components/Datasets/ResultsDatasets.css | 3 +- .../GenomicVariations/VariantsResults.js | 119 ++-- .../Individuals/IndividualsResults.js | 10 +- frontend/src/components/Layout/Layout.js | 108 +++- frontend/src/components/NavBar/Navbar.css | 55 +- .../AnalysesResults/TableResultsAnalyses.js | 610 ++++++++++++++++++ .../TableResultsIndividuals.css | 12 +- .../Results/RunsResults/TableResultsRuns.js | 535 +++++++++++++++ frontend/src/components/Runs/RunsResults.js | 477 ++++++++++++++ 15 files changed, 2385 insertions(+), 169 deletions(-) create mode 100644 frontend/src/components/Analyses/AnalysesResults.js create mode 100644 frontend/src/components/Results/AnalysesResults/TableResultsAnalyses.js create mode 100644 frontend/src/components/Results/RunsResults/TableResultsRuns.js create mode 100644 frontend/src/components/Runs/RunsResults.js diff --git a/frontend/src/App.css b/frontend/src/App.css index 75c518f..7897306 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -30,6 +30,7 @@ html { color: rgba(12, 16, 64, 0.606); font-size: 16px; font-variant-caps: all-petite-caps; + margin-top: 16px; } .modeVariants { @@ -1101,6 +1102,10 @@ h5 { padding: 2px; } + .ReactModal__Overlay{ + z-index: 3; + } + .filters { padding: 4px; cursor: pointer; diff --git a/frontend/src/components/Analyses/AnalysesResults.js b/frontend/src/components/Analyses/AnalysesResults.js new file mode 100644 index 0000000..2445645 --- /dev/null +++ b/frontend/src/components/Analyses/AnalysesResults.js @@ -0,0 +1,477 @@ +import '../Individuals/Individuals.css' +import '../../App.css' +import TableResultsAnalyses from '../Results/AnalysesResults/TableResultsAnalyses' +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' + +function AnalysesResults (props) { + const [showLayout, setShowLayout] = useState(false) + + const [beaconsList, setBeaconsList] = useState([]) + + const [error, setError] = useState(false) + + const [numberResults, setNumberResults] = useState(0) + const [boolean, setBoolean] = useState(false) + const [results, setResults] = useState([]) + const [show1, setShow1] = useState(false) + 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(false) + + const [messageLoginFullResp, setMessageLoginFullResp] = useState('') + + const [limit, setLimit] = useState(0) + const [skip, setSkip] = useState(0) + + const [skipTrigger, setSkipTrigger] = useState(0) + const [limitTrigger, setLimitTrigger] = useState(0) + + const [queryArray, setQueryArray] = useState([]) + const [arrayFilter, setArrayFilter] = useState([]) + + const { getStoredToken, authenticateUser } = useContext(AuthContext) + let queryStringTerm = '' + + let res = '' + + const auth = useAuth() + let isAuthenticated = auth.userData?.id_token ? true : false + + useEffect(() => { + const apiCall = async () => { + if (isAuthenticated === false) { + authenticateUser() + const token = getStoredToken() + + if (token !== 'undefined' && token !== null) { + isAuthenticated = true + } + } + + if (props.query !== null) { + if (props.query.includes(',')) { + queryStringTerm = props.query.split(',') + queryStringTerm.forEach((element, index) => { + element = element.trim() + if ( + element.includes('=') || + element.includes('>') || + element.includes('<') || + element.includes('!') || + element.includes('%') + ) { + if (element.includes('=')) { + queryArray[index] = element.split('=') + queryArray[index].push('=') + } else if (element.includes('>')) { + queryArray[index] = element.split('>') + queryArray[index].push('>') + } else if (element.includes('<')) { + queryArray[index] = element.split('<') + queryArray[index].push('<') + } else if (element.includes('!')) { + queryArray[index] = element.split('!') + queryArray[index].push('!') + } else { + queryArray[index] = element.split('%') + queryArray[index].push('%') + } + const alphaNumFilter = { + id: queryArray[index][0], + operator: queryArray[index][2], + value: queryArray[index][1] + } + arrayFilter.push(alphaNumFilter) + } else { + const filter2 = { + id: element, + includeDescendantTerms: props.descendantTerm + } + arrayFilter.push(filter2) + } + }) + } else { + if ( + props.query.includes('=') || + props.query.includes('>') || + props.query.includes('<') || + props.query.includes('!') || + props.query.includes('%') + ) { + if (props.query.includes('=')) { + queryArray[0] = props.query.split('=') + queryArray[0].push('=') + } else if (props.query.includes('>')) { + queryArray[0] = props.query.split('>') + queryArray[0].push('>') + } else if (props.query.includes('<')) { + queryArray[0] = props.query.split('<') + queryArray[0].push('<') + } else if (props.query.includes('!')) { + queryArray[0] = props.query.split('!') + queryArray[0].push('!') + } else { + queryArray[0] = props.query.split('%') + queryArray[0].push('%') + } + + const alphaNumFilter = { + id: queryArray[0][0], + operator: queryArray[0][2], + value: queryArray[0][1] + } + arrayFilter.push(alphaNumFilter) + } else { + const filter = { + id: props.query + } + arrayFilter.push(filter) + } + } + } + + try { + let res = await axios.get(configData.API_URL + '/info') + + res.data.responses.forEach(element => { + beaconsList.push(element) + }) + + beaconsList.reverse() + + if (props.query === null) { + // show all individuals + + var jsonData1 = { + meta: { + apiVersion: '2.0' + }, + query: { + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: 0, + limit: 0 + }, + testMode: false, + requestedGranularity: 'record' + } + } + jsonData1 = JSON.stringify(jsonData1) + + let token = null + if (auth.userData === null) { + token = getStoredToken() + } else { + token = auth.userData.access_token + } + + if (token === null) { + res = await axios.post( + configData.API_URL + '/analyses', + jsonData1 + ) + } else { + const headers = { Authorization: `Bearer ${token}` } + + res = await axios.post( + configData.API_URL + '/analyses', + jsonData1, + { headers: headers } + ) + } + setTimeOut(true) + + 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 (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 = [ + res.data.response.resultSets[index].beaconId, + res.data.response.resultSets[index].results[index2] + ] + results.push(arrayResult) + } + ) + } + }) + } + } else { + var jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + jsonData2 = JSON.stringify(jsonData2) + let token = null + if (auth.userData === null) { + token = getStoredToken() + } else { + token = auth.userData.access_token + } + + if (token === null) { + console.log('Querying without token') + res = await axios.post( + configData.API_URL + '/analyses', + jsonData2 + ) + } else { + console.log('Querying WITH token') + const headers = { Authorization: `Bearer ${token}` } + + res = await axios.post( + configData.API_URL + '/analyses', + jsonData2, + { headers: headers } + ) + } + setTimeOut(true) + + 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) => { + 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 = [ + res.data.response.resultSets[index].beaconId, + res.data.response.resultSets[index].results[index2] + ] + results.push(arrayResult) + } + ) + } + }) + } + } + } catch (error) { + setError('No results. Please check the query and the connection and retry') + setTimeOut(true) + console.log(error) + } + } + apiCall() + }, []) + + const handleTypeResults1 = () => { + setShow1(true) + setShow2(false) + setShow3(false) + } + + const handleTypeResults2 = () => { + setShow2(true) + setShow1(false) + setShow3(false) + } + + const handleTypeResults3 = () => { + setShow3(true) + setShow1(false) + setShow2(false) + } + const onSubmit = () => { + setSkipTrigger(skip) + setLimitTrigger(limit) + setTimeOut(false) + } + return ( +
+ {timeOut === false && ( +
+
+
+
+
+
+
+
+
+ )} + +
+
+ {' '} + {timeOut && error !== 'Connection error. Please retry' && ( +
+
+

Granularity:

+ + + +
+
+ )} + {timeOut && error === 'Connection error. Please retry' && ( +

  {error}

+ )} + {show3 && logInRequired === false && !error && ( +
+ +
+ )} + + {show3 && error &&

  {error}

} + {show2 && !error && ( +
+ +
+ )} + {show1 && !error && ( +
+ +
+ )} + {show2 && error &&

  {error}

} + {show1 && error &&

  {error}

} +
+
+
+ ) +} + +export default AnalysesResults diff --git a/frontend/src/components/Biosamples/BiosamplesResults.js b/frontend/src/components/Biosamples/BiosamplesResults.js index c9272ea..3ca7df6 100644 --- a/frontend/src/components/Biosamples/BiosamplesResults.js +++ b/frontend/src/components/Biosamples/BiosamplesResults.js @@ -8,7 +8,6 @@ import { useAuth } from 'oidc-react' import configData from '../../config.json' import { useContext } from 'react' - function BiosamplesResults (props) { const [showLayout, setShowLayout] = useState(false) @@ -29,7 +28,7 @@ function BiosamplesResults (props) { const [timeOut, setTimeOut] = useState(false) const [logInRequired, setLoginRequired] = useState(false) - + const [messageLoginFullResp, setMessageLoginFullResp] = useState('') const [limit, setLimit] = useState(0) @@ -203,7 +202,6 @@ function BiosamplesResults (props) { setBoolean(false) } else { res.data.response.resultSets.forEach((element, index) => { - if (element.id && element.id !== '') { if (resultsPerDataset.length > 0) { console.log(resultsPerDataset) @@ -213,7 +211,6 @@ function BiosamplesResults (props) { element2[2].push(element.exists) element2[3].push(element.resultsCount) } else { - let arrayResultsPerDataset = [ element.beaconId, [element.id], @@ -447,7 +444,7 @@ function BiosamplesResults (props) { )} {show3 && logInRequired === true &&

{messageLoginFullResp}

} {show3 && error &&

  {error}

} - {show2 && ( + {show2 && !error && (
)} - {show1 && ( + {show1 && !error && (
)} + {show2 && error &&

  {error}

} + {show1 && error &&

  {error}

} ) } -export default BiosamplesResults \ No newline at end of file +export default BiosamplesResults diff --git a/frontend/src/components/Cohorts/Cohorts.css b/frontend/src/components/Cohorts/Cohorts.css index 75fde08..6199fdf 100644 --- a/frontend/src/components/Cohorts/Cohorts.css +++ b/frontend/src/components/Cohorts/Cohorts.css @@ -107,107 +107,6 @@ 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; diff --git a/frontend/src/components/Cohorts/Cohorts.js b/frontend/src/components/Cohorts/Cohorts.js index 794bfc9..785bfb9 100644 --- a/frontend/src/components/Cohorts/Cohorts.js +++ b/frontend/src/components/Cohorts/Cohorts.js @@ -802,7 +802,7 @@ function Cohorts (props) { )} {trigger && noCollectionEvents && showGraphs && ( - NO GRAPHICS AVAILABLE FOR THE SELECTED COHORTS + NO GRAPHICS AVAILABLE FOR THE SELECTED COHORT )} {showGraphs === true && dataAvailable === false && timeOut === true && (
diff --git a/frontend/src/components/CrossQueries/CrossQueries.css b/frontend/src/components/CrossQueries/CrossQueries.css index d2c567a..a9c08bf 100644 --- a/frontend/src/components/CrossQueries/CrossQueries.css +++ b/frontend/src/components/CrossQueries/CrossQueries.css @@ -25,7 +25,7 @@ select { border: 2px solid #f3f4ff; font-size: medium; border-radius: 5px; - width: 150px; + width: 200px; margin-left: 10px; height: 22px; box-shadow: 1px 2px 2px #cecece; @@ -33,7 +33,12 @@ select { .divCrossQueries { display: flex; + flex-wrap: wrap; + align-content: center; justify-content: center; + align-items: center; + width: 100vw; + flex-direction: column; } .crossQueriesForm label { @@ -62,17 +67,17 @@ select { h5 { color: rgb(209, 66, 66); font-weight: bold; - width: 150%; + width: fit-content; + /* width: 150%; */ display: flex; /* align-items: center; */ - justify-content: flex-start; + justify-content: center; font-size: 14px; } h5:hover { color: rgb(118, 151, 228); font-weight: bold; - } .preCrossQueries { @@ -91,7 +96,7 @@ h5:hover { font-size: 11px; width: 104px; } - .crossQueriesForm{ + .crossQueriesForm { display: flex; flex-direction: column; /* justify-content: center; */ @@ -101,4 +106,16 @@ h5:hover { align-content: center; align-items: flex-start; } + +.inputId { + background: white; + border: 2px solid #f3f4ff; + font-size: 12px; + border-radius: 5px; + width: 200px; + margin-left: 10px; + height: 22px; + box-shadow: 1px 2px 2px #cecece; +} + } diff --git a/frontend/src/components/Datasets/ResultsDatasets.css b/frontend/src/components/Datasets/ResultsDatasets.css index e368bcd..ecee78b 100644 --- a/frontend/src/components/Datasets/ResultsDatasets.css +++ b/frontend/src/components/Datasets/ResultsDatasets.css @@ -116,9 +116,10 @@ .linksBeacons { display: flex; - margin-top: -3px; + margin-top: 6px; margin-bottom: -3px; } + .tittle { width: 38vw; background: #c8d4e6; diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js index 1c9a08a..22cbf3f 100644 --- a/frontend/src/components/GenomicVariations/VariantsResults.js +++ b/frontend/src/components/GenomicVariations/VariantsResults.js @@ -387,76 +387,120 @@ function VariantsResults (props) { // referenceName={referenceName} start={start} end={end} variantType={variantType} alternateBases={alternateBases} referenceBases={referenceBases} aminoacid={aminoacid} geneID={geneID} /> //
- var requestParameters = {} - + var requestParametersSequence = {} + var requestParametersRange = {} + var requestParametersGene = {} if (props.referenceName !== '') { - requestParameters['referenceName'] = props.referenceName + requestParametersSequence['referenceName'] = props.referenceName } if (props.referenceName2 !== '') { - requestParameters['referenceName'] = props.referenceName2 + requestParametersRange['referenceName'] = props.referenceName2 } if (props.start !== '') { - requestParameters['start'] = props.start + requestParametersSequence['start'] = props.start } if (props.start2 !== '') { - requestParameters['start'] = props.start2 + requestParametersRange['start'] = props.start2 } if (props.end !== '') { - requestParameters['end'] = props.end + requestParametersRange['end'] = props.end } if (props.variantType !== '') { - requestParameters['variantType'] = props.variantType + requestParametersRange['variantType'] = props.variantType } if (props.variantType2 !== '') { - requestParameters['variantType'] = props.variantType2 + requestParametersGene['variantType'] = props.variantType2 } if (props.alternateBases !== '') { - requestParameters['alternateBases'] = props.alternateBases + requestParametersSequence['alternateBases'] = props.alternateBases } if (props.alternateBases2 !== '') { - requestParameters['alternateBases'] = props.alternateBases2 + requestParametersRange['alternateBases'] = props.alternateBases2 } if (props.referenceBases !== '') { - requestParameters['referenceBases'] = props.referenceBases + requestParametersSequence['referenceBases'] = props.referenceBases } if (props.referenceBases2 !== '') { - requestParameters['referenceBases'] = props.referenceBases2 + requestParametersRange['referenceBases'] = props.referenceBases2 } if (props.aminoacid !== '') { - requestParameters['aminoacidChange'] = props.aminoacid + requestParametersSequence['aminoacidChange'] = props.aminoacid } if (props.aminoacid2 !== '') { - requestParameters['aminoacidChange'] = props.aminoacid2 + requestParametersRange['aminoacidChange'] = props.aminoacid2 } if (props.geneID !== '') { - requestParameters['geneId'] = props.geneID + requestParametersGene['geneId'] = props.geneID } if (props.assemblyId !== '') { - requestParameters['assemblyId'] = props.assemblyId + requestParametersSequence['assemblyId'] = props.assemblyId } if (props.assemblyId2 !== '') { - requestParameters['assemblyId'] = props.assemblyId2 + requestParametersRange['assemblyId'] = props.assemblyId2 } if (props.assemblyId3 !== '') { - requestParameters['assemblyId'] = props.assemblyId3 + requestParametersGene['assemblyId'] = props.assemblyId3 } - var jsonData1 = { - meta: { - apiVersion: '2.0' - }, - query: { - requestParameters: requestParameters, - filters: [], - includeResultsetResponses: `${props.resultSets}`, - pagination: { - skip: skip, - limit: limit + var jsonData1 = {} + + if (props.sequenceSubmitted) { + jsonData1 = { + meta: { + apiVersion: '2.0' }, - testMode: false, - requestedGranularity: 'record' + query: { + requestParameters: requestParametersSequence, + filters: [], + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } } } + + if (props.rangeSubmitted) { + jsonData1 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: requestParametersRange, + filters: [], + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + } + + if (props.geneSubmitted) { + jsonData1 = { + meta: { + apiVersion: '2.0' + }, + query: { + requestParameters: requestParametersGene, + filters: [], + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + } + jsonData1 = JSON.stringify(jsonData1) let token = null @@ -591,9 +635,6 @@ function VariantsResults (props) { - {timeOut && error === 'Connection error. Please retry' && ( -

  {error}

- )} {show3 && logInRequired === false && !error && (
)} - {show3 && logInRequired === true && ( -

{messageLoginFullResp}

- )} + {show3 && error &&

  {error}

} - {show2 && ( + {show2 && logInRequired === false && !error && (
)} - {show1 && ( + {show1 && logInRequired === false && !error &&(
{ - if (element.id && element.id !== '') { if (resultsPerDataset.length > 0) { console.log(resultsPerDataset) @@ -212,7 +211,6 @@ function IndividualsResults (props) { element2[2].push(element.exists) element2[3].push(element.resultsCount) } else { - let arrayResultsPerDataset = [ element.beaconId, [element.id], @@ -284,12 +282,14 @@ function IndividualsResults (props) { } else { console.log('Querying WITH token') const headers = { Authorization: `Bearer ${token}` } - + console.log(headers) res = await axios.post( configData.API_URL + '/individuals', jsonData2, { headers: headers } ) + console.log(res) + console.log(jsonData2) } setTimeOut(true) @@ -468,6 +468,8 @@ function IndividualsResults (props) { >
)} + {show2 && error &&

  {error}

} + {show1 && error &&

  {error}

}
diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js index f2928e8..46adcf8 100644 --- a/frontend/src/components/Layout/Layout.js +++ b/frontend/src/components/Layout/Layout.js @@ -22,6 +22,9 @@ import axios from 'axios' import ReactModal from 'react-modal' import IndividualsResults from '../Individuals/IndividualsResults' +import AnalysesResults from '../Analyses/AnalysesResults' +import RunsResults from '../Runs/RunsResults' + import CohortsModule from '../Cohorts/CohortsModule' function Layout (props) { @@ -99,6 +102,10 @@ function Layout (props) { const [assemblyId2, setAssemblyId2] = useState('') const [assemblyId3, setAssemblyId3] = useState('') + const [sequenceSubmitted, setSequenceSub] = useState(false) + const [rangeSubmitted, setRangeSub] = useState(false) + const [geneSubmitted, setGeneSub] = useState(false) + const [hideForm, setHideForm] = useState(false) const [state, setstate] = useState({ @@ -286,7 +293,7 @@ function Layout (props) { ['sampleOriginType:blood'] ]) } else if (props.collection === 'Runs') { - setExampleQ([['']]) + setExampleQ([['OBI:0002048']]) } else if (props.collection === 'Analyses') { setExampleQ([['']]) } @@ -487,6 +494,7 @@ function Layout (props) { } const handleSubmit = async e => { + setShowVariants(true) e.preventDefault() setPlaceholder('filtering term comma-separated, ID><=value') setIsSub(!isSubmitted) @@ -529,6 +537,16 @@ function Layout (props) { isOpen={popUp} onRequestClose={handleCloseModal3} shouldCloseOnOverlayClick={true} + style={{ + overlay: { + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, + zIndex: 3, + backgroundColor: 'rgba(255, 255, 255, 0.75)' + }}} > + {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 && ( +
+
+
+ {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} +

+
+
+ 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 === 'full' && result[2] === true && ( +
+
+
+ {result[0].meta.beaconId} +

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

+
+
+ +
+
+
+ )} + + ) + })} + + {showDatsets === false && showResults === true && trigger2 === true && ( + 'auto'} + checkboxSelection + columns={columns} + rows={editable} + slots={{ toolbar: CustomToolbar }} + slotProps={{ + toolbar: { + printOptions: { getRowsToExport: getSelectedRowsToExport } + } + }} + /> + )} + + ) +} + +export default TableResultsAnalyses diff --git a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css index 558e3af..e5ddd23 100644 --- a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css +++ b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css @@ -12,6 +12,11 @@ overflow-inline: scroll; } +.MuiDataGrid-cell--withRenderer a { + text-decoration: underline; + color: #5c5cb5; +} + .resultSetsButton { display: flex; align-items: center; @@ -182,7 +187,6 @@ h1 { height: 100vh; } - .containerResultsVariants { display: flex; align-content: center; @@ -208,9 +212,11 @@ h1 { .containerResultsVariants { display: flex; - align-content: center; + /* align-content: center; */ align-items: center; justify-content: center; + width: 100vw; + flex-direction: column; } .containerBeaconResultsVariants { @@ -259,7 +265,7 @@ h1 { display: flex; align-items: center; justify-content: center; - margin-top: 34px; + margin-top: 27px; font-size: 12px; border-radius: 2px; padding: 3px; diff --git a/frontend/src/components/Results/RunsResults/TableResultsRuns.js b/frontend/src/components/Results/RunsResults/TableResultsRuns.js new file mode 100644 index 0000000..a68d9e2 --- /dev/null +++ b/frontend/src/components/Results/RunsResults/TableResultsRuns.js @@ -0,0 +1,535 @@ +import '../IndividualsResults/TableResultsIndividuals.css' +import '../../Datasets/ResultsDatasets.css' +import * as React from 'react' +import { + DataGrid, + GridToolbar, + selectedGridRowsSelector, + gridFilteredSortedRowIdsSelector, + GridToolbarContainer, + GridToolbarExport +} from '@mui/x-data-grid' +import { useState, useEffect } from 'react' +import { Link } from 'react-router-dom' + +function CustomToolbar () { + return ( + + + + ) +} +function TableResultsRuns (props) { + const [showDatsets, setShowDatasets] = useState(false) + + const [showResults, setShowResults] = useState(false) + + const [arrayBeaconsIds, setArrayBeaconsIds] = useState([]) + const [rows, setRows] = useState([]) + const [ids, setIds] = useState([]) + + const [beaconsArrayResults, setBeaconsArrayResults] = useState([]) + + const [beaconsArrayResultsOrdered, setBeaconsArrayResultsOrdered] = useState( + [] + ) + + const [resultsSelected, setResultsSelected] = useState(props.results) + const [resultsSelectedFinal, setResultsSelectedFinal] = useState([]) + + const [openDatasetArray, setOpenDataset] = useState([]) + + const [editable, setEditable] = useState([]) + + const [trigger, setTrigger] = useState(false) + const [trigger2, setTrigger2] = useState(false) + + const [triggerArray, setTriggerArray] = useState([]) + + const getSelectedRowsToExport = ({ apiRef }) => { + const selectedRowIds = selectedGridRowsSelector(apiRef) + if (selectedRowIds.size > 0) { + return Array.from(selectedRowIds.keys()) + } + + return gridFilteredSortedRowIdsSelector(apiRef) + } + + const handleClickDatasets = e => { + console.log(e) + + openDatasetArray[e] = true + console.log(openDatasetArray) + triggerArray[e] = true + console.log(triggerArray) + setTrigger(!trigger) + } + + let columns = [ + { + field: 'id', + headerName: 'Row', + width: 100, + headerClassName: 'super-app-theme--header' + }, + { + field: 'runId', + headerName: 'Run ID', + width: 150, + headerClassName: 'super-app-theme--header', + renderCell: params => ( + {params.row.runId} + ) + }, + { + field: 'Beacon', + headerName: 'Beacon ID', + width: 340, + headerClassName: 'super-app-theme--header' + }, + { + field: 'biosampleId', + headerName: 'Biosample ID', + width: 150, + headerClassName: 'super-app-theme--header' + }, + { + field: 'individualId', + headerName: 'Individual ID', + width: 150, + headerClassName: 'super-app-theme--header' + }, + { + field: 'runDate', + headerName: 'Run date', + width: 240, + headerClassName: 'super-app-theme--header' + }, + { + field: 'librarySource', + headerName: 'Library source', + width: 250, + headerClassName: 'super-app-theme--header' + }, + { + field: 'librarySelection', + headerName: 'Library selection', + width: 350, + headerClassName: 'super-app-theme--header' + }, + { + field: 'libraryStrategy', + headerName: 'Library strategy', + width: 350, + headerClassName: 'super-app-theme--header', + cellClass: 'pre' + }, + { + field: 'libraryLayout', + headerName: 'Library layout', + width: 200, + headerClassName: 'super-app-theme--header' + }, + { + field: 'platform', + headerName: 'Platform', + width: 200, + headerClassName: 'super-app-theme--header' + }, + { + field: 'platformModel', + headerName: 'Platform model', + width: 200, + headerClassName: 'super-app-theme--header' + } + ] + const handleSeeResults = e => { + resultsSelected.forEach(element => { + if (element[0] === e) { + resultsSelectedFinal.push(element) + } + }) + setShowResults(true) + setShowDatasets(false) + setTrigger(true) + } + + function getOccurrence (array, value) { + var count = 0 + array.forEach(v => v === value && count++) + return count + } + + useEffect(() => { + setRows([]) + setIds([]) + + resultsSelected.forEach((element, index) => { + arrayBeaconsIds.push(element[0]) + }) + resultsSelectedFinal.forEach((element, index) => { + if (element[1] !== undefined) { + console.log(element[0]) + + let runDateJson = [] + if (element[1].runDate !== '' && element[1].runDate !== undefined) { + if (typeof element[1].runDate === 'string') { + runDateJson = element[1].runDate + } else { + runDateJson = element[1].runDate.toString() + } + } + + let librarySource_id = '' + let librarySource_label = '' + let stringLibrarySource = '' + + if (element[1].librarySource !== '') { + librarySource_id = element[1].librarySource.id + librarySource_label = element[1].librarySource.label + stringLibrarySource = `${element[1].librarySource.label} / ${element[1].librarySource.id}` + } else { + stringLibrarySource = '' + } + + let librarySelectionJson = [] + if ( + element[1].librarySelection !== '' && + element[1].librarySelection !== undefined + ) { + if (typeof element[1].librarySelection === 'string') { + librarySelectionJson = element[1].librarySelection + } + } + let libraryStrategyJson = [] + if ( + element[1].libraryStrategy !== '' && + element[1].libraryStrategy !== undefined + ) { + if (typeof element[1].libraryStrategy === 'string') { + libraryStrategyJson = element[1].libraryStrategy + } + } + + let libraryLayoutJson = [] + + if ( + element[1].libraryLayout !== '' && + element[1].libraryLayout !== undefined + ) { + if (typeof element[1].libraryLayout === 'string') { + libraryLayoutJson = element[1].libraryLayout + } + } + + let platformJson = [] + + if (element[1].platform !== '' && element[1].platform !== undefined) { + if (typeof element[1].platform === 'string') { + platformJson = element[1].platform + } + } + + let platformModel_id = '' + let platformModel_label = '' + let stringPlatformModel = '' + + if (element[1].platformModel !== '') { + platformModel_id = element[1].platformModel.id + platformModel_label = element[1].platformModel.label + stringPlatformModel = `${element[1].platformModel.label} / ${element[1].platformModel.id}` + } else { + stringPlatformModel = '' + } + var myObjRows = new Object() + myObjRows.id = index + if (element[1].id !== '') { + myObjRows.runId = element[1].id + } + myObjRows.Beacon = element[0] + if (element[1].biosampleId !== '') { + myObjRows.biosampleId = element[1].biosampleId + } + if (element[1].individualId !== '') { + myObjRows.individualId = element[1].individualId + } + + if (runDateJson !== '') { + myObjRows.runDate = runDateJson + } + if (stringLibrarySource !== '') { + myObjRows.librarySource = stringLibrarySource + } + if (librarySelectionJson !== '') { + myObjRows.librarySelection = librarySelectionJson + } + if (libraryStrategyJson !== '') { + myObjRows.libraryStrategy = libraryStrategyJson + } + if (libraryLayoutJson !== '') { + myObjRows.libraryLayout = libraryLayoutJson + } + if (platformJson !== '') { + myObjRows.platform = platformJson + } + if (stringPlatformModel !== '') { + myObjRows.platformModel= stringPlatformModel + } + + rows.push(myObjRows) + console.log(rows) + + if (index === resultsSelectedFinal.length - 1) { + setEditable(rows.map(o => ({ ...o }))) + + setTrigger2(true) + } + } + }) + }, [trigger, resultsSelectedFinal]) + + useEffect(() => { + console.log(props.resultsPerDataset) + console.log(props.beaconsList) + console.log(arrayBeaconsIds) + let count = 0 + props.beaconsList.forEach((element2, index2) => { + count = getOccurrence(arrayBeaconsIds, element2.meta.beaconId) + if (count > 0) { + beaconsArrayResults.push([element2, count, true]) + } else { + beaconsArrayResults.push([element2, count, false]) + } + }) + beaconsArrayResults.forEach(element => { + if (element[2] === true) { + beaconsArrayResultsOrdered.push(element) + } + }) + beaconsArrayResults.forEach(element => { + if (element[2] === false) { + beaconsArrayResultsOrdered.push(element) + } + }) + + setShowDatasets(true) + console.log(props.resultsNotPerDataset) + console.log(props.resultsPerDataset) + }, []) + + return ( +
+ {showDatsets === true && + beaconsArrayResultsOrdered.length > 0 && + beaconsArrayResultsOrdered.map(result => { + return ( + <> + {props.show !== 'full' && ( + <> + {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 && ( +
+
+
+ {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} +

+
+
+ 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 === 'full' && result[2] === true && ( +
+
+
+ {result[0].meta.beaconId} +

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

+
+
+ +
+
+
+ )} + + ) + })} + + {showDatsets === false && showResults === true && trigger2 === true && ( + 'auto'} + checkboxSelection + columns={columns} + rows={editable} + slots={{ toolbar: CustomToolbar }} + slotProps={{ + toolbar: { + printOptions: { getRowsToExport: getSelectedRowsToExport } + } + }} + /> + )} +
+ ) +} + +export default TableResultsRuns diff --git a/frontend/src/components/Runs/RunsResults.js b/frontend/src/components/Runs/RunsResults.js new file mode 100644 index 0000000..ef33f15 --- /dev/null +++ b/frontend/src/components/Runs/RunsResults.js @@ -0,0 +1,477 @@ +import '../Individuals/Individuals.css' +import '../../App.css' +import TableResultsRuns from '../Results/RunsResults/TableResultsRuns' +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' + +function RunsResults (props) { + const [showLayout, setShowLayout] = useState(false) + + const [beaconsList, setBeaconsList] = useState([]) + + const [error, setError] = useState(false) + + const [numberResults, setNumberResults] = useState(0) + const [boolean, setBoolean] = useState(false) + const [results, setResults] = useState([]) + const [show1, setShow1] = useState(false) + 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(false) + + const [messageLoginFullResp, setMessageLoginFullResp] = useState('') + + const [limit, setLimit] = useState(0) + const [skip, setSkip] = useState(0) + + const [skipTrigger, setSkipTrigger] = useState(0) + const [limitTrigger, setLimitTrigger] = useState(0) + + const [queryArray, setQueryArray] = useState([]) + const [arrayFilter, setArrayFilter] = useState([]) + + const { getStoredToken, authenticateUser } = useContext(AuthContext) + let queryStringTerm = '' + + let res = '' + + const auth = useAuth() + let isAuthenticated = auth.userData?.id_token ? true : false + + useEffect(() => { + const apiCall = async () => { + if (isAuthenticated === false) { + authenticateUser() + const token = getStoredToken() + + if (token !== 'undefined' && token !== null) { + isAuthenticated = true + } + } + + if (props.query !== null) { + if (props.query.includes(',')) { + queryStringTerm = props.query.split(',') + queryStringTerm.forEach((element, index) => { + element = element.trim() + if ( + element.includes('=') || + element.includes('>') || + element.includes('<') || + element.includes('!') || + element.includes('%') + ) { + if (element.includes('=')) { + queryArray[index] = element.split('=') + queryArray[index].push('=') + } else if (element.includes('>')) { + queryArray[index] = element.split('>') + queryArray[index].push('>') + } else if (element.includes('<')) { + queryArray[index] = element.split('<') + queryArray[index].push('<') + } else if (element.includes('!')) { + queryArray[index] = element.split('!') + queryArray[index].push('!') + } else { + queryArray[index] = element.split('%') + queryArray[index].push('%') + } + const alphaNumFilter = { + id: queryArray[index][0], + operator: queryArray[index][2], + value: queryArray[index][1] + } + arrayFilter.push(alphaNumFilter) + } else { + const filter2 = { + id: element, + includeDescendantTerms: props.descendantTerm + } + arrayFilter.push(filter2) + } + }) + } else { + if ( + props.query.includes('=') || + props.query.includes('>') || + props.query.includes('<') || + props.query.includes('!') || + props.query.includes('%') + ) { + if (props.query.includes('=')) { + queryArray[0] = props.query.split('=') + queryArray[0].push('=') + } else if (props.query.includes('>')) { + queryArray[0] = props.query.split('>') + queryArray[0].push('>') + } else if (props.query.includes('<')) { + queryArray[0] = props.query.split('<') + queryArray[0].push('<') + } else if (props.query.includes('!')) { + queryArray[0] = props.query.split('!') + queryArray[0].push('!') + } else { + queryArray[0] = props.query.split('%') + queryArray[0].push('%') + } + + const alphaNumFilter = { + id: queryArray[0][0], + operator: queryArray[0][2], + value: queryArray[0][1] + } + arrayFilter.push(alphaNumFilter) + } else { + const filter = { + id: props.query + } + arrayFilter.push(filter) + } + } + } + + try { + let res = await axios.get(configData.API_URL + '/info') + + res.data.responses.forEach(element => { + beaconsList.push(element) + }) + + beaconsList.reverse() + + if (props.query === null) { + // show all individuals + + var jsonData1 = { + meta: { + apiVersion: '2.0' + }, + query: { + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: 0, + limit: 0 + }, + testMode: false, + requestedGranularity: 'record' + } + } + jsonData1 = JSON.stringify(jsonData1) + + let token = null + if (auth.userData === null) { + token = getStoredToken() + } else { + token = auth.userData.access_token + } + + if (token === null) { + res = await axios.post( + configData.API_URL + '/runs', + jsonData1 + ) + } else { + const headers = { Authorization: `Bearer ${token}` } + + res = await axios.post( + configData.API_URL + '/runs', + jsonData1, + { headers: headers } + ) + } + setTimeOut(true) + + 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 (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 = [ + res.data.response.resultSets[index].beaconId, + res.data.response.resultSets[index].results[index2] + ] + results.push(arrayResult) + } + ) + } + }) + } + } else { + var jsonData2 = { + meta: { + apiVersion: '2.0' + }, + query: { + filters: arrayFilter, + includeResultsetResponses: `${props.resultSets}`, + pagination: { + skip: skip, + limit: limit + }, + testMode: false, + requestedGranularity: 'record' + } + } + jsonData2 = JSON.stringify(jsonData2) + let token = null + if (auth.userData === null) { + token = getStoredToken() + } else { + token = auth.userData.access_token + } + + if (token === null) { + console.log('Querying without token') + res = await axios.post( + configData.API_URL + '/runs', + jsonData2 + ) + } else { + console.log('Querying WITH token') + const headers = { Authorization: `Bearer ${token}` } + + res = await axios.post( + configData.API_URL + '/runs', + jsonData2, + { headers: headers } + ) + } + setTimeOut(true) + + 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) => { + 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 = [ + res.data.response.resultSets[index].beaconId, + res.data.response.resultSets[index].results[index2] + ] + results.push(arrayResult) + } + ) + } + }) + } + } + } catch (error) { + setError('No results. Please check the query and the connection and retry') + setTimeOut(true) + console.log(error) + } + } + apiCall() + }, []) + + const handleTypeResults1 = () => { + setShow1(true) + setShow2(false) + setShow3(false) + } + + const handleTypeResults2 = () => { + setShow2(true) + setShow1(false) + setShow3(false) + } + + const handleTypeResults3 = () => { + setShow3(true) + setShow1(false) + setShow2(false) + } + const onSubmit = () => { + setSkipTrigger(skip) + setLimitTrigger(limit) + setTimeOut(false) + } + return ( +
+ {timeOut === false && ( +
+
+
+
+
+
+
+
+
+ )} + +
+
+ {' '} + {timeOut && error !== 'Connection error. Please retry' && ( +
+
+

Granularity:

+ + + +
+
+ )} + {timeOut && error === 'Connection error. Please retry' && ( +

  {error}

+ )} + {show3 && logInRequired === false && !error && ( +
+ +
+ )} + + {show3 && error &&

  {error}

} + {show2 && !error && ( +
+ +
+ )} + {show1 && !error && ( +
+ +
+ )} + {show2 && error &&

  {error}

} + {show1 && error &&

  {error}

} +
+
+
+ ) +} + +export default RunsResults