OpenConceptLab/ocl_issues#1949 | Copied references view

snyaggarwal · snyaggarwal · commit cca850105bbf · 2025-12-17T10:52:36.000+05:30
diff --git a/src/components/app/App.jsx b/src/components/app/App.jsx
@@ -117,7 +117,7 @@ const App = props => {
 
 
 
-  const repoTabs = ['concepts', 'mappings', 'versions', 'summary', 'about']
+  const repoTabs = ['concepts', 'mappings', 'versions', 'summary', 'about', 'references']
   const orgTabs = ['repos']
   const repoTabsStr = repoTabs.join('|')
   const orgTabsStr = orgTabs.join('|')
diff --git a/src/components/common/ReferenceChip.jsx b/src/components/common/ReferenceChip.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Chip } from '@mui/material';
+import {
+  LocalOffer as LocalOfferIcon, Link as LinkIcon,
+} from '@mui/icons-material';
+import { toFullAPIURL, copyURL } from '../../common/utils';
+
+const ReferenceChip = props => {
+  const isReference = !props.notReference
+  const isResolved = Boolean(props.last_resolved_at)
+  const type = props.reference_type;
+  const expression = isResolved ? props.expression : `${props.expression} (unresolved)`;
+  let icon = <span />;
+  if(type && type.toLowerCase() === 'mappings')
+    icon = <LinkIcon fontSize="small" />;
+  else if(type && type.toLowerCase() === 'concepts')
+    icon = <LocalOfferIcon fontSize='small' color='primary' />;
+
+  const chip = <Chip
+                 className='clickable'
+                 icon={icon}
+                 label={expression}
+                 variant='outlined'
+                 color='primary'
+                 style={{border: 'none'}}
+               />
+  return (
+    <span>
+      <a href={toFullAPIURL(props.uri)} target='_blank' rel='noopener noreferrer'>
+        {chip}
+      </a>
+      {
+        isReference && (
+          props.include ?
+            <Chip size='small' variant='outlined' color='success' label='include' /> :
+            <Chip size='small' variant='outlined' color='error' label='exclude' />
+        )
+      }
+      {
+        isReference &&
+          <Chip size='small' color='primary' variant='outlined' label='copy expression' onClick={() => copyURL(toFullAPIURL(props.expression))} style={{marginLeft: '5px'}} />
+
+      }
+    </span>
+  )
+}
+
+export default ReferenceChip;
diff --git a/src/components/common/ReferenceTranslation.jsx b/src/components/common/ReferenceTranslation.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Chip } from '@mui/material';
+import {
+  LocalOffer as LocalOfferIcon, Link as LinkIcon,
+} from '@mui/icons-material';
+import { toFullAPIURL, copyURL } from '../../common/utils';
+
+const ReferenceTranslation = props => {
+  const isReference = !props.notReference
+  const isResolved = Boolean(props.last_resolved_at)
+  const type = props.reference_type;
+  const expression = isResolved ? props.translation : `${props.translation} (unresolved)`;
+  let icon = <span />;
+  if(type && type.toLowerCase() === 'mappings')
+    icon = <LinkIcon fontSize="small" />;
+  else if(type && type.toLowerCase() === 'concepts')
+    icon = <LocalOfferIcon fontSize='small' color='primary' />;
+
+  const chip = <Chip
+                 className='clickable'
+                 icon={icon}
+                 label={expression}
+                 variant='outlined'
+                 color='primary'
+                 style={{border: 'none'}}
+                 classes={{label: 'chip-label-wrapped'}}
+               />
+  return (
+    <span style={{display: 'flex', alignItems: 'center'}}>
+      <a href={toFullAPIURL(props.uri)} target='_blank' rel='noopener noreferrer'>
+        {chip}
+      </a>
+      {
+        isReference &&
+          <Chip size='small' color='primary' variant='outlined' label='copy expression' onClick={() => copyURL(toFullAPIURL(props.expression))} style={{marginLeft: '5px'}} />
+
+      }
+    </span>
+  )
+}
+
+export default ReferenceTranslation;
diff --git a/src/components/repos/RepoHome.jsx b/src/components/repos/RepoHome.jsx
@@ -33,10 +33,9 @@ const RepoHome = () => {
     {key: 'concepts', label: t('concept.concepts')},
     {key: 'mappings', label: t('mapping.mappings')},
   ]
-  const TAB_KEYS = TABS.map(tab => tab.key)
-  const findTab = () => TAB_KEYS.includes(params?.tab || params?.repoVersion) ? params.tab || params.repoVersion : 'concepts'
-  const versionFromURL = (TAB_KEYS.includes(params?.repoVersion) ? '' : params.repoVersion) || ''
-  const [tab, setTab] = React.useState(findTab)
+  const isCollection = params.repoType === 'collections'
+
+  const [tabs, setTabs] = React.useState(isCollection ? [...TABS, {key: 'references', label: t('reference.references')}] : [...TABS])
   const [status, setStatus] = React.useState(false)
   const [repo, setRepo] = React.useState(false)
   const [owner, setOwner] = React.useState(false)
@@ -51,6 +50,11 @@ const RepoHome = () => {
   const [releaseVersion, setReleaseVersion] = React.useState(false)
   const [showSummary, setShowSummary] = React.useState(true)
 
+  const TAB_KEYS = tabs.map(tab => tab.key)
+  const findTab = () => TAB_KEYS.includes(params?.tab || params?.repoVersion) ? params.tab || params.repoVersion : 'concepts'
+  const versionFromURL = (TAB_KEYS.includes(params?.repoVersion) ? '' : params.repoVersion) || ''
+
+  const [tab, setTab] = React.useState(findTab)
   const { setAlert } = React.useContext(OperationsContext);
 
   const getURL = () => ((toParentURI(location.pathname) + '/').replace('//', '/') + versionFromURL + '/').replace('//', '/')
@@ -65,6 +69,11 @@ const RepoHome = () => {
       setRepo(_repo)
       fetchOwner()
       fetchRepoSummary()
+      if(isCollection)
+        setTabs([...TABS, {key: 'references', label: t('reference.references')}])
+      else
+        setTabs([...TABS])
+
       if(isConceptURL || isMappingURL)
         setShowItem(true)
     })
@@ -101,6 +110,8 @@ const RepoHome = () => {
               setTab('concepts')
           if(location.pathname.includes('/mappings'))
               setTab('mappings')
+        if(location.pathname.includes('/references'))
+          setTab('references')
       }
     fetchRepo()
     fetchVersions()
@@ -112,7 +123,7 @@ const RepoHome = () => {
     let url = version.version_url
     if(reload && version?.version === 'HEAD')
       url += 'HEAD/'
-    history.push(url + tab)
+    history.push(url + (tab || 'concepts'))
   }
 
   const onTabChange = (event, newTab) => {
@@ -204,11 +215,14 @@ const RepoHome = () => {
 
   const isConceptURL = tab === 'concepts'
   const isMappingURL = tab === 'mappings'
+  const isReferenceURL = tab === 'references'
   const getConceptURLFromMainURL = () => (isConceptURL && params.resource) ? getURL() + 'concepts/' + params.resource + '/' : false
   const getMappingURLFromMainURL = () => (isMappingURL && params.resource) ? getURL() + 'mappings/' + params.resource + '/' : false
+  const getReferenceURLFromMainURL = () => (isReferenceURL && params.resource) ? getURL() + 'references/' + params.resource + '/' : false
   const showConceptURL = ((showItem?.concept_class || params.resource) && isConceptURL) ? showItem?.version_url || showItem?.url || getConceptURLFromMainURL() : false
   const showMappingURL = ((showItem?.map_type || params.resource) && isMappingURL) ? showItem?.version_url || showItem?.url || getMappingURLFromMainURL() : false
-  const isSplitView = conceptForm || mappingForm || showConceptURL || showMappingURL || versionForm
+  const showReferenceURL = ((showItem?.expression || params.resource) && isReferenceURL) ? showItem?.version_url || showItem?.url || getReferenceURLFromMainURL() : false
+  const isSplitView = conceptForm || mappingForm || showConceptURL || showMappingURL || showReferenceURL || versionForm
 
   const onVersionEditClick = () => isVersion && setVersionForm(true)
   const onReleaseVersionClick = () => isVersion && setReleaseVersion(true)
@@ -233,9 +247,9 @@ const RepoHome = () => {
                 onReleaseVersionClick={() => onReleaseVersionClick()}
               />
               <div className='padding-0 col-xs-12' style={{width: isSplitView ? '100%' : (showSummary ? 'calc(100% - 272px)' : 'calc(100% - 12px)')}}>
-                <CommonTabs TABS={TABS} value={tab} onChange={onTabChange} />
+                <CommonTabs TABS={tabs} value={tab} onChange={onTabChange} />
                 {
-                  repo?.id && ['concepts', 'mappings'].includes(tab) &&
+                  repo?.id && ['concepts', 'mappings', 'references'].includes(tab) &&
                     <Search
                       loading={loading}
                       summary={repoSummary || repo?.summary}
diff --git a/src/components/search/ResultConstants.js b/src/components/search/ResultConstants.js
@@ -9,6 +9,9 @@ import OwnerIcon from '../common/OwnerIcon';
 import RepoVersionButton from '../repos/RepoVersionButton';
 import FromAndTargetSource from '../mappings/FromAndTargetSource'
 import ConceptCell from '../mappings/ConceptCell'
+import ReferenceChip from '../common/ReferenceChip';
+import ReferenceTranslation from '../common/ReferenceTranslation';
+
 
 const getLocale = (concept, synonym) => {
   let cleaned = synonym.replaceAll('<em>', '').replaceAll('</em>', '')
@@ -48,6 +51,11 @@ export const ALL_COLUMNS = {
     {id: 'mapType', labelKey: 'mapping.map_type', value: 'map_type', sortable: true},
     {id: 'toConcept', labelKey: 'mapping.toConcept', value: 'toConceptCode', className: 'searchable', sortable: false, renderer: item => <ConceptCell mapping={item} direction='to' />},
   ],
+  references: [
+    {id: 'expression', labelKey: 'reference.reference', value: 'expression', sortable: false, translation: true, renderer: (reference, translation) => translation ? <ReferenceTranslation {...reference} /> : <ReferenceChip {...reference} />},
+    {id: 'concepts', labelKey: 'concept.concepts', value: 'concepts', sortable: false, align: 'center', renderer: reference => reference.last_resolved_at ? <ReferenceChip uri={reference.uri + 'concepts/'} reference_type='concepts' last_resolved_at expression={reference.concepts} notReference /> : '-'},
+    {id: 'mappings', labelKey: 'mapping.mappings', value: 'mappings', sortable: false, align: 'center', renderer: reference => reference.last_resolved_at ? <ReferenceChip uri={reference.uri + 'mappings/'} reference_type='mappings' last_resolved_at expression={reference.mappings} notReference /> : '-'}
+  ],
   repos: [
     {id: 'id', labelKey: 'common.id', value: 'id', sortOn: 'id', className: 'searchable'},
     {id: 'name', labelKey: 'common.name', value: 'name', sortOn: 'name', className: 'searchable'},
diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
@@ -235,7 +235,7 @@ const Search = props => {
     setResult(prev => {
       return {...prev, [__resource]: {...result[__resource], results: []}}
     })
-    if(['users', 'orgs'].includes(__resource))
+    if(['users', 'orgs', 'references'].includes(__resource))
       params.verbose = true
     APIService.new().overrideURL(getURL(__resource)).get(null, null, params).then(response => {
       if(response?.detail) {
diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
@@ -241,6 +241,10 @@
     "fromAndTargetSource": "From and target Source",
     "edit_mapping": "Edit Mapping"
   },
+  "reference": {
+    "references": "References",
+    "reference": "Reference"
+  },
   "checksums": {
     "standard": "Standard Checksum",
     "smart": "Smart Checksum"
@@ -403,6 +407,7 @@
     "filters": "Filters",
     "concepts": "Concepts",
     "mappings": "Mappings",
+    "references": "References",
     "repos": "Repositories",
     "orgs": "Organizations",
     "users": "Users",
