diff --git a/src/components/Manager/MappingsFunctions/MappingsFunctions.scss b/src/components/Manager/MappingsFunctions/MappingsFunctions.scss index 170c28b..b24fc07 100644 --- a/src/components/Manager/MappingsFunctions/MappingsFunctions.scss +++ b/src/components/Manager/MappingsFunctions/MappingsFunctions.scss @@ -10,7 +10,7 @@ flex-direction: row; } .ontology_form { - width: 10vw; + width: 10.5vw; height: 50vh; overflow: auto; position: fixed; @@ -28,26 +28,24 @@ flex-wrap: wrap; flex-direction: row; justify-content: flex-start; - align-items: end; + align-items: center; z-index: 10; flex: 1; border-bottom: solid 1px #eeee; h4 { - margin:0; - padding-right:1rem; + margin: 0; + padding-right: 1rem; } .mappings_search_bar { + margin: 0 0 0 8px; width: 60%; } .search-desc { flex: 0 0 100%; - margin-bottom:1rem; + margin-bottom: 1rem; } } - - - .inactive_term, .active_term { padding: 10px; @@ -120,3 +118,7 @@ .view_more_wrapper { margin-left: 11vw; } + +.onto_search_bar { + margin-bottom: 8px; +} diff --git a/src/components/Manager/MappingsFunctions/OntologyCheckboxes.jsx b/src/components/Manager/MappingsFunctions/OntologyCheckboxes.jsx index 123f96c..14d33ad 100644 --- a/src/components/Manager/MappingsFunctions/OntologyCheckboxes.jsx +++ b/src/components/Manager/MappingsFunctions/OntologyCheckboxes.jsx @@ -1,4 +1,4 @@ -import { Checkbox, Form } from 'antd'; +import { Checkbox, Form, Input } from 'antd'; import { ontologyCounts } from '../Utilitiy'; import { useContext, useEffect, useState } from 'react'; import { SearchContext } from '../../../Contexts/SearchContext'; @@ -9,14 +9,19 @@ export const OntologyCheckboxes = ({ apiPreferences }) => { setApiPreferencesCode, facetCounts, ontologyApis, - component, } = useContext(SearchContext); + const { Search } = Input; + const [checkedOntologies, setCheckedOntologies] = useState([]); + const [searchText, setSearchText] = useState(''); const defaultOntologies = ['mondo', 'hp', 'maxo', 'ncit']; let processedApiPreferencesCode; + // Ensures the data sent to the API is in the correct format. + // If apiPreferencesCode is an array, sets processedApiPreferencesCode equal to it. + // If it is a comma-separated string, it splits it by the commas and adds them to an array if (Array.isArray(apiPreferencesCode)) { processedApiPreferencesCode = apiPreferencesCode; } else if (typeof apiPreferencesCode === 'string') { @@ -81,15 +86,29 @@ export const OntologyCheckboxes = ({ apiPreferences }) => { ? checkedOntologies : []; + const getFilteredItems = searchText => { + const filtered = countsResult?.filter(item => { + const key = Object.keys(item)[0]; + return key.startsWith(searchText); + }); + return filtered; + }; + return (
+ setSearchText(e.target.value)} + />
- {countsResult + {getFilteredItems(searchText) ?.sort((a, b) => { const aValue = Object.values(a)[0]; const bValue = Object.values(b)[0];