Merge pull request #277 from MoTrPAC/274_JZ_Office_Hour_Homepage_UI

Connects to #274. Open office hour homepage UI. Publications page.

src/AnnouncementsPage/announcements.json

@@ -75,7 +75,7 @@
             "tags": [
                 "marker-paper"
             ],
-            "icon": "menu_book"
+            "icon": "auto_stories"
         },
         "links": [
             {

src/App/App.jsx

@@ -27,6 +27,7 @@ import GraphicalClustering from '../AnalysisPage/GraphicalClustering/graphicalCl
 import CodeRepositories from '../CodeRepoPage/codeRepoPage';
 import MainStudyConnected from '../MainStudy/mainStudy';
 import Tutorials from '../Tutorials/tutorials';
+import Publications from '../Publications/publications';
 import Pass1b06PhenotypeAnimalConnected from '../AnalysisPage/pass1b06PhenotypeAnimal';
 import CallbackConnected from '../Auth/callback';
 import { withTracker } from '../GoogleAnalytics/googleAnalytics';
@@ -128,6 +129,10 @@ function App({ history = History }) {
                 component={withTracker(MainStudyConnected)}
               />
               <Route path="/tutorials" component={withTracker(Tutorials)} />
+              <Route
+                path="/publications"
+                component={withTracker(Publications)}
+              />
               <PrivateRoute
                 path="/analysis-phenotype"
                 component={withTracker(Pass1b06PhenotypeAnimalConnected)}

src/App/__test__/App.test.jsx

@@ -23,7 +23,7 @@ describe('<App />', () => {
   });
 
   test('It should contain fifteen <Route /> children', () => {
-    expect(component.find('Route').length).toBe(18);
+    expect(component.find('Route').length).toBe(19);
   });
 
   test('It should contain four <PrivateRoute /> children', () => {

src/LandingPage/components/figure1c.jsx

@@ -136,8 +136,9 @@ function Figure1C() {
 
     // create a tooltip
     const tooltip = d3
-      .select('body')
+      .select('#heatmap-container')
       .append('div')
+      .style('display', 'none')
       .style('opacity', 0)
       .attr('class', 'heatmap-tooltip');
 
@@ -156,15 +157,23 @@ function Figure1C() {
               '<br/>Assay: ' +
               assayMap[d.ome],
           )
-          .style('top', event.pageY - 60 + 'px')
-          .style('left', event.pageX + 'px');
-        tooltip.transition().duration(100).style('opacity', 1);
+          .style('top', event.pageY - 280 + 'px')
+          .style('left', event.pageX - 16 + 'px');
+        tooltip
+          .transition()
+          .duration(100)
+          .style('display', 'block')
+          .style('opacity', 1);
         d3.select(this).style('opacity', 1);
       }
     };
     const onMouseLeave = (event, d) => {
       if (d.featureCnt !== null) {
-        tooltip.transition().duration(100).style('opacity', 0);
+        tooltip
+          .transition()
+          .duration(100)
+          .style('opacity', 0)
+          .style('display', 'none');
         d3.select(event.currentTarget).attr('rx', 4).attr('ry', 4);
       }
     };

src/LandingPage/landingPage.jsx

@@ -208,6 +208,11 @@ export function LandingPage({ isAuthenticated, profile }) {
             >
               PROJECT OVERVIEW
             </Link>
+            <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
+              </a>
+            </div>
           </div>
         </div>
         <AnimatedDownArrow />
@@ -361,7 +366,7 @@ export function LandingPage({ isAuthenticated, profile }) {
                 </Link>
               </div>
             </div>
-            <div className="row mt-4">
+            <div className="row mt-4" id="join-office-hour">
               <PromoteBanner />
             </div>
           </div>

src/Navbar/navbar.jsx

@@ -307,6 +307,9 @@ export function Navbar({
                   <Link to="/code-repositories" className="dropdown-item">
                     Code Repositories
                   </Link>
+                  <Link to="/publications" className="dropdown-item">
+                    Publications
+                  </Link>
                   <Link to="/methods" className="dropdown-item">
                     Methods
                   </Link>

src/Publications/publications.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import PageTitle from '../lib/ui/pageTitle';
+
+const publications = [
+  {
+    url: 'https://www.cell.com/cell/fulltext/S0092-8674(20)30691-7',
+    title:
+      'Molecular Transducers of Physical Activity Consortium (MoTrPAC): Mapping the Dynamic Responses to Exercise',
+    authors:
+      'James A. Sanford, Christopher D. Nogiec, Malene E. Lindholm, Joshua N. Adkins, David Amar, Surendra Dasari, Jonelle K. Drugan, Facundo M. Fernández, Shlomit Radom-Aizik, Simon Schenk, Michael P. Snyder, Russell P. Tracy, Patrick Vanderboom, Scott Trappe, Martin J. Walsh, and the Molecular Transducers of Physical Activity Consortium.',
+    cite: 'Cell 181/7, 1464-1474, June 25, 2020.',
+  },
+];
+
+/**
+ * Renders the Pulications page.
+ *
+ * @returns {object} JSX representation of the Publications component
+ */
+export function Publications() {
+  // Render list of publications
+  function renderPublications() {
+    return (
+      <div className="publication-item">
+        {publications.map((pub) => (
+          <Publication key={pub.url} pub={pub} />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="publicationsPage px-3 px-md-4 mb-3 container">
+      <PageTitle title="Publications" />
+      <div className="publications-content-container row mb-4">
+        <div className="lead col-12">{renderPublications()}</div>
+      </div>
+      <div className="preprint-content-container row mb-4">
+        <div className="lead col-12">
+          <a
+            href="https://connect.biorxiv.org/relate/content/218"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="preprint-link"
+          >
+            <span>See our full list of preprints at bioRxiv</span>{' '}
+            <span className="oi oi-external-link" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Publication({ pub }) {
+  return (
+    <div className="pub-item-content mt-4">
+      <h4 className="pub-title">
+        <a href={pub.url} target="_blank" rel="noopener noreferrer">
+          {pub.title} <span className="oi oi-external-link" />
+        </a>
+      </h4>
+      <p className="lead">
+        <span className="pub-authors">{pub.authors}</span>
+        <span className="pub-cite font-italic ml-1">{pub.cite}</span>
+      </p>
+    </div>
+  );
+}
+
+export default Publications;

src/RelatedStudy/relatedStudy.jsx

@@ -6,20 +6,24 @@ import StanfordMedicineLogo from '../assets/ExternalLogos/StanfordMedicine.png';
 
 const relatedStudies = [
   {
+    id: 'heritage-proteomics',
     url: '/related-studies/heritage-proteomics',
-    text:
-      'The HERITAGE Family Study is a multicenter project whose main goal is to study the role of the genotype in the cardiovascular and metabolic responses to aerobic exercise training and the changes brought about by regular exercise for several cardiovascular disease and diabetes risk factors.',
+    text: 'The HERITAGE Family Study is a multicenter project whose main goal is to study the role of the genotype in the cardiovascular and metabolic responses to aerobic exercise training and the changes brought about by regular exercise for several cardiovascular disease and diabetes risk factors.',
     image: HeritageFamilyStudyLogo,
     title: 'HERITAGE Proteomics',
     newWin: false,
   },
   {
+    id: 'exercise-transcriptome-meta-analysis',
     url: 'https://extrameta.org',
-    text:
-      'A database comprising meta-analysis results from 43 publicly available exercise transcriptome datasets from human skeletal muscle and blood.',
+    text: 'A database comprising meta-analysis results from 43 publicly available exercise transcriptome datasets from human skeletal muscle and blood.',
     image: StanfordMedicineLogo,
     title: 'Exercise Transcriptome Meta-analysis',
     newWin: true,
+    pubTitle:
+      'Time trajectories in the transcriptomic response to exercise - a meta-analysis',
+    pubUrl: 'https://doi.org/10.1038/s41467-021-23579-x',
+    pubCite: 'Nat Commun 12, 3471 (2021).',
   },
 ];
 
@@ -64,6 +68,20 @@ function RelatedStudyLink({ study }) {
           {!study.newWin && <Link to={study.url}>{study.title}</Link>}
         </h5>
         <p className="card-text">{study.text}</p>
+        {study.id === 'exercise-transcriptome-meta-analysis' && (
+          <p className="card-text">
+            <span className="card-text">Publication: </span>
+            <a
+              href={study.pubUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="card-link"
+            >
+              {study.pubTitle} <span className="oi oi-external-link" />
+            </a>{' '}
+            <span className="card-text font-italic">{study.pubCite}</span>
+          </p>
+        )}
       </div>
     </div>
   );

src/TeamPage/teamPage.jsx

@@ -39,6 +39,21 @@ function TeamPage() {
     <div className="teamPage px-3 px-md-4 mb-3 container">
       <PageTitle title="MoTrPAC Bioinformatics Center Team" />
       <div>{pageContent}</div>
+      <div className="pt-5 pb-0 mb-5 border-top text-center">
+        <h5>
+          <a
+            href="https://motrpac.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="external-link-text">
+              Learn more about the Molecular Transducers of Physical Activity
+              Consortium
+            </span>{' '}
+            <span className="oi oi-external-link" />
+          </a>
+        </h5>
+      </div>
     </div>
   );
 }

src/sass/_announcementsPage.scss

@@ -25,19 +25,25 @@
     font-size: 5.0rem;
     margin: 0 2.5rem;
 
-    &.webinar {
+    &.webinar,
+    &.landscape-paper-accepted,
+    &.mitochondria-paper-accepted {
       color: $accent-green;
     }
 
     &.dataset {
+      color: $gray-semi-transparent;
+    }
+
+    &.marker-paper {
       color: $accent-yellow;
     }
 
     &.release {
       color: $stanford-bright-red;
     }
 
-    &.marker-paper, &.landscape-preprint {
+    &.landscape-preprint {
       color: $primary-blue;
     }
 

src/sass/_landingPage.scss

@@ -79,6 +79,29 @@
         .btn {
           box-shadow: 0 0 2.0em 0.1em rgba(0, 0, 0, 0.25);
         }
+
+        .office-hour-anchor-link-container {
+          margin-top: 4.0em;
+
+          .office-hour-anchor-link {
+            border: solid 2px #fff;
+            border-radius: 1.4rem;
+            color: #fff;
+            display: inline-block;
+            font-size: 1.35rem;
+            font-weight: 400;
+            opacity: 0.7;
+            padding: 0.3rem 1.55rem;
+            text-decoration: none;
+            text-shadow: 0 0 0.1em rgba(0, 0, 0, 0.75);
+            transition: ease-in-out 0.25s;
+
+            &:hover {
+              opacity: 1.0;
+              box-shadow: inset 0rem 3.0rem rgba(255, 255, 255, 0.22);
+            }
+          }
+        }
       }
     }
     &.second {