Merge pull request #280 from MoTrPAC/279_JZ_Misc_UI_Updates

Connects to #279. Misc UI updates.
MoTrPAC · Jan 11, 2024 · 1ef81da · 1ef81da
2 parents b52d8af + cfdf5c7
commit 1ef81da
Show file tree

Hide file tree

Showing 9 changed files with 2,921 additions and 28 deletions.
diff --git a/src/LandingPage/components/figure1c.jsx b/src/LandingPage/components/figure1c.jsx
@@ -53,10 +53,10 @@ const assayMap = {
 };
 
 const omeColors = [
-  { type: 'Genomics', color: '#FC8D62' },
-  { type: 'Proteomics', color: '#8DA0CB' },
-  { type: 'Metabolomics', color: '#66C2A5' },
-  { type: 'Immunoassays', color: '#E78AC3' },
+  { type: 'Genomics', color: '#ff8839' },
+  { type: 'Proteomics', color: '#dba0ff' },
+  { type: 'Immunoassays', color: '#f9e802' },
+  { type: 'Metabolomics', color: '#31fd94' },
 ];
 
 /**

diff --git a/src/LandingPage/landingPage.jsx b/src/LandingPage/landingPage.jsx
@@ -169,6 +169,13 @@ export function LandingPage({ isAuthenticated, profile }) {
     console.log(networkNodes);
   }, [networkNodes]);
 
+  const goToExternalLink = useCallback(() => {
+    window.open(
+      'https://www.biorxiv.org/content/10.1101/2022.09.21.508770v3',
+      '_blank',
+    );
+  }, []);
+
   // Redirect authenticated users to protected route
   const hasAccess = profile.user_metadata && profile.user_metadata.hasAccess;
   if (isAuthenticated && hasAccess) {
@@ -191,7 +198,7 @@ export function LandingPage({ isAuthenticated, profile }) {
             <h1 className="display-1">About MoTrPAC</h1>
             <p className="lead">
               <span className="font-weight-bold">
-                Molecular Transducers of Physical Activity Consortium
+                Molecular Transducers of Physical Activity Consortium (MoTrPAC)
               </span>{' '}
               is a national research consortium. Its goal is to{' '}
               <span className="font-italic about-motrpac-emphasis">
@@ -201,16 +208,25 @@ export function LandingPage({ isAuthenticated, profile }) {
               activity improves and preserves health. We aim to generate a
               molecular map of the effects of exercise.
             </p>
-            <Link
-              to="/project-overview"
-              className="btn btn-primary btn-lg mt-4"
-              role="button"
-            >
-              PROJECT OVERVIEW
-            </Link>
+            <div className="highlighted-links-container">
+              <Link
+                to="/project-overview"
+                className="btn btn-primary btn-lg mt-4"
+                role="button"
+              >
+                PROJECT OVERVIEW
+              </Link>
+              <Link
+                to="/tutorial"
+                className="btn btn-primary btn-lg mt-4"
+                role="button"
+              >
+                VIDEO TUTORIALS
+              </Link>
+            </div>
             <div className="office-hour-anchor-link-container">
               <a href="#join-office-hour" className="office-hour-anchor-link">
-                Join us at the monthly office hour to learn more
+                Join our monthly open office event to learn more
               </a>
             </div>
           </div>
@@ -287,7 +303,7 @@ export function LandingPage({ isAuthenticated, profile }) {
                   LEARN MORE
                 </a>
               </div>
-              <div className="feature-image col-12 col-md-6 mx-auto">
+              <div className="feature-image col-12 col-md-6 mx-auto" onClick={goToExternalLink}>
                 <img
                   src={LandscapePreprintAbstract}
                   className="img-fluid data-layer-runner"

diff --git a/src/MainStudy/mainStudy.jsx b/src/MainStudy/mainStudy.jsx
@@ -5,8 +5,9 @@ import { Link } from 'react-router-dom';
 import PageTitle from '../lib/ui/pageTitle';
 import BrowseDataActions from '../BrowseDataPage/browseDataActions';
 import PASS1B06TimeCourse from '../assets/figures/pass1b-06-time-course.png';
-import PASS1B06Profiling from '../assets/figures/pass1b-06-molecular-profiling.png';
+import PASS1B06Profiling from '../assets/figures/pass1b-06-molecular-profiling.svg';
 import ToggleShowHide from './components/toggleShowHide';
+import ExternalLink from '../lib/ui/externalLink';
 
 function MainStudy({ profile, allFiles, handleDataFetch }) {
   const [showSummary, setShowSummary] = useState(true);
@@ -149,7 +150,12 @@ function MainStudy({ profile, allFiles, handleDataFetch }) {
             tissues. Rats were endurance-exercise trained on treadmills and
             tissue samples were collected at either 1, 2, 4, or 8 weeks of
             training, with a 48 hour rest or wash out period before samples were
-            collected.
+            collected. See the{' '}
+            <ExternalLink
+              to="http://study-docs.motrpac-data.org/Animal_Protocol.pdf"
+              label="animal protocol"
+            />{' '}
+            to learn more.
           </p>
           <div className="main-study-content-container mt-5">
             <div className="d-flex align-items-center sub-section-title">

diff --git a/src/assets/figures/pass1b-06-molecular-profiling.png b/src/assets/figures/pass1b-06-molecular-profiling.png