Merge pull request #1284 from VEuPathDB/1280-ortho-pfam-button-bugfix

Fix pfam filter button issues + replace group stats histogram image

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/GroupStats.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { RecordTable } from './SequenceRecordClasses.SequenceRecordClass';
 import { RecordTableProps, WrappedComponentProps } from './Types';
 
-import eval_hist_img from './eval-hist.png';
+import MGD_hist_img from './MGD-hist.png';
 
 export function RecordTable_GroupStats(
   props: WrappedComponentProps<RecordTableProps>
@@ -13,30 +13,28 @@ export function RecordTable_GroupStats(
     <div
       style={{
         display: 'flex',
-        flexDirection: 'row',
-        gap: 10,
+        flexDirection: 'column',
       }}
     >
       {regularRecordTable}
       <figure
         style={{
-          width: 480,
+          width: 390,
         }}
       >
         <img
-          alt="Histogram of median inter-group e-values for both core-only and core+peripheral proteins. The distributions of both peak at around 1e-20 to 1e-60 with a substantial tail out to e-values of 1e-300."
-          width={480}
-          height={480}
-          src={eval_hist_img}
+          alt="The histogram shows the distribution of the median percent identity cohesiveness indicator across all orthologous groups. There is a skewed distribution with a peak at 0-5% identity."
+          width={390}
+          height={336}
+          src={MGD_hist_img}
         />
         <figcaption
           style={{
             fontSize: '90%',
           }}
         >
-          This histogram is provided to aid the interpretation of E-values in
-          the adjoining table. E-values have been transformed using a negative
-          logarithm, so higher significance is represented further to the right.
+          The histogram shows the distribution of the median percent identity
+          cohesiveness indicator across all orthologous groups.
         </figcaption>
       </figure>
     </div>

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) => {