diff --git a/frontend/src/App.css b/frontend/src/App.css index 26ca9cf..749534a 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -1796,6 +1796,40 @@ h5 { text-underline-offset: 1px; } + .IdForm{ + font-size: 12px; + } + .selectedOperator { + background: white; + border: 1px solid rgb(143 147 196 / 61%); + /* border: 1px solid rgba(12, 16, 64, 0.606); */ + font-size: 12px; + border-radius: 4px; + width: 33px; + height: 27px; + /* margin-right: 20px; */ + box-shadow: 1px 2px 2px #cecece; + } + .ValueForm{ + font-size: 12px; + } + #operator { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + align-items: center; + /* margin-top: -40px; */ + width: 46px; + } + + .buttonsDiv { + margin-top: 7px; + display: flex; + flex-direction: column; + justify-content: space-around; + height: 151px; + } .crossQueriesTittle { margin-bottom: 12px; font-size: 12px; @@ -2120,15 +2154,6 @@ h5 { } } -@media (max-width: 700px) { - .buttonsDiv { - display: flex; - flex-direction: column; - justify-content: space-around; - margin-top: 5px; - height: 101px; - } -} @media (max-width: 460px) { .containerForm { margin-left: 0px; diff --git a/frontend/src/components/Biosamples/BiosamplesResults.js b/frontend/src/components/Biosamples/BiosamplesResults.js index 0da1b32..efb2472 100644 --- a/frontend/src/components/Biosamples/BiosamplesResults.js +++ b/frontend/src/components/Biosamples/BiosamplesResults.js @@ -316,6 +316,8 @@ function BiosamplesResults (props) { queryArray[index].push('!') } else { queryArray[index] = term.split('%') + + queryArray[index][1] = '%' + queryArray[index][1] + '%' console.log(queryArray[index]) queryArray[index].push('=') } @@ -330,7 +332,7 @@ function BiosamplesResults (props) { if (queryArray[index][0].toLowerCase() === 'individual') { alphanumericFilter = { id: element.id, - scope: ['individual'] + scope: ['individuals'] } } else if ( queryArray[index][0].toLowerCase() === 'genomicvariation' @@ -466,17 +468,18 @@ function BiosamplesResults (props) { datasetList.push(res2.data.response.collections) } - if (updatedArrayFilterVar.length === 0) { + if (updatedArrayFilterVar.length === 0 && props.isNetwork === true) { res.data.responses.forEach(element => { beaconsList.push(element) }) + } else if (updatedArrayFilterVar.length === 0 && props.isNetwork === false){ + beaconsList.push(res.data.response) } let variablePause = false if (props.query === null || props.query === '') { // show all individuals - let jsonData1 = {} if (arrayRequestParameters.length > 0) { @@ -531,7 +534,10 @@ function BiosamplesResults (props) { configData.API_URL + '/biosamples', jsonData1 ) + console.log(jsonData1) + console.log(res) } else { + const headers = { Authorization: `Bearer ${token}` } console.log('querying with token') res = await axios.post( @@ -722,6 +728,7 @@ function BiosamplesResults (props) { } setTriggerSubmit(true) } else { + let jsonData2 = {} variablePause = false @@ -859,14 +866,17 @@ function BiosamplesResults (props) { token = auth.userData.access_token } if (token === null) { + console.log(jsonData2) console.log('Querying without token') res = await axios.post( configData.API_URL + '/biosamples', jsonData2 ) + + console.log(res) } else { console.log('Querying WITH token') - + const headers = { Authorization: `Bearer ${token}` } res = await axios.post( @@ -874,6 +884,8 @@ function BiosamplesResults (props) { jsonData2, { headers: headers } ) + console.log(jsonData2) + console.log(res) } setTimeOut(true) diff --git a/frontend/src/components/Dataset/BeaconInfo.css b/frontend/src/components/Dataset/BeaconInfo.css index c582df9..9e324f7 100644 --- a/frontend/src/components/Dataset/BeaconInfo.css +++ b/frontend/src/components/Dataset/BeaconInfo.css @@ -375,10 +375,23 @@ p a:hover { } h5 { - margin-top: 0px !important; margin-bottom: 0px !important; } +h5 { + color: rgb(209, 66, 66); + font-weight: bold; + width: -moz-fit-content; + width: fit-content; + /* width: 150%; */ + margin-top: 26px; + margin-left: 40vw; + display: flex; + /* align-items: center; */ + justify-content: center; + font-size: 14px; +} + .resultsRecord { display: flex; flex-direction: row; diff --git a/frontend/src/components/Dataset/BeaconInfo.js b/frontend/src/components/Dataset/BeaconInfo.js index 603e873..090221e 100644 --- a/frontend/src/components/Dataset/BeaconInfo.js +++ b/frontend/src/components/Dataset/BeaconInfo.js @@ -147,118 +147,122 @@ function BeaconInfo (props) {
{resp.map(result => { return ( -
-
-
- {result.response.organization.logoUrl !== '' && - result.response.name !== 'NAGENpediatrics Beacon' && ( - {result.meta.beaconId} - )} - {result.response.name === 'NAGENpediatrics Beacon' && ( - {result.meta.beaconId} + {result.response && ( +
+
+
+ {result.response.organization.logoUrl !== '' && + result.response.name !== 'NAGENpediatrics Beacon' && ( + {result.meta.beaconId} + )} + {result.response.name === 'NAGENpediatrics Beacon' && ( + {result.meta.beaconId} + )} +

{result.response.name}

+
+

{result.response.organization.name}

+
+
+ {!result.response.description.includes('{result.response.description}

+ )} + {result.response.description.includes(' )} -

{result.response.name}

+
+ {result.meta.beaconId === + 'org.ega-archive.ga4gh-approval-beacon-test' && ( + + Beacon API + + )} + {result.meta.beaconId === 'es.elixir.bsc.beacon' && ( + + Beacon API + + )} + {result.meta.beaconId === 'org.progenetix' && ( + + Beacon API + + )} + {result.meta.beaconId !== 'es.elixir.bsc.beacon' && + result.meta.beaconId !== 'org.progenetix' && + result.meta.beaconId !== + 'org.ega-archive.ga4gh-approval-beacon-test' && ( + + Beacon API + + )} + {result.meta.beaconId === 'es.elixir.bsc.beacon' && ( + + Visit us + + )} + {result.meta.beaconId !== 'es.elixir.bsc.beacon' && ( + + Visit us + + )} + {result.meta.beaconId !== 'es.elixir.bsc.beacon' && ( + + Contact us + + )} + {result.meta.beaconId === 'es.elixir.bsc.beacon' && ( + + Contact us + + )} +
-

{result.response.organization.name}

-
-
- {!result.response.description.includes('{result.response.description}

- )} - {result.response.description.includes(' )} -
- {result.meta.beaconId === - 'org.ega-archive.ga4gh-approval-beacon-test' && ( - - Beacon API - - )} - {result.meta.beaconId === 'es.elixir.bsc.beacon' && ( - - Beacon API - - )} - {result.meta.beaconId === 'org.progenetix' && ( - - Beacon API - - )} - {result.meta.beaconId !== 'es.elixir.bsc.beacon' && - result.meta.beaconId !== 'org.progenetix' && - result.meta.beaconId !== - 'org.ega-archive.ga4gh-approval-beacon-test' && ( - - Beacon API - - )} - {result.meta.beaconId === 'es.elixir.bsc.beacon' && ( - - Visit us - - )} - {result.meta.beaconId !== 'es.elixir.bsc.beacon' && ( - - Visit us - - )} - {result.meta.beaconId !== 'es.elixir.bsc.beacon' && ( - - Contact us - - )} - {result.meta.beaconId === 'es.elixir.bsc.beacon' && ( - - Contact us - - )} -
-
+ ) })}
diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.css b/frontend/src/components/FilteringTerms/FilteringTerms.css index 6cdaf32..bd1ce35 100644 --- a/frontend/src/components/FilteringTerms/FilteringTerms.css +++ b/frontend/src/components/FilteringTerms/FilteringTerms.css @@ -69,6 +69,7 @@ tbody { flex-direction: column; margin-left: 1vw; align-items: center; + padding-bottom: 120px !important; } .tableWrapper { @@ -395,11 +396,12 @@ tr { #table { display: flex; font-size: 15px; - width: 90%; + width: 99%; height: -moz-fit-content; height: fit-content; flex-direction: column; margin-left: 1vw; align-items: center; + padding-bottom: 120px !important; } } diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.js b/frontend/src/components/FilteringTerms/FilteringTerms.js index 68a0281..ce28474 100644 --- a/frontend/src/components/FilteringTerms/FilteringTerms.js +++ b/frontend/src/components/FilteringTerms/FilteringTerms.js @@ -72,12 +72,12 @@ function FilteringTerms (props) { const [valueChosen, setValueChosen] = useState([]) - const handdleInclude = e => { + const handleInclude = e => { if (ID !== '' && valueFree !== '' && operator !== '') { - if (props.query !== null) { + if (props.query !== null && props.query !== '') { props.setQuery(props.query + ',' + `${ID}${operator}${valueFree}`) } - if (props.query === null) { + if (props.query === null || props.query === '') { props.setQuery(`${ID}${operator}${valueFree}`) } } @@ -593,7 +593,7 @@ function FilteringTerms (props) {
@@ -651,7 +651,7 @@ function FilteringTerms (props) { diff --git a/frontend/src/components/GenomicVariations/VariantsResults.js b/frontend/src/components/GenomicVariations/VariantsResults.js index 397b84c..f9119f2 100644 --- a/frontend/src/components/GenomicVariations/VariantsResults.js +++ b/frontend/src/components/GenomicVariations/VariantsResults.js @@ -316,7 +316,10 @@ function VariantsResults (props) { queryArray[index].push('!') } else { queryArray[index] = term.split('%') - queryArray[index].push('%') + + queryArray[index][1] = '%' + queryArray[index][1] + '%' + console.log(queryArray[index]) + queryArray[index].push('=') } let alphanumericFilter = {} @@ -329,7 +332,7 @@ function VariantsResults (props) { if (queryArray[index][0].toLowerCase() === 'individual') { alphanumericFilter = { id: element.id, - scope: ['individual'] + scope: ['individuals'] } } else if ( queryArray[index][0].toLowerCase() === 'genomicvariation' @@ -465,17 +468,18 @@ function VariantsResults (props) { datasetList.push(res2.data.response.collections) } - if (updatedArrayFilterVar.length === 0) { + if (updatedArrayFilterVar.length === 0 && props.isNetwork === true) { res.data.responses.forEach(element => { beaconsList.push(element) }) + } else if (updatedArrayFilterVar.length === 0 && props.isNetwork === false){ + beaconsList.push(res.data.response) } let variablePause = false if (props.query === null || props.query === '') { // show all individuals - let jsonData1 = {} if (arrayRequestParameters.length > 0) { @@ -530,7 +534,10 @@ function VariantsResults (props) { configData.API_URL + '/g_variants', jsonData1 ) + console.log(jsonData1) + console.log(res) } else { + const headers = { Authorization: `Bearer ${token}` } console.log('querying with token') res = await axios.post( @@ -721,6 +728,7 @@ function VariantsResults (props) { } setTriggerSubmit(true) } else { + let jsonData2 = {} variablePause = false @@ -858,14 +866,17 @@ function VariantsResults (props) { token = auth.userData.access_token } if (token === null) { + console.log(jsonData2) console.log('Querying without token') res = await axios.post( configData.API_URL + '/g_variants', jsonData2 ) + + console.log(res) } else { console.log('Querying WITH token') - + const headers = { Authorization: `Bearer ${token}` } res = await axios.post( @@ -873,6 +884,8 @@ function VariantsResults (props) { jsonData2, { headers: headers } ) + console.log(jsonData2) + console.log(res) } setTimeOut(true) @@ -928,7 +941,6 @@ function VariantsResults (props) { if (element.id === undefined || element.id === '') { let arrayResultsNoDatasets = [element.beaconId] resultsNotPerDataset.push(arrayResultsNoDatasets) - console.log(arrayResultsNoDatasets) } if (res.data.response.resultSets[index].results) { diff --git a/frontend/src/components/Individuals/IndividualsResults.js b/frontend/src/components/Individuals/IndividualsResults.js index c197aa4..1d0b81d 100644 --- a/frontend/src/components/Individuals/IndividualsResults.js +++ b/frontend/src/components/Individuals/IndividualsResults.js @@ -866,13 +866,13 @@ function IndividualsResults (props) { token = auth.userData.access_token } if (token === null) { - + console.log(jsonData2) console.log('Querying without token') res = await axios.post( configData.API_URL + '/individuals', jsonData2 ) - console.log(jsonData2) + console.log(res) } else { console.log('Querying WITH token') diff --git a/frontend/src/components/Layout/Layout.css b/frontend/src/components/Layout/Layout.css index 0b7c77d..c587ffe 100644 --- a/frontend/src/components/Layout/Layout.css +++ b/frontend/src/components/Layout/Layout.css @@ -83,10 +83,10 @@ } .searchButton:hover { - background-color: rgb(180, 196, 210); + background-color: #023452; } .clearButton:hover { - background-color: rgb(180, 196, 210); + background-color: rgb(231 244 255); } p { @@ -112,6 +112,7 @@ p { display: flex; flex-direction: column; min-width: 112px; + position: relative; } .tabs { @@ -142,7 +143,7 @@ p { } .tab-content { - padding: 10px; + padding: 3px; border: 1px solid #3176b1; border-top-right-radius: 5px; border-bottom-right-radius: 5px; @@ -167,6 +168,7 @@ p { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + line-height: 1.4; } .filterTermsContainer { @@ -328,6 +330,10 @@ ul div { border-radius: 4px; } +.label-ontology-div2 { + position: relative; +} + .subTitle { font-weight: 500; } @@ -379,9 +385,6 @@ label { max-width: 181px; width: fit-content; } -.onHover { - display: none; -} h14 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', @@ -394,23 +397,26 @@ h14 { margin-top: 4.2px; } -.label:hover + .onHover { - display: block; - color: #fff; +.onHover { + display: none; + position: absolute; /* Position it absolutely */ + top: 0px; /* Adjust as needed */ + left: 50px; /* Adjust as needed */ z-index: 4; + color: #fff; font-weight: 500; - margin-top: -20px; background: #6e9ef0; - padding-top: 4px; - padding-bottom: 4px; - padding-right: 4px; - padding-left: 4px; - display: flex; + padding: 4px; border-radius: 2px; font-size: 11.5px; align-content: center; justify-content: center; } + +/* Display the hover element when the label is hovered */ +.label:hover + .onHover { + display: flex; +} .deleteIcon ion-icon { color: black; margin-bottom: -11px; @@ -508,6 +514,7 @@ h14 { height: 12px; border-radius: 4px; overflow: auto; + } .ValueForm2 { @@ -613,11 +620,18 @@ h14 { @media (max-width: 950px) { .inputSearch { width: 28vw; - font-size: 14 px; border: 1px solid #3176b1; text-overflow: clip; max-width: 40vw; + height: 139px; + font-size: 14px; + } + .selectModule1 { + font-size: 14px; + } + .selectModule2 { + font-size: 14px; } .buttonText { display: none !important; @@ -780,14 +794,6 @@ h14 { border: 1px solid #3176b1; } - .buttonsDiv { - /* height: 105px; */ - height: 105px; - display: flex; - flex-direction: column; - /* justify-content: space-around; */ - margin-top: 5px; - } .buttonAllFilters h4 { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', diff --git a/frontend/src/components/Layout/Layout.js b/frontend/src/components/Layout/Layout.js index ac19ba9..9c6dcec 100644 --- a/frontend/src/components/Layout/Layout.js +++ b/frontend/src/components/Layout/Layout.js @@ -139,11 +139,12 @@ function Layout (props) { const handleValueChanges = e => { setValueFree(e.target.value) } - const handdleInclude = e => { + const handleInclude = e => { if (ID !== '' && valueFree !== '' && operator !== '') { + if (query !== null && query !== '') { setQuery(query + ',' + `${ID}${operator}${valueFree}`) - } + } if (query === null || query == '') { setQuery(`${ID}${operator}${valueFree}`) } @@ -152,88 +153,100 @@ function Layout (props) { const handleOption = (e, array, optionIndex, tab) => { const updatedInputValues = - tab === 'tab1' ? { ...inputValuesTab1 } : { ...inputValuesTab2 } + tab === 'tab1' ? { ...inputValuesTab1 } : { ...inputValuesTab2 }; const updatedCheckedOptions = - tab === 'tab1' ? { ...checkedOptionsTab1 } : { ...checkedOptionsTab2 } - const filterIndex = e.target.getAttribute('data-filter-index') - const elementLabel = e.target.getAttribute('data-element-label') // Get the element label from the checkbox - const optionId = `option-${filterIndex}-${optionIndex}-${elementLabel}` // Construct the correct key - - updatedCheckedOptions[optionId] = e.target.checked // Update the checked state - + tab === 'tab1' ? { ...checkedOptionsTab1 } : { ...checkedOptionsTab2 }; + const filterIndex = e.target.getAttribute('data-filter-index'); + const elementLabel = e.target.getAttribute('data-element-label'); // Get the element label from the checkbox + const optionId = `option-${filterIndex}-${optionIndex}-${elementLabel}`; // Construct the correct key + + updatedCheckedOptions[optionId] = e.target.checked; // Update the checked state + if (tab === 'tab1') { - setCheckedOptionsTab1(updatedCheckedOptions) + setCheckedOptionsTab1(updatedCheckedOptions); } else { - setCheckedOptionsTab2(updatedCheckedOptions) + setCheckedOptionsTab2(updatedCheckedOptions); } - - let start, end, variantType, referenceBases, alternateBases - const title = [] - const value = [] - + + let start, end, variantType, referenceBases, alternateBases; + const title = []; + const value = []; + array.forEach(element => { - title.push(element.schemaField) + title.push(element.schemaField); const inputValue = updatedInputValues[ `${optionIndex}-${element.label}-${element.schemaField}` - ] - value.push(inputValue || element.value) - + ]; + value.push(inputValue || element.value); + switch (element.schemaField) { case 'start': - start = inputValue || element.value - break + start = inputValue || element.value; + break; case 'end': - end = inputValue || element.value - break + end = inputValue || element.value; + break; case 'variantType': - variantType = inputValue || element.value - break + variantType = inputValue || element.value; + break; case 'referenceBases': - referenceBases = inputValue || element.value - break + referenceBases = inputValue || element.value; + break; case 'alternateBases': - alternateBases = inputValue || element.value - break + alternateBases = inputValue || element.value; + break; default: - break + break; } - }) - + }); + const specialQuery = start && end && variantType && referenceBases && alternateBases ? `${start}-${end}:${variantType}:${referenceBases}>${alternateBases}` - : null - + : null; + const arrayQuery = title .map((titleQuery, indexQuery) => titleQuery === 'geneId' || titleQuery === 'aminoacidChange' ? `${titleQuery}:${value[indexQuery]}` : `${titleQuery}=${value[indexQuery]}` ) - .join('&') - + .join(','); + + const addQuery = specialQuery || arrayQuery; + if (e.target.checked) { setQuery(prevQuery => { - if (!prevQuery) return specialQuery || arrayQuery - return `${prevQuery},${specialQuery || arrayQuery}` - }) + if (!prevQuery) return addQuery; + return `${prevQuery}, ${addQuery}`; + }); } else { setQuery(prevQuery => { - const updatedQuery = prevQuery - .split(',') - .filter(item => item !== (specialQuery || arrayQuery)) - .join(',') - return updatedQuery || '' - }) + const updatedQueries = prevQuery.split(',').filter(query => { + if (specialQuery) { + // Remove only the exact specialQuery + return query !== specialQuery; + } else { + // Remove only the exact arrayQuery components + return !title.some((titleQuery, indexQuery) => { + const valueQuery = `${titleQuery}=${value[indexQuery]}`; + const colonQuery = `${titleQuery}:${value[indexQuery]}`; + return query === valueQuery || query === colonQuery; + }); + } + }); + return updatedQueries.join(','); + }); } - + if (tab === 'tab1') { - setInputValuesTab1(updatedInputValues) + setInputValuesTab1(updatedInputValues); } else { - setInputValuesTab2(updatedInputValues) + setInputValuesTab2(updatedInputValues); } - } + }; + const handleOptionAlphanum = (schemaField, value) => { setShowAlphanum(true) @@ -585,7 +598,7 @@ function Layout (props) { /> - diff --git a/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js b/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js index 33ff105..3544b3e 100644 --- a/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js +++ b/frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js @@ -20,7 +20,7 @@ function TableResultsBiosamples (props) { const [showCrossQuery, setShowCrossQuery] = useState(false) const [parameterCrossQuery, setParamCrossQuery] = useState('') const [expandedRows, setExpandedRows] = useState( - Array.from({ length: props.beaconsList.length }, (_, index) => index) + new Array(props.beaconsList.length).fill(false) ) const [currentPage, setCurrentPage] = useState(1) const [rowsPerPage] = useState(10) // You can make this dynamic if needed @@ -64,6 +64,27 @@ function TableResultsBiosamples (props) { setMenuVisible(prevState => !prevState) } + const getBeaconName = (beaconId, beaconsList) => { + if (beaconId === 'org.progenetix') { + beaconId = 'org.progenetix.beacon' + } + beaconsList.forEach(element => { + console.log(element.id) + }) + + const beacon = beaconsList.find(b => (b.response?.id ?? b.id) === beaconId) + + if (beacon) { + if (beacon.response) { + return beacon.response.name + } else { + return beacon.name + } + } else { + return beaconId // Or any other default value you prefer when no beacon is found + } + } + const [columnVisibility, setColumnVisibility] = useState({ BiosampleId: true, individualId: true, @@ -85,6 +106,7 @@ function TableResultsBiosamples (props) { sampleStorage: true // Add more columns as needed }) + const handleNextPage = () => { setCurrentPage(prevPage => Math.min(prevPage + 1, totalPages)) } @@ -260,6 +282,7 @@ function TableResultsBiosamples (props) { URL.revokeObjectURL(url) document.body.removeChild(link) } + const showNote = e => { setNote(e) setIsOpenModal2(true) @@ -267,9 +290,10 @@ function TableResultsBiosamples (props) { const handleShowCrossQuery = e => { setShowCrossQuery(true) - + setParamCrossQuery(e.target.innerText) } + const toggleRow = index => { setExpandedRows(prevState => { const currentIndex = prevState.indexOf(index) @@ -284,7 +308,6 @@ function TableResultsBiosamples (props) { } useEffect(() => { - if (props.show === 'full') { setResultsSelectedFinal(resultsSelected) setShowResults(true) @@ -811,7 +834,6 @@ function TableResultsBiosamples (props) { // sampleProcessing: sampleProcessingJson, sampleStorage: stringSampleStorage }) - if (index === resultsSelectedFinal.length - 1) { setTrigger2(true) @@ -826,148 +848,163 @@ function TableResultsBiosamples (props) { return (
- {showDatsets === true && + {showDatsets === true && props.beaconsList.map((result, beaconIndex) => { return ( <> {beaconIndex === 0 && ( - - - - - - - - - - {props.results.length > 0 && - props.resultsPerDataset.map((dataset, index2) => { - const totalCount = dataset[3] - ? dataset[3].reduce((acc, count) => acc + count, 0) - : 0 - const allTrue = dataset[2] - ? dataset[2].every(booleanElement => booleanElement) - : 'No, sorry' - - return ( - - toggleRow(index2)} - > - - - - - {expandedRows.includes(index2) && ( - - {props.show === 'boolean' && - dataset[2].map( - (booleanElement, booleanIndex) => ( - - - + + + + ) + )} + + )} + + ) + })} + {props.results.length === 0 && + props.beaconsList.map((beacon, index2) => { + const totalCount = 0 + const hasTrueElement = false + + return ( + + toggleRow(index2)} + > + {beacon.response && ( + + )} + {!beacon.response && ( + + )} + + + + + ) + })} + +
BeaconDatasetResult
- {dataset[0]} - {expandedRows.includes(index2) ? ( - - ) : ( - - )} - - {props.show === 'boolean' - ? allTrue - ? 'YES' - : 'No, sorry' - : totalCount} -
+ + + + + + + + + + {props.results.length > 0 && + props.resultsPerDataset.map((dataset, index2) => { + const totalCount = dataset[3] + ? dataset[3].reduce((acc, count) => acc + count, 0) + : 0 + const hasTrueElement = dataset[2] + ? dataset[2].some(booleanElement => booleanElement) + : false + const beaconName = getBeaconName( + dataset[0], + props.beaconsList + ) + return ( + + toggleRow(index2)} + > + + + + + {expandedRows.includes(index2) && ( + + {props.show === 'boolean' && + dataset[2].map( + (booleanElement, booleanIndex) => ( + - {dataset[1][booleanIndex]} - - + + + + ) + )} + {props.show === 'count' && + dataset[3].map( + (countElement, countIndex) => ( + - {booleanElement ? 'YES' : 'No, sorry'} - - - ) - )} - {props.show === 'count' && - dataset[3].map((countElement, countIndex) => ( - - - - - - ))} - - )} - - ) - })} - {props.results.length === 0 && - props.beaconsList.map((beacon, index2) => { - const totalCount = 0 - const allTrue = 'No, sorry' - - return ( - - toggleRow(index2)} - > - - - - - - ) - })} - -
BeaconDatasetResult
+ {beaconName} + {expandedRows.includes(index2) ? ( + + ) : ( + + )} + + {props.show === 'boolean' + ? hasTrueElement + ? 'YES' + : 'No, sorry' + : totalCount} +
+ {dataset[1][booleanIndex]} + + {booleanElement + ? 'YES' + : 'No, sorry'} +
- {dataset[1][countIndex]} - - {countElement} -
- {beacon.response.name} - - - {props.show === 'boolean' - ? allTrue - ? 'YES' - : 'No, sorry' - : totalCount} -
+ 		+ {dataset[1][countIndex]} + + {countElement} +
+ {beacon.response.name} + + {beacon.name} + + {props.show === 'boolean' + ? hasTrueElement + ? 'YES' + : 'No, sorry' + : totalCount} +
+
)} ) @@ -1505,7 +1542,7 @@ function TableResultsBiosamples (props) { {row.individualId} @@ -1691,7 +1728,7 @@ function TableResultsBiosamples (props) { )} - + {props.show === 'full' && props.results.length === 0 && !showCrossQuery && ( diff --git a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css index de1ef85..58f6b54 100644 --- a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css +++ b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.css @@ -763,9 +763,24 @@ h1 { overflow: scroll; } + .containerTableNoFull { + display: flex; + align-items: center; + justify-content: center; + width: 100vw; + } tr { width: 100%; } + .tbodyGranu tr { + width: 70vw; + } + .tbodyGranu { + width: 70vw; + } + .theadGranularity tr { + width: 70vw; + } } @media (max-width: 800px) { @@ -775,6 +790,15 @@ h1 { .tdGranu { font-size: 12px; } + .tbodyGranu tr { + width: 80vw; + } + .tbodyGranu { + width: 80vw; + } + .theadGranularity tr { + width: 80vw; + } } @media (max-width: 600px) { @@ -788,4 +812,13 @@ h1 { flex-direction: column; align-items: center; } + .tbodyGranu tr { + width: 90vw; + } + .tbodyGranu { + width: 90vw; + } + .theadGranularity tr { + width: 90vw; + } } diff --git a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js index 24fa836..f65f633 100644 --- a/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js +++ b/frontend/src/components/Results/IndividualsResults/TableResultsIndividuals.js @@ -61,16 +61,16 @@ function TableResultsIndividuals (props) { console.log(element.id) }) - const beacon = beaconsList.find(b => (b.response?.id ?? b.id) === beaconId); + const beacon = beaconsList.find(b => (b.response?.id ?? b.id) === beaconId) if (beacon) { - if (beacon.response) { - return beacon.response.name; - } else { - return beacon.name; - } + if (beacon.response) { + return beacon.response.name + } else { + return beacon.name + } } else { - return beaconId; // Or any other default value you prefer when no beacon is found + return beaconId // Or any other default value you prefer when no beacon is found } } @@ -85,6 +85,7 @@ function TableResultsIndividuals (props) { phenotypicFeatures: true // Add more columns as needed }) + const handleNextPage = () => { setCurrentPage(prevPage => Math.min(prevPage + 1, totalPages)) } @@ -261,11 +262,7 @@ function TableResultsIndividuals (props) { document.body.removeChild(link) } - const showNote = e => { - setNote(e) - setIsOpenModal2(true) - } - + const handleShowCrossQuery = e => { setShowCrossQuery(true) @@ -510,7 +507,6 @@ function TableResultsIndividuals (props) { useEffect(() => { setShowDatasets(true) - console.log(props.beaconsList) }, []) return ( @@ -520,145 +516,158 @@ function TableResultsIndividuals (props) { return ( <> {beaconIndex === 0 && ( - - - - - - - - - - {props.results.length > 0 && - props.resultsPerDataset.map((dataset, index2) => { - const totalCount = dataset[3] - ? dataset[3].reduce((acc, count) => acc + count, 0) - : 0 - const hasTrueElement = dataset[2] - ? dataset[2].some(booleanElement => booleanElement) - : false - const beaconName = getBeaconName( - dataset[0], - props.beaconsList - ) - return ( - - toggleRow(index2)} - > - - - - - {expandedRows.includes(index2) && ( - - {props.show === 'boolean' && - dataset[2].map( - (booleanElement, booleanIndex) => ( - - - + + + + ) + )} + + )} + + ) + })} + {props.results.length === 0 && + props.beaconsList.map((beacon, index2) => { + const totalCount = 0 + const hasTrueElement = false + + return ( + + toggleRow(index2)} + > + {beacon.response && ( + + )} + {!beacon.response && ( + + )} + + + + + ) + })} + +
BeaconDatasetResult
- {beaconName} - {expandedRows.includes(index2) ? ( - - ) : ( - - )} - - {props.show === 'boolean' - ? hasTrueElement - ? 'YES' - : 'No, sorry' - : totalCount} -
+ + + + + + + + + + {props.results.length > 0 && + props.resultsPerDataset.map((dataset, index2) => { + const totalCount = dataset[3] + ? dataset[3].reduce((acc, count) => acc + count, 0) + : 0 + const hasTrueElement = dataset[2] + ? dataset[2].some(booleanElement => booleanElement) + : false + const beaconName = getBeaconName( + dataset[0], + props.beaconsList + ) + return ( + + toggleRow(index2)} + > + + + + + {expandedRows.includes(index2) && ( + + {props.show === 'boolean' && + dataset[2].map( + (booleanElement, booleanIndex) => ( + - {dataset[1][booleanIndex]} - - + + + + ) + )} + {props.show === 'count' && + dataset[3].map( + (countElement, countIndex) => ( + - {booleanElement ? 'YES' : 'No, sorry'} - - - ) - )} - {props.show === 'count' && - dataset[3].map((countElement, countIndex) => ( - - - - - - ))} - - )} - - ) - })} - {props.results.length === 0 && - props.beaconsList.map((beacon, index2) => { - const totalCount = 0 - const hasTrueElement = false - - return ( - - toggleRow(index2)} - > - - - - - - ) - })} - -
BeaconDatasetResult
+ {beaconName} + {expandedRows.includes(index2) ? ( + + ) : ( + + )} + + {props.show === 'boolean' + ? hasTrueElement + ? 'YES' + : 'No, sorry' + : totalCount} +
+ {dataset[1][booleanIndex]} + + {booleanElement + ? 'YES' + : 'No, sorry'} +
- {dataset[1][countIndex]} - - {countElement} -
- {beacon.response.name} - - {props.show === 'boolean' - ? hasTrueElement - ? 'YES' - : 'No, sorry' - : totalCount} -
+ 		+ {dataset[1][countIndex]} + + {countElement} +
+ {beacon.response.name} + + {beacon.name} + + {props.show === 'boolean' + ? hasTrueElement + ? 'YES' + : 'No, sorry' + : totalCount} +
+ )} ) @@ -994,11 +1003,13 @@ function TableResultsIndividuals (props) { )} + {props.show === 'full' && props.results.length === 0 && !showCrossQuery && (
No results, sorry.
)} + {showCrossQuery && ( index) + new Array(props.beaconsList.length).fill(false) ) const [currentPage, setCurrentPage] = useState(1) const [rowsPerPage] = useState(10) // You can make this dynamic if needed @@ -55,6 +55,27 @@ function TableResultsVariants (props) { setMenuVisible(prevState => !prevState) } + const getBeaconName = (beaconId, beaconsList) => { + if (beaconId === 'org.progenetix') { + beaconId = 'org.progenetix.beacon' + } + beaconsList.forEach(element => { + console.log(element.id) + }) + + const beacon = beaconsList.find(b => (b.response?.id ?? b.id) === beaconId) + + if (beacon) { + if (beacon.response) { + return beacon.response.name + } else { + return beacon.name + } + } else { + return beaconId // Or any other default value you prefer when no beacon is found + } + } + const [columnVisibility, setColumnVisibility] = useState({ variantInternalId: true, variation: true, @@ -67,6 +88,7 @@ function TableResultsVariants (props) { frequencyInPopulations: true // Add more columns as needed }) + const handleNextPage = () => { setCurrentPage(prevPage => Math.min(prevPage + 1, totalPages)) } @@ -243,10 +265,6 @@ function TableResultsVariants (props) { document.body.removeChild(link) } - const showNote = e => { - setNote(e) - setIsOpenModal2(true) - } const handleShowCrossQuery = e => { setShowCrossQuery(true) @@ -485,142 +503,158 @@ function TableResultsVariants (props) { return ( <> {beaconIndex === 0 && ( - - - - - - - - - - {props.results.length > 0 && - props.resultsPerDataset.map((dataset, index2) => { - const totalCount = dataset[3] - ? dataset[3].reduce((acc, count) => acc + count, 0) - : 0 - const allTrue = dataset[2] - ? dataset[2].every(booleanElement => booleanElement) - : 'No, sorry' - - return ( - - toggleRow(index2)} - > - - - - - {expandedRows.includes(index2) && ( - - {props.show === 'boolean' && - dataset[2].map( - (booleanElement, booleanIndex) => ( - - - + + + + ) + )} + + )} + + ) + })} + {props.results.length === 0 && + props.beaconsList.map((beacon, index2) => { + const totalCount = 0 + const hasTrueElement = false + + return ( + + toggleRow(index2)} + > + {beacon.response && ( + + )} + {!beacon.response && ( + + )} + + + + + ) + })} + +
BeaconDatasetResult
- {dataset[0]} - {expandedRows.includes(index2) ? ( - - ) : ( - - )} - - {props.show === 'boolean' - ? allTrue - ? 'YES' - : 'No, sorry' - : totalCount} -
+ + + + + + + + + + {props.results.length > 0 && + props.resultsPerDataset.map((dataset, index2) => { + const totalCount = dataset[3] + ? dataset[3].reduce((acc, count) => acc + count, 0) + : 0 + const hasTrueElement = dataset[2] + ? dataset[2].some(booleanElement => booleanElement) + : false + const beaconName = getBeaconName( + dataset[0], + props.beaconsList + ) + return ( + + toggleRow(index2)} + > + + + + + {expandedRows.includes(index2) && ( + + {props.show === 'boolean' && + dataset[2].map( + (booleanElement, booleanIndex) => ( + - {dataset[1][booleanIndex]} - - + + + + ) + )} + {props.show === 'count' && + dataset[3].map( + (countElement, countIndex) => ( + - {booleanElement ? 'YES' : 'No, sorry'} - - - ) - )} - {props.show === 'count' && - dataset[3].map((countElement, countIndex) => ( - - - - - - ))} - - )} - - ) - })} - {props.results.length === 0 && - props.beaconsList.map((beacon, index2) => { - const totalCount = 0 - const allTrue = 'No, sorry' - - return ( - - toggleRow(index2)} - > - - - - - - ) - })} - -
BeaconDatasetResult
+ {beaconName} + {expandedRows.includes(index2) ? ( + + ) : ( + + )} + + {props.show === 'boolean' + ? hasTrueElement + ? 'YES' + : 'No, sorry' + : totalCount} +
+ {dataset[1][booleanIndex]} + + {booleanElement + ? 'YES' + : 'No, sorry'} +
- {dataset[1][countIndex]} - - {countElement} -
- {beacon.response.name} - - {props.show === 'boolean' - ? allTrue - ? 'YES' - : 'No, sorry' - : totalCount} -
+ 		+ {dataset[1][countIndex]} + + {countElement} +
+ {beacon.response.name} + + {beacon.name} + + {props.show === 'boolean' + ? hasTrueElement + ? 'YES' + : 'No, sorry' + : totalCount} +
+ )} ) diff --git a/frontend/src/components/SignIn/SignInForm.css b/frontend/src/components/SignIn/SignInForm.css index 7aa6fa7..4ecb6af 100644 --- a/frontend/src/components/SignIn/SignInForm.css +++ b/frontend/src/components/SignIn/SignInForm.css @@ -7,7 +7,7 @@ width: 50%; background-color: #74b1d4; padding: 25px 40px; - overflow: auto; + overflow: hidden; } .pageSwitcher { diff --git a/frontend/src/config-examples-cancer.json b/frontend/src/config-examples-cancer.json index b8db337..d2c1c48 100644 --- a/frontend/src/config-examples-cancer.json +++ b/frontend/src/config-examples-cancer.json @@ -236,14 +236,14 @@ "subTitle": "Mutations in:", "subTitle2": "gene:", "label": "KRAS", - "value": "KRAS", - "schemaField": "geneId" + "value": "molecularAttributes.geneIds=KRAS", + "schemaField": "molecularAttributes.geneIds" }, { "subTitle2": "aminoacid:", "label": "p.Gly12Cys", - "value": "p.Gly12Cys", - "schemaField": "aminoacidChange" + "value": "molecularAttributes.aminoacidChanges=p.Gly12Cys", + "schemaField": "molecularAttributes.aminoacidChanges" } ], [ diff --git a/frontend/src/config.json b/frontend/src/config.json index 412e2e2..e8e13e0 100644 --- a/frontend/src/config.json +++ b/frontend/src/config.json @@ -1,5 +1,5 @@ { - "API_URL": "https://beacon-apis-test.ega-archive.org/api", - "REDIRECT_URL": "http://localhost:3000/", + "API_URL": "https://beacon-network-backend-test.ega-archive.org/beacon-network/v2.0.0", + "REDIRECT_URL": "https://beacon-network-test.ega-archive.org/", "KEYCLOAK_URL": "https://beacon-network-demo2.ega-archive.org" } \ No newline at end of file