[REFACTOR] Unified DA search and file downloads for PreCAWG public data release

[jimmyzhen]

This pull request primarily refactors the differential abundance (DA) results search and file download features in support of the PreCAWG public data release. It also include UI changes for the announcement of the data release on the homepage, external users' dashboard page, as well as the public accessible announcement page.

Important Notes regarding this PR

• "Differential abundance results" has been generally replaced with "Summary-level results"
• PASS1B-06 study is referred to as "Endurance Training in Young Adult Rats"
• PreCAWG study is referred to as "Acute Exercise in Human Sedentary Adults (Pre-Suspension)"

Key Changes

Unified DA search

• Removed top-level study selector UI
• Enabled protein name search (and deprecated protein id search) for PreCAWG study and standardized all keyword search using auto-suggest
• Unified rat and human summary-level search results table with common columns
• Removed PASS1B-06 training summary-level results in search
• Removed top-level "omics" search criteria dropdown menu
• Added study filter
• Refactored tissue filter logic for unified rat and human tissues
• Refactored assay filter logic for a combination of selected omes and assays
• Refactored timepoint filter by unifying rat and human timepoints
• Added tooltips to filter headers
• Replaced client-side pagination to server-side implementation for results navigation and size select
• Refactored search page title and description

Gene-centric view

• Deprecated. Time series plots will be integrated into unified summary-level results search in the future.

File download

• Added PreCAWG summary-level data to file download browser for public access
• Added PreCAWG summary-level data bundles for public access

Top Nav

• Refactored to improve organization of links
• Added icons for menu links to external resources

Footer

• Added link to consortium's Assistance Request form

Homepage

• Added UI (above the fold) for announcement of PreCAWG public data release
• Updated quick link buttons to data download and summary-level results search

External Users' Dashboard page (upon login)

• Added UI for announcement of PreCAWG public data release
• Added featured link to PreCAWG data-viz
• Updated descriptions of feature links

Announcements page

• Added new announcement entry at top of page for PreCAWG public data release

Summary by CodeRabbit

• New Features

  • Epigenomics toggle, unified summary‑level results table with server‑side pagination/downloads, and new Pre‑Suspension human dataset (internal/external variants).

• UI/UX Improvements

  • Navigation reorganized (Browse Data/Results/Data Visualization), landing hero modal/CTAs, external data‑release banner, “Request Assistance” footer link, updated dataset labels; removed legacy gene‑centric route and network visualization.

• Bug Fixes

  • Hardened auth callback handling, friendlier search error messages, improved tissue/timepoint filtering and activation checks.

• Tests

  • Updated tests to mock lazy components and align routing/setup and expectations.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/Search/searchReducer.js (1)

83-131: ⚠️ Potential issue | 🟠 Major

Avoid mutating searchParams.study/omics arrays in-place.

params is a shallow copy, so push mutates state arrays and can break Redux immutability.

🛠️ Safe immutable update

-      if (action.field.match(/^(study|omics)$/)) {
-        const isActiveParam = params[action.field].indexOf(action.filterValue);
-        if (isActiveParam === -1) {
-          // Adds filter if new
-          params[action.field].push(action.filterValue);
-        } else {
-          // Removes filter if already exists
-          const newArr = params[action.field].filter(
-            (value) => !(value === action.filterValue)
-          );
-          params[action.field] = newArr;
-        }
-      }
+      if (action.field.match(/^(study|omics)$/)) {
+        const currentValues = Array.isArray(params[action.field])
+          ? [...params[action.field]]
+          : [];
+        const isActiveParam = currentValues.indexOf(action.filterValue);
+        if (isActiveParam === -1) {
+          currentValues.push(action.filterValue);
+        } else {
+          currentValues.splice(isActiveParam, 1);
+        }
+        params[action.field] = currentValues;
+      }

src/Search/searchPage.jsx (1)

144-159: ⚠️ Potential issue | 🟡 Minor

Guard against empty/invalid manual input matches.

match(...) can return null (e.g., only commas/spaces) and .map will throw.

✅ Safe fallback

-      const terms = inputStr.match(/("[^"]+"|[^, ]+)/g);
-      // Remove double quotes from terms that are enclosed and trim any extra spaces
-      return terms.map((term) => term.replace(/"/g, '').trim());
+      const terms = inputStr.match(/("[^"]+"|[^, ]+)/g);
+      if (!terms) return [];
+      // Remove double quotes from terms that are enclosed and trim any extra spaces
+      return terms.map((term) => term.replace(/"/g, '').trim());

🤖 Fix all issues with AI agents

In `@src/Search/deaSearchResultFilters.jsx`:
- Around line 38-97: The buttonFilterFingerprint currently omits the
includeEpigenomics toggle so toggling it doesn't change the fingerprint and
won't trigger the useEffect that calls handleSearch; update the fingerprint
object (the variable buttonFilterFingerprint) to include the includeEpigenomics
value from searchParams (e.g. searchParams.includeEpigenomics || false) so the
useEffect dependency sees the change and triggers the debounced handleSearch;
ensure any comparisons using previousFingerprintRef.current still work with the
expanded fingerprint shape.

In `@src/Search/searchPage.jsx`:
- Around line 125-134: The placeholder strings in renderPlaceholder still imply
comma/quote parsing; update the examples to single-term, simple examples without
commas or quotation marks (modify the strings returned in function
renderPlaceholder based on searchParams.ktype). For 'protein' replace the long
comma/quoted list with a few single-entry examples like "atpase inhibitor
mitochondrial" or "vegfa"; for 'metab' use single-term/metabolite examples like
"amino acids", "c10:2 carnitine"; and for the default return use simple gene
symbols like "bag3", "myom2" without commas or quotes so the UI no longer
suggests special parsing. Ensure the changed strings are used in the existing
renderPlaceholder function and referenced by searchParams.ktype.

In `@src/Search/searchReducer.js`:
- Around line 252-287: In the TOGGLE_EPIGENOMICS case of the searchReducer,
reset pagination so toggling epigenomics doesn't leave the user on an
out-of-range page: set the searchParams start index to 0 (e.g., params.start =
0) and, if you use a nested pagination object, also clear
params.pagination.start = 0 before returning the updated state; keep the rest of
the existing logic that updates params.filters, newFilters.must_not, and
includeEpigenomics.

🧹 Nitpick comments (3)

src/BrowseDataPage/components/dataDownloadsMain.jsx (1)

159-162: Consider extracting repeated userType checks for clarity.

The pattern !userType || (userType && userType === 'external') appears twice (lines 160-162, 199-201), and the internal check at line 196 uses inline ternary logic. Extracting these to variables at the top of the component would improve readability and reduce duplication.

♻️ Suggested refactor

   const dispatch = useDispatch();
   const location = useLocation();

   // anonymous user or authenticated user
   const userType = profile.user_metadata && profile.user_metadata.userType;
+  const isInternalUser = userType === 'internal';
+  const isExternalAccess = !userType || userType === 'external';

Then use isExternalAccess for cssSelector and isInternalUser for conditional logic:

-              cssSelector={
-                !userType || (userType && userType === 'external')
-                  ? 'external-access'
-                  : ''
-              }
+              cssSelector={isExternalAccess ? 'external-access' : ''}

-              dataSelectHandler={() => userType && userType === 'internal' ? dispatch(actions.selectHumanPreCovidSedAduData()) : dispatch(actions.selectHumanPreCovidSedAduExternalData())}
+              dataSelectHandler={() => isInternalUser ? dispatch(actions.selectHumanPreCovidSedAduData()) : dispatch(actions.selectHumanPreCovidSedAduExternalData())}

Also applies to: 196-201

src/Citation/citationPage.jsx (1)

58-61: Consider capitalizing “Pre‑Suspension” for consistency.
Keeps the label aligned with the PR terminology and other UI surfaces.

💡 Suggested tweak

-          <h5 className="mt-4">Acute exercise in human sedentary adults (pre-suspension)</h5>
+          <h5 className="mt-4">Acute exercise in human sedentary adults (Pre-Suspension)</h5>

src/Search/searchReducer.js (1)

1-54: Use the EPIGENOMICS_ASSAYS constant for default exclusions to avoid drift.

Right now the default/reset must_not.assay values duplicate the constant. Keeping them in sync is easy to miss.

♻️ Suggested change (apply in default and both reset blocks)

-      must_not: {
-        assay: ['epigen-atac-seq', 'epigen-rrbs', 'epigen-methylcap-seq'],
-      },
+      must_not: {
+        assay: [...EPIGENOMICS_ASSAYS],
+      },

Also applies to: 210-245

[coderabbitai]

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/Search/searchReducer.js (1)

108-118: ⚠️ Potential issue | 🔴 Critical

Same state mutation issue with filter arrays.

newFilters is a shallow copy of params.filters, so newFilters[action.field] is still the original array reference. The .push() call mutates state directly.

🐛 Proposed fix

       // Handle selection of a filter value
       if (action.field.match(/^(tissue|assay|sex|timepoint)$/)) {
+        const currentFilterArray = newFilters[action.field] || [];
         if (isActiveFilter === -1) {
-          // Adds filter if new
-          newFilters[action.field].push(action.filterValue);
+          newFilters[action.field] = [...currentFilterArray, action.filterValue];
         } else {
-          // Removes filter if already exists
-          const newArr = newFilters[action.field].filter(
-            (value) => !(value === action.filterValue)
+          newFilters[action.field] = currentFilterArray.filter(
+            (value) => value !== action.filterValue
           );
-          newFilters[action.field] = newArr;
         }
       }

🤖 Fix all issues with AI agents

In `@src/Search/searchPage.jsx`:
- Around line 696-697: toggleEpigenomics is declared in SearchPage.propTypes as
.isRequired but a default value is provided in SearchPage.defaultProps (making
it effectively optional); fix by either removing toggleEpigenomics from
SearchPage.defaultProps so it truly is required, or make it optional by removing
.isRequired from SearchPage.propTypes; update the
SearchPage.propTypes/SearchPage.defaultProps entries (reference symbols:
toggleEpigenomics, SearchPage.propTypes, SearchPage.defaultProps) accordingly.
- Around line 137-139: The DOM queries for inputEl and inputElManual run during
render and can be null; move the queries into a post-mount context or replace
them with refs: either (a) wrap document.querySelector('.rbt-input-main') and
document.querySelector('.search-input-ktype') inside a useEffect that runs after
mount and store the elements in state/refs, or (b) attach a React ref (reuse
inputRef for the Typeahead input and add a new ref for the manual input) and
read ref.current where needed; update all usages of inputEl and inputElManual to
use the new refs or the values populated inside useEffect so you never call
document.querySelector during render.

In `@src/Search/searchReducer.js`:
- Around line 93-104: The reducer mutates nested state by calling .push() on
params[action.field] (params is a shallow copy of state.searchParams), so
replace the in-place mutation with an immutable update: create a new array when
adding (e.g., newArr = [...params[action.field], action.filterValue]) and assign
it to params[action.field], and when removing use filter to produce a new array
(you already do this for removal); update the reducer code paths that reference
params, state.searchParams, action.field, and action.filterValue to always
assign newly created arrays rather than mutating existing ones.

🧹 Nitpick comments (4)

src/Search/searchReducer.js (1)

14-16: DRY: Use the EPIGENOMICS_ASSAYS constant instead of hardcoding.

The assay list is defined as a constant at line 15 but then hardcoded again at lines 35-36, 220, and 243. If updated in one place, the others could be missed.

♻️ Proposed fix

       contrast_type: ['exercise_with_controls', 'acute'],
       must_not: {
-        assay: ['epigen-atac-seq', 'epigen-rrbs', 'epigen-methylcap-seq'],
+        assay: [...EPIGENOMICS_ASSAYS],
       },

Apply similarly at lines 219-221 and 242-244.

Also applies to: 34-36

src/Search/searchPage.jsx (3)

286-294: Avoid repeated calls to getFriendlyErrorMessage with the same args.

The function is called three times with identical arguments. Store the result once:

♻️ Proposed fix

             {!searching && searchError ? (
+              (() => {
+                const errorInfo = getFriendlyErrorMessage(searchError, scope);
+                return (
               <div className="alert alert-danger">
                 <strong>
                   <i className="bi bi-exclamation-triangle-fill mr-2" />
                   Search Error
                 </strong>
-                <p className="mb-0 mt-2">{getFriendlyErrorMessage(searchError, scope).friendlyMessage}</p>
-                {getFriendlyErrorMessage(searchError, scope).suggestion && (
-                  <p className="mb-0 mt-1 small">{getFriendlyErrorMessage(searchError, scope).suggestion}</p>
+                <p className="mb-0 mt-2">{errorInfo.friendlyMessage}</p>
+                {errorInfo.suggestion && (
+                  <p className="mb-0 mt-1 small">{errorInfo.suggestion}</p>
                 )}
               </div>
+                );
+              })()
             ) : null}

Or extract to a small component / helper variable before the return.

---

392-394: Guard against undefined for total comparison.

total can be undefined per PropTypes (no .isRequired). The total === 0 check is truthy only for exactly 0, but explicit handling improves clarity.

♻️ Suggested tweak

-  const isExpectedEmpty = !error || total === 0 || isNoResultsError(error) || isFilterMismatchError(error);
+  const isExpectedEmpty = !error || (typeof total === 'number' && total === 0) || isNoResultsError(error) || isFilterMismatchError(error);

---

89-93: Consider moving mergeAndDedupeById outside the component.

This pure helper doesn't depend on component state or props. Extracting it avoids re-creating the function on every render.

♻️ Proposed refactor

+// Helper to concatenate arrays of objects and remove duplicates by 'id' property
+function mergeAndDedupeById(...arrays) {
+  const combined = arrays.flat();
+  return [...new Map(combined.map((item) => [item.id, item])).values()];
+}
+
 export function SearchPage({
   ...
-  // Helper to concatenate arrays of objects and remove duplicates by 'id' property
-  function mergeAndDedupeById(...arrays) {
-    const combined = arrays.flat();
-    return [...new Map(combined.map((item) => [item.id, item])).values()];
-  }

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/Search/searchPage.jsx`:
- Around line 147-154: Guard against match() returning null by checking the
matched result before calling .map; inside the block where you compute
inputValue (using inputRef.current?.getInput()?.value) assign the result of
inputValue.match(...) to a variable like terms, then if (!terms) return [] (or
an appropriate empty array/result) otherwise return terms.map(term =>
term.replace(/"/g, '').trim()); this ensures code paths using the terms variable
(in the same scope where inputRef and getInput are used) never call .map on
null.

🧹 Nitpick comments (1)

src/Search/searchPage.jsx (1)

89-123: Memoize getOptions to avoid re-merging large datasets every render.

This runs on each render and can be expensive with big lists. Consider caching by ktype, study selection, and userType.

♻️ Suggested refactor

-  function getOptions() {
-    if ((includesPass1b06 && includesPrecawg && includesPass1a06) || (userType && userType === 'internal')) {
-      switch (searchParams.ktype) {
-        case 'gene':
-          return mergeAndDedupeById(genes, ratAcuteGenes, humanGenes);
-        case 'metab':
-          return mergeAndDedupeById(metabolites, ratAcuteMetabolites, humanMetabolites);
-        case 'protein':
-          return mergeAndDedupeById(proteins, ratAcuteProteins, humanProteins);
-        default:
-          return [];
-      }
-    }
-    if ((includesPass1b06 && includesPrecawg) || (!userType || userType === 'external')) {
-      switch (searchParams.ktype) {
-        case 'gene':
-          return mergeAndDedupeById(genes, humanGenes);
-        case 'metab':
-          return mergeAndDedupeById(metabolites, humanMetabolites);
-        case 'protein':
-          return mergeAndDedupeById(proteins, humanProteins);
-        default:
-          return [];
-      }
-    }
-    return [];
-  }
+  const options = useMemo(() => {
+    if ((includesPass1b06 && includesPrecawg && includesPass1a06) || (userType && userType === 'internal')) {
+      switch (searchParams.ktype) {
+        case 'gene':
+          return mergeAndDedupeById(genes, ratAcuteGenes, humanGenes);
+        case 'metab':
+          return mergeAndDedupeById(metabolites, ratAcuteMetabolites, humanMetabolites);
+        case 'protein':
+          return mergeAndDedupeById(proteins, ratAcuteProteins, humanProteins);
+        default:
+          return [];
+      }
+    }
+    if ((includesPass1b06 && includesPrecawg) || (!userType || userType === 'external')) {
+      switch (searchParams.ktype) {
+        case 'gene':
+          return mergeAndDedupeById(genes, humanGenes);
+        case 'metab':
+          return mergeAndDedupeById(metabolites, humanMetabolites);
+        case 'protein':
+          return mergeAndDedupeById(proteins, humanProteins);
+        default:
+          return [];
+      }
+    }
+    return [];
+  }, [includesPass1b06, includesPrecawg, includesPass1a06, userType, searchParams.ktype]);

Then update:

-                    options={getOptions()}
+                    options={options}

As per coding guidelines: Performance optimizations are considered, especially for large data sets or complex computations.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/Search/searchPage.jsx`:
- Around line 285-306: The checks mistakenly reference searchResults.data (which
doesn't exist) causing them to always be truthy; update the conditional
expressions that currently use !searchResults.data to use
!searchResults.result.data instead (in the block rendering the alert and the
subsequent block that checks total), keeping the other conditions (searching,
searchResults.errors, searchResults.total === 0, scope) intact so that
isFilterMismatchError, getFriendlyErrorMessage, searchResults, and scope logic
behave as intended.

🧹 Nitpick comments (3)

src/Search/searchPage.jsx (3)

89-93: Consider hoisting mergeAndDedupeById outside the component.

This pure function doesn't depend on any props/state and gets recreated on every render. Moving it to module scope eliminates unnecessary allocations.

♻️ Suggested refactor

+// Helper to concatenate arrays of objects and remove duplicates by 'id' property
+function mergeAndDedupeById(...arrays) {
+  const combined = arrays.flat();
+  return [...new Map(combined.map((item) => [item.id, item])).values()];
+}
+
 export function SearchPage({
   ...
 }) {
-  // Helper to concatenate arrays of objects and remove duplicates by 'id' property
-  function mergeAndDedupeById(...arrays) {
-    const combined = arrays.flat();
-    return [...new Map(combined.map((item) => [item.id, item])).values()];
-  }

---

164-173: Pagination handler works correctly.

Minor optimization: wrap in useCallback to avoid recreating the function on each render, especially since it's passed as a prop to SearchResultsTable.

♻️ Optional: memoize with useCallback

-  const handlePaginationChange = ({ size: newSize, start: newStart }) => {
+  const handlePaginationChange = useCallback(({ size: newSize, start: newStart }) => {
     const updatedParams = {
       ...searchParams,
       size: newSize,
       start: newStart,
     };
     handleSearch(updatedParams, searchParams.keys, 'filters', userType);
-  };
+  }, [searchParams, handleSearch, userType]);

---

274-283: Repeated getFriendlyErrorMessage calls.

Calling the function multiple times with identical arguments in the same render is wasteful. Store the result once.

♻️ Suggested refactor

 {!searching && searchError ? (
+  (() => {
+    const errorInfo = getFriendlyErrorMessage(searchError, scope);
+    return (
       <div className="alert alert-danger">
         <strong>
           <i className="bi bi-exclamation-triangle-fill mr-2" />
           Search Error
         </strong>
-        <p className="mb-0 mt-2">{getFriendlyErrorMessage(searchError, scope).friendlyMessage}</p>
-        {getFriendlyErrorMessage(searchError, scope).suggestion && (
-          <p className="mb-0 mt-1 small">{getFriendlyErrorMessage(searchError, scope).suggestion}</p>
+        <p className="mb-0 mt-2">{errorInfo.friendlyMessage}</p>
+        {errorInfo.suggestion && (
+          <p className="mb-0 mt-1 small">{errorInfo.suggestion}</p>
         )}
       </div>
+    );
+  })()
 ) : null}

Or extract to a small <ErrorAlert /> component for cleaner JSX.

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/BrowseDataPage/components/dataDownloadsMain.jsx`:
- Around line 193-203: SelectiveDataDownloadsCard uses a different predicate for
styling than for selecting data: dataSelectHandler treats any non-'internal'
userType as external, but cssSelector only marks ''external-access'' for
undefined or explicit 'external'. Change the cssSelector to the same logic as
dataSelectHandler (i.e., treat any userType !== 'internal' or missing userType
as external) so the card gets external-access styling whenever it will dispatch
the external action; update the cssSelector prop on the
SelectiveDataDownloadsCard instance that currently references userType to mirror
the dispatch predicate.

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/MainStudy/overview.jsx`:
- Around line 212-215: The img element showing src
"motrpac-human-precovid-sed-adu-study-overview.png" has incorrect alt text
copied from the endurance section; update the alt on that img in
MainStudy/overview.jsx to an accurate, accessible description such as "Acute
Exercise Study Overview — Pre‑COVID sedentary adult study" (or similar concise
phrase) so the alt reflects the acute exercise figure.
- Around line 198-202: Fix the missing space in the paragraph text inside
src/MainStudy/overview.jsx by updating the string that currently reads
"period.Biological" to "period. Biological" (look for the JSX paragraph block in
the MainStudy overview component that contains the sentence "On the main test
day, participants arrived after an overnight fast and then completed their
assigned exercise or rest period.Biological samples...").

🧹 Nitpick comments (1)

src/BrowseDataPage/components/dataDownloadsMain.jsx (1)

196-196: Consider extracting the data select handler for readability.

The inline ternary in the callback is dense and harder to scan at a glance. A small refactor could improve clarity.

♻️ Optional refactor

+  const handleHumanSedAduDataSelect = () => {
+    if (userType === 'internal') {
+      dispatch(actions.selectHumanPreCovidSedAduData());
+    } else {
+      dispatch(actions.selectHumanPreCovidSedAduExternalData());
+    }
+  };
+
   // Then in JSX:
-  dataSelectHandler={() => userType && userType === 'internal' ? dispatch(actions.selectHumanPreCovidSedAduData()) : dispatch(actions.selectHumanPreCovidSedAduExternalData())}
+  dataSelectHandler={handleHumanSedAduDataSelect}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/MainStudy/overview.jsx`:
- Around line 207-211: The DOM id "project-overview-experiment-design" is
duplicated; change the acute/first block's id to a unique value (e.g.
"project-overview-experiment-design-acute") in the JSX where the <div
className="study-figure ..."> is defined and update any matching collapse
controls (buttons/anchors using data-bs-target, href, or aria-controls that
reference "#project-overview-experiment-design") to reference the new id; ensure
the endurance section keeps its original id so collapse toggles affect the
correct element.

[jyu-sm]

looking good.