Skip to content

Commit

Permalink
OpenConceptLab/ocl_issues#1524 | using updated API
Browse files Browse the repository at this point in the history
  • Loading branch information
@snyaggarwal
snyaggarwal committed Mar 23, 2023
1 parent ee416b6 commit 6d3b656
Showing 1 changed file with 66 additions and 84 deletions.
150 changes: 66 additions & 84 deletions src/components/sources/SourceSummary.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,34 @@ import { Table, TableHead, TableCell, TableBody, TableRow, TableContainer, Paper
import DownIcon from '@mui/icons-material/KeyboardArrowDown';
import UpIcon from '@mui/icons-material/KeyboardArrowUp';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { map, max, isEmpty, get, isNull, camelCase, isNumber, times } from 'lodash';
import { map, max, isEmpty, isNull, camelCase, isNumber, isArray, startCase } from 'lodash';
import { TOMATO_RED, BLUE, WHITE } from '../../common/constants';
import { toNumDisplay } from '../../common/utils';
import APIService from '../../services/APIService';
import PopperGrow from '../common/PopperGrow';


const FieldDistribution = ({distribution, field, source, count}) => {
const FieldDistribution = ({distribution, field, source, humanize}) => {
let baseURL = source.version_url || source.url
baseURL += field.includes('map_type') ? 'mappings/' : 'concepts/'
const isNameType = field === 'type'
let _field = isNameType ? 'nameTypes' : camelCase(field)

return distribution ?
(
<List dense>
{
map(distribution, state => {
const isNameType = field === 'type'
let _field = isNameType ? 'nameTypes' : camelCase(field)
let value = isNameType ? (state[field] ? state[field] : 'None') : (state[field] || '').toLowerCase()
let url = baseURL + `?facets={"${_field}":{"${value}":true}}`
return (
<ListItem key={state[field]} secondaryAction={toNumDisplay(state.count)}>
<a href={"#" + url}>{isNull(state[field]) ? <i>None</i> : state[field]}</a>
</ListItem>
)
})
}
</List>
) : (
<List dense>
{
times(count, index => (
<ListItem key={index} secondaryAction={<Skeleton width={30} height={30} variant="circular" />}>
<Skeleton style={{width: '90%'}} height={30} />
return (
<List dense>
{
map(distribution, state => {
let value = state[0]
//let value = isNameType ? (state[field] ? state[field] : 'None') : (state[field] || '').toLowerCase()
let url = baseURL + `?facets={"${_field}":{"${value}":true}}`
return (
<ListItem key={value} secondaryAction={toNumDisplay(state[1])}>
<a href={"#" + url}>{isNull(value) ? <i>None</i> : (humanize ? startCase(value) : value)}</a>
</ListItem>
))
}
</List>
)
)
})
}
</List>
)
}


Expand Down Expand Up @@ -156,11 +145,11 @@ const SelfSummaryCell = ({label, value, onClick}) => (
<Button variant='text' onClick={onClick} style={{textTransform: 'none', display: 'inline', width: '100%', height: '100%'}} disabled={value === 0}>
<p style={{margin: 0, display: 'flex', alignItem: 'center', justifyContent: 'center'}}>
{
isNumber(value) ? <b>{toNumDisplay(value)}</b> : <Skeleton width={20} height={20} variant="circular" />
isArray(value) ? <b>{toNumDisplay(value.length)}</b> : <Skeleton width={20} height={20} variant="circular" />
}
</p>
<p style={{margin: 0}}>
{isNumber(value) ? label : <Skeleton /> }
{isArray(value) ? label : <Skeleton /> }
</p>
</Button>
</TableCell>
Expand All @@ -169,19 +158,12 @@ const SelfSummaryCell = ({label, value, onClick}) => (
const SelfSummary = ({ summary, source, isVersion }) => {
const [distribution, setDistribution] = React.useState({})
const [open, setOpen] = React.useState(false)
const [selectedSummaryFieldCount, setSelectedSummaryFieldCount] = React.useState(null)
const [anchorRef, setAnchorRef] = React.useState(null)
const getFieldDistribution = field => {
if(field && !distribution[field])
APIService.new().overrideURL(source.version_url || source.url).appendToUrl('summary/').get(null, null, {verbose: true, distribution: field}).then(response => setDistribution({...distribution, [field]: get(response.data, `distribution.${field}`)}))
}

const toggle = (event, field, count) => {
const toggle = (event, field, value) => {
const newOpen = (!field || open === field) ? false : field
setOpen(newOpen)
setSelectedSummaryFieldCount(newOpen ? count : null)
setAnchorRef(newOpen ? {current: event.currentTarget} : null)
getFieldDistribution(field)
setDistribution({...distribution, [field]: value})
}
const columns = isVersion ? 2 : 3;
const width = `${100/columns}%`
Expand Down Expand Up @@ -231,16 +213,16 @@ const SelfSummary = ({ summary, source, isVersion }) => {
<TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
<SelfSummaryCell value={summary?.concepts?.concept_class} label='Concept Classes' onClick={event => toggle(event, 'concept_class', summary?.concepts?.concept_class)} />
<SelfSummaryCell value={summary?.concepts?.datatype} label='Datatype' onClick={event => toggle(event, 'datatype', summary?.concepts?.datatype)} />
<SelfSummaryCell value={summary?.mappings?.map_types} label='MapTypes' onClick={event => toggle(event, 'map_type', 'map_types', summary?.mappings?.map_types)} />
<SelfSummaryCell value={summary?.locales?.locales} label='Languages' onClick={event => toggle(event, 'name_locale', 'locales', summary?.locales?.locales)} />
<SelfSummaryCell value={summary?.locales?.names} label='Name Types' onClick={event => toggle(event, 'name_type', 'names', summary?.locales?.names)} />
<SelfSummaryCell value={summary?.mappings?.map_type} label='MapTypes' onClick={event => toggle(event, 'map_type', summary?.mappings?.map_type)} />
<SelfSummaryCell value={summary?.concepts?.locale} label='Languages' onClick={event => toggle(event, 'locale', summary?.concepts?.locale)} />
<SelfSummaryCell value={summary?.concepts?.name_type} label='Name Types' onClick={event => toggle(event, 'name_type', summary?.concepts?.name_type)} />
</TableRow>
</TableBody>
{
Boolean(open) &&
<PopperGrow open={Boolean(open)} anchorRef={anchorRef} handleClose={toggle}>
<div style={{maxHeight: '250px', overflow: 'auto'}}>
<FieldDistribution distribution={distribution[open]} field={open.replace('name_', '')} source={source} count={selectedSummaryFieldCount} />
<FieldDistribution distribution={distribution[open]} field={open.replace('name_', '')} source={source} humanize={!['name_type', 'locale'].includes(open)}/>
</div>
</PopperGrow>
}
Expand Down Expand Up @@ -271,45 +253,45 @@ const MappedSources = ({title, label, sources, source, summary, retired, setReti
}
</AccordionSummary>
<AccordionDetails>
<Table size='small'>
<TableHead>
<TableRow>
<TableCell style={{backgroundColor: 'rgb(224, 224, 224)', fontWeight: 'bold'}}>
<span>{label}</span>
<RetiredChip retired={retired} onClick={() => setRetired(!retired)} />
</TableCell>
<TableCell align='right' style={{backgroundColor: 'rgb(224, 224, 224)', fontWeight: 'bold'}}>
Concepts
</TableCell>
{
retired &&
<TableCell align='right' style={{backgroundColor: 'rgb(224, 224, 224)', fontWeight: 'bold'}}>
Retired
</TableCell>
}
<TableCell align='right' style={{backgroundColor: 'rgb(224, 224, 224)', fontWeight: 'bold'}}>
Active
</TableCell>
<TableCell align='right' style={{backgroundColor: 'rgb(224, 224, 224)', fontWeight: 'bold'}}>
Total
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<React.Fragment>
{
map(sources, _source => (
<React.Fragment key={_source.version_url}>
<SummaryTable summary={_source} retired={retired} columns={columns} source={source} fromSource={fromSource} />
<TableRow>
<TableCell colSpan={columns} style={{backgroundColor: 'rgb(224, 224, 224)'}} />
</TableRow>
</React.Fragment>
))
}
</React.Fragment>
</TableBody>
</Table>
<Table size='small'>
<TableHead>
<TableRow>
<TableCell style={{backgroundColor: 'rgb(224, 224, 224)', fontWeight: 'bold'}}>
<span>{label}</span>
<RetiredChip retired={retired} onClick={() => setRetired(!retired)} />
</TableCell>
<TableCell align='right' style={{backgroundColor: 'rgb(224, 224, 224)', fontWeight: 'bold'}}>
Concepts
</TableCell>
{
retired &&
<TableCell align='right' style={{backgroundColor: 'rgb(224, 224, 224)', fontWeight: 'bold'}}>
Retired
</TableCell>
}
<TableCell align='right' style={{backgroundColor: 'rgb(224, 224, 224)', fontWeight: 'bold'}}>
Active
</TableCell>
<TableCell align='right' style={{backgroundColor: 'rgb(224, 224, 224)', fontWeight: 'bold'}}>
Total
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<React.Fragment>
{
map(sources, _source => (
<React.Fragment key={_source.version_url}>
<SummaryTable summary={_source} retired={retired} columns={columns} source={source} fromSource={fromSource} />
<TableRow>
<TableCell colSpan={columns} style={{backgroundColor: 'rgb(224, 224, 224)'}} />
</TableRow>
</React.Fragment>
))
}
</React.Fragment>
</TableBody>
</Table>
</AccordionDetails>
</Accordion>
</div>
Expand Down

0 comments on commit 6d3b656

Please sign in to comment.