From 185f4403e67619cd10029132f0c62988ecda1ff4 Mon Sep 17 00:00:00 2001
From: Joseph Amlung <jamlung@regenstrief.org>
Date: Tue, 5 May 2026 11:04:11 -0400
Subject: [PATCH 1/5] Remove reference first pass

---
 .../collections/DeleteReferencesDialog.jsx    |  45 ++++++
 .../RemoveFromCollectionDialog.jsx            | 140 ++++++++++++++++++
 src/components/common/ResourceReferences.jsx  |  39 +++++
 src/components/concepts/ConceptDetails.jsx    |   2 +
 src/components/concepts/ConceptHome.jsx       |  34 ++++-
 src/components/mappings/MappingDetails.jsx    |   2 +
 src/components/mappings/MappingHome.jsx       |  34 ++++-
 src/components/search/Search.jsx              | 102 ++++++++++++-
 src/components/search/SearchResults.jsx       |   5 +-
 src/i18n/locales/en/translations.json         |  15 +-
 10 files changed, 411 insertions(+), 7 deletions(-)
 create mode 100644 src/components/collections/DeleteReferencesDialog.jsx
 create mode 100644 src/components/collections/RemoveFromCollectionDialog.jsx
 create mode 100644 src/components/common/ResourceReferences.jsx

diff --git a/src/components/collections/DeleteReferencesDialog.jsx b/src/components/collections/DeleteReferencesDialog.jsx
new file mode 100644
index 00000000..558f11b0
--- /dev/null
+++ b/src/components/collections/DeleteReferencesDialog.jsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import CircularProgress from '@mui/material/CircularProgress'
+
+const DeleteReferencesDialog = ({ open, onClose, onConfirm, references, loading }) => {
+  const { t } = useTranslation()
+  const conceptsCount = references.reduce((sum, r) => sum + (r.concepts || 0), 0)
+  const mappingsCount = references.reduce((sum, r) => sum + (r.mappings || 0), 0)
+  const referenceIds = references.map(r => r.id).filter(Boolean)
+
+  return (
+    <Dialog open={open} onClose={loading ? undefined : onClose} maxWidth='sm' fullWidth>
+      <DialogTitle>
+        {t('reference.remove_confirm_title', { count: references.length })}
+      </DialogTitle>
+      <DialogContent>
+        <Typography>
+          {t('reference.remove_confirm_body', { concepts: conceptsCount, mappings: mappingsCount })}
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} variant='text' disabled={loading}>
+          {t('common.cancel')}
+        </Button>
+        <Button
+          onClick={() => onConfirm({ ids: referenceIds })}
+          variant='contained'
+          color='error'
+          disabled={loading || referenceIds.length === 0}
+          startIcon={loading ? <CircularProgress size={16} color='inherit' /> : null}
+        >
+          {t('common.remove')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default DeleteReferencesDialog
diff --git a/src/components/collections/RemoveFromCollectionDialog.jsx b/src/components/collections/RemoveFromCollectionDialog.jsx
new file mode 100644
index 00000000..a74112de
--- /dev/null
+++ b/src/components/collections/RemoveFromCollectionDialog.jsx
@@ -0,0 +1,140 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Checkbox from '@mui/material/Checkbox'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import CircularProgress from '@mui/material/CircularProgress'
+import APIService from '../../services/APIService'
+
+const getResourceLabel = resource => {
+  if(resource.display_name) return resource.display_name
+  if(resource.map_type) return `${resource.from_concept_code || ''} [${resource.map_type}] ${resource.to_concept_code || ''}`
+  return resource.id
+}
+
+const getResourcePath = resource => resource.concept_class !== undefined ? 'concepts' : 'mappings'
+
+const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, collectionUrl, loading }) => {
+  const { t } = useTranslation()
+  const [fetchingRefs, setFetchingRefs] = React.useState(false)
+  const [resourcesWithRefs, setResourcesWithRefs] = React.useState([])
+  const [checkedRefIds, setCheckedRefIds] = React.useState(new Set())
+
+  React.useEffect(() => {
+    if(!open || !resources?.length || !collectionUrl) return
+    setFetchingRefs(true)
+    setResourcesWithRefs([])
+    setCheckedRefIds(new Set())
+
+    Promise.all(
+      resources.map(resource =>
+        APIService.new()
+          .overrideURL(`${collectionUrl}${getResourcePath(resource)}/${encodeURIComponent(resource.id)}/`)
+          .get(null, null, { includeReferences: true })
+          .then(response => ({ resource, references: response?.data?.references || [] }))
+          .catch(() => ({ resource, references: [] }))
+      )
+    ).then(results => {
+      setResourcesWithRefs(results)
+      const allIds = new Set()
+      results.forEach(({ references }) => references.forEach(ref => ref.id && allIds.add(ref.id)))
+      setCheckedRefIds(allIds)
+      setFetchingRefs(false)
+    })
+  }, [open])
+
+  const onToggleRef = refId => {
+    setCheckedRefIds(prev => {
+      const next = new Set(prev)
+      if(next.has(refId)) next.delete(refId)
+      else next.add(refId)
+      return next
+    })
+  }
+
+  const showGroupHeaders = resourcesWithRefs.length > 1
+  const checkedCount = checkedRefIds.size
+  const isDisabled = loading || fetchingRefs || checkedCount === 0
+
+  return (
+    <Dialog open={open} onClose={loading ? undefined : onClose} maxWidth='sm' fullWidth>
+      <DialogTitle>
+        {t('reference.remove_from_collection')}
+      </DialogTitle>
+      <DialogContent>
+        {fetchingRefs ? (
+          <Box sx={{display: 'flex', justifyContent: 'center', alignItems: 'center', py: 3, gap: 1}}>
+            <CircularProgress size={20} />
+            <Typography variant='body2' color='text.secondary'>{t('common.loading')}</Typography>
+          </Box>
+        ) : (
+          <List dense disablePadding sx={{border: '1px solid rgba(0,0,0,0.12)', borderRadius: '4px'}}>
+            {resourcesWithRefs.map(({ resource, references }, groupIndex) => (
+              <React.Fragment key={resource.id}>
+                {showGroupHeaders && (
+                  <ListItem sx={{bgcolor: 'rgba(0,0,0,0.04)', px: 1.5, py: 0.5, borderTop: groupIndex > 0 ? '1px solid rgba(0,0,0,0.12)' : 'none'}}>
+                    <Typography sx={{fontSize: '13px', fontWeight: 'bold'}}>{getResourceLabel(resource)}</Typography>
+                  </ListItem>
+                )}
+                {references.length === 0 ? (
+                  <ListItem sx={{pl: showGroupHeaders ? 3 : 1.5, py: 0.5}}>
+                    <Typography sx={{fontSize: '12px', color: 'text.secondary', fontStyle: 'italic'}}>{t('reference.no_references_found')}</Typography>
+                  </ListItem>
+                ) : (
+                  references.map((ref, refIndex) => {
+                    const isLastInGroup = refIndex === references.length - 1
+                    const isLastGroup = groupIndex === resourcesWithRefs.length - 1
+                    return (
+                      <ListItem
+                        key={ref.id || refIndex}
+                        divider={!(isLastInGroup && isLastGroup)}
+                        sx={{padding: '2px 12px 2px 4px', pl: showGroupHeaders ? 2 : 0.5}}
+                      >
+                        <Checkbox
+                          edge='start'
+                          checked={checkedRefIds.has(ref.id)}
+                          disabled={loading || !ref.id}
+                          onChange={() => onToggleRef(ref.id)}
+                          size='small'
+                          inputProps={{'aria-label': ref.expression}}
+                        />
+                        <ListItemText
+                          primary={ref.expression}
+                          primaryTypographyProps={{sx: {fontSize: '13px', fontFamily: 'monospace', wordBreak: 'break-all'}}}
+                        />
+                      </ListItem>
+                    )
+                  })
+                )}
+              </React.Fragment>
+            ))}
+          </List>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} variant='text' disabled={loading}>
+          {t('common.cancel')}
+        </Button>
+        <Button
+          onClick={() => onConfirm({ ids: Array.from(checkedRefIds) })}
+          variant='contained'
+          color='error'
+          disabled={isDisabled}
+          startIcon={loading ? <CircularProgress size={16} color='inherit' /> : null}
+        >
+          {t('common.remove')} {!fetchingRefs && checkedCount > 0 ? `(${checkedCount})` : ''}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default RemoveFromCollectionDialog
diff --git a/src/components/common/ResourceReferences.jsx b/src/components/common/ResourceReferences.jsx
new file mode 100644
index 00000000..665ee890
--- /dev/null
+++ b/src/components/common/ResourceReferences.jsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemText from '@mui/material/ListItemText'
+import Tooltip from '@mui/material/Tooltip'
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import { map } from 'lodash'
+
+const borderColor = 'rgba(0, 0, 0, 0.12)'
+
+const ResourceReferences = ({ references, resourceType }) => {
+  const { t } = useTranslation()
+  if (!references?.length) return null
+  return (
+    <Paper className='col-xs-12 padding-0' sx={{marginTop: '16px', 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'}}>
+        <span>{t('reference.references')} ({references.length})</span>
+        <Tooltip arrow title={t('reference.brought_in_by_tooltip', { resource: resourceType || 'resource' })}>
+          <InfoOutlinedIcon fontSize='small' sx={{color: 'action.active', cursor: 'help'}} />
+        </Tooltip>
+      </Typography>
+      <List dense disablePadding>
+        {map(references, reference => (
+          <ListItem key={reference.id} divider sx={{padding: '4px 16px'}}>
+            <ListItemText
+              primary={reference.expression}
+              primaryTypographyProps={{sx: {fontSize: '13px', fontFamily: 'monospace', wordBreak: 'break-all'}}}
+            />
+          </ListItem>
+        ))}
+      </List>
+    </Paper>
+  )
+}
+
+export default ResourceReferences
diff --git a/src/components/concepts/ConceptDetails.jsx b/src/components/concepts/ConceptDetails.jsx
index 9951d5d7..5cdb2d3a 100644
--- a/src/components/concepts/ConceptDetails.jsx
+++ b/src/components/concepts/ConceptDetails.jsx
@@ -10,6 +10,7 @@ import Locales from './Locales'
 import Associations from './Associations'
 import ConceptProperties from './ConceptProperties'
 import ExternalIdLabel from '../common/ExternalIdLabel'
+import ResourceReferences from '../common/ResourceReferences'
 
 const borderColor = 'rgba(0, 0, 0, 0.12)'
 
@@ -48,6 +49,7 @@ const ConceptDetails = ({ concept, repo, mappings, reverseMappings, loading, loa
           <Associations concept={concept} mappings={mappings} reverseMappings={reverseMappings} ownerMappings={ownerMappings} reverseOwnerMappings={reverseOwnerMappings} onLoadOwnerMappings={onLoadOwnerMappings} loadingOwnerMappings={loadingOwnerMappings} />
         }
       </div>
+      <ResourceReferences references={concept?.references} resourceType='concept' />
       <div className='col-xs-12 padding-0' style={{marginTop: '32px'}}>
         {
           concept?.external_id &&
diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx
index 460e4ed1..4d41c955 100644
--- a/src/components/concepts/ConceptHome.jsx
+++ b/src/components/concepts/ConceptHome.jsx
@@ -9,6 +9,7 @@ import { toParentURI, dropVersion } from '../../common/utils'
 
 import { OperationsContext } from '../app/LayoutContext';
 import RetireConfirmDialog from '../common/RetireConfirmDialog'
+import RemoveFromCollectionDialog from '../collections/RemoveFromCollectionDialog'
 
 import ConceptHeader from './ConceptHeader';
 import ConceptTabs from './ConceptTabs';
@@ -39,13 +40,18 @@ const ConceptHome = props => {
   const [reverseOwnerMappings, setReverseOwnerMappings] = React.useState([])
 
   const [retireDialog, setRetireDialog] = React.useState(false)
+  const [removeFromCollectionDialog, setRemoveFromCollectionDialog] = React.useState(false)
+  const [removingFromCollection, setRemovingFromCollection] = React.useState(false)
   const { setAlert } = React.useContext(OperationsContext);
 
+  const isInCollection = Boolean(props.repo?.type?.includes('Collection') || props.url?.includes('/collections/'))
+
   React.useEffect(() => {
     setLoading(true)
     setConcept(props.concept || {})
     setVersions([])
-    getService().get().then(response => {
+    const queryParams = isInCollection ? { includeReferences: true } : {}
+    getService().get(null, null, queryParams).then(response => {
       const resource = response.data
       setConcept(resource)
       props.repo?.id ? setRepo(repo) : fetchRepo(resource)
@@ -215,6 +221,22 @@ const ConceptHome = props => {
     })
   }
 
+  const onRemoveFromCollection = deleteBody => {
+    const collectionUrl = props.repo?.version_url || props.repo?.url
+    const body = deleteBody || { ids: (concept.references || []).map(r => r.id).filter(Boolean) }
+    setRemovingFromCollection(true)
+    APIService.new().overrideURL(collectionUrl).appendToUrl('references/').delete(body).then(response => {
+      setRemovingFromCollection(false)
+      if(response?.status === 204 || response?.status === 200) {
+        setRemoveFromCollectionDialog(false)
+        setAlert({ severity: 'success', message: t('reference.remove_success') })
+        props.onClose && props.onClose()
+      } else {
+        setAlert({ severity: 'error', message: response?.data?.detail || t('common.generic_error') })
+      }
+    })
+  }
+
   return (concept?.id && repo?.id) ? (
     <>
       <Fade in={edit}>
@@ -243,7 +265,7 @@ const ConceptHome = props => {
             !edit &&
               <>
                 <div className='col-xs-12 padding-0'>
-                  <ConceptHeader concept={concept} onClose={props.onClose} repoURL={getRepoURL()} onEdit={() => setEdit(true)} repo={repo} nested={props.nested} loading={loading} onRetire={() => setRetireDialog(true)} />
+                  <ConceptHeader concept={concept} onClose={props.onClose} repoURL={getRepoURL()} onEdit={() => setEdit(true)} repo={repo} nested={props.nested} loading={loading} onRetire={() => setRetireDialog(true)} isInCollection={isInCollection} onRemoveFromCollection={() => setRemoveFromCollectionDialog(true)} />
                 </div>
                 <ConceptTabs tab={tab} onTabChange={(event, newTab) => onTabChange(newTab)} loading={loading} />
                 {
@@ -277,6 +299,14 @@ const ConceptHome = props => {
                   title={`${t('common.retire')} ${t('concept.concept')}`}
                   onSubmit={toggleRetire}
                 />
+                <RemoveFromCollectionDialog
+                  open={removeFromCollectionDialog}
+                  onClose={() => setRemoveFromCollectionDialog(false)}
+                  onConfirm={onRemoveFromCollection}
+                  resources={[concept]}
+                  collectionUrl={props.repo?.version_url || props.repo?.url}
+                  loading={removingFromCollection}
+                />
               </>
           }
         </div>
diff --git a/src/components/mappings/MappingDetails.jsx b/src/components/mappings/MappingDetails.jsx
index 911a6286..3f0b2959 100644
--- a/src/components/mappings/MappingDetails.jsx
+++ b/src/components/mappings/MappingDetails.jsx
@@ -12,6 +12,7 @@ import FromConceptCard from './FromConceptCard'
 import ToConceptCard from './ToConceptCard'
 import MappingIcon from './MappingIcon'
 import MappingProperties from './MappingProperties'
+import ResourceReferences from '../common/ResourceReferences'
 
 const borderColor = 'rgba(0, 0, 0, 0.12)'
 
@@ -37,6 +38,7 @@ const MappingDetails = ({ mapping }) => {
             <MappingProperties mapping={mapping} />
           </Paper>
       }
+      <ResourceReferences references={mapping?.references} resourceType='mapping' />
       <Typography component='span' sx={{display: 'inline-flex', alignItems: 'center', marginTop: '24px', padding: 0, fontSize: '12px', color: 'surface.contrastText', width: '100%'}}>
         {t('common.last_updated')} {formatDateTime(mapping.versioned_updated_on || mapping.updated_on)} {t('common.by')} <Link sx={{fontSize: '12px', justifyContent: 'flex-start', padding: '0 0 0 2px', lineHeight: 'normal'}} href={`#/users/${updatedBy}`} label={updatedBy} />
       </Typography>
diff --git a/src/components/mappings/MappingHome.jsx b/src/components/mappings/MappingHome.jsx
index de5980b9..7104c6e3 100644
--- a/src/components/mappings/MappingHome.jsx
+++ b/src/components/mappings/MappingHome.jsx
@@ -9,6 +9,7 @@ import { toParentURI, dropVersion } from '../../common/utils'
 
 import { OperationsContext } from '../app/LayoutContext';
 import RetireConfirmDialog from '../common/RetireConfirmDialog'
+import RemoveFromCollectionDialog from '../collections/RemoveFromCollectionDialog'
 import MappingHeader from './MappingHeader';
 import MappingTabs from './MappingTabs';
 import MappingDetails from './MappingDetails'
@@ -31,13 +32,18 @@ const MappingHome = props => {
   const [loading, setLoading] = React.useState(false)
 
   const [retireDialog, setRetireDialog] = React.useState(false)
+  const [removeFromCollectionDialog, setRemoveFromCollectionDialog] = React.useState(false)
+  const [removingFromCollection, setRemovingFromCollection] = React.useState(false)
   const { setAlert } = React.useContext(OperationsContext);
 
+  const isInCollection = Boolean(props.repo?.type?.includes('Collection') || props.url?.includes('/collections/'))
+
   React.useEffect(() => {
     setLoading(true)
     setMapping(props.mapping || {})
     setVersions([])
-    getService().get().then(response => {
+    const queryParams = isInCollection ? { includeReferences: true } : {}
+    getService().get(null, null, queryParams).then(response => {
       const resource = response.data
       setMapping(resource)
       props.repo?.id ? setRepo(props.repo) : fetchRepo(resource)
@@ -129,6 +135,22 @@ const MappingHome = props => {
     })
   }
 
+  const onRemoveFromCollection = deleteBody => {
+    const collectionUrl = props.repo?.version_url || props.repo?.url
+    const body = deleteBody || { ids: (mapping.references || []).map(r => r.id).filter(Boolean) }
+    setRemovingFromCollection(true)
+    APIService.new().overrideURL(collectionUrl).appendToUrl('references/').delete(body).then(response => {
+      setRemovingFromCollection(false)
+      if(response?.status === 204 || response?.status === 200) {
+        setRemoveFromCollectionDialog(false)
+        setAlert({ severity: 'success', message: t('reference.remove_success') })
+        props.onClose && props.onClose()
+      } else {
+        setAlert({ severity: 'error', message: response?.data?.detail || t('common.generic_error') })
+      }
+    })
+  }
+
   return (mapping?.id && repo?.id) ? (
     <>
       <Fade in={edit}>
@@ -154,7 +176,7 @@ const MappingHome = props => {
       <Fade in={!edit}>
         <div className='col-xs-12' style={{padding: '8px 16px 12px 16px'}}>
           <div className='col-xs-12 padding-0' style={{marginBottom: '12px'}}>
-            <MappingHeader mapping={mapping} onClose={props.onClose} repoURL={getRepoURL()} repo={repo} nested={props.nested} onEdit={() => setEdit(true)} onRetire={() => setRetireDialog(true)} />
+            <MappingHeader mapping={mapping} onClose={props.onClose} repoURL={getRepoURL()} repo={repo} nested={props.nested} onEdit={() => setEdit(true)} onRetire={() => setRetireDialog(true)} isInCollection={isInCollection} onRemoveFromCollection={() => setRemoveFromCollectionDialog(true)} />
           </div>
           <MappingTabs tab={tab} onTabChange={(event, newTab) => onTabChange(newTab)} />
           {
@@ -179,6 +201,14 @@ const MappingHome = props => {
             title={`${t('common.retire')} ${t('mapping.mapping')}`}
             onSubmit={toggleRetire}
           />
+          <RemoveFromCollectionDialog
+            open={removeFromCollectionDialog}
+            onClose={() => setRemoveFromCollectionDialog(false)}
+            onConfirm={onRemoveFromCollection}
+            resources={[mapping]}
+            collectionUrl={props.repo?.version_url || props.repo?.url}
+            loading={removingFromCollection}
+          />
         </div>
       </Fade>
     </>
diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
index 6168732b..48fcae1c 100644
--- a/src/components/search/Search.jsx
+++ b/src/components/search/Search.jsx
@@ -4,11 +4,14 @@ import { useLocation, useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next'
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import OrgIcon from '@mui/icons-material/AccountBalance';
 import UserIcon from '@mui/icons-material/Person';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import { forEach, keys, pickBy, isEmpty, find, uniq, has, orderBy as sortBy, uniqBy, omit, max, isEqual, isBoolean } from 'lodash';
 import { COLORS } from '../../common/colors';
-import { highlightTexts } from '../../common/utils';
+import { highlightTexts, isLoggedIn } from '../../common/utils';
 import APIService from '../../services/APIService';
 import RepoIcon from '../repos/RepoIcon';
 import ConceptIcon from '../concepts/ConceptIcon';
@@ -17,6 +20,9 @@ import SearchResults from './SearchResults';
 import SearchFilters from './SearchFilters'
 import { OperationsContext } from '../app/LayoutContext';
 import ReferenceFilters from '../repos/ReferenceFilters'
+import DeleteReferencesDialog from '../collections/DeleteReferencesDialog'
+import RemoveFromCollectionDialog from '../collections/RemoveFromCollectionDialog'
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline'
 
 const DEFAULT_LIMIT = 25;
 const FILTERS_WIDTH = 250
@@ -41,6 +47,10 @@ const Search = props => {
   const [order, setOrder] = React.useState('desc');
   const [orderBy, setOrderBy] = React.useState('score');
   const [isMatchOp, setIsMatchOp] = React.useState(false)
+  const [deleteReferencesOpen, setDeleteReferencesOpen] = React.useState(false)
+  const [deletingReferences, setDeletingReferences] = React.useState(false)
+  const [bulkRemoveOpen, setBulkRemoveOpen] = React.useState(false)
+  const [bulkRemoving, setBulkRemoving] = React.useState(false)
 
   const didMount = React.useRef(false);
   const isFilterable = _resource => FILTERABLE_RESOURCES.includes(_resource)
@@ -418,6 +428,79 @@ const Search = props => {
     history.push(getCurrentLayoutURL(getQueryParams(input, page, pageSize, filters, newOrderByField, newOrder)))
   }
 
+  const isHead = props.url?.includes('/HEAD/')
+
+  const selectedReferenceObjects = resource === 'references' && selected.length > 0
+    ? (result['references']?.results || []).filter(r => selected.includes(r.version_url || r.url || r.id))
+    : []
+
+  const onDeleteReferences = deleteBody => {
+    const body = deleteBody || { ids: selectedReferenceObjects.map(r => r.id).filter(Boolean) }
+    setDeletingReferences(true)
+    APIService.new().overrideURL(props.url).delete(body).then(response => {
+      setDeletingReferences(false)
+      if(response?.status === 204 || response?.status === 200) {
+        setDeleteReferencesOpen(false)
+        setSelected([])
+        setAlert({ severity: 'success', message: t('reference.remove_success') })
+        fetchResults(getQueryParams(input, page, pageSize, filters, orderBy, order))
+      } else {
+        setAlert({ severity: 'error', message: response?.data?.detail || t('common.generic_error') })
+      }
+    })
+  }
+
+  const isInCollection = props.url?.includes('/collections/')
+  const collectionUrl = isInCollection ? props.url?.replace(/\/(concepts|mappings)\/$/, '/') : null
+
+  const selectedRows = (result[resource]?.results || []).filter(r => selected.includes(r.version_url || r.url || r.id))
+
+  const onBulkRemoveFromCollection = deleteBody => {
+    const body = deleteBody || { ids: [] }
+    setBulkRemoving(true)
+    APIService.new().overrideURL(collectionUrl).appendToUrl('references/').delete(body).then(response => {
+      setBulkRemoving(false)
+      if(response?.status === 204 || response?.status === 200) {
+        setBulkRemoveOpen(false)
+        setSelected([])
+        setAlert({ severity: 'success', message: t('reference.remove_success') })
+        fetchResults(getQueryParams(input, page, pageSize, filters, orderBy, order))
+      } else {
+        setAlert({ severity: 'error', message: response?.data?.detail || t('common.generic_error') })
+      }
+    })
+  }
+
+  const bulkRemoveFromCollectionAction = isInCollection && isHead && ['concepts', 'mappings'].includes(resource) && isLoggedIn() && selected.length > 0 ? (
+    <Button
+      startIcon={<RemoveCircleOutlineIcon fontSize='inherit' />}
+      variant='contained'
+      size='small'
+      color='error'
+      sx={{textTransform: 'none', whiteSpace: 'nowrap', borderRadius: '8px', marginLeft: '8px'}}
+      onClick={() => setBulkRemoveOpen(true)}
+    >
+      {t('reference.remove_from_collection')}
+    </Button>
+  ) : null
+
+  const deleteReferencesControl = resource === 'references' && isLoggedIn() && selected.length > 0 ? (
+    <Tooltip title={!isHead ? t('reference.not_available_in_version') : ''}>
+      <span>
+        <Button
+          startIcon={<DeleteForeverIcon fontSize='inherit' />}
+          variant='contained'
+          size='small'
+          color='error'
+          disabled={!isHead}
+          sx={{textTransform: 'none', whiteSpace: 'nowrap', borderRadius: '8px', marginLeft: '8px'}}
+          onClick={() => setDeleteReferencesOpen(true)}
+        >
+          {t('reference.remove_selected')}
+        </Button>
+      </span>
+    </Tooltip>
+  ) : null
 
   React.useEffect(() => {
     setShowItem(props.showItem || false)
@@ -497,6 +580,8 @@ const Search = props => {
                   properties={props.properties}
                   propertyFilters={props.propertyFilters}
                   isMatch={isMatchOp}
+                  toolbarControl={deleteReferencesControl}
+                  extraBulkActions={bulkRemoveFromCollectionAction}
                 />
               </div>
             </div>
@@ -512,6 +597,21 @@ const Search = props => {
             }
           </div>
       }
+      <DeleteReferencesDialog
+        open={deleteReferencesOpen}
+        onClose={() => setDeleteReferencesOpen(false)}
+        onConfirm={onDeleteReferences}
+        references={selectedReferenceObjects}
+        loading={deletingReferences}
+      />
+      <RemoveFromCollectionDialog
+        open={bulkRemoveOpen}
+        onClose={() => setBulkRemoveOpen(false)}
+        onConfirm={onBulkRemoveFromCollection}
+        resources={selectedRows}
+        collectionUrl={collectionUrl}
+        loading={bulkRemoving}
+      />
     </div>
   )
 }
diff --git a/src/components/search/SearchResults.jsx b/src/components/search/SearchResults.jsx
index 8dcac5da..aff2969a 100644
--- a/src/components/search/SearchResults.jsx
+++ b/src/components/search/SearchResults.jsx
@@ -235,6 +235,9 @@ const SearchResults = props => {
       </Button>
     ) : null
 
+  const allBulkActions = [addToCollectionBulkAction, props.extraBulkActions].filter(Boolean)
+  const bulkActionsElement = allBulkActions.length > 0 ? <>{allBulkActions}</> : null
+
   React.useEffect(() => {
     setSelected(props.selected || [])
   }, [props.selected])
@@ -261,7 +264,7 @@ const SearchResults = props => {
             noCardDisplay={noCardDisplay}
             toolbarControl={props.toolbarControl}
             appliedFilters={props.appliedFilters}
-            bulkActions={addToCollectionBulkAction}
+            bulkActions={bulkActionsElement}
           />
       }
       {
diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
index d3f5747b..0f125a3e 100644
--- a/src/i18n/locales/en/translations.json
+++ b/src/i18n/locales/en/translations.json
@@ -278,7 +278,20 @@
     "versioned_resource": "Versioned (Resource)",
     "resolved_repo": "Resolved Repo",
     "raw": "Raw",
-    "translation": "Translation"
+    "translation": "Translation",
+    "remove_selected": "Remove selected",
+    "remove_confirm_title": "Remove {{count}} reference(s)?",
+    "remove_confirm_body": "This will remove {{concepts}} concepts and {{mappings}} mappings from the collection expansion.",
+    "not_available_in_version": "Not available in saved versions. Switch to HEAD to edit.",
+    "remove_success": "References removed successfully.",
+    "brought_in_by": "Brought into collection by",
+    "brought_in_by_tooltip": "This {{resource}} appears in this collection expansion as a result of these references.",
+    "no_references_found": "No references found.",
+    "remove_from_collection": "Remove from collection",
+    "remove_concept_confirm_title": "Remove concept from collection?",
+    "remove_concept_confirm_body": "This concept is brought in by the following reference(s). Removing it will delete those references from the collection.",
+    "remove_mapping_confirm_title": "Remove mapping from collection?",
+    "remove_mapping_confirm_body": "This mapping is brought in by the following reference(s). Removing it will delete those references from the collection."
   },
   "checksums": {
     "standard": "Standard Checksum",

From 7740629a033985e2988e3132d3b92e2197c03867 Mon Sep 17 00:00:00 2001
From: Joseph Amlung <jamlung@regenstrief.org>
Date: Tue, 5 May 2026 11:18:53 -0400
Subject: [PATCH 2/5] Some fixes

---
 .../RemoveFromCollectionDialog.jsx            | 102 ++++++++++++++++--
 src/components/concepts/ConceptHome.jsx       |   4 +-
 src/components/mappings/MappingHome.jsx       |   4 +-
 src/components/search/Search.jsx              |  15 ++-
 4 files changed, 106 insertions(+), 19 deletions(-)

diff --git a/src/components/collections/RemoveFromCollectionDialog.jsx b/src/components/collections/RemoveFromCollectionDialog.jsx
index a74112de..c0f74226 100644
--- a/src/components/collections/RemoveFromCollectionDialog.jsx
+++ b/src/components/collections/RemoveFromCollectionDialog.jsx
@@ -13,23 +13,100 @@ import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import CircularProgress from '@mui/material/CircularProgress'
 import APIService from '../../services/APIService'
+import { dropVersion } from '../../common/utils'
+import RepoChip from '../repos/RepoChip'
 
-const getResourceLabel = resource => {
-  if(resource.display_name) return resource.display_name
-  if(resource.map_type) return `${resource.from_concept_code || ''} [${resource.map_type}] ${resource.to_concept_code || ''}`
-  return resource.id
+const getUrlPart = (url, part) => {
+  const parts = (url || '').replace(/\/$/, '').split('/')
+  const index = parts.lastIndexOf(part)
+  return index !== -1 ? parts[index + 1] : null
+}
+
+const getRepoFromConcept = concept => {
+  const sourceId = concept.source || getUrlPart(concept.source_url || concept.url, 'sources')
+  if(!sourceId) return null
+  const sourceURL = concept.source_url || (concept.owner_url ? `${concept.owner_url}sources/${sourceId}/` : undefined)
+
+  return {
+    id: sourceId,
+    short_code: sourceId,
+    type: 'Source',
+    url: sourceURL,
+    owner: concept.owner,
+    owner_type: concept.owner_type,
+    owner_url: concept.owner_url,
+    version: concept.latest_source_version,
+    version_url: concept.latest_source_version && sourceURL ? `${sourceURL}${concept.latest_source_version}/` : undefined,
+  }
+}
+
+const getMappingSourceToken = mapping => {
+  const source = mapping.to_source || mapping.to_source_name || getUrlPart(mapping.to_source_url || mapping.to_concept_url, 'sources') || mapping.source
+  const version = mapping.to_source_version || mapping.latest_source_version
+  return source && version ? `${source}(v${version})` : source
+}
+
+const getMappingInlineSyntax = mapping => {
+  const mapType = mapping.map_type ? `[${mapping.map_type}] ` : ''
+  const source = getMappingSourceToken(mapping)
+  const code = mapping.to_concept_code || mapping.to_concept || mapping.id
+  const name = mapping.to_concept_name_resolved || mapping.to_concept_name
+  const escapedName = name ? name.replace(/"/g, '\\"') : ''
+
+  return `${mapType}${source ? `${source}:` : ''}${code || ''}${escapedName ? ` "${escapedName}"` : ''}`
 }
 
 const getResourcePath = resource => resource.concept_class !== undefined ? 'concepts' : 'mappings'
 
+const ResourceLabel = ({ resource }) => {
+  if(resource.concept_class !== undefined) {
+    const repo = getRepoFromConcept(resource)
+
+    return (
+      <Box sx={{display: 'flex', alignItems: 'center', gap: 0.75, minWidth: 0}}>
+        <Typography component='span' sx={{fontSize: '13px', fontWeight: 'bold', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>
+          {resource.id} {resource.display_name || resource.name || ''}
+        </Typography>
+        {repo && (
+          <React.Fragment>
+            <Typography component='span' sx={{fontSize: '13px', color: 'text.secondary'}}>&middot;</Typography>
+            <RepoChip
+              noTooltip
+              noLink
+              hideType
+              size='small'
+              repo={repo}
+              sx={{minWidth: 0, maxWidth: '160px', '.entity-id': {overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}}
+            />
+          </React.Fragment>
+        )}
+      </Box>
+    )
+  }
+
+  return (
+    <Typography sx={{fontSize: '13px', fontWeight: 'bold', fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>
+      {getMappingInlineSyntax(resource)}
+    </Typography>
+  )
+}
+
 const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, collectionUrl, loading }) => {
   const { t } = useTranslation()
   const [fetchingRefs, setFetchingRefs] = React.useState(false)
   const [resourcesWithRefs, setResourcesWithRefs] = React.useState([])
   const [checkedRefIds, setCheckedRefIds] = React.useState(new Set())
+  const baseCollectionUrl = dropVersion(collectionUrl)
 
   React.useEffect(() => {
-    if(!open || !resources?.length || !collectionUrl) return
+    if(!open || !resources?.length || !baseCollectionUrl) {
+      setFetchingRefs(false)
+      setResourcesWithRefs([])
+      setCheckedRefIds(new Set())
+      return
+    }
+
+    let active = true
     setFetchingRefs(true)
     setResourcesWithRefs([])
     setCheckedRefIds(new Set())
@@ -37,19 +114,24 @@ const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, colle
     Promise.all(
       resources.map(resource =>
         APIService.new()
-          .overrideURL(`${collectionUrl}${getResourcePath(resource)}/${encodeURIComponent(resource.id)}/`)
+          .overrideURL(`${baseCollectionUrl}${getResourcePath(resource)}/${encodeURIComponent(resource.id)}/`)
           .get(null, null, { includeReferences: true })
           .then(response => ({ resource, references: response?.data?.references || [] }))
           .catch(() => ({ resource, references: [] }))
       )
     ).then(results => {
+      if(!active) return
       setResourcesWithRefs(results)
       const allIds = new Set()
       results.forEach(({ references }) => references.forEach(ref => ref.id && allIds.add(ref.id)))
       setCheckedRefIds(allIds)
       setFetchingRefs(false)
     })
-  }, [open])
+
+    return () => {
+      active = false
+    }
+  }, [open, resources, baseCollectionUrl])
 
   const onToggleRef = refId => {
     setCheckedRefIds(prev => {
@@ -60,7 +142,7 @@ const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, colle
     })
   }
 
-  const showGroupHeaders = resourcesWithRefs.length > 1
+  const showGroupHeaders = resourcesWithRefs.length > 0
   const checkedCount = checkedRefIds.size
   const isDisabled = loading || fetchingRefs || checkedCount === 0
 
@@ -81,7 +163,7 @@ const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, colle
               <React.Fragment key={resource.id}>
                 {showGroupHeaders && (
                   <ListItem sx={{bgcolor: 'rgba(0,0,0,0.04)', px: 1.5, py: 0.5, borderTop: groupIndex > 0 ? '1px solid rgba(0,0,0,0.12)' : 'none'}}>
-                    <Typography sx={{fontSize: '13px', fontWeight: 'bold'}}>{getResourceLabel(resource)}</Typography>
+                    <ResourceLabel resource={resource} />
                   </ListItem>
                 )}
                 {references.length === 0 ? (
@@ -94,7 +176,7 @@ const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, colle
                     const isLastGroup = groupIndex === resourcesWithRefs.length - 1
                     return (
                       <ListItem
-                        key={ref.id || refIndex}
+                        key={`${ref.id || ref.expression || 'reference'}-${groupIndex}-${refIndex}`}
                         divider={!(isLastInGroup && isLastGroup)}
                         sx={{padding: '2px 12px 2px 4px', pl: showGroupHeaders ? 2 : 0.5}}
                       >
diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx
index 4d41c955..2c787540 100644
--- a/src/components/concepts/ConceptHome.jsx
+++ b/src/components/concepts/ConceptHome.jsx
@@ -222,7 +222,7 @@ const ConceptHome = props => {
   }
 
   const onRemoveFromCollection = deleteBody => {
-    const collectionUrl = props.repo?.version_url || props.repo?.url
+    const collectionUrl = dropVersion(props.repo?.version_url || props.repo?.url)
     const body = deleteBody || { ids: (concept.references || []).map(r => r.id).filter(Boolean) }
     setRemovingFromCollection(true)
     APIService.new().overrideURL(collectionUrl).appendToUrl('references/').delete(body).then(response => {
@@ -304,7 +304,7 @@ const ConceptHome = props => {
                   onClose={() => setRemoveFromCollectionDialog(false)}
                   onConfirm={onRemoveFromCollection}
                   resources={[concept]}
-                  collectionUrl={props.repo?.version_url || props.repo?.url}
+                  collectionUrl={dropVersion(props.repo?.version_url || props.repo?.url)}
                   loading={removingFromCollection}
                 />
               </>
diff --git a/src/components/mappings/MappingHome.jsx b/src/components/mappings/MappingHome.jsx
index 7104c6e3..0a12276a 100644
--- a/src/components/mappings/MappingHome.jsx
+++ b/src/components/mappings/MappingHome.jsx
@@ -136,7 +136,7 @@ const MappingHome = props => {
   }
 
   const onRemoveFromCollection = deleteBody => {
-    const collectionUrl = props.repo?.version_url || props.repo?.url
+    const collectionUrl = dropVersion(props.repo?.version_url || props.repo?.url)
     const body = deleteBody || { ids: (mapping.references || []).map(r => r.id).filter(Boolean) }
     setRemovingFromCollection(true)
     APIService.new().overrideURL(collectionUrl).appendToUrl('references/').delete(body).then(response => {
@@ -206,7 +206,7 @@ const MappingHome = props => {
             onClose={() => setRemoveFromCollectionDialog(false)}
             onConfirm={onRemoveFromCollection}
             resources={[mapping]}
-            collectionUrl={props.repo?.version_url || props.repo?.url}
+            collectionUrl={dropVersion(props.repo?.version_url || props.repo?.url)}
             loading={removingFromCollection}
           />
         </div>
diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
index 48fcae1c..efc49d5c 100644
--- a/src/components/search/Search.jsx
+++ b/src/components/search/Search.jsx
@@ -11,7 +11,7 @@ import UserIcon from '@mui/icons-material/Person';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import { forEach, keys, pickBy, isEmpty, find, uniq, has, orderBy as sortBy, uniqBy, omit, max, isEqual, isBoolean } from 'lodash';
 import { COLORS } from '../../common/colors';
-import { highlightTexts, isLoggedIn } from '../../common/utils';
+import { dropVersion, highlightTexts, isLoggedIn } from '../../common/utils';
 import APIService from '../../services/APIService';
 import RepoIcon from '../repos/RepoIcon';
 import ConceptIcon from '../concepts/ConceptIcon';
@@ -28,6 +28,11 @@ const DEFAULT_LIMIT = 25;
 const FILTERS_WIDTH = 250
 const FILTERABLE_RESOURCES = ['concepts', 'mappings', 'repos', 'sources', 'collections', 'references']
 
+const getBaseCollectionUrl = url => {
+  const match = (url || '').match(/^(.*\/collections\/[^/]+\/)(?:[^/]+\/)?(?:concepts|mappings|references)\/?$/)
+  return match ? match[1] : dropVersion(url)
+}
+
 const Search = props => {
   const { setAlert, contextRepo } = React.useContext(OperationsContext);
   const { t } = useTranslation()
@@ -429,6 +434,8 @@ const Search = props => {
   }
 
   const isHead = props.url?.includes('/HEAD/')
+  const isInCollection = props.url?.includes('/collections/')
+  const collectionUrl = isInCollection ? getBaseCollectionUrl(props.url) : null
 
   const selectedReferenceObjects = resource === 'references' && selected.length > 0
     ? (result['references']?.results || []).filter(r => selected.includes(r.version_url || r.url || r.id))
@@ -436,8 +443,9 @@ const Search = props => {
 
   const onDeleteReferences = deleteBody => {
     const body = deleteBody || { ids: selectedReferenceObjects.map(r => r.id).filter(Boolean) }
+    const deleteUrl = isInCollection ? `${collectionUrl}references/` : props.url
     setDeletingReferences(true)
-    APIService.new().overrideURL(props.url).delete(body).then(response => {
+    APIService.new().overrideURL(deleteUrl).delete(body).then(response => {
       setDeletingReferences(false)
       if(response?.status === 204 || response?.status === 200) {
         setDeleteReferencesOpen(false)
@@ -450,9 +458,6 @@ const Search = props => {
     })
   }
 
-  const isInCollection = props.url?.includes('/collections/')
-  const collectionUrl = isInCollection ? props.url?.replace(/\/(concepts|mappings)\/$/, '/') : null
-
   const selectedRows = (result[resource]?.results || []).filter(r => selected.includes(r.version_url || r.url || r.id))
 
   const onBulkRemoveFromCollection = deleteBody => {

From 19824e7b19d10865d1d8643455e17f2ece2e4074 Mon Sep 17 00:00:00 2001
From: Joseph Amlung <jamlung@regenstrief.org>
Date: Tue, 5 May 2026 11:27:27 -0400
Subject: [PATCH 3/5] Incorporated inline mapping syntax

---
 .../RemoveFromCollectionDialog.jsx            | 54 +++++++++++++------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/components/collections/RemoveFromCollectionDialog.jsx b/src/components/collections/RemoveFromCollectionDialog.jsx
index c0f74226..7676885b 100644
--- a/src/components/collections/RemoveFromCollectionDialog.jsx
+++ b/src/components/collections/RemoveFromCollectionDialog.jsx
@@ -40,24 +40,45 @@ const getRepoFromConcept = concept => {
   }
 }
 
-const getMappingSourceToken = mapping => {
-  const source = mapping.to_source || mapping.to_source_name || getUrlPart(mapping.to_source_url || mapping.to_concept_url, 'sources') || mapping.source
-  const version = mapping.to_source_version || mapping.latest_source_version
-  return source && version ? `${source}(v${version})` : source
+const getVersionToken = version => {
+  if(!version) return null
+  if(String(version).toUpperCase() === 'HEAD') return version
+  return String(version).match(/^v/i) ? version : `v${version}`
 }
 
-const getMappingInlineSyntax = mapping => {
-  const mapType = mapping.map_type ? `[${mapping.map_type}] ` : ''
-  const source = getMappingSourceToken(mapping)
-  const code = mapping.to_concept_code || mapping.to_concept || mapping.id
-  const name = mapping.to_concept_name_resolved || mapping.to_concept_name
+const getMappingSourceToken = (mapping, direction) => {
+  const source = mapping[`${direction}_source`] ||
+    mapping[`${direction}_source_name`] ||
+    getUrlPart(mapping[`${direction}_source_url`] || mapping[`${direction}_concept_url`], 'sources') ||
+    (direction === 'from' ? mapping.source : null)
+  const version = getVersionToken(mapping[`${direction}_source_version`] || (source === mapping.source ? mapping.latest_source_version : null))
+
+  return source && version ? `${source}(${version})` : source
+}
+
+const getMappingConceptSyntax = (mapping, direction) => {
+  const source = getMappingSourceToken(mapping, direction)
+  const code = mapping[`${direction}_concept_code`] || mapping[`${direction}_concept`] || mapping.id
+  const name = mapping[`${direction}_concept_name_resolved`] || mapping[`${direction}_concept_name`]
   const escapedName = name ? name.replace(/"/g, '\\"') : ''
 
-  return `${mapType}${source ? `${source}:` : ''}${code || ''}${escapedName ? ` "${escapedName}"` : ''}`
+  return `${source ? `${source}:` : ''}${code || ''}${escapedName ? ` "${escapedName}"` : ''}`
+}
+
+const getMappingInlineSyntax = mapping => {
+  const mapType = mapping.map_type ? `[${mapping.map_type}]` : '[SAME-AS]'
+  return `${getMappingConceptSyntax(mapping, 'from')} ${mapType} ${getMappingConceptSyntax(mapping, 'to')}`
 }
 
 const getResourcePath = resource => resource.concept_class !== undefined ? 'concepts' : 'mappings'
 
+const getResourceUrl = (resource, collectionUrl) => {
+  if(resource.version_url || resource.url)
+    return resource.version_url || resource.url
+
+  return `${collectionUrl}${getResourcePath(resource)}/${encodeURIComponent(resource.id)}/`
+}
+
 const ResourceLabel = ({ resource }) => {
   if(resource.concept_class !== undefined) {
     const repo = getRepoFromConcept(resource)
@@ -85,7 +106,7 @@ const ResourceLabel = ({ resource }) => {
   }
 
   return (
-    <Typography sx={{fontSize: '13px', fontWeight: 'bold', fontFamily: 'monospace', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>
+    <Typography sx={{fontSize: '12px', fontWeight: 'bold', fontFamily: 'monospace', overflowWrap: 'anywhere'}}>
       {getMappingInlineSyntax(resource)}
     </Typography>
   )
@@ -112,13 +133,16 @@ const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, colle
     setCheckedRefIds(new Set())
 
     Promise.all(
-      resources.map(resource =>
-        APIService.new()
-          .overrideURL(`${baseCollectionUrl}${getResourcePath(resource)}/${encodeURIComponent(resource.id)}/`)
+      resources.map(resource => {
+        if(Array.isArray(resource.references))
+          return Promise.resolve({ resource, references: resource.references })
+
+        return APIService.new()
+          .overrideURL(getResourceUrl(resource, baseCollectionUrl))
           .get(null, null, { includeReferences: true })
           .then(response => ({ resource, references: response?.data?.references || [] }))
           .catch(() => ({ resource, references: [] }))
-      )
+      })
     ).then(results => {
       if(!active) return
       setResourcesWithRefs(results)

From cb8b7256c966224a81b4e65ac208c2736e28df17 Mon Sep 17 00:00:00 2001
From: Joseph Amlung <jamlung@regenstrief.org>
Date: Tue, 5 May 2026 11:36:50 -0400
Subject: [PATCH 4/5] Dialog fixes - ready to go?

---
 .../RemoveFromCollectionDialog.jsx            | 28 +++++++++++++------
 src/components/concepts/ConceptHome.jsx       |  1 +
 src/components/mappings/MappingHome.jsx       |  1 +
 src/components/search/Search.jsx              |  4 +++
 4 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/collections/RemoveFromCollectionDialog.jsx b/src/components/collections/RemoveFromCollectionDialog.jsx
index 7676885b..2f1a2e1b 100644
--- a/src/components/collections/RemoveFromCollectionDialog.jsx
+++ b/src/components/collections/RemoveFromCollectionDialog.jsx
@@ -73,10 +73,19 @@ const getMappingInlineSyntax = mapping => {
 const getResourcePath = resource => resource.concept_class !== undefined ? 'concepts' : 'mappings'
 
 const getResourceUrl = (resource, collectionUrl) => {
+  if(collectionUrl)
+    return `${collectionUrl}${getResourcePath(resource)}/${encodeURIComponent(resource.id)}/`
   if(resource.version_url || resource.url)
     return resource.version_url || resource.url
 
-  return `${collectionUrl}${getResourcePath(resource)}/${encodeURIComponent(resource.id)}/`
+  return ''
+}
+
+const hasReferenceIds = references => Array.isArray(references) && references.some(ref => ref?.id)
+
+const getReferenceLabel = reference => {
+  if(typeof reference === 'string') return reference
+  return reference?.expression || reference?.url || reference?.uri || ''
 }
 
 const ResourceLabel = ({ resource }) => {
@@ -112,15 +121,16 @@ const ResourceLabel = ({ resource }) => {
   )
 }
 
-const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, collectionUrl, loading }) => {
+const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, collectionUrl, lookupCollectionUrl, loading }) => {
   const { t } = useTranslation()
   const [fetchingRefs, setFetchingRefs] = React.useState(false)
   const [resourcesWithRefs, setResourcesWithRefs] = React.useState([])
   const [checkedRefIds, setCheckedRefIds] = React.useState(new Set())
   const baseCollectionUrl = dropVersion(collectionUrl)
+  const resourceLookupUrl = lookupCollectionUrl || baseCollectionUrl
 
   React.useEffect(() => {
-    if(!open || !resources?.length || !baseCollectionUrl) {
+    if(!open || !resources?.length || !resourceLookupUrl) {
       setFetchingRefs(false)
       setResourcesWithRefs([])
       setCheckedRefIds(new Set())
@@ -134,11 +144,11 @@ const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, colle
 
     Promise.all(
       resources.map(resource => {
-        if(Array.isArray(resource.references))
+        if(hasReferenceIds(resource.references))
           return Promise.resolve({ resource, references: resource.references })
 
         return APIService.new()
-          .overrideURL(getResourceUrl(resource, baseCollectionUrl))
+          .overrideURL(getResourceUrl(resource, resourceLookupUrl))
           .get(null, null, { includeReferences: true })
           .then(response => ({ resource, references: response?.data?.references || [] }))
           .catch(() => ({ resource, references: [] }))
@@ -155,7 +165,7 @@ const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, colle
     return () => {
       active = false
     }
-  }, [open, resources, baseCollectionUrl])
+  }, [open, resources, resourceLookupUrl])
 
   const onToggleRef = refId => {
     setCheckedRefIds(prev => {
@@ -200,7 +210,7 @@ const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, colle
                     const isLastGroup = groupIndex === resourcesWithRefs.length - 1
                     return (
                       <ListItem
-                        key={`${ref.id || ref.expression || 'reference'}-${groupIndex}-${refIndex}`}
+                        key={`${ref.id || getReferenceLabel(ref) || 'reference'}-${groupIndex}-${refIndex}`}
                         divider={!(isLastInGroup && isLastGroup)}
                         sx={{padding: '2px 12px 2px 4px', pl: showGroupHeaders ? 2 : 0.5}}
                       >
@@ -210,10 +220,10 @@ const RemoveFromCollectionDialog = ({ open, onClose, onConfirm, resources, colle
                           disabled={loading || !ref.id}
                           onChange={() => onToggleRef(ref.id)}
                           size='small'
-                          inputProps={{'aria-label': ref.expression}}
+                          inputProps={{'aria-label': getReferenceLabel(ref)}}
                         />
                         <ListItemText
-                          primary={ref.expression}
+                          primary={getReferenceLabel(ref)}
                           primaryTypographyProps={{sx: {fontSize: '13px', fontFamily: 'monospace', wordBreak: 'break-all'}}}
                         />
                       </ListItem>
diff --git a/src/components/concepts/ConceptHome.jsx b/src/components/concepts/ConceptHome.jsx
index 2c787540..79b99e25 100644
--- a/src/components/concepts/ConceptHome.jsx
+++ b/src/components/concepts/ConceptHome.jsx
@@ -305,6 +305,7 @@ const ConceptHome = props => {
                   onConfirm={onRemoveFromCollection}
                   resources={[concept]}
                   collectionUrl={dropVersion(props.repo?.version_url || props.repo?.url)}
+                  lookupCollectionUrl={props.repo?.version_url || props.repo?.url}
                   loading={removingFromCollection}
                 />
               </>
diff --git a/src/components/mappings/MappingHome.jsx b/src/components/mappings/MappingHome.jsx
index 0a12276a..aa9fc342 100644
--- a/src/components/mappings/MappingHome.jsx
+++ b/src/components/mappings/MappingHome.jsx
@@ -207,6 +207,7 @@ const MappingHome = props => {
             onConfirm={onRemoveFromCollection}
             resources={[mapping]}
             collectionUrl={dropVersion(props.repo?.version_url || props.repo?.url)}
+            lookupCollectionUrl={props.repo?.version_url || props.repo?.url}
             loading={removingFromCollection}
           />
         </div>
diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
index efc49d5c..2c4170da 100644
--- a/src/components/search/Search.jsx
+++ b/src/components/search/Search.jsx
@@ -33,6 +33,8 @@ const getBaseCollectionUrl = url => {
   return match ? match[1] : dropVersion(url)
 }
 
+const getCollectionLookupUrl = url => (url || '').replace(/\/(concepts|mappings|references)\/?$/, '/')
+
 const Search = props => {
   const { setAlert, contextRepo } = React.useContext(OperationsContext);
   const { t } = useTranslation()
@@ -436,6 +438,7 @@ const Search = props => {
   const isHead = props.url?.includes('/HEAD/')
   const isInCollection = props.url?.includes('/collections/')
   const collectionUrl = isInCollection ? getBaseCollectionUrl(props.url) : null
+  const collectionLookupUrl = isInCollection ? getCollectionLookupUrl(props.url) : null
 
   const selectedReferenceObjects = resource === 'references' && selected.length > 0
     ? (result['references']?.results || []).filter(r => selected.includes(r.version_url || r.url || r.id))
@@ -615,6 +618,7 @@ const Search = props => {
         onConfirm={onBulkRemoveFromCollection}
         resources={selectedRows}
         collectionUrl={collectionUrl}
+        lookupCollectionUrl={collectionLookupUrl}
         loading={bulkRemoving}
       />
     </div>

From 4a6a5864826382c836620c5a4592857cb37bbf2f Mon Sep 17 00:00:00 2001
From: Joseph Amlung <jamlung@regenstrief.org>
Date: Tue, 5 May 2026 14:11:15 -0400
Subject: [PATCH 5/5] First pass at Transform References

---
 .../collections/TransformReferencesDialog.jsx | 101 ++++++++++++++
 .../collections/referenceTransformUtils.js    |  97 ++++++++++++++
 src/components/search/Search.jsx              | 124 +++++++++++++++++-
 src/i18n/locales/en/translations.json         |  17 +++
 src/i18n/locales/es/translations.json         |  20 +++
 src/i18n/locales/zh/translations.json         |  20 +++
 6 files changed, 373 insertions(+), 6 deletions(-)
 create mode 100644 src/components/collections/TransformReferencesDialog.jsx
 create mode 100644 src/components/collections/referenceTransformUtils.js

diff --git a/src/components/collections/TransformReferencesDialog.jsx b/src/components/collections/TransformReferencesDialog.jsx
new file mode 100644
index 00000000..8016bf4e
--- /dev/null
+++ b/src/components/collections/TransformReferencesDialog.jsx
@@ -0,0 +1,101 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
+import Chip from '@mui/material/Chip'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Alert from '@mui/material/Alert'
+import { getTransformPreviewItems } from './referenceTransformUtils'
+
+const expressionSx = {
+  fontFamily: 'monospace',
+  fontSize: '12px',
+  overflowWrap: 'anywhere',
+  maxWidth: '260px',
+}
+
+const TransformReferencesDialog = ({ open, onClose, onConfirm, references, loading }) => {
+  const { t } = useTranslation()
+  const previewItems = React.useMemo(() => getTransformPreviewItems(references), [references])
+  const eligibleItems = previewItems.filter(item => item.eligible)
+  const skippedItems = previewItems.filter(item => !item.eligible)
+  const selectedCount = references?.length || 0
+
+  return (
+    <Dialog open={open} onClose={loading ? undefined : onClose} maxWidth='md' fullWidth>
+      <DialogTitle>
+        {t('reference.transform_confirm_title', { count: selectedCount })}
+      </DialogTitle>
+      <DialogContent sx={{display: 'flex', flexDirection: 'column', gap: 1.5}}>
+        <Typography variant='body2' color='text.secondary'>
+          {t('reference.transform_confirm_body')}
+        </Typography>
+
+        <Box sx={{display: 'flex', gap: 1, flexWrap: 'wrap'}}>
+          <Chip size='small' color='primary' label={`${selectedCount} ${t('common.selected')}`} />
+          <Chip size='small' color='success' label={`${eligibleItems.length} ${t('common.eligible')}`} />
+          <Chip size='small' color={skippedItems.length ? 'warning' : 'default'} label={`${skippedItems.length} ${t('common.skipped')}`} />
+        </Box>
+
+        {eligibleItems.length === 0 && (
+          <Alert severity='warning'>
+            {t('reference.transform_no_eligible')}
+          </Alert>
+        )}
+
+        <TableContainer sx={{border: '1px solid rgba(0,0,0,0.12)', borderRadius: '4px', maxHeight: '420px'}}>
+          <Table stickyHeader size='small'>
+            <TableHead>
+              <TableRow>
+                <TableCell>{t('reference.expression')}</TableCell>
+                <TableCell>{t('reference.new_expression')}</TableCell>
+                <TableCell>{t('common.status')}</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {previewItems.map(item => (
+                <TableRow key={item.reference?.id || item.reference?.expression}>
+                  <TableCell sx={expressionSx}>{item.reference?.expression}</TableCell>
+                  <TableCell sx={expressionSx}>{item.proposedExpression || '-'}</TableCell>
+                  <TableCell>
+                    {item.eligible ? (
+                      <Chip size='small' color='success' label={t('common.eligible')} />
+                    ) : (
+                      <Chip size='small' color='warning' label={t(item.reasonKey)} />
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} variant='text' disabled={loading}>
+          {t('common.cancel')}
+        </Button>
+        <Button
+          onClick={() => onConfirm(eligibleItems)}
+          variant='contained'
+          disabled={loading || eligibleItems.length === 0}
+          startIcon={loading ? <CircularProgress size={16} color='inherit' /> : null}
+        >
+          {t('reference.transform_references')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default TransformReferencesDialog
diff --git a/src/components/collections/referenceTransformUtils.js b/src/components/collections/referenceTransformUtils.js
new file mode 100644
index 00000000..124982c2
--- /dev/null
+++ b/src/components/collections/referenceTransformUtils.js
@@ -0,0 +1,97 @@
+const RESOURCE_SEGMENTS = ['concepts', 'mappings']
+const REPO_SEGMENTS = ['sources', 'collections']
+
+const hasRepoPin = reference => Boolean(reference?.version && String(reference.version).toUpperCase() !== 'HEAD')
+
+const hasResourcePin = reference => Boolean(reference?.resource_version)
+
+const splitExpression = expression => {
+  const parts = String(expression || '').split('?')
+  return {
+    path: parts[0],
+    query: parts.length > 1 ? parts.slice(1).join('?') : '',
+  }
+}
+
+const getRelativePathParts = path => {
+  const match = String(path || '').match(/^(.*?)(\/(?:orgs|users)\/.*)$/)
+  if(!match)
+    return null
+
+  return {
+    prefix: match[1],
+    parts: match[2].split('/').filter(Boolean),
+  }
+}
+
+export const buildNonVersionedReferenceExpression = reference => {
+  const expression = reference?.expression
+  if(!expression)
+    return null
+
+  const { path, query } = splitExpression(expression)
+  const parsed = getRelativePathParts(path)
+  if(!parsed)
+    return null
+  if(parsed.prefix)
+    return null
+
+  const parts = [...parsed.parts]
+  const repoTypeIndex = parts.findIndex(part => REPO_SEGMENTS.includes(part))
+  if(repoTypeIndex === -1)
+    return null
+
+  const afterRepoIndex = repoTypeIndex + 2
+  if(hasRepoPin(reference) && parts[afterRepoIndex] && !RESOURCE_SEGMENTS.includes(parts[afterRepoIndex]))
+    parts.splice(afterRepoIndex, 1)
+
+  const resourceTypeIndex = parts.findIndex(part => RESOURCE_SEGMENTS.includes(part))
+  const resourceVersionIndex = resourceTypeIndex + 2
+  if(hasResourcePin(reference) && resourceTypeIndex !== -1 && parts[resourceVersionIndex])
+    parts.splice(resourceVersionIndex, 1)
+
+  const proposedPath = `${parsed.prefix}/${parts.join('/')}/`
+  return query ? `${proposedPath}?${query}` : proposedPath
+}
+
+export const getReferenceTransformPreview = reference => {
+  if(!reference?.id)
+    return { reference, eligible: false, reasonKey: 'reference.unsupported_transform' }
+
+  if(!hasRepoPin(reference) && !hasResourcePin(reference))
+    return { reference, eligible: false, reasonKey: 'reference.already_non_versioned' }
+
+  const proposedExpression = buildNonVersionedReferenceExpression(reference)
+  if(!proposedExpression || proposedExpression === reference.expression)
+    return { reference, eligible: false, reasonKey: 'reference.unsupported_transform' }
+
+  return {
+    reference,
+    eligible: true,
+    proposedExpression,
+  }
+}
+
+export const getTransformPreviewItems = references => (references || []).map(getReferenceTransformPreview)
+
+export const getTransformAddGroups = previewItems => {
+  const groups = {}
+  previewItems.filter(item => item.eligible).forEach(item => {
+    const reference = item.reference
+    const include = reference.include !== false
+    const key = JSON.stringify({
+      reference_type: reference.reference_type,
+      include,
+      cascade: reference.cascade || null,
+    })
+    if(!groups[key]) {
+      groups[key] = {
+        include,
+        cascade: reference.cascade || null,
+        items: [],
+      }
+    }
+    groups[key].items.push(item)
+  })
+  return Object.values(groups)
+}
diff --git a/src/components/search/Search.jsx b/src/components/search/Search.jsx
index 2c4170da..f0db5af2 100644
--- a/src/components/search/Search.jsx
+++ b/src/components/search/Search.jsx
@@ -6,9 +6,15 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
 import OrgIcon from '@mui/icons-material/AccountBalance';
 import UserIcon from '@mui/icons-material/Person';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+import TransformIcon from '@mui/icons-material/Transform';
+import DownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { forEach, keys, pickBy, isEmpty, find, uniq, has, orderBy as sortBy, uniqBy, omit, max, isEqual, isBoolean } from 'lodash';
 import { COLORS } from '../../common/colors';
 import { dropVersion, highlightTexts, isLoggedIn } from '../../common/utils';
@@ -22,6 +28,8 @@ import { OperationsContext } from '../app/LayoutContext';
 import ReferenceFilters from '../repos/ReferenceFilters'
 import DeleteReferencesDialog from '../collections/DeleteReferencesDialog'
 import RemoveFromCollectionDialog from '../collections/RemoveFromCollectionDialog'
+import TransformReferencesDialog from '../collections/TransformReferencesDialog'
+import { getTransformAddGroups } from '../collections/referenceTransformUtils'
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline'
 
 const DEFAULT_LIMIT = 25;
@@ -56,6 +64,9 @@ const Search = props => {
   const [isMatchOp, setIsMatchOp] = React.useState(false)
   const [deleteReferencesOpen, setDeleteReferencesOpen] = React.useState(false)
   const [deletingReferences, setDeletingReferences] = React.useState(false)
+  const [referenceActionsAnchor, setReferenceActionsAnchor] = React.useState(null)
+  const [transformReferencesOpen, setTransformReferencesOpen] = React.useState(false)
+  const [transformingReferences, setTransformingReferences] = React.useState(false)
   const [bulkRemoveOpen, setBulkRemoveOpen] = React.useState(false)
   const [bulkRemoving, setBulkRemoving] = React.useState(false)
 
@@ -461,6 +472,71 @@ const Search = props => {
     })
   }
 
+  const addTransformedReferences = group => {
+    const data = {
+      expressions: group.items.map(item => item.proposedExpression),
+      include: group.include,
+    }
+    const body = { data }
+    if(group.cascade) {
+      data.cascade = group.cascade
+      body.cascade = typeof group.cascade === 'string' ? group.cascade : group.cascade?.method || ''
+    }
+
+    return APIService.new().overrideURL(collectionUrl).appendToUrl('references/').put(body)
+  }
+
+  const getAddedTransformItems = (response, group) => {
+    if(![200, 201].includes(response?.status))
+      return []
+    if(!Array.isArray(response?.data))
+      return group.items
+
+    const addedExpressions = response.data.filter(item => item.added).map(item => item.expression)
+    return group.items.filter(item => addedExpressions.includes(item.proposedExpression))
+  }
+
+  const onTransformReferences = async transformItems => {
+    const groups = getTransformAddGroups(transformItems)
+    setTransformingReferences(true)
+
+    const addResults = await Promise.all(groups.map(group => addTransformedReferences(group).then(response => ({ group, response }))))
+    const addedItems = addResults.reduce((items, { group, response }) => [...items, ...getAddedTransformItems(response, group)], [])
+    const addFailures = addResults.reduce((count, { group, response }) => count + group.items.length - getAddedTransformItems(response, group).length, 0)
+
+    if(!addedItems.length) {
+      setTransformingReferences(false)
+      setAlert({ severity: 'error', message: t('reference.transform_no_references_changed') })
+      return
+    }
+
+    const deleteResponse = await APIService.new()
+      .overrideURL(collectionUrl)
+      .appendToUrl('references/')
+      .delete({ ids: addedItems.map(item => item.reference.id).filter(Boolean) })
+
+    setTransformingReferences(false)
+    const deleteSucceeded = [200, 204].includes(deleteResponse?.status)
+    if(deleteSucceeded) {
+      setTransformReferencesOpen(false)
+      setSelected([])
+      const transformedCount = addedItems.length
+      setAlert({
+        severity: addFailures ? 'warning' : 'success',
+        message: addFailures ?
+          t('reference.transform_partial_success', { transformed: transformedCount, failed: addFailures }) :
+          t('reference.transform_success', { count: transformedCount }),
+      })
+      fetchResults(getQueryParams(input, page, pageSize, filters, orderBy, order))
+    } else {
+      setAlert({
+        severity: 'warning',
+        message: t('reference.transform_delete_failed', { count: addedItems.length }),
+      })
+      fetchResults(getQueryParams(input, page, pageSize, filters, orderBy, order))
+    }
+  }
+
   const selectedRows = (result[resource]?.results || []).filter(r => selected.includes(r.version_url || r.url || r.id))
 
   const onBulkRemoveFromCollection = deleteBody => {
@@ -492,19 +568,20 @@ const Search = props => {
     </Button>
   ) : null
 
-  const deleteReferencesControl = resource === 'references' && isLoggedIn() && selected.length > 0 ? (
+  const closeReferenceActions = () => setReferenceActionsAnchor(null)
+
+  const referenceActionsControl = resource === 'references' && isLoggedIn() && selected.length > 0 ? (
     <Tooltip title={!isHead ? t('reference.not_available_in_version') : ''}>
       <span>
         <Button
-          startIcon={<DeleteForeverIcon fontSize='inherit' />}
+          endIcon={<DownIcon fontSize='inherit' />}
           variant='contained'
           size='small'
-          color='error'
           disabled={!isHead}
           sx={{textTransform: 'none', whiteSpace: 'nowrap', borderRadius: '8px', marginLeft: '8px'}}
-          onClick={() => setDeleteReferencesOpen(true)}
+          onClick={event => setReferenceActionsAnchor(event.currentTarget)}
         >
-          {t('reference.remove_selected')}
+          {t('reference.actions')}
         </Button>
       </span>
     </Tooltip>
@@ -588,7 +665,7 @@ const Search = props => {
                   properties={props.properties}
                   propertyFilters={props.propertyFilters}
                   isMatch={isMatchOp}
-                  toolbarControl={deleteReferencesControl}
+                  toolbarControl={referenceActionsControl}
                   extraBulkActions={bulkRemoveFromCollectionAction}
                 />
               </div>
@@ -605,6 +682,41 @@ const Search = props => {
             }
           </div>
       }
+      <Menu
+        anchorEl={referenceActionsAnchor}
+        open={Boolean(referenceActionsAnchor)}
+        onClose={closeReferenceActions}
+      >
+        <MenuItem
+          onClick={() => {
+            closeReferenceActions()
+            setTransformReferencesOpen(true)
+          }}
+        >
+          <ListItemIcon>
+            <TransformIcon fontSize='small' />
+          </ListItemIcon>
+          <ListItemText>{t('reference.transform_to_non_versioned')}</ListItemText>
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            closeReferenceActions()
+            setDeleteReferencesOpen(true)
+          }}
+        >
+          <ListItemIcon>
+            <DeleteForeverIcon fontSize='small' color='error' />
+          </ListItemIcon>
+          <ListItemText>{t('common.remove')}</ListItemText>
+        </MenuItem>
+      </Menu>
+      <TransformReferencesDialog
+        open={transformReferencesOpen}
+        onClose={() => setTransformReferencesOpen(false)}
+        onConfirm={onTransformReferences}
+        references={selectedReferenceObjects}
+        loading={transformingReferences}
+      />
       <DeleteReferencesDialog
         open={deleteReferencesOpen}
         onClose={() => setDeleteReferencesOpen(false)}
diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
index 0f125a3e..085dfb0f 100644
--- a/src/i18n/locales/en/translations.json
+++ b/src/i18n/locales/en/translations.json
@@ -52,6 +52,10 @@
     "view_all_attributes": "View all attributes",
     "all": "All",
     "actions": "Actions",
+    "selected": "selected",
+    "eligible": "eligible",
+    "skipped": "skipped",
+    "status": "Status",
     "metadata": "Metadata",
     "details": "Details",
     "copied_to_clipboard": "Copied to clipboard",
@@ -284,6 +288,19 @@
     "remove_confirm_body": "This will remove {{concepts}} concepts and {{mappings}} mappings from the collection expansion.",
     "not_available_in_version": "Not available in saved versions. Switch to HEAD to edit.",
     "remove_success": "References removed successfully.",
+    "actions": "Actions",
+    "transform_to_non_versioned": "Transform to non-versioned reference",
+    "transform_confirm_title": "Transform {{count}} reference(s)?",
+    "transform_confirm_body": "This will add non-versioned replacement references first, then remove the old pinned references after the add succeeds.",
+    "transform_references": "Transform references",
+    "transform_success": "{{count}} reference(s) transformed successfully.",
+    "transform_partial_success": "{{transformed}} reference(s) transformed. {{failed}} reference(s) could not be transformed and were left unchanged.",
+    "transform_no_eligible": "None of the selected references can be transformed to non-versioned references.",
+    "transform_no_references_changed": "No references were transformed.",
+    "transform_delete_failed": "{{count}} non-versioned reference(s) were added, but the old pinned references could not be removed. Refresh and review the references list for duplicates.",
+    "already_non_versioned": "Already non-versioned",
+    "unsupported_transform": "Unsupported",
+    "new_expression": "New Expression",
     "brought_in_by": "Brought into collection by",
     "brought_in_by_tooltip": "This {{resource}} appears in this collection expansion as a result of these references.",
     "no_references_found": "No references found.",
diff --git a/src/i18n/locales/es/translations.json b/src/i18n/locales/es/translations.json
index cbff07ee..5152dbf0 100644
--- a/src/i18n/locales/es/translations.json
+++ b/src/i18n/locales/es/translations.json
@@ -24,6 +24,10 @@
     "about": "Acerca de",
     "view_all_attributes": "Ver todos los atributos",
     "actions": "Acciones",
+    "selected": "seleccionados",
+    "eligible": "elegibles",
+    "skipped": "omitidos",
+    "status": "Estado",
     "metadata": "Metadatos",
     "copied_to_clipboard": "Copiado al portapapeles",
     "navigate": "Navegar",
@@ -92,6 +96,22 @@
     "website": "Sitio web",
     "last_login": "Último inicio de sesión"
   },
+  "reference": {
+    "actions": "Acciones",
+    "expression": "Expresión",
+    "new_expression": "Nueva expresión",
+    "transform_to_non_versioned": "Transformar a referencia sin versión",
+    "transform_confirm_title": "¿Transformar {{count}} referencia(s)?",
+    "transform_confirm_body": "Esto agregará primero referencias de reemplazo sin versión y luego eliminará las referencias fijadas anteriores cuando la adición se complete correctamente.",
+    "transform_references": "Transformar referencias",
+    "transform_success": "{{count}} referencia(s) transformada(s) correctamente.",
+    "transform_partial_success": "{{transformed}} referencia(s) transformada(s). {{failed}} referencia(s) no pudieron transformarse y se dejaron sin cambios.",
+    "transform_no_eligible": "Ninguna de las referencias seleccionadas puede transformarse en una referencia sin versión.",
+    "transform_no_references_changed": "No se transformó ninguna referencia.",
+    "transform_delete_failed": "Se agregaron {{count}} referencia(s) sin versión, pero no se pudieron eliminar las referencias fijadas anteriores. Actualiza y revisa la lista de referencias para detectar duplicados.",
+    "already_non_versioned": "Ya está sin versión",
+    "unsupported_transform": "No compatible"
+  },
   "search": {
     "filters": "Filtros",
     "concepts": "Conceptos",
diff --git a/src/i18n/locales/zh/translations.json b/src/i18n/locales/zh/translations.json
index 04f8739b..06b21197 100644
--- a/src/i18n/locales/zh/translations.json
+++ b/src/i18n/locales/zh/translations.json
@@ -41,6 +41,10 @@
     "view_all_attributes": "查看全部属性",
     "all": "全部",
     "actions": "操作",
+    "selected": "已选择",
+    "eligible": "可处理",
+    "skipped": "已跳过",
+    "status": "状态",
     "metadata": "元数据",
     "copied_to_clipboard": "已复制到粘贴板",
     "navigate": "导航",
@@ -288,6 +292,22 @@
     "user_has_not_created_public_repos_suffix": "尚未创建任何公开的存储库",
     "recent_activity": "最近的活动"
   },
+  "reference": {
+    "actions": "操作",
+    "expression": "表达式",
+    "new_expression": "新表达式",
+    "transform_to_non_versioned": "转换为非版本化引用",
+    "transform_confirm_title": "要转换 {{count}} 个引用吗？",
+    "transform_confirm_body": "系统会先添加非版本化的替代引用，添加成功后再移除原来的固定版本引用。",
+    "transform_references": "转换引用",
+    "transform_success": "已成功转换 {{count}} 个引用。",
+    "transform_partial_success": "已转换 {{transformed}} 个引用。{{failed}} 个引用无法转换，已保持不变。",
+    "transform_no_eligible": "所选引用中没有可以转换为非版本化引用的项目。",
+    "transform_no_references_changed": "没有转换任何引用。",
+    "transform_delete_failed": "已添加 {{count}} 个非版本化引用，但无法移除原来的固定版本引用。请刷新并检查引用列表中是否有重复项。",
+    "already_non_versioned": "已经是非版本化",
+    "unsupported_transform": "不支持"
+  },
   "search": {
     "filters": "筛选项",
     "concepts": "概念",