Fix pfam filter button issues

packages/libs/coreui/src/components/inputs/SelectList.tsx

@@ -108,7 +108,7 @@ export default function SelectList<T extends string>({
   );
 }
 
-// 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<T extends string>(
   value: T[],
@@ -117,9 +117,10 @@ function getDisplayContent<T extends string>(
 ): ReactNode {
   return value.length
     ? value
-        .map<ReactNode>(
-          (v) => items.find((item) => item.value === v)?.display ?? v
-        )
+        .map<ReactNode>((v) => {
+          const item = items.find((item) => item.value === v);
+          return item?.altDisplay ?? item?.display ?? v;
+        })
         .reduce((accum, elem) => (accum ? [accum, ',', elem] : elem), null)
     : defaultContent;
 }

packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx

@@ -74,6 +74,8 @@ export type Item<T> = {
   display: ReactNode;
   value: T;
   disabled?: boolean;
+  /** an optional alternative display - perhaps a shortened version for use in popover buttons */
+  altDisplay?: ReactNode;
 };
 
 export type CheckboxListProps<T extends string> = {

packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx

@@ -472,6 +472,8 @@ export function RecordTable_Sequences(
           </div>
         ),
         value: formatAttributeValue(row.accession),
+        // unexciting display for the popover button:
+        altDisplay: formatAttributeValue(row.accession),
       }))}
       value={volatilePfamFilterIds}
       onChange={(ids) => {