Merge branch 'dev' into refactor/vite

# Conflicts: # src/LandingPage/landingPage.jsx # src/LandingPage/openOfficeHour.jsx # src/sass/landingPage.scss # src/sass/main.scss # yarn.lock
MoTrPAC · Jul 23, 2024 · 43d12a5 · 43d12a5
2 parents 41c4b22 + 29994d6
commit 43d12a5
Show file tree

Hide file tree

Showing 17 changed files with 526 additions and 368 deletions.
diff --git a/package.json b/package.json
@@ -27,12 +27,12 @@
     "react-dom": "18.3.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": "^6.22.3",
     "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",

diff --git a/src/LandingPage/announcementBanner.jsx b/src/LandingPage/announcementBanner.jsx
diff --git a/src/LandingPage/components/subscribeDataUpdates.jsx b/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={import.meta.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;
diff --git a/src/LandingPage/landingPage.jsx b/src/LandingPage/landingPage.jsx
@@ -1,28 +1,31 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useState } from 'react';
+import { Link, Navigate } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
-import { connect } from 'react-redux';
 import { useMediaQuery } from 'react-responsive';
-import { Link, Navigate } from 'react-router-dom';
-import YouTube from 'react-youtube';
+import LiteYouTubeEmbed from 'react-lite-youtube-embed';
 
-// import network figure 4e visualization dataset
+import OpenOfficeHour from './openOfficeHour';
 import Footer from '../Footer/footer';
-import IconSet from '../lib/iconSet';
-import landingPageStructuredData from '../lib/searchStructuredData/landingPage';
+import SubscribeDataUpdates from './components/subscribeDataUpdates';
 import BackgroundVideo from './components/backgroundVideo';
+// import network figure 4e visualization dataset
 import Figure1C from './components/figure1c';
 import VisNetworkReactComponent from './components/visNetwork';
-import PromoteBanner from './promoteBanner';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-import '@styles/landingPage.scss'
+import landingPageStructuredData from '../lib/searchStructuredData/landingPage';
+import IconSet from '../lib/iconSet';
 
-import LayerRunner from '../assets/LandingPageGraphics/Data_Layer_Runner.png';
 import LogoMoTrPACWhite from '../assets/LandingPageGraphics/logo-motrpac-white.png';
+import LayerRunner from '../assets/LandingPageGraphics/Data_Layer_Runner.png';
+// import RatFigurePaass1b from '../assets/LandingPageGraphics/rat-figure-pass1b.svg';
 import NatureIssueCover from '../assets/LandingPageGraphics/nature_issue_cover.jpg';
+// import network figure 4e visualization dataset
 import landscapeFigure4eNetworkData from '../data/landscape_figure_4e';
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@styles/landingPage.scss'
+
 // animated down arrow icon
 function AnimatedDownArrow() {
   return (
@@ -32,6 +35,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%',
@@ -103,22 +114,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>
@@ -274,17 +269,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">
@@ -300,22 +293,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"
@@ -326,13 +319,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>

diff --git a/src/LandingPage/openOfficeHour.jsx b/src/LandingPage/openOfficeHour.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { trackEvent } from '../GoogleAnalytics/googleAnalytics';
+
+// Function to render landing page announcement
+function OpenOfficeHour() {
+  return (
+    <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
+        {' '}
+        {import.meta.env.REACT_APP_OFFICE_HOUR_DAY}
+        {' '}
+        {import.meta.env.REACT_APP_OFFICE_HOUR_DATE}
+        {' '}
+        at 11:00 am Pacific Time and learn more about our data.
+      </div>
+      <a
+        href={import.meta.env.REACT_APP_OFFICE_HOUR_SIGNUP_URL}
+        className="btn btn-dark btn-lg"
+        role="button"
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={trackEvent.bind(
+          this,
+          'User Engagement',
+          'open_office_hour',
+          'Landing Page',
+          import.meta.env.REACT_APP_OFFICE_HOUR_DATE,
+        )}
+      >
+        SIGN UP
+      </a>
+    </div>
+  );
+}
+
+export default OpenOfficeHour;
diff --git a/src/LandingPage/promoteBanner.jsx b/src/LandingPage/promoteBanner.jsx
diff --git a/src/MultiOmicsWorkingGroups/preCAWG.jsx b/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>

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

diff --git a/src/Search/searchReducer.js b/src/Search/searchReducer.js
@@ -28,7 +28,7 @@ export const defaultSearchState = {
     },
     fields: [
       'gene_symbol',
-      'metabolite',
+      'metabolite_refmet',
       'feature_ID',
       'tissue',
       'assay',