Skip to content

OpenConceptLab/ocl_issues#2574 | Polish collection reference displays #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
schultzjack wants to merge 1 commit into
base: main
Choose a base branch
from
+89 −36
Draft

OpenConceptLab/ocl_issues#2574 | Polish collection reference displays #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 44 additions & 17 deletions src/components/references/ReferenceSourceGroupedResults.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,56 @@ 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 Tooltip from '@mui/material/Tooltip'
import Typography from '@mui/material/Typography'
import CollapseIcon from '@mui/icons-material/KeyboardArrowDown'
import ExpandIcon from '@mui/icons-material/KeyboardArrowRight'
import MoreVertIcon from '@mui/icons-material/MoreVert'
import { SOURCE_COLORS } from '../../common/colors'
import { hashString, URIToParentParams } from '../../common/utils'
import ConceptIcon from '../concepts/ConceptIcon'
import MappingIcon from '../mappings/MappingIcon'
import RepoChip from '../repos/RepoChip'

const getReferenceId = reference => reference.version_url || reference.url || reference.id

const getReferenceSummary = reference => {
let label = ''
const ReferenceResultCount = ({ count, icon, label }) => (
isNumber(count) && count > 0 ?
<Tooltip title={`${count.toLocaleString()} ${label}`}>
<Box component='span' sx={{display: 'inline-flex', alignItems: 'center', gap: 0.5, mr: 1}}>
{icon}
<Typography component='span' sx={{fontSize: '13px'}}>
{count.toLocaleString()}
</Typography>
</Box>
</Tooltip> :
null
)

const ReferenceResultsCell = ({ reference, t }) => {
if(reference.last_resolved_at && reference.concepts === 0 && reference.mappings === 0)
return '-'
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 || '-'
const hasConcepts = isNumber(reference.concepts) && reference.concepts > 0
const hasMappings = isNumber(reference.mappings) && reference.mappings > 0

if(!hasConcepts && !hasMappings)
return '-'

return (
<Box sx={{display: 'flex', alignItems: 'center', flexWrap: 'wrap', rowGap: 0.5}}>
<ReferenceResultCount
count={reference.concepts}
icon={<ConceptIcon selected color='secondary' sx={{width: '9px', height: '9px'}} />}
label={t(reference.concepts === 1 ? 'concept.concept' : 'concept.concepts').toLowerCase()}
/>
<ReferenceResultCount
count={reference.mappings}
icon={<MappingIcon color='secondary' sx={{width: '15px', height: '13px'}} />}
label={t(reference.mappings === 1 ? 'mapping.mapping' : 'mapping.mappings').toLowerCase()}
/>
</Box>
)
}

const getSourceColorKey = source => [source?.owner, source?.id || source?.short_code].filter(Boolean).join('/')
Expand Down Expand Up @@ -143,6 +170,11 @@ const SourceGroup = ({ group, selected, onSelectedChange, onReferenceClick, isIt
return (
<React.Fragment>
<TableRow sx={{backgroundColor: '#f8f7ff'}}>
<TableCell padding='checkbox'>
<IconButton size='small' onClick={() => setExpanded(!expanded)}>
{expanded ? <CollapseIcon fontSize='small' /> : <ExpandIcon fontSize='small' />}
</IconButton>
</TableCell>
<TableCell padding='checkbox'>
<Checkbox
size={size || 'medium'}
Expand All @@ -151,11 +183,6 @@ const SourceGroup = ({ group, selected, onSelectedChange, onReferenceClick, isIt
onChange={onGroupSelect}
/>
</TableCell>
<TableCell padding='checkbox'>
<IconButton size='small' onClick={() => setExpanded(!expanded)}>
{expanded ? <CollapseIcon fontSize='small' /> : <ExpandIcon fontSize='small' />}
</IconButton>
</TableCell>
<TableCell colSpan={3}>
<Box sx={{display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap'}}>
<RepoChip
Expand Down Expand Up @@ -199,10 +226,10 @@ const SourceGroup = ({ group, selected, onSelectedChange, onReferenceClick, isIt
},
}}
>
<TableCell padding='checkbox' />
<TableCell padding='checkbox' onClick={event => onRowSelect(event, id)}>
<Checkbox size={size || 'medium'} checked={isSelected} />
</TableCell>
<TableCell padding='checkbox' />
<TableCell className='searchable' sx={{pl: 3}}>
<Box sx={{display: 'flex', alignItems: 'center', gap: 1}}>
{
Expand All @@ -212,7 +239,7 @@ const SourceGroup = ({ group, selected, onSelectedChange, onReferenceClick, isIt
<Typography sx={{fontSize: '13px'}}>{getConceptLabel(reference)}</Typography>
</Box>
</TableCell>
<TableCell>{reference.last_resolved_at ? getReferenceSummary(reference) : '-'}</TableCell>
<TableCell>{reference.last_resolved_at ? <ReferenceResultsCell reference={reference} t={t} /> : '-'}</TableCell>
<TableCell align='right'>
<IconButton size='small' onClick={event => onReferenceClick(event, id)}>
<MoreVertIcon fontSize='small' />
Expand Down
64 changes: 45 additions & 19 deletions src/components/repos/CollectionVersionsTab.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,38 @@ const bodyCellSx = {
py: 1.25
};

const countHeaderCellSx = {
...headerCellSx,
width: "16%"
};

const countBodyCellSx = {
...bodyCellSx,
width: "16%"
};

const actionHeaderCellSx = {
...headerCellSx,
width: "1%",
whiteSpace: "nowrap"
};

const resolvedHeaderCellSx = {
...headerCellSx,
width: "16%"
};

const actionBodyCellSx = {
...bodyCellSx,
width: "1%",
whiteSpace: "nowrap"
};

const resolvedBodyCellSx = {
...bodyCellSx,
width: "16%"
};

const compactButtonSx = {
minWidth: 0,
px: 0,
Expand Down Expand Up @@ -697,20 +729,20 @@ const CollectionVersionsTab = ({
</Box>
</Box>
</TableCell>
<TableCell sx={{ ...bodyCellSx, width: "16%" }}>
<TableCell sx={countBodyCellSx}>
<CountCell value={get(version, "summary.active_concepts")} />
</TableCell>
<TableCell sx={{ ...bodyCellSx, width: "16%" }}>
<TableCell sx={countBodyCellSx}>
<CountCell value={get(version, "summary.active_mappings")} />
</TableCell>
<TableCell sx={{ ...bodyCellSx, width: "16%" }}>
<TableCell sx={countBodyCellSx}>
{versionLoading ? (
<CircularProgress size={18} />
) : (
<CountCell value={getReferencesCount(version)} />
)}
</TableCell>
<TableCell sx={{ ...bodyCellSx, width: "1%", whiteSpace: "nowrap" }}>
<TableCell sx={actionBodyCellSx}>
{hasAccess && (
<IconButton
size="small"
Expand All @@ -731,23 +763,23 @@ const CollectionVersionsTab = ({
}}
>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<Box sx={{ px: 2, py: 1 }}>
<Box sx={{ px: 0, py: 1 }}>
<Table size="small">
<TableHead>
<TableRow>
<TableCell sx={headerCellSx}>
{t("repo.expansions")}
</TableCell>
<TableCell sx={headerCellSx}>
<TableCell sx={countHeaderCellSx}>
{t("search.concepts")}
</TableCell>
<TableCell sx={headerCellSx}>
<TableCell sx={countHeaderCellSx}>
{t("search.mappings")}
</TableCell>
<TableCell sx={headerCellSx}>
<TableCell sx={resolvedHeaderCellSx}>
{t("repo.resolved_repo_versions")}
</TableCell>
<TableCell sx={headerCellSx} />
<TableCell sx={actionHeaderCellSx} />
</TableRow>
</TableHead>
<TableBody>
Expand Down Expand Up @@ -911,13 +943,13 @@ const CollectionVersionsTab = ({
)}
</Box>
</TableCell>
<TableCell sx={bodyCellSx}>
<TableCell sx={countBodyCellSx}>
<CountCell value={get(expansion, "summary.active_concepts")} />
</TableCell>
<TableCell sx={bodyCellSx}>
<TableCell sx={countBodyCellSx}>
<CountCell value={get(expansion, "summary.active_mappings")} />
</TableCell>
<TableCell sx={bodyCellSx}>
<TableCell sx={resolvedBodyCellSx}>
<Box sx={{ minWidth: 0 }}>
<Typography
sx={{
Expand Down Expand Up @@ -1005,13 +1037,7 @@ const CollectionVersionsTab = ({
)}
</Box>
</TableCell>
<TableCell
sx={{
...bodyCellSx,
width: "1%",
whiteSpace: "nowrap"
}}
>
<TableCell sx={actionBodyCellSx}>
{hasAccess && (
<IconButton
size="small"
Expand Down