Merge pull request #2 from CBIIT/CTDC-Home

Bring in about page, home page and updated stats bar

src/bento/aboutPagesRoutes.js

@@ -1,4 +1,8 @@
 export default [
-  '/bento',
-  '/resources',
+  '/purpose',
+  '/crdc',
+  '/ctdc-data-model',
+  '/developers',
+  '/support',
+  '/request-access',
 ];

src/bento/globalStatsData.js

@@ -2,98 +2,88 @@ import gql from 'graphql-tag';
 
 export const statsStyling = {
   global: {
-    horizontalStyle: false,
-    statTitleFirst: false,
-    height: '56px',
-    background: '#8DCAFF',
+    horizontalStyle: true,
+    statTitleFirst: true,
+    height: '47px',
+    background: '#3695A9',
   },
   statsGroup: {
-    margin: '6px 9.25px',
-    padding: '0.1% 6% 2% 6%',
-    borderRight: '1px solid #0B3556',
-    '&:first-child': {
-      padding: '0.1% 6% 2% 6%',
-    },
-    '&:last-child': {
-      padding: '0.1% 6% 2% 6%',
-    },
+    margin: '4px 80px',
   },
   statsIcon: {
-    width: '40px',
-    height: '45px',
-    margin: '2px 0px 0px -45px',
-    position: 'relative',
+    // width: '45px',
+    // height: '45px',
   },
   statCount: {
-    color: '#0467BD',
-    fontFamily: 'Oswald',
-    fontSize: '20px',
-    lineHeight: '17px',
-    letterSpacing: '0.02em',
-    margin: '4px 0 2px 13px',
+    color: '#FFFFFF',
+    fontFamily: 'sans-serif',
+    fontSize: 'calc(11.2px)',
+    margin: '13px 0px 0px',
+    // float: 'left',
   },
   statTitle: {
-    color: '#062D4F',
-    fontFamily: 'Nunito',
-    fontSize: '12px',
-    fontWeight: '700',
-    lineHeight: '16px',
-    textTransform: 'uppercase',
-    margin: '0 0 0 13px',
+    color: '#000000',
+    fontFamily: 'sans-serif',
+    fontWeight: '600',
+    fontSize: 'calc(11.2px)',
+    textTransform: 'none',
+    // float: 'none',
   },
 };
 
-/**
- * @property {statAPI} numberOfPrograms Used to index a stat value
- */
 export const globalStatsData = [
   // A maximum of 6 stats are allowed
   {
-    statTitle: 'Programs',
+    statTitle: 'TRIALS:',
     type: 'field',
-    statAPI: 'numberOfPrograms',
-    statIconSrc: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/bento/images/icons/svgs/Programs.svg',
-    statIconAlt: 'Data Volume Stats Bar Icon',
+    statAPI: 'numberOfTrials',
+    statIconSrc: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/ctdc_Assets/ctdc/images/statsBar/stats-bar-trials.svg',
+    statIconAlt: 'TRIALS Stats Bar Icon',
   },
   {
-    statTitle: 'Arms',
+    statTitle: 'CASES:',
     type: 'field',
-    statAPI: 'numberOfStudies',
-    statIconSrc: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/bento/images/icons/svgs/Arms.svg',
+    statAPI: 'numberOfCases',
+    statIconSrc: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/ctdc_Assets/ctdc/images/statsBar/stats-bar-cases.svg',
+    statIconAlt: 'CASES Stats Bar Icon',
   },
   {
-    statTitle: 'Cases',
-    type: 'field',
-    statAPI: 'numberOfSubjects',
-    statIconSrc: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/master/icdc/images/svgs/Cases_.svg',
-  },
-  {
-    statTitle: 'Samples',
-    type: 'field',
-    statAPI: 'numberOfSamples',
-    statIconSrc: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/bento/images/icons/svgs/Samples.svg',
-  },
-  {
-    statTitle: 'Assays',
-    type: 'field',
-    statAPI: 'numberOfLabProcedures',
-    statIconSrc: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/bento/images/icons/svgs/Assays.svg',
-  },
-  {
-    statTitle: 'Files',
+    statTitle: 'FILES:',
     type: 'field',
     statAPI: 'numberOfFiles',
-    statIconSrc: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/bento/images/icons/svgs/Files.svg',
+    statIconSrc: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/ctdc_Assets/ctdc/images/statsBar/stats-bar-files.svg',
+    statIconAlt: 'FILES Stats Bar Icon',
   },
 ];
 
 // --------------- GraphQL query - Retrieve stats details --------------
-export const GET_GLOBAL_STATS_DATA_QUERY = gql`{
-  numberOfPrograms
-  numberOfStudies
-  numberOfSubjects
-  numberOfSamples
-  numberOfLabProcedures
-  numberOfFiles
-  }
-  `;
+export const GET_GLOBAL_STATS_DATA_QUERY = gql`
+  query search(
+    $clinical_trial_designation : [String],
+    $clinical_trial_id : [String],
+    $pubmed_id : [String],
+    $trial_arm : [String],
+    $disease : [String],
+    $gender : [String],
+    $race : [String],
+    $ethnicity : [String],
+    $file_type : [String],
+    $file_format : [String]
+){
+    searchCases(
+        clinical_trial_designation: $clinical_trial_designation
+        clinical_trial_id: $clinical_trial_id
+        pubmed_id: $pubmed_id
+        trial_arm: $trial_arm
+        disease: $disease
+        gender: $gender
+        race: $race
+        ethnicity: $ethnicity
+        file_type: $file_type
+        file_format: $file_format
+    ){
+        numberOfTrials
+        numberOfCases
+        numberOfFiles
+    }
+}`;

src/bento/landingPageData.js

@@ -70,11 +70,93 @@ export const landingPageData = {
 };
 
 // --------------- GraphQL query - Retrieve Landing page data --------------
-export const GET_LANDING_PAGE_DATA_QUERY = gql`{
-  numberOfPrograms
-  numberOfStudies
-  numberOfSubjects
-  numberOfSamples
-  numberOfFiles
-  }
-  `;
+export const GET_LANDING_PAGE_DATA_QUERY = gql`
+query search(
+    $clinical_trial_designation : [String],
+    $clinical_trial_id : [String],
+    $pubmed_id : [String],
+    $trial_arm : [String],
+    $disease : [String],
+    $gender : [String],
+    $race : [String],
+    $ethnicity : [String],
+    $file_type : [String],
+    $file_format : [String]
+){
+    searchCases(
+        clinical_trial_designation: $clinical_trial_designation
+        clinical_trial_id: $clinical_trial_id
+        pubmed_id: $pubmed_id
+        trial_arm: $trial_arm
+        disease: $disease
+        gender: $gender
+        race: $race
+        ethnicity: $ethnicity
+        file_type: $file_type
+        file_format: $file_format
+    ){
+        numberOfTrials
+        numberOfCases
+        numberOfFiles
+        numberOfArms
+        numberOfDiagnoses
+        numberOfFileTypes
+        diagnosisCountByArm{
+            arm_id
+            diagnoses
+        }
+        armCountByTrial{
+            group
+            subjects
+        }
+        trialsAndArms{
+            trials
+            caseSize
+            arms{
+                arm
+                caseSize
+            }
+        }
+        casesCountBaseOnTrialId{
+            group
+            subjects
+        }
+        casesCountBaseOnTrialCode{
+            group
+            subjects
+        }
+        casesCountBaseOnPubMedID{
+            group
+            subjects
+        }
+        casesCountBaseOnGender{
+            group
+            subjects
+        }
+        casesCountBaseOnRace{
+            group
+            subjects
+        }
+        casesCountBaseOnEthnicity{
+            group
+            subjects
+        }
+        casesCountBaseOnDiagnoses{
+            group
+            subjects
+        }
+        casesCountBaseOnFileType{
+            group
+            subjects
+        }
+        casesCountBaseOnFileFormat{
+            group
+            subjects
+        }
+        casesCountBaseOnTrialArm{
+            group
+            subjects
+        }
+    }
+}
+`;

src/components/InteractiveHero/InteractiveHero.js

@@ -10,7 +10,6 @@ import ActiveTrials from '../../assets/landing/animation/TrialsActive.png';
 import InActiveTrials from '../../assets/landing/animation/TrialsInActive.png';
 import CircularIcon from './CircularIcon';
 import FacingDown from '../../assets/landing/animation/Dial_facing_down.svg';
-import FacingLeft from '../../assets/landing/animation/Dial_facing_left.svg';
 import FacingUp from '../../assets/landing/animation/Dial_facing_up.svg';
 import FacingRight from '../../assets/landing/animation/Dial_facing_right.svg';
 
@@ -59,7 +58,9 @@ const TrialsInActiveText = ({ classes, heroData }) => (
 );
 
 const TrialsActiveText = ({ classes, heroData }) => {
-  const sortedDiagnosis = heroData.diagnosisCountByArm.sort((a, b) => a.diagnoses > b.diagnoses);
+  const diagnosisData = heroData.diagnosisCountByArm;
+  const sortedDiagnosis = diagnosisData.slice().sort((a, b) => a.diagnoses > b.diagnoses);
+
   return (
     <div className={classes.inActiveTextBG}>
       <div className={classes.whiteText}>
@@ -116,24 +117,24 @@ const FilesActiveText = ({ classes, heroData }) => (
 const InteractiveHero = ({ classes, heroData }) => {
   const [activeState, setActiveState] = React.useState({
     isActive: '',
-    transformedHorseShoe: FacingLeft,
+    transformedHorseShoe: FacingRight,
   });
   return (
     <div className={classes.animationWrapper}>
-      <div className={classes.casesIcon} onMouseEnter={() => { setActiveState({ isActive: 'cases', transformedHorseShoe: FacingUp }); }} onMouseLeave={() => { setActiveState({ isActive: '', transformedHorseShoe: FacingLeft }); }}>
+      <div className={classes.casesIcon} onMouseEnter={() => { setActiveState({ isActive: 'cases', transformedHorseShoe: FacingUp }); }} onMouseLeave={() => { setActiveState({ isActive: '', transformedHorseShoe: FacingUp }); }}>
         <CircularIcon isActive={activeState.isActive === 'cases'} InactiveImage={InActiveCases} activeImage={ActiveCases} />
       </div>
       <div className={classes.casesText}>
         {activeState.isActive === 'cases' ? <CasesActiveText heroData={heroData} classes={classes} /> : <CasesInActiveText heroData={heroData} classes={classes} />}
       </div>
       <HorseShoe transformedHorseShoe={activeState.transformedHorseShoe} />
-      <div className={classes.filesIcon} onMouseEnter={() => { setActiveState({ isActive: 'files', transformedHorseShoe: FacingRight }); }} onMouseLeave={() => { setActiveState({ isActive: '', transformedHorseShoe: FacingLeft }); }}>
+      <div className={classes.filesIcon} onMouseEnter={() => { setActiveState({ isActive: 'files', transformedHorseShoe: FacingRight }); }} onMouseLeave={() => { setActiveState({ isActive: '', transformedHorseShoe: FacingRight }); }}>
         <CircularIcon isActive={activeState.isActive === 'files'} InactiveImage={InActiveFiles} activeImage={ActiveFiles} />
       </div>
       <div className={classes.filesText}>
         {activeState.isActive === 'files' ? <FilesActiveText heroData={heroData} classes={classes} /> : <FilesInActiveText heroData={heroData} classes={classes} />}
       </div>
-      <div className={classes.trialsIcon} onMouseEnter={() => { setActiveState({ isActive: 'trials', transformedHorseShoe: FacingDown }); }} onMouseLeave={() => { setActiveState({ isActive: '', transformedHorseShoe: FacingLeft }); }}>
+      <div className={classes.trialsIcon} onMouseEnter={() => { setActiveState({ isActive: 'trials', transformedHorseShoe: FacingDown }); }} onMouseLeave={() => { setActiveState({ isActive: '', transformedHorseShoe: FacingDown }); }}>
         <CircularIcon isActive={activeState.isActive === 'trials'} InactiveImage={InActiveTrials} activeImage={ActiveTrials} />
       </div>
       <div className={classes.trialsText}>

src/components/Layout/LayoutView.js

@@ -23,6 +23,13 @@ import { AuthenticationMiddlewareGenerator } from '@bento-core/authentication';
 import Notifactions from '../Notifications/NotifactionView';
 import DashTemplate from '../../pages/dashTemplate/DashTemplateController';
 
+
+const ScrollToTopComponent = () => {
+  window.scrollTo(0, 0);
+  return null;
+};
+
+
 const Layout = ({ classes, isSidebarOpened }) => {
   // Access control imports
   const { LoginRoute, MixedRoute, PrivateRoute, AdminRoute} = AuthenticationMiddlewareGenerator(AUTH_MIDDLEWARE_CONFIG);
@@ -41,7 +48,7 @@ const Layout = ({ classes, isSidebarOpened }) => {
         <div
           className={classes.content}
         >
-          <Route />
+          <Route component={ScrollToTopComponent} />
           <Switch>
             <MixedRoute exact path="/" component={Home} />
             <MixedRoute exact path="/home" component={Home} />
@@ -97,7 +104,6 @@ const styles = (theme) => ({
     // width: `calc(100vw - 240px)`,   // Ajay need to add this on addung side bar
     width: 'calc(100%)', // Remove this on adding sidebar
     background: theme.custom.bodyBackGround,
-    marginTop: '194px',
   },
   '@global': {
     '*::-webkit-scrollbar': {