Merge pull request #363 from MoTrPAC/361_JZ_Metabolomics_DEA_Updates

Connects to #361. PASS1B-06 metabolomics DEA search result updates.

package.json

@@ -25,13 +25,13 @@
     "react-dom": "17.0.1",
     "react-google-recaptcha": "^3.1.0",
     "react-helmet": "^6.1.0",
+    "react-lite-youtube-embed": "^2.4.0",
     "react-redux": "8.0.5",
     "react-responsive": "^10.0.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "5.0.1",
     "react-table": "^7.7.0",
     "react-tooltip": "^5.11.2",
-    "react-youtube": "^10.1.0",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
     "tocbot": "^4.25.0",

src/LandingPage/components/subscribeDataUpdates.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { trackEvent } from '../../GoogleAnalytics/googleAnalytics';
+
+// Function to render landing page announcement
+function SubscribeDataUpdates() {
+  return (
+    <div className="data-update-signup col-12 mb-4">
+      <h1 className="data-updates-signup-title display-3">Subscribe to our data updates</h1>
+      <div className="data-updates-signup-content mb-4 lead">
+        Stay in the know about the latest data releases and available resources from the
+        MoTrPAC Data Hub.
+      </div>
+      <a
+        href={process.env.REACT_APP_DATA_UPDATES_SIGNUP_URL}
+        className="btn btn-primary btn-lg"
+        role="button"
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={trackEvent.bind(
+          this,
+          'User Engagement',
+          'subscribe_data_updates',
+          'Landing Page',
+          'Data updates signup',
+        )}
+      >
+        SUBSCRIBE
+      </a>
+    </div>
+  );
+}
+
+export default SubscribeDataUpdates;

src/LandingPage/landingPage.jsx

@@ -5,9 +5,10 @@ import { Redirect, Link } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import VisNetworkReactComponent from 'vis-network-react';
 import { useMediaQuery } from 'react-responsive';
-import YouTube from 'react-youtube';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
 import Footer from '../Footer/footer';
-import PromoteBanner from './promoteBanner';
+import OpenOfficeHour from './openOfficeHour';
+import SubscribeDataUpdates from './components/subscribeDataUpdates';
 import landingPageStructuredData from '../lib/searchStructuredData/landingPage';
 import IconSet from '../lib/iconSet';
 
@@ -33,6 +34,14 @@ function AnimatedDownArrow() {
   );
 }
 
+function AnimatedDownArrowDark() {
+  return (
+    <div className="animated-down-arrow pb-4 w-100">
+      <img src={IconSet.ArrowDownAnimatedDark} alt="down-arrow" />
+    </div>
+  );
+}
+
 // configs for visjs network visualization rendering
 const options = {
   height: '100%',
@@ -104,22 +113,6 @@ export function LandingPage({ isAuthenticated, profile }) {
     };
   }
 
-  // youtube video player configuration
-  const onPlayerReady = (event) => {
-    // access to player in all event handlers via event.target
-    event.target.pauseVideo();
-  };
-
-  const opts = {
-    height: '390',
-    width: '640',
-    playerVars: {
-      // https://developers.google.com/youtube/player_parameters
-      autoplay: 0,
-      cc_load_policy: 1,
-    },
-  };
-
   return (
     <div className="row marketing content-container">
       <Helmet>
@@ -275,17 +268,15 @@ export function LandingPage({ isAuthenticated, profile }) {
         <div className="w-100 h-100 d-flex align-items-center">
           <div className="section-content-container container text-center">
             <div
-              className="embedContainer embed-responsive embed-responsive-16by9 mt-lg-4"
+              className="embedContainer embed-responsive mt-lg-4"
               id="youtube-tutorial-video-container"
             >
-              <YouTube
-                videoId="3zHnzUMo_vw"
-                opts={opts}
-                onReady={onPlayerReady}
-                loading="lazy"
+              <LiteYouTubeEmbed
+                id="3zHnzUMo_vw"
+                params="autoplay=0&cc_load_policy=1"
+                poster="maxresdefault"
                 title="Data Hub Tutorial Video"
-                className="embed-youtube-video-container"
-                iframeClassName="embed-responsive-item border border-dark"
+                iframeClass="embed-responsive-item border border-dark"
               />
             </div>
             <div className="container text-center mt-4">
@@ -301,22 +292,22 @@ export function LandingPage({ isAuthenticated, profile }) {
         <div className="w-100 h-100 d-flex align-items-center">
           <div className="section-content-container container text-center">
             <div className="row content-code-repository d-flex align-items-center">
-              <div className="feature-image col-12 col-md-5 mx-auto">
+              <div className="feature-image col-12 col-md-6 mx-auto">
                 <img
                   src={LayerRunner}
                   className="img-fluid data-layer-runner"
                   alt="Data Layer Runner"
                   loading="lazy"
                 />
               </div>
-              <div className="content col-12 col-md-7">
+              <div className="content col-12 col-md-6">
                 <h1>
                   <span className="material-icons">terminal</span>
                 </h1>
                 <p>
-                  Deep dive into our source codes integral to the MoTrPAC 6
+                  Deep dive into the source code essential to the MoTrPAC 6
                   month old rats performing endurance training exercise study,
-                  from ingestion to QC and from processing to analysis.
+                  from ingestion to QC, and from processing to analysis.
                 </p>
                 <Link
                   to="/code-repositories"
@@ -327,13 +318,21 @@ export function LandingPage({ isAuthenticated, profile }) {
                 </Link>
               </div>
             </div>
-            <div className="row mt-4" id="join-office-hour">
-              <PromoteBanner />
-            </div>
           </div>
         </div>
-        <div className="w-100 homepage-footer-container">
-          <Footer />
+        <AnimatedDownArrowDark />
+      </section>
+      <section className="eighth">
+        <div className="w-100 h-100">
+          <div className="section-content-container container text-center d-flex align-items-center">
+            <div className="panel-content-container">
+              <OpenOfficeHour />
+              <SubscribeDataUpdates />
+            </div>
+          </div>
+          <div className="w-100 homepage-footer-container">
+            <Footer />
+          </div>
         </div>
       </section>
     </div>

src/LandingPage/promoteBanner.jsx → src/LandingPage/openOfficeHour.jsx

@@ -2,18 +2,22 @@ import React from 'react';
 import { trackEvent } from '../GoogleAnalytics/googleAnalytics';
 
 // Function to render landing page announcement
-function PromoteBanner() {
+function OpenOfficeHour() {
   return (
-    <div className="office-hour-banner border w-100 px-3 py-4 mb-4">
-      <h3 className="office-hour-title">Join Us</h3>
-      <div className="office-hour-content mb-3">
-        The Bioinformatics Center of MoTrPAC will be hosting the next virtual
-        Office Hour on {process.env.REACT_APP_OFFICE_HOUR_DAY}{' '}
-        {process.env.REACT_APP_OFFICE_HOUR_DATE} at 11:00 am Pacific Time.
+    <div className="office-hour-signup col-12 border p-5" id="join-office-hour">
+      <h1 className="office-hour-title display-2">Join Us</h1>
+      <div className="office-hour-content mb-4 lead">
+        Come join us at the next virtual office hour on
+        {' '}
+        {process.env.REACT_APP_OFFICE_HOUR_DAY}
+        {' '}
+        {process.env.REACT_APP_OFFICE_HOUR_DATE}
+        {' '}
+        at 11:00 am Pacific Time and learn more about our data.
       </div>
       <a
         href={process.env.REACT_APP_OFFICE_HOUR_SIGNUP_URL}
-        className="btn btn-primary"
+        className="btn btn-dark btn-lg"
         role="button"
         target="_blank"
         rel="noopener noreferrer"
@@ -31,4 +35,4 @@ function PromoteBanner() {
   );
 }
 
-export default PromoteBanner;
+export default OpenOfficeHour;

src/MultiOmicsWorkingGroups/preCAWG.jsx

@@ -529,11 +529,15 @@ function PreCAWG() {
         analysis on these data, complete the steps below:
         <ol>
           <li>
-            Ensure you are listed on the required IRB for your institution.
+            <strong>Ensure you are listed on the required IRB for your institution.</strong>
           </li>
           <li>
-            Become listed as a MoTrPAC member on the main site with your
-            institutional email: Reach out to{' '}
+            <strong>
+              Become listed as a MoTrPAC member on the main site with your institutional email.
+            </strong>
+            {' '}
+            Reach out to
+            {' '}
             <a href="mailto:[email protected]" target="_blank" rel="noreferrer">
               [email protected]
             </a>

src/Navbar/navbar.jsx

@@ -274,7 +274,7 @@ export function Navbar({
                   </Link>
                   {!userType || (userType && userType !== 'internal') ? (
                     <a
-                      href="https://docs.google.com/forms/d/e/1FAIpQLScjGxwsHDDsE4P4j1VNvIUR73cEyh9SJrofxuQyHqucl0GhBg/viewform"
+                      href={process.env.REACT_APP_DATA_UPDATES_SIGNUP_URL}
                       className="dropdown-item"
                       target="_blank"
                       rel="noreferrer"

src/Search/searchReducer.js

@@ -28,7 +28,7 @@ export const defaultSearchState = {
     },
     fields: [
       'gene_symbol',
-      'metabolite',
+      'metabolite_refmet',
       'feature_ID',
       'tissue',
       'assay',

src/Search/sharedlib.jsx

@@ -25,7 +25,7 @@ export const searchParamsDefaultProps = {
   },
   fields: [
     'gene_symbol',
-    'metabolite',
+    'metabolite_refmet',
     'feature_ID',
     'tissue',
     'assay',
@@ -82,7 +82,7 @@ export const searchParamsPropType = {
  */
 export const timewiseResultsTablePropType = {
   gene_symbol: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  metabolite: PropTypes.string,
+  metabolite_refmet: PropTypes.string,
   feature_ID: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   tissue: PropTypes.string,
   assay: PropTypes.string,
@@ -100,7 +100,7 @@ export const timewiseResultsTablePropType = {
  */
 export const trainingResultsTablePropType = {
   gene_symbol: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  metabolite: PropTypes.string,
+  metabolite_refmet: PropTypes.string,
   feature_ID: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   tissue: PropTypes.string,
   assay_name: PropTypes.string,
@@ -216,8 +216,19 @@ export const timewiseTableColumns = [
 
 export const metabTimewiseTableColumns = [
   {
-    Header: 'Metabolite',
-    accessor: 'metabolite',
+    Header: () => (
+      <div className="d-flex align-items-center timewise-refmet-col-header">
+        <span>RefMet Name</span>
+        <span className="material-icons col-header-info timewise-refmet-tooltip">
+          info
+        </span>
+        <Tooltip anchorSelect=".timewise-refmet-tooltip" place="right">
+          Reference nomenclature for metabolite names
+        </Tooltip>
+      </div>
+    ),
+    accessor: 'metabolite_refmet',
+    sortType: 'basic',
   },
   {
     Header: 'Feature ID',
@@ -385,8 +396,19 @@ export const trainingTableColumns = [
 
 export const metabTrainingTableColumns = [
   {
-    Header: 'Metabolite',
-    accessor: 'metabolite',
+    Header: () => (
+      <div className="d-flex align-items-center training-refmet-col-header">
+        <span>RefMet Name</span>
+        <span className="material-icons col-header-info training-refmet-tooltip">
+          info
+        </span>
+        <Tooltip anchorSelect=".training-refmet-tooltip" place="right">
+          Reference nomenclature for metabolite names
+        </Tooltip>
+      </div>
+    ),
+    accessor: 'metabolite_refmet',
+    sortType: 'basic',
   },
   {
     Header: 'Feature ID',