Refactor phase 1 centers and cleanup legacy content

components/HtaCenterPage.module.scss

@@ -1,5 +1,34 @@
+.header {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.headerImg100 {
+    height: 100%;
+}
+
+.headerImg50 {
+    width: 50%;
+    height: 100%;
+}
+
+.headerImg30 {
+    width: 30%;
+    height: 100%;
+}
+
+.headerImg20 {
+    width: 20%;
+    height: 100%;
+}
+
 .headshot {
     margin: 0 15px 15px 0;
     float: left;
     width: 200px;
 }
+
+.overviewImg {
+    width: 100%;
+    max-width: 600px;
+}

components/HtaCenterPage.tsx

@@ -1,14 +1,138 @@
 import _ from 'lodash';
+import { useEffect, useState } from 'react';
 import { Container, Row } from 'react-bootstrap';
 
 import { HtaCenter, PrincipalInvestigator } from '../types';
 import styles from './HtaCenterPage.module.scss';
 
 export interface HtaCenterPageProps {
+    id: string;
     hta: HtaCenter;
     showGrantNumber?: boolean;
 }
 
+const HeaderLogos = (props: {
+    imgSources: string[];
+    headerImgClassname?: string;
+}) => {
+    return (
+        <div className={styles.header}>
+            {props.imgSources.map((src, index) => (
+                <img
+                    src={src}
+                    key={index}
+                    alt={src
+                        .toLowerCase()
+                        .split('.')[0]
+                        .replace(/\//g, '')
+                        .replace(/_/g, '-')}
+                    className={props.headerImgClassname || styles.headerImg30}
+                />
+            ))}
+        </div>
+    );
+};
+
+const customHeaderContent: { [centerId: string]: JSX.Element } = {
+    hta1: (
+        <>
+            <HeaderLogos
+                imgSources={[
+                    '/phase1/Broad-Inst-Logo.webp',
+                    '/phase1/DFCI-Logo-with-Flag.webp',
+                    '/phase1/HMS_Logo.webp',
+                ]}
+            />
+            <br />
+            <a href="https://humantumoratlas.org/htapp-webinar-series/">
+                View the HTAPP Webinar Series
+            </a>
+        </>
+    ),
+    hta3: (
+        <HeaderLogos
+            imgSources={[
+                '/phase1/BU-Logo.webp',
+                '/phase1/Janseen-Logo.webp',
+                '/phase1/UCLA-Logo.webp',
+            ]}
+        />
+    ),
+    hta4: (
+        <HeaderLogos
+            imgSources={[
+                "/phase1/children's-hospital-of-philadelphia-logo.webp",
+                '/phase1/university-of-pennsylvania-penn-vector-logo.webp',
+            ]}
+        />
+    ),
+    hta5: (
+        <HeaderLogos
+            imgSources={[
+                '/phase1/DFCI-logo.webp',
+                '/phase1/BroadInstLogoforDigitalRGB.webp',
+            ]}
+        />
+    ),
+    hta6: (
+        <HeaderLogos
+            imgSources={[
+                '/phase1/Duke-SOM-logo.webp',
+                '/phase1/ASU-full_logo.webp',
+                '/phase1/Stanford-Logo.webp',
+            ]}
+        />
+    ),
+    hta7: (
+        <HeaderLogos
+            imgSources={['/phase1/HMS_Logo.webp', '/phase1/BWH-logo.webp']}
+        />
+    ),
+    hta8: (
+        <HeaderLogos
+            imgSources={['/phase1/MSK_logo.webp']}
+            headerImgClassname={styles.headerImg50}
+        />
+    ),
+    hta9: (
+        <HeaderLogos
+            imgSources={['/phase1/OHSU_logo.webp']}
+            headerImgClassname={styles.headerImg100}
+        />
+    ),
+    hta10: (
+        <HeaderLogos
+            imgSources={['/phase1/Stanford-Logo.webp']}
+            headerImgClassname={styles.headerImg100}
+        />
+    ),
+    hta11: (
+        <HeaderLogos
+            imgSources={[
+                '/phase1/VUMC-logo.webp',
+                '/phase1/vanderbilt-university-logo.webp',
+            ]}
+        />
+    ),
+    hta12: (
+        <HeaderLogos
+            imgSources={['/phase1/WUSM-logo.webp']}
+            headerImgClassname={styles.headerImg100}
+        />
+    ),
+    'htan-dcc': (
+        <HeaderLogos
+            imgSources={[
+                '/phase1/DFCI-Logo-with-Flag.webp',
+                '/dcc/sage_bionetworks_logo.webp',
+                '/phase1/MSK_logo.webp',
+                '/dcc/isb_color_logo1.webp',
+            ]}
+            headerImgClassname={styles.headerImg20}
+        />
+    ),
+};
+
 const PrincipalInvestigators = (props: {
     principalInvestigators: PrincipalInvestigator[];
     phase: string;
@@ -22,6 +146,7 @@ const PrincipalInvestigators = (props: {
             .split(',')[0]
             .replace(/\s/g, '_')
             .replace('à', 'a')
+            .replace('é', 'e')
             .replace(/[.’]/g, '');
     };
 
@@ -62,20 +187,43 @@ const PrincipalInvestigators = (props: {
     }
 };
 
-const Overview = (props: { description: string | string[] }) => {
-    const description = [...[props.description]].flat();
+const Overview = (props: { hta: HtaCenter; id: string }) => {
+    const description = [...[props.hta.description]].flat();
+    const [hasOverviewImg, setHasOverviewImg] = useState<boolean>(false);
+    const imgSrc = `/${props.hta.phase}/${props.id}_overview.png`;
+
+    // overview image may not exist for all centers
+    // we need to hide the section in case no image found
+    useEffect(() => {
+        fetch(imgSrc)
+            .then((response) => {
+                if (response.status === 200) {
+                    setHasOverviewImg(true);
+                }
+            })
+            .catch(() => setHasOverviewImg(false));
+    }, []);
 
     return (
         <>
             <h2>Overview</h2>
             {description.map((d, index) => (
                 <p key={index}>{d}</p>
             ))}
+            {hasOverviewImg && (
+                <div className="text-center">
+                    <img
+                        className={styles.overviewImg}
+                        src={imgSrc}
+                        alt={`${props.id}_overview`}
+                    />
+                </div>
+            )}
         </>
     );
 };
 
-const HtaCenterPage = ({ hta, showGrantNumber }: HtaCenterPageProps) => {
+const HtaCenterPage = ({ id, hta, showGrantNumber }: HtaCenterPageProps) => {
     if (!hta) {
         return <div>Loading...</div>;
     }
@@ -85,7 +233,10 @@ const HtaCenterPage = ({ hta, showGrantNumber }: HtaCenterPageProps) => {
             <Row className={'contentWrapper'}>
                 <div className="col">
                     <h1>{hta.title}</h1>
-                    <Overview description={hta.description} />
+                    {customHeaderContent[id]}
+                    {!_.isEmpty(hta.description) && (
+                        <Overview hta={hta} id={id} />
+                    )}
                     {showGrantNumber && hta.grantNumber && (
                         <p>
                             <b>Grant Number</b>: {hta.grantNumber}

components/HtanNavbar.tsx

@@ -70,7 +70,7 @@ export const HtanNavbar: React.FunctionComponent<{}> = () => {
 
         <NavSection text={'About HTAN'}>
             <NavDropdown.Item href="/overview">Overview</NavDropdown.Item>
-            <NavDropdown.Item href="/htan-dcc">
+            <NavDropdown.Item href="/center/htan-dcc">
                 Data Coordinating Center
             </NavDropdown.Item>
             <NavDropdown.Item href="/research-network">
@@ -105,7 +105,9 @@ export const HtanNavbar: React.FunctionComponent<{}> = () => {
             </NavDropdown.Item>
             <NavDropdown.Item href="/events">Events</NavDropdown.Item>
             <Dropdown.Divider />
-            <Nav.Link href="https://groups.google.com/g/htan-news">Newsletter</Nav.Link>
+            <Nav.Link href="https://groups.google.com/g/htan-news">
+                Newsletter
+            </Nav.Link>
             <Nav.Link href="https://twitter.com/ncihtan">Twitter</Nav.Link>
         </NavSection>,
     ];