Skip to content

Commit

Permalink
updated tables
Browse files Browse the repository at this point in the history
  • Loading branch information
Gemma committed Jun 6, 2024
1 parent 4e927ba commit cf08d2c
Show file tree
Hide file tree
Showing 2 changed files with 560 additions and 451 deletions.
193 changes: 115 additions & 78 deletions frontend/src/components/Results/BiosamplesResults/TableResultsBiosamples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ function TableResultsBiosamples (props) {
const [showCrossQuery, setShowCrossQuery] = useState(false)
const [parameterCrossQuery, setParamCrossQuery] = useState('')
const [expandedRows, setExpandedRows] = useState(
new Array(props.beaconsList.length).fill(false)
Array.from({ length: props.beaconsList.length }, (_, index) => index)
)
const [currentPage, setCurrentPage] = useState(1)
const [rowsPerPage] = useState(10) // You can make this dynamic if needed
Expand Down Expand Up @@ -827,10 +827,9 @@ function TableResultsBiosamples (props) {
return (
<div className='containerBeaconResults'>
{showDatsets === true &&
props.results.length > 0 &&
props.beaconsList.map((result, beaconIndex) => {
return (
<table className='tableGranularity'>
<table className='tableGranularity' key={beaconIndex}>
<thead className='theadGranularity'>
<tr id='trGranuHeader'>
<th className='thGranularityTitleBeacon'>Beacon</th>
Expand All @@ -839,91 +838,127 @@ function TableResultsBiosamples (props) {
</tr>
</thead>
<tbody className='tbodyGranu'>
{props.resultsPerDataset.map((dataset, index2) => (
<React.Fragment key={index2}>
{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 (
<React.Fragment key={index2}>
<tr
className='trGranuBeacon'
onClick={() => toggleRow(index2)}
>
<td className='tdGranuBeacon'>
{dataset[0]}
{expandedRows.includes(index2) ? (
<ion-icon name='chevron-down-outline'></ion-icon>
) : (
<ion-icon name='chevron-up-outline'></ion-icon>
)}
</td>
<td className='tdGranuBeacon'></td>
<td className='tdGranuBeacon'>
{props.show === 'boolean'
? allTrue
? 'YES'
: 'No, sorry'
: totalCount}
</td>
</tr>
{expandedRows.includes(index2) && (
<React.Fragment key={`expanded-${index2}`}>
{props.show === 'boolean' &&
dataset[2].map((booleanElement, booleanIndex) => (
<tr
className='trGranu'
key={`boolean-${booleanIndex}`}
>
<td className='tdGranu'></td>
<td
className={`tdGranu ${
booleanElement
? 'tdFoundDataset'
: 'tdNotFoundDataset'
}`}
>
{dataset[1][booleanIndex]}
</td>
<td
className={`tdGranu ${
booleanElement ? 'tdFound' : 'tdNotFound'
}`}
>
{booleanElement ? 'YES' : 'No, sorry'}
</td>
</tr>
))}
{props.show === 'count' &&
dataset[3].map((countElement, countIndex) => (
<tr
className='trGranu'
key={`count-${countIndex}`}
>
<td className='tdGranu'></td>
<td
className={`tdGranu ${
countElement !== undefined &&
countElement !== null &&
countElement !== 0
? 'tdFoundDataset'
: 'tdNotFoundDataset'
}`}
>
{dataset[1][countIndex]}
</td>
<td
className={`tdGranu ${
countElement !== undefined &&
countElement !== null &&
countElement !== 0
? 'tdFound'
: 'tdNotFound'
}`}
>
{countElement}
</td>
</tr>
))}
</React.Fragment>
)}
</React.Fragment>
)
})}
{props.results.length === 0 && (
<React.Fragment key={beaconIndex}>
<tr
className='trGranuBeacon'
onClick={() => toggleRow(index2)}
onClick={() => toggleRow(beaconIndex)}
>
<td className='tdGranu'>
{dataset[0]}
{expandedRows.includes(index2) ? (
<ion-icon name='chevron-down-outline'></ion-icon>
) : (
<ion-icon name='chevron-up-outline'></ion-icon>
)}
</td>
<td className='tdGranuBeaconNoResults'>{result.id}</td>
<td className='tdGranuNoResults'></td>
{props.show === 'boolean' && (
<td
className={`tdGranuNoResults ${'tdNotFoundDataset'}`}
>
No, sorry
</td>
)}
{props.show === 'count' && (
<td className={`tdGranu ${'tdNotFound'}`}>0 results</td>
)}
</tr>
{expandedRows.includes(index2) && (
<React.Fragment key={`expanded-${index2}`}>
{props.show === 'boolean' &&
dataset[2].map((booleanElement, booleanIndex) => (
<tr
className='trGranu'
key={`boolean-${booleanIndex}`}
>
<td className='tdGranu'></td>
<td
className={`tdGranu ${
booleanElement ? 'tdFound' : 'tdNotFound'
}`}
>
{dataset[1][booleanIndex]}
</td>
<td
className={`tdGranu ${
booleanElement
? 'tdFoundDataset'
: 'tdNotFoundDataset'
}`}
>
{booleanElement ? 'YES' : 'No, sorry'}
</td>
</tr>
))}
{props.show === 'count' &&
dataset[3].map((countElement, countIndex) => (
<tr className='trGranu' key={`count-${countIndex}`}>
<td className='tdGranu'></td>
<td
className={`tdGranu ${
countElement !== undefined &&
countElement !== null &&
countElement !== 0
? 'tdFoundDataset'
: 'tdNotFoundDataset'
}`}
>
{dataset[1][countIndex]}
</td>
<td
className={`tdGranu ${
countElement !== undefined &&
countElement !== null &&
countElement !== 0
? 'tdFound'
: 'tdNotFound'
}`}
>
{countElement}
</td>
</tr>
))}
</React.Fragment>
)}
</React.Fragment>
))}
)}
</tbody>
</table>
)
})}

{showDatsets === true && props.results.length === 0 && (
<h5 className='errorConnection'>
No results, sorry. Please check the connection and retry
</h5>
)}

{!showCrossQuery &&
showDatsets === false &&
props.results.length > 0 &&
Expand Down Expand Up @@ -1642,11 +1677,13 @@ function TableResultsBiosamples (props) {
</button>
</div>
)}

{props.show === 'full' &&
props.results.length === 0 &&
!showCrossQuery && (
<h5 className='noResultsFullResponse'>No results, sorry.</h5>
)}

{showCrossQuery && (
<CrossQueries
parameter={parameterCrossQuery}
Expand Down
Loading

0 comments on commit cf08d2c

Please sign in to comment.