diff --git a/packages/libs/coreui/src/components/inputs/SelectList.tsx b/packages/libs/coreui/src/components/inputs/SelectList.tsx index 8c3fd0a1ff..e255145b2a 100644 --- a/packages/libs/coreui/src/components/inputs/SelectList.tsx +++ b/packages/libs/coreui/src/components/inputs/SelectList.tsx @@ -108,7 +108,7 @@ export default function SelectList({ ); } -// Returns button display content based on `value` array, mapping to display names from `items` when available. +// Returns button display content based on `value` array, mapping to altDisplay, display, or value from `items` in that order of preference. // If no matching display name is found, uses the value itself. Returns `defaultContent` if `value` is empty. function getDisplayContent( value: T[], @@ -117,9 +117,10 @@ function getDisplayContent( ): ReactNode { return value.length ? value - .map( - (v) => items.find((item) => item.value === v)?.display ?? v - ) + .map((v) => { + const item = items.find((item) => item.value === v); + return item?.altDisplay ?? item?.display ?? v; + }) .reduce((accum, elem) => (accum ? [accum, ',', elem] : elem), null) : defaultContent; } diff --git a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx index 218dae85ee..3f75e17013 100644 --- a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx +++ b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx @@ -74,6 +74,8 @@ export type Item = { display: ReactNode; value: T; disabled?: boolean; + /** an optional alternative display - perhaps a shortened version for use in popover buttons */ + altDisplay?: ReactNode; }; export type CheckboxListProps = { diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx index 1efea4f282..f86876d09c 100644 --- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx +++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx @@ -472,6 +472,8 @@ export function RecordTable_Sequences( ), value: formatAttributeValue(row.accession), + // unexciting display for the popover button: + altDisplay: formatAttributeValue(row.accession), }))} value={volatilePfamFilterIds} onChange={(ids) => {