Merge pull request #360 from MoTrPAC/355_JZ_Homepage_UI_Bug

Connects to #355. Connects to #356. Homepage UI improvements and addition of tutorial video in Spanish.
MoTrPAC · Jul 4, 2024 · 1336e45 · 1336e45
2 parents 0d0d4ce + 7f2f879
commit 1336e45
Show file tree

Hide file tree

Showing 18 changed files with 369 additions and 527 deletions.
diff --git a/public/MoTrPAC_horizontal.png b/public/MoTrPAC_horizontal.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -43,7 +43,13 @@
     <!-- Warm up connection for better performance in loading Google Fonts -->
     <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
     <!-- Google Material Icons -->
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" media="print" onload="this.onload=null;this.removeAttribute('media');" fetchpriority="high">
+
+    <!-- no-JS fallback -->
+    <noscript>
+      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    </noscript>
+
 
     <!-- Clarity tracking code -->
     <script type="text/javascript">
@@ -54,9 +60,6 @@
       })(window, document, "clarity", "script", "igkabpsgqm");
     </script>
 
-    <!-- Siteimprove Analytics -->
-    <script async src="https://siteimproveanalytics.com/js/siteanalyze_80352.js"></script>
-
     <title>MoTrPAC Data Hub</title>
   </head>
   <body>
@@ -74,5 +77,8 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+
+    <!-- Siteimprove Analytics -->
+    <script async src="https://siteimproveanalytics.com/js/siteanalyze_80352.js"></script>
   </body>
 </html>
diff --git a/public/logo-motrpac-preview.png b/public/logo-motrpac-preview.png
diff --git a/src/LandingPage/components/backgroundVideo.jsx b/src/LandingPage/components/backgroundVideo.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 
-const videoMoleculeNetwork =
-  'https://cdn.motrpac-data.org/assets/datahub/landing_page/media/background_video_molecules_221511488.mp4';
+const videoMoleculeNetwork = 'https://cdn.motrpac-data.org/assets/datahub/landing_page/media/background_video_molecules_221511488.mp4';
 
 function BackgroundVideo() {
   return (
-    <video className="fullscreen" autoPlay muted loop>
+    <video className="fullscreen" autoPlay muted loop playsInline>
       <source src={videoMoleculeNetwork} type="video/mp4" />
     </video>
   );

diff --git a/src/LandingPage/components/figure1c.jsx b/src/LandingPage/components/figure1c.jsx
@@ -366,7 +366,7 @@ function Figure1C() {
     <div
       ref={svgRef}
       id="heatmap-container"
-      className="d-flex align-items-center justify-content-center position-relative"
+      className="d-flex align-items-center justify-content-center position-relative mt-lg-4"
     >
       {renderHeatmap()}
     </div>

diff --git a/src/LandingPage/landingPage.jsx b/src/LandingPage/landingPage.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Redirect, Link } from 'react-router-dom';
@@ -11,10 +11,9 @@ import PromoteBanner from './promoteBanner';
 import landingPageStructuredData from '../lib/searchStructuredData/landingPage';
 import IconSet from '../lib/iconSet';
 
-import LogoMotrpacWhite from '../assets/logo-motrpac-white.png';
-import BackgroundVideoImage from '../assets/LandingPageGraphics/background_video_preload.jpg';
+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 RatFigurePaass1b from '../assets/LandingPageGraphics/rat-figure-pass1b.svg';
 import NatureIssueCover from '../assets/LandingPageGraphics/nature_issue_cover.jpg';
 import BackgroundVideo from './components/backgroundVideo';
 import Figure1C from './components/figure1c';
@@ -72,6 +71,15 @@ export function LandingPage({ isAuthenticated, profile }) {
   const [networkNodes, setNetwortNodes] = useState([]);
   const isMobile = useMediaQuery({ query: '(max-width: 768px)' });
 
+  useEffect(() => {
+    if (backgroundVideoLoaded || isMobile) {
+      const documentBody = document.querySelector('body.homepage');
+      if (documentBody) {
+        documentBody.classList.add('loaded');
+      }
+    }
+  }, [backgroundVideoLoaded, isMobile]);
+
   // vis-network-react event object
   const events = {};
   // vis-network-react event handlers
@@ -123,25 +131,10 @@ export function LandingPage({ isAuthenticated, profile }) {
       </Helmet>
       <section className="first">
         <div className="w-100 h-100 d-flex align-items-center">
-          {!backgroundVideoLoaded && (
-            <img
-              src={BackgroundVideoImage}
-              className="background-video-preloader"
-              alt="Background Video"
-            />
-          )}
-          {!isMobile ? (
-            <BackgroundVideo />
-          ) : (
-            <img
-              src={BackgroundVideoImage}
-              className="background-video-preloader"
-              alt="Background Video"
-            />
-          )}
+          {!isMobile && <BackgroundVideo />}
           <div className="section-content-container container text-center">
             <div className="logo-container">
-              <img src={LogoMotrpacWhite} alt="MoTrPAC Logo" />
+              <img src={LogoMoTrPACWhite} alt="MoTrPAC Logo" />
             </div>
             <h3 className="display-3">The Molecular Map of</h3>
             <h2 className="display-2">Exercise</h2>
@@ -217,6 +210,7 @@ export function LandingPage({ isAuthenticated, profile }) {
                     src={NatureIssueCover}
                     className="img-fluid lanascape-paper-abstract"
                     alt="Landscape Paper Abstract"
+                    loading="lazy"
                   />
                 </div>
                 <div className="feature-image-attribution mt-1">Cover image by Nik Spencer/Nature</div>
@@ -281,15 +275,16 @@ 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"
-              id="tutorial-video-iframe-container"
+              className="embedContainer embed-responsive embed-responsive-16by9 mt-lg-4"
+              id="youtube-tutorial-video-container"
             >
               <YouTube
                 videoId="3zHnzUMo_vw"
                 opts={opts}
                 onReady={onPlayerReady}
+                loading="lazy"
                 title="Data Hub Tutorial Video"
-                className="embed-video-iframe-container"
+                className="embed-youtube-video-container"
                 iframeClassName="embed-responsive-item border border-dark"
               />
             </div>
@@ -311,6 +306,7 @@ export function LandingPage({ isAuthenticated, profile }) {
                   src={LayerRunner}
                   className="img-fluid data-layer-runner"
                   alt="Data Layer Runner"
+                  loading="lazy"
                 />
               </div>
               <div className="content col-12 col-md-7">

diff --git a/src/Tutorials/tutorials.jsx b/src/Tutorials/tutorials.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 import YouTube from 'react-youtube';
 import PageTitle from '../lib/ui/pageTitle';
 
@@ -21,6 +22,10 @@ function Tutorials() {
 
   return (
     <div className="tutorialsPage px-3 px-md-4 mb-3 container">
+      <Helmet>
+        <html lang="en" />
+        <title>Tutorials - MoTrPAC Data Hub</title>
+      </Helmet>
       <PageTitle title="Tutorials" />
       <div className="main-study-container">
         <div className="main-study-summary-container row mb-4">
@@ -47,6 +52,25 @@ function Tutorials() {
               iframeClassName="embed-responsive-item border border-dark"
             />
           </div>
+          <div className="col-12 mt-5">
+            <p className="lead">
+              Aprenda cómo navegar por el Data Hub de MoTrPAC y explorar los
+              datos de ejercicio multi-omics.
+            </p>
+          </div>
+          <div
+            className="embedContainer embed-responsive embed-responsive-16by9 mx-3 mb-4"
+            id="tutorial-video-iframe-container"
+          >
+            <YouTube
+              videoId="G5zZ8r1lfvo"
+              opts={opts}
+              onReady={onPlayerReady}
+              title="Data Hub Tutorial Video"
+              className="embed-video-iframe-container"
+              iframeClassName="embed-responsive-item border border-dark"
+            />
+          </div>
         </div>
       </div>
     </div>

diff --git a/src/assets/LandingPageGraphics/Data_Layer_Runner.png b/src/assets/LandingPageGraphics/Data_Layer_Runner.png
diff --git a/src/assets/LandingPageGraphics/Infographic_Healthy_Heart.png b/src/assets/LandingPageGraphics/Infographic_Healthy_Heart.png
diff --git a/src/assets/LandingPageGraphics/background_hero_image.jpg b/src/assets/LandingPageGraphics/background_hero_image.jpg
diff --git a/src/assets/LandingPageGraphics/background_video_preload.jpg b/src/assets/LandingPageGraphics/background_video_preload.jpg
diff --git a/src/assets/LandingPageGraphics/landscape_abstract.gif b/src/assets/LandingPageGraphics/landscape_abstract.gif
diff --git a/src/assets/LandingPageGraphics/logo-motrpac-white.png b/src/assets/LandingPageGraphics/logo-motrpac-white.png
diff --git a/src/assets/LandingPageGraphics/nature_issue_cover.jpg b/src/assets/LandingPageGraphics/nature_issue_cover.jpg
diff --git a/src/assets/logo-motrpac-white.png b/src/assets/logo-motrpac-white.png
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
@@ -35,6 +35,18 @@ html, body {
 }
 
 body.homepage {
+  background-image: url(./assets/LandingPageGraphics/background_hero_image.jpg);
+  background-position-x: center;
+  background-position-y: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 100vh;
+
+  &.loaded {
+    background-image: none;
+    height: 100%;
+  }
+
   .App {
     margin-top: 0;
   }