OpenConceptLab · snyaggarwal · Apr 22, 2026 · Apr 28, 2026 · Apr 28, 2026 · Apr 28, 2026
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -256,7 +256,8 @@
           "unversioned",
           "reranker",
           "lte",
-          "gte"
+          "gte",
+          "resourceversions"
         ],
         "skipIfMatch": [
           "http://[^s]*",

diff --git a/src/components/common/Breadcrumbs.jsx b/src/components/common/Breadcrumbs.jsx
@@ -2,15 +2,16 @@ import React from 'react';
 import RepoIcon from '../repos/RepoIcon';
 import ConceptIcon from '../concepts/ConceptIcon';
 import MappingIcon from '../mappings/MappingIcon';
+import ReferenceIcon from '@mui/icons-material/PentagonRounded';
 import DotSeparator from './DotSeparator'
 import RepoVersionButton from '../repos/RepoVersionButton'
 import RepoTooltip from '../repos/RepoTooltip'
 import Box from '@mui/material/Box';
 import OwnerButton from './OwnerButton'
 
-const Breadcrumbs = ({owner, ownerType, repo, repoVersion, repoURL, concept, mapping, noIcons, color, fontSize, size, ownerURL, nested}) => {
+const Breadcrumbs = ({owner, ownerType, repo, repoVersion, repoURL, concept, mapping, reference, noIcons, color, fontSize, size, ownerURL, nested}) => {
   const iconProps = {color: 'secondary', style: {marginRight: '8px', width: '0.8em'}}
-  const hideParents = Boolean((concept?.id || mapping?.id) && nested)
+  const hideParents = Boolean((concept?.id || mapping?.id || reference.id) && nested)
   return (
     <Box className='col-xs-12 padding-0' sx={{display: 'flex', alignItems: 'center', color: color, fontSize: fontSize}}>
       {
@@ -125,6 +126,28 @@ const Breadcrumbs = ({owner, ownerType, repo, repoVersion, repoURL, concept, map
             </span>
           </React.Fragment>
       }
+      {
+        reference?.id &&
+          <React.Fragment>
+            {!hideParents && <DotSeparator />}
+            {
+              !noIcons &&
+                <ReferenceIcon
+                  {...iconProps}
+                  color={reference.include ? 'primary' : 'error'}
+                />
+            }
+            <span className='searchable' style={{
+              maxWidth: hideParents ? 'calc(100% - 125px)' : '125px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              fontSize: '14px',
+              whiteSpace: 'nowrap',
+            }}>
+              {reference.id}
+            </span>
+          </React.Fragment>
+      }
     </Box>
   )
 }

diff --git a/src/components/concepts/Associations.jsx b/src/components/concepts/Associations.jsx
@@ -31,7 +31,7 @@ const groupMappings = (orderedMappings, concept, mappings, forward) => {
       if(!mapType)
         mapType = forward ? 'children' : 'parent';
       orderedMappings[mapType] = orderedMappings[mapType] || {order: null, direct: [], indirect: [], unknown: [], hierarchy: [], reverseHierarchy: [], self: []}
-      const isSelfMapping = isMapping && dropVersion(concept.url) === dropVersion(resource.cascade_target_concept_url) && toParentURI(concept.url) === dropVersion(resource.cascade_target_concept_url)
+      const isSelfMapping = isMapping && dropVersion(concept?.url) === dropVersion(resource.cascade_target_concept_url) && concept?.url && toParentURI(concept.url) === dropVersion(resource.cascade_target_concept_url)
       let _resource = isMapping ? {...resource, isSelf: isSelfMapping, cascade_target_concept_name: resource.cascade_target_concept_name || get(find(mappings, m => dropVersion(m.url) === dropVersion(resource.cascade_target_concept_url)), 'display_name')} : {...resource, cascade_target_concept_name: resource.display_name}
       if(isSelfMapping) {
         if(!map(orderedMappings[mapType].self, 'id').includes(resource.id))
@@ -131,7 +131,7 @@ const AssociationRow = ({mappings, id, mapType, isSelf, isIndirect, hide}) => {
 
 
 const borderColor = 'rgba(0, 0, 0, 0.12)'
-const Associations = ({concept, mappings, reverseMappings, ownerMappings, reverseOwnerMappings, onLoadOwnerMappings, loadingOwnerMappings}) => {
+const Associations = ({concept, mappings, reverseMappings, ownerMappings, reverseOwnerMappings, onLoadOwnerMappings, loadingOwnerMappings, nested}) => {
   const [scope, setScope] = React.useState('repo')
   const [orderedMappings, setOrderedMappings] = React.useState({});
   const [orderedOwnerMappings, setOrderedOwnerMappings] = React.useState({});
@@ -190,7 +190,9 @@ const Associations = ({concept, mappings, reverseMappings, ownerMappings, revers
   const toggleSection = repoURI => setCollapsedSections(collapsedSections?.includes(repoURI) ? without(collapsedSections, repoURI) : [...collapsedSections, repoURI])
 
   return (
-    <Paper className='col-xs-12 padding-0' sx={{boxShadow: 'none', border: '1px solid', borderColor: borderColor, borderRadius: '10px'}}>
+    <Paper className='col-xs-12 padding-0' sx={{boxShadow: 'none', border: nested ? 'none' : '1px solid', borderColor: borderColor, borderRadius: '10px'}}>
+      {
+      !nested &&
       <Typography component="span" sx={{borderBottom: '1px solid', borderColor: borderColor, padding: '12px 16px', fontSize: '16px', color: 'surface.contrastText', display: 'flex', justifyContent: 'space-between'}}>
         <TagCountLabel label={t('concept.associations')} count={scope === 'all' ? count : (scope === 'namespace' ? countOwnerMappings : count - countOwnerMappings)}/>
         <ButtonGroup size='small' color='secondary'>
@@ -205,6 +207,7 @@ const Associations = ({concept, mappings, reverseMappings, ownerMappings, revers
           </Button>
         </ButtonGroup>
       </Typography>
+      }
       <TableContainer sx={{ maxHeight: 400, borderRadius: '10px' }}>
         <Table stickyHeader size='small'>
           <TableHead>

diff --git a/src/components/references/ReferenceDetails.jsx b/src/components/references/ReferenceDetails.jsx
@@ -0,0 +1,134 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next';
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableRow from '@mui/material/TableRow'
+import TableCell from '@mui/material/TableCell'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import { startCase, isString, isPlainObject, map } from 'lodash'
+import { formatDateTime } from '../../common/utils'
+import Link from '../common/Link'
+
+
+const borderColor = 'rgba(0, 0, 0, 0.12)'
+
+const ReferenceDetails = ({ reference, style }) => {
+  const { t } = useTranslation()
+  const getCascadeDetails = () => {
+    if(!reference?.cascade)
+      return {}
+    if(isString(reference.cascade))
+      return {method: reference.cascade}
+    if(isPlainObject(reference.cascade))
+      return reference.cascade
+    return {}
+  }
+  return (
+    <div className='col-xs-12' style={{padding: '16px 0', height: 'calc(100vh - 280px)', overflow: 'auto', ...style}}>
+      <Paper className='col-xs-12 padding-0' sx={{boxShadow: 'none', border: '1px solid', borderColor: borderColor, borderRadius: '10px'}}>
+        <Typography component='span' sx={{borderBottom: '1px solid', borderColor: borderColor, padding: '12px 16px', fontSize: '16px', color: 'surface.contrastText', display: 'flex', justifyContent: 'space-between', fontWeight: 'bold'}}>
+          {t('reference.details')}
+        </Typography>
+        <Table size='small'>
+      <TableBody sx={{ '.MuiTableRow-root': {'&:last-child td': {border: 0, borderRadius: '10px'}} }}>
+        <TableRow>
+          <TableCell style={{fontSize: '0.875rem', width: '150px'}}>
+            {t('reference.type')}
+          </TableCell>
+          <TableCell style={{fontSize: '0.875rem'}}>
+            {startCase(reference.reference_type)}
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell style={{fontSize: '0.875rem', width: '150px'}}>
+            {t('reference.translation')}
+          </TableCell>
+          <TableCell style={{fontSize: '0.875rem'}}>
+            {reference.translation}
+          </TableCell>
+        </TableRow>
+        {
+          map(getCascadeDetails(), (value, key) => {
+            let val = isPlainObject(value) ? <span style={{whiteSpace: 'pre'}}>{JSON.stringify(value, undefined, 2)}</span> : value
+            return (
+              <TableRow key={key}>
+              <TableCell style={{fontSize: '0.875rem', width: '150px'}}>
+                {`Cascade ${startCase(key)}`}
+              </TableCell>
+              <TableCell style={{fontSize: '0.875rem'}}>
+                {val}
+              </TableCell>
+              </TableRow>
+            )
+          })
+        }
+        {
+          Boolean(reference.transform) &&
+            <TableRow>
+              <TableCell style={{fontSize: '0.875rem', width: '150px'}}>
+                {t('reference.transform')}
+              </TableCell>
+              <TableCell style={{fontSize: '0.875rem'}}>
+                {
+                  ['resourceversions', 'intensional'].includes(reference.transform?.toLowerCase()) ?
+                    t('reference.intensional') :
+                    (
+                      reference.transform?.toLowerCase() === 'extensional' ?
+                        t('reference.extensional') :
+                        reference.transform
+                    )
+                }
+              </TableCell>
+            </TableRow>
+        }
+      </TableBody>
+    </Table>
+      </Paper>
+      {
+        reference.filter?.length > 0 &&
+          <Paper className='col-xs-12 padding-0' sx={{boxShadow: 'none', border: '1px solid', borderColor: borderColor, borderRadius: '10px', marginTop: '16px'}}>
+        <Typography component='span' sx={{borderBottom: '1px solid', borderColor: borderColor, padding: '12px 16px', fontSize: '16px', color: 'surface.contrastText', display: 'flex', justifyContent: 'space-between', fontWeight: 'bold'}}>
+        {t('repo.filters')}
+        </Typography>
+        <Table size='small'>
+          <TableBody sx={{ '.MuiTableRow-root': {'&:last-child td': {border: 0, borderRadius: '10px'}} }}>
+            {
+              map(reference.filter, (refFilter, index) => {
+                return (
+                  <TableRow key={index}>
+                    <TableCell style={{fontSize: '0.875rem', width: '150px'}}>
+                      {refFilter?.property} {refFilter?.op}
+                    </TableCell>
+                    <TableCell style={{fontSize: '0.875rem'}}>
+                      {refFilter?.value}
+                    </TableCell>
+                  </TableRow>
+                )
+              })
+            }
+        </TableBody>
+        </Table>
+        </Paper>
+      }
+      <div className='col-xs-12 padding-0' style={{marginTop: '32px'}}>
+        <Typography component='span' sx={{display: 'inline-flex', alignItems: 'center', padding: 0, fontSize: '12px', color: 'surface.contrastText', width: '100%', }}>
+          {
+            `${t('reference.last_resolved_at')} `
+          }
+          {
+            reference.last_resolved_at ? formatDateTime(reference.last_resolved_at) : <i style={{marginLeft: '8px'}}> -</i>
+          }
+        </Typography>
+        <Typography component='span' sx={{display: 'inline-flex', alignItems: 'center', padding: 0, fontSize: '12px', color: 'surface.contrastText', width: '100%', }}>
+          {t('common.created_on')} {
+            <>{formatDateTime(reference.created_at)} {t('common.by')} <Link sx={{fontSize: '12px', justifyContent: 'flex-start', padding: '0 0 0 2px', lineHeight: 'normal'}} href={`#/users/${reference.created_by}`} label={reference.created_by} /></>
+          }
+        </Typography>
+
+      </div>
+    </div>
+  )
+}
+
+export default ReferenceDetails;