OpenConceptLab/ocl_issues#2023 | concept search results -> showing ma…

…tched synonyms | concept details -> highlight matches
OpenConceptLab · Dec 12, 2024 · ec29d6e · ec29d6e
1 parent 76bea3d
commit ec29d6e
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 6 deletions.
diff --git a/src/components/concepts/Associations.jsx b/src/components/concepts/Associations.jsx
@@ -64,7 +64,7 @@ const MappingCells = ({mapping, isIndirect}) => {
   return (
     <React.Fragment>
       <TableCell>
-        <span style={{display: 'flex'}}>
+        <span style={{display: 'flex'}} className='searchable'>
           <Tooltip title={getTitle()}>
             <span>
               <ConceptIcon selected={isDefinedInOCL} sx={{width: '10px', height: '10px', marginRight: '12px'}} />

diff --git a/src/components/concepts/ConceptProperties.jsx b/src/components/concepts/ConceptProperties.jsx
@@ -17,15 +17,15 @@ const ConceptProperties = ({ concept }) => {
           <TableCell style={{fontSize: '0.875rem', width: '150px'}}>
             {t('concept.concept_class')}
           </TableCell>
-          <TableCell style={{fontSize: '0.875rem'}}>
+          <TableCell style={{fontSize: '0.875rem'}} className='searchable'>
             {concept?.concept_class}
           </TableCell>
         </TableRow>
         <TableRow>
           <TableCell style={{fontSize: '0.875rem', width: '150px'}}>
             {t('concept.datatype')}
           </TableCell>
-          <TableCell style={{fontSize: '0.875rem'}}>
+          <TableCell style={{fontSize: '0.875rem'}} className='searchable'>
             {concept?.datatype}
           </TableCell>
         </TableRow>

diff --git a/src/components/concepts/Locales.jsx b/src/components/concepts/Locales.jsx
@@ -23,7 +23,7 @@ const LocalePrimary = ({ locale }) => {
   const locale_type = locale.name_type || locale.description_type
   return (
     <React.Fragment>
-      <Typography component="span" sx={{fontSize: '0.875rem', color: '#000000de'}}>
+      <Typography component="span" sx={{fontSize: '0.875rem', color: '#000000de'}} className={locale?.name ? 'searchable' : undefined}>
         {locale.name || locale.description}
       </Typography>
       {

diff --git a/src/components/repos/RepoConceptsMatch.jsx b/src/components/repos/RepoConceptsMatch.jsx
@@ -484,7 +484,12 @@ const RepoConceptsMatch = () => {
           noPagination
           noSorting
           resultContainerStyle={{height: showItem?.id ? '25vh' : 'calc(100vh - 200px)'}}
-          onShowItemSelect={item => setShowItem(item)}
+          onShowItemSelect={item => {
+            setShowItem(item)
+            setTimeout(() => {
+              highlightTexts([item], null, false)
+            }, 100)
+          }}
           selectedToShow={showItem}
           extraColumns={[
             {

diff --git a/src/components/search/ResultConstants.js b/src/components/search/ResultConstants.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import find from 'lodash/find'
 import {
   formatDate,
   formatWebsiteLink,
@@ -9,11 +10,33 @@ import RepoVersionButton from '../repos/RepoVersionButton';
 import FromAndTargetSource from '../mappings/FromAndTargetSource'
 import ConceptCell from '../mappings/ConceptCell'
 
+const getLocale = (concept, synonym) => {
+  let cleaned = synonym.replaceAll('<em>', '').replaceAll('</em>', '')
+  let locale = find(concept?.names, name => name?.name.toLowerCase() === cleaned.toLowerCase())
+
+  return <div>{locale?.locale ? `[${locale.locale}] ${[locale.name]}` : cleaned}</div>
+}
+
 
 export const ALL_COLUMNS = {
   concepts: [
     {id: 'id', labelKey: 'common.id', value: 'id', sortOn: 'id_lowercase', className: 'searchable'},
-    {id: 'name', labelKey: 'concept.display_name', value: 'display_name', sortOn: '_name', className: 'searchable', sortBy: 'asc', renderer: item => (<span><React.Fragment>{item.retired && <Retired style={{marginRight: '8px'}}/>} {item.display_name}</React.Fragment></span>)},
+    {id: 'name', labelKey: 'concept.display_name', value: 'display_name', sortOn: '_name', className: 'searchable', sortBy: 'asc', renderer: item => (
+      <span>
+        <React.Fragment>
+          {item.retired && <Retired style={{marginRight: '8px'}}/>} {item.display_name}
+          {
+            item.search_meta?.search_highlight?.synonyms?.length && item?.names?.length &&
+              <div style={{marginTop: '6px', color: 'rgba(0, 0, 0, 0.5)', fontSize: '12px'}}>
+                {
+                  item.search_meta?.search_highlight?.synonyms.map(syn => <React.Fragment key={syn}>{getLocale(item, syn)}</React.Fragment>)
+                }
+              </div>
+          }
+        </React.Fragment>
+      </span>
+    )
+    },
     {id: 'concept_class', labelKey: 'concept.concept_class', value: 'concept_class', sortOn: 'concept_class', className: 'searchable', sx: {whiteSpace: 'pre'}},
     {id: 'datatype', labelKey: 'concept.datatype', value: 'datatype', sortOn: 'datatype', className: 'searchable'},
     {id: 'owner', labelKey: 'common.owner', value: 'owner', sortOn: 'owner', nested: false, renderer: item => (<span style={{display: 'flex', whiteSpace: 'nowrap'}}><OwnerIcon noTooltip ownerType={item.owner_type} fontSize='small' sx={{marginRight: '4px'}}/>{item.owner}</span>)},