diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.css b/frontend/src/components/FilteringTerms/FilteringTerms.css index bd1ce35..20a5d0a 100644 --- a/frontend/src/components/FilteringTerms/FilteringTerms.css +++ b/frontend/src/components/FilteringTerms/FilteringTerms.css @@ -24,6 +24,40 @@ rgba(197, 150, 150, 0.13) 0px 0px 1px 1px; } +.buttonPaginationFilters { + border: 1px solid #a8a8cc; + border-radius: 4px; + padding: 6px; + margin-right: 17px; + width: 80px; +} + +.buttonPaginationFilters:hover { + background-color: rgb(231 244 255); +} + +.buttonPaginationFiltersNext:hover { + background-color: rgb(231 244 255); +} + +.buttonPaginationFiltersNext { + border: 1px solid #a8a8cc; + border-radius: 4px; + padding: 6px; + margin-left: 17px; + width: 80px; +} + +.pagination { + font-size: 14px; +} + +.pagination span { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; +} + .inputTerm { display: flex; align-items: center; @@ -69,15 +103,16 @@ tbody { flex-direction: column; margin-left: 1vw; align-items: center; - padding-bottom: 120px !important; + padding-bottom: 20px !important; } -.tableWrapper { - height: 100vh; +.tableWrapper { display: flex; - justify-content: center; + flex-direction: column; + align-items: center; + padding-bottom: 58px; } .generalContainer { @@ -369,7 +404,7 @@ tr { padding-bottom: 10px; align-items: center; font-size: 11px; -} + } .th4 { display: flex; width: 104%; @@ -402,6 +437,6 @@ tr { flex-direction: column; margin-left: 1vw; align-items: center; - padding-bottom: 120px !important; + padding-bottom: 20px !important; } } diff --git a/frontend/src/components/FilteringTerms/FilteringTerms.js b/frontend/src/components/FilteringTerms/FilteringTerms.js index ce28474..5c3f539 100644 --- a/frontend/src/components/FilteringTerms/FilteringTerms.js +++ b/frontend/src/components/FilteringTerms/FilteringTerms.js @@ -24,6 +24,23 @@ function FilteringTerms (props) { list: props.filteringTerms !== undefined ? props.filteringTerms : 'error' }) + const [currentPage, setCurrentPage] = useState(1) + const itemsPerPage = 10 // Adjust the number of items per page + const indexOfLastItem = currentPage * itemsPerPage + const indexOfFirstItem = indexOfLastItem - itemsPerPage + const currentItems = state.list.slice(indexOfFirstItem, indexOfLastItem) + + // Handle pagination controls + const handlePreviousPage = () => { + setCurrentPage(prevPage => Math.max(prevPage - 1, 1)) + } + + const handleNextPage = () => { + setCurrentPage(prevPage => prevPage + 1) + } + + const totalPages = Math.ceil(state.list.length / itemsPerPage) + const [trigger, setTrigger] = useState(false) const [hide, setHide] = useState(true) @@ -100,17 +117,20 @@ function FilteringTerms (props) { state.list.forEach((element, index) => { if (element.scopes.length > 1) { - element.scopes.forEach(element2 => { - let arrayNew = {} - arrayNew = { ...element } - - arrayNew['scopes'] = [element2] - + element.scopes.forEach(scope => { + let arrayNew = { ...element } + arrayNew['scopes'] = [scope] state.list.push(arrayNew) }) + + // Mark the original element for deletion + element.toBeDeleted = true } }) + // Remove the original elements with multiple scopes + state.list = state.list.filter(element => !element.toBeDeleted) + setstate({ query: '', list: props.filteringTerms !== false ? state.list : 'error' @@ -324,61 +344,20 @@ function FilteringTerms (props) { removeTag={remove} /> - {!error && ( -
- - - - - - {hide === false && } - - - - - - - - - - - {hide === false && ( - +
+ {!error && ( +
+
termlabeltypescopes
-
- -
-
-
- -
-
+ + + + + {hide === false && } + + + + + - )} - { - + - } - - - {props.filteringTerms !== undefined && - state.list !== 'error' && - state.list.map((term, index) => { - return ( - <> - - {index % 2 === 0 && ( - - {term.type.toLowerCase() !== 'alphanumeric' && ( - - )} - {term.type.toLowerCase() === 'alphanumeric' && ( - - )} - {term.label !== '' ? ( - - ) : ( - - )} - - {hide === false && ( - - )} - - - - )} - {index % 2 == !0 && ( - - {term.type.toLowerCase() !== 'alphanumeric' && ( - + + + )} + { + + + + } + + + {props.filteringTerms !== undefined && + state.list !== 'error' && + currentItems.map((term, index) => { + return ( + <> + + {index % 2 === 0 && ( + + {term.type.toLowerCase() !== 'alphanumeric' && ( + + )} + {term.type.toLowerCase() === 'alphanumeric' && ( + + )} + {term.label !== '' ? ( + + ) : ( + + )} + + {hide === false && ( + + )} + + - )} - {term.type.toLowerCase() === 'alphanumeric' && ( - + )} + {index % 2 !== 0 && ( + + {term.type.toLowerCase() !== 'alphanumeric' && ( + + )} + {term.type.toLowerCase() === 'alphanumeric' && ( + + )} + {term.label !== '' ? ( + + ) : ( + + )} + + {hide === false && ( + + )} + + - )} - {term.label !== '' ? ( - - ) : ( - - )} - - {hide === false && ( - - )} + + )} - - - )} - - {index % 2 == !0 && - term.type.toLowerCase() === 'alphanumeric' && - valueChosen.includes(term.id) && ( - -
-
-
- - - - -
- + {index % 2 !== 0 && + term.type.toLowerCase() === 'alphanumeric' && + valueChosen.includes(term.id) && ( +
+
+
+
+ + + + +
+ +
+ + +
- - -
+
- - - - )} - {index % 2 === 0 && - term.type.toLowerCase() === 'alphanumeric' && - valueChosen.includes(term.id) && ( - -
-
-
- - - - -
- +
+ )} + {index % 2 === 0 && + term.type.toLowerCase() === 'alphanumeric' && + valueChosen.includes(term.id) && ( + +
+
+
+ + + + +
+ +
+ + +
- - -
+
- - - - )} - - - ) - })} -
termlabeltypescopes
-
+
-
+
- {' '} - - {term.id} - - {' '} - - {term.id} - {term.label}-{term.type} - {Array.isArray(term.scopes) && - term.scopes.map((term2, index) => { - return index < term.scopes.length - 1 - ? term2 + '' + ',' - : term2 + '' - })} -
- {' '} - - {term.id} + {hide === false && ( +
+
+ +
+
+
+ +
+
+ {' '} + + {term.id} + + {' '} + + {term.id} + {term.label}-{term.type} + {Array.isArray(term.scopes) && + term.scopes.map((term2, index) => { + return index < term.scopes.length - 1 + ? term2 + '' + ',' + : term2 + '' + })} - {' '} - - {term.id} +
+ {' '} + + {term.id} + + {' '} + + {term.id} + {term.label}-{term.type} + {Array.isArray(term.scopes) && + term.scopes.map((term2, index) => { + return index < term.scopes.length - 1 + ? term2 + '' + ',' + : term2 + '' + })} {term.label}-{term.type}
- {Array.isArray(term.scopes) && - term.scopes.map((term2, index) => { - return index < term.scopes.length - 1 - ? term2 + '' + ',' - : term2 + '' - })} -
-
- )} + + )} + + + ) + })} + + +
+ + + Page {currentPage} of {totalPages} + + +
+ + )} + ) } diff --git a/frontend/src/components/Individuals/IndividualsResults.js b/frontend/src/components/Individuals/IndividualsResults.js index 1d0b81d..dc43fd1 100644 --- a/frontend/src/components/Individuals/IndividualsResults.js +++ b/frontend/src/components/Individuals/IndividualsResults.js @@ -324,7 +324,7 @@ function IndividualsResults (props) { let alphanumericFilter = {} props.filteringTerms.forEach(element => { - if (element.label) { + if (element.label && element.id !== 'NCIT:C46113' && element.id !== 'NCIT:C46112') { if ( queryArray[index][1].toLowerCase() === element.label.toLowerCase() @@ -332,7 +332,7 @@ function IndividualsResults (props) { if (queryArray[index][0].toLowerCase() === 'individual') { alphanumericFilter = { id: element.id, - scope: ['individuals'] + scope: ['individual'] } } else if ( queryArray[index][0].toLowerCase() === 'genomicvariation'