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 && (
-
-
-
-
- term |
- label |
- {hide === false && type | }
- scopes |
-
-
-
-
-
-
- |
-
-
-
-
- |
-
- {hide === false && (
-
+
+ {!error && (
+
+
+
+
+ term |
+ label |
+ {hide === false && type | }
+ scopes |
+
+
+
+
-
|
- )}
- {
-
+
-
|
- }
-
-
- {props.filteringTerms !== undefined &&
- state.list !== 'error' &&
- state.list.map((term, index) => {
- return (
- <>
-
- {index % 2 === 0 && (
-
- {term.type.toLowerCase() !== 'alphanumeric' && (
-
- {' '}
-
- {term.id}
- |
- )}
- {term.type.toLowerCase() === 'alphanumeric' && (
-
- {' '}
-
- {term.id}
- |
- )}
- {term.label !== '' ? (
- {term.label} |
- ) : (
- - |
- )}
-
- {hide === false && (
- {term.type} |
- )}
-
-
- {Array.isArray(term.scopes) &&
- term.scopes.map((term2, index) => {
- return index < term.scopes.length - 1
- ? term2 + '' + ','
- : term2 + ''
- })}
- |
-
- )}
- {index % 2 == !0 && (
-
- {term.type.toLowerCase() !== 'alphanumeric' && (
-
- {' '}
-
- {term.id}
+ {hide === false && (
+ |
+
+
+ |
+
+ )}
+ {
+
+
+
+ |
+
+ }
+
+
+ {props.filteringTerms !== undefined &&
+ state.list !== 'error' &&
+ currentItems.map((term, index) => {
+ return (
+ <>
+
+ {index % 2 === 0 && (
+
+ {term.type.toLowerCase() !== 'alphanumeric' && (
+
+ {' '}
+
+ {term.id}
+ |
+ )}
+ {term.type.toLowerCase() === 'alphanumeric' && (
+
+ {' '}
+
+ {term.id}
+ |
+ )}
+ {term.label !== '' ? (
+ {term.label} |
+ ) : (
+ - |
+ )}
+
+ {hide === false && (
+ {term.type} |
+ )}
+
+
+ {Array.isArray(term.scopes) &&
+ term.scopes.map((term2, index) => {
+ return index < term.scopes.length - 1
+ ? term2 + '' + ','
+ : term2 + ''
+ })}
|
- )}
- {term.type.toLowerCase() === 'alphanumeric' && (
-
- {' '}
-
- {term.id}
+ |
+ )}
+ {index % 2 !== 0 && (
+
+ {term.type.toLowerCase() !== 'alphanumeric' && (
+
+ {' '}
+
+ {term.id}
+ |
+ )}
+ {term.type.toLowerCase() === 'alphanumeric' && (
+
+ {' '}
+
+ {term.id}
+ |
+ )}
+ {term.label !== '' ? (
+ {term.label} |
+ ) : (
+ - |
+ )}
+
+ {hide === false && (
+ {term.type} |
+ )}
+
+
+ {Array.isArray(term.scopes) &&
+ term.scopes.map((term2, index) => {
+ return index < term.scopes.length - 1
+ ? term2 + '' + ','
+ : term2 + ''
+ })}
|
- )}
- {term.label !== '' ? (
- {term.label} |
- ) : (
- - |
- )}
-
- {hide === false && (
- {term.type} |
- )}
+
+ )}
-
- {Array.isArray(term.scopes) &&
- term.scopes.map((term2, index) => {
- return index < term.scopes.length - 1
- ? term2 + '' + ','
- : term2 + ''
- })}
- |
-
- )}
-
- {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) && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
-
-
-
- )}
-
- >
- )
- })}
-
-
- )}
+
+ )}
+
+ >
+ )
+ })}
+
+
+
+
+
+ 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'