From a3e4b4d765964c1912484e4fa2877e8695395918 Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Sat, 9 Nov 2024 15:47:59 -0500
Subject: [PATCH 01/11] Update display name for existing rna-seq user dataset
 type (#1267)

---
 packages/libs/web-common/src/user-dataset-upload-config.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/libs/web-common/src/user-dataset-upload-config.tsx b/packages/libs/web-common/src/user-dataset-upload-config.tsx
index 2c656fe97d..58d56229f1 100644
--- a/packages/libs/web-common/src/user-dataset-upload-config.tsx
+++ b/packages/libs/web-common/src/user-dataset-upload-config.tsx
@@ -23,9 +23,9 @@ export const uploadTypeConfig: DatasetUploadTypeConfig<ImplementedUploadTypes> =
   {
     rnaseq: {
       type: 'rnaseq',
-      displayName: 'RNA-Seq',
-      description: `Integrate your RNA-Seq data in ${projectId}.`,
-      uploadTitle: 'Upload My RNA-Seq Data Set',
+      displayName: 'Normalized RNA-Seq',
+      description: `Integrate your Normalized RNA-Seq data in ${projectId}.`,
+      uploadTitle: 'Upload My Normalized RNA-Seq Data Set',
       formConfig: {
         summary: {
           inputProps: {

From cd82232a6a4d3e1fb0747698e63714112fae7ae8 Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Sat, 9 Nov 2024 16:12:00 -0500
Subject: [PATCH 02/11] Prevent form submission when pressing enter in
 typeahead input, and remove 3-character limit for showing options (#1266)

---
 .../Question/Params/TypeAheadEnumParam.tsx    | 47 ++++---------------
 1 file changed, 8 insertions(+), 39 deletions(-)

diff --git a/packages/libs/wdk-client/src/Views/Question/Params/TypeAheadEnumParam.tsx b/packages/libs/wdk-client/src/Views/Question/Params/TypeAheadEnumParam.tsx
index 5e8c55b852..5d601cf158 100644
--- a/packages/libs/wdk-client/src/Views/Question/Params/TypeAheadEnumParam.tsx
+++ b/packages/libs/wdk-client/src/Views/Question/Params/TypeAheadEnumParam.tsx
@@ -1,8 +1,7 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import Select from 'react-select';
 import { TypeAheadEnumParam } from '../../../Utils/WdkModel';
-import { Props } from '../../../Views/Question/Params/Utils';
-import { ValueType, InputActionMeta } from 'react-select/src/types';
+import { ValueType } from 'react-select/src/types';
 import { isMultiPick } from '../../../Views/Question/Params/EnumParamUtils';
 import { safeHtml } from '../../../Utils/ComponentUtils';
 
@@ -33,8 +32,6 @@ export const TypeAheadEnumParamComponent = (props: TypeAheadParamProps) => {
     [props.parameter.vocabulary]
   );
 
-  const [searchTerm, setSearchTerm] = useState('');
-
   const selection = useMemo(() => {
     return props.selectedValues.map((value) => ({
       value,
@@ -42,15 +39,6 @@ export const TypeAheadEnumParamComponent = (props: TypeAheadParamProps) => {
     }));
   }, [props.selectedValues, isMultiPick(props.parameter)]);
 
-  const onInputChange = useCallback(
-    (inputValue: string, { action }: InputActionMeta) => {
-      if (action === 'input-change') {
-        setSearchTerm(inputValue);
-      }
-    },
-    []
-  );
-
   const onChange = useCallback(
     (newSelection: ValueType<Option, any>) => {
       const newSelectionArray =
@@ -61,44 +49,25 @@ export const TypeAheadEnumParamComponent = (props: TypeAheadParamProps) => {
           : [newSelection as Option];
 
       props.onChange(newSelectionArray.map(({ value }) => value));
-      setSearchTerm('');
     },
     [props.onChange]
   );
 
-  const filterOption = useCallback(
-    (option: Option, inputValue: string) =>
-      (inputValue.length >= 3 || option.label.length < 3) &&
-      option.label.toLowerCase().includes(inputValue.toLowerCase()),
-    []
-  );
-
-  const noOptionsMessage = useCallback(
-    ({ inputValue }: { inputValue: string }) =>
-      inputValue.length === 0
-        ? 'Please input at least 3 characters'
-        : inputValue.length === 1
-        ? 'Please input at least 2 more characters'
-        : inputValue.length === 2
-        ? 'Please input at least 1 more character'
-        : 'No matches found',
-    []
-  );
-
   return (
     <Select<Option, any>
       isMulti={isMultiPick(props.parameter)}
       isSearchable
       options={options}
-      filterOption={filterOption}
-      noOptionsMessage={noOptionsMessage}
       value={selection}
       onChange={onChange}
-      inputValue={searchTerm}
-      onInputChange={onInputChange}
-      formatOptionLabel={(option) => safeHtml(option.label)}
+      formatOptionLabel={formatOptionLabel}
+      form="DO_NOT_SUBMIT_ON_ENTER"
     />
   );
 };
 
 export default TypeAheadEnumParamComponent;
+
+function formatOptionLabel(option: Option) {
+  return safeHtml(option.label);
+}

From 298457c484c4c2e97e86edca525007baeeb99003 Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Tue, 12 Nov 2024 14:44:28 -0500
Subject: [PATCH 03/11] User datasets verbiage and config (#1271)

* Fix caps

* update verbiage

* Allow upload user-dataset types to be configurable
---
 packages/libs/web-common/src/config.ts        |  1 +
 .../src/user-dataset-upload-config.tsx        | 31 ++++++++-----------
 .../js/client/userDatasetRoutes.tsx           |  9 ++++--
 .../genomics-site/webpack.config.local.mjs    |  1 +
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/libs/web-common/src/config.ts b/packages/libs/web-common/src/config.ts
index 2b399a26e2..2237999d48 100644
--- a/packages/libs/web-common/src/config.ts
+++ b/packages/libs/web-common/src/config.ts
@@ -35,6 +35,7 @@ export const {
   datasetImportUrl = '',
   showUnreleasedData = false,
   vdiServiceUrl = '',
+  userDatasetsUploadTypes = '',
 } = window.__SITE_CONFIG__;
 
 export const edaExampleAnalysesAuthors = !window.__SITE_CONFIG__
diff --git a/packages/libs/web-common/src/user-dataset-upload-config.tsx b/packages/libs/web-common/src/user-dataset-upload-config.tsx
index 58d56229f1..2817c21792 100644
--- a/packages/libs/web-common/src/user-dataset-upload-config.tsx
+++ b/packages/libs/web-common/src/user-dataset-upload-config.tsx
@@ -45,23 +45,18 @@ export const uploadTypeConfig: DatasetUploadTypeConfig<ImplementedUploadTypes> =
         },
         renderInfo: () => (
           <p className="formInfo">
-            Please upload a zip file with your RNASeq results: your bigWig and
-            fpkm fastq files containing your processed reads.
-            <br />
-            Each file in the collection of FPKM or TPM files should be a two
-            column tab-delimited file where the first column contains gene ids,
-            and the second column contains normalized counts for each gene,
-            either FPKM or TPM. The first line must have column headings
-            'gene_id' and either 'FPKM' or 'TMP'.
-            <br />
-            <br />
-            The files must be mapped to the reference genome that you select
-            above.
-            <br />
-            Only letters, numbers, spaces and dashes are allowed in the file
-            name.
-            <br />
-            Please restrict the name to 100 characters or less.
+            Complete the Upload My Normalized RNA-Seq form. Name, Summary and
+            Upload File/URL are required. Three types of files – bigWig, counts
+            and index – are supported in the uploaded zip file. BigWig files are
+            not required but will allow visualization in the genome browser if
+            included. The counts (FPKM/TPM) files should be tab-delimited and
+            contain two columns with column headers: 'gene_id', and either
+            'FPKM' or 'TMP'. The index file should be named manifest.txt and
+            consist of a tab delimited txt file with three columns (no column
+            headers): sample name, filename, and strandedness
+            (unstranded/stranded). Upload Data Set initiates the transfer and
+            will create a record page for your data set that contains links to
+            the fold change search, and bigWig files if included.
           </p>
         ),
         uploadMethodConfig: {
@@ -82,7 +77,7 @@ export const uploadTypeConfig: DatasetUploadTypeConfig<ImplementedUploadTypes> =
     bigwigfiles: {
       type: 'bigwigfiles',
       displayName: 'bigWig',
-      description: `Integrate your BigWig data in ${projectId}.`,
+      description: `Integrate your bigWig data in ${projectId}.`,
       uploadTitle: 'Upload My bigWig Data Set',
       formConfig: {
         summary: {
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/userDatasetRoutes.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/userDatasetRoutes.tsx
index 7bdbef30c1..eb28d3baeb 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/userDatasetRoutes.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/userDatasetRoutes.tsx
@@ -5,7 +5,10 @@ import { useLocation } from 'react-router-dom';
 import { Loading } from '@veupathdb/wdk-client/lib/Components';
 import { RouteEntry } from '@veupathdb/wdk-client/lib/Core/RouteEntry';
 
-import { communitySite } from '@veupathdb/web-common/lib/config';
+import {
+  communitySite,
+  userDatasetsUploadTypes,
+} from '@veupathdb/web-common/lib/config';
 import ExternalContentController from '@veupathdb/web-common/lib/controllers/ExternalContentController';
 
 import { uploadTypeConfig } from '@veupathdb/web-common/lib/user-dataset-upload-config';
@@ -14,7 +17,9 @@ const UserDatasetRouter = React.lazy(
   () => import('./controllers/UserDatasetRouter')
 );
 
-const availableUploadTypes = ['genelist', 'bigwigfiles', 'rnaseq'];
+const availableUploadTypes = userDatasetsUploadTypes.trim()
+  ? userDatasetsUploadTypes.split(/,\s*/g)
+  : ['genelist', 'bigwigfiles', 'rnaseq'];
 
 const USER_DATASETS_HELP_PAGE = 'user_datasets_help.html';
 
diff --git a/packages/sites/genomics-site/webpack.config.local.mjs b/packages/sites/genomics-site/webpack.config.local.mjs
index 31da24b884..35e6dbc824 100644
--- a/packages/sites/genomics-site/webpack.config.local.mjs
+++ b/packages/sites/genomics-site/webpack.config.local.mjs
@@ -48,6 +48,7 @@ export default configure({
         siteSearchServiceUrl: process.env.SITE_SEARCH_SERVICE_ENDPOINT,
         useUserDatasetsWorkspace: process.env.USER_DATASETS_WORKSPACE_ENABLED === 'true',
         datasetImportUrl: process.env.USER_DATASETS_WORKSPACE_IMPORT_SERVICE_ENDPOINT,
+        userDatasetsUploadTypes: process.env.USER_DATASETS_UPLOAD_TYPES,
         useEda: process.env.EDA_ENABLED === "true",
         edaExampleAnalysesAuthor: process.env.EDA_EXAMPLE_ANALYSES_AUTHOR,
         edaServiceUrl: process.env.EDA_SERVICE_ENDPOINT,

From f8cfb2a357ea2142c41a67890614b5eab4555e1a Mon Sep 17 00:00:00 2001
From: bobular <uncoolbob@gmail.com>
Date: Thu, 14 Nov 2024 20:10:01 +0000
Subject: [PATCH 04/11] OrthoMCL - Custom tree-table for OrthoGroup page (#904)

* made a start - WIP

* re-render sequence table with Mesa

* tweak comments

* WIP

* loosely wire in TreeTable and get shimmimg working

* add patristic and basic type support

* made a start with controlling table row height but should investigate the Mesa inline option

* added Mesa table tooltips for td contents when in 'inline' mode (basically fixed-height mode)

* use Mesa's inline option and tidy up

* Revert "added Mesa table tooltips for td contents when in 'inline' mode (basically fixed-height mode)"

This reverts commit f215762e18da269ff8a08539c90d16488d61c87f.

* remove placeholder td title

* restore whitespace in DataCell.tsx

* upgrade tidytree and use new interactive option

* table and tree order are the same

* added basic checkboxes

* WIP clustal form

* that's hopefully clustal sorted - but can't test with local ortho-site

* improve 'must select two proteins' verbiage

* de-complicate .DataTable margin-bottom override

* rename TreeResponse to GroupTreeResponse

* add PFam domain architecture column

* ugly search working as a demo on description column

* add warning banner for data issue and tweak pfam column heading

* used RealTimeSearchBox and made regexps safer and reorganised so we can useMemo for the table filtering

* more memo and remove some commented code

* add tree filtering

* tree highlighting works with filtering now, dependency issues fixed

* add core/peripheral filtering

* added pfam legend - needs wiring still

* wired up pfam checkboxes to table search

* added the row count

* conditionally render pfam legend and add heading

* Remove vert scrollbar from tidytree table

* remove code that collapsed the main section of the orthogroup page

* no longer request trees for 1 or 2 sequences; fix RowCounter props change; fix some imports

* fudge to sort table based on dodgy colon-containing full_ids

* make tree darker and make tree/table check more robust

* provide PFam descriptions in domain cartoon tooltips

* sort out row counts

* add better console logging for tree/table mismatches

* made tree-table comparison for console more robust

* add inlineUseTooltips options prop but not working fully yet

* attempted better handling of very large groups

* looks good now

* removed full_id column (from display only) and added Accession aka sequence_link column and enabled the link

* Use flex for label to allow for block children

* Use SelectList for Pfam filter

* Explicit empty PFam legend

* Use similar style for core/peripheral filter

* Add species filter to protein table

* prevent overflow in SelectTree button with many items selected; also use flex-wrap to prevent large buttons crowding the search box

* add shouldOnlyUpdateOnClose option to SelectTree

* remove some unused imports

* add MAX_SEQUENCES_FOR_TREE logic

* selected row highlighting

* tone down the row background color

* don't indent search bar and filters

* add instantUpdate option to SelectList

* revert taxon filter to instant-update

* instantUpdate for core/peripheral filter

* Pfam architectures are now scaled by protein length

* removed core-only filter for larger groups

* improved table sort and filter performance - added comments about further optimisations

* rename shouldOnlyUpdateOnClose to instantUpdate

* remove an effect

* missed a setSelected and dependency

* final tweaks to button label behaviour

* add reset button, revisit filter button layout

* placeholder wrapper for image next to group stats

* restore the buttonless phyletic distribution

* improved comment/documentation

* Adding update evalue histogram

* static histogram image now shows, with elaborate width-setting for caption below

* make caption rendering smoother - no horizontal shifting of the figure

* moved png file again

* simplified to hardcoded dimensions

* Address typescript errors

* remove taxon_abbrev column

* rename Taxon column to Clade

* rename Species filter button to Organism

* improve filter button layout, especially when buttons have expanded content

* fix Omit prop typo that wasn't detected because only consumer so far was a JSX file

* main proteins table now has fully-fledged search box with column selector

* moved styling to .scss file

* revert column changes now that model is updated OrthoMCLModel#5

* added new WDK record scope - record-collapsed

* added Dave's suggestions

* merge in npm action change

* cherry picking missed this line

* Orthogroup tree table  perf (#1233)

* Only call anchorNode.scrollIntoView() if the position has changed

* Update note to handle MIN_SEQUENCES_FOR_TREE

* useDeferredValue partially working

* onSpeciesSelected wasn't stable, is now

* replace debouncing with deferred value for CheckboxTree searchTerm

* tidy up

* new useDeferredState hook

* Use fixed dimensions for organism filter of protein table

* the very basics

* straw man ready

* forgot the reset button

* DRYed up a bit

* fixed the edge case as described in PR, improved search box responsiveness

* text search field selectors now more responsive

* added asterisk and improved filter positioning

* fixed broken logic with corePeripheral filter

* memoized rowsByAccession and mesaState and fixed some logic errors

* memoize treeProps just for tidiness

* replaced the key hack with ref approach

* Orthogroup tree table - tooltips (#1253)

* new warning added, no new component, sorry

* improved tree error warning with link to contact form

* use display names in SelectList button labels

* standardised search behaviour with help text

* fixed broken protein popover with useImperativeHandle deps array

* protein filter and paged table interaction fixed

* fixed label display issue in EDA

* Convert to function component with simple debounce logic using setTimeout

* Make callbacks stable across renders

* target _blank

* fix import path

* show table for 1 or 2 protein groups, not the error. Changes to CheckboxList/SelectList generics 1 of 2

* changes to CheckboxList/SelectList generics 2 of 2

* reset button also cancels text search

* error banner was showing instead of loading spinner for large groups, now it isn't

* use const for min seqs in tree

* Remove style override that is no longer necessary

---------

Co-authored-by: Dave Falke <dfalke@uga.edu>
Co-authored-by: Richard Demko <rdemko@palm.penn.apidb.org>
---
 packages/libs/components/package.json         |   2 +-
 .../tidytree/HorizontalDendrogram.tsx         |  33 +-
 .../src/components/tidytree/TreeTable.scss    |   6 +
 .../src/components/tidytree/TreeTable.tsx     |  99 +-
 .../src/components/tidytree/tidytree.d.ts     |   1 +
 .../components/widgets/RadioButtonGroup.tsx   |   5 +-
 .../src/components/Mesa/Ui/DataCell.jsx       |  25 +-
 .../coreui/src/components/Mesa/Ui/DataRow.jsx |  10 +-
 .../src/components/Mesa/Ui/DataTable.jsx      |  92 +-
 .../src/components/Mesa/Ui/MesaController.jsx |   4 +-
 .../src/components/Mesa/Ui/RowCounter.jsx     |   7 +-
 .../src/components/Mesa/Ui/TableSearch.jsx    |   2 +-
 .../src/components/Mesa/Ui/TableToolbar.jsx   |  10 +-
 .../components/Mesa/style/Ui/DataTable.scss   |  28 +-
 .../Mesa/style/Ui/TableToolbar.scss           |   8 +
 .../libs/coreui/src/components/Mesa/types.ts  |   8 +
 .../buttons/PopoverButton/PopoverButton.tsx   | 196 ++--
 .../src/components/inputs/SelectList.tsx      |  57 +-
 .../inputs/SelectTree/SelectTree.tsx          |  55 +-
 .../inputs/checkboxes/CheckboxList.tsx        |   6 +-
 .../checkboxes/CheckboxTree/CheckboxTree.tsx  |  25 +-
 packages/libs/coreui/src/hooks.tsx            |  33 +-
 packages/libs/coreui/src/index.ts             |   3 +
 .../SearchBox/RealTimeSearchBox.tsx           | 195 ++--
 .../src/StoreModules/RecordStoreModule.ts     |  22 +-
 .../wdk-client/src/Utils/CategoryUtils.tsx    |   1 +
 .../libs/wdk-client/src/Utils/DomUtils.ts     |  18 +-
 .../wdk-client/src/Views/Answer/Answer.jsx    |   2 +-
 .../Records/RecordTable/RecordFilter.tsx      |   2 +-
 .../Views/Records/RecordTable/RecordTable.jsx |  30 +-
 .../RecordTable/RecordTableDescription.jsx    |  60 +-
 .../src/Views/Records/RecordUtils.ts          |   9 +-
 packages/sites/ortho-site/.eslintrc           |   2 +-
 packages/sites/ortho-site/package.json        |   5 +-
 .../pfam-domains/PfamDomainArchitecture.tsx   |  19 +-
 .../PhyleticDistributionCheckbox.tsx          |  77 +-
 .../GroupRecordClasses.GroupRecordClass.scss  |  28 +
 .../GroupRecordClasses.GroupRecordClass.tsx   |   3 +
 .../js/client/records/GroupStats.tsx          |  44 +
 .../RecordTable_TaxonCounts_Filter.tsx        |  44 +
 .../js/client/records/Sequences.jsx           | 112 ---
 .../js/client/records/Sequences.tsx           | 866 ++++++++++++++++++
 .../js/client/records/eval-hist.png           | Bin 0 -> 24039 bytes
 .../wdkCustomization/js/client/services.tsx   |  12 +
 .../client/store-modules/RecordStoreModule.ts |  24 -
 .../js/client/types/images.d.ts               |   4 +
 .../js/client/types/patristic.d.ts            |  22 +
 .../wdkCustomization/js/client/utils/tree.ts  |   3 +
 packages/sites/ortho-site/webpack.config.js   |  16 +-
 yarn.lock                                     |  18 +-
 50 files changed, 1767 insertions(+), 586 deletions(-)
 create mode 100644 packages/libs/components/src/components/tidytree/TreeTable.scss
 create mode 100644 packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupStats.tsx
 create mode 100644 packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/RecordTable_TaxonCounts_Filter.tsx
 delete mode 100644 packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.jsx
 create mode 100644 packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx
 create mode 100644 packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/eval-hist.png
 create mode 100644 packages/sites/ortho-site/webapp/wdkCustomization/js/client/types/images.d.ts
 create mode 100644 packages/sites/ortho-site/webapp/wdkCustomization/js/client/types/patristic.d.ts
 create mode 100644 packages/sites/ortho-site/webapp/wdkCustomization/js/client/utils/tree.ts

diff --git a/packages/libs/components/package.json b/packages/libs/components/package.json
index c8d6c7cdf3..7dd2e9b92d 100755
--- a/packages/libs/components/package.json
+++ b/packages/libs/components/package.json
@@ -46,7 +46,7 @@
     "react-spring": "^9.7.1",
     "react-transition-group": "^4.4.1",
     "shape2geohash": "^1.2.5",
-    "tidytree": "github:d-callan/TidyTree"
+    "tidytree": "https://github.com/d-callan/TidyTree.git#commit=9063e2df3d93c72743702a6d8f43169a1461e5b0"
   },
   "files": [
     "lib",
diff --git a/packages/libs/components/src/components/tidytree/HorizontalDendrogram.tsx b/packages/libs/components/src/components/tidytree/HorizontalDendrogram.tsx
index 54ccefc3fc..f5ffb2e646 100644
--- a/packages/libs/components/src/components/tidytree/HorizontalDendrogram.tsx
+++ b/packages/libs/components/src/components/tidytree/HorizontalDendrogram.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import { CSSProperties, useEffect, useLayoutEffect, useRef } from 'react';
 import { TidyTree as TidyTreeJS } from 'tidytree';
 
 export interface HorizontalDendrogramProps {
@@ -19,6 +19,7 @@ export interface HorizontalDendrogramProps {
        for now just default to all zero margins (left-most edges 
      */
     margin?: [number, number, number, number];
+    interactive?: boolean;
   };
 
   /// The remaining props are handled with a redraw: ///
@@ -31,10 +32,21 @@ export interface HorizontalDendrogramProps {
    * width of tree in pixels
    */
   width: number;
+  /**
+   * hopefully temporary prop that we can get rid of when we understand the
+   * horizontal layout behaviour of the tree (with respect to number of nodes)
+   * which will come with testing with more examples. Defaults to 1.0
+   * update: possibly wasn't needed in the end!
+   */
+  hStretch?: number;
   /**
    * number of pixels height taken per leaf
    */
   rowHeight: number;
+  /**
+   * CSS styles for the container div
+   */
+  containerStyles?: CSSProperties;
   /**
    * which leaf nodes to highlight
    */
@@ -43,6 +55,10 @@ export interface HorizontalDendrogramProps {
    * highlight whole subtrees ('monophyletic') or just leaves ('none')
    */
   highlightMode?: 'monophyletic' | 'none';
+  /**
+   * highlight color (optional - default is tidytree's yellow/orange)
+   */
+  highlightColor?: string;
 }
 
 /**
@@ -57,9 +73,12 @@ export function HorizontalDendrogram({
   leafCount,
   rowHeight,
   width,
-  options: { ruler = false, margin = [0, 0, 0, 0] },
+  options: { ruler = false, margin = [0, 0, 0, 0], interactive = true },
   highlightedNodeIds,
   highlightMode,
+  highlightColor,
+  hStretch = 1.0,
+  containerStyles,
 }: HorizontalDendrogramProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const tidyTreeRef = useRef<TidyTreeJS>();
@@ -80,13 +99,15 @@ export function HorizontalDendrogram({
       equidistantLeaves: true,
       ruler,
       margin,
+      hStretch,
       animation: 0, // it's naff and it reveals edge lengths/weights momentarily
+      interactive,
     });
     tidyTreeRef.current = instance;
     return function cleanup() {
       instance.destroy();
     };
-  }, [data, ruler, margin]);
+  }, [data, ruler, margin, hStretch, interactive, containerRef]);
 
   // redraw when the container size changes
   // useLayoutEffect ensures that the redraw is not called for brand new TidyTreeJS objects
@@ -106,12 +127,15 @@ export function HorizontalDendrogram({
       tidyTreeRef.current.setColorOptions({
         nodeColorMode: 'predicate',
         branchColorMode: highlightMode ?? 'none',
+        highlightColor: highlightColor,
         leavesOnly: true,
         predicate: (node) => highlightedNodeIds.includes(node.__data__.data.id),
+        defaultBranchColor: '#333',
       });
       // no redraw needed, setColorOptions does it
     }
-  }, [highlightedNodeIds, highlightMode, tidyTreeRef]);
+  }, [highlightedNodeIds, highlightMode, tidyTreeRef, data]);
+  // `data` not used in effect but needed to trigger recoloring
 
   const containerHeight = leafCount * rowHeight;
   return (
@@ -119,6 +143,7 @@ export function HorizontalDendrogram({
       style={{
         width: width + 'px',
         height: containerHeight + 'px',
+        ...containerStyles,
       }}
       ref={containerRef}
     />
diff --git a/packages/libs/components/src/components/tidytree/TreeTable.scss b/packages/libs/components/src/components/tidytree/TreeTable.scss
new file mode 100644
index 0000000000..a0db3683bf
--- /dev/null
+++ b/packages/libs/components/src/components/tidytree/TreeTable.scss
@@ -0,0 +1,6 @@
+.TreeTable {
+  --tree-table-row-height: 1em;
+  tr {
+    height: var(--tree-table-row-height);
+  }
+}
diff --git a/packages/libs/components/src/components/tidytree/TreeTable.tsx b/packages/libs/components/src/components/tidytree/TreeTable.tsx
index 35eb2fc55f..86aaece058 100644
--- a/packages/libs/components/src/components/tidytree/TreeTable.tsx
+++ b/packages/libs/components/src/components/tidytree/TreeTable.tsx
@@ -5,15 +5,20 @@ import {
 } from '../../components/tidytree/HorizontalDendrogram';
 import Mesa from '@veupathdb/coreui/lib/components/Mesa';
 import { MesaStateProps } from '../../../../coreui/lib/components/Mesa/types';
-import { css as classNameStyle, cx } from '@emotion/css';
-import { css as globalStyle, Global } from '@emotion/react';
+
+import './TreeTable.scss';
 
 export interface TreeTableProps<RowType> {
   /**
    * number of pixels vertical space for each row of the table and tree
    * (for the table this is a minimum height, so make sure table content doesn't wrap)
+   * required; no default; minimum seems to be 42; suggested value: 45
    */
   rowHeight: number;
+  /**
+   * number of pixels max width for table columns; defaults to 200
+   */
+  maxColumnWidth?: number;
   /**
    * data and options for the tree
    */
@@ -25,8 +30,18 @@ export interface TreeTableProps<RowType> {
    * data and options for the table
    */
   tableProps: MesaStateProps<RowType>;
+  /**
+   * hide the tree (but keep its horizontal space); default = false
+   */
+  hideTree?: boolean;
+  /**
+   * Passed as children to the `Mesa` component
+   */
+  children?: React.ReactNode;
 }
 
+const margin: [number, number, number, number] = [0, 10, 0, 10];
+
 /**
  * main props are
  *   data: string;    // Newick format tree
@@ -42,50 +57,52 @@ export interface TreeTableProps<RowType> {
  * - allow additional Mesa props and options to be passed
  */
 export default function TreeTable<RowType>(props: TreeTableProps<RowType>) {
-  const { rowHeight } = props;
-  const { rows } = props.tableProps;
-
-  const rowStyleClassName = useMemo(
-    () =>
-      cx(
-        classNameStyle({
-          height: rowHeight + 'px',
-          background: 'yellow',
-        })
-      ),
-    [rowHeight]
-  );
+  const { rowHeight, maxColumnWidth = 200, hideTree = false, children } = props;
+  const { rows, filteredRows } = props.tableProps;
 
   // tableState is just the tableProps with an extra CSS class
   // to make sure the height is consistent with the tree
-  const tableState: MesaStateProps<RowType> = {
-    ...props.tableProps,
-    options: {
-      ...props.tableProps.options,
-      deriveRowClassName: (_) => rowStyleClassName,
-    },
-  };
-
-  return (
-    <div
-      style={{ display: 'flex', alignItems: 'flex-end', flexDirection: 'row' }}
-    >
+  const tableState: MesaStateProps<RowType> = useMemo(() => {
+    const tree = hideTree ? null : (
       <HorizontalDendrogram
         {...props.treeProps}
         rowHeight={rowHeight}
-        leafCount={rows.length}
-        options={{ margin: [0, 10, 0, 10] }}
+        leafCount={filteredRows?.length ?? rows.length}
+        options={{ margin, interactive: false }}
       />
-      <>
-        <Global
-          styles={globalStyle`
-	  .DataTable {
-	    margin-bottom: 0px !important;
-	  }
-	`}
-        />
-        <Mesa state={tableState} />
-      </>
-    </div>
-  );
+    );
+
+    return {
+      ...props.tableProps,
+      options: {
+        ...props.tableProps.options,
+        className: 'TreeTable',
+        style: {
+          '--tree-table-row-height': rowHeight + 'px',
+        } as React.CSSProperties,
+        inline: true,
+        // TO DO: explore event delegation to avoid each tooltip having handlers
+        //        replace inline mode's inline styling with emotion classes
+        inlineUseTooltips: true,
+        inlineMaxHeight: `${rowHeight}px`,
+        inlineMaxWidth: `${maxColumnWidth}px`,
+        marginContent: tree,
+      },
+    };
+  }, [
+    filteredRows?.length,
+    hideTree,
+    maxColumnWidth,
+    props.tableProps,
+    props.treeProps,
+    rowHeight,
+    rows.length,
+  ]);
+
+  // if `hideTree` is used more dynamically than at present
+  // (for example if the user sorts the table)
+  // then the table container styling will need
+  // { marginLeft: hideTree ? props.treeProps.width : 0 }
+  // to stop the table jumping around horizontally
+  return <Mesa state={tableState} children={children} />;
 }
diff --git a/packages/libs/components/src/components/tidytree/tidytree.d.ts b/packages/libs/components/src/components/tidytree/tidytree.d.ts
index 254f32e428..c2be3d971f 100644
--- a/packages/libs/components/src/components/tidytree/tidytree.d.ts
+++ b/packages/libs/components/src/components/tidytree/tidytree.d.ts
@@ -15,6 +15,7 @@ interface ColorOptions {
   branchColorMode: 'monophyletic' | 'none';
   highlightColor?: string;
   defaultNodeColor?: string;
+  defaultBranchColor?: string;
 }
 
 declare module 'tidytree' {
diff --git a/packages/libs/components/src/components/widgets/RadioButtonGroup.tsx b/packages/libs/components/src/components/widgets/RadioButtonGroup.tsx
index 7dec8ecb84..3b0fe98827 100755
--- a/packages/libs/components/src/components/widgets/RadioButtonGroup.tsx
+++ b/packages/libs/components/src/components/widgets/RadioButtonGroup.tsx
@@ -40,6 +40,8 @@ export type RadioButtonGroupProps = {
    * if a Map is used, then the values are used in Tooltips to explain why each option is disabled
    */
   disabledList?: string[] | Map<string, ReactNode>;
+  /** capitalize of the labels; default: true */
+  capitalizeLabels?: boolean;
 };
 
 /**
@@ -62,6 +64,7 @@ export default function RadioButtonGroup({
   margins,
   itemMarginRight,
   disabledList,
+  capitalizeLabels = true,
 }: RadioButtonGroupProps) {
   const isDisabled = (option: string) => {
     if (!disabledList) return false;
@@ -141,7 +144,7 @@ export default function RadioButtonGroup({
                   marginRight: itemMarginRight,
                   fontSize: '0.75em',
                   fontWeight: 400,
-                  textTransform: 'capitalize',
+                  textTransform: capitalizeLabels ? 'capitalize' : undefined,
                   minWidth: minWidth,
                 }}
               />
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx
index 62fa58732d..fa88237b2a 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/DataCell.jsx
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import Templates from '../Templates';
 import { makeClassifier } from '../Utils/Utils';
 
+import { Tooltip } from '../../../components/info/Tooltip';
+
 const dataCellClass = makeClassifier('DataCell');
 
 class DataCell extends React.PureComponent {
@@ -47,8 +49,14 @@ class DataCell extends React.PureComponent {
     }
   }
 
+  setTitle(el) {
+    if (el == null) return;
+    el.title = el.scrollWidth <= el.clientWidth ? '' : el.innerText;
+  }
+
   render() {
-    let { column, inline, options, isChildRow, childRowColSpan } = this.props;
+    let { column, inline, options, isChildRow, childRowColSpan, rowIndex } =
+      this.props;
     let { style, width, className, key } = column;
 
     let whiteSpace = !inline
@@ -64,15 +72,24 @@ class DataCell extends React.PureComponent {
     width = width ? { width, maxWidth: width, minWidth: width } : {};
     style = Object.assign({}, style, width, whiteSpace);
     className = dataCellClass() + (className ? ' ' + className : '');
-    const children = this.renderContent();
+
+    const content = this.renderContent();
+
     const props = {
       style,
-      children,
+      children: content,
       className,
       ...(isChildRow ? { colSpan: childRowColSpan } : null),
     };
 
-    return column.hidden ? null : <td key={key} {...props} />;
+    return column.hidden ? null : (
+      <td
+        onMouseEnter={(e) => this.setTitle(e.target)}
+        onMouseLeave={() => this.setTitle()}
+        key={key + '_' + rowIndex}
+        {...props}
+      />
+    );
   }
 }
 
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx
index d53ec90a5d..6382798461 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/DataRow.jsx
@@ -30,22 +30,22 @@ class DataRow extends React.PureComponent {
 
   expandRow() {
     const { options } = this.props;
-    if (!options.inline) return;
+    if (!options.inline || options.inlineUseTooltips) return;
     this.setState({ expanded: true });
   }
 
   collapseRow() {
     const { options } = this.props;
-    if (!options.inline) return;
+    if (!options.inline || options.inlineUseTooltips) return;
     this.setState({ expanded: false });
   }
 
   handleRowClick() {
     const { row, rowIndex, options } = this.props;
-    const { inline, onRowClick } = options;
+    const { inline, onRowClick, inlineUseTooltips } = options;
     if (!inline && !onRowClick) return;
-
-    if (inline) this.setState({ expanded: !this.state.expanded });
+    if (inline && !inlineUseTooltips)
+      this.setState({ expanded: !this.state.expanded });
     if (typeof onRowClick === 'function') onRowClick(row, rowIndex);
   }
 
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx b/packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx
index 95123e029a..799682ad59 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/DataTable.jsx
@@ -16,7 +16,6 @@ class DataTable extends React.Component {
     super(props);
     this.widthCache = {};
     this.state = { dynamicWidths: null, tableWrapperWidth: null };
-    this.renderPlainTable = this.renderPlainTable.bind(this);
     this.renderStickyTable = this.renderStickyTable.bind(this);
     this.componentDidMount = this.componentDidMount.bind(this);
     this.getInnerCellWidth = this.getInnerCellWidth.bind(this);
@@ -201,10 +200,8 @@ class DataTable extends React.Component {
             columns: stickyColumns,
             dynamicWidths,
           });
-    const bodyWrapperStyle = {
-      maxHeight: options ? options.tableBodyMaxHeight : null,
-    };
     const wrapperStyle = {
+      maxHeight: options ? options.tableBodyMaxHeight : null,
       minWidth: dynamicWidths
         ? combineWidths(columns.map(({ width }) => width))
         : null,
@@ -225,66 +222,49 @@ class DataTable extends React.Component {
     };
     return (
       <div ref={(node) => (this.mainRef = node)} className="MesaComponent">
-        <div className={dataTableClass()} style={wrapperStyle}>
-          <div className={dataTableClass('Sticky')} style={wrapperStyle}>
-            <div
-              style={headerWrapperStyleMerged}
-              ref={(node) => (this.headerNode = node)}
-              className={dataTableClass('Header')}
-            >
-              <table cellSpacing={0} cellPadding={0} style={tableLayout}>
-                <HeadingRow {...tableProps} />
-              </table>
-            </div>
-            <div
-              style={bodyWrapperStyle}
-              ref={(node) => (this.bodyNode = node)}
-              className={dataTableClass('Body')}
-              onScroll={this.handleTableBodyScroll}
+        <div
+          className={dataTableClass(
+            null,
+            options.useStickyHeader ? 'Sticky' : null
+          )}
+          style={wrapperStyle}
+        >
+          <div
+            style={headerWrapperStyleMerged}
+            ref={(node) => (this.headerNode = node)}
+            className={dataTableClass('Header')}
+          >
+            <table cellSpacing={0} cellPadding={0} style={{ ...tableLayout }}>
+              <HeadingRow {...tableProps} />
+            </table>
+          </div>
+          <div
+            ref={(node) => (this.bodyNode = node)}
+            className={dataTableClass('Body')}
+            onScroll={this.handleTableBodyScroll}
+          >
+            <table
+              cellSpacing={0}
+              cellPadding={0}
+              style={tableLayout}
+              ref={(node) => (this.contentTable = node)}
             >
-              <table
-                cellSpacing={0}
-                cellPadding={0}
-                style={tableLayout}
-                ref={(node) => (this.contentTable = node)}
-              >
-                {dynamicWidths == null ? <HeadingRow {...tableProps} /> : null}
-                <DataRowList {...tableProps} />
-              </table>
-            </div>
+              {dynamicWidths == null ? <HeadingRow {...tableProps} /> : null}
+              <DataRowList {...tableProps} />
+            </table>
           </div>
-        </div>
-      </div>
-    );
-  }
-
-  renderPlainTable() {
-    const { props } = this;
-    const { options, columns } = props;
-
-    const stickyColumns = options.useStickyFirstNColumns
-      ? this.makeFirstNColumnsSticky(columns, options.useStickyFirstNColumns)
-      : columns;
-    const newProps = {
-      ...props,
-      columns: stickyColumns,
-    };
-
-    return (
-      <div className="MesaComponent">
-        <div className={dataTableClass()}>
-          <table cellSpacing="0" cellPadding="0">
-            <HeadingRow {...newProps} />
-            <DataRowList {...newProps} />
-          </table>
+          {this.props.options.marginContent && (
+            <div className={dataTableClass('Margin')}>
+              {this.props.options.marginContent}
+            </div>
+          )}
         </div>
       </div>
     );
   }
 
   render() {
-    const { shouldUseStickyHeader, renderStickyTable, renderPlainTable } = this;
-    return shouldUseStickyHeader() ? renderStickyTable() : renderPlainTable();
+    return this.renderStickyTable();
   }
 }
 
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/MesaController.jsx b/packages/libs/coreui/src/components/Mesa/Ui/MesaController.jsx
index 93d490ae02..cf4f3d44ff 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/MesaController.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/MesaController.jsx
@@ -97,8 +97,10 @@ class MesaController extends React.Component {
     const PageNav = this.renderPaginationMenu;
     const Empty = this.renderEmptyState;
 
+    const className = (options.className ?? '') + ' Mesa MesaComponent';
+
     return (
-      <div className="Mesa MesaComponent">
+      <div className={className} style={options.style}>
         <Toolbar />
         <ActionBar />
         <PageNav />
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/RowCounter.jsx b/packages/libs/coreui/src/components/Mesa/Ui/RowCounter.jsx
index ce66c5789d..4657e08294 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/RowCounter.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/RowCounter.jsx
@@ -31,7 +31,10 @@ class RowCounter extends React.PureComponent {
       : start - 1 + rowsPerPage;
 
     let filterString = !filteredRowCount ? null : (
-      <span className="faded"> (filtered from a total of {count})</span>
+      <span className="faded">
+        {' '}
+        (filtered from a total of {count.toLocaleString()})
+      </span>
     );
     const remainingRowCount = !filteredRowCount
       ? count
@@ -39,7 +42,7 @@ class RowCounter extends React.PureComponent {
 
     let countString = (
       <span>
-        <b>{remainingRowCount}</b> {noun}
+        <b>{remainingRowCount.toLocaleString()}</b> {noun}
       </span>
     );
     let allResultsShown =
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/TableSearch.jsx b/packages/libs/coreui/src/components/Mesa/Ui/TableSearch.jsx
index 4febc2197e..64fabbf22a 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/TableSearch.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/TableSearch.jsx
@@ -18,7 +18,7 @@ class TableSearch extends React.PureComponent {
   clearSearchQuery() {
     const query = null;
     const { onSearch } = this.props;
-    if (onSearch) onSearch(query);
+    if (onSearch) onSearch('');
   }
 
   render() {
diff --git a/packages/libs/coreui/src/components/Mesa/Ui/TableToolbar.jsx b/packages/libs/coreui/src/components/Mesa/Ui/TableToolbar.jsx
index 522d87282a..3853b92e66 100644
--- a/packages/libs/coreui/src/components/Mesa/Ui/TableToolbar.jsx
+++ b/packages/libs/coreui/src/components/Mesa/Ui/TableToolbar.jsx
@@ -23,12 +23,18 @@ class TableToolbar extends React.PureComponent {
   }
 
   renderSearch() {
-    const { uiState, eventHandlers } = this.props;
+    const { uiState, eventHandlers, options } = this.props;
     const { onSearch } = eventHandlers;
     const { searchQuery } = uiState;
 
     if (!onSearch) return null;
-    return <TableSearch query={searchQuery} onSearch={onSearch} />;
+    return (
+      <TableSearch
+        searchQuery={searchQuery}
+        onSearch={onSearch}
+        options={options}
+      />
+    );
   }
 
   renderCounter() {
diff --git a/packages/libs/coreui/src/components/Mesa/style/Ui/DataTable.scss b/packages/libs/coreui/src/components/Mesa/style/Ui/DataTable.scss
index e87f3bc71f..bb4d37c72d 100644
--- a/packages/libs/coreui/src/components/Mesa/style/Ui/DataTable.scss
+++ b/packages/libs/coreui/src/components/Mesa/style/Ui/DataTable.scss
@@ -2,8 +2,34 @@
   .DataTable {
     font-size: $fontSize;
     width: 100%;
-    display: block;
     margin-bottom: 1.5em;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas:
+      '. header'
+      'margin body';
+    z-index: 0;
+
+    &--Sticky {
+      overflow: auto;
+      .DataTable-Header {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+    }
+
+    .DataTable-Header {
+      grid-area: header;
+    }
+
+    .DataTable-Body {
+      grid-area: body;
+    }
+
+    .DataTable-Margin {
+      grid-area: margin;
+    }
 
     table {
       width: 100%;
diff --git a/packages/libs/coreui/src/components/Mesa/style/Ui/TableToolbar.scss b/packages/libs/coreui/src/components/Mesa/style/Ui/TableToolbar.scss
index f2a8283559..67cc35d9bd 100644
--- a/packages/libs/coreui/src/components/Mesa/style/Ui/TableToolbar.scss
+++ b/packages/libs/coreui/src/components/Mesa/style/Ui/TableToolbar.scss
@@ -18,6 +18,14 @@
   .TableToolbar-Info {
     font-size: 80%;
     padding: 0px 20px 0px 10px;
+
+    .RowCounter {
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: row;
+      flex-wrap: wrap;
+      column-gap: 1em;
+    }
   }
 
   .TableToolbar-Children {
diff --git a/packages/libs/coreui/src/components/Mesa/types.ts b/packages/libs/coreui/src/components/Mesa/types.ts
index 54e792ae5a..7b4b70ff12 100644
--- a/packages/libs/coreui/src/components/Mesa/types.ts
+++ b/packages/libs/coreui/src/components/Mesa/types.ts
@@ -36,7 +36,9 @@ export interface MesaStateProps<
     inline?: boolean;
     inlineMaxWidth?: string;
     inlineMaxHeight?: string;
+    inlineUseTooltips?: boolean; // don't use onClick to show the full contents, use an onMouseOver tooltip instead
     className?: string;
+    style?: React.CSSProperties;
     errOnOverflow?: boolean;
     editableColumns?: boolean;
     overflowHeight?: string;
@@ -67,6 +69,12 @@ export interface MesaStateProps<
      */
     childRow?: (props: ChildRowProps<Row>) => ReactElement<ChildRowProps<Row>>;
     getRowId?: (row: Row) => string | number;
+    /**
+     * Renders the node in the left margin of the table.
+     * This can be useful for rendering a graphic that
+     * aligns with table rows, etc.
+     */
+    marginContent?: React.ReactNode;
   };
   actions?: MesaAction<Row, Key>[];
   eventHandlers?: {
diff --git a/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx b/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx
index 59a1fd2a3f..79b5f0f63b 100644
--- a/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx
+++ b/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx
@@ -1,4 +1,12 @@
-import { ReactNode, useState, useEffect, useMemo } from 'react';
+import {
+  ReactNode,
+  useState,
+  useEffect,
+  useMemo,
+  forwardRef,
+  useImperativeHandle,
+  useCallback,
+} from 'react';
 import { Popover } from '@material-ui/core';
 import SwissArmyButton from '../SwissArmyButton';
 import { gray } from '../../../definitions/colors';
@@ -66,6 +74,11 @@ const defaultStyle: ButtonStyleSpec = {
   },
 };
 
+export interface PopoverButtonHandle {
+  /** Closes the popover */
+  close: () => void;
+}
+
 export interface PopoverButtonProps {
   /** Contents of the menu when opened */
   children: ReactNode;
@@ -87,87 +100,100 @@ export interface PopoverButtonProps {
 /**
  * Renders a button that display `children` in a popover widget.
  */
-export default function PopoverButton(props: PopoverButtonProps) {
-  const {
-    children,
-    buttonDisplayContent,
-    onClose,
-    setIsPopoverOpen,
-    isDisabled = false,
-    styleOverrides = {},
-  } = props;
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-
-  const finalStyle = useMemo(
-    () => merge({}, defaultStyle, styleOverrides),
-    [styleOverrides]
-  );
-
-  const onCloseHandler = () => {
-    setAnchorEl(null);
-    onClose && onClose();
-  };
-
-  useEffect(() => {
-    if (!setIsPopoverOpen) return;
-    if (anchorEl) {
-      setIsPopoverOpen(true);
-    } else {
-      setIsPopoverOpen(false);
-    }
-  }, [anchorEl, setIsPopoverOpen]);
-
-  const menu = (
-    <Popover
-      id="dropdown"
-      aria-expanded={!!anchorEl}
-      open={Boolean(anchorEl)}
-      onClose={onCloseHandler}
-      anchorEl={anchorEl}
-      anchorOrigin={{
-        vertical: 'bottom',
-        horizontal: 'left',
-      }}
-      transformOrigin={{
-        vertical: 'top',
-        horizontal: 'left',
-      }}
-      keepMounted
-    >
-      {children}
-    </Popover>
-  );
-
-  const button = (
-    <SwissArmyButton
-      text={buttonDisplayContent}
-      textTransform="none"
-      onPress={(event) => setAnchorEl(event.currentTarget)}
-      disabled={isDisabled}
-      styleSpec={finalStyle}
-      icon={ArrowDown}
-      iconPosition="right"
-      additionalAriaProperties={{
-        'aria-controls': 'dropdown',
-        'aria-haspopup': 'true',
-        type: 'button',
-      }}
-    />
-  );
-
-  return (
-    <div
-      style={{
-        width: 'fit-content',
-        ...(isDisabled ? { cursor: 'not-allowed' } : {}),
-      }}
-      onClick={(event) => {
-        // prevent click event from propagating to ancestor nodes
-        event.stopPropagation();
-      }}
-    >
-      {button}
-      {menu}
-    </div>
-  );
-}
+
+const PopoverButton = forwardRef<PopoverButtonHandle, PopoverButtonProps>(
+  function PopoverButton(props, ref) {
+    const {
+      children,
+      buttonDisplayContent,
+      onClose,
+      setIsPopoverOpen,
+      isDisabled = false,
+      styleOverrides = {},
+    } = props;
+    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+
+    const finalStyle = useMemo(
+      () => merge({}, defaultStyle, styleOverrides),
+      [styleOverrides]
+    );
+
+    const onCloseHandler = useCallback(() => {
+      setAnchorEl(null);
+      onClose && onClose();
+    }, [onClose]);
+
+    // Expose the `close()` method to external components via ref
+    useImperativeHandle(
+      ref,
+      () => ({
+        close: onCloseHandler,
+      }),
+      [onCloseHandler]
+    );
+
+    useEffect(() => {
+      if (!setIsPopoverOpen) return;
+      if (anchorEl) {
+        setIsPopoverOpen(true);
+      } else {
+        setIsPopoverOpen(false);
+      }
+    }, [anchorEl, setIsPopoverOpen]);
+
+    const menu = (
+      <Popover
+        id="dropdown"
+        aria-expanded={!!anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={onCloseHandler}
+        anchorEl={anchorEl}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'left',
+        }}
+        keepMounted
+      >
+        {children}
+      </Popover>
+    );
+
+    const button = (
+      <SwissArmyButton
+        text={buttonDisplayContent}
+        textTransform="none"
+        onPress={(event) => setAnchorEl(event.currentTarget)}
+        disabled={isDisabled}
+        styleSpec={finalStyle}
+        icon={ArrowDown}
+        iconPosition="right"
+        additionalAriaProperties={{
+          'aria-controls': 'dropdown',
+          'aria-haspopup': 'true',
+        }}
+      />
+    );
+
+    return (
+      <div
+        style={{
+          width: 'fit-content',
+          ...(isDisabled ? { cursor: 'not-allowed' } : {}),
+        }}
+        onClick={(event) => {
+          // prevent click event from propagating to ancestor nodes
+          event.stopPropagation();
+        }}
+      >
+        {button}
+        {menu}
+      </div>
+    );
+  }
+);
+
+export default PopoverButton;
diff --git a/packages/libs/coreui/src/components/inputs/SelectList.tsx b/packages/libs/coreui/src/components/inputs/SelectList.tsx
index 1de1366795..8c3fd0a1ff 100644
--- a/packages/libs/coreui/src/components/inputs/SelectList.tsx
+++ b/packages/libs/coreui/src/components/inputs/SelectList.tsx
@@ -1,17 +1,25 @@
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useCallback, useEffect, useState } from 'react';
 import PopoverButton from '../buttons/PopoverButton/PopoverButton';
-import CheckboxList, { CheckboxListProps } from './checkboxes/CheckboxList';
+import CheckboxList, {
+  CheckboxListProps,
+  Item,
+} from './checkboxes/CheckboxList';
 
-export interface SelectListProps<T> extends CheckboxListProps<T> {
+export interface SelectListProps<T extends string>
+  extends CheckboxListProps<T> {
   children?: ReactNode;
   /** A button's content if/when no values are currently selected */
   defaultButtonDisplayContent: ReactNode;
   isDisabled?: boolean;
   /** Are contents loading? */
   isLoading?: boolean;
+  /** If true, don't wait for component to close before calling `onChange`
+   *  with latest selection.
+   */
+  instantUpdate?: boolean;
 }
 
-export default function SelectList<T>({
+export default function SelectList<T extends string>({
   name,
   items,
   value,
@@ -21,30 +29,45 @@ export default function SelectList<T>({
   defaultButtonDisplayContent,
   isDisabled = false,
   isLoading = false,
+  instantUpdate = false,
   ...props
 }: SelectListProps<T>) {
   const [selected, setSelected] = useState<SelectListProps<T>['value']>(value);
   const [buttonDisplayContent, setButtonDisplayContent] = useState<ReactNode>(
-    value.length ? value.join(', ') : defaultButtonDisplayContent
+    getDisplayContent(value, items, defaultButtonDisplayContent)
   );
 
   const onClose = () => {
     onChange(selected);
     setButtonDisplayContent(
-      selected.length ? selected.join(', ') : defaultButtonDisplayContent
+      getDisplayContent(selected, items, defaultButtonDisplayContent)
     );
   };
 
+  /**
+   * Keep caller up to date with any selection changes, if required by `instantUpdate`
+   */
+  const handleCheckboxListUpdate = useCallback(
+    (newSelection: SelectListProps<T>['value']) => {
+      setSelected(newSelection);
+      if (instantUpdate) {
+        onChange(newSelection);
+      }
+    },
+    [instantUpdate, setSelected, onChange]
+  );
+
   /**
    * Need to ensure that the state syncs with parent component in the event of an external
    * clearSelection button, as is the case in EDA's line plot controls
    */
   useEffect(() => {
     setSelected(value);
+    if (instantUpdate) return; // we don't want the button text changing on every click
     setButtonDisplayContent(
-      value.length ? value.join(', ') : defaultButtonDisplayContent
+      getDisplayContent(value, items, defaultButtonDisplayContent)
     );
-  }, [value, defaultButtonDisplayContent]);
+  }, [value, items, defaultButtonDisplayContent]);
 
   const buttonLabel = (
     <span
@@ -75,7 +98,7 @@ export default function SelectList<T>({
           name={name}
           items={items}
           value={selected}
-          onChange={setSelected}
+          onChange={handleCheckboxListUpdate}
           linksPosition={linksPosition}
           {...props}
         />
@@ -84,3 +107,19 @@ export default function SelectList<T>({
     </PopoverButton>
   );
 }
+
+// Returns button display content based on `value` array, mapping to display names from `items` when available.
+// If no matching display name is found, uses the value itself. Returns `defaultContent` if `value` is empty.
+function getDisplayContent<T extends string>(
+  value: T[],
+  items: Item<T>[],
+  defaultContent: ReactNode
+): ReactNode {
+  return value.length
+    ? value
+        .map<ReactNode>(
+          (v) => items.find((item) => item.value === v)?.display ?? v
+        )
+        .reduce((accum, elem) => (accum ? [accum, ',', elem] : elem), null)
+    : defaultContent;
+}
diff --git a/packages/libs/coreui/src/components/inputs/SelectTree/SelectTree.tsx b/packages/libs/coreui/src/components/inputs/SelectTree/SelectTree.tsx
index 7d7655073e..567f82ee28 100644
--- a/packages/libs/coreui/src/components/inputs/SelectTree/SelectTree.tsx
+++ b/packages/libs/coreui/src/components/inputs/SelectTree/SelectTree.tsx
@@ -8,8 +8,11 @@ import CheckboxTree, {
 export interface SelectTreeProps<T> extends CheckboxTreeProps<T> {
   buttonDisplayContent: ReactNode;
   shouldCloseOnSelection?: boolean;
+  hasPopoverButton?: boolean; // default=true
   wrapPopover?: (checkboxTree: ReactNode) => ReactNode;
   isDisabled?: boolean;
+  /** update `selectedList` state instantly when a selection is made (default: true) */
+  instantUpdate?: boolean;
 }
 
 function SelectTree<T>(props: SelectTreeProps<T>) {
@@ -18,7 +21,19 @@ function SelectTree<T>(props: SelectTreeProps<T>) {
       ? props.currentList.join(', ')
       : props.buttonDisplayContent
   );
-  const { selectedList, shouldCloseOnSelection, wrapPopover } = props;
+  const {
+    selectedList,
+    onSelectionChange,
+    shouldCloseOnSelection,
+    hasPopoverButton = true,
+    instantUpdate = true,
+    wrapPopover,
+  } = props;
+
+  // This local state is updated whenever a checkbox is clicked in the species tree.
+  // When `instantUpdate` is false, pass the final value to `onSelectionChange` when the popover closes.
+  // When it is true we call `onSelectionChange` whenever `localSelectedList` changes
+  const [localSelectedList, setLocalSelectedList] = useState(selectedList);
 
   /** Used as a hack to "auto close" the popover when shouldCloseOnSelection is true */
   const [key, setKey] = useState('');
@@ -27,12 +42,37 @@ function SelectTree<T>(props: SelectTreeProps<T>) {
     if (!shouldCloseOnSelection) return;
     setKey(selectedList.join(', '));
     onClose();
-  }, [shouldCloseOnSelection, selectedList]);
+  }, [shouldCloseOnSelection, localSelectedList]);
+
+  // live updates to caller when needed
+  useEffect(() => {
+    if (!instantUpdate) return;
+    onSelectionChange(localSelectedList);
+  }, [onSelectionChange, localSelectedList]);
+
+  function truncatedButtonContent(selectedList: string[]) {
+    return (
+      <span
+        style={{
+          // this styling is copied from SelectList!
+          maxWidth: '300px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {selectedList.join(', ')}
+      </span>
+    );
+  }
 
   const onClose = () => {
     setButtonDisplayContent(
-      selectedList.length ? selectedList.join(', ') : props.buttonDisplayContent
+      localSelectedList.length
+        ? truncatedButtonContent(localSelectedList)
+        : props.buttonDisplayContent
     );
+    if (!instantUpdate) onSelectionChange(localSelectedList);
   };
 
   const checkboxTree = (
@@ -49,12 +89,12 @@ function SelectTree<T>(props: SelectTreeProps<T>) {
       renderNode={props.renderNode}
       expandedList={props.expandedList}
       isSelectable={props.isSelectable}
-      selectedList={selectedList}
+      selectedList={localSelectedList}
       filteredList={props.filteredList}
       customCheckboxes={props.customCheckboxes}
       isMultiPick={props.isMultiPick}
       name={props.name}
-      onSelectionChange={props.onSelectionChange}
+      onSelectionChange={setLocalSelectedList}
       currentList={props.currentList}
       defaultList={props.defaultList}
       isSearchable={props.isSearchable}
@@ -77,7 +117,7 @@ function SelectTree<T>(props: SelectTreeProps<T>) {
     />
   );
 
-  return (
+  return hasPopoverButton ? (
     <PopoverButton
       key={shouldCloseOnSelection ? key : ''}
       buttonDisplayContent={buttonDisplayContent}
@@ -94,6 +134,8 @@ function SelectTree<T>(props: SelectTreeProps<T>) {
         {wrapPopover ? wrapPopover(checkboxTree) : checkboxTree}
       </div>
     </PopoverButton>
+  ) : (
+    <>{wrapPopover ? wrapPopover(checkboxTree) : checkboxTree}</>
   );
 }
 
@@ -114,6 +156,7 @@ const defaultProps = {
   searchPredicate: () => true,
   linksPosition: LinksPosition.Both,
   isDisabled: false,
+  instantUpdate: true, // Set default value to true
 };
 
 SelectTree.defaultProps = defaultProps;
diff --git a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx
index 9dc1c29a4a..218dae85ee 100644
--- a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx
+++ b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxList.tsx
@@ -76,7 +76,7 @@ export type Item<T> = {
   disabled?: boolean;
 };
 
-export type CheckboxListProps<T> = {
+export type CheckboxListProps<T extends string> = {
   /** Optional name attribute for the native input element */
   name?: string;
 
@@ -99,7 +99,7 @@ export type CheckboxListProps<T> = {
   disabledCheckboxTooltipContent?: ReactNode;
 };
 
-export default function CheckboxList<T>({
+export default function CheckboxList<T extends string>({
   name,
   items,
   value,
@@ -205,7 +205,7 @@ export default function CheckboxList<T>({
                   </label>
                 </Tooltip>
               ) : (
-                <label>
+                <label css={{ display: 'flex', gap: '1ex' }}>
                   <input {...sharedInputAttributes} /> {item.display}
                 </label>
               )}
diff --git a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTree.tsx b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTree.tsx
index 0de3be1cef..da26060416 100644
--- a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTree.tsx
+++ b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTree.tsx
@@ -2,8 +2,7 @@ import React, {
   useCallback,
   MouseEventHandler,
   useMemo,
-  useState,
-  useEffect,
+  useDeferredValue,
 } from 'react';
 import { css } from '@emotion/react';
 import { merge } from 'lodash';
@@ -1100,7 +1099,6 @@ export default CheckboxTree;
 function useTreeState<T>(props: CheckboxTreeProps<T>) {
   const {
     tree,
-    searchTerm,
     searchPredicate,
     getNodeId,
     getNodeChildren,
@@ -1112,13 +1110,16 @@ function useTreeState<T>(props: CheckboxTreeProps<T>) {
     expandedList,
     filteredList,
   } = props;
+
+  const searchTerm = useDeferredValue(props.searchTerm);
+
   const statefulTree = useMemo(
     () => createStatefulTree(tree, getNodeChildren),
     [tree, getNodeChildren]
   );
 
   // initialize stateful tree; this immutable tree structure will be replaced with each state change
-  const makeTreeState = useCallback(() => {
+  const treeState = useMemo(() => {
     const isLeafVisible = createIsLeafVisible(
       tree,
       searchTerm,
@@ -1163,21 +1164,5 @@ function useTreeState<T>(props: CheckboxTreeProps<T>) {
     filteredList,
   ]);
 
-  const [treeState, setTreeState] = useState(makeTreeState);
-
-  useEffect(() => {
-    function performUpdate() {
-      setTreeState(makeTreeState());
-    }
-    if (searchTerm) {
-      const timerId = setTimeout(performUpdate, 250);
-      return function cancel() {
-        clearTimeout(timerId);
-      };
-    } else {
-      performUpdate();
-    }
-  }, [makeTreeState, searchTerm]);
-
   return treeState;
 }
diff --git a/packages/libs/coreui/src/hooks.tsx b/packages/libs/coreui/src/hooks.tsx
index 878173d281..f470d9d86d 100644
--- a/packages/libs/coreui/src/hooks.tsx
+++ b/packages/libs/coreui/src/hooks.tsx
@@ -1,4 +1,10 @@
-import { useEffect } from 'react';
+import {
+  Dispatch,
+  SetStateAction,
+  useDeferredValue,
+  useEffect,
+  useState,
+} from 'react';
 
 export const useCoreUIFonts = () =>
   useEffect(() => {
@@ -20,3 +26,28 @@ export const useCoreUIFonts = () =>
     linkThree.setAttribute('rel', 'stylesheet');
     document.head.appendChild(linkThree);
   }, []);
+
+// This hook functions similarly to `useState`, but with the added benefit
+// of deferring updates to the state value. The primary state value (first element in the
+// returned array) is 'deferred', meaning that updates to this value are handled as low-priority
+// and can be interrupted if the state changes rapidly, preventing unnecessary re-renders.
+// This is particularly useful for expensive renders or non-urgent updates.
+//
+// The third return value represents the 'raw' or 'volatile' state, which reflects
+// the immediate state changes and should be used in UI elements that require responsive updates
+// (e.g., form inputs, user feedback). You can ignore this value if not needed, making it
+// a drop-in replacement for `useState`.
+//
+// Usage:
+// const [deferredState, setState, volatileState] = useDeferredState(initialValue);
+// - `deferredState`: Use for non-urgent rendering, allowing the UI to remain responsive.
+// - `setState`: The state setter function, as in `useState`.
+// - `volatileState`: Use when immediate, responsive updates are needed, such as in user interactions.
+export function useDeferredState<T>(
+  initialValue: T
+): [T, Dispatch<SetStateAction<T>>, T] {
+  const [volatileState, setState] = useState(initialValue);
+  const deferredState = useDeferredValue(volatileState);
+
+  return [deferredState, setState, volatileState];
+}
diff --git a/packages/libs/coreui/src/index.ts b/packages/libs/coreui/src/index.ts
index 8ad711d2f5..3dca9af1b5 100644
--- a/packages/libs/coreui/src/index.ts
+++ b/packages/libs/coreui/src/index.ts
@@ -36,3 +36,6 @@ export { default as colors } from './definitions/colors';
 
 // Icons
 export * from './components/icons';
+
+// Hooks
+export * from './hooks';
diff --git a/packages/libs/wdk-client/src/Components/SearchBox/RealTimeSearchBox.tsx b/packages/libs/wdk-client/src/Components/SearchBox/RealTimeSearchBox.tsx
index b127b26dcc..74d15aad12 100644
--- a/packages/libs/wdk-client/src/Components/SearchBox/RealTimeSearchBox.tsx
+++ b/packages/libs/wdk-client/src/Components/SearchBox/RealTimeSearchBox.tsx
@@ -1,6 +1,5 @@
 import HelpIcon from '../../Components/Icon/HelpIcon';
-import { debounce } from 'lodash';
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import '../../Components/SearchBox/RealTimeSearchBox.css';
 // use safeHtml for enabling html (e.g., italic) at helpText
 import { safeHtml } from '../../Utils/ComponentUtils';
@@ -43,138 +42,76 @@ type Props = {
   cancelBtnRightMargin?: React.CSSProperties['right'];
 };
 
-type State = {
-  /** local reference to search term for rendering */
-  searchTerm: string;
-};
-
 /**
  * A 'real time' search box.  Changes are throttled by 'debounce' so text
  * change events are delayed to prevent repetitive costly searching.  Useful
  * when expensive operations are performed (e.g. search) in real time as the
  * user types in the box.  Also provides reset button to clear the box.
  */
-export default class RealTimeSearchBox extends Component<Props, State> {
-  static defaultProps = {
-    className: '',
-    autoFocus: false,
-    searchTerm: '',
-    onSearchTermChange: () => {},
-    placeholderText: '',
-    helpText: '',
-    delayMs: 250,
-    iconName: 'search',
-  };
-
-  emitSearchTermChange = debounce((searchTerm: string) =>
-    this.props.onSearchTermChange!(searchTerm)
-  );
-
-  input: HTMLInputElement | null = null;
-
-  constructor(props: Props) {
-    super(props);
-    this.handleSearchTermChange = this.handleSearchTermChange.bind(this);
-    this.handleResetClick = this.handleResetClick.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.state = { searchTerm: this.props.searchTerm! };
-  }
-
-  componentDidMount() {
-    if (this.props.autoFocus && this.input != null) this.input.autofocus = true;
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.searchTerm !== this.state.searchTerm) {
-      this.setState({ searchTerm: nextProps.searchTerm! }, () =>
-        this.emitSearchTermChange(nextProps.searchTerm!)
-      );
+export default function RealTimeSearchBox(props: Props) {
+  const {
+    className,
+    helpText,
+    placeholderText,
+    autoFocus,
+    iconName,
+    cancelBtnRightMargin,
+    onSearchTermChange,
+    delayMs,
+  } = props;
+  const [searchTerm, setSearchTerm] = useState(props.searchTerm ?? '');
+  const isActiveSearch = searchTerm.length > 0;
+  const activeModifier = isActiveSearch ? 'active' : 'inactive';
+  const helpModifier = helpText ? 'withHelp' : '';
+
+  useEffect(() => {
+    if (onSearchTermChange) {
+      const id = setTimeout(onSearchTermChange, 250, searchTerm);
+      return function cancel() {
+        clearTimeout(id);
+      };
     }
-  }
-
-  componentWillUnmount() {
-    this.emitSearchTermChange.cancel();
-  }
-
-  /**
-   * Update the state of this Component, and call debounced onSearchTermSet
-   * callback.
-   */
-  handleSearchTermChange(e: React.ChangeEvent<HTMLInputElement>) {
-    let searchTerm = e.currentTarget.value;
-    this.setState({ searchTerm });
-    this.emitSearchTermChange(searchTerm);
-  }
-
-  /**
-   * Reset input if Escape is pressed.
-   */
-  handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
-    if (e.key === 'Escape') {
-      this.setState({ searchTerm: '' });
-      this.props.onSearchTermChange!('');
-      e.stopPropagation();
-    }
-  }
-
-  /**
-   * Update the state of this Component, and call onSearchTermSet callback
-   * immediately.
-   */
-  handleResetClick() {
-    this.setState({ searchTerm: '' });
-    this.props.onSearchTermChange!('');
-  }
-
-  render() {
-    let {
-      className,
-      helpText,
-      placeholderText,
-      autoFocus,
-      iconName,
-      cancelBtnRightMargin,
-    } = this.props;
-    let searchTerm = this.state.searchTerm;
-    let isActiveSearch = searchTerm.length > 0;
-    let activeModifier = isActiveSearch ? 'active' : 'inactive';
-    let helpModifier = helpText ? 'withHelp' : '';
-    return (
-      <div
-        className={
-          classname(baseClassName, activeModifier, helpModifier) +
-          ' ' +
-          classname(className!, activeModifier, helpModifier)
-        }
-      >
-        <label className={labelClassName}>
-          <input
-            type="search"
-            autoFocus={autoFocus}
-            ref={(node) => (this.input = node)}
-            className={inputClassName}
-            onChange={this.handleSearchTermChange}
-            onKeyDown={this.handleKeyDown}
-            placeholder={placeholderText}
-            value={searchTerm}
-          />
-          <i className={`fa fa-${iconName} ${searchIconClassName}`} />
-          <button
-            className={cancelBtnClassName}
-            style={
-              cancelBtnRightMargin ? { right: cancelBtnRightMargin } : undefined
+  }, [delayMs, searchTerm, onSearchTermChange]);
+
+  return (
+    <div
+      className={
+        classname(baseClassName, activeModifier, helpModifier) +
+        ' ' +
+        classname(className!, activeModifier, helpModifier)
+      }
+    >
+      <label className={labelClassName}>
+        <input
+          type="search"
+          autoFocus={autoFocus}
+          className={inputClassName}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              e.stopPropagation();
+              setSearchTerm('');
             }
-            type="button"
-            onClick={this.handleResetClick}
-          >
-            <i className={'fa fa-close ' + cancelIconClassName} />
-          </button>
-        </label>
-        {/* use safeHtml for helpText to allow italic */}
-        {!helpText ? null : <HelpIcon>{safeHtml(helpText)}</HelpIcon>}
-      </div>
-    );
-  }
+          }}
+          placeholder={placeholderText}
+          value={searchTerm}
+        />
+        <i className={`fa fa-${iconName} ${searchIconClassName}`} />
+        <button
+          className={cancelBtnClassName}
+          style={
+            cancelBtnRightMargin ? { right: cancelBtnRightMargin } : undefined
+          }
+          type="button"
+          onClick={() => setSearchTerm('')}
+        >
+          <i className={'fa fa-close ' + cancelIconClassName} />
+        </button>
+      </label>
+      {/* use safeHtml for helpText to allow italic */}
+      {!helpText ? null : <HelpIcon>{safeHtml(helpText)}</HelpIcon>}
+    </div>
+  );
 }
 
 /**
@@ -185,12 +122,8 @@ export default class RealTimeSearchBox extends Component<Props, State> {
  * @example
  * let allClassNames = className('Thing', 'active', 'blue');
  * //=> 'Thing Thing__active Thing__blue'
- *
- * @param {string} base
- * @param {string} ...modifiers
- * @returns {string}
  */
-function classname(base: string, ...modifiers: string[]) {
+function classname(base: string, ...modifiers: string[]): string {
   return modifiers.reduce((classnames, modifier) => {
     return modifier ? classnames + ' ' + base + '__' + modifier : classnames;
   }, base);
diff --git a/packages/libs/wdk-client/src/StoreModules/RecordStoreModule.ts b/packages/libs/wdk-client/src/StoreModules/RecordStoreModule.ts
index 0e8d41c859..7f16fd6fa7 100644
--- a/packages/libs/wdk-client/src/StoreModules/RecordStoreModule.ts
+++ b/packages/libs/wdk-client/src/StoreModules/RecordStoreModule.ts
@@ -40,9 +40,14 @@ import { RootState } from '../Core/State/Types';
 import { EpicDependencies, ModuleEpic } from '../Core/Store';
 import { getValue, preferences, setValue } from '../Preferences';
 import { ServiceError } from '../Service/ServiceError';
-import { CategoryTreeNode, getId, getTargetType } from '../Utils/CategoryUtils';
+import {
+  CategoryTreeNode,
+  getId,
+  getRefName,
+  getTargetType,
+} from '../Utils/CategoryUtils';
 import { stateEffect } from '../Utils/ObserverUtils';
-import { filterNodes } from '../Utils/TreeUtils';
+import { filterNodes, getLeaves } from '../Utils/TreeUtils';
 import { RecordClass, RecordInstance } from '../Utils/WdkModel';
 
 export const key = 'record';
@@ -84,11 +89,22 @@ export function reduce(state: State = {} as State, action: Action): State {
     case RECORD_RECEIVED: {
       if (action.id !== state.requestId) return state;
       let { record, recordClass, categoryTree } = action.payload;
+
+      const collapsedSections = getLeaves(categoryTree, (node) => node.children)
+        .filter(
+          (
+            node
+          ): node is CategoryTreeNode & { properties: { name: string[] } } =>
+            !!node.properties.scope?.includes('record-collapsed') &&
+            !!node.properties.name
+        )
+        .map((node) => getRefName(node));
+
       return {
         ...state,
         record,
         recordClass,
-        collapsedSections: [],
+        collapsedSections,
         navigationCategoriesExpanded: state.navigationCategoriesExpanded || [],
         isLoading: false,
         categoryTree,
diff --git a/packages/libs/wdk-client/src/Utils/CategoryUtils.tsx b/packages/libs/wdk-client/src/Utils/CategoryUtils.tsx
index b98bbe156a..bfa0a28599 100644
--- a/packages/libs/wdk-client/src/Utils/CategoryUtils.tsx
+++ b/packages/libs/wdk-client/src/Utils/CategoryUtils.tsx
@@ -25,6 +25,7 @@ export type TargetType = 'search' | 'attribute' | 'table';
 export type Scope =
   | 'record'
   | 'record-internal'
+  | 'record-collapsed'
   | 'results'
   | 'results-internal'
   | 'download'
diff --git a/packages/libs/wdk-client/src/Utils/DomUtils.ts b/packages/libs/wdk-client/src/Utils/DomUtils.ts
index 8aa692e1a3..8547c4cfd1 100644
--- a/packages/libs/wdk-client/src/Utils/DomUtils.ts
+++ b/packages/libs/wdk-client/src/Utils/DomUtils.ts
@@ -47,6 +47,7 @@ function addScrollAnchor__loop(
   let containerRect = container.getBoundingClientRect();
   const offsetParent = container.offsetParent || document.body;
   let parentSize = offsetParent.clientHeight;
+  let anchorNodePosition = anchorNode && getNodePosition(anchorNode);
   let animId: number;
 
   function loop() {
@@ -69,7 +70,8 @@ function addScrollAnchor__loop(
 
   function updateAnchor() {
     anchorNode = findAnchorNode(container);
-    console.debug('updating anchorNode', anchorNode);
+    anchorNodePosition = anchorNode && getNodePosition(anchorNode);
+    console.debug('updating anchorNode', anchorNode, anchorNodePosition);
   }
 
   function parentSizeChanged(): boolean {
@@ -88,7 +90,11 @@ function addScrollAnchor__loop(
   }
 
   function scrollToAnchor() {
-    if (anchorNode != null) {
+    if (
+      anchorNode != null &&
+      // only scroll to anchor node if its position has changed by a threshold
+      Math.abs(getNodePosition(anchorNode) - (anchorNodePosition ?? 0)) > 10
+    ) {
       anchorNode.scrollIntoView();
       console.debug('scrolling to anchorNode', anchorNode);
     }
@@ -186,10 +192,10 @@ function monitorScroll(scrollHandler: () => void) {
  */
 function findAnchorNode(element: Element) {
   // skip if element is below top of viewport
-  if (element.getBoundingClientRect().top > 0) return;
+  if (getNodePosition(element) > 0) return;
 
   return find(
-    (node: Element) => node.getBoundingClientRect().top > 0,
+    (node: Element) => getNodePosition(node) > 0,
     preorder(element, getElementChildren)
   );
 }
@@ -198,6 +204,10 @@ function getElementChildren(el: Element) {
   return Array.from(el.children);
 }
 
+function getNodePosition(element: Element) {
+  return element.getBoundingClientRect().top;
+}
+
 /**
  * Is the top of the element visible in the element's scroll parent?
  * @param element
diff --git a/packages/libs/wdk-client/src/Views/Answer/Answer.jsx b/packages/libs/wdk-client/src/Views/Answer/Answer.jsx
index bfebb6dccb..39658c46bd 100644
--- a/packages/libs/wdk-client/src/Views/Answer/Answer.jsx
+++ b/packages/libs/wdk-client/src/Views/Answer/Answer.jsx
@@ -155,7 +155,7 @@ function useTableState(props) {
     () => ({
       useStickyHeader: true,
       useStickyFirstNColumns,
-      tableBodyMaxHeight: 'unset',
+      tableBodyMaxHeight: '70vh',
       deriveRowClassName:
         deriveRowClassName &&
         ((record) => deriveRowClassName({ recordClass, record })),
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordFilter.tsx b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordFilter.tsx
index bfea69e9d7..27dcd09199 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordFilter.tsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordFilter.tsx
@@ -28,7 +28,7 @@ type RecordFilterSelectorProps = {
 interface RecordFilterProps
   extends Omit<
     RecordFilterSelectorProps,
-    'toggleFilterFieldSelect' | 'containerClassName'
+    'toggleFilterFieldSelector' | 'containerClassName'
   > {
   searchTerm: string;
   onSearchTermChange: (searchTerm: string) => void;
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.jsx b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.jsx
index a710943871..6985d03596 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTable.jsx
@@ -73,6 +73,8 @@ class RecordTable extends Component {
       getOrderedData
     );
     this.onSort = this.onSort.bind(this);
+    this.onSearchTermChange = this.onSearchTermChange.bind(this);
+    this.onColumnFilterChange = this.onColumnFilterChange.bind(this);
     this.wrappedChildRow = this.wrappedChildRow.bind(this);
     this.state = {
       searchTerm: this.props.searchTerm ?? '',
@@ -86,6 +88,20 @@ class RecordTable extends Component {
     this.setState((state) => ({ ...state, sort: { columnKey, direction } }));
   }
 
+  onSearchTermChange(searchTerm) {
+    this.setState((state) => ({
+      ...state,
+      searchTerm,
+    }));
+  }
+
+  onColumnFilterChange(selectedColumnFilters) {
+    this.setState((state) => ({
+      ...state,
+      selectedColumnFilters,
+    }));
+  }
+
   wrappedChildRow(rowIndex, rowData) {
     const { childRow: ChildRow } = this.props;
     if (!ChildRow) return;
@@ -324,24 +340,14 @@ class RecordTable extends Component {
           {mesaReadyRows.length > 1 && (
             <RecordFilter
               searchTerm={this.state.searchTerm}
-              onSearchTermChange={(searchTerm) =>
-                this.setState((state) => ({
-                  ...state,
-                  searchTerm,
-                }))
-              }
+              onSearchTermChange={this.onSearchTermChange}
               recordDisplayName={this.props.recordClass.displayNamePlural}
               filterAttributes={displayableAttributes.map((attr) => ({
                 value: attr.name,
                 display: attr.displayName,
               }))}
               selectedColumnFilters={this.state.selectedColumnFilters}
-              onColumnFilterChange={(value) =>
-                this.setState((state) => ({
-                  ...state,
-                  selectedColumnFilters: value,
-                }))
-              }
+              onColumnFilterChange={this.onColumnFilterChange}
             />
           )}
         </Mesa>
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx
index ea49f0a02e..2351870a9b 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx
+++ b/packages/libs/wdk-client/src/Views/Records/RecordTable/RecordTableDescription.jsx
@@ -1,10 +1,66 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
 import { safeHtml, wrappable } from '../../../Utils/ComponentUtils';
 
+const containerStyle = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  borderLeft: '.2em solid #79a3d7',
+  borderRight: '.2em solid #79a3d7',
+  padding: '.5em 1em',
+  background: '#ebf4ff',
+  gap: '1em',
+  marginBottom: '1em',
+};
+
 function RecordTableDescription(props) {
   const { description } = props.table;
-  return description ? <p>{safeHtml(description)}</p> : null;
+  const [isOverflowing, setIsOverflowing] = useState(undefined);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (!description) return null;
+
+  return (
+    <div style={containerStyle}>
+      {safeHtml(
+        description,
+        {
+          ref: (el) => {
+            if (el == null || isOverflowing != null) {
+              return;
+            }
+            if (
+              el.clientWidth >= el.scrollWidth ||
+              el.clientHeight >= el.scrollHeight
+            ) {
+              setIsOverflowing(false);
+            } else {
+              setIsOverflowing(true);
+            }
+          },
+          style:
+            isExpanded || isOverflowing === false
+              ? {}
+              : {
+                  maxHeight: 'calc(2 * 1.2em)',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                },
+        },
+        'div'
+      )}
+      {isOverflowing && (
+        <button
+          type="button"
+          className="link"
+          onClick={() => setIsExpanded((value) => !value)}
+        >
+          {isExpanded ? 'Read less' : 'Read more'}
+        </button>
+      )}
+    </div>
+  );
 }
 
 RecordTableDescription.propTypes = {
diff --git a/packages/libs/wdk-client/src/Views/Records/RecordUtils.ts b/packages/libs/wdk-client/src/Views/Records/RecordUtils.ts
index 19e0c4749f..840705a4be 100644
--- a/packages/libs/wdk-client/src/Views/Records/RecordUtils.ts
+++ b/packages/libs/wdk-client/src/Views/Records/RecordUtils.ts
@@ -85,7 +85,14 @@ export const isInternalNode = partial(
   'scope',
   'record-internal'
 );
-export const isNotInternalNode = partial(nodeHasProperty, 'scope', 'record');
+const isRecordNode = partial(nodeHasProperty, 'scope', 'record');
+const isRecordCollapsedNode = partial(
+  nodeHasProperty,
+  'scope',
+  'record-collapsed'
+);
+export const isNotInternalNode = (node: CategoryTreeNode) =>
+  isRecordNode(node) || isRecordCollapsedNode(node);
 export const isAttributeNode = partial(
   nodeHasProperty,
   'targetType',
diff --git a/packages/sites/ortho-site/.eslintrc b/packages/sites/ortho-site/.eslintrc
index a4419bd2f1..4ce17fe3de 100644
--- a/packages/sites/ortho-site/.eslintrc
+++ b/packages/sites/ortho-site/.eslintrc
@@ -1,3 +1,3 @@
 {
-  "extends": "../../WDKClient/Client/.eslintrc"
+  "extends": "@veupathdb"
 }
diff --git a/packages/sites/ortho-site/package.json b/packages/sites/ortho-site/package.json
index e3ee06fec2..3b8b2e5587 100644
--- a/packages/sites/ortho-site/package.json
+++ b/packages/sites/ortho-site/package.json
@@ -92,5 +92,8 @@
   },
   "files": [
     "dist"
-  ]
+  ],
+  "dependencies": {
+    "patristic": "^0.6.0"
+  }
 }
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/pfam-domains/PfamDomainArchitecture.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/pfam-domains/PfamDomainArchitecture.tsx
index bc99fcc5c0..a9ed32ae1d 100644
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/pfam-domains/PfamDomainArchitecture.tsx
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/pfam-domains/PfamDomainArchitecture.tsx
@@ -7,6 +7,7 @@ import './PfamDomainArchitecture.scss';
 interface Props {
   length: number;
   domains: { start: number; end: number; pfamId: string }[];
+  pfamDescriptions?: Map<string, string>;
   style?: React.CSSProperties;
 }
 
@@ -16,7 +17,12 @@ export interface Domain {
   pfamId: string;
 }
 
-export function PfamDomainArchitecture({ length, domains, style }: Props) {
+export function PfamDomainArchitecture({
+  length,
+  domains,
+  style,
+  pfamDescriptions,
+}: Props) {
   return (
     <div className="PfamDomainArchitecture" style={style}>
       <div className="ProteinGraph"></div>
@@ -24,7 +30,7 @@ export function PfamDomainArchitecture({ length, domains, style }: Props) {
         <PfamDomain
           key={`${domain.pfamId}}-${domain.start}-${domain.start}`}
           pfamId={domain.pfamId}
-          title={makeDomainTitle(domain)}
+          title={makeDomainTitle(domain, pfamDescriptions)}
           style={makeDomainPositionStyling(length, domain)}
         />
       ))}
@@ -32,8 +38,13 @@ export function PfamDomainArchitecture({ length, domains, style }: Props) {
   );
 }
 
-function makeDomainTitle({ start, end, pfamId }: Domain) {
-  return `${pfamId} (location: [${start} - ${end}])`;
+function makeDomainTitle(
+  { start, end, pfamId }: Domain,
+  pfamDescriptions?: Map<string, string>
+) {
+  if (pfamDescriptions != null)
+    return `${pfamId} (${pfamDescriptions.get(pfamId)}) [${start} - ${end}]`;
+  else return `${pfamId} (location: [${start} - ${end}])`;
 }
 
 function makeDomainPositionStyling(
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/phyletic-distribution/PhyleticDistributionCheckbox.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/phyletic-distribution/PhyleticDistributionCheckbox.tsx
index e7daaac55b..3b4086537d 100644
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/phyletic-distribution/PhyleticDistributionCheckbox.tsx
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/phyletic-distribution/PhyleticDistributionCheckbox.tsx
@@ -3,7 +3,8 @@ import React, { useMemo, useState } from 'react';
 import { orderBy } from 'lodash';
 
 import { Checkbox } from '@veupathdb/wdk-client/lib/Components';
-import CheckboxTree, {
+import {
+  CheckboxTreeStyleSpec,
   LinksPosition,
 } from '@veupathdb/coreui/lib/components/inputs/checkboxes/CheckboxTree/CheckboxTree';
 import { makeClassNameHelper } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
@@ -25,6 +26,7 @@ import {
 } from 'ortho-client/utils/taxons';
 
 import './PhyleticDistributionCheckbox.scss';
+import { SelectTree } from '@veupathdb/coreui';
 
 const cx = makeClassNameHelper('PhyleticDistributionCheckbox');
 
@@ -41,6 +43,7 @@ type SelectionConfig =
   | {
       selectable: true;
       onSpeciesSelected: (selection: string[]) => void;
+      selectedSpecies: string[];
     };
 
 export function PhyleticDistributionCheckbox({
@@ -71,40 +74,44 @@ export function PhyleticDistributionCheckbox({
   );
 
   return (
-    <div className={cx()}>
-      <CheckboxTree
-        tree={prunedPhyleticDistributionUiTree}
-        getNodeId={getTaxonNodeId}
-        getNodeChildren={getNodeChildren}
-        onExpansionChange={setExpandedNodes}
-        shouldExpandOnClick={false}
-        expandedList={expandedNodes}
-        renderNode={renderNode}
-        isMultiPick={selectionConfig.selectable}
-        isSelectable={selectionConfig.selectable}
-        onSelectionChange={
-          selectionConfig.selectable
-            ? selectionConfig.onSpeciesSelected
-            : undefined
-        }
-        isSearchable
-        searchBoxPlaceholder="Type a taxonomic name"
-        searchBoxHelp={makeSearchHelpText('the taxons below')}
-        searchTerm={searchTerm}
-        onSearchTermChange={setSearchTerm}
-        searchPredicate={taxonSearchPredicate}
-        linksPosition={LinksPosition.Top}
-        additionalActions={[
-          <label className={cx('--MissingSpeciesFilter')}>
-            <Checkbox
-              value={hideMissingSpecies}
-              onChange={setHideMissingSpecies}
-            />
-            &nbsp; Hide zero counts
-          </label>,
-        ]}
-      />
-    </div>
+    <SelectTree
+      hasPopoverButton={selectionConfig.selectable}
+      buttonDisplayContent="Organism"
+      tree={prunedPhyleticDistributionUiTree}
+      getNodeId={getTaxonNodeId}
+      getNodeChildren={getNodeChildren}
+      onExpansionChange={setExpandedNodes}
+      shouldExpandOnClick={false}
+      expandedList={expandedNodes}
+      renderNode={renderNode}
+      isMultiPick={selectionConfig.selectable}
+      isSelectable={selectionConfig.selectable}
+      onSelectionChange={
+        selectionConfig.selectable
+          ? selectionConfig.onSpeciesSelected
+          : undefined
+      }
+      instantUpdate={true}
+      selectedList={
+        selectionConfig.selectable ? selectionConfig.selectedSpecies : undefined
+      }
+      isSearchable
+      searchBoxPlaceholder="Type a taxonomic name"
+      searchBoxHelp={makeSearchHelpText('the taxons below')}
+      searchTerm={searchTerm}
+      onSearchTermChange={setSearchTerm}
+      searchPredicate={taxonSearchPredicate}
+      linksPosition={LinksPosition.Top}
+      additionalActions={[
+        <label className={cx('--MissingSpeciesFilter')}>
+          <Checkbox
+            value={hideMissingSpecies}
+            onChange={setHideMissingSpecies}
+          />
+          &nbsp; Hide zero counts
+        </label>,
+      ]}
+    />
   );
 }
 
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.scss b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.scss
index 5761e1de28..94bcb08dc0 100644
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.scss
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.scss
@@ -1,4 +1,7 @@
 .wdk-RecordContainer__GroupRecordClasses\.GroupRecordClass {
+  --row-hl-bg-color: wheat;
+  --row-hl-fg-color: inherit;
+
   .wdk-MissingMsaAttribute {
     color: darkred;
   }
@@ -16,4 +19,29 @@
       min-width: 0.41666666666em;
     }
   }
+
+  #Sequences .Mesa.MesaComponent {
+    display: flex;
+    flex-wrap: wrap;
+    > .Toolbar {
+      &,
+      & > * {
+        width: 100%;
+      }
+    }
+    > .MesaComponent {
+      width: 100%;
+      > .DataTable {
+        max-width: unset;
+        width: unset;
+        overflow-x: unset;
+
+        // Set background-color of selected rows
+        tr:has(> td.SelectionCell > div > input:checked) > td {
+          background-color: var(--row-hl-bg-color) !important;
+          color: var(--row-hl-fg-color) !important;
+        }
+      }
+    }
+  }
 }
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.tsx
index 0e9c402600..28d8e3037b 100644
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.tsx
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupRecordClasses.GroupRecordClass.tsx
@@ -19,6 +19,7 @@ import { PhyleticDistributionCheckbox } from 'ortho-client/components/phyletic-d
 import { PfamDomainArchitecture } from 'ortho-client/components/pfam-domains/PfamDomainArchitecture';
 
 import { RecordTable_Sequences } from 'ortho-client/records/Sequences';
+import { RecordTable_GroupStats } from './GroupStats';
 
 import {
   RecordAttributeProps,
@@ -50,6 +51,7 @@ const MSA_ATTRIBUTE_NAME = 'msa';
 const PFAMS_TABLE_NAME = 'PFams';
 const PROTEIN_PFAMS_TABLE_NAME = 'ProteinPFams';
 const SEQUENCES_TABLE_NAME = 'Sequences';
+const GROUP_STATS_TABLE_NAME = 'GroupStat';
 
 const CORE_PERIPHERAL_ATTRIBUTE_NAME = 'core_peripheral';
 const PROTEIN_LENGTH_ATTRIBUTE_NAME = 'protein_length';
@@ -364,4 +366,5 @@ const recordTableWrappers: Record<
   [PROTEIN_PFAMS_TABLE_NAME]: RecordTable_ProteinDomainArchitectures,
   [TAXON_COUNTS_TABLE_NAME]: RecordTable_TaxonCounts,
   [SEQUENCES_TABLE_NAME]: RecordTable_Sequences,
+  [GROUP_STATS_TABLE_NAME]: RecordTable_GroupStats,
 };
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupStats.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupStats.tsx
new file mode 100644
index 0000000000..75e3551e55
--- /dev/null
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/GroupStats.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { RecordTable } from './SequenceRecordClasses.SequenceRecordClass';
+import { RecordTableProps, WrappedComponentProps } from './Types';
+
+import eval_hist_img from './eval-hist.png';
+
+export function RecordTable_GroupStats(
+  props: WrappedComponentProps<RecordTableProps>
+) {
+  const regularRecordTable = RecordTable(props);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 10,
+      }}
+    >
+      {regularRecordTable}
+      <figure
+        style={{
+          width: 480,
+        }}
+      >
+        <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}
+        />
+        <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.
+        </figcaption>
+      </figure>
+    </div>
+  );
+}
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/RecordTable_TaxonCounts_Filter.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/RecordTable_TaxonCounts_Filter.tsx
new file mode 100644
index 0000000000..55bf462d14
--- /dev/null
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/RecordTable_TaxonCounts_Filter.tsx
@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react';
+import { RecordTableProps, WrappedComponentProps } from './Types';
+import { Loading } from '@veupathdb/wdk-client/lib/Components';
+import { PhyleticDistributionCheckbox } from 'ortho-client/components/phyletic-distribution/PhyleticDistributionCheckbox';
+import { taxonCountsTableValueToMap } from './utils';
+import { useTaxonUiMetadata } from 'ortho-client/hooks/taxons';
+
+export interface Props extends WrappedComponentProps<RecordTableProps> {
+  selectedSpecies: string[];
+  onSpeciesSelected: (taxons: string[]) => void;
+}
+
+export function RecordTable_TaxonCounts_Filter({
+  value,
+  selectedSpecies,
+  onSpeciesSelected,
+}: Props) {
+  const selectionConfig = useMemo(
+    () =>
+      ({
+        selectable: true,
+        onSpeciesSelected,
+        selectedSpecies,
+      } as const),
+    [onSpeciesSelected, selectedSpecies]
+  );
+
+  const speciesCounts = useMemo(
+    () => taxonCountsTableValueToMap(value),
+    [value]
+  );
+
+  const taxonUiMetadata = useTaxonUiMetadata();
+
+  return taxonUiMetadata == null ? (
+    <Loading />
+  ) : (
+    <PhyleticDistributionCheckbox
+      selectionConfig={selectionConfig}
+      speciesCounts={speciesCounts}
+      taxonTree={taxonUiMetadata.taxonTree}
+    />
+  );
+}
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.jsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.jsx
deleted file mode 100644
index 2d7918955d..0000000000
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import lodash from 'lodash';
-import React, { useMemo, useRef, useState, useCallback } from 'react';
-
-// function RecordTable_TaxonCounts({ value }: WrappedComponentProps<RecordTableProps>) {
-export function RecordTable_Sequences(props) {
-  const formRef = useRef(null);
-  const [selectedRowIds, setSelectedRowIds] = useState([]);
-
-  const sortedValue = useSortedValue(props.value);
-
-  const isRowSelected = useCallback(
-    ({ full_id }) => selectedRowIds.includes(full_id),
-    [selectedRowIds]
-  );
-
-  const onRowSelect = useCallback(
-    ({ full_id }) => setSelectedRowIds(selectedRowIds.concat(full_id)),
-    [selectedRowIds]
-  );
-
-  const onRowDeselect = useCallback(
-    ({ full_id }) =>
-      setSelectedRowIds(selectedRowIds.filter((id) => id !== full_id)),
-    [selectedRowIds]
-  );
-
-  const onMultipleRowSelect = useCallback(
-    (rows) =>
-      setSelectedRowIds(
-        selectedRowIds.concat(rows.map((row) => row['full_id']))
-      ),
-    [selectedRowIds]
-  );
-
-  const onMultipleRowDeselect = useCallback(
-    (rows) =>
-      setSelectedRowIds(
-        selectedRowIds.filter((row) => rows.includes(row['full_id']))
-      ),
-    [selectedRowIds]
-  );
-
-  if (props.value.length === 0) {
-    return <props.DefaultComponent {...props} value={sortedValue} />;
-  } else {
-    const orthoTableProps = {
-      options: {
-        isRowSelected,
-        selectedNoun: 'protein',
-        selectedPluralNoun: 'proteins',
-      },
-      eventHandlers: {
-        onRowSelect,
-        onRowDeselect,
-        onMultipleRowSelect,
-        onMultipleRowDeselect,
-      },
-      actions: [
-        {
-          selectionRequired: false,
-          element() {
-            return null;
-          },
-          callback: () => null,
-        },
-      ],
-    };
-
-    return (
-      <form
-        ref={formRef}
-        action="/cgi-bin/msaOrthoMCL"
-        target="_blank"
-        method="post"
-      >
-        <input type="hidden" name="project_id" value="OrthoMCL" />
-        {selectedRowIds.map((id) => (
-          <input key={id} type="hidden" name="msa_full_ids" value={id} />
-        ))}
-        <props.DefaultComponent
-          {...props}
-          value={sortedValue}
-          orthoTableProps={orthoTableProps}
-        />
-        <p>
-          Please note: selecting a large number of proteins will take several
-          minutes to align.
-        </p>
-        <div id="userOptions">
-          <p>
-            Output format: &nbsp;
-            <select name="clustalOutFormat">
-              <option value="clu">Mismatches highlighted</option>
-              <option value="fasta">FASTA</option>
-              <option value="phy">PHYLIP</option>
-              <option value="st">STOCKHOLM</option>
-              <option value="vie">VIENNA</option>
-            </select>
-          </p>
-          <input
-            type="submit"
-            value="Run Clustal Omega for selected proteins"
-          />
-        </div>
-      </form>
-    );
-  }
-}
-
-function useSortedValue(value) {
-  return useMemo(() => lodash.sortBy(value, 'sort_key'), [value]);
-}
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
new file mode 100644
index 0000000000..1efea4f282
--- /dev/null
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/Sequences.tsx
@@ -0,0 +1,866 @@
+import React, {
+  CSSProperties,
+  useCallback,
+  useDeferredValue,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import TreeTable from '@veupathdb/components/lib/components/tidytree/TreeTable';
+import { RecordTableProps, WrappedComponentProps } from './Types';
+import { useOrthoService } from 'ortho-client/hooks/orthoService';
+import { Loading, Link } from '@veupathdb/wdk-client/lib/Components';
+import { Branch, parseNewick } from 'patristic';
+import {
+  AttributeValue,
+  TableValue,
+} from '@veupathdb/wdk-client/lib/Utils/WdkModel';
+import {
+  MesaColumn,
+  MesaStateProps,
+} from '@veupathdb/coreui/lib/components/Mesa/types';
+import { groupBy, difference } from 'lodash';
+import { PfamDomainArchitecture } from 'ortho-client/components/pfam-domains/PfamDomainArchitecture';
+import { extractPfamDomain } from 'ortho-client/records/utils';
+import Banner from '@veupathdb/coreui/lib/components/banners/Banner';
+import { RowCounter } from '@veupathdb/coreui/lib/components/Mesa';
+import PopoverButton, {
+  PopoverButtonHandle,
+} from '@veupathdb/coreui/lib/components/buttons/PopoverButton/PopoverButton';
+import { PfamDomain } from 'ortho-client/components/pfam-domains/PfamDomain';
+import {
+  FilledButton,
+  FloatingButton,
+  OutlinedButton,
+  SelectList,
+  Undo,
+  useDeferredState,
+} from '@veupathdb/coreui';
+import { RecordTable_TaxonCounts_Filter } from './RecordTable_TaxonCounts_Filter';
+import { formatAttributeValue } from '@veupathdb/wdk-client/lib/Utils/ComponentUtils';
+import { RecordFilter } from '@veupathdb/wdk-client/lib/Views/Records/RecordTable/RecordFilter';
+import {
+  areTermsInStringRegexString,
+  parseSearchQueryString,
+} from '@veupathdb/wdk-client/lib/Utils/SearchUtils';
+
+type RowType = Record<string, AttributeValue>;
+
+const treeWidth = 200;
+const maxColumnWidth = 200;
+const maxArchitectureLength = maxColumnWidth - 10 - 10 - 1; // 10px padding each side plus a 1px border
+const MIN_SEQUENCES_FOR_TREE = 3;
+const MAX_SEQUENCES_FOR_TREE = 1000;
+
+const PFAM_ARCH_COLUMN_KEY = 'pfamArchitecture';
+
+const highlightColor = '#feb640';
+const highlightColor50 = highlightColor + '7f';
+
+export function RecordTable_Sequences(
+  props: WrappedComponentProps<RecordTableProps>
+) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const safeSearchRegexp = useDeferredValue(
+    useMemo(() => createSafeSearchRegExp(searchQuery), [searchQuery])
+  );
+
+  const [resetCounter, setResetCounter] = useState(0); // used for forcing re-render of filter buttons
+
+  const [proteinFilterIds, setProteinFilterIds, volatileProteinFilterIds] =
+    useDeferredState<string[]>([]);
+
+  const [selectedSpecies, setSelectedSpecies, volatileSelectedSpecies] =
+    useDeferredState<string[]>([]);
+
+  const [pfamFilterIds, setPfamFilterIds, volatilePfamFilterIds] =
+    useDeferredState<string[]>([]);
+
+  const [
+    corePeripheralFilterValue,
+    setCorePeripheralFilterValue,
+    volatileCorePeripheralFilterValue,
+  ] = useDeferredState<('core' | 'peripheral')[]>([]);
+
+  const groupName = props.record.id.find(
+    ({ name }) => name === 'group_name'
+  )?.value;
+
+  if (!groupName) {
+    throw new Error('groupName is required but was not found in the record.');
+  }
+
+  const [highlightedNodes, setHighlightedNodes] = useState<string[]>([]);
+
+  const mesaRows = props.value;
+  const pfamRows = props.record.tables['PFams'];
+
+  const numSequences = mesaRows.length;
+
+  const treeResponse = useOrthoService(
+    (orthoService) => {
+      if (numSequences < MIN_SEQUENCES_FOR_TREE)
+        return Promise.resolve(undefined);
+      return orthoService.getGroupTree(groupName);
+    },
+    [groupName, numSequences]
+  );
+
+  const treeUrl = useOrthoService(
+    async (orthoService) => orthoService.getGroupTreeUrl(groupName),
+    [groupName]
+  );
+
+  // deal with Pfam domain architectures
+  const proteinPfams = props.record.tables['ProteinPFams'];
+  const rowsByAccession = useMemo(
+    () => groupBy(proteinPfams, 'full_id'),
+    [proteinPfams]
+  );
+
+  const accessionToPfamIds = useMemo(
+    () =>
+      proteinPfams.reduce((map, row) => {
+        const full_id = row['full_id'] as string;
+        if (!map.has(full_id)) map.set(full_id, new Set<string>());
+        map.set(full_id, map.get(full_id)!.add(row['accession'] as string));
+        return map;
+      }, new Map<string, Set<string>>()),
+    [proteinPfams]
+  );
+
+  const pfamIdToDescription = useMemo(
+    () =>
+      pfamRows.reduce((map, row) => {
+        const pfamId = row.accession as string;
+        const description = row.description as string;
+        return map.set(pfamId, description);
+      }, new Map<string, string>()),
+    [pfamRows]
+  );
+
+  const maxProteinLength = useMemo(
+    () =>
+      mesaRows.reduce((max, row) => {
+        const length = Number(row['length'] || ('0' as string));
+        return length > max ? length : max;
+      }, 0),
+    [mesaRows]
+  );
+
+  const mesaColumns = useMemo((): MesaColumn<RowType>[] => {
+    const mesaColumnsFromAttrs: MesaColumn<RowType>[] = props.table.attributes
+      .filter(({ isDisplayable }) => isDisplayable)
+      .map(({ name, displayName, type }) => ({
+        key: name,
+        name: displayName,
+        type: type === 'link' ? 'wdkLink' : type,
+      }));
+
+    return [
+      {
+        key: PFAM_ARCH_COLUMN_KEY,
+        name: 'Domain architecture',
+        renderCell: (cellProps) => {
+          const proteinId = cellProps.row.full_id as string;
+          const flatPfamData = rowsByAccession[proteinId];
+          if (flatPfamData && flatPfamData.length > 0) {
+            const pfamDomains = flatPfamData.flatMap(extractPfamDomain);
+            const proteinLength = Number(
+              flatPfamData[0]['protein_length'] as string
+            );
+            const architectureLength = Math.floor(
+              (maxArchitectureLength * proteinLength) / maxProteinLength
+            );
+            return (
+              <PfamDomainArchitecture
+                style={{ width: `${architectureLength}px`, top: '10px' }}
+                length={proteinLength}
+                domains={pfamDomains}
+                pfamDescriptions={pfamIdToDescription}
+              />
+            );
+          } else {
+            return <span>no PFAM domains</span>;
+          }
+        },
+      },
+      ...mesaColumnsFromAttrs,
+    ];
+  }, [
+    maxProteinLength,
+    pfamIdToDescription,
+    props.table.attributes,
+    rowsByAccession,
+  ]);
+
+  const [tablePageNumber, setTablePageNumber] = useState(1);
+
+  const { tree, leaves, sortedRows } = useMemo(() => {
+    const tree = treeResponse == null ? undefined : parseNewick(treeResponse);
+    const leaves = tree && getLeaves(tree);
+    const sortedRows = leaves ? sortRows(leaves, mesaRows) : mesaRows;
+    return { tree, leaves, sortedRows };
+  }, [treeResponse, mesaRows]);
+
+  // do some validation on the tree w.r.t. the table
+
+  // filter the rows of the table based on
+  // 1. user-entered text search
+  // 2. core-peripheral radio button
+  // 3. checked boxes in the Pfam legend
+
+  const [
+    selectedColumnFilters,
+    setSelectedColumnFilters,
+    volatileSelectedColumnFilters,
+  ] = useDeferredState<string[]>([]);
+
+  const filteredRows = useMemo(() => {
+    if (
+      safeSearchRegexp != null ||
+      corePeripheralFilterValue.length > 0 ||
+      pfamFilterIds.length > 0 ||
+      selectedSpecies.length > 0 ||
+      proteinFilterIds.length > 0
+    ) {
+      return sortedRows?.filter((row) => {
+        const rowCorePeripheral = (
+          (row['core_peripheral'] as string) ?? ''
+        ).toLowerCase();
+        const rowFullId = row['full_id'] as string;
+        const rowPfamIdsSet = accessionToPfamIds.get(rowFullId);
+
+        const searchMatch =
+          safeSearchRegexp == null ||
+          rowMatch(row, safeSearchRegexp, selectedColumnFilters);
+        const corePeripheralMatch =
+          corePeripheralFilterValue.length === 0 ||
+          corePeripheralFilterValue.includes(
+            rowCorePeripheral.toLowerCase() as any
+          );
+        const pfamIdMatch =
+          pfamFilterIds.length === 0 ||
+          pfamFilterIds.some((pfamId) => rowPfamIdsSet?.has(pfamId));
+        const speciesMatch =
+          selectedSpecies.length === 0 ||
+          selectedSpecies.some((specie) => row.taxon_abbrev === specie);
+        const proteinMatch =
+          proteinFilterIds.length === 0 ||
+          proteinFilterIds.some((proteinId) => rowFullId === proteinId);
+
+        return (
+          searchMatch &&
+          corePeripheralMatch &&
+          pfamIdMatch &&
+          speciesMatch &&
+          proteinMatch
+        );
+      });
+    }
+    return sortedRows;
+  }, [
+    selectedColumnFilters,
+    safeSearchRegexp,
+    sortedRows,
+    corePeripheralFilterValue,
+    accessionToPfamIds,
+    pfamFilterIds,
+    selectedSpecies,
+    proteinFilterIds,
+  ]);
+
+  // now filter the tree if needed - takes a couple of seconds for large trees
+  const filteredTree = useMemo(() => {
+    if (
+      leaves == null ||
+      tree == null ||
+      filteredRows == null ||
+      filteredRows.length === 0
+    )
+      return;
+
+    if (filteredRows.length < leaves.length) {
+      const filteredRowIds = new Set(
+        filteredRows.map(({ full_id }) => full_id as string)
+      );
+
+      // must work on a copy of the tree because it's destructive
+      const treeCopy = tree.clone();
+      let leavesRemoved = false;
+      do {
+        const leavesCopy = treeCopy.getLeaves();
+        leavesRemoved = false; // Reset flag for each iteration
+
+        for (const leaf of leavesCopy) {
+          if (!filteredRowIds.has(leaf.id)) {
+            leaf.remove(true); // remove leaf and remove any dangling ancestors
+            leavesRemoved = true; // A leaf was removed, so set flag to true
+          }
+        }
+      } while (leavesRemoved); // Continue looping if any leaf was removed
+      return treeCopy;
+    }
+
+    return tree;
+  }, [tree, leaves, filteredRows]);
+
+  // make a newick string from the filtered tree if needed
+  const finalNewick = useMemo(() => {
+    if (treeResponse != null) {
+      if (filteredTree != null) {
+        if (filteredTree === tree) {
+          return treeResponse; // no filtering so return what we read from the back end
+        } else {
+          return filteredTree.toNewick(); // make new newick data from the filtered tree
+        }
+      }
+    }
+    return;
+  }, [filteredTree, treeResponse, tree]);
+
+  // list of column keys and display names to show in the checkbox dropdown in the table text search box (RecordFilter)
+  const filterAttributes = useMemo(
+    () =>
+      mesaColumns
+        .map(({ key, name }) => ({
+          value: key,
+          display: name ?? 'Unknown column',
+        }))
+        .filter(({ value }) => value !== PFAM_ARCH_COLUMN_KEY),
+    [mesaColumns]
+  );
+
+  const handleSpeciesSelection = useCallback(
+    (species: string[]) => {
+      setSelectedSpecies(species);
+      setTablePageNumber(1);
+    },
+    [setSelectedSpecies, setTablePageNumber]
+  );
+
+  const firstRowIndex = (tablePageNumber - 1) * MAX_SEQUENCES_FOR_TREE;
+
+  const mesaState: MesaStateProps<RowType> | undefined = useMemo(() => {
+    if (sortedRows == null) return;
+    return {
+      options: {
+        isRowSelected: (row: RowType) =>
+          highlightedNodes.includes(row.full_id as string),
+        useStickyHeader: true,
+        tableBodyMaxHeight: 'calc(100vh - 200px)', // 200px accounts for header/footer
+      },
+      uiState: {
+        pagination: {
+          currentPage: tablePageNumber,
+          rowsPerPage: MAX_SEQUENCES_FOR_TREE,
+          totalRows: filteredRows?.length ?? 0,
+        },
+      },
+      rows: sortedRows,
+      filteredRows: filteredRows?.slice(
+        firstRowIndex,
+        firstRowIndex + MAX_SEQUENCES_FOR_TREE
+      ),
+      columns: mesaColumns,
+      eventHandlers: {
+        onRowSelect: (row: RowType) =>
+          setHighlightedNodes((prev) => [...prev, row.full_id as string]),
+        onRowDeselect: (row: RowType) =>
+          setHighlightedNodes((prev) =>
+            prev.filter((id) => id !== row.full_id)
+          ),
+        onPageChange: (page: number) => setTablePageNumber(page),
+      },
+    };
+  }, [
+    sortedRows,
+    filteredRows,
+    highlightedNodes,
+    tablePageNumber,
+    firstRowIndex,
+    mesaColumns,
+    setHighlightedNodes,
+    setTablePageNumber,
+  ]);
+
+  const treeProps = useMemo(
+    () => ({
+      data: finalNewick,
+      width: treeWidth,
+      highlightMode: 'monophyletic' as const,
+      highlightColor,
+      highlightedNodeIds: highlightedNodes,
+    }),
+    [finalNewick, treeWidth, highlightColor, highlightedNodes]
+  );
+
+  const proteinFilterButtonRef = useRef<PopoverButtonHandle>(null);
+
+  // None shall pass! (hooks, at least)
+
+  if (!mesaState || !sortedRows || !tree || !treeResponse) {
+    return <Loading />;
+  }
+
+  if (
+    numSequences >= MIN_SEQUENCES_FOR_TREE &&
+    mesaRows != null &&
+    sortedRows != null &&
+    (mesaRows.length !== sortedRows.length ||
+      mesaRows.length !== leaves?.length)
+  ) {
+    console.log(
+      'Tree and protein list mismatch. A=Tree, B=Table. Summary below:'
+    );
+    logIdMismatches(
+      (leaves ?? []).map((leaf) => leaf.id),
+      mesaRows.map((row) =>
+        truncate_full_id_for_tree_comparison(row.full_id as string)
+      )
+    );
+    return (
+      <Banner
+        banner={{
+          type: 'warning',
+          message: (
+            <span>
+              A data processing error has occurred on our end. We apologize for
+              the inconvenience. If this problem persists, please{' '}
+              <Link target="_blank" to="/contact-us">
+                contact us
+              </Link>
+              .
+            </span>
+          ),
+        }}
+      />
+    );
+  }
+
+  const rowHeight = 45;
+  const clustalDisabled =
+    highlightedNodes == null || highlightedNodes.length < 2;
+
+  const rowCount = (filteredRows ?? sortedRows).length;
+
+  const pfamFilter = pfamRows.length > 0 && (
+    <SelectList
+      key={`pfamFilter-${resetCounter}`}
+      defaultButtonDisplayContent="Pfam domains"
+      items={pfamRows.map((row) => ({
+        display: (
+          <div
+            style={{
+              display: 'flex',
+              margin: '.25em 0',
+              alignItems: 'center',
+              gap: '1em',
+              verticalAlign: 'middle',
+              width: '100%',
+            }}
+          >
+            <PfamDomain
+              style={{ width: 100 }}
+              pfamId={row.accession as string}
+            />
+            <div>{formatAttributeValue(row.accession)}</div>
+            <div>{formatAttributeValue(row.description)}</div>
+            <div style={{ marginLeft: 'auto' }}>
+              {formatAttributeValue(row.num_proteins)} proteins
+            </div>
+          </div>
+        ),
+        value: formatAttributeValue(row.accession),
+      }))}
+      value={volatilePfamFilterIds}
+      onChange={(ids) => {
+        setPfamFilterIds(ids);
+        setTablePageNumber(1);
+      }}
+      instantUpdate={true}
+    />
+  );
+
+  const corePeripheralFilter = (
+    <SelectList<'core' | 'peripheral'>
+      key={`corePeripheralFilter-${resetCounter}`}
+      defaultButtonDisplayContent="Core/Peripheral"
+      items={[
+        {
+          display: 'Core',
+          value: 'core',
+        },
+        {
+          display: 'Peripheral',
+          value: 'peripheral',
+        },
+      ]}
+      value={volatileCorePeripheralFilterValue}
+      onChange={(value) => {
+        setCorePeripheralFilterValue(value);
+        setTablePageNumber(1);
+      }}
+      instantUpdate={true}
+    />
+  );
+
+  const taxonFilter =
+    props.record.tables.TaxonCounts?.length > 0 ? (
+      // eslint-disable-next-line react/jsx-pascal-case
+      <RecordTable_TaxonCounts_Filter
+        key={`taxonFilter-${resetCounter}`}
+        selectedSpecies={volatileSelectedSpecies}
+        onSpeciesSelected={handleSpeciesSelection}
+        record={props.record}
+        recordClass={props.recordClass}
+        table={props.recordClass.tablesMap.TaxonCounts}
+        value={props.record.tables.TaxonCounts}
+        DefaultComponent={props.DefaultComponent}
+      />
+    ) : null;
+
+  const resetProteinFilterButton = (
+    <OutlinedButton
+      text="Reset protein filter"
+      onPress={() => {
+        proteinFilterButtonRef.current?.close();
+        setProteinFilterIds([]);
+        setTablePageNumber(1);
+      }}
+    />
+  );
+
+  const updateProteinFilterIds = () => {
+    proteinFilterButtonRef.current?.close();
+    setProteinFilterIds(highlightedNodes);
+    setHighlightedNodes([]);
+    setTablePageNumber(1);
+  };
+
+  const proteinFilter = (
+    <PopoverButton
+      ref={proteinFilterButtonRef}
+      buttonDisplayContent={`Proteins${
+        volatileProteinFilterIds.length > 0
+          ? ` (${volatileProteinFilterIds.length})`
+          : ''
+      }${highlightedNodes.length > 0 ? '*' : ''}`}
+    >
+      <div
+        style={{
+          margin: '1em',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1em',
+          maxWidth: '300px',
+        }}
+      >
+        {highlightedNodes.length === 0 ? (
+          volatileProteinFilterIds.length === 0 ? (
+            <div>
+              Select some proteins using the checkboxes in the table below.
+            </div>
+          ) : (
+            <>
+              <div>
+                You are filtering on{' '}
+                {volatileProteinFilterIds.length.toLocaleString()} proteins.
+              </div>
+              {resetProteinFilterButton}
+            </>
+          )
+        ) : volatileProteinFilterIds.length === 0 ? (
+          <>
+            <div>
+              * You have checked {highlightedNodes.length.toLocaleString()}{' '}
+              proteins in the table.
+            </div>
+            <FilledButton
+              text="Filter to keep only these proteins"
+              onPress={updateProteinFilterIds}
+            />
+          </>
+        ) : highlightedNodes.length < volatileProteinFilterIds.length ? (
+          <>
+            <div>
+              * You have checked {highlightedNodes.length.toLocaleString()}{' '}
+              proteins in the table that is already filtered on{' '}
+              {volatileProteinFilterIds.length.toLocaleString()} proteins.
+            </div>
+            <FilledButton
+              text="Refine filter to keep only checked proteins"
+              onPress={updateProteinFilterIds}
+            />
+            {resetProteinFilterButton}
+          </>
+        ) : (
+          <>
+            <div>
+              You have checked all the proteins that are currently being
+              filtered on. Either uncheck one or more proteins or reset the
+              filter entirely using the button below.
+            </div>
+            {resetProteinFilterButton}
+          </>
+        )}
+      </div>
+    </PopoverButton>
+  );
+
+  const resetButton = (
+    <FloatingButton
+      text={''}
+      ariaLabel={'Reset filters'}
+      tooltip={'Reset filters'}
+      disabled={
+        pfamFilterIds.length +
+          corePeripheralFilterValue.length +
+          selectedSpecies.length +
+          proteinFilterIds.length ===
+          0 && searchQuery === ''
+      }
+      icon={Undo}
+      size={'medium'}
+      themeRole={'primary'}
+      onPress={() => {
+        setSearchQuery('');
+        setProteinFilterIds([]);
+        setPfamFilterIds([]);
+        setCorePeripheralFilterValue([]);
+        setSelectedSpecies([]);
+        setResetCounter((prev) => prev + 1);
+        setTablePageNumber(1);
+      }}
+    />
+  );
+
+  if (filteredRows == null) return null;
+
+  const warningText =
+    numSequences >= MIN_SEQUENCES_FOR_TREE &&
+    (filteredRows.length > MAX_SEQUENCES_FOR_TREE ||
+      filteredRows.length < MIN_SEQUENCES_FOR_TREE) ? (
+      <span>
+        To see a phylogenetic tree please use a filter to display between{' '}
+        {MIN_SEQUENCES_FOR_TREE.toLocaleString()} and{' '}
+        {MAX_SEQUENCES_FOR_TREE.toLocaleString()} sequences
+      </span>
+    ) : filteredRows.length < sortedRows.length ? (
+      <span>
+        Note: The ortholog group's phylogeny has been pruned to display only the
+        currently filtered proteins. This may differ from a tree constructed{' '}
+        <i>de novo</i> using only these sequences.
+      </span>
+    ) : undefined;
+
+  return (
+    <div
+      style={
+        {
+          '--row-hl-bg-color': highlightColor50,
+        } as CSSProperties
+      }
+    >
+      {warningText && (
+        <div
+          style={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            borderLeft: '.2em solid rgb(225, 133, 133)',
+            borderRight: '.2em solid rgb(225, 133, 133)',
+            padding: '.5em 1em',
+            background: 'rgb(255, 228, 228)',
+            gap: '1em',
+            marginBottom: '1em',
+            fontWeight: 500,
+          }}
+        >
+          {warningText}
+        </div>
+      )}
+      <div
+        style={{
+          padding: '10px',
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '1em',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <RecordFilter
+          key={`text-search-${resetCounter}`}
+          searchTerm={searchQuery}
+          onSearchTermChange={setSearchQuery}
+          recordDisplayName="Proteins"
+          filterAttributes={filterAttributes}
+          selectedColumnFilters={volatileSelectedColumnFilters}
+          onColumnFilterChange={(keys) => setSelectedColumnFilters(keys)}
+        />
+        <div className="MesaComponent" style={{ marginRight: 'auto' }}>
+          <div className="TableToolbar-Info">
+            <RowCounter
+              rows={sortedRows}
+              uiState={{
+                filteredRowCount: numSequences - rowCount, // num rows filtered **away**
+              }}
+              eventHandlers={{}}
+            />
+          </div>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '1em',
+            alignItems: 'center',
+            marginLeft: 'auto',
+          }}
+        >
+          <strong>Filters: </strong>
+          {proteinFilter}
+          {pfamFilter}
+          {corePeripheralFilter}
+          {taxonFilter}
+          {resetButton}
+        </div>
+      </div>
+      {filteredRows && filteredRows?.length > Infinity ? (
+        <div>
+          Sorry, too many proteins selected:{' '}
+          {filteredRows.length.toLocaleString()}. Please use filters to select
+          up to {MAX_SEQUENCES_FOR_TREE.toLocaleString()}
+        </div>
+      ) : (
+        <>
+          <TreeTable
+            rowHeight={rowHeight}
+            treeProps={treeProps}
+            tableProps={mesaState}
+            hideTree={
+              filteredRows?.length > MAX_SEQUENCES_FOR_TREE ||
+              filteredRows?.length < MIN_SEQUENCES_FOR_TREE
+            }
+            maxColumnWidth={maxColumnWidth}
+          ></TreeTable>
+          <form action="/cgi-bin/msaOrthoMCL" target="_blank" method="post">
+            <input type="hidden" name="project_id" value="OrthoMCL" />
+            {highlightedNodes.map((id) => (
+              <input type="hidden" name="msa_full_ids" value={id} key={id} />
+            ))}
+            <p>
+              Please note: selecting a large number of proteins will take
+              several minutes to align.
+            </p>
+            <div id="userOptions">
+              <p>
+                Output format: &nbsp;
+                <select name="clustalOutFormat">
+                  <option value="clu">Mismatches highlighted</option>
+                  <option value="fasta">FASTA</option>
+                  <option value="phy">PHYLIP</option>
+                  <option value="st">STOCKHOLM</option>
+                  <option value="vie">VIENNA</option>
+                </select>
+              </p>
+              <div
+                style={{ display: 'flex', alignItems: 'center', gap: '10px' }}
+              >
+                <button type="submit" disabled={clustalDisabled}>
+                  Run Clustal Omega for selected proteins
+                </button>
+                {clustalDisabled && (
+                  <span>(You must select at least two proteins.)</span>
+                )}
+              </div>
+            </div>
+          </form>
+        </>
+      )}
+      <p>
+        <a href={treeUrl}>
+          <i className="fa fa-download"></i> Download raw newick file
+        </a>
+      </p>
+    </div>
+  );
+}
+
+function rowMatch(row: RowType, query: RegExp, keys?: string[]): boolean {
+  // Get the values to search in based on the optionally provided keys
+  const valuesToSearch =
+    keys && keys.length > 0 ? keys.map((key) => row[key]) : Object.values(row);
+
+  return (
+    valuesToSearch.find((value) => {
+      if (value != null) {
+        if (typeof value === 'string') return value.match(query);
+        else if (
+          typeof value === 'object' &&
+          'displayText' in value &&
+          typeof value.displayText === 'string'
+        )
+          return value.displayText.match(query);
+      }
+      return false;
+    }) !== undefined
+  );
+}
+
+function createSafeSearchRegExp(input: string): RegExp | undefined {
+  if (input === '') return undefined;
+  const queryTerms = parseSearchQueryString(input);
+  const searchTermRegex = areTermsInStringRegexString(queryTerms);
+  return new RegExp(searchTermRegex, 'i');
+}
+
+function logIdMismatches(A: string[], B: string[]) {
+  const inAButNotB = difference(A, B);
+  const inBButNotA = difference(B, A);
+
+  console.log(`Total unique IDs in A: ${new Set(A).size}`);
+  console.log(`Total unique IDs in B: ${new Set(B).size}`);
+
+  console.log(`Number of IDs in A but not in B: ${inAButNotB.length}`);
+  console.log(
+    `First few IDs in A but not in B: ${inAButNotB.slice(0, 5).join(', ')}`
+  );
+
+  console.log(`Number of IDs in B but not in A: ${inBButNotA.length}`);
+  console.log(
+    `First few IDs in B but not in A: ${inBButNotA.slice(0, 5).join(', ')}`
+  );
+}
+
+function truncate_full_id_for_tree_comparison(full_id: string): string {
+  const truncated_id = (full_id as string).split(':')[0];
+  return truncated_id;
+}
+
+function getLeaves(tree: Branch): Branch[] {
+  return tree.getLeaves();
+}
+
+function sortRows(leaves: Branch[], mesaRows: TableValue): TableValue {
+  if (leaves == null) return mesaRows;
+
+  // Some full_ids end in :RNA
+  // However, the Newick files seem to be omitting the colon and everything following it.
+  // (Colons are part of Newick format.)
+  // So we remove anything after a ':' and hope it works!
+  // This is the only place where we use the IDs from the tree file.
+
+  // make a map for performance
+  const rowMap = new Map(
+    mesaRows.map((row) => [
+      truncate_full_id_for_tree_comparison(row.full_id as string),
+      row,
+    ])
+  );
+
+  return leaves
+    .map(({ id }) => rowMap.get(id))
+    .filter((row): row is RowType => row != null);
+}
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/eval-hist.png b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/records/eval-hist.png
new file mode 100644
index 0000000000000000000000000000000000000000..082fec2e9d4734b0a670be177ec40d127f811bbd
GIT binary patch
literal 24039
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
U!blVtxUV^L((#`qCoaVN3m}8M;{X5v

literal 0
HcmV?d00001

diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/services.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/services.tsx
index 6b7219830f..4909d687c6 100644
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/services.tsx
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/services.tsx
@@ -16,6 +16,8 @@ export function wrapWdkService(wdkService: WdkService): OrthoService {
   return {
     ...addMultiBlastService(wdkService),
     getGroupLayout: orthoServiceWrappers.getGroupLayout(wdkService),
+    getGroupTreeUrl: orthoServiceWrappers.getGroupTreeUrl(wdkService),
+    getGroupTree: orthoServiceWrappers.getGroupTree(wdkService),
     getProteomeSummary: orthoServiceWrappers.getProteomeSummary(wdkService),
     getTaxons: orthoServiceWrappers.getTaxons(wdkService),
   };
@@ -28,6 +30,14 @@ const orthoServiceWrappers = {
       method: 'get',
       path: `/group/${groupName}/layout`,
     }),
+  getGroupTreeUrl: (wdkService: WdkService) => (groupName: string) =>
+    wdkService.serviceUrl + '/newick-protein-tree/' + groupName,
+  getGroupTree: (wdkService: WdkService) => (groupName: string) =>
+    // this endpoint does not return json, so no need to use helper
+    // method `sendRequest`
+    window
+      .fetch(`${wdkService.serviceUrl}/newick-protein-tree/${groupName}`)
+      .then((resp) => resp.text()),
   getProteomeSummary: (wdkService: WdkService) => () =>
     wdkService.sendRequest(proteomeSummaryRowsDecoder, {
       useCache: true,
@@ -44,6 +54,8 @@ const orthoServiceWrappers = {
 
 export interface OrthoService extends WdkService {
   getGroupLayout: (groupName: string) => Promise<GroupLayoutResponse>;
+  getGroupTreeUrl: (groupName: string) => string;
+  getGroupTree: (groupName: string) => Promise<string>;
   getProteomeSummary: () => Promise<ProteomeSummaryRows>;
   getTaxons: () => Promise<TaxonEntries>;
 }
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/store-modules/RecordStoreModule.ts b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/store-modules/RecordStoreModule.ts
index b5599ce329..11431ea122 100644
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/store-modules/RecordStoreModule.ts
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/store-modules/RecordStoreModule.ts
@@ -9,30 +9,6 @@ import {
 
 export const getAllFields = RecordStoreModule.getAllFields;
 
-export function reduce(
-  state = {} as RecordStoreModule.State,
-  action: Action
-): RecordStoreModule.State {
-  const nextState = RecordStoreModule.reduce(state, action);
-
-  switch (action.type) {
-    case RecordActions.RECORD_RECEIVED:
-      return action.payload.recordClass.urlSegment === 'group'
-        ? {
-            ...nextState,
-            collapsedSections: RecordStoreModule.getAllFields(nextState).filter(
-              (name) =>
-                name === SEQUENCES_TABLE_NAME ||
-                name === PROTEIN_PFAMS_TABLE_NAME
-            ),
-          }
-        : nextState;
-
-    default:
-      return nextState;
-  }
-}
-
 const {
   observeNavigationVisibilityPreference,
   observeNavigationVisibilityState,
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/types/images.d.ts b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/types/images.d.ts
new file mode 100644
index 0000000000..1c5923252c
--- /dev/null
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/types/images.d.ts
@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export default value;
+}
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/types/patristic.d.ts b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/types/patristic.d.ts
new file mode 100644
index 0000000000..c6a6e56d57
--- /dev/null
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/types/patristic.d.ts
@@ -0,0 +1,22 @@
+declare module 'patristic' {
+  export class Branch {
+    id: string;
+    parent?: Branch | null;
+    length?: number;
+    children?: Branch[];
+    value?: number;
+    depth?: number;
+    height?: number;
+
+    constructor(data: Branch, children?: (data: any) => Branch[]);
+    addChild(data: Branch): Branch;
+    addParent(data: Branch, siblings?: Branch[]): Branch;
+    ancestors(): Branch[];
+    clone(): Branch;
+    getLeaves(): Branch[];
+    remove(pruneAncestors: boolean): Branch[];
+    toNewick(): string;
+  }
+
+  export function parseNewick(newickStr: string): Branch;
+}
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/utils/tree.ts b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/utils/tree.ts
new file mode 100644
index 0000000000..ff114a1c1e
--- /dev/null
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/utils/tree.ts
@@ -0,0 +1,3 @@
+import { string } from '@veupathdb/wdk-client/lib/Utils/Json';
+
+export const groupTreeResponseDecoder = string;
diff --git a/packages/sites/ortho-site/webpack.config.js b/packages/sites/ortho-site/webpack.config.js
index 0f6ef873d5..7f4d03aa29 100644
--- a/packages/sites/ortho-site/webpack.config.js
+++ b/packages/sites/ortho-site/webpack.config.js
@@ -1,8 +1,9 @@
 var configure = require('@veupathdb/site-webpack-config');
+const { addD3Shimming } = require('@veupathdb/components/webpack-shimming');
 
 var additionalConfig = {
   entry: {
-    'site-client': __dirname + '/webapp/wdkCustomization/js/client/main.js'
+    'site-client': __dirname + '/webapp/wdkCustomization/js/client/main.js',
   },
   module: {
     rules: [
@@ -12,18 +13,21 @@ var additionalConfig = {
         test: /\.jsx?$/,
         include: /node_modules\/@?react-leaflet/,
         use: [
-          { loader: 'babel-loader', options: { configFile: './.babelrc' } }
-        ]
+          { loader: 'babel-loader', options: { configFile: './.babelrc' } },
+        ],
       },
     ],
   },
   resolve: {
     alias: {
       'ortho-client': __dirname + '/webapp/wdkCustomization/js/client',
-      'ortho-images': __dirname + '/webapp/wdkCustomization/images'
-    }
-  }
+      'ortho-images': __dirname + '/webapp/wdkCustomization/images',
+    },
+  },
 };
 
+// shimming of a specific version of d3 for CRC's tidytree JS library
+addD3Shimming(additionalConfig.module.rules);
+
 module.exports = configure(additionalConfig);
 module.exports.additionalConfig = additionalConfig;
diff --git a/yarn.lock b/yarn.lock
index f11d63216a..e10cc8b5ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8318,7 +8318,7 @@ __metadata:
     shape2geohash: ^1.2.5
     stats-lite: ^2.2.0
     storybook: ^6.5.14
-    tidytree: "github:d-callan/TidyTree"
+    tidytree: "https://github.com/d-callan/TidyTree.git#commit=9063e2df3d93c72743702a6d8f43169a1461e5b0"
     typescript: 4.3.4
   peerDependencies:
     "@emotion/react": ^11.10.0
@@ -8790,6 +8790,7 @@ __metadata:
     mini-css-extract-plugin: ^2.7.6
     notistack: ^3.0.1
     npm-run-all: ^4.1.5
+    patristic: ^0.6.0
     popper.js: ^1.16.1
     react: ^18.3.1
     react-cytoscapejs: ^2.0.0
@@ -28580,6 +28581,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"patristic@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "patristic@npm:0.6.0"
+  checksum: b2253b1dcc9ca85e8a4c50f3d496d50bff45f8378f6a5b2e4ec03f69b2332c51d374bcd5e90b4387222ec98c8fb6b26b4788784a6df8234530557dac9e4b0b6f
+  languageName: node
+  linkType: hard
+
 "pbf@npm:^3.2.1":
   version: 3.2.1
   resolution: "pbf@npm:3.2.1"
@@ -36298,13 +36306,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tidytree@github:d-callan/TidyTree":
-  version: 0.6.0
-  resolution: "tidytree@https://github.com/d-callan/TidyTree.git#commit=01715074da658ba390fdc652dfd04aecb985cd37"
+"tidytree@https://github.com/d-callan/TidyTree.git#commit=9063e2df3d93c72743702a6d8f43169a1461e5b0":
+  version: 0.7.0
+  resolution: "tidytree@https://github.com/d-callan/TidyTree.git#commit=9063e2df3d93c72743702a6d8f43169a1461e5b0"
   dependencies:
     d3: ^7.6.1
     patristic: "github:CDCgov/patristic"
-  checksum: a1411f00e012cd1e5aaf503de0d03425ea5aef95df257145d05aee58a0af5bbbeb6f453474094e2fada11ca0609d20339d43ce7674fa4bb5bff76387a145aa03
+  checksum: 243e27ebe6061ff00f66f8de7168eebb09ab2070bdcf429a283ddab307be1adbdbca3623a2779f8bef0a81776956e7e538eb6110fedc9581804ba795017a5a23
   languageName: node
   linkType: hard
 

From bf7a289ef5a780ca5d47e230be091a2d7170fa33 Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Fri, 15 Nov 2024 10:54:32 -0500
Subject: [PATCH 05/11] Updates  user datasets  multi blast (#1272)

* Make multi-blast workspace heading consistent with user-datasets

* fix link and increase font-size for formInfo

* fix link

* Check protocol of url

* Adjust font size of form info
---
 .../multi-blast/src/lib/components/BlastWorkspace.tsx | 10 +++++-----
 .../user-datasets/src/lib/Components/UploadForm.scss  |  1 +
 .../user-datasets/src/lib/Components/UploadForm.tsx   | 11 +++++++----
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/libs/multi-blast/src/lib/components/BlastWorkspace.tsx b/packages/libs/multi-blast/src/lib/components/BlastWorkspace.tsx
index c1225e30d6..36a668ad90 100644
--- a/packages/libs/multi-blast/src/lib/components/BlastWorkspace.tsx
+++ b/packages/libs/multi-blast/src/lib/components/BlastWorkspace.tsx
@@ -28,7 +28,7 @@ export function BlastWorkspace(props: Props) {
   const {
     helpPageUrl,
     workspaceUrl,
-    workspaceHeading = 'BLAST',
+    workspaceHeading = 'My BLAST Jobs',
     workspaceShortName = 'BLAST',
     submitButtonText = 'BLAST',
   } = props;
@@ -41,12 +41,12 @@ export function BlastWorkspace(props: Props) {
         routeBase={workspaceUrl}
         items={[
           {
-            display: 'New job',
-            route: '/new',
+            display: 'All',
+            route: '/all',
           },
           {
-            display: 'My jobs',
-            route: '/all',
+            display: 'New job',
+            route: '/new',
           },
           {
             display: 'Help',
diff --git a/packages/libs/user-datasets/src/lib/Components/UploadForm.scss b/packages/libs/user-datasets/src/lib/Components/UploadForm.scss
index 93c6d2a9a5..ef786c185b 100644
--- a/packages/libs/user-datasets/src/lib/Components/UploadForm.scss
+++ b/packages/libs/user-datasets/src/lib/Components/UploadForm.scss
@@ -33,6 +33,7 @@
   .formInfo {
     width: 80%;
     text-align: justify;
+    font-size: 1.2em;
   }
   select {
     max-width: 450px;
diff --git a/packages/libs/user-datasets/src/lib/Components/UploadForm.tsx b/packages/libs/user-datasets/src/lib/Components/UploadForm.tsx
index 396702394f..10ec0abc41 100644
--- a/packages/libs/user-datasets/src/lib/Components/UploadForm.tsx
+++ b/packages/libs/user-datasets/src/lib/Components/UploadForm.tsx
@@ -398,7 +398,7 @@ function UploadForm({
               <>
                 Before uploading your dataset, please ensure your data is
                 formatted according to the instructions listed in the{' '}
-                <Link to={{ pathname: '../datasets/help' }}>"Help" tab</Link>.
+                <Link to={{ pathname: `${baseUrl}/help` }}>"Help" tab</Link>.
               </>
             ),
           }}
@@ -628,7 +628,9 @@ function validateForm<T extends string = string>(
   ) {
     return {
       valid: false,
-      errors: ['The provided data URL does not seem valid'],
+      errors: [
+        'The provided data URL does not seem valid. A valid URL must start with "http://" or "https://".',
+      ],
     };
   }
 
@@ -655,12 +657,13 @@ function isCompleteDataUploadSelection(
 
 // https://stackoverflow.com/a/43467144
 function isValidUrl(string: string) {
+  let url: URL;
   try {
-    new URL(string);
+    url = new URL(string);
   } catch (_) {
     return false;
   }
-  return true;
+  return url.protocol === 'http' || url.protocol === 'https';
 }
 
 export default UploadForm;

From cdbf6f3e80f2290b409943b2ec281777066a9a00 Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Fri, 15 Nov 2024 11:42:45 -0500
Subject: [PATCH 06/11] Keyboard a11y improvements (#1274)

* Enable focus ring

* Restore focus to button when popover is closed

* do not remove outline style by default

* prevent focus loss when toggling expansion state of internal node via keyboard

* make user menu fully keyboard accessible

* Make tooltip container keyboard accessible

* Improve focus ring styling for basket button in result table

* Make step edit button fully keyboard accessible

* Make organism filter toggle button fully keyboard accessible

* Add UIThemeProvider to ortho-site

* Improve focus styling for featured tools
---
 .../Mesa/Components/MesaTooltip.tsx           |  1 +
 .../buttons/PopoverButton/PopoverButton.tsx   |  5 +-
 .../buttons/SwissArmyButton/index.tsx         |  2 +-
 .../checkboxes/CheckboxTree/CheckboxTree.tsx  |  1 +
 .../CheckboxTree/CheckboxTreeNode.tsx         | 43 +++++------
 .../components/theming/UIThemeProvider.tsx    | 16 ++++-
 .../ResultTableSummaryView.scss               |  1 +
 .../src/Views/Strategy/StepBoxes.css          |  3 +-
 .../web-common/src/App/UserMenu/UserMenu.jsx  | 56 +++------------
 .../web-common/src/App/UserMenu/UserMenu.scss | 18 +++--
 .../components/homepage/FeaturedTools.scss    |  6 ++
 .../js/client/components/OrganismFilter.scss  |  6 ++
 .../js/client/components/OrganismFilter.tsx   |  8 ++-
 .../client/components/layout/OrthoMCLPage.tsx | 71 +++++++++++--------
 14 files changed, 126 insertions(+), 111 deletions(-)

diff --git a/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx b/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx
index ca5656a597..aa1b948790 100644
--- a/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx
+++ b/packages/libs/coreui/src/components/Mesa/Components/MesaTooltip.tsx
@@ -63,6 +63,7 @@ const MesaTooltip = ({
       enterDelay={showDelay}
       className={(className ?? '') + (corner ? ` ${corner}` : '')}
       style={finalStyle}
+      tabIndex={0}
     >
       {children}
     </Tooltip>
diff --git a/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx b/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx
index 79b5f0f63b..07dcc8db43 100644
--- a/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx
+++ b/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx
@@ -119,9 +119,12 @@ const PopoverButton = forwardRef<PopoverButtonHandle, PopoverButtonProps>(
     );
 
     const onCloseHandler = useCallback(() => {
+      setTimeout(() => {
+        anchorEl?.focus(); // return focus to button
+      });
       setAnchorEl(null);
       onClose && onClose();
-    }, [onClose]);
+    }, [anchorEl, onClose]);
 
     // Expose the `close()` method to external components via ref
     useImperativeHandle(
diff --git a/packages/libs/coreui/src/components/buttons/SwissArmyButton/index.tsx b/packages/libs/coreui/src/components/buttons/SwissArmyButton/index.tsx
index c38b106cc2..7fe308af0c 100644
--- a/packages/libs/coreui/src/components/buttons/SwissArmyButton/index.tsx
+++ b/packages/libs/coreui/src/components/buttons/SwissArmyButton/index.tsx
@@ -110,7 +110,7 @@ export default function SwissArmyButton({
               styleSpec[styleState].color ?? 'transparent'
             } !important`,
             borderRadius: styleSpec[styleState].border?.radius ?? 5,
-            outlineStyle: styleSpec[styleState].border?.style ?? 'none',
+            outlineStyle: styleSpec[styleState].border?.style,
             outlineColor: styleSpec[styleState].border?.color,
             outlineWidth: styleSpec[styleState].border?.width,
             outlineOffset: styleSpec[styleState].border?.width
diff --git a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTree.tsx b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTree.tsx
index da26060416..01c1ca0c05 100644
--- a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTree.tsx
+++ b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTree.tsx
@@ -968,6 +968,7 @@ function CheckboxTree<T>(props: CheckboxTreeProps<T>) {
       },
       '.arrow-container': {
         height: '1em',
+        'outline-offset': '-1px',
       },
       '.arrow-icon': {
         fill: '#aaa',
diff --git a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTreeNode.tsx b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTreeNode.tsx
index cdbad9a63f..1f251c584b 100644
--- a/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTreeNode.tsx
+++ b/packages/libs/coreui/src/components/inputs/checkboxes/CheckboxTree/CheckboxTreeNode.tsx
@@ -161,33 +161,28 @@ export default function CheckboxTreeNode<T>({
         {isLeafNode ? null : isActiveSearch ? (
           // this retains the space of the expansion toggle icons for easier formatting
           <div className="active-search-buffer"></div>
-        ) : isExpanded ? (
-          <div className="arrow-container">
-            <ArrowDown
-              className="arrow-icon"
-              tabIndex={0}
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleExpansion(node);
-              }}
-              onKeyDown={(e) =>
-                e.key === 'Enter' ? toggleExpansion(node) : null
-              }
-            />
-          </div>
         ) : (
-          <div className="arrow-container">
-            <ArrowRight
-              className="arrow-icon"
-              tabIndex={0}
-              onClick={(e) => {
-                e.stopPropagation();
+          <div
+            className="arrow-container"
+            tabIndex={0}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleExpansion(node);
+            }}
+            onKeyDown={(e) => {
+              const toggleKeys = isExpanded
+                ? ['Enter', 'ArrowLeft']
+                : ['Enter', 'ArrowRight'];
+              if (toggleKeys.includes(e.key)) {
                 toggleExpansion(node);
-              }}
-              onKeyDown={(e) =>
-                e.key === 'Enter' ? toggleExpansion(node) : null
               }
-            />
+            }}
+          >
+            {isExpanded ? (
+              <ArrowDown className="arrow-icon" />
+            ) : (
+              <ArrowRight className="arrow-icon" />
+            )}
           </div>
         )}
         {!isSelectable || (!isMultiPick && !isLeafNode) ? (
diff --git a/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx b/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx
index 16dd37832f..668a387186 100644
--- a/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx
+++ b/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ThemeProvider } from '@emotion/react';
+import { css, Global, ThemeProvider } from '@emotion/react';
 import { useCoreUIFonts } from '../../hooks';
 
 import { UITheme } from './types';
@@ -14,5 +14,17 @@ export default function UIThemeProvider({
   children,
 }: UIThemeProviderProps) {
   useCoreUIFonts();
-  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+  return (
+    <ThemeProvider theme={theme}>
+      <Global
+        styles={css`
+          *:focus {
+            outline: 2px solid
+              ${theme.palette.primary.hue[theme.palette.primary.level]};
+          }
+        `}
+      />
+      {children}
+    </ThemeProvider>
+  );
 }
diff --git a/packages/libs/wdk-client/src/Views/ResultTableSummaryView/ResultTableSummaryView.scss b/packages/libs/wdk-client/src/Views/ResultTableSummaryView/ResultTableSummaryView.scss
index bf954c3cc3..c4c5b57208 100644
--- a/packages/libs/wdk-client/src/Views/ResultTableSummaryView/ResultTableSummaryView.scss
+++ b/packages/libs/wdk-client/src/Views/ResultTableSummaryView/ResultTableSummaryView.scss
@@ -118,6 +118,7 @@
     padding: 5px;
     background: none;
     border: none;
+    outline-offset: -5px;
   }
 
   .RemoveColumnButton {
diff --git a/packages/libs/wdk-client/src/Views/Strategy/StepBoxes.css b/packages/libs/wdk-client/src/Views/Strategy/StepBoxes.css
index 96271199c6..aaff2e3493 100644
--- a/packages/libs/wdk-client/src/Views/Strategy/StepBoxes.css
+++ b/packages/libs/wdk-client/src/Views/Strategy/StepBoxes.css
@@ -419,7 +419,8 @@ button.StepBoxes--EditButton:hover {
   background: yellow;
 }
 
-.StrategyPanel--Panel:hover button.StepBoxes--EditButton {
+.StrategyPanel--Panel:hover button.StepBoxes--EditButton,
+.StrategyPanel--Panel:focus-within button.StepBoxes--EditButton {
   display: inline;
 }
 
diff --git a/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx b/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
index bd3073ddcc..d04e25e929 100644
--- a/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
+++ b/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import './UserMenu.scss';
 
@@ -7,45 +8,22 @@ import { IconAlt as Icon } from '@veupathdb/wdk-client/lib/Components';
 class UserMenu extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { isEntered: false, isHovered: false };
     this.renderMenu = this.renderMenu.bind(this);
-    this.onMouseEnter = this.onMouseEnter.bind(this);
-    this.onMouseLeave = this.onMouseLeave.bind(this);
-  }
-
-  onMouseEnter(event) {
-    this.setState({ isEntered: true, isHovered: true });
-  }
-
-  onMouseLeave(event) {
-    this.setState({ isEntered: false });
-
-    setTimeout(() => {
-      if (!this.state.isEntered) {
-        this.setState({ isHovered: false });
-      }
-    }, 500);
   }
 
   renderMenu() {
-    const { user, actions, webAppUrl } = this.props;
-    const { showLoginForm } = actions;
-    const { isHovered } = this.state;
-    const { properties } = user.properties ? user : { properties: null };
-    const { firstName, lastName } = properties
-      ? properties
-      : { firstName: '', lastName: '' };
+    const { user } = this.props;
     const items = user.isGuest
       ? [
           {
             icon: 'sign-in',
             text: 'Login',
-            onClick: () => actions.showLoginForm(window.location.href),
+            route: '/user/login',
           },
           {
             icon: 'user-plus',
             text: 'Register',
-            href: webAppUrl + '/app/user/registration',
+            route: '/user/registration',
             target: '_blank',
           },
         ]
@@ -53,33 +31,26 @@ class UserMenu extends React.Component {
           {
             icon: 'vcard',
             text: 'My Profile',
-            href: webAppUrl + '/app/user/profile',
+            route: '/user/profile',
           },
           {
             icon: 'power-off',
             text: 'Log Out',
-            onClick: () => actions.showLogoutWarning(window.location.href),
+            route: '/user/logout',
           },
         ];
 
     return (
-      <div className={'UserMenu-Pane' + (!isHovered ? ' inert' : '')}>
+      <div className="UserMenu-Pane">
         {items.map((item, key) => {
-          const { onClick, href, target } = item;
+          const { route, target } = item;
           const className = 'UserMenu-Pane-Item';
 
-          let props = {
-            className,
-            onClick: onClick ? onClick : () => null,
-          };
-          if (href) props = Object.assign({}, props, { href, target });
-          const Element = href ? 'a' : 'div';
-
           return (
-            <Element key={key} {...props}>
+            <Link key={key} className={className} to={route} target={target}>
               <Icon fa={item.icon + ' UserMenu-Pane-Item-Icon'} />
               {item.text}
-            </Element>
+            </Link>
           );
         })}
       </div>
@@ -87,7 +58,6 @@ class UserMenu extends React.Component {
   }
 
   render() {
-    const { onMouseEnter, onMouseLeave } = this;
     const { user } = this.props;
     if (!user) return null;
 
@@ -96,11 +66,7 @@ class UserMenu extends React.Component {
     const Menu = this.renderMenu;
 
     return (
-      <div
-        className="box UserMenu"
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
+      <div className="box UserMenu">
         <Icon className="UserMenu-Icon" fa={iconClass} />
         <span className="UserMenu-Title">
           {typeof isGuest === 'undefined'
diff --git a/packages/libs/web-common/src/App/UserMenu/UserMenu.scss b/packages/libs/web-common/src/App/UserMenu/UserMenu.scss
index 6273f28450..15d5ef1ab8 100644
--- a/packages/libs/web-common/src/App/UserMenu/UserMenu.scss
+++ b/packages/libs/web-common/src/App/UserMenu/UserMenu.scss
@@ -21,9 +21,22 @@ $white: #e0e0e0;
     padding: 5px;
     font-style: italic;
   }
+
+  &:focus-within,
+  &:hover {
+    .UserMenu-Pane {
+      opacity: 1;
+      pointer-events: all;
+      transition: none;
+    }
+  }
 }
 
 .UserMenu-Pane {
+  transition: opacity 500ms 500ms;
+  opacity: 0;
+  pointer-events: none;
+
   right: 0;
   top: 100%;
   color: black;
@@ -33,17 +46,12 @@ $white: #e0e0e0;
   min-width: 150px;
   position: absolute;
   border-radius: 10px;
-  transition: all 0.2s;
   line-height: 1em;
   background-color: $white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   .fa {
     color: $red;
   }
-  &.inert {
-    opacity: 0;
-    pointer-events: none;
-  }
   &::after {
     top: -3px;
     width: 10px;
diff --git a/packages/libs/web-common/src/components/homepage/FeaturedTools.scss b/packages/libs/web-common/src/components/homepage/FeaturedTools.scss
index abac5a284a..a1d90f70b0 100644
--- a/packages/libs/web-common/src/components/homepage/FeaturedTools.scss
+++ b/packages/libs/web-common/src/components/homepage/FeaturedTools.scss
@@ -132,6 +132,12 @@
           border: 0.2em solid #00304c;
         }
       }
+
+      &:focus,
+      &__selected:focus {
+        outline: none;
+        text-decoration: underline;
+      }
     }
   }
 
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.scss b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.scss
index f8136e573a..802ad3c1fa 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.scss
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.scss
@@ -89,6 +89,12 @@
     white-space: nowrap;
     width: 18em;
 
+    &:hover,
+    &:focus {
+      background-color: #396aa4;
+      background-image: none;
+    }
+
     &Text {
       margin: 0 2em;
     }
diff --git a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.tsx b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.tsx
index 249e1a26b8..4e3478cc74 100644
--- a/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.tsx
+++ b/packages/sites/genomics-site/webapp/wdkCustomization/js/client/components/OrganismFilter.tsx
@@ -123,11 +123,15 @@ type ExpansionBarProps = {
 
 function ExpansionBar(props: ExpansionBarProps) {
   return (
-    <div className={cx('--ExpansionBar')} onClick={props.onClick}>
+    <button
+      type="button"
+      className={cx('--ExpansionBar')}
+      onClick={props.onClick}
+    >
       {props.arrow}
       <span className={cx('--ExpansionBarText')}>{props.message}</span>
       {props.arrow}
-    </div>
+    </button>
   );
 }
 
diff --git a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/layout/OrthoMCLPage.tsx b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/layout/OrthoMCLPage.tsx
index eef8cc5544..4cf9377536 100644
--- a/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/layout/OrthoMCLPage.tsx
+++ b/packages/sites/ortho-site/webapp/wdkCustomization/js/client/components/layout/OrthoMCLPage.tsx
@@ -40,6 +40,8 @@ import {
 } from 'ortho-client/hooks/searchCheckboxTree';
 
 import './OrthoMCLPage.scss';
+import { colors } from '@veupathdb/coreui';
+import { UIThemeProvider } from '@veupathdb/coreui/lib/components/theming';
 
 const cx = makeClassNameHelper('vpdb-');
 
@@ -86,37 +88,46 @@ export const OrthoMCLPage: FunctionComponent<Props> = (props) => {
   );
 
   return (
-    <OrthoMCLSnackbarProvider styleProps={snackbarStyleProps}>
-      <ReduxNotificationHandler>
-        <div className={cx('RootContainer', props.classNameModifier)}>
-          <ErrorBoundary>
-            <Header
-              menuItems={menuItems}
-              containerClassName={cx(
-                'Header',
-                isHeaderExpanded ? 'expanded' : 'collapsed'
-              )}
-              onShowAnnouncements={onShowAnnouncements}
-              showAnnouncementsToggle={showAnnouncementsToggle}
-              branding={branding}
-            />
-          </ErrorBoundary>
-          <div className={cx('Announcements')}>
-            <Announcements
-              closedBanners={closedBanners}
-              setClosedBanners={setClosedBanners}
-            />
+    <UIThemeProvider
+      theme={{
+        palette: {
+          primary: { hue: colors.mutedBlue, level: 600 },
+          secondary: { hue: colors.mutedRed, level: 500 },
+        },
+      }}
+    >
+      <OrthoMCLSnackbarProvider styleProps={snackbarStyleProps}>
+        <ReduxNotificationHandler>
+          <div className={cx('RootContainer', props.classNameModifier)}>
+            <ErrorBoundary>
+              <Header
+                menuItems={menuItems}
+                containerClassName={cx(
+                  'Header',
+                  isHeaderExpanded ? 'expanded' : 'collapsed'
+                )}
+                onShowAnnouncements={onShowAnnouncements}
+                showAnnouncementsToggle={showAnnouncementsToggle}
+                branding={branding}
+              />
+            </ErrorBoundary>
+            <div className={cx('Announcements')}>
+              <Announcements
+                closedBanners={closedBanners}
+                setClosedBanners={setClosedBanners}
+              />
+            </div>
+            <Main containerClassName={cx('Main')}>{props.children}</Main>
+            <ErrorBoundary>
+              <Footer containerClassName={cx('Footer')}></Footer>
+            </ErrorBoundary>
+            <ErrorBoundary>
+              <CookieBanner />
+            </ErrorBoundary>
           </div>
-          <Main containerClassName={cx('Main')}>{props.children}</Main>
-          <ErrorBoundary>
-            <Footer containerClassName={cx('Footer')}></Footer>
-          </ErrorBoundary>
-          <ErrorBoundary>
-            <CookieBanner />
-          </ErrorBoundary>
-        </div>
-      </ReduxNotificationHandler>
-    </OrthoMCLSnackbarProvider>
+        </ReduxNotificationHandler>
+      </OrthoMCLSnackbarProvider>
+    </UIThemeProvider>
   );
 };
 

From 95c2e152e5725ffc7ec8f243de0958c36bdbeaf6 Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Fri, 15 Nov 2024 11:56:46 -0500
Subject: [PATCH 07/11] Keyboard a11y improvements  focus visible (#1275)

* use type=button for PopoverButton

* use :focus-visible instead of :focus
---
 .../src/components/buttons/PopoverButton/PopoverButton.tsx      | 1 +
 packages/libs/coreui/src/components/theming/UIThemeProvider.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx b/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx
index 07dcc8db43..bf018fefd4 100644
--- a/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx
+++ b/packages/libs/coreui/src/components/buttons/PopoverButton/PopoverButton.tsx
@@ -177,6 +177,7 @@ const PopoverButton = forwardRef<PopoverButtonHandle, PopoverButtonProps>(
         additionalAriaProperties={{
           'aria-controls': 'dropdown',
           'aria-haspopup': 'true',
+          type: 'button',
         }}
       />
     );
diff --git a/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx b/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx
index 668a387186..e6481d115a 100644
--- a/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx
+++ b/packages/libs/coreui/src/components/theming/UIThemeProvider.tsx
@@ -18,7 +18,7 @@ export default function UIThemeProvider({
     <ThemeProvider theme={theme}>
       <Global
         styles={css`
-          *:focus {
+          *:focus-visible {
             outline: 2px solid
               ${theme.palette.primary.hue[theme.palette.primary.level]};
           }

From ad66002e7310effc57fb090e813777679106367c Mon Sep 17 00:00:00 2001
From: Cristina Aurrecoechea <aurreco@palm.penn.apidb.org>
Date: Fri, 15 Nov 2024 15:19:36 -0500
Subject: [PATCH 08/11] ortho 7 banners for prod and beta

---
 .../src/components/Announcements.jsx          | 92 ++++++++++++++-----
 1 file changed, 69 insertions(+), 23 deletions(-)

diff --git a/packages/libs/web-common/src/components/Announcements.jsx b/packages/libs/web-common/src/components/Announcements.jsx
index f85f18de55..0d50518a1c 100644
--- a/packages/libs/web-common/src/components/Announcements.jsx
+++ b/packages/libs/web-common/src/components/Announcements.jsx
@@ -64,31 +64,71 @@ const siteAnnouncements = [
       }
     },
   },
-  /*
-  { 
-    id: 'live-beta',
-    renderDisplay: props => {
-      if ( isGenomicHomePage(props.projectId, props.location) ) {
-        if (props.projectId == 'VectorBase' || props.projectId == 'OrthoMCL') return (
-          <div key="live-beta">
-            Welcome to {props.displayName} <i>beta</i> where you will find the newest versions of our interface, features, tools and data.  
-            While we transition to making this beta site permanent, <a target="_blank" href={`https://legacy.${props.projectId.toLowerCase()}.${props.projectId === 'SchistoDB' ? 'net' : 'org'}`}>
-            legacy.{props.projectId.toLowerCase()}.org</a> is still available. 
-            Here is a <a target="_blank" href="https://upenn.co1.qualtrics.com/jfe/form/SV_9N2RTXq7ljpZnDv">form for sending your feedback</a> on the beta sites.
+
+  {
+    id: 'ortho-live',
+    renderDisplay: (props) => {
+      if (props.projectId == 'OrthoMCL' && props.buildNumber == '6.21')
+        return (
+          <div key="ortho621">
+            Visit the new{' '}
+            <a target="_blank" href="https://beta.orthomcl.org">
+              <b>OrthoMCL 7 beta</b>
+            </a>{' '}
+            with OrthoFinder clustering, Similar Groups, and Phylogenetic Trees!
+            <a
+              target="_blank"
+              href="https://qa.static-content.veupathdb.org/documents/Read_more_Ortho7_new.pdf"
+            >
+              {' '}
+              Read more about the new features
+            </a>
+            , and see a{' '}
+            <a
+              target="_blank"
+              href="https://qa.static-content.veupathdb.org/documents/Ortho7_basic_functionality_tutorial.pdf"
+            >
+              {' '}
+              full tutorial here
+            </a>
+            .
           </div>
-        )
-        else return (
-          <div key="live-beta">
-            Welcome to {props.displayName} <i>beta</i> where you will find the newest versions of our interface, features, tools and data.
-            While we transition to making this beta site permanent, <a target="_blank" href={`https://legacy.${props.projectId.toLowerCase()}.${props.projectId === 'SchistoDB' ? 'net' : 'org'}`}>
-            legacy.{props.projectId.toLowerCase()}.org</a> is still available (to be retired March 2nd).
-            Here is a <a target="_blank" href="https://upenn.co1.qualtrics.com/jfe/form/SV_9N2RTXq7ljpZnDv">form for sending your feedback</a> on the beta sites.
-          </div> 
-        )
-      }
-    }
+        );
+    },
+  },
+
+  {
+    id: 'ortho-beta',
+    renderDisplay: (props) => {
+      if (props.projectId == 'OrthoMCL' && props.buildNumber == '7.0')
+        return (
+          <div key="ortho7">
+            Welcome to <b>OrthoMCL 7 beta</b> with OrthoFinder clustering,
+            Similar Groups, and Phylogenetic Trees!
+            <a
+              target="_blank"
+              href="https://qa.static-content.veupathdb.org/documents/Read_more_Ortho7_new.pdf"
+            >
+              {' '}
+              Read more about the new features
+            </a>
+            , and see a{' '}
+            <a
+              target="_blank"
+              href="https://qa.static-content.veupathdb.org/documents/Ortho7_basic_functionality_tutorial.pdf"
+            >
+              {' '}
+              full tutorial here
+            </a>
+            . While we transition to making this beta site permanent,{' '}
+            <a target="_blank" href="https://orthomcl.org">
+              OrthoMCL 6_21
+            </a>{' '}
+            is still available.
+          </div>
+        );
+    },
   },
-*/
 
   /*
 {   
@@ -1269,6 +1309,12 @@ function param(name, { search = '' }) {
 function isGenomicSite(projectId) {
   return !/ClinEpiDB|MicrobiomeDB/i.test(projectId);
 }
+function isQASite() {
+  return (
+    param('qa', window.location) === 'true' ||
+    /^(qa|q1|q2)/.test(window.location.hostname)
+  );
+}
 function isBetaSite() {
   return (
     param('beta', window.location) === 'true' ||

From e4cdeaf6f60cdc8708823de5b05071bf11a78f62 Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Fri, 15 Nov 2024 16:55:51 -0500
Subject: [PATCH 09/11] Fix login links in user menu

---
 .../web-common/src/App/UserMenu/UserMenu.jsx  | 20 +++++++++++++++----
 .../web-common/src/App/UserMenu/UserMenu.scss |  6 +++++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx b/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
index d04e25e929..5b68912c72 100644
--- a/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
+++ b/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import './UserMenu.scss';
 
 import { IconAlt as Icon } from '@veupathdb/wdk-client/lib/Components';
+import { showLogoutWarning } from '@veupathdb/wdk-client/lib/Actions/UserSessionActions';
 
 class UserMenu extends React.Component {
   constructor(props) {
@@ -12,13 +13,15 @@ class UserMenu extends React.Component {
   }
 
   renderMenu() {
-    const { user } = this.props;
+    const { user, actions } = this.props;
     const items = user.isGuest
       ? [
           {
             icon: 'sign-in',
             text: 'Login',
-            route: '/user/login',
+            route: `/user/login?destination=${encodeURIComponent(
+              window.location
+            )}`,
           },
           {
             icon: 'user-plus',
@@ -36,16 +39,25 @@ class UserMenu extends React.Component {
           {
             icon: 'power-off',
             text: 'Log Out',
-            route: '/user/logout',
+            onClick: () => actions.showLogoutWarning(),
           },
         ];
 
     return (
       <div className="UserMenu-Pane">
         {items.map((item, key) => {
-          const { route, target } = item;
+          const { route, target, onClick } = item;
           const className = 'UserMenu-Pane-Item';
 
+          if (onClick) {
+            return (
+              <button type="button" className={className} onClick={onClick}>
+                <Icon fa={item.icon + ' UserMenu-Pane-Item-Icon'} />
+                {item.text}
+              </button>
+            );
+          }
+
           return (
             <Link key={key} className={className} to={route} target={target}>
               <Icon fa={item.icon + ' UserMenu-Pane-Item-Icon'} />
diff --git a/packages/libs/web-common/src/App/UserMenu/UserMenu.scss b/packages/libs/web-common/src/App/UserMenu/UserMenu.scss
index 15d5ef1ab8..9c89554bbc 100644
--- a/packages/libs/web-common/src/App/UserMenu/UserMenu.scss
+++ b/packages/libs/web-common/src/App/UserMenu/UserMenu.scss
@@ -33,7 +33,7 @@ $white: #e0e0e0;
 }
 
 .UserMenu-Pane {
-  transition: opacity 500ms 500ms;
+  transition: opacity 1s 500ms;
   opacity: 0;
   pointer-events: none;
 
@@ -65,6 +65,10 @@ $white: #e0e0e0;
     transform: rotateZ(45deg);
     background-color: #e0e0e0;
   }
+  button.UserMenu-Pane-Item {
+    background: transparent;
+    border: none;
+  }
   .UserMenu-Pane-Item {
     &,
     &:link,

From fc9bedad8908638ea074fb04ad54593335cc4a3b Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Mon, 18 Nov 2024 09:59:46 -0500
Subject: [PATCH 10/11] Add rel=noreferrer to circumvent redirect logic

---
 packages/libs/web-common/src/components/Announcements.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/libs/web-common/src/components/Announcements.jsx b/packages/libs/web-common/src/components/Announcements.jsx
index 0d50518a1c..dbe46ca981 100644
--- a/packages/libs/web-common/src/components/Announcements.jsx
+++ b/packages/libs/web-common/src/components/Announcements.jsx
@@ -121,7 +121,7 @@ const siteAnnouncements = [
               full tutorial here
             </a>
             . While we transition to making this beta site permanent,{' '}
-            <a target="_blank" href="https://orthomcl.org">
+            <a target="_blank" rel="noreferrer" href="https://orthomcl.org">
               OrthoMCL 6_21
             </a>{' '}
             is still available.

From 97d1f214f9bc227e41e033a5b676cc3d882e5da4 Mon Sep 17 00:00:00 2001
From: Dave Falke <dfalke@uga.edu>
Date: Mon, 18 Nov 2024 13:43:06 -0500
Subject: [PATCH 11/11] More improvements to accessibility of user menu

- Replace hover animation with font-weight change
- Remove pointer-event rule that caused menu to be non-interactive in
  some scenarios
- Use action for login, rather than route
---
 packages/libs/web-common/src/App/UserMenu/UserMenu.jsx  | 9 +++------
 packages/libs/web-common/src/App/UserMenu/UserMenu.scss | 8 +++-----
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx b/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
index 5b68912c72..a923ca8f31 100644
--- a/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
+++ b/packages/libs/web-common/src/App/UserMenu/UserMenu.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import './UserMenu.scss';
-
 import { IconAlt as Icon } from '@veupathdb/wdk-client/lib/Components';
-import { showLogoutWarning } from '@veupathdb/wdk-client/lib/Actions/UserSessionActions';
+
+import './UserMenu.scss';
 
 class UserMenu extends React.Component {
   constructor(props) {
@@ -19,9 +18,7 @@ class UserMenu extends React.Component {
           {
             icon: 'sign-in',
             text: 'Login',
-            route: `/user/login?destination=${encodeURIComponent(
-              window.location
-            )}`,
+            onClick: () => actions.showLoginForm(window.location),
           },
           {
             icon: 'user-plus',
diff --git a/packages/libs/web-common/src/App/UserMenu/UserMenu.scss b/packages/libs/web-common/src/App/UserMenu/UserMenu.scss
index 9c89554bbc..7328a08ded 100644
--- a/packages/libs/web-common/src/App/UserMenu/UserMenu.scss
+++ b/packages/libs/web-common/src/App/UserMenu/UserMenu.scss
@@ -26,16 +26,14 @@ $white: #e0e0e0;
   &:hover {
     .UserMenu-Pane {
       opacity: 1;
-      pointer-events: all;
       transition: none;
     }
   }
 }
 
 .UserMenu-Pane {
-  transition: opacity 1s 500ms;
+  transition: opacity 500ms 1s;
   opacity: 0;
-  pointer-events: none;
 
   right: 0;
   top: 100%;
@@ -78,15 +76,15 @@ $white: #e0e0e0;
       text-decoration: none;
     }
     flex: 1;
+    border-radius: 0.2em;
     display: flex;
     font-size: 1.3em;
     padding: 5px;
     flex-direction: row;
     white-space: nowrap;
     cursor: pointer;
-    transition: all 0.4s;
     &:hover {
-      transform: scale(1.04);
+      font-weight: 500;
     }
     .UserMenu-Pane-Item-Icon {
       width: 20px;