From 7c7ef55ac4fff85fcd44a0fc25bf07903d24159e Mon Sep 17 00:00:00 2001
From: jay-hodgson <jay.hodgson@sagebase.org>
Date: Wed, 4 Dec 2024 13:31:33 -0800
Subject: [PATCH] PORTALS-3355

---
 .../elportal/src/config/routesConfig.tsx      |   9 +
 apps/portals/elportal/src/pages/HomePage.tsx  |  34 +--
 .../portals/elportal/src/pages/HomePageV2.tsx | 232 ++++++++++++++++++
 3 files changed, 243 insertions(+), 32 deletions(-)
 create mode 100644 apps/portals/elportal/src/pages/HomePageV2.tsx

diff --git a/apps/portals/elportal/src/config/routesConfig.tsx b/apps/portals/elportal/src/config/routesConfig.tsx
index b6edbd4b9e..598d57f7f3 100644
--- a/apps/portals/elportal/src/config/routesConfig.tsx
+++ b/apps/portals/elportal/src/config/routesConfig.tsx
@@ -8,6 +8,7 @@ import React from 'react'
 import { RouteObject } from 'react-router-dom'
 import { Markdown } from 'synapse-react-client'
 import HomePage from '../pages/HomePage'
+import HomePageV2 from '../pages/HomePageV2'
 import ProjectDetailsPage from '../pages/ProjectDetailsPage'
 import StudyDetailsPage, {
   studyDetailsPageRoutes,
@@ -34,6 +35,14 @@ const routes: RouteObject[] = [
           </HomePageThemeProvider>
         ),
       },
+      {
+        path: 'HomepageV2',
+        element: (
+          <HomePageThemeProvider>
+            <HomePageV2 />
+          </HomePageThemeProvider>
+        ),
+      },
       {
         path: 'Browse Tools',
         element: (
diff --git a/apps/portals/elportal/src/pages/HomePage.tsx b/apps/portals/elportal/src/pages/HomePage.tsx
index e479ef01b8..843e9cb7a7 100644
--- a/apps/portals/elportal/src/pages/HomePage.tsx
+++ b/apps/portals/elportal/src/pages/HomePage.tsx
@@ -9,16 +9,8 @@ import {
   RssFeedCards,
   SynapseConstants,
   UserCardListRotate,
-  RecentPublicationsGrid,
-  ImageCardGridWithLinks,
 } from 'synapse-react-client'
-import ELContributeYourData from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELContributeYourData'
-import {
-  partnersSql,
-  peopleSql,
-  topPublicationsSql,
-  whatWeDoSql,
-} from '../config/resources'
+import { partnersSql, peopleSql } from '../config/resources'
 
 export default function HomePage() {
   return (
@@ -35,13 +27,6 @@ export default function HomePage() {
           loadingSkeletonRowCount={10}
         />
       </SectionLayout>
-      <SectionLayout ContainerProps={{ className: 'home-spacer' }}>
-        <ImageCardGridWithLinks
-          sql={whatWeDoSql}
-          title="What We Do"
-          summaryText="We provide multi-omic datasets, software tools, and publications that empower researchers to discover the latest health-promoting therapeutics."
-        />
-      </SectionLayout>
       <SectionLayout ContainerProps={{ className: 'home-spacer' }}>
         <Goals entityId={'syn51449135'} />
       </SectionLayout>
@@ -81,14 +66,7 @@ export default function HomePage() {
           }}
         />
       </SectionLayout>
-      <SectionLayout ContainerProps={{ className: 'home-spacer' }}>
-        <RecentPublicationsGrid
-          sql={topPublicationsSql}
-          buttonLink="Explore/Publications"
-          buttonLinkText="See More Publications"
-          summaryText="Never miss a new finding from the frontiers of aging research."
-        />
-      </SectionLayout>
+
       {/*<div className={'home-bg-dark'}>*/}
       {/*  <SectionLayout ContainerProps={{ className: 'home-spacer' }}>*/}
       {/*    <FeaturedDataTabs*/}
@@ -219,14 +197,6 @@ export default function HomePage() {
           />
         </SectionLayout>
       </div>
-      <SectionLayout
-        ContainerProps={{
-          className: 'home-spacer',
-          style: { maxWidth: '100%' },
-        }}
-      >
-        <ELContributeYourData />
-      </SectionLayout>
     </>
   )
 }
diff --git a/apps/portals/elportal/src/pages/HomePageV2.tsx b/apps/portals/elportal/src/pages/HomePageV2.tsx
new file mode 100644
index 0000000000..e479ef01b8
--- /dev/null
+++ b/apps/portals/elportal/src/pages/HomePageV2.tsx
@@ -0,0 +1,232 @@
+import Ecosystem from '@sage-bionetworks/synapse-portal-framework/components/csbc-home-page/Ecosystem'
+import Header from '@sage-bionetworks/synapse-portal-framework/components/Header'
+import { SectionLayout } from '@sage-bionetworks/synapse-portal-framework/components/SectionLayout'
+import React from 'react'
+import {
+  CardContainerLogic,
+  Goals,
+  Markdown,
+  RssFeedCards,
+  SynapseConstants,
+  UserCardListRotate,
+  RecentPublicationsGrid,
+  ImageCardGridWithLinks,
+} from 'synapse-react-client'
+import ELContributeYourData from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELContributeYourData'
+import {
+  partnersSql,
+  peopleSql,
+  topPublicationsSql,
+  whatWeDoSql,
+} from '../config/resources'
+
+export default function HomePage() {
+  return (
+    <>
+      <Header />
+      <SectionLayout
+        title={'About the Portal'}
+        centerTitle
+        ContainerProps={{ className: 'home-spacer' }}
+      >
+        <Markdown
+          ownerId={'syn27229419'}
+          wikiId="626030"
+          loadingSkeletonRowCount={10}
+        />
+      </SectionLayout>
+      <SectionLayout ContainerProps={{ className: 'home-spacer' }}>
+        <ImageCardGridWithLinks
+          sql={whatWeDoSql}
+          title="What We Do"
+          summaryText="We provide multi-omic datasets, software tools, and publications that empower researchers to discover the latest health-promoting therapeutics."
+        />
+      </SectionLayout>
+      <SectionLayout ContainerProps={{ className: 'home-spacer' }}>
+        <Goals entityId={'syn51449135'} />
+      </SectionLayout>
+      {/* Commented out for release (see EC-485) */}
+      {/*<div className={'home-bg-dark'}>*/}
+      {/*<SectionLayout*/}
+      {/*  title="Exploring the Data"*/}
+      {/*  centerTitle*/}
+      {/*  ContainerProps={{ className: 'home-spacer' }}*/}
+      {/*>*/}
+      {/* Commented out for release (see EC-485) */}
+      {/*  <UpsetPlot*/}
+      {/*    sql={upsetPlotSql}*/}
+      {/*    rgbIndex={0}*/}
+      {/*    maxBarCount={20}*/}
+      {/*    setName="# Files per assay"*/}
+      {/*    combinationName="# individuals"*/}
+      {/*    onClick={handleUpsetPlotClick}*/}
+      {/*    // summaryLinkText='Explore All Data'*/}
+      {/*    // summaryLink='/Explore/Data'*/}
+      {/*  />*/}
+      {/*</SectionLayout>*/}
+      {/*</div>*/}
+      <SectionLayout
+        title={"What's New"}
+        centerTitle
+        ContainerProps={{ className: 'home-spacer' }}
+      >
+        <RssFeedCards
+          url="https://news.eliteportal.org"
+          itemsToShow={3}
+          allowCategories={[]}
+          // mailChimpListName='AMP-AD quarterly newsletter',
+          // mailChimpUrl='https://sagebase.us7.list-manage.com/subscribe/post?u=b146de537186191a9d2110f3a&amp;id=96b614587a',
+          filter={{
+            value: 'whats-new',
+          }}
+        />
+      </SectionLayout>
+      <SectionLayout ContainerProps={{ className: 'home-spacer' }}>
+        <RecentPublicationsGrid
+          sql={topPublicationsSql}
+          buttonLink="Explore/Publications"
+          buttonLinkText="See More Publications"
+          summaryText="Never miss a new finding from the frontiers of aging research."
+        />
+      </SectionLayout>
+      {/*<div className={'home-bg-dark'}>*/}
+      {/*  <SectionLayout ContainerProps={{ className: 'home-spacer' }}>*/}
+      {/*    <FeaturedDataTabs*/}
+      {/*      sql={dataSql}*/}
+      {/*      rgbIndex={3}*/}
+      {/*      configs={[*/}
+      {/*        {*/}
+      {/*          title: 'Human Studies',*/}
+      {/*          icon: 'PERSON',*/}
+      {/*          explorePagePath: '/Explore/Studies',*/}
+      {/*          exploreObjectType: 'Studies',*/}
+      {/*          plotsConfig: {*/}
+      {/*            configs: [*/}
+      {/*              {*/}
+      {/*                title:*/}
+      {/*                  'The Mendelian randomization of human longevity using genetically-predicted exposures from the GWAS catalog study',*/}
+      {/*                description:*/}
+      {/*                  'This study provides analysis results of a two Sample Mendelian Randomization used to analyze the relationship between significantly associated GWAS traits and five distinct definitions of longevity.',*/}
+      {/*                facetsToPlot: ['dataType'],*/}
+      {/*                selectFacetColumnName: 'study',*/}
+      {/*                selectFacetColumnValue: 'MRGWAS',*/}
+      {/*                detailsPagePath:*/}
+      {/*                  '/Explore/Studies/DetailsPage?studyKey=MRGWAS',*/}
+      {/*                unitDescription: 'Files',*/}
+      {/*              },*/}
+      {/*              {*/}
+      {/*                title:*/}
+      {/*                  'The Characterization of gene associations with aging-related traits with a genetically-predicted transcriptome-wide association study',*/}
+      {/*                description:*/}
+      {/*                  'This study provides analyses of candidate genes and the association of Longevity-Associated Variants (LAVs) with aging-related traits and diseases.',*/}
+      {/*                facetsToPlot: ['dataType'],*/}
+      {/*                selectFacetColumnName: 'study',*/}
+      {/*                selectFacetColumnValue: 'ADAMTS7',*/}
+      {/*                detailsPagePath:*/}
+      {/*                  '/Explore/Studies/DetailsPage?studyKey=ADAMTS7',*/}
+      {/*                unitDescription: 'Files',*/}
+      {/*              },*/}
+      {/*              {*/}
+      {/*                title:*/}
+      {/*                  'The Phenome-wide association study of aging: data files and a web resource',*/}
+      {/*                description:*/}
+      {/*                  'This study is a collection of genetically-predicted tissue-specific gene expression associations with a collection of aging-related traits and outcomes.',*/}
+      {/*                facetsToPlot: ['dataType'],*/}
+      {/*                selectFacetColumnName: 'study',*/}
+      {/*                selectFacetColumnValue: 'Aging-PheWAS',*/}
+      {/*                detailsPagePath:*/}
+      {/*                  '/Explore/Studies/DetailsPage?studyKey=Aging-PheWAS',*/}
+      {/*                unitDescription: 'Files',*/}
+      {/*              },*/}
+      {/*            ],*/}
+      {/*          },*/}
+      {/*        },*/}
+      {/*        {*/}
+      {/*          title: 'Animal Model Studies',*/}
+      {/*          icon: 'MOUSE',*/}
+      {/*          explorePagePath: '/Explore/Studies',*/}
+      {/*          exploreObjectType: 'Studies',*/}
+      {/*          plotsConfig: {*/}
+      {/*            configs: [],*/}
+      {/*          },*/}
+      {/*        },*/}
+      {/*      ]}*/}
+      {/*    />*/}
+      {/*  </SectionLayout>*/}
+      {/*</div>*/}
+      <div className={'home-bg-dark'}>
+        <SectionLayout
+          title={'Related Resources'}
+          centerTitle
+          ContainerProps={{ className: 'home-spacer' }}
+        >
+          <Ecosystem
+            config={[
+              {
+                title: 'Data Repositories',
+                ownerId: 'syn27229419',
+                wikiId: '621470',
+              },
+              {
+                title: 'Cross-Species Research Resources',
+                ownerId: 'syn27229419',
+                wikiId: '621472',
+              },
+            ]}
+          />
+        </SectionLayout>
+      </div>
+      {/* PORTALS-3208: Surface Our Partners (similar to NF) */}
+      <SectionLayout
+        title={'Our Partners'}
+        centerTitle
+        ContainerProps={{ className: 'home-spacer' }}
+      >
+        <CardContainerLogic
+          sql={partnersSql}
+          type={SynapseConstants.GENERIC_CARD}
+          genericCardSchema={{
+            title: 'organizationName',
+            type: SynapseConstants.ORGANIZATION,
+            description: 'summary',
+            icon: 'abbreviation',
+            link: 'organizationPath',
+            thumbnailRequiresPadding: true,
+            imageFileHandleColumnName: 'cardLogo',
+          }}
+          descriptionConfig={{
+            showFullDescriptionByDefault: true,
+          }}
+          ctaLinkConfig={{
+            text: 'Visit Website',
+            link: 'website',
+          }}
+        />
+      </SectionLayout>
+      <div className={'home-bg-dark'}>
+        <SectionLayout
+          title={'Our People & Institutions'}
+          centerTitle
+          ContainerProps={{ className: 'home-spacer' }}
+        >
+          <UserCardListRotate
+            sql={`${peopleSql} WHERE isFeatured=true ORDER BY firstName`}
+            count={3}
+            size={SynapseConstants.MEDIUM_USER_CARD}
+            useQueryResultUserData={true}
+            summaryLink="Explore/People"
+            summaryLinkText="View All People"
+          />
+        </SectionLayout>
+      </div>
+      <SectionLayout
+        ContainerProps={{
+          className: 'home-spacer',
+          style: { maxWidth: '100%' },
+        }}
+      >
+        <ELContributeYourData />
+      </SectionLayout>
+    </>
+  )
+}