PORTALS-3360: New Publications Component V2

apps/portals/elportal/src/config/resources.ts

@@ -4,8 +4,7 @@ export const dataOnStudiesPageSql =
 export const peopleSql = 'SELECT * FROM syn51209684'
 export const projectsSql = 'SELECT * FROM syn51209786'
 export const publicationsSql = 'SELECT * FROM syn51407023 ORDER BY "Year" DESC'
-export const topPublicationsSql =
-  'SELECT * FROM syn51407023 ORDER BY "publicationDate" DESC LIMIT 6'
+export const topPublicationsSql = 'SELECT * FROM syn51407023'
 export const studiesSql = 'SELECT * FROM syn51523775 ORDER BY isFeatured DESC'
 export const speciesSql = 'SELECT * FROM syn53406593 ORDER BY ItemOrder'
 export const computationalSql = 'SELECT * FROM syn51469335'

apps/portals/elportal/src/pages/HomePageV2.tsx

@@ -1,50 +1,23 @@
-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'
+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>
+      {/* <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> */}
       {/* Commented out for release (see EC-485) */}
       {/*<div className={'home-bg-dark'}>*/}
       {/*<SectionLayout*/}
@@ -65,30 +38,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}
+          sqlString={topPublicationsSql}
           buttonLink="/Explore/Publications"
           buttonLinkText="See More Publications"
           summaryText="Never miss a new finding from the frontiers of aging research."
         />
-      </SectionLayout>
+      </Box>
       {/*<div className={'home-bg-dark'}>*/}
       {/*  <SectionLayout ContainerProps={{ className: 'home-spacer' }}>*/}
       {/*    <FeaturedDataTabs*/}
@@ -154,71 +111,8 @@ export default function HomePage() {
       {/*    />*/}
       {/*  </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',

packages/synapse-react-client/src/components/ImageCardGridWithLinks/ImageCardGridWithLinks.tsx

@@ -170,6 +170,7 @@ function ImageCardGridWithLinks(props: ImageCardGridWithLinksProps) {
         display: 'grid',
         gridTemplateColumns: { xs: '1fr', md: '1fr 3fr' },
         gap: { xs: '38px', md: '80px' },
+        padding: { xs: '40px', lg: '80px' },
       }}
     >
       <Box

packages/synapse-react-client/src/components/RecentPublicationsGrid/RecentPublicationsGrid.test.tsx

@@ -17,7 +17,7 @@ const mockUseGetQueryResultBundle = jest.mocked(useGetQueryResultBundle)
 
 describe('RecentPublicationsGrid Tests', () => {
   const mockProps: RecentPublicationsGridProps = {
-    sql: 'SELECT * FROM syn123',
+    sqlString: 'SELECT * FROM syn123',
     buttonLink: 'https://example.com',
     buttonLinkText: 'View All Publications',
     summaryText: 'This is a summary.',
@@ -38,8 +38,8 @@ describe('RecentPublicationsGrid Tests', () => {
             id: '81721',
           },
           {
-            name: 'Tag',
-            columnType: ColumnTypeEnum.STRING_LIST,
+            name: 'Category',
+            columnType: ColumnTypeEnum.STRING,
             id: '81722',
           },
           {
@@ -61,23 +61,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'],
           },
         ],
       },
@@ -89,8 +77,8 @@ describe('RecentPublicationsGrid Tests', () => {
         id: '81721',
       },
       {
-        name: 'Tag',
-        columnType: ColumnTypeEnum.STRING_LIST,
+        name: 'Category',
+        columnType: ColumnTypeEnum.STRING,
         id: '81722',
       },
       {
@@ -137,12 +125,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()