Merge pull request #1471 from kianamcc/recentpublicationsgrid-compone…

…nt-links Links to Titles on RecentPublicationsGrid Component
Sage-Bionetworks · Jan 3, 2025 · ca3710c · ca3710c
2 parents e16b324 + 01f8eb4
commit ca3710c
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 78 deletions.
diff --git a/apps/portals/elportal/src/themes/HomePageThemeProvider.tsx b/apps/portals/elportal/src/themes/HomePageThemeProvider.tsx
@@ -21,6 +21,15 @@ export function HomePageThemeProvider({ children }: React.PropsWithChildren) {
       },
     },
     components: {
+      MuiLink: {
+        styleOverrides: {
+          root: {
+            '&:hover': {
+              color: '#1C9F87',
+            },
+          },
+        },
+      },
       MuiButton: {
         styleOverrides: {
           contained: {

diff --git a/packages/synapse-react-client/src/components/GenericCard/GenericCard.tsx b/packages/synapse-react-client/src/components/GenericCard/GenericCard.tsx
@@ -5,10 +5,7 @@ import {
   isTableEntity,
 } from '../../utils/functions/EntityTypeUtils'
 import { PRODUCTION_ENDPOINT_CONFIG } from '../../utils/functions/getEndpoint'
-import {
-  DOI_REGEX,
-  SYNAPSE_ENTITY_ID_REGEX,
-} from '../../utils/functions/RegularExpressions'
+import { SYNAPSE_ENTITY_ID_REGEX } from '../../utils/functions/RegularExpressions'
 import {
   ColumnModel,
   ColumnType,
@@ -45,6 +42,7 @@ import {
 } from './CollapsibleDescription'
 import { useGetEntity } from '../../synapse-queries'
 import { useQueryContext } from '../QueryContext'
+import { convertDoiToLink } from '../../utils/functions/RegularExpressions'
 
 export type KeyToAlias = {
   key: string
@@ -272,13 +270,14 @@ export function getLinkParams(
 ) {
   link = link.trim()
   let href = link
+  const doiLink = convertDoiToLink(href)
   let defaultTarget = TargetEnum.CURRENT_WINDOW
   if (link.match(SYNAPSE_ENTITY_ID_REGEX)) {
     // its a synId
     href = `${PRODUCTION_ENDPOINT_CONFIG.PORTAL}Synapse:${link}`
-  } else if (link.match(DOI_REGEX)) {
+  } else if (doiLink) {
     defaultTarget = TargetEnum.NEW_WINDOW
-    href = `https://dx.doi.org/${link}`
+    href = doiLink
   } else if (!cardLinkConfig) {
     defaultTarget = TargetEnum.NEW_WINDOW
   } else if (cardLinkConfig) {

diff --git a/...ges/synapse-react-client/src/components/RecentPublicationsGrid/RecentPublicationsGrid.tsx b/...ges/synapse-react-client/src/components/RecentPublicationsGrid/RecentPublicationsGrid.tsx
@@ -1,4 +1,10 @@
-import { Typography, Button, Box, Skeleton } from '@mui/material'
+import {
+  Typography,
+  Button,
+  Box,
+  Skeleton,
+  Link as MuiLink,
+} from '@mui/material'
 import Grid from '@mui/material/Unstable_Grid2'
 import { SynapseConstants, SynapseUtilityFunctions } from '../../utils'
 import { QueryBundleRequest } from '@sage-bionetworks/synapse-types'
@@ -8,6 +14,7 @@ import dayjs from 'dayjs'
 import { formatDate } from '../../utils/functions/DateFormatter'
 import { Row } from '@sage-bionetworks/synapse-types'
 import { Link } from 'react-router-dom'
+import { convertDoiToLink } from '../../utils/functions/RegularExpressions'
 
 export type RecentPublicationsGridProps = {
   sql: string
@@ -18,8 +25,102 @@ export type RecentPublicationsGridProps = {
 
 type PublicationCardProps = {
   pub: Row
+  isLoading: boolean
+  categoryColIndex: number
+  titleColIndex: number
+  journalColIndex: number
+  publicationDateColIndex: number
+  doiColIndex: number
 }
 
+const PublicationCard = ({
+  pub,
+  isLoading,
+  categoryColIndex,
+  titleColIndex,
+  journalColIndex,
+  publicationDateColIndex,
+  doiColIndex,
+}: PublicationCardProps) => (
+  <Grid
+    key={pub.rowId}
+    height={{ xs: 'auto', sm: 'initial' }}
+    minWidth={{ xs: '280px', lg: 'initial' }}
+    maxWidth={{ xs: '450px', lg: 'initial' }}
+  >
+    <Box sx={{ height: '100%' }}>
+      {isLoading ? (
+        <Skeleton variant="rectangular" height={275} width="100%" />
+      ) : (
+        <div>
+          {pub.values[categoryColIndex] && (
+            <Typography
+              variant="overline"
+              fontSize={'14px'}
+              sx={{
+                backgroundColor: 'grey.300',
+                borderRadius: '3px',
+                padding: '4px 8px',
+                border: 'none',
+                lineHeight: 'initial',
+              }}
+            >
+              {pub.values[categoryColIndex]}
+            </Typography>
+          )}
+          <Typography
+            variant="headline2"
+            color="grey.1000"
+            fontSize={'21px'}
+            sx={{
+              padding: '20px 0px',
+            }}
+          >
+            <MuiLink
+              href={convertDoiToLink(pub.values[doiColIndex] || '')}
+              target="_blank"
+              sx={{
+                color: 'inherit',
+                textDecoration: 'none',
+                fontWeight: 'inherit',
+                '&:hover': {
+                  textDecoration: 'none',
+                },
+              }}
+            >
+              {pub.values[titleColIndex]}
+            </MuiLink>
+          </Typography>
+          <Box display={'flex'} gap={'8px'} flexDirection={'column'}>
+            <Typography
+              variant="body1"
+              color="grey.700"
+              fontSize={'14px'}
+              fontStyle={'italic'}
+              lineHeight={1.35}
+            >
+              {pub.values[journalColIndex]}
+            </Typography>
+            <Typography
+              variant="body1"
+              color="grey.700"
+              fontSize={'14px'}
+              lineHeight={1.35}
+              paddingBottom={{ xs: 0, md: '35px' }}
+            >
+              {pub.values[publicationDateColIndex] &&
+                formatDate(
+                  dayjs(Number(pub.values[publicationDateColIndex])),
+                  'MMMM, YYYY',
+                )}
+            </Typography>
+          </Box>
+        </div>
+      )}
+    </Box>
+  </Grid>
+)
+
 function RecentPublicationsGrid(props: RecentPublicationsGridProps) {
   const { sql, buttonLink, buttonLinkText, summaryText } = props
 
@@ -45,6 +146,7 @@ function RecentPublicationsGrid(props: RecentPublicationsGridProps) {
     JOURNAL = 'Journal',
     TITLE = 'Title',
     PUBLICATION_DATE = 'publicationDate',
+    DOI = 'DOI',
   }
 
   const categoryColIndex = getFieldIndex(
@@ -60,73 +162,7 @@ function RecentPublicationsGrid(props: RecentPublicationsGridProps) {
     ExpectedColumns.PUBLICATION_DATE,
     queryResultBundle,
   )
-
-  const PublicationCard = ({ pub }: PublicationCardProps) => (
-    <Grid
-      key={pub.rowId}
-      height={{ xs: 'auto', sm: 'initial' }}
-      minWidth={{ xs: '280px', lg: 'initial' }}
-      maxWidth={{ xs: '450px', lg: 'initial' }}
-    >
-      <Box sx={{ height: '100%' }}>
-        {isLoading ? (
-          <Skeleton variant="rectangular" height={275} width="100%" />
-        ) : (
-          <div>
-            {pub.values[categoryColIndex] && (
-              <Typography
-                variant="overline"
-                fontSize={'14px'}
-                sx={{
-                  backgroundColor: 'grey.300',
-                  borderRadius: '3px',
-                  padding: '4px 8px',
-                  border: 'none',
-                  lineHeight: 'initial',
-                }}
-              >
-                {pub.values[categoryColIndex]}
-              </Typography>
-            )}
-            <Typography
-              variant="headline2"
-              color="grey.1000"
-              fontSize={'21px'}
-              sx={{
-                padding: '20px 0px',
-              }}
-            >
-              {pub.values[titleColIndex]}
-            </Typography>
-            <Box display={'flex'} gap={'8px'} flexDirection={'column'}>
-              <Typography
-                variant="body1"
-                color="grey.700"
-                fontSize={'14px'}
-                fontStyle={'italic'}
-                lineHeight={1.35}
-              >
-                {pub.values[journalColIndex]}
-              </Typography>
-              <Typography
-                variant="body1"
-                color="grey.700"
-                fontSize={'14px'}
-                lineHeight={1.35}
-                paddingBottom={{ xs: 0, md: '35px' }}
-              >
-                {pub.values[publicationDateColIndex] &&
-                  formatDate(
-                    dayjs(Number(pub.values[publicationDateColIndex])),
-                    'MMMM, YYYY',
-                  )}
-              </Typography>
-            </Box>
-          </div>
-        )}
-      </Box>
-    </Grid>
-  )
+  const doiColIndex = getFieldIndex(ExpectedColumns.DOI, queryResultBundle)
 
   return (
     <Box
@@ -161,7 +197,16 @@ function RecentPublicationsGrid(props: RecentPublicationsGridProps) {
           })}
         >
           {dataRows.map(pub => (
-            <PublicationCard pub={pub} key={pub.rowId} />
+            <PublicationCard
+              pub={pub}
+              key={pub.rowId}
+              isLoading={isLoading}
+              categoryColIndex={categoryColIndex}
+              titleColIndex={titleColIndex}
+              journalColIndex={journalColIndex}
+              publicationDateColIndex={publicationDateColIndex}
+              doiColIndex={doiColIndex}
+            />
           ))}
         </Box>
       </Box>

diff --git a/packages/synapse-react-client/src/components/row_renderers/utils/CardFooter.tsx b/packages/synapse-react-client/src/components/row_renderers/utils/CardFooter.tsx
@@ -1,7 +1,7 @@
 import { Component, Fragment } from 'react'
 import IconSVG from '../../IconSvg/IconSvg'
 import { ColumnIconConfigs } from '../../CardContainerLogic'
-import { DOI_REGEX } from '../../../utils/functions/RegularExpressions'
+import { convertDoiToLink } from '../../../utils/functions/RegularExpressions'
 
 type State = {
   isShowMoreOn: boolean
@@ -58,13 +58,15 @@ class CardFooter extends Component<CardFooterProps, State> {
       return value
     }
     value = value.trim()
-    if (value.match(DOI_REGEX)) {
+    const doiLink = convertDoiToLink(value)
+
+    if (doiLink) {
       return (
         <a
           data-search-handle={columnName}
           target="_blank"
           rel="noopener noreferrer"
-          href={`https://dx.doi.org/${value}`}
+          href={doiLink}
         >
           {value}
         </a>

diff --git a/packages/synapse-react-client/src/utils/functions/RegularExpressions.ts b/packages/synapse-react-client/src/utils/functions/RegularExpressions.ts
@@ -5,6 +5,14 @@ import { normalizeSynPrefix } from './EntityTypeUtils'
 // note - had to add an escape character for the second and third forward slash in the regex above
 export const DOI_REGEX = /^10.\d{4,9}\/[-._;()/:a-z0-9]+$/i
 
+export function convertDoiToLink(doi: string) {
+  doi = doi.trim()
+  if (DOI_REGEX.test(doi)) {
+    return `https://dx.doi.org/${doi}`
+  }
+  return ''
+}
+
 /**
  * Checks for a Synapse ID, with or without a version number.
  * Captures the synId and version number into capture groups.