Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00
Code Issues Projects Releases Wiki Activity

limit items in filters

Browse Source
This commit is contained in:
Tymoteusz Czech 2025-07-24 17:58:48 +02:00
parent 66ceab1fbf
commit e5863cc0fe
No known key found for this signature in database
GPG Key ID: 133555230D88D75F
1 changed files with 70 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/component/impact-metrics/ChartConfigModal/LabelFilter/LabelFilterItem/LabelFilterItem.tsx
View File

@ -1,13 +1,19 @@
import { import {
Alert,
Autocomplete, Autocomplete,
Box,
Checkbox, Checkbox,
Chip, Chip,
FormControlLabel, FormControlLabel,
styled,
TextField, TextField,
Typography,
} from '@mui/material'; } from '@mui/material';
import type { FC } from 'react'; import type { FC } from 'react';
const StyledSelectAllLabel = styled('span')(({ theme }) => ({
fontSize: theme.fontSizes.smallBody,
}));
type LabelFilterItemProps = { type LabelFilterItemProps = {
labelKey: string; labelKey: string;
options: string[]; options: string[];
@ -25,6 +31,7 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
const isAllSelected = value.includes('*'); const isAllSelected = value.includes('*');
const autocompleteId = `autocomplete-${labelKey}`; const autocompleteId = `autocomplete-${labelKey}`;
const selectAllId = `select-all-${labelKey}`; const selectAllId = `select-all-${labelKey}`;
const isTruncated = options.length >= 1_000;
return ( return (
<> <>
@ -46,16 +53,7 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
}} }}
/> />
} }
label={ label={<StyledSelectAllLabel>Select all</StyledSelectAllLabel>}
<Box
component='span'
sx={(theme) => ({
fontSize: theme.fontSizes.smallBody,
})}
>
Select all
</Box>
}
/> />
<Autocomplete <Autocomplete
multiple multiple
@ -66,8 +64,14 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
onChange(newValues); onChange(newValues);
}} }}
disabled={isAllSelected} disabled={isAllSelected}
renderTags={(value, getTagProps) => renderTags={(value, getTagProps) => {
value.map((option, index) => { const overflowCount = 5;
const displayedValues = value.slice(-overflowCount);
const remainingCount = value.length - overflowCount;
return (
<>
{displayedValues.map((option, index) => {
const { key, ...chipProps } = getTagProps({ const { key, ...chipProps } = getTagProps({
index, index,
}); });
@ -79,9 +83,21 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
size='small' size='small'
/> />
); );
}) })}
} {remainingCount > 0 ? (
<Typography
component='span'
sx={{ color: 'text.secondary' }}
>
{' '}
(+{remainingCount})
</Typography>
) : null}
</>
);
}}
renderInput={(params) => ( renderInput={(params) => (
<>
<TextField <TextField
{...params} {...params}
label={labelKey} label={labelKey}
@ -97,6 +113,19 @@ export const LabelFilterItem: FC<LabelFilterItemProps> = ({
: undefined, : undefined,
}} }}
/> />
{isTruncated && (
<Alert
severity='warning'
sx={(theme) => ({
padding: theme.spacing(1, 2),
marginTop: theme.spacing(1),
})}
>
Maximum of 1000 values loaded due to
performance.
</Alert>
)}
</>
)} )}
/> />
</> </>