Skip to content

Commit

Permalink
Merge Main Site and Data Portal (#355)
Browse files Browse the repository at this point in the history 
* Enable markdown for static pages
* Data driven pages
* Integrate two HTAN sites
* Update data standards pages
* Add charts to home page
* Reorganize header
* Add Data Updates Section to News
* Add favicon
* Add individual atlas pages
* Add some styling to htan atlas pages
* remove authors and consortium from main navigation
* fix authors redirect URL

Co-authored-by: alisman <[email protected]>
Co-authored-by: Onur Sumer <[email protected]>
Co-authored-by: ecerami <[email protected]>
Co-authored-by: Xiang Li <[email protected]>
  • Loading branch information
@inodb @alisman
@onursumer @ecerami @leexgh
5 people authored May 16, 2022
1 parent ba66693 commit c6280bf
Show file tree
Hide file tree
Showing 137 changed files with 7,769 additions and 196 deletions.
3 changes: 3 additions & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
*min.css
*sh
*yml
*.jpg
*.jpeg
*json
*md
*bak
Expand All @@ -27,3 +29,4 @@ yarn.lock
*.seg
*.screenshottest
node_modules/**
*webp
27 changes: 12 additions & 15 deletions components/DataStandard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import React from 'react';
import Breadcrumb from 'react-bootstrap/Breadcrumb';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';

import { DataSchemaData } from '../lib/dataSchemaHelpers';
import { CmsData } from '../types';
import DataSchema from './DataSchema';
import Footer from './Footer';
import HtanNavbar from './HtanNavbar';
import { HtanNavbar } from './HtanNavbar';
import { Col } from 'react-bootstrap';
import Link from 'next/link';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft';

export interface DataStandardProps {
title: string;
Expand All @@ -21,21 +24,15 @@ const DataStandard: React.FunctionComponent<DataStandardProps> = (props) => {
<>
<HtanNavbar />
<Container>
<Row>
<Breadcrumb>
<Breadcrumb.Item href="/">Home</Breadcrumb.Item>
<Breadcrumb.Item href="/standards">
Data Standards
</Breadcrumb.Item>
<Breadcrumb.Item active>{props.title}</Breadcrumb.Item>
</Breadcrumb>
<Row style={{ marginBottom: 10 }}>
<Col>
<FontAwesomeIcon icon={faArrowLeft} />
&nbsp;
<Link href="/standards">Back to Data Standards</Link>
</Col>
</Row>
<Row>
<span
dangerouslySetInnerHTML={{
__html: props.data[0].content.rendered,
}}
/>
<Col>{props.children}</Col>
</Row>
{props.schemaDataById && props.dataSchemaData && (
<Row>
Expand Down
157 changes: 134 additions & 23 deletions components/HomePage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,30 @@
import React, { useEffect, useState } from 'react';
import _ from 'lodash';
import React from 'react';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import ButtonToolbar from 'react-bootstrap/ButtonToolbar';
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Jumbotron from 'react-bootstrap/Jumbotron';
import { WPAtlas } from '../types';
import styles from './homeStyles.module.scss';
import { EntityReport, getAtlasPageURL } from '../lib/helpers';
import { Helmet } from 'react-helmet';
import { ScalePropType } from 'victory-core';
import { WPAtlas } from '../types';
import { EntityReport } from '../lib/helpers';
import {
EntityReportByAttribute,
computeUniqueAttributeValueCount,
} from '../lib/entityReportHelpers';
import SummaryChart from './SummaryChart';
import Image from 'next/image';
import htanMarkerPaper from '../public/HTAN-Marker-Paper-Table.png';

export interface IHomePropsProps {
hero_blurb: string;
cards: any[];
atlases: WPAtlas[];
synapseCounts: EntityReport[];
organSummary: EntityReportByAttribute[];
assaySummary: EntityReportByAttribute[];
}

function dashboardIcon(text: string, description: string) {
Expand All @@ -30,35 +40,65 @@ function dashboardIcon(text: string, description: string) {
);
}

const chartScale: { x: ScalePropType; y: ScalePropType } = {
x: 'linear',
y: 'log',
};

// starting from y=1 doesn't work when case count=1.
// so we start from a slightly smaller value for a better bar chart visualization
const minDomain = { y: 0.95 };

function dependentAxisTickFormat(t: number) {
// only show tick labels for the integer powers of 10
return _.isInteger(Math.log10(t)) ? t : '';
}

const HomePage: React.FunctionComponent<IHomePropsProps> = ({
hero_blurb,
cards,
synapseCounts,
atlases,
organSummary,
assaySummary,
}) => {
return (
<>
<Helmet>
<style>
{`#pageWrapper {
background: #eeeeee;
} `}
</style>
</Helmet>
<Jumbotron
className={'text-center'}
className={'text-center position-relative'}
style={{ borderRadius: '0px', marginBottom: '0px' }}
>
<Row className="justify-content-md-center mt-5">
<Col md={{ span: 5 }} style={{ color: '#fff' }}>
<h1>Human Tumor Atlas Network Data Portal</h1>
<div
className={'position-absolute'}
style={{
bottom: 10,
right: 10,
color: '#fff',
}}
>
<a style={{color:'white'}} href="/data-updates">Data Release V2 (Last updated 2022-03-30)</a>
</div>
<Row className="justify-content-md-center">
<Col md={{ span: 5 }} style={{ color: '#fff', backgroundColor: 'rgba(0,0,0,0.5)', borderRadius: 25, padding: 20 }}>
<h1 style={{ fontSize: 40, color: '#24cad5' }}>
Human Tumor Atlas Network
</h1>
<br />
<span
dangerouslySetInnerHTML={{ __html: hero_blurb }}
></span>

<p style={{fontSize:20}}>
HTAN is a National Cancer Institute (NCI)-funded
Cancer Moonshot<sup>SM</sup> initiative to construct
3-dimensional atlases of the dynamic cellular,
morphological, and molecular features of human
cancers as they evolve from precancerous lesions to
advanced disease. (
<span style={{fontStyle:"italic"}}><a style={{color:'#fff'}} href="https://www.sciencedirect.com/science/article/pii/S0092867420303469">Cell April 2020</a></span>)
</p>

<div
style={{
display: 'flex',
paddingTop: 10,
justifyContent: 'center',
}}
>
Expand All @@ -67,22 +107,29 @@ const HomePage: React.FunctionComponent<IHomePropsProps> = ({
href="/explore"
variant="primary"
className="mr-4"
size="lg"
>
Explore latest Data
</Button>
<Button
href="/overview"
variant="primary"
className="mr-4"
size="lg"
>
Explore the Data
Learn more about HTAN
</Button>
</ButtonToolbar>
</div>
</Col>
</Row>

<Row className="justify-content-md-center mt-3"></Row>
</Jumbotron>
<Container
fluid
style={{
backgroundColor: '#eee',
paddingTop: '60px',
paddingBottom: '60px',
paddingTop: '20px',
paddingBottom: '20px',
}}
>
<Row className="justify-content-md-center">
Expand All @@ -92,6 +139,70 @@ const HomePage: React.FunctionComponent<IHomePropsProps> = ({
)}
</Row>
</Container>
{/* <Container
fluid
style={{
backgroundColor: '#ddd',
color: 'black',
padding: '5px',
}}
>
<Row className="justify-content-md-center">
<span>About this Release:</span>
</Row>
</Container> */}
<Container
fluid
style={{
paddingTop: '20px',
paddingBottom: '60px',
}}
>
<Row className="justify-content-md-center">
<p style={{ fontSize: 'medium' }}>
The latest HTAN data release includes tumors originating
from{' '}
<strong>
{computeUniqueAttributeValueCount(organSummary)}
</strong>{' '}
primary tumor sites:
</p>
</Row>
<Row className="pr-5 pl-5">
<SummaryChart
data={organSummary}
dependentAxisEntityName="Case"
stackedByCenter={false}
scale={chartScale}
minDomain={minDomain}
dependentAxisTickFormat={dependentAxisTickFormat}
/>
</Row>
<Row className="justify-content-md-center">
<p style={{ fontSize: 'medium' }}>
The tumors were profiled with{' '}
<strong>
{computeUniqueAttributeValueCount(assaySummary)}
</strong>{' '}
different types of assays:
</p>
</Row>
<Row className="pr-5 pl-5">
<SummaryChart
data={assaySummary}
dependentAxisEntityName="Case"
stackedByCenter={false}
scale={chartScale}
minDomain={minDomain}
dependentAxisTickFormat={dependentAxisTickFormat}
/>
</Row>
<Row className="justify-content-md-center">
<p style={{ fontSize: 'medium' }}>
Many more profiled tumors will be available in the future. Stay tuned!
</p>
</Row>
</Container>

{/*<div className={styles.atlasCardContainer}>*/}
{/* {atlases.map((atlas) => {*/}
Expand Down
Loading

1 comment on commit c6280bf

@vercel
Copy link

@vercel vercel bot commented on c6280bf May 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

htan-portal-nextjs – ./

data.humantumoratlas.org
htan-portal-nextjs.vercel.app
htan-portal-nextjs-htan.vercel.app
htan-portal-nextjs-git-master-htan.vercel.app

Please sign in to comment.