Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FD-1739. Search bar for ontologies for searching mappings #123

Merged
merged 1 commit into from
Oct 29, 2024
Merged

FD-1739. Search bar for ontologies for searching mappings #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions src/components/Manager/MappingsFunctions/MappingsFunctions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
flex-direction: row;
}
.ontology_form {
width: 10vw;
width: 10.5vw;
height: 50vh;
overflow: auto;
position: fixed;
Expand All @@ -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;
Expand Down Expand Up @@ -120,3 +118,7 @@
.view_more_wrapper {
margin-left: 11vw;
}

.onto_search_bar {
margin-bottom: 8px;
}
25 changes: 22 additions & 3 deletions src/components/Manager/MappingsFunctions/OntologyCheckboxes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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') {
Expand Down Expand Up @@ -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];
Expand Down
50 changes: 27 additions & 23 deletions src/components/Nav/Breadcrumbs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)}
</>
);
}
77 changes: 45 additions & 32 deletions src/components/Projects/Tables/TableDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};
Expand All @@ -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: {
Expand All @@ -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',
Expand All @@ -103,7 +100,6 @@ export const TableDetails = () => {
.finally(() => setLoading(false));
};


const alphabetizeOntologies = ontologies => {
// Sort the keys alphabetically
const sortedKeys = Object.keys(ontologies).sort();
Expand Down Expand Up @@ -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.',
Expand Down Expand Up @@ -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.
Expand All @@ -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),
};
Expand Down
2 changes: 0 additions & 2 deletions src/components/Projects/Terminologies/Terminology.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export const Terminology = () => {
mappings: mapArr,
editor: user.email,
};
console.log(tableId, 'tableId');

fetch(`${vocabUrl}/Terminology/${terminologyId}/mapping/${mappingCode}`, {
method: 'PUT',
Expand Down Expand Up @@ -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
{
Expand Down