refactor: scope styles to each page/component, add purgeCSS

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "@styles/*": [
+        "./src/sass/*"
+      ]
+    }
+  }
+}

package.json

@@ -59,6 +59,7 @@
     "not op_mini all"
   ],
   "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^6.0.0",
     "@storybook/addon-actions": "^8.0.9",
     "@storybook/addon-links": "^8.0.9",
     "@storybook/react": "^8.0.9",

postcss.config.cjs

@@ -0,0 +1,9 @@
+const purgecss = require('@fullhuman/postcss-purgecss')
+
+module.exports = {
+  plugins: [
+    purgecss({
+      content: ['build/index.html', 'build/assets/*.js', "build/assets/*.css"],
+    })
+  ]
+}

src/AnalysisPage/analysisHomePage.jsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Navigate } from 'react-router-dom';
 import { connect } from 'react-redux';
+import { Navigate } from 'react-router-dom';
 import analysisTypes from '../lib/analysisTypes';
-import AnimalDataAnalysis from './animalDataAnalysis';
 import AuthContentContainer from '../lib/ui/authContentContainer';
 import AnalysisCard from './analysisCard';
+import AnimalDataAnalysis from './animalDataAnalysis';
+
+import '@styles/analysisPage.scss';
 
 // TODO: Add animation of transitions potentially with CSSTransitions package
 

src/AnalysisPage/animalDataAnalysis.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Pass1b06PhenotypeAnimalConnected from './pass1b06PhenotypeAnimal';
-import DifferenrialExpressionConnected from '../DataExploration/DifferentialExpression/differentialExpressionPage';
-import GraphicalClustering from './GraphicalClustering/graphicalClusteringPage';
+import DifferentialExpressionConnected from '../DataExploration/DifferentialExpression/differentialExpressionPage';
 import GeneCentricViewConnected from './GeneCentricViewRat/geneCentricViewPage';
+import GraphicalClustering from './GraphicalClustering/graphicalClusteringPage';
+import Pass1b06PhenotypeAnimalConnected from './pass1b06PhenotypeAnimal';
 
 export default function AnimalDataAnalysis({ analysis }) {
   switch (analysis) {
     case 'PHENOTYPE':
       return <Pass1b06PhenotypeAnimalConnected />;
     case 'DEA':
-      return <DifferenrialExpressionConnected />;
+      return <DifferentialExpressionConnected />;
     case 'GRAPHICAL_CLUSTERING':
       return <GraphicalClustering />;
     case 'GENE_CENTRIC_RAT':

src/AnalysisPage/animalPhenotypeData.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useRef } from 'react';
 import * as d3 from 'd3';
 
+import '@styles/graph.scss'
+
 import dataAcuteTest from '../data/testAnimalAcuteTest';
 import dataRegistration from '../data/testAnimalRegistration';
 import dataFamiliarization from '../data/testAnimalFamiliarization';

src/AnalysisPage/pass1b06PhenotypeAnimal.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import PageTitle from '../lib/ui/pageTitle';
-import WeightGainPlot from './plots/weightGain';
+import AnalysisActions from './analysisActions';
 import BodyFatChangePlot from './plots/bodyFatChange';
-import VO2MaxChangePlot from './plots/vo2MaxChange';
 import LactateChangePlot from './plots/lactateChange';
 import PhenotypePlotControls from './plots/phenotypePlotControls';
-import AnalysisActions from './analysisActions';
+import VO2MaxChangePlot from './plots/vo2MaxChange';
+import WeightGainPlot from './plots/weightGain';
+
+import '@styles/phenotypeAnimal.scss';
 
 /**
  * Functional component to render animal pass1b-06 phenotype data visualization

src/AnnouncementsPage/announcementsPage.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import dayjs from 'dayjs';
-import PageTitle from '../lib/ui/pageTitle';
 import { trackEvent } from '../GoogleAnalytics/googleAnalytics';
+import PageTitle from '../lib/ui/pageTitle';
+import '@styles/announcementsPage.scss';
 
 import announcementData from './announcements';
 // Pre-sort array in reverse order to workaround Storybook issue

src/Auth/authLoading.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import history from '../App/history';
 
+import '@styles/authLoading.scss';
+
 // Intended to act as placeholder until auth0 or other auth system
 //  is in place. Clicking the h3 element authorizes test user logIng.
 export function AuthLoading({ authenticating, authSuccess }) {

src/BrowseDataPage/browseDataPage.jsx

@@ -1,13 +1,15 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
-import actions from './browseDataActions';
-import BrowseDataFilter from './browseDataFilter';
+import { connect } from 'react-redux';
 import dataDownloadStructuredData from '../lib/searchStructuredData/dataDownload';
 import UserSurveyModal from '../UserSurvey/userSurveyModal';
+import actions from './browseDataActions';
+import BrowseDataFilter from './browseDataFilter';
 import DataDownloadsMain from './components/dataDownloadsMain';
 
+import '@styles/browseData.scss';
+
 export function BrowseDataPage({
   profile,
   filteredFiles,

src/CodeRepoPage/codeRepoPage.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PageTitle from '../lib/ui/pageTitle';
 import IconSet from '../lib/iconSet';
 
+import '@styles/codeRepo.scss';
+
 const repositories = {
   pipelines: [
     {

src/ContactPage/contact.jsx

@@ -3,6 +3,8 @@ import { Link } from 'react-router-dom';
 import PageTitle from '../lib/ui/pageTitle';
 import ContactForm from './contactForm';
 
+import '@styles/contact.scss';
+
 /**
  * Renders the Contact Us page in both
  * unauthenticated and authenticated states.

src/Dashboard/dashboard.jsx

@@ -10,6 +10,8 @@ import PlotControls from '../Widgets/plotControls';
 import TableControls from '../Widgets/tableControls';
 import dashboardActions from './dashboardActions';
 
+import '@styles/dashboard.scss';
+
 import animalReleaseSamples from '../data/animal_release_samples';
 
 /**

src/DataAccess/dataAccessPage.jsx

@@ -1,16 +1,18 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
+import ReCAPTCHA from 'react-google-recaptcha';
 import { connect } from 'react-redux';
 import { Link, Navigate } from 'react-router-dom';
-import PageTitle from '../lib/ui/pageTitle';
-import dayjs from 'dayjs';
-import ReCAPTCHA from 'react-google-recaptcha';
-import axios from 'axios';
-import RegistrationResponse from './response';
 import IconSet from '../lib/iconSet';
+import StudyDocumentsTable from '../lib/studyDocumentsTable';
 import EmailLink from '../lib/ui/emailLink';
 import ExternalLink from '../lib/ui/externalLink';
-import StudyDocumentsTable from '../lib/studyDocumentsTable';
+import PageTitle from '../lib/ui/pageTitle';
+import RegistrationResponse from './response';
+
+import '@styles/dataAccessPage.scss';
 
 const defaultFormValues = {
   dataUseAgreement1: false,

src/DataExploration/DifferentialExpression/differentialExpressionPage.jsx

@@ -4,13 +4,15 @@ import figureRat from '../../assets/figures/rat-figure-pass1b.svg';
 import FigureAssayLegends from './figureAssayLegends';
 import HeatmapModal from './heatmapModal';
 
+import '@styles/differentialExpression.scss';
+
 /**
  * Renders the data exploration page in both
  * unauthenticated and authenticated states.
  *
  * @returns {Object} JSX representation of the data exploration page.
  */
-function DifferenrialExpression() {
+function DifferentialExpression() {
   const [tissue, setTissue] = useState();
   const [assay, setAssay] = useState();
   const [showModal, setShowModal] = useState(false);
@@ -147,4 +149,4 @@ function DifferenrialExpression() {
   );
 }
 
-export default DifferenrialExpression;
+export default DifferentialExpression;

src/DataStatusPage/dataStatusPage.jsx

@@ -2,16 +2,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Navigate } from 'react-router-dom';
-import StatusReportGetData from './statusReportGetData';
-import StatusReportImmunoAssay from './statusReportImmunoAssay';
+import AnimatedLoadingIcon from '../lib/ui/loading';
+import DataStatusActions from './dataStatusActions';
 import QcReportByPhase from './qcReportByPhase.jsx';
 import QcReportHelp from './qcReportHelp';
-import DataStatusActions from './dataStatusActions';
-import qcReportButtonList from './sharelib/qcReportButtonList';
-import AnimatedLoadingIcon from '../lib/ui/loading';
-import QcReportHelpLink from './sharelib/qcReportHelpLink';
 import QcReportMetabolomics from './qcReportMetab';
 import QcReportProteomics from './qcReportProt';
+import qcReportButtonList from './sharelib/qcReportButtonList';
+import QcReportHelpLink from './sharelib/qcReportHelpLink';
+import StatusReportGetData from './statusReportGetData';
+import StatusReportImmunoAssay from './statusReportImmunoAssay';
+
+import '@styles/dataStatusPage.scss';
 
 /**
  * Renders the data qc status page

src/DataSummaryPage/dataSummaryPage.jsx

@@ -1,15 +1,17 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import ReleasedSampleTable from '../Widgets/releasedSampleTable';
-import ReleasedSamplePlot from '../Widgets/releasedSamplePlot';
+
+import animalReleaseSamples from '../data/animal_release_samples.json';
+import PlotControls from '../Widgets/plotControls';
 import ReleasedSampleHighlight from '../Widgets/releasedSampleHighlight';
+import ReleasedSamplePlot from '../Widgets/releasedSamplePlot';
 import ReleasedSampleSummary from '../Widgets/releasedSampleSummary';
-import PlotControls from '../Widgets/plotControls';
+import ReleasedSampleTable from '../Widgets/releasedSampleTable';
 import TableControls from '../Widgets/tableControls';
 import DataSummaryPageActions from './dataSummaryPageActions';
 
-import animalReleaseSamples from '../data/animal_release_samples.json';
+import '@styles/dataSummaryPage.scss';
 
 /**
  * Renders the release samples summary page.

src/ErrorPage/error.jsx

@@ -4,6 +4,8 @@ import { connect } from 'react-redux';
 import { Navigate } from 'react-router-dom';
 import ContactHelpdesk from '../lib/ui/contactHelpdesk';
 
+import '@styles/errorPage.scss'
+
 /**
  * Renders the Error page.
  *

src/Footer/footer.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import '@styles/footer.scss'
+
 /**
  * Renders the global footer.
  *

src/LandingPage/landingPage.jsx

@@ -1,29 +1,28 @@
-import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { Link, Navigate } from 'react-router-dom';
+import React, { useCallback, useState } from 'react';
 import { Helmet } from 'react-helmet';
+import { connect } from 'react-redux';
 import { useMediaQuery } from 'react-responsive';
+import { Link, Navigate } from 'react-router-dom';
 import YouTube from 'react-youtube';
-import Footer from '../Footer/footer';
-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 LayerRunner from '../assets/LandingPageGraphics/Data_Layer_Runner.png';
-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';
-import VisNetworkReactComponent from './components/visNetwork';
+
+import LogoMotrpacWhite from '../assets/logo-motrpac-white.png';
 
 // import network figure 4e visualization dataset
 import landscapeFigure4eNetworkData from '../data/landscape_figure_4e';
+import Footer from '../Footer/footer';
+import IconSet from '../lib/iconSet';
+import landingPageStructuredData from '../lib/searchStructuredData/landingPage';
+import BackgroundVideo from './components/backgroundVideo';
+import Figure1C from './components/figure1c';
+import VisNetworkReactComponent from './components/visNetwork';
+import PromoteBanner from './promoteBanner';
 
 // eslint-disable-next-line import/no-extraneous-dependencies
-import 'vis-network/styles/vis-network.css';
+import '@styles/landingPage.scss'
 
 // animated down arrow icon
 function AnimatedDownArrow() {

src/LinkoutPage/linkoutPage.jsx

@@ -1,17 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import PageTitle from '../lib/ui/pageTitle';
-import ExternalLink from '../lib/ui/externalLink';
-import MOTRLogo from '../assets/MoTrPAC_horizontal.png';
 import metaAnalysisGeneIcon from '../assets/analysisIcons/MetaAnalysisGene.svg';
-import NIHLogo from '../assets/ExternalLogos/NIHCommonFund.png';
+import CFDELogo from '../assets/ExternalLogos/CFDE_WORKBENCH.png';
 import ENCODELogo from '../assets/ExternalLogos/ENCODE.png';
-import MWLogo from '../assets/ExternalLogos/MetabolomicsWorkbench.jpeg';
 import GTExLogo from '../assets/ExternalLogos/GTEx.png';
-import CFDELogo from '../assets/ExternalLogos/CFDE_WORKBENCH.png';
-import OmicsPipelinesImage from '../assets/ExternalLogos/omicspipelines_dashboard.png';
+import MWLogo from '../assets/ExternalLogos/MetabolomicsWorkbench.jpeg';
 import MoTrPACRecruitmentLogo from '../assets/ExternalLogos/MoTrPAC_Recruitment_logo.png';
+import NIHLogo from '../assets/ExternalLogos/NIHCommonFund.png';
+import OmicsPipelinesImage from '../assets/ExternalLogos/omicspipelines_dashboard.png';
 import WuTsaiHumanPerformanceAllianceStanfordSiteLogo from '../assets/ExternalLogos/WuTsai_Human_Performance_Alliace.jpg';
+import MOTRLogo from '../assets/MoTrPAC_horizontal.png';
+import ExternalLink from '../lib/ui/externalLink';
+import PageTitle from '../lib/ui/pageTitle';
+
+import '@styles/linkoutPage.scss';
 
 const featured = [
   {

src/MainStudy/mainStudy.jsx

@@ -2,12 +2,14 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 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.svg';
-import ToggleShowHide from './components/toggleShowHide';
+import PASS1B06TimeCourse from '../assets/figures/pass1b-06-time-course.png';
+import BrowseDataActions from '../BrowseDataPage/browseDataActions';
 import ExternalLink from '../lib/ui/externalLink';
+import PageTitle from '../lib/ui/pageTitle';
+import ToggleShowHide from './components/toggleShowHide';
+
+import '@styles/mainStudyPage.scss';
 
 function MainStudy({ profile, allFiles, handleDataFetch }) {
   const [showSummary, setShowSummary] = useState(true);

src/MethodsPage/methods.jsx

@@ -5,6 +5,8 @@ import PageTitle from '../lib/ui/pageTitle';
 import StudyDocumentsTable from '../lib/studyDocumentsTable';
 import ExternalLink from '../lib/ui/externalLink';
 
+import '@styles/methods.scss';
+
 /**
  * Renders the Methods page.
  *

src/MultiOmicsWorkingGroups/multiOmicsWorkingGroups.jsx

@@ -7,6 +7,8 @@ import BicUpdates from './bicUpdates';
 import PreCAWG from './preCAWG';
 import DawgPAC from './dawgPAC';
 
+import '@styles/multiOmicsWorkingGroups.scss';
+
 function MultiOmicsWorkingGroups() {
   // get states from redux store
   const userProfile = useSelector((state) => state.auth.profile);