Skip to content

Commit 2c5850f

Browse files
amattu2amattu2
authored
Merge pull request #486 from CBIIT/INS-1506
INS-1506 Updated Dataset Search Results
2 parents 682a4b2 + 3065748 commit 2c5850f

File tree

2 files changed

+842
-175
lines changed

2 files changed

+842
-175
lines changed

‎src/pages/dataSets/SearchResult/SearchResult.js‎

Lines changed: 27 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -329,72 +329,6 @@ const SearchResultContainer = styled.div`
329329
330330
`;
331331

332-
const TableHead = styled.thead`
333-
th{
334-
cursor: pointer;
335-
user-select: none;
336-
-webkit-user-select: none;
337-
-khtml-user-select: none;
338-
-moz-user-select: none;
339-
-ms-user-select: none;
340-
341-
&:hover {
342-
background-color: #c6d2db;
343-
}
344-
}
345-
`;
346-
347-
const SortingOrder = styled.span`
348-
margin-top: 5px;
349-
width: 14px;
350-
height: 14px;
351-
position: absolute;
352-
background-repeat: no-repeat;
353-
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='rgba(75,108,134,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
354-
`;
355-
356-
const SortingOrderDesc = styled.span`
357-
margin-top: 5px;
358-
width: 14px;
359-
height: 14px;
360-
position: absolute;
361-
background-repeat: no-repeat;
362-
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='rgba(75,108,134,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");
363-
transform: rotate(-180deg);
364-
`;
365-
366-
const toCapitalize = (str) => {
367-
const arr = str.split(' ');
368-
369-
const result = arr.map((t) => t.charAt(0).toUpperCase() + t.slice(1));
370-
371-
return result.join(' ');
372-
};
373-
374-
const useQuery = () => new URLSearchParams(useLocation().search);
375-
376-
const replaceQueryStr = (query, sorting) => {
377-
let str = '';
378-
if (query.get('search_text')) {
379-
str += `&search_text=${query.get('search_text')}`;
380-
}
381-
if (query.get('filterByResource')) {
382-
str += `&filterByResource=${query.get('filterByResource')}`;
383-
}
384-
if (query.get('filterByRepo')) {
385-
str += `&filterByRepo=${query.get('filterByRepo')}`;
386-
}
387-
if (query.get('page')) {
388-
str += `&page=${query.get('page')}`;
389-
}
390-
if (query.get('pageSize')) {
391-
str += `&pageSize=${query.get('pageSize')}`;
392-
}
393-
str += `&sortBy=${sorting.k}`;
394-
str += `&sortOrder=${sorting.v}`;
395-
return str.substring(1);
396-
};
397-
398332
function getCombinations(arr) {
399333
const result = [];
400334
function combine(prefix, start) {
@@ -410,16 +344,11 @@ function getCombinations(arr) {
410344

411345
const SearchResult = ({
412346
resultList,
413-
sort,
414347
search,
415-
onChangeSorting,
416-
onChangeSortingOrder,
417348
glossaryTerms,
418349
}) => {
419-
const query = useQuery();
420-
const history = useHistory();
421-
const sanatizeSearchTerms = search.search_text.replace(/[^a-zA-Z0-9 ]/g, ' ');
422-
const searchTerms = sanatizeSearchTerms.split(' ').filter((item) => item !== '');
350+
const sanitizeSearchTerms = search.search_text.replace(/[^a-zA-Z0-9 ]/g, ' ');
351+
const searchTerms = sanitizeSearchTerms.split(' ').filter((item) => item !== '');
423352
let searchCombination = getCombinations(searchTerms);
424353

425354
if (search.filters) {
@@ -442,33 +371,13 @@ const SearchResult = ({
442371

443372
searchCombination.sort((a, b) => b.length - a.length);
444373

445-
const handleSortBy = (column) => {
446-
const name = column;
447-
if (name === sort.name) {
448-
const toSortBy = {};
449-
toSortBy.name = 'Dataset';
450-
toSortBy.k = 'dataset_title_sort';
451-
toSortBy.v = sort.v === 'asc' ? 'desc' : 'asc';
452-
const queryStr = replaceQueryStr(query, toSortBy);
453-
history.push(`/datasets?${queryStr}`);
454-
onChangeSortingOrder(toSortBy.v);
455-
} else {
456-
const toSortBy = {};
457-
toSortBy.name = 'Dataset';
458-
toSortBy.k = 'dataset_title_sort';
459-
toSortBy.v = sort.v;
460-
const queryStr = replaceQueryStr(query, toSortBy);
461-
history.push(`/datasets?${queryStr}`);
462-
onChangeSorting(toSortBy);
463-
}
464-
};
465-
466374
const initializePopover = () => {
467375
const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
468376
popoverTriggerList.map((popoverTriggerEl) => new Popover(popoverTriggerEl));
469377
};
470378

471379
function removeHTMLTags(str) {
380+
if (!str) return '';
472381
return str.replace(/<\/?[a-z][\s\S]*?>/gi, '');
473382
}
474383
useEffect(() => {
@@ -487,13 +396,11 @@ const SearchResult = ({
487396
<div className="messageContainer">No result found. Please refine your search.</div>
488397
) : resultList.map((rst, idx) => {
489398
const keyName = `sr_${idx}`;
490-
let description = removeHTMLTags(rst.content.description);
491-
if (description === null) {
492-
description = '';
493-
}
399+
const description = removeHTMLTags(rst.content.description);
494400

495401
let highlightedPrimaryDisease = rst.content.primary_disease;
496402
let highlightedDatasetSourceRepo = rst.content.dataset_source_repo;
403+
let highlightedStudyType = rst.content.study_type;
497404

498405
let highlightedDesc = description.replace(/<(?![b/])/g, '&lt;');
499406
let hasMatchInDesc = false;
@@ -511,6 +418,9 @@ const SearchResult = ({
511418
if (highlightedDatasetSourceRepo) {
512419
highlightedDatasetSourceRepo = highlightedDatasetSourceRepo.replace(regex, (match) => `<b>${match}</b>`).trim();
513420
}
421+
if (highlightedStudyType) {
422+
highlightedStudyType = highlightedStudyType.replace(regex, (match) => `<b>${match}</b>`).trim();
423+
}
514424

515425
highlightedDesc = highlightedDesc.replace(regex, (match) => `<b>${match}</b>`).trim();
516426
});
@@ -530,10 +440,11 @@ const SearchResult = ({
530440
{ 'related terms': rst.content.related_terms },
531441
{ 'study links': rst.content.study_links },
532442
{ 'related genes': rst.content.related_genes },
533-
{ 'study type': rst.content.study_type },
534443
{ 'assay method': rst.content.assay_method },
535444
{ 'limitations for reuse': rst.content.limitations_for_reuse },
536445
{ 'NCI Division/Office/Center': rst.content.dataset_doc },
446+
{ institute: rst.content.institute },
447+
{ 'experimental approaches': rst.content.experimental_approaches },
537448
];
538449
const excludedValues = search && search.filters && Array.isArray(search.filters.dataset_source_repo)
539450
? search.filters.dataset_source_repo
@@ -579,7 +490,7 @@ const SearchResult = ({
579490
</div>
580491
<div className="row align-items-start subHeaderRow">
581492
<div className="col-sm resultSubTitle">
582-
<span className="dataRepo">
493+
<span className="dataRepo" data-testid="dataset-source-repo">
583494
<img src={databaseIcon} alt="database-icon" className="img0" />
584495
{ReactHtmlParser(highlightedDatasetSourceRepo)}
585496
</span>
@@ -604,18 +515,30 @@ const SearchResult = ({
604515
<div className="row align-items-start bodyRow">
605516
<div className="col labelDiv">
606517
<span>Primary Disease:&nbsp;&nbsp;&nbsp;</span>
607-
<span className="itemSpan">
518+
<span className="itemSpan" data-testid="primary-disease">
608519
{ReactHtmlParser(highlightedPrimaryDisease)}
609520
</span>
610521
</div>
611522
</div>
612523
}
524+
{
525+
rst.content.study_type != null && rst.content.study_type !== '' && (
526+
<div className="row align-items-start bodyRow">
527+
<div className="col labelDiv">
528+
<span>Study Type:&nbsp;&nbsp;&nbsp;</span>
529+
<span className="itemSpan" data-testid="study-type">
530+
{ReactHtmlParser(highlightedStudyType)}
531+
</span>
532+
</div>
533+
</div>
534+
)
535+
}
613536
{
614537
rst.content.sample_count != null && rst.content.sample_count !== '' && (
615538
<div className="row align-items-start bodyRow">
616539
<div className="col labelDiv">
617540
<span>Sample Count:&nbsp;&nbsp;&nbsp;</span>
618-
<span className="textSpan sampleCountHighlight">
541+
<span className="textSpan sampleCountHighlight" data-testid="sample-count">
619542
{rst.content.sample_count}
620543
</span>
621544
</div>
@@ -627,7 +550,7 @@ const SearchResult = ({
627550
<div className="row align-items-start bodyRow">
628551
<div className="col labelDiv">
629552
<span>Description:&nbsp;&nbsp;&nbsp;</span>
630-
<span className="textSpan">
553+
<span className="textSpan" data-testid="description">
631554
{ReactHtmlParser(highlightedDesc)}
632555
</span>
633556
</div>
@@ -644,7 +567,7 @@ const SearchResult = ({
644567
{Object.keys(match)[0]}
645568
:&nbsp;&nbsp;&nbsp;
646569
</span>
647-
<span className="additionalMatches">
570+
<span className="additionalMatches" data-testid="additional-match">
648571
{ReactHtmlParser(Object.values(match)[0])}
649572
</span>
650573
</div>

0 commit comments

Comments
 (0)