Merge branch 'onto-search/fd-1739' into url-system/fd-1678

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;
+}

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 (
     <div className="ontology_form">
+      <Search
+        placeholder="Ontologies"
+        className="onto_search_bar"
+        value={searchText}
+        onChange={e => setSearchText(e.target.value)}
+      />
       <Form.Item
         name="selected_ontologies"
         valuePropName="value"
         rules={[{ required: false }]}
       >
         <div className="modal_display_results">
-          {countsResult
+          {getFilteredItems(searchText)
             ?.sort((a, b) => {
               const aValue = Object.values(a)[0];
               const bValue = Object.values(b)[0];