OpenConceptLab/ocl_issues#1854 | Reference List

.eslintrc.json

@@ -256,7 +256,8 @@
           "unversioned",
           "reranker",
           "lte",
-          "gte"
+          "gte",
+          "resourceversions"
         ],
         "skipIfMatch": [
           "http://[^s]*",

src/components/common/ReferenceChip.jsx

@@ -3,10 +3,9 @@ import { Chip } from '@mui/material';
 import {
   LocalOffer as LocalOfferIcon, Link as LinkIcon,
 } from '@mui/icons-material';
-import { toFullAPIURL, copyURL } from '../../common/utils';
+import { toFullAPIURL } 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)`;
@@ -29,18 +28,6 @@ const ReferenceChip = props => {
       <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>
   )
 }

src/components/common/ReferenceTranslation.jsx

@@ -3,10 +3,9 @@ import { Chip } from '@mui/material';
 import {
   LocalOffer as LocalOfferIcon, Link as LinkIcon,
 } from '@mui/icons-material';
-import { toFullAPIURL, copyURL } from '../../common/utils';
+import { toFullAPIURL } 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)`;
@@ -22,19 +21,14 @@ const ReferenceTranslation = props => {
                  label={expression}
                  variant='outlined'
                  color='primary'
-                 style={{border: 'none'}}
+                 sx={{border: 'none', ...props.chipSx}}
                  classes={{label: 'chip-label-wrapped'}}
                />
   return (
-    <span style={{display: 'flex', alignItems: 'center'}}>
+    <span style={{display: 'flex', alignItems: 'center', ...props.style}}>
       <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>
   )
 }

src/components/common/ReferenceTypeChips.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Chip from '@mui/material/Chip'
+import { useTranslation } from 'react-i18next'
+
+
+const ReferenceTypeChips = ({ reference }) => {
+  const { t } = useTranslation()
+  return (
+    <span>
+    {
+      reference.include === false &&
+        <Chip color='error' size='small' label={t('reference.exclude')} />
+    }
+      {
+        reference.transform?.toLowerCase() === 'extensional'  &&
+          <Chip color='primary' size='small' label={t('reference.extensional')} />
+      }
+      {
+        ['resourceversions', 'intensional'].includes(reference.transform?.toLowerCase())  &&
+          <Chip color='primary' size='small' label={t('reference.intensional')} />
+      }
+      {
+        reference.cascade  &&
+          <Chip color='success' size='small' label={t('reference.cascade')} />
+      }
+      {
+        !reference.last_resolved_at && !reference.concepts && !reference.mappings &&
+          <Chip color='gray' size='small' label={t('reference.unresolved')} />
+      }
+    </span>
+  )
+}
+
+export default ReferenceTypeChips

src/components/search/ResultConstants.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import find from 'lodash/find'
+import map from 'lodash/map'
+import isNumber from 'lodash/isNumber'
 import {
   formatDate,
   formatWebsiteLink,
 } from '../../common/utils';
 import Retired from '../common/Retired';
 import OwnerIcon from '../common/OwnerIcon';
 import RepoVersionButton from '../repos/RepoVersionButton';
+import RepoChip from '../repos/RepoChip';
 import FromAndTargetSource from '../mappings/FromAndTargetSource'
 import ConceptCell from '../mappings/ConceptCell'
 import ReferenceChip from '../common/ReferenceChip';
 import ReferenceTranslation from '../common/ReferenceTranslation';
+import ReferenceTypeChips from '../common/ReferenceTypeChips'
 
 
 const getLocale = (concept, synonym) => {
@@ -20,6 +24,26 @@ const getLocale = (concept, synonym) => {
   return <div>{locale?.locale ? `[${locale.locale}] ${[locale.name]}` : cleaned}</div>
 }
 
+const getReferenceSummary = (reference) => {
+  let label = '';
+  if(reference.last_resolved_at && reference.concepts === 0 && reference.mappings === 0) {
+    if(reference.reference_type === 'mappings')
+      return '0 mappings'
+    if(reference.reference_type === 'concepts')
+      return '0 concepts'
+    return '0 concepts, 0 mappings'
+  }
+  if(isNumber(reference.concepts) && reference.concepts > 0)
+    label += `${reference.concepts.toLocaleString()} concepts`
+  if(isNumber(reference.mappings) && reference.mappings > 0) {
+    if(label?.length)
+      label += ', '
+    label += `${reference.mappings.toLocaleString()} mappings`
+  }
+
+  return label
+}
+
 
 export const ALL_COLUMNS = {
   concepts: [
@@ -52,9 +76,26 @@ export const ALL_COLUMNS = {
     {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 /> : '-'}
+    {
+      id: 'expression',
+      labelKey: 'reference.expression',
+      value: 'expression',
+      sortable: false,
+      translation: true,
+      renderer: (reference, translation) => translation ?
+        <ReferenceTranslation
+          {...reference}
+          style={{maxWidth: '400px', flexWrap: 'wrap'}}
+        /> :
+      <ReferenceChip {...reference} />
+    },
+    {id: 'ref_types', labelKey: 'reference.reference_type', value: 'ref_type', sortable: false, renderer: (reference) => <ReferenceTypeChips reference={reference} />},
+    {id: 'resolved_repo_versions', labelKey: 'reference.resolved_repo', value: 'resolved_repo_versions', sortable: false, renderer: (reference) => {
+      return map(reference?.resolved_repo_versions, (version, index) => {
+        return <RepoChip hideType size='small' key={index} repo={version} sx={{margin: '2px'}} />
+      })
+    }},
+    {id: 'summary', labelKey: 'common.results', value: 'summary', sortable: false, renderer: reference => reference.last_resolved_at ? getReferenceSummary(reference) : '-'},
   ],
   repos: [
     {id: 'id', labelKey: 'common.id', value: 'id', sortOn: 'id', className: 'searchable'},

src/components/search/Search.jsx

@@ -272,6 +272,8 @@ const Search = props => {
     })
     if(['users', 'orgs', 'references'].includes(__resource))
       params.verbose = true
+    if(__resource === 'references')
+      params.includeResolvedRepoVersions = true
     APIService.new().overrideURL(getURL(__resource)).get(null, null, params).then(response => {
       if(response?.detail) {
         setAlert({message: response.detail, severity: 'error', duration: 5000})

src/components/search/TableResults.jsx

@@ -8,6 +8,8 @@ import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableSortLabel from '@mui/material/TableSortLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 import Checkbox from '@mui/material/Checkbox';
 import Skeleton from '@mui/material/Skeleton'
 import { visuallyHidden } from '@mui/utils';
@@ -17,7 +19,7 @@ import { ALL_COLUMNS } from './ResultConstants';
 
 const EnhancedTableHead = props => {
   const { t } = useTranslation()
-  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort, columns } = props;
+  const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort, columns, refTranslation, setRefTranslation } = props;
   const createSortHandler = property => event => {
     onRequestSort(event, property);
   };
@@ -54,20 +56,43 @@ const EnhancedTableHead = props => {
                 sortDirection={orderBy === headCell.id ? order : false}
                 sx={{background: 'inherit', ...headCell.sx}}
               >
-                <TableSortLabel
-                  active={orderBy === headCell.id}
-                  direction={orderBy === headCell.id ? order : 'asc'}
-                  onClick={headCell?.sortable === false ? undefined : createSortHandler(headCell.sortBy ? headCell.sortBy : headCell.id)}
-                >
-                  <b>{label}</b>
-                  {
-                    orderBy === headCell.id ? (
-                      <Box component="span" sx={visuallyHidden}>
-                        {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                      </Box>
-                    ) : null
-                  }
-                </TableSortLabel>
+                {
+                  headCell?.translation ?
+                    <span>
+                                    <span><b>{label}</b></span>
+                                    <span style={{marginLeft: '16px'}}>
+                                      <FormControlLabel
+                                        size='small'
+                                        control={
+                                          <Switch
+                                            color="primary"
+                                            size='small'
+                                            checked={refTranslation}
+                                            onChange={event => setRefTranslation(event.target.checked)} />
+                                        }
+                                        label={
+                                          <span style={{fontSize: '12px', marginLeft: '5px'}}>
+                                            {refTranslation ? t('reference.raw') : t('reference.translation')}
+                                          </span>
+                                        }
+                                      />
+                                    </span>
+                    </span> :
+                  <TableSortLabel
+                    active={orderBy === headCell.id}
+                    direction={orderBy === headCell.id ? order : 'asc'}
+                    onClick={headCell?.sortable === false ? undefined : createSortHandler(headCell.sortBy ? headCell.sortBy : headCell.id)}
+                  >
+                    <b>{label}</b>
+                    {
+                      orderBy === headCell.id ? (
+                        <Box component="span" sx={visuallyHidden}>
+                          {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                        </Box>
+                      ) : null
+                    }
+                  </TableSortLabel>
+                }
               </TableCell>
             )
           })}
@@ -77,13 +102,14 @@ const EnhancedTableHead = props => {
 }
 
 const TableResults = ({selected, bgColor, handleClick, handleRowClick, handleSelectAllClick, results, resource, nested, isSelected, isItemShown, order, orderBy, className, style, onOrderByChange, selectedToShowItem, size, excludedColumns, extraColumns, properties, propertyFilters, loading}) => {
+  const [refTranslation, setRefTranslation] = React.useState(true)
   const rows = results?.results || []
   const getValue = (row, column) => {
     let val = get(row, column.value)
     if(column.formatter)
       return column.formatter(val)
     if(column.renderer)
-      return column.translation ? column.renderer(row, column.translation) : column.renderer(row, Boolean(selectedToShowItem))
+      return column.translation ? column.renderer(row, refTranslation) : column.renderer(row, Boolean(selectedToShowItem))
     return val
   }
 
@@ -156,6 +182,8 @@ const TableResults = ({selected, bgColor, handleClick, handleRowClick, handleSel
           rowCount={rows.length || 0}
           resource={resource}
           columns={columns}
+          refTranslation={refTranslation}
+          setRefTranslation={setRefTranslation}
         />
         <TableBody>
           {

src/i18n/locales/en/translations.json

@@ -136,7 +136,8 @@
     "copy_api_url": "Copy API URL",
     "copy_standard_checksum": "Copy Standard Checksum",
     "copy_smart_checksum": "Copy Smart Checksum",
-    "committed": "committed"
+    "committed": "committed",
+    "results": "Results"
   },
   "errors": {
     "404": "Sorry your page could not be found.",
@@ -251,8 +252,17 @@
     "edit_mapping": "Edit Mapping"
   },
   "reference": {
+    "expression": "Expression",
     "references": "References",
-    "reference": "Reference"
+    "reference": "Reference",
+    "reference_type": "Ref Type",
+    "exclude": "Exclude",
+    "intensional": "Intensional",
+    "extensional": "Extensional",
+    "cascade": "Cascade",
+    "resolved_repo": "Resolved Repo",
+    "raw": "Raw",
+    "translation": "Translation"
   },
   "checksums": {
     "standard": "Standard Checksum",