From 98f6da00033997a83b5c41e1e51493f5b02df655 Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Sat, 13 Jul 2024 00:27:42 -0700 Subject: [PATCH 01/16] Replace 'metabolite' values with 'metabolite_refmet' values in DEA search results --- src/Search/searchReducer.js | 2 +- src/Search/sharedlib.jsx | 36 +++++++++++++++++++++++++++++------- 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/src/Search/searchReducer.js b/src/Search/searchReducer.js index c2e8b334..80f83709 100644 --- 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', diff --git a/src/Search/sharedlib.jsx b/src/Search/sharedlib.jsx index 00cb8589..bad561b3 100644 --- a/src/Search/sharedlib.jsx +++ b/src/Search/sharedlib.jsx @@ -25,7 +25,7 @@ export const searchParamsDefaultProps = { }, fields: [ 'gene_symbol', - 'metabolite', + 'metabolite_refmet', 'feature_ID', 'tissue', 'assay', @@ -82,7 +82,7 @@ export const searchParamsPropType = { */ export const timewiseResultsTablePropType = { gene_symbol: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - metabolite: PropTypes.string, + metabolite_refmet: PropTypes.string, feature_ID: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), tissue: PropTypes.string, assay: PropTypes.string, @@ -100,7 +100,7 @@ export const timewiseResultsTablePropType = { */ export const trainingResultsTablePropType = { gene_symbol: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - metabolite: PropTypes.string, + metabolite_refmet: PropTypes.string, feature_ID: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), tissue: PropTypes.string, assay_name: PropTypes.string, @@ -216,8 +216,19 @@ export const timewiseTableColumns = [ export const metabTimewiseTableColumns = [ { - Header: 'Metabolite', - accessor: 'metabolite', + Header: () => ( +
+ RefMet Name + + info + + + Reference nomenclature for metabolite names + +
+ ), + accessor: 'metabolite_refmet', + sortType: 'basic', }, { Header: 'Feature ID', @@ -385,8 +396,19 @@ export const trainingTableColumns = [ export const metabTrainingTableColumns = [ { - Header: 'Metabolite', - accessor: 'metabolite', + Header: () => ( +
+ RefMet Name + + info + + + Reference nomenclature for metabolite names + +
+ ), + accessor: 'metabolite_refmet', + sortType: 'basic', }, { Header: 'Feature ID', From b73111acce44ea2252203331caae6fdb51226024 Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Mon, 15 Jul 2024 22:21:25 -0700 Subject: [PATCH 02/16] Delete no longer used component --- src/LandingPage/announcementBanner.jsx | 55 -------------------------- 1 file changed, 55 deletions(-) delete mode 100644 src/LandingPage/announcementBanner.jsx diff --git a/src/LandingPage/announcementBanner.jsx b/src/LandingPage/announcementBanner.jsx deleted file mode 100644 index b5eaf159..00000000 --- a/src/LandingPage/announcementBanner.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; -import { trackEvent } from '../GoogleAnalytics/googleAnalytics'; - -// Function to render landing page announcement -function AnnouncementBanner() { - return ( -
-
-
- - The MoTrPAC Endurance Exercise Training Animal Study Landscape - preprint - open_in_new - {' '} - is now online at bioRxiv. -
-
- Read about the{' '} - - R package - open_in_new - {' '} - consisting of the processed data and downstream analysis results - presented in this preprint. -
-
-
- ); -} - -export default AnnouncementBanner; From b021be13b6891c381178dd1baf101e09ad5c0ca0 Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Mon, 15 Jul 2024 22:22:30 -0700 Subject: [PATCH 03/16] Rename component to proper context --- src/LandingPage/{promoteBanner.jsx => openOfficeHour.jsx} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename src/LandingPage/{promoteBanner.jsx => openOfficeHour.jsx} (94%) diff --git a/src/LandingPage/promoteBanner.jsx b/src/LandingPage/openOfficeHour.jsx similarity index 94% rename from src/LandingPage/promoteBanner.jsx rename to src/LandingPage/openOfficeHour.jsx index b292c564..32117eb0 100644 --- a/src/LandingPage/promoteBanner.jsx +++ b/src/LandingPage/openOfficeHour.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { trackEvent } from '../GoogleAnalytics/googleAnalytics'; // Function to render landing page announcement -function PromoteBanner() { +function OpenOfficeHour() { return (

Join Us

@@ -31,4 +31,4 @@ function PromoteBanner() { ); } -export default PromoteBanner; +export default OpenOfficeHour; From d79cebeb0d3117049d805cd25e15ebc4adb4255e Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Thu, 18 Jul 2024 00:27:49 -0700 Subject: [PATCH 04/16] Initial commit of new component for uses to subscribe to data updates --- .../components/subscribeDataUpdates.jsx | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/LandingPage/components/subscribeDataUpdates.jsx diff --git a/src/LandingPage/components/subscribeDataUpdates.jsx b/src/LandingPage/components/subscribeDataUpdates.jsx new file mode 100644 index 00000000..8fa8ae75 --- /dev/null +++ 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 ( +
+

Subscribe to our data updates

+
+ Stay in the know about the latest data releases and available resources from the + MoTrPAC Data Hub. +
+ + SUBSCRIBE + +
+ ); +} + +export default SubscribeDataUpdates; From 5eab048d87be0fb713c3176ae268241d186fbe2e Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Thu, 18 Jul 2024 00:28:59 -0700 Subject: [PATCH 05/16] Update language for office hour signup --- src/LandingPage/openOfficeHour.jsx | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/LandingPage/openOfficeHour.jsx b/src/LandingPage/openOfficeHour.jsx index 32117eb0..9a3afe5d 100644 --- a/src/LandingPage/openOfficeHour.jsx +++ b/src/LandingPage/openOfficeHour.jsx @@ -4,16 +4,20 @@ import { trackEvent } from '../GoogleAnalytics/googleAnalytics'; // Function to render landing page announcement function OpenOfficeHour() { return ( -
-

Join Us

-
- The Bioinformatics Center of MoTrPAC will be hosting the next virtual - Office Hour on {process.env.REACT_APP_OFFICE_HOUR_DAY}{' '} - {process.env.REACT_APP_OFFICE_HOUR_DATE} at 11:00 am Pacific Time. +
+

Join Us

+
+ Come join us at the next virtual office hour on + {' '} + {process.env.REACT_APP_OFFICE_HOUR_DAY} + {' '} + {process.env.REACT_APP_OFFICE_HOUR_DATE} + {' '} + at 11:00 am Pacific Time and learn more about our data.
Date: Thu, 18 Jul 2024 00:32:32 -0700 Subject: [PATCH 06/16] Add data updates signup component to homepage and adjust page element layout as a result --- src/LandingPage/landingPage.jsx | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/LandingPage/landingPage.jsx b/src/LandingPage/landingPage.jsx index 36c6a096..e3273963 100644 --- a/src/LandingPage/landingPage.jsx +++ b/src/LandingPage/landingPage.jsx @@ -7,7 +7,8 @@ import VisNetworkReactComponent from 'vis-network-react'; import { useMediaQuery } from 'react-responsive'; import YouTube from 'react-youtube'; import Footer from '../Footer/footer'; -import PromoteBanner from './promoteBanner'; +import OpenOfficeHour from './openOfficeHour'; +import SubscribeDataUpdates from './components/subscribeDataUpdates'; import landingPageStructuredData from '../lib/searchStructuredData/landingPage'; import IconSet from '../lib/iconSet'; @@ -301,7 +302,7 @@ export function LandingPage({ isAuthenticated, profile }) {
-
+
-
+

terminal

@@ -327,13 +328,20 @@ export function LandingPage({ isAuthenticated, profile }) {
-
- -
-
-
+ +
+
+
+
+ + +
+
+
+
+
From baf8c6639ced98bb358dae6b68bef801d49b74ba Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Thu, 18 Jul 2024 00:33:09 -0700 Subject: [PATCH 07/16] Replace hardcoded URL with env var --- src/Navbar/navbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Navbar/navbar.jsx b/src/Navbar/navbar.jsx index 3eb65f35..7bc7ea5b 100644 --- a/src/Navbar/navbar.jsx +++ b/src/Navbar/navbar.jsx @@ -274,7 +274,7 @@ export function Navbar({ {!userType || (userType && userType !== 'internal') ? ( Date: Thu, 18 Jul 2024 00:35:29 -0700 Subject: [PATCH 08/16] Update styling and the respective responsiveness CSS for newly added data updates signup component and the affected page UIs --- src/sass/_landingPage.scss | 408 +++++++++++++++++++++++-------------- 1 file changed, 254 insertions(+), 154 deletions(-) diff --git a/src/sass/_landingPage.scss b/src/sass/_landingPage.scss index b3c080f9..0ac74506 100644 --- a/src/sass/_landingPage.scss +++ b/src/sass/_landingPage.scss @@ -247,22 +247,18 @@ background-color: #fff; .section-content-container { - padding-top: 4.0em; - padding-bottom: 1.5em; - .content-code-repository { min-height: 560px; - margin-bottom: 5.0em; .feature-image { text-align: center; img { - height: 32.0rem; + height: 40.0rem; transition: height 0.5s ease; &:hover { - height: 33.0rem; + height: 42.0rem; } } } @@ -273,20 +269,42 @@ h1 .material-icons { color: #56bf46; - font-size: 7.5rem !important; + font-size: 3.5em !important; margin-left: -10px; } p { color: $stanford-black; - font-size: 1.85rem; + font-size: 2.0rem; } } + } + } + &.eighth { + background-color: #fff; + + .section-content-container { + height: calc(100vh - 67.2px); + padding-top: 4.65em; - .office-hour-banner { - border-radius: 0.35rem; - background: lighten($gray-transparent, 30%); - text-align: center; + .panel-content-container { + padding: 1.25em 0; + } + + .office-hour-signup { + border-radius: 0.45rem; + color: #fff; + margin-bottom: 6.0em; + + background-color: hsla(197, 92%, 60%, 1); + background-image: radial-gradient(circle at 96% 96%, hsla(55.36363636363636, 93%, 54%, 0.85) 5%, transparent 86%), radial-gradient(circle at 5% 90%, hsla(229, 71%, 68%, 1) 13%, transparent 65%), radial-gradient(circle at 57% 73%, hsla(308, 93%, 51%, 1) 3%, transparent 89%), radial-gradient(circle at 20% 4%, hsla(318, 60%, 76%, 1) 22%, transparent 56%), radial-gradient(circle at 74% 15%, hsla(324, 92%, 59%, 1) 13%, transparent 57%); + background-blend-mode: normal, normal, normal, normal, normal; + } + + .data-update-signup { + h1 { + color: $stanford-black; + } } } } @@ -489,7 +507,21 @@ body.homepage { &.seventh { .section-content-container { - padding-top: 6.0em; + .feature-image { + img { + height: 38.0rem; + + &:hover { + height: 40.0rem; + } + } + } + } + } + + &.eighth { + .section-content-container { + padding-top: 4.65em; } } } @@ -612,18 +644,41 @@ body.homepage { &.seventh { .section-content-container { - .content-code-repository { .feature-image { img { - height: 25.0rem; + height: 32.0rem; &:hover { - height: 25.0rem; + height: 32.0rem; } } } } + + .content { + h1 .material-icons { + font-size: 3.0em !important; + } + + p { + font-size: 1.85rem; + } + } + } + } + + &.eighth { + .section-content-container { + padding-top: 4.65em; + + .office-hour-signup { + margin-bottom: 4.0em; + } + + .data-updates-signup-title { + line-height: 1.0; + } } } } @@ -760,59 +815,60 @@ body.homepage { &.seventh { .section-content-container { - padding-top: 7.0em; - padding-bottom: 1.5em; - - .row.content-code-repository { - margin-bottom: 2.5em; - } + padding-top: 4.65em; .feature-image { img { - height: 20.0em !important; - width: auto; + height: 24.0em !important; &:hover { - height: 20.0em !important; + height: 24.0em !important; } } } - + .content { h1 { margin-bottom: 0 !important; .material-icons { - color: #56bf46; - font-size: 4.5rem !important; - margin-left: -6px; + font-size: 2.5em !important; } } p { - color: $stanford-black; - font-size: 1.15rem; - line-height: 1.35; + font-size: 1.5rem; + line-height: 1.3; } .btn { - font-size: 1.0rem; - margin-top: 0.5em !important; + font-size: 1.15rem; + margin-top: 0.65em !important; } } - - .office-hour-banner { - margin-left: 1.0rem !important; - margin-right: 1.0rem !important; - + } + } + + &.eighth { + .section-content-container { + padding-top: 4.65em; + + .office-hour-signup { + margin-bottom: 3.0em; + padding: 2.55rem !important; + .office-hour-title { - font-size: 1.35rem; + font-size: 5.0rem; } + } - .office-hour-content { - font-size: 0.9rem; - line-height: 1.35; - } + .data-updates-signup-title { + font-size: 4.15rem; + line-height: 1.0; + } + + .btn { + font-size: 1.15rem; } } } @@ -941,49 +997,64 @@ body.homepage { &.seventh { .section-content-container { - padding-top: 6.0em; - padding-bottom: 1.5em; - - .row.content-code-repository { - margin-bottom: 2.5em; - } - .feature-image { img { - height: 20.0em !important; - width: auto; + height: 22.0em !important; + + &:hover { + height: 22.0em !important; + } } } .content { - padding-left: 2.0em; - padding-right: 2.0em; + padding-left: 2.5em; + padding-right: 2.5em; h1 { margin-bottom: 0 !important; .material-icons { - color: #56bf46; - font-size: 4.5rem !important; + font-size: 2.5em !important; margin-left: -6px; } } p { - color: $stanford-black; - font-size: 1.15rem; - line-height: 1.35; + font-size: 1.4rem; + line-height: 1.3; } .btn { - font-size: 1.0rem; - margin-top: 0.5em !important; + font-size: 1.15rem; + margin-top: 0.65em !important; } } + } + } + + &.eighth { + .section-content-container { + .panel-content-container { + padding: 1.25em; + + .office-hour-signup { + margin-bottom: 3.0em; + padding: 2.55rem !important; - .office-hour-banner { - margin-left: 2.0rem !important; - margin-right: 2.0rem !important; + .office-hour-title { + font-size: 4.85rem; + } + } + + .data-updates-signup-title { + font-size: 4.0rem; + line-height: 1.0; + } + + .btn { + font-size: 1.15rem; + } } } } @@ -1118,62 +1189,72 @@ body.homepage { &.seventh { .section-content-container { - display: flex; - flex-direction: column; - align-items: flex-start !important; - padding-top: 6.0em; - padding-bottom: 1.5em; - - .row.content-code-repository { - flex-direction: column; - align-items: flex-start !important; - margin-bottom: 1.0em; - min-height: unset; - } + padding-top: 3.5em; .feature-image { img { - height: 16.0em !important; - width: auto; - + height: 22.0em !important; + &:hover { - height: 16.0em !important; + height: 22.0em !important; } } } .content { + padding-left: 2.5em; + padding-right: 2.5em; + h1 { margin-bottom: 0 !important; .material-icons { - color: #56bf46; - font-size: 4.25rem !important; + font-size: 2.25em !important; margin-left: -6px; } } p { - color: $stanford-black; - font-size: 1.0rem; - line-height: 1.35; + font-size: 1.3rem; + line-height: 1.3; } .btn { - font-size: 1.0rem; - margin-top: 0.4em !important; + font-size: 1.15rem; + margin-top: 0.65em !important; } } + } + } - #join-office-hour { - margin-top: 1.15em !important; - } + &.eighth { + .section-content-container { + .panel-content-container { + padding: 1.25em; - .office-hour-banner { - margin-left: 2.0rem !important; - margin-right: 2.0rem !important; - padding-top: 1.0em !important; - padding-bottom: 1.0em !important; + .office-hour-signup { + margin-bottom: 3.5em; + padding: 2.55rem !important; + + .office-hour-title { + font-size: 4.15rem; + } + } + + .data-updates-signup-title { + font-size: 3.0rem; + line-height: 1.0; + margin-bottom: 0.5em; + } + + .lead { + font-size: 1.25rem; + line-height: 1.3; + } + + .btn { + font-size: 1.0rem; + } } } } @@ -1310,59 +1391,64 @@ body.homepage { &.seventh { .section-content-container { - padding-top: 5.5em; - .feature-image { img { - height: 12.5em !important; - width: auto; - + height: 20.0em !important; + &:hover { - height: 12.5em !important; + height: 20.0em !important; } } } .content { h1 { - margin-bottom: 0 !important; - .material-icons { - color: #56bf46; - font-size: 3.75rem !important; - margin-left: -6px; + font-size: 2.0em !important; } } p { - color: $stanford-black; - font-size: 0.9rem; - line-height: 1.35; + font-size: 1.25rem; + line-height: 1.3; } .btn { - font-size: 0.85rem; - margin-top: 0.25em !important; - padding: 0.55em 1.15em !important; + font-size: 1.1rem; + margin-top: 0.65em !important; } } - #join-office-hour { - margin-top: 1.0em !important; - } + } + } - .office-hour-banner { - margin-left: 2.0rem !important; - margin-right: 2.0rem !important; - padding: 0.85em 0.9em !important; - - .office-hour-title { - font-size: 1.25rem; + &.eighth { + .section-content-container { + .panel-content-container { + padding: 1.25em; + + .office-hour-signup { + margin-bottom: 3.0em; + padding: 2.25rem !important; + + .office-hour-title { + font-size: 3.65rem; + } + } + + .data-updates-signup-title { + font-size: 2.65rem; + line-height: 1.0; + margin-bottom: 0.5em; } - .office-hour-content { - font-size: 0.85rem; + .lead { + font-size: 1.0rem; line-height: 1.3; } + + .btn { + font-size: 1.0rem; + } } } } @@ -1507,58 +1593,72 @@ body.homepage { &.seventh { .section-content-container { - padding-top: 5.5em; + .content-code-repository { + min-height: unset; + } .feature-image { img { - height: 9.5em !important; - width: auto; - + height: 16.0em !important; + &:hover { - height: 9.5em !important; + height: 16.0em !important; } } } .content { h1 { - margin-bottom: 0 !important; - .material-icons { - color: #56bf46; - font-size: 3.15rem !important; - margin-left: -6px; + font-size: 1.8em !important; } } p { - color: $stanford-black; - font-size: 0.75rem; - line-height: 1.3; + font-size: 1.0rem; + line-height: 1.2; } .btn { - font-size: 0.8rem; - margin-top: 0.15em !important; - padding: 0.5em 1.0em !important; + font-size: 0.85rem; + margin-top: 0.5em !important; } } - #join-office-hour { - margin-top: 0.85em !important; - } + } + } - .office-hour-banner { - margin-left: 2.0rem !important; - margin-right: 2.0rem !important; - padding: 0.85em 0.9em !important; - - .office-hour-title { - font-size: 1.10rem; + &.eighth { + .section-content-container { + .panel-content-container { + padding: 1.25em; + + .office-hour-signup { + margin-bottom: 2.25em; + padding: 1.25rem 2.0rem 1.75rem 2.0rem !important; + + .office-hour-title { + font-size: 2.65rem; + } } - .office-hour-content { - font-size: 0.75rem; - line-height: 1.3; + .data-update-signup { + margin-bottom: 1.0em !important; + } + + .data-updates-signup-title { + font-size: 2.15rem; + line-height: 1.0; + margin-bottom: 0.35em; + } + + .lead { + font-size: 0.9rem; + line-height: 1.25; + margin-bottom: 1.25rem !important; + } + + .btn { + font-size: 0.85rem; } } } From bd7a1566ffd074f0ed4c7d6851aa98d78be8ec2d Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Thu, 18 Jul 2024 00:44:19 -0700 Subject: [PATCH 09/16] Add styling to emphasize the 1st 2 bullet points of onboarding --- src/MultiOmicsWorkingGroups/preCAWG.jsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/MultiOmicsWorkingGroups/preCAWG.jsx b/src/MultiOmicsWorkingGroups/preCAWG.jsx index 69279a41..0d1fcdec 100644 --- a/src/MultiOmicsWorkingGroups/preCAWG.jsx +++ b/src/MultiOmicsWorkingGroups/preCAWG.jsx @@ -529,11 +529,15 @@ function PreCAWG() { analysis on these data, complete the steps below:
  1. - Ensure you are listed on the required IRB for your institution. + Ensure you are listed on the required IRB for your institution.
  2. - Become listed as a MoTrPAC member on the main site with your - institutional email: Reach out to{' '} + + Become listed as a MoTrPAC member on the main site with your institutional email. + + {' '} + Reach out to + {' '} janelu@ufl.edu From 4e778b55a170f7930b54ccaaeb75b6ca4518fa9c Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Thu, 18 Jul 2024 14:55:45 -0700 Subject: [PATCH 10/16] Change dependencies for enhancing page load with embedded youtube videos --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2a93c84f..f0e11d87 100644 --- a/package.json +++ b/package.json @@ -25,13 +25,13 @@ "react-dom": "17.0.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": "^5.1.2", "react-scripts": "5.0.1", "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", From 7b93b1c89f5b0f6415e0fe1bc9669627bb334697 Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Thu, 18 Jul 2024 14:57:56 -0700 Subject: [PATCH 11/16] Enhance page load time with embedded youtube videos using new dependency --- src/LandingPage/landingPage.jsx | 32 +++++------------------ src/Tutorials/tutorials.jsx | 45 ++++++++++----------------------- 2 files changed, 21 insertions(+), 56 deletions(-) diff --git a/src/LandingPage/landingPage.jsx b/src/LandingPage/landingPage.jsx index e3273963..7fdab55e 100644 --- a/src/LandingPage/landingPage.jsx +++ b/src/LandingPage/landingPage.jsx @@ -5,7 +5,7 @@ import { Redirect, Link } from 'react-router-dom'; import { Helmet } from 'react-helmet'; import VisNetworkReactComponent from 'vis-network-react'; import { useMediaQuery } from 'react-responsive'; -import YouTube from 'react-youtube'; +import LiteYouTubeEmbed from 'react-lite-youtube-embed'; import Footer from '../Footer/footer'; import OpenOfficeHour from './openOfficeHour'; import SubscribeDataUpdates from './components/subscribeDataUpdates'; @@ -105,22 +105,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 (
    @@ -276,17 +260,15 @@ export function LandingPage({ isAuthenticated, profile }) {
    -
    diff --git a/src/Tutorials/tutorials.jsx b/src/Tutorials/tutorials.jsx index 50171af8..2f669e52 100644 --- a/src/Tutorials/tutorials.jsx +++ b/src/Tutorials/tutorials.jsx @@ -1,25 +1,10 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { Helmet } from 'react-helmet'; -import YouTube from 'react-youtube'; +import LiteYouTubeEmbed from 'react-lite-youtube-embed'; import PageTitle from '../lib/ui/pageTitle'; function Tutorials() { - 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 (
    @@ -40,16 +25,15 @@ function Tutorials() {

    -
    @@ -59,16 +43,15 @@ function Tutorials() {

    -
    From ce9c0eb43c708c51070977de901331049b316d64 Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Thu, 18 Jul 2024 14:59:04 -0700 Subject: [PATCH 12/16] Add new SCSS module for youtube dependency UI styling --- src/sass/_reactLiteYoutubeEmbed.scss | 78 ++++++++++++++++++++++++++++ src/sass/main.scss | 1 + 2 files changed, 79 insertions(+) create mode 100644 src/sass/_reactLiteYoutubeEmbed.scss diff --git a/src/sass/_reactLiteYoutubeEmbed.scss b/src/sass/_reactLiteYoutubeEmbed.scss new file mode 100644 index 00000000..dd0bddaa --- /dev/null +++ b/src/sass/_reactLiteYoutubeEmbed.scss @@ -0,0 +1,78 @@ +.yt-lite { + background-color: #000; + position: relative; + display: block; + contain: content; + background-position: center center; + background-size: cover; + cursor: pointer; +} + +/* gradient */ +.yt-lite::before { + content: ''; + display: block; + position: absolute; + top: 0; + background-position: top; + background-repeat: repeat-x; + height: 60px; + padding-bottom: 50px; + width: 100%; + transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); +} + +/* responsive iframe with a 16:9 aspect ratio + thanks https://css-tricks.com/responsive-iframes/ +*/ +.yt-lite::after { + content: ""; + display: block; + padding-bottom: calc(100% / (16 / 9)); +} +.yt-lite > iframe { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; +} + +/* play button */ +.yt-lite > .lty-playbtn { + width: 65px; + height: 46px; + z-index: 1; + opacity: 1; + border: none; + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22YouTube_Icon%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%201024%20721%22%20enable-background%3D%22new%200%200%201024%20721%22%20xml%3Aspace%3D%22preserve%22%3E%3Cscript%20xmlns%3D%22%22%3E%0A%20%20%20%20try%20%7B%0A%20%20%20%20%20%20Object.defineProperty(navigator%2C%20%22globalPrivacyControl%22%2C%20%7B%0A%20%20%20%20%20%20%20%20value%3A%20false%2C%0A%20%20%20%20%20%20%20%20configurable%3A%20false%2C%0A%20%20%20%20%20%20%20%20writable%3A%20false%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20document.currentScript.parentElement.removeChild(document.currentScript)%3B%0A%20%20%20%20%7D%20catch(e)%20%7B%7D%3B%0A%20%20%20%20%20%20%3C%2Fscript%3E%0A%3Cpath%20id%3D%22Triangle%22%20fill%3D%22%23FFFFFF%22%20d%3D%22M407%2C493l276-143L407%2C206V493z%22%2F%3E%0A%3Cpath%20id%3D%22The_Sharpness%22%20opacity%3D%220.12%22%20fill%3D%22%23420000%22%20d%3D%22M407%2C206l242%2C161.6l34-17.6L407%2C206z%22%2F%3E%0A%3Cg%20id%3D%22Lozenge%22%3E%0A%09%3Cg%3E%0A%09%09%0A%09%09%09%3ClinearGradient%20id%3D%22SVGID_1_%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%22512.5%22%20y1%3D%22719.7%22%20x2%3D%22512.5%22%20y2%3D%221.2%22%20gradientTransform%3D%22matrix(1%200%200%20-1%200%20721)%22%3E%0A%09%09%09%3Cstop%20offset%3D%220%22%20style%3D%22stop-color%3A%23E52D27%22%2F%3E%0A%09%09%09%3Cstop%20offset%3D%221%22%20style%3D%22stop-color%3A%23BF171D%22%2F%3E%0A%09%09%3C%2FlinearGradient%3E%0A%09%09%3Cpath%20fill%3D%22url(%23SVGID_1_)%22%20d%3D%22M1013%2C156.3c0%2C0-10-70.4-40.6-101.4C933.6%2C14.2%2C890%2C14%2C870.1%2C11.6C727.1%2C1.3%2C512.7%2C1.3%2C512.7%2C1.3%20%20%20%20h-0.4c0%2C0-214.4%2C0-357.4%2C10.3C135%2C14%2C91.4%2C14.2%2C52.6%2C54.9C22%2C85.9%2C12%2C156.3%2C12%2C156.3S1.8%2C238.9%2C1.8%2C321.6v77.5%20%20%20%20C1.8%2C481.8%2C12%2C564.4%2C12%2C564.4s10%2C70.4%2C40.6%2C101.4c38.9%2C40.7%2C89.9%2C39.4%2C112.6%2C43.7c81.7%2C7.8%2C347.3%2C10.3%2C347.3%2C10.3%20%20%20%20s214.6-0.3%2C357.6-10.7c20-2.4%2C63.5-2.6%2C102.3-43.3c30.6-31%2C40.6-101.4%2C40.6-101.4s10.2-82.7%2C10.2-165.3v-77.5%20%20%20%20C1023.2%2C238.9%2C1013%2C156.3%2C1013%2C156.3z%20M407%2C493V206l276%2C144L407%2C493z%22%2F%3E%0A%09%3C%2Fg%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E"); + transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); +} +.yt-lite:hover > .lty-playbtn { + opacity: 1; +} +/* play button triangle */ +.yt-lite > .lty-playbtn:before { + content: ''; + border-style: solid; + border-width: 11px 0 11px 19px; + border-color: transparent transparent transparent #fff; +} + +.yt-lite > .lty-playbtn, +.yt-lite > .lty-playbtn:before { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); +} + +/* Post-click styles */ +.yt-lite.lyt-activated { + cursor: unset; +} +.yt-lite.lyt-activated::before, +.yt-lite.lyt-activated > .lty-playbtn { + opacity: 0; + pointer-events: none; +} diff --git a/src/sass/main.scss b/src/sass/main.scss index 56a3c12d..6d7be81c 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -38,3 +38,4 @@ @import 'mainStudy/all'; @import 'publications'; @import 'multiOmicsWorkingGroups'; +@import 'reactLiteYoutubeEmbed'; From 264624f454344e27a419ef1769e2c20a4f402868 Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Thu, 18 Jul 2024 14:59:20 -0700 Subject: [PATCH 13/16] Dependency changes --- yarn.lock | 37 +++++++------------------------------ 1 file changed, 7 insertions(+), 30 deletions(-) diff --git a/yarn.lock b/yarn.lock index 08c4e50e..106f3f8c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4702,7 +4702,7 @@ dayjs@1.11.7: resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.7.tgz#4b296922642f70999544d1144a2c25730fce63e2" integrity sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ== -debug@2.6.9, debug@^2.6.0, debug@^2.6.6: +debug@2.6.9, debug@^2.6.0: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== @@ -5782,7 +5782,7 @@ express@^4.17.3: utils-merge "1.0.1" vary "~1.1.2" -fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: +fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: version "3.1.3" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== @@ -7803,11 +7803,6 @@ lines-and-columns@^1.1.6: resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632" integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg== -load-script@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4" - integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA== - loader-runner@^4.2.0: version "4.3.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1" @@ -9563,6 +9558,11 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== +react-lite-youtube-embed@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.4.0.tgz#1f56a12be1061d50431444d52d836bd09a1283a2" + integrity sha512-Xo6cM1zPlROvvM97JkqQIoXstlQDaC4+DawmM7BB7Hh1cXrkBHEGq1iJlQxBTUWAUklmpcC7ph7qg7CztXtABQ== + react-overlays@^5.2.0: version "5.2.1" resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.2.1.tgz#49dc007321adb6784e1f212403f0fb37a74ab86b" @@ -9731,15 +9731,6 @@ react-tooltip@^5.11.2: "@floating-ui/dom" "^1.6.1" classnames "^2.3.0" -react-youtube@^10.1.0: - version "10.1.0" - resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-10.1.0.tgz#7e5670c764f12eb408166e8eb438d788dc64e8b5" - integrity sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg== - dependencies: - fast-deep-equal "3.1.3" - prop-types "15.8.1" - youtube-player "5.5.2" - react@17.0.1: version "17.0.1" resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127" @@ -10314,11 +10305,6 @@ signal-exit@^4.0.1: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04" integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw== -sister@^3.0.0: - version "3.0.2" - resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4" - integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA== - sisteransi@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" @@ -12278,12 +12264,3 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== - -youtube-player@5.5.2: - version "5.5.2" - resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5" - integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ== - dependencies: - debug "^2.6.6" - load-script "^1.0.0" - sister "^3.0.0" From 1236f48a5d35db3f692b33af5488d93e5b3ed082 Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Fri, 19 Jul 2024 14:20:18 -0700 Subject: [PATCH 14/16] Initial commit of dark-color animated down arrow --- src/assets/icons/arrow-down-animated-dark.svg | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/assets/icons/arrow-down-animated-dark.svg diff --git a/src/assets/icons/arrow-down-animated-dark.svg b/src/assets/icons/arrow-down-animated-dark.svg new file mode 100644 index 00000000..bfbb0fb6 --- /dev/null +++ b/src/assets/icons/arrow-down-animated-dark.svg @@ -0,0 +1,13 @@ + \ No newline at end of file From 9e0bef79e2aaa0137284627efaa1cb7c16371efe Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Fri, 19 Jul 2024 14:20:34 -0700 Subject: [PATCH 15/16] Add new svg icon --- src/lib/iconSet.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/iconSet.js b/src/lib/iconSet.js index 70321835..62e40956 100644 --- a/src/lib/iconSet.js +++ b/src/lib/iconSet.js @@ -15,6 +15,7 @@ import Archive from '../assets/icons/archive.png'; import InternalDataRelease from '../assets/icons/data-release-internal.png'; import ArrowRightAnimated from '../assets/icons/arrow-right-animated.svg'; import ArrowDownAnimated from '../assets/icons/arrow-down-animated.svg'; +import ArrowDownAnimatedDark from '../assets/icons/arrow-down-animated-dark.svg'; import GitHub from '../assets/icons/github.svg'; import GoogleCloud from '../assets/icons/google-cloud.svg'; import GoogleDrive from '../assets/icons/google-drive.svg'; @@ -37,6 +38,7 @@ const IconSet = { InternalDataRelease, ArrowRightAnimated, ArrowDownAnimated, + ArrowDownAnimatedDark, GitHub, GoogleCloud, GoogleDrive, From 1659e794c7dc16553b19a12790ac93b50afafdff Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Fri, 19 Jul 2024 14:21:03 -0700 Subject: [PATCH 16/16] Update code repo section wording and add animated down arrow --- src/LandingPage/landingPage.jsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/LandingPage/landingPage.jsx b/src/LandingPage/landingPage.jsx index 7fdab55e..37fddefd 100644 --- a/src/LandingPage/landingPage.jsx +++ b/src/LandingPage/landingPage.jsx @@ -34,6 +34,14 @@ function AnimatedDownArrow() { ); } +function AnimatedDownArrowDark() { + return ( +
    + down-arrow +
    + ); +} + // configs for visjs network visualization rendering const options = { height: '100%', @@ -297,9 +305,9 @@ export function LandingPage({ isAuthenticated, profile }) { terminal

    - 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.

    +