Merge pull request #371 from MoTrPAC/370_JZ_Precawg_Data_Viz_Link

Connects to #370. Linkout to PreCAWG data visualization tool. Merging upon Jay's verbal approval.
MoTrPAC · Sep 27, 2024 · 144d0c3 · 144d0c3
2 parents 76b71de + 3cf5ed0
commit 144d0c3
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 51 deletions.
diff --git a/src/AnalysisPage/GraphicalClustering/sharedLib.js b/src/AnalysisPage/GraphicalClustering/sharedLib.js
@@ -9,10 +9,10 @@ export const tocbotConfig = {
 };
 
 export const pass1b06GraphicalClusteringLandscapeImageLocation =
-  'https://cdn.motrpac-data.org/assets/datahub/graphical_clustering_results/figures/pass1b_06/landscape';
+  'https://d1yw74buhe0ts0.cloudfront.net/static/motrpac-data-hub/graphical_clustering_results/figures/pass1b_06/landscape';
 
 export const pass1b06GraphicalClusteringMitoImageLocation =
-  'https://cdn.motrpac-data.org/assets/datahub/graphical_clustering_results/figures/pass1b_06/mitochondria';
+  'https://d1yw74buhe0ts0.cloudfront.net/static/motrpac-data-hub/graphical_clustering_results/figures/pass1b_06/mitochondria';
 
 // fix toc position to the top of the page when scrolling
 export function handleScroll() {

diff --git a/src/LandingPage/components/backgroundVideo.jsx b/src/LandingPage/components/backgroundVideo.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-const videoMoleculeNetwork = 'https://cdn.motrpac-data.org/assets/datahub/landing_page/media/background_video_molecules_221511488.mp4';
+const videoMoleculeNetwork = 'https://d1yw74buhe0ts0.cloudfront.net/static/motrpac-data-hub/landing_page/media/background_video_molecules_221511488.mp4';
 
 function BackgroundVideo() {
   return (

diff --git a/src/Publications/Data/Animal/Phenotype/fullTableEnduranceTraining.jsx b/src/Publications/Data/Animal/Phenotype/fullTableEnduranceTraining.jsx
@@ -16,7 +16,7 @@ function FullTableEnduranceTraining() {
           type="button"
           role="button"
           className="btn btn-primary d-flex align-items-center ml-4"
-          href="https://cdn.motrpac-data.org/assets/datahub/publications/data/animal/phenotype/animal-endurance-training-study-full-table.xlsx"
+          href="https://d1yw74buhe0ts0.cloudfront.net/static/motrpac-data-hub/publications/data/animal/phenotype/animal-endurance-training-study-full-table.xlsx"
           download
         >
           <i className="material-icons">file_download</i>

diff --git a/src/Search/featureLinks.jsx b/src/Search/featureLinks.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import dayjs from 'dayjs';
 
 /**
@@ -15,6 +15,8 @@ function FeatureLinks({
   lastModified,
   userType,
 }) {
+  const history = useHistory();
+
   const handleDataObjectFetch = () => {
     if (allFiles.length === 0) {
       handleDataFetch();
@@ -35,6 +37,7 @@ function FeatureLinks({
 
   const features = [
     {
+      name: 'data-download',
       route: 'data-download',
       description:
         'Browse and download the available MoTrPAC study data in young adult rats by tissue, assay, or omics.',
@@ -43,14 +46,16 @@ function FeatureLinks({
       eventHandler: handleDataObjectFetch,
     },
     {
-      route: 'https://data-viz.motrpac-data.org/',
+      name: 'pass1b-06-data-visualization',
+      route: process.env.NODE_ENV !== 'production' ? 'https://data-viz-dev.motrpac-data.org/' : 'https://data-viz.motrpac-data.org/',
       description:
         'An interactive data visualization tool for the graphical clustering analysis of endurance training response in young adult rats.',
       icon: 'data_exploration',
-      title: 'Data Visualization',
+      title: 'Endurance Trained Young Adult Rats Data Visualization',
       eventHandler: null,
     },
     {
+      name: 'code-repositories',
       route: 'code-repositories',
       description:
         'Explore the source code essential to the workflow for the young adult rats data in the endurance training study.',
@@ -59,13 +64,15 @@ function FeatureLinks({
       eventHandler: null,
     },
     {
+      name: 'sample-summary',
       route: 'summary',
       description:
         'A dashboard to visualize sample counts by tissue, assay, or omics in the young adult rat endurance training and acute exercise studies.',
       icon: 'assessment',
       title: 'Sample Summary',
       eventHandler: null,
     },
+    /*
     {
       route: 'releases',
       description:
@@ -74,7 +81,19 @@ function FeatureLinks({
       title: 'Data Releases',
       eventHandler: null,
     },
+    */
+    {
+      name: 'motrpac-collab',
+      route:
+        'https://collab.motrpac-data.org/hub/oauth_login?next=%2Fhub%2Fhome',
+      description:
+        'A multi-user Jupyter notebook workspace containing a collection of notebooks for in-depth data exploration and analysis.',
+      icon: 'hub',
+      title: 'MoTrPAC Collab',
+      eventHandler: null,
+    },
     {
+      name: 'qc-data-monitor',
       route: 'qc-data-monitor',
       description:
         'Track and visualize the sample-level data submissions and their QC statuses by omics or assays.',
@@ -83,67 +102,65 @@ function FeatureLinks({
       eventHandler: fecthQCData,
     },
     {
-      route:
-        'https://collab.motrpac-data.org/hub/oauth_login?next=%2Fhub%2Fhome',
+      name: 'precovid-human-data-visualization',
+      route: process.env.NODE_ENV !== 'production' ? 'https://data-viz-dev.motrpac-data.org/precawg' : 'https://data-viz.motrpac-data.org/precawg',
       description:
-        'A multi-user Jupyter notebook workspace containing a collection of notebooks for in-depth data exploration and analysis.',
-      icon: 'hub',
-      title: 'MoTrPAC Collab',
+        'An interactive data visualization tool for the analysis of pre-COVID human sedentary adults study data.',
+      icon: 'airline_seat_recline_normal',
+      title: 'Pre-COVID Human Data Visualization',
       eventHandler: null,
     },
     {
+      name: 'multiomics-working-groups',
       route: 'multiomics-working-groups',
       description:
-        'Data analysis resources available to each of the MoTrPAC multi-omics working groups.',
+        'Data analysis resources, including onboarding guide and Jupyter notebooks, for each of the MoTrPAC multi-omics working groups.',
       icon: 'group',
       title: 'Multi-omics Working Groups',
       eventHandler: null,
     },
   ];
 
-  const featuresToRender =
-    userType === 'internal' ? features : features.slice(0, 4);
+  const featuresToRender = userType === 'internal' ? features : features.slice(0, 4);
+
+  // handle click event for external links
+  function handleFeatureLinkClick(e, item) {
+    e.stopPropagation();
+
+    if (item.route.indexOf('https') !== -1) {
+      return window.open(item.route, '_blank');
+    }
+
+    history.push(`/${item.route}`);
+    if (item.eventHandler) {
+      item.eventHandler();
+    }
+  }
 
   return (
     <div className="feature-links-container pt-2">
       <div className="row row-cols-1 row-cols-xl-4 row-cols-lg-3 row-cols-sm-1 mt-5">
         {featuresToRender.map((item) => (
-          <div key={item.route} className="col mb-4">
-            <div className={`card h-100 mb-3 p-3 shadow-sm ${item.route}`}>
-              {item.route.indexOf('http') !== -1 ? (
-                <a
-                  href={item.route}
-                  target="_blank"
-                  rel="noreferrer"
-                  className="external-link"
-                >
-                  <div className="card-body">
-                    <div className="h-100 d-flex align-items-start">
-                      <div className="feature-icon mr-3">
-                        <span className="material-icons">{item.icon}</span>
-                      </div>
-                      <div className="feature-summary">
-                        <h4 className="card-title">{item.title}</h4>
-                        <p className="card-text">{item.description}</p>
-                      </div>
-                    </div>
+          <div key={item.name} className="col mb-4">
+            {/*
+              eslint-disable-next-line jsx-a11y/no-static-element-interactions,
+              jsx-a11y/click-events-have-key-events
+            */}
+            <div
+              className={`card h-100 mb-3 p-3 shadow-sm ${item.name}`}
+              onClick={(e) => handleFeatureLinkClick(e, item)}
+            >
+              <div className="card-body">
+                <div className="h-100 d-flex align-items-start">
+                  <div className="feature-icon mr-3">
+                    <span className="material-icons">{item.icon}</span>
                   </div>
-                </a>
-              ) : (
-                <Link to={`/${item.route}`} onClick={item.eventHandler}>
-                  <div className="card-body">
-                    <div className="h-100 d-flex align-items-start">
-                      <div className="feature-icon mr-3">
-                        <span className="material-icons">{item.icon}</span>
-                      </div>
-                      <div className="feature-summary">
-                        <h4 className="card-title">{item.title}</h4>
-                        <p className="card-text">{item.description}</p>
-                      </div>
-                    </div>
+                  <div className="feature-summary">
+                    <h4 className="card-title">{item.title}</h4>
+                    <p className="card-text">{item.description}</p>
                   </div>
-                </Link>
-              )}
+                </div>
+              </div>
             </div>
           </div>
         ))}

diff --git a/src/sass/search/_search.scss b/src/sass/search/_search.scss
@@ -303,17 +303,30 @@
       }
     }
 
-    &.summary {
+    &.sample-summary {
       .material-icons {
         color: lighten($accent-violet, 12%);
       }
     }
 
-    &.code-repositories {
+    &.code-repositories, &.motrpac-collab {
+      .material-icons {
+        color: $gray;
+      }
+    }
+
+    &.motrpac-collab {
       .material-icons {
         color: $gray-semi-transparent;
       }
     }
+
+    &.pass1b-06-data-visualization,
+    &.precovid-human-data-visualization {
+      .material-icons {
+        color: $primary-blue;
+      }
+    }
   }
 }