Skip to content

Commit

Permalink
Merge pull request #1456 from kianamcc/PORTALS-3360
Browse files Browse the repository at this point in the history 
PORTALS-3360: New Publications Component V2
  • Loading branch information
@kianamcc
kianamcc authored Dec 12, 2024
2 parents 5641069 + a91c7eb commit 8718593
Show file tree
Hide file tree
Showing 7 changed files with 138 additions and 298 deletions.
193 changes: 9 additions & 184 deletions apps/portals/elportal/src/pages/HomePageV2.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,21 @@
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 {
CardContainerLogic,
Goals,
Markdown,
RssFeedCards,
SynapseConstants,
UserCardListRotate,
RecentPublicationsGrid,
ImageCardGridWithLinks,
} from 'synapse-react-client'
import ELContributeYourData from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELContributeYourData'
import ELGettingStarted from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELGettingStarted'
import {
partnersSql,
peopleSql,
topPublicationsSql,
whatWeDoSql,
} from '../config/resources'
import { topPublicationsSql, whatWeDoSql } from '../config/resources'
import { Box } from '@mui/material'

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>
<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."
/>
{/* Commented out for release (see EC-485) */}
{/*<div className={'home-bg-dark'}>*/}
{/*<SectionLayout*/}
Expand All @@ -65,160 +36,14 @@ export default function HomePage() {
{/* />*/}
{/*</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' }}>
<Box sx={{ backgroundColor: 'grey.100' }}>
<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>
</Box>
<SectionLayout
ContainerProps={{
className: 'home-spacer',
Expand Down
22 changes: 19 additions & 3 deletions apps/portals/elportal/src/themes/HomePageThemeProvider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { ThemeOptions, ThemeProvider, useTheme } from '@mui/material'
import { PropsWithChildren } from 'react'
import { ThemeOptions, ThemeProvider, darken, useTheme } from '@mui/material'
import { DeepPartial } from 'synapse-react-client'
import { deepmerge } from '@mui/utils'
import React from 'react'

export function HomePageThemeProvider({ children }: PropsWithChildren) {
export function HomePageThemeProvider({ children }: React.PropsWithChildren) {
const theme = useTheme()
// Note if adapting for other portals: ensure portal-specific fonts are loaded in the portal styles
const homePageOverrides: DeepPartial<ThemeOptions> = {
Expand All @@ -18,6 +18,22 @@ export function HomePageThemeProvider({ children }: PropsWithChildren) {
fontFamily: "'Merriweather', serif",
},
},
components: {
MuiButton: {
styleOverrides: {
contained: {
boxShadow: 'none !important',
animationTimingFunction: 'ease-out',
animationDuration: '64ms',
'&:hover': {
backgroundColor: darken(theme.palette.primary.main, 0.2),
// TODO: Bootstrap 3 link color applies to all a:hover elements. Remove this override when Bootstrap 3 is removed
color: '#FFF !important',
},
},
},
},
},
}
const mergedTheme = deepmerge(theme, homePageOverrides)

Expand Down
10 changes: 2 additions & 8 deletions apps/synapse-portal-framework/src/components/elportal/ELContributeYourData.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Box, Link, Button, Typography, darken } from '@mui/material'
import { Box, Link, Button, Typography } from '@mui/material'
import backgroundSpotsLeft from './assets/dot_blob_top_left.png'
import backgroundSpotsRight from './assets/dot_blob_bottom_right.png'

function ELContributeYourData() {
return (
<Box
sx={{
backgroundColor: '#5BA998',
backgroundColor: 'primary.main',
display: 'grid',
gridTemplateColumns: '33% 33% 33%',
position: 'relative',
Expand Down Expand Up @@ -67,13 +67,7 @@ function ELContributeYourData() {
<Button
variant="contained"
sx={{
backgroundColor: '#5BA998',
border: '1px solid white',
boxShadow: 'none',
'&:hover': {
backgroundColor: darken('#5BA998', 0.05),
boxShadow: 'none',
},
}}
>
Start Contributing
Expand Down
19 changes: 9 additions & 10 deletions ...ges/synapse-react-client/src/components/ImageCardGridWithLinks/ImageCardGridWithLinks.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,23 +169,22 @@ function ImageCardGridWithLinks(props: ImageCardGridWithLinksProps) {
display: 'grid',
gridTemplateColumns: { xs: '1fr', md: '1fr 3fr' },
gap: { xs: '38px', md: '80px' },
padding: { xs: '40px', lg: '80px' },
}}
>
<Box
sx={{
padding: {
xs: '0 16px',
md: 0,
},
}}
>
<div>
<Box
display="flex"
flexDirection="column"
gap="16px"
sx={{ borderTop: '3px solid', borderColor: 'grey.400' }}
>
<Typography color="grey.1000" variant="headline2" paddingTop="26px">
<Typography
color="grey.1000"
variant="headline2"
paddingTop="26px"
fontSize="24px"
>
{title}
</Typography>
<Typography
Expand All @@ -196,7 +195,7 @@ function ImageCardGridWithLinks(props: ImageCardGridWithLinksProps) {
{summaryText}
</Typography>
</Box>
</Box>
</div>
<Grid
container
spacing={2.5}
Expand Down
2 changes: 1 addition & 1 deletion ...pse-react-client/src/components/RecentPublicationsGrid/RecentPublicationsGrid.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const Demo: Story = {
</BrowserRouter>
),
args: {
sql: 'SELECT * FROM syn51407023 ORDER BY "publicationDate" DESC LIMIT 6',
sql: 'SELECT * FROM syn51407023',
buttonLink: 'Explore/Publications',
buttonLinkText: 'See More Publications',
summaryText:
Expand Down
28 changes: 8 additions & 20 deletions ...ynapse-react-client/src/components/RecentPublicationsGrid/RecentPublicationsGrid.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ describe('RecentPublicationsGrid Tests', () => {
id: '81721',
},
{
name: 'Tag',
columnType: ColumnTypeEnum.STRING_LIST,
name: 'Category',
columnType: ColumnTypeEnum.STRING,
id: '81722',
},
{
Expand All @@ -60,23 +60,11 @@ describe('RecentPublicationsGrid Tests', () => {
rows: [
{
rowId: 1,
values: [
'1',
'["Tag1_1", "Tag1_2"]',
'Journal1',
'Title1',
'1725819400000',
],
values: ['1', 'Category1', 'Journal1', 'Title1', '1725819400000'],
},
{
rowId: 2,
values: [
'2',
'["Tag2_1", "Tag2_2"]',
'Journal2',
'Title2',
'1709578435000',
],
values: ['2', 'Category2', 'Journal2', 'Title2', '1709578435000'],
},
],
},
Expand All @@ -88,8 +76,8 @@ describe('RecentPublicationsGrid Tests', () => {
id: '81721',
},
{
name: 'Tag',
columnType: ColumnTypeEnum.STRING_LIST,
name: 'Category',
columnType: ColumnTypeEnum.STRING,
id: '81722',
},
{
Expand Down Expand Up @@ -136,12 +124,12 @@ describe('RecentPublicationsGrid Tests', () => {
expect(mockUseGetQueryResultBundle).toHaveBeenCalledTimes(1),
)

expect(screen.getByText('Tag1_1')).toBeInTheDocument()
expect(screen.getByText('Category1')).toBeInTheDocument()
expect(screen.getByText('Title1')).toBeInTheDocument()
expect(screen.getByText('Journal1')).toBeInTheDocument()
expect(screen.getByText('September, 2024')).toBeInTheDocument()

expect(screen.getByText('Tag2_1')).toBeInTheDocument()
expect(screen.getByText('Category2')).toBeInTheDocument()
expect(screen.getByText('Title2')).toBeInTheDocument()
expect(screen.getByText('Journal2')).toBeInTheDocument()
expect(screen.getByText('March, 2024')).toBeInTheDocument()
Expand Down
Loading

0 comments on commit 8718593

Please sign in to comment.