OpenConceptLab/ocl_issues#2211 | using badge

Author: snyaggarwal

src/components/map-projects/MapProject.jsx

@@ -27,6 +27,7 @@ import Tooltip from '@mui/material/Tooltip';
 import Alert from '@mui/material/Alert';
 import Collapse from '@mui/material/Collapse';
 import Divider from '@mui/material/Divider';
+import Badge from '@mui/material/Badge';
 import { DataGrid } from '@mui/x-data-grid';
 
 
@@ -1555,19 +1556,21 @@ const MapProject = () => {
                   })
                 }
               </div>
-              <div className='col-xs-12' style={{padding: '8px 14px', display: 'flex', alignItems: 'center', backgroundColor: SURFACE_COLORS.main}}>
+              <div className='col-xs-12' style={{padding: '12px 14px 8px 14px', display: 'flex', alignItems: 'center', backgroundColor: SURFACE_COLORS.main}}>
                 <FormControl sx={{minWidth: '16px'}}>
                   <SearchField onChange={debounce(val => setSearchText(val || ''))} />
                 </FormControl>
+                <Badge badgeContent={matchTypes.very_high || 0} max={999} color='primary'>
                 <FormControlLabel
                   sx={{
                     marginLeft: '4px',
                     marginRight: '8px',
                     '.MuiFormControlLabel-label': {fontSize: '0.8125rem'}
                   }}
                   control={<Switch disabled={!showMatchSummary || selectedRowStatus === 'unmapped'} size="small" checked={selectedMatchBucket === 'very_high'} onChange={() => onMatchTypeChange('very_high')} />}
-                  label={`Auto Match (${(matchTypes.very_high || 0).toLocaleString()})`}
+                  label='Auto Match'
                 />
+                  </Badge>
                 <ScoreBucketButton
                   selected={selectedCandidatesScoreBucket}
                   onSort={() => setScoreBucketSortBy(scoreBucketSortBy === 'desc' ? 'asc' : 'desc')}

src/components/map-projects/ScoreBucketButton.jsx

@@ -4,12 +4,14 @@ import UpIcon from '@mui/icons-material/NorthRounded';
 import SortIcon from '@mui/icons-material/SwapVertRounded';
 import ButtonGroup from '@mui/material/ButtonGroup'
 import Button from '@mui/material/Button'
+import Badge from '@mui/material/Badge'
 import startCase from 'lodash/startCase'
 import { SCORES_COLOR } from './constants'
 
 const BucketButton = ({id, selected, onClick, count}) => {
   const isSelected = selected === id && count
-  return <Button
+  return <Badge badgeContent={count} color='primary' max={999} sx={{'.MuiBadge-badge': {backgroundColor: SCORES_COLOR[id]}}}>
+  <Button
            onClick={() => onClick(id)}
            disabled={!count}
            sx={{
@@ -18,8 +20,9 @@ const BucketButton = ({id, selected, onClick, count}) => {
              backgroundColor: isSelected ? SCORES_COLOR[id] : undefined,
              borderBottom: count ? `2px solid ${SCORES_COLOR[id]} !important` : undefined,
            }}>
-           {`${startCase(id)} (${count})`}
-         </Button>
+           {startCase(id)}
+  </Button>
+  </Badge>
 }
 
 const ScoreBucketButton = ({onClick, onSort, sortBy, selected, recommended, available, unranked}) => {
@@ -33,7 +36,7 @@ const ScoreBucketButton = ({onClick, onSort, sortBy, selected, recommended, avai
   const disabled = !recommended && !available && !unranked
   const selectedCount = selected === 'recommended' ? recommended : (selected === 'available' ? available : unranked)
   return (
-    <ButtonGroup size='small' variant='text' sx={{marginRight: '8px'}}>
+    <ButtonGroup size='small' variant='text' sx={{marginRight: '8px', marginLeft: '12px'}}>
       <BucketButton id='recommended' selected={selected} count={recommended} onClick={onClick} />
       <BucketButton id='available' selected={selected} count={available} onClick={onClick} />
       <BucketButton id='unranked' selected={selected} count={unranked} onClick={onClick} />