Search bar for ontologies in OntologyCheckboxes

NIH-NCPI · Oct 24, 2024 · 88ff118 · 88ff118
1 parent 2dc6803
commit 88ff118
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 68 deletions.
diff --git 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
@@ -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];

diff --git a/src/components/Nav/Breadcrumbs.jsx b/src/components/Nav/Breadcrumbs.jsx
@@ -1,30 +1,34 @@
-import { Breadcrumb } from "antd"
+import { Breadcrumb } from 'antd';
 import { useLocation, Link } from 'react-router-dom';
 // import { Link } from 'react-router';
 export const Breadcrumbs = () => {
-   const location = useLocation();
-   const pathParts = location.pathname.split('/').filter(Boolean);
-   const pathArr = []
-   pathParts.forEach(path => {
-      pathArr.push({ title: path, path: path });
-   });
-
-   console.log(location,'location');
-
+  const location = useLocation();
+  const pathParts = location.pathname.split('/').filter(Boolean);
+  const pathArr = [];
+  pathParts.forEach(path => {
+    pathArr.push({ title: path, path: path });
+  });
 
-   return <span className="breadcrumbs">
-       <li><Link to={'/'}>Home</Link> {location.pathname != '/' && <span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>}</li>
+  return (
+    <span className="breadcrumbs">
+      <li>
+        <Link to={'/'}>Home</Link>{' '}
+        {location.pathname != '/' && <span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>}
+      </li>
       <Breadcrumb itemRender={itemRender} items={pathArr} />
-   </span>
-}
+    </span>
+  );
+};
 function itemRender(currentRoute, params, items, pathArr) {
-   const isLast = currentRoute?.path === items[items.length - 1]?.path;
+  const isLast = currentRoute?.path === items[items.length - 1]?.path;
 
-   return <>
-   {isLast ? (
-      <span>{currentRoute.title}</span>
-   ) : (
-      <Link to={`/${pathArr.join("/")}`}>{currentRoute.title}</Link>
-   )}
-   </>
-}
+  return (
+    <>
+      {isLast ? (
+        <span>{currentRoute.title}</span>
+      ) : (
+        <Link to={`/${pathArr.join('/')}`}>{currentRoute.title}</Link>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Projects/Tables/TableDetails.jsx b/src/components/Projects/Tables/TableDetails.jsx
@@ -42,7 +42,8 @@ export const TableDetails = () => {
   const [load, setLoad] = useState(false);
 
   const [pageSize, setPageSize] = useState(
-    parseInt(localStorage.getItem('pageSize'), 10) || 10);
+    parseInt(localStorage.getItem('pageSize'), 10) || 10
+  );
   const handleTableChange = (current, size) => {
     setPageSize(size);
   };
@@ -54,21 +55,17 @@ export const TableDetails = () => {
   const login = RequiredLogin({ handleSuccess: handleSuccess });
 
   useEffect(() => {
-
     setDataSource(tableData(table));
     localStorage.setItem('pageSize', pageSize);
   }, [table, mapping, pageSize]);
 
-
-  const updateMappings = (mapArr,mappingCode ) => {
-
+  const updateMappings = (mapArr, mappingCode) => {
     // setLoading(true);
     const mappingsDTO = {
       mappings: mapArr,
       editor: user.email,
     };
-    console.log(mappingsDTO,"mappingsDTO");
-
+
     fetch(`${vocabUrl}/Table/${tableId}/mapping/${mappingCode}`, {
       method: 'PUT',
       headers: {
@@ -87,11 +84,11 @@ export const TableDetails = () => {
         setMapping(data.codes);
         setEditMappings(null);
         form.resetFields();
-        notification.success({ description:'Mapping removed.'});
+        notification.success({ description: 'Mapping removed.' });
       })
       .catch(error => {
-        console.log(error,'error');
-        
+        console.log(error, 'error');
+
         if (error) {
           notification.error({
             message: 'Error',
@@ -103,7 +100,6 @@ export const TableDetails = () => {
       .finally(() => setLoading(false));
   };
 
-
   const alphabetizeOntologies = ontologies => {
     // Sort the keys alphabetically
     const sortedKeys = Object.keys(ontologies).sort();
@@ -131,8 +127,8 @@ export const TableDetails = () => {
               .then(data => setMapping(data.codes))
               .catch(error => {
                 if (error) {
-                  console.log(error,"error");
-                  
+                  console.log(error, 'error');
+
                   notification.error({
                     message: 'Error',
                     description: 'An error occurred loading mappings.',
@@ -236,37 +232,52 @@ variable in the table, AND the mappings array length for the variable is > 0, th
 and returns the length of the mapping array (i.e. returns the number of variables mapped to the table variable). 
 It then shows the mappings as table data and alows the user to delete a mapping from the table.*/
   const noMapping = variable => {
-    return <Button onClick={() => setGetMappings({ name: variable.name, code: variable.code })}>
-      Get Mappings
-    </Button>
-  }
+    return (
+      <Button
+        onClick={() =>
+          setGetMappings({ name: variable.name, code: variable.code })
+        }
+      >
+        Get Mappings
+      </Button>
+    );
+  };
 
   const matchCode = variable => {
-
-
     if (!mapping?.length) {
       return noMapping(variable);
     }
 
-    const variableMappings = mapping.find(item => item?.code === variable?.code);
+    const variableMappings = mapping.find(
+      item => item?.code === variable?.code
+    );
 
     if (variableMappings && variableMappings.mappings?.length) {
-      return variableMappings.mappings.map(code => <div className='mapping' key={code.display}><span className='mapping-display'>{code.display}</span><span className='remove-mapping' onClick={() => handleRemoveMapping(variableMappings,code)}><CloseCircleOutlined  style={{color:"red", }} /></span></div>);
+      return variableMappings.mappings.map(code => (
+        <div className="mapping" key={code.display}>
+          <span className="mapping-display">{code.display}</span>
+          <span
+            className="remove-mapping"
+            onClick={() => handleRemoveMapping(variableMappings, code)}
+          >
+            <CloseCircleOutlined style={{ color: 'red' }} />
+          </span>
+        </div>
+      ));
     } else {
       return noMapping(variable);
     }
   };
 
-  const handleRemoveMapping = (variableMappings,code) => {
-    // console.log(variableMappings,"variableMappings");
+  const handleRemoveMapping = (variableMappings, code) => {
     const mappingToRemove = variableMappings.mappings.indexOf(code);
     //remove mapping from mappings
-    {mappingToRemove !== -1 && variableMappings.mappings.splice(mappingToRemove,1)}   
-    updateMappings(variableMappings?.mappings,variableMappings?.code);    
-
-  }
-
-
+    {
+      mappingToRemove !== -1 &&
+        variableMappings.mappings.splice(mappingToRemove, 1);
+    }
+    updateMappings(variableMappings?.mappings, variableMappings?.code);
+  };
 
   // data for the table columns. Each table has an array of variables. Each variable has a name, description, and data type.
   // The integer and quantity data types include additional details.
@@ -285,9 +296,11 @@ It then shows the mappings as table data and alows the user to delete a mapping
         max: variable.max,
         units: variable.units,
         enumeration: variable.data_type === 'ENUMERATION' && (
-          console.log(variable.enumerations.reference,"variable.enumerations.reference"),
-
-          <Link to={`/Study/${studyId}/DataDictionary/${DDId}/Table/${tableId}/${variable.enumerations.reference}`}>View/Edit</Link>
+          <Link
+            to={`/Study/${studyId}/DataDictionary/${DDId}/Table/${tableId}/${variable.enumerations.reference}`}
+          >
+            View/Edit
+          </Link>
         ),
         mapped_terms: matchCode(variable),
       };

diff --git a/src/components/Projects/Terminologies/Terminology.jsx b/src/components/Projects/Terminologies/Terminology.jsx
@@ -55,7 +55,6 @@ export const Terminology = () => {
       mappings: mapArr,
       editor: user.email,
     };
-    console.log(tableId, 'tableId');
 
     fetch(`${vocabUrl}/Terminology/${terminologyId}/mapping/${mappingCode}`, {
       method: 'PUT',
@@ -139,7 +138,6 @@ It then shows the mappings as table data and alows the user to delete a mapping
   };
 
   const handleRemoveMapping = (variableMappings, code) => {
-    // console.log(variableMappings,"variableMappings");
     const mappingToRemove = variableMappings.mappings.indexOf(code);
     //remove mapping from mappings
     {