Merge pull request #1593 from kianamcc/PORTALS-3376

PORTALS-3376: [CCKP Homepage_V1] New Portal home page search component

Author: kianamcc

apps/portals/cancercomplexity/src/config/routesConfig.tsx

@@ -23,6 +23,9 @@ import {
   onPointClick,
 } from './synapseConfigs/onPointClick'
 import { searchPageChildRoutes } from 'src/pages/CCKPSearchPage'
+import CancerComplexityHeader from '@sage-bionetworks/synapse-portal-framework/components/cancercomplexity/CancerComplexityHeader'
+
+const showHeaderWithSearch = false
 
 const routes: RouteObject[] = [
   {
@@ -34,7 +37,7 @@ const routes: RouteObject[] = [
         index: true,
         element: (
           <>
-            <Header />
+            {showHeaderWithSearch ? <CancerComplexityHeader /> : <Header />}
             <div className={'home-bg-dark'}>
               <SectionLayout
                 title={'Portal Goals'}

apps/synapse-portal-framework/src/components/HeaderSearchBox.tsx

@@ -0,0 +1,123 @@
+import {
+  Box,
+  Stack,
+  SxProps,
+  Typography,
+  Button,
+  lighten,
+  useTheme,
+} from '@mui/material'
+import PortalFullTextSearchField from './PortalSearch/PortalFullTextSearchField'
+import { spreadSx } from 'synapse-react-client/theme/spreadSx'
+import { useSearchParams } from 'react-router'
+
+type HeaderSearchBoxProps = {
+  searchPlaceholder?: string
+  searchExampleTerms?: string[]
+  path?: string
+  sx?: SxProps
+}
+
+const HeaderSearchBox = ({
+  searchPlaceholder,
+  searchExampleTerms,
+  path,
+  sx,
+}: HeaderSearchBoxProps) => {
+  const [, setSearchParams] = useSearchParams()
+  const theme = useTheme()
+
+  const handleTermClick = (term: string) => {
+    const trimmedTerm = term.trim()
+    setSearchParams({ FTS_SEARCH_TERM: trimmedTerm })
+    if (path) {
+      window.location.pathname = `${path}`
+    }
+  }
+
+  return (
+    <Box
+      sx={spreadSx(sx, {
+        padding: { xs: '40px', lg: '40px 80px 40px 0' },
+        width: '100%',
+      })}
+    >
+      <Stack
+        sx={theme => ({
+          padding: '40px',
+          gap: '30px',
+          borderRadius: '6px',
+          backdropFilter: 'blur(15px)',
+          [theme.breakpoints.up('lg')]: {
+            minWidth: '660px',
+          },
+        })}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            gap: '20px',
+            alignItems: 'center',
+            height: '48px',
+          }}
+        >
+          <PortalFullTextSearchField
+            placeholder={searchPlaceholder}
+            path={path}
+            sx={{
+              margin: 0,
+              height: '100%',
+              borderRadius: '3px',
+              '.MuiInputBase-root': {
+                height: '100%',
+                borderRadius: '3px',
+              },
+            }}
+          />
+        </Box>
+        <Stack sx={{ gap: '8px' }}>
+          <Typography sx={{ color: 'grey.900', fontWeight: 700 }}>
+            Example searches
+          </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: '8px 6px;',
+            }}
+          >
+            {searchExampleTerms &&
+              searchExampleTerms.map(term => (
+                <Button
+                  variant="contained"
+                  onClick={() => handleTermClick(term)}
+                  sx={{
+                    borderRadius: '30px',
+                    border: '1px solid',
+                    borderColor: lighten(theme.palette.primary.main, 0.9),
+                    padding: '7px 9px',
+                    textDecoration: 'none !important',
+                    backgroundColor: lighten(theme.palette.primary.main, 0.8),
+                    '&:hover': {
+                      background: lighten(theme.palette.primary.main, 0.7),
+                    },
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      color: 'grey.800',
+                      fontSize: '16px',
+                    }}
+                  >
+                    {term}
+                  </Typography>
+                </Button>
+              ))}
+          </Box>
+        </Stack>
+      </Stack>
+    </Box>
+  )
+}
+
+export default HeaderSearchBox

apps/synapse-portal-framework/src/components/PortalSearch/PortalFullTextSearchField.tsx

@@ -1,20 +1,35 @@
 import { useState } from 'react'
 import SearchIcon from '@mui/icons-material/Search'
-import { InputAdornment, TextField, TextFieldProps } from '@mui/material'
+import {
+  InputAdornment,
+  TextField,
+  TextFieldProps,
+  useTheme,
+} from '@mui/material'
 import { useSearchParams } from 'react-router'
 import { FTS_SEARCH_TERM } from 'synapse-react-client/utils/functions/SqlFunctions'
 
-export function PortalFullTextSearchField(props: TextFieldProps) {
+type PortalFullTextSearchFieldProps = TextFieldProps & {
+  placeholder?: string
+  path?: string
+}
+
+export function PortalFullTextSearchField({
+  placeholder = 'Search by keyword',
+  path,
+  ...props
+}: PortalFullTextSearchFieldProps) {
   const [searchParams, setSearchParams] = useSearchParams()
   const [searchInput, setSearchInput] = useState(
     searchParams.get(FTS_SEARCH_TERM),
   )
+  const theme = useTheme()
 
   return (
     <TextField
       {...props}
       size={'small'}
-      placeholder="Search by keyword"
+      placeholder={placeholder}
       value={searchInput}
       onChange={event => {
         setSearchInput(event.target.value)
@@ -23,12 +38,15 @@ export function PortalFullTextSearchField(props: TextFieldProps) {
         if (event.key === 'Enter') {
           const trimmedInput = event.target.value.trim()
           setSearchParams({ FTS_SEARCH_TERM: trimmedInput })
+          if (path) {
+            window.location.pathname = `${path}`
+          }
         }
       }}
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
-            <SearchIcon />
+            <SearchIcon sx={{ color: theme.palette.primary.main }} />
           </InputAdornment>
         ),
       }}
@@ -41,6 +59,7 @@ export function PortalFullTextSearchField(props: TextFieldProps) {
           backgroundColor: 'white',
         },
         mb: '20px',
+        ...props.sx,
       }}
     />
   )

apps/synapse-portal-framework/src/components/cancercomplexity/CancerComplexityHeader.tsx

@@ -0,0 +1,87 @@
+import { Box, Typography } from '@mui/material'
+import HeaderSearchBox from '../HeaderSearchBox'
+
+const CancerComplexityHeader = () => {
+  const searchPlaceholder = 'Search for cancer related data and resources'
+  const searchExampleTerms = [
+    'Justo Turpis',
+    'Nostra',
+    'Fames',
+    'Rhoncus',
+    'Pharetra enim',
+    'Aliquet',
+    'Ridiculus',
+    'Penatibus',
+    'Accumsan quisque',
+    'Patient Advocacy',
+  ]
+  const content = (
+    <>
+      <Box
+        sx={{
+          margin: 0,
+          color: '#FFFF',
+        }}
+      >
+        <Typography
+          variant="headline1"
+          sx={{
+            fontSize: { xs: '42px', md: '48px' },
+            fontWeight: 'bold',
+            marginBottom: '15px',
+            lineHeight: '54px',
+          }}
+        >
+          Welcome to the Cancer Complexity Knowledge Portal
+        </Typography>
+        <Typography
+          variant="body1"
+          sx={{ fontSize: '18px', lineHeight: '144%' }}
+        >
+          The NCI Division of Cancer Biology supports multiple research programs
+          composed of interdisciplinary communities of scientists who aim to
+          integrate approaches, data, and tools to address important questions
+          in basic and translational cancer research. Discover and download
+          datasets, publications, and other resources generated by these
+          programs.
+        </Typography>
+      </Box>
+    </>
+  )
+  return (
+    <header id="header">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column', lg: 'row' },
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: '20px 0',
+        }}
+      >
+        <Box
+          sx={{
+            margin: 0,
+            flex: 1,
+            padding: { xs: '40px', lg: '40px 80px' },
+          }}
+        >
+          {content}
+        </Box>
+        <HeaderSearchBox
+          searchExampleTerms={searchExampleTerms}
+          searchPlaceholder={searchPlaceholder}
+          path="/Search"
+          sx={{
+            flex: 1,
+            '& > :first-child': {
+              background: 'rgba(184, 204, 226, 0.60)',
+            },
+          }}
+        />
+      </Box>
+    </header>
+  )
+}
+
+export default CancerComplexityHeader

apps/synapse-portal-framework/src/components/index.ts

@@ -22,6 +22,7 @@ import ARKWelcomePage from './arkportal/ARKWelcomePage'
 
 import ExploreWrapper from './Explore/ExploreWrapper'
 import GenieHomePageHeader from './genie/GenieHomePageHeader'
+import CancerComplexityHeader from './cancercomplexity/CancerComplexityHeader'
 import Header from './Header'
 import Image from './Image'
 import NFBrowseToolsPage from './nf/NFBrowseToolsPage'
@@ -56,6 +57,7 @@ const PortalComponents = {
   ELSupportedByNIH,
   ARKWelcomePage,
   GenieHomePageHeader,
+  CancerComplexityHeader,
   TabbedSynapseObjects,
   Header,
   ChallengeParticipantGoogleMap,