Skip to content

Commit

Permalink
Merge pull request #197 from opentargets/cc-homepage-redesign
Browse files Browse the repository at this point in the history 
[Home page] Links redesign
  • Loading branch information
@carcruz
carcruz authored Feb 14, 2022
2 parents 35ff29e + afbb072 commit f4c6dd8
Showing 1 changed file with 165 additions and 79 deletions.
244 changes: 165 additions & 79 deletions src/pages/HomePage/HomePage.js
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,26 @@
import React, { Component, Fragment } from 'react';
import { Helmet } from 'react-helmet';
import { Grid, Box, Typography, useMediaQuery } from '@material-ui/core';
import { useTheme, withStyles, makeStyles } from '@material-ui/core/styles';

import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import withStyles from '@material-ui/core/styles/withStyles';
import RootRef from '@material-ui/core/RootRef';
import Link from '@material-ui/core/Link';

import { Splash } from '../../ot-ui-components';

import HomeBox from './HomeBox';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faCircle,
faDownload,
faLaptopCode,
faQuestionCircle,
faFileAlt,
faCommentDots,
} from '@fortawesome/free-solid-svg-icons';
import Link from '../../components/Link';
import Search from '../../components/Search';
import PortalFeaturesIcon from '../../components/PortalFeaturesIcon';
import ScrollDownButton from '../../components/ScrollDownButton';
import NavBar from '../../components/NavBar/NavBar';

import Version from '../../components/Version';
import Footer from '../../components/Footer';
import { Splash } from '../../ot-ui-components';

import HomeBox from './HomeBox';

import { externalLinks, mainMenuItems } from '../../constants';

Expand All @@ -36,24 +39,13 @@ const EXAMPLES = [
},
];

const styles = theme => {
const containerStyles = theme => {
return {
highlight: {
color: theme.palette.primary.main,
fontWeight: 'bold',
},
searchSection: {
position: 'relative',
height: '100vh',
overflow: 'visible',
},
slogan: {
color: theme.palette.grey[700],
fontFamily: 'Inter',
fontSize: '18px',
marginBottom: '15px',
textAlign: 'center',
},
examples: {
marginTop: '12px',
},
Expand All @@ -64,39 +56,75 @@ const styles = theme => {
position: 'absolute',
bottom: '10px',
},
introTitle: {
color: theme.palette.grey[700],
fontFamily: 'Inter',
fontSize: '22px',
fontWeight: 'bold',
},
introText: {
color: theme.palette.grey[800],
fontFamily: 'Inter',
},
list: {
paddingTop: '44px',
},
listText: {
color: theme.palette.grey[800],
fontFamily: 'Inter',
fontSize: '18px',
},
linkHeader: {
marginTop: '22px',
},
scrollDownContainer: {
position: 'absolute',
bottom: 0,
},
link: {
'&:hover': {
color: theme.palette.primary.dark,
},
hpSection: {
marginBottom: '40px',
marginTop: '80px',
},
linksContainer: {
marginTop: '15px',
marginBottom: '15px',
},
homeSection: {
marginBottom: '40px',
},
};
};

const useHelpBoxStyle = makeStyles(theme => ({
baseLink: {
whiteSpace: 'pre-wrap',
},
helpBoxes: {
maxWidth: '120px',
textAlign: 'center',
[theme.breakpoints.down('xs')]: {
textAlign: 'left',
},
},
}));

const HelpBoxPanel = ({ fai, url, label, external }) => {
const theme = useTheme();
const xsMQ = useMediaQuery(theme.breakpoints.down('xs'));
const classes = useHelpBoxStyle();
if (xsMQ) {
// on xsmall screens
return (
<Link to={url} external={external} className={classes.baseLink}>
<Grid container wrap="nowrap" alignItems="center" spacing={1}>
<Grid item>
<div className="fa-layers fa-fw fa-3x">
<FontAwesomeIcon icon={faCircle} />
<FontAwesomeIcon icon={fai} transform="shrink-8" inverse />
</div>
</Grid>
<Grid item>
<Typography display="inline">{label}</Typography>
</Grid>
</Grid>
</Link>
);
}
return (
<Box className={classes.helpBoxes}>
<Link to={url} external={external} className={classes.baseLink}>
<div className="fa-layers fa-fw fa-6x">
<FontAwesomeIcon icon={faCircle} />
<FontAwesomeIcon icon={fai} transform="shrink-8" inverse />
</div>
<Typography>{label}</Typography>
</Link>
</Box>
);
};

class HomePage extends Component {
constructor(props) {
super(props);
Expand All @@ -116,7 +144,7 @@ class HomePage extends Component {
<Helmet>
<title>Open Targets Genetics</title>
</Helmet>
<RootRef rootRef={this.searchSectionRef}>
<main ref={this.searchSectionRef}>
<Grid
className={classes.searchSection}
container
Expand All @@ -143,7 +171,7 @@ class HomePage extends Component {
style={{ textAlign: 'center' }}
className={classes.exampleLink}
>
<Link href={d.url} underline="none">
<Link to={d.url} underline="none">
{d.label}
</Link>
</Typography>
Expand Down Expand Up @@ -179,37 +207,95 @@ class HomePage extends Component {
/>
</Grid>
</Grid>
</RootRef>
<Grid container justifyContent="center">
<Grid className={classes.list} item md={4}>
<p className={classes.introTitle}>
Welcome to Open Targets Genetics
</p>
<p className={classes.introText}>
Open Targets Genetics is the latest release from Open Targets, an
innovative, large-scale, multi-year, public-private partnership
that uses human genetics and genomics data for systematic drug
target identification and prioritisation.
</p>
<p className={classes.introText}>
The Portal offers three unique features to help you discover
associations between genes, variants, and traits:
</p>
<p className={classes.introText}>
+ Browse and rank gene and variant associations identified by our
Locus-to-Gene (L2G) scoring pipeline
</p>
<p className={classes.introText}>
+ Uncover credible sets for variant and trait associations based
on our fine mapping analyses pipeline
</p>
<p className={classes.introText}>
+ Explore and compare studies from UK Biobank, FinnGen, and GWAS
Catalog using our multi-trait comparison tool
</p>
</main>
<Grid
container
justifyContent="center"
alignItems="center"
direction="column"
className={classes.hpSection}
>
<Grid item xs={10} md={8} className={classes.homeSection}>
<Typography variant="h4" component="h1" align="center" paragraph>
About Open Targets Genetics
</Typography>
<Typography paragraph>
Open Targets Genetics is a comprehensive tool highlighting
variant-centric statistical evidence to allow both prioritisation
of candidate causal variants at trait-associated loci and
identification of potential drug targets.
</Typography>
<Typography paragraph>
It aggregates and integrates genetic associations curated from
both literature and newly-derived loci from UK Biobank and FinnGen
and also contains functional genomics data (e.g. chromatin
conformation, chromatin interactions) and quantitative trait loci
(eQTLs and pQTLs). Large-scale pipelines apply statistical
fine-mapping across thousands of trait-associated loci to resolve
association signals and link each variant to its proximal and
distal target gene(s) using a Locus2Gene assessment. Integrated
cross-trait colocalisation analyses and linking to detailed
pharmaceutical compounds extend the capacity of Open Targets
Genetics to explore drug repositioning opportunities and shared
genetic architecture.
</Typography>
</Grid>
<Grid container item md={4} justifyContent="center">
<PortalFeaturesIcon />
<Grid item xs={10} md={8} className={classes.homeSection}>
<Typography variant="h4" component="h1" align="center" paragraph>
Get started with Open Targets Genetics
</Typography>

<Grid
container
justifyContent="space-evenly"
alignItems="flex-start"
spacing={5}
className={classes.linksContainer}
>
<Grid item xs={12} sm={'auto'}>
<HelpBoxPanel
fai={faDownload}
url="https://genetics-docs.opentargets.org/data-access/data-download"
label="Download all of our open datasets"
external
/>
</Grid>
<Grid item xs={12} sm={'auto'}>
<HelpBoxPanel
fai={faLaptopCode}
url="https://genetics-docs.opentargets.org/data-access/graphql-api"
label="Access data with our GraphQL API"
external
/>
</Grid>

<Grid item xs={12} sm={'auto'}>
<HelpBoxPanel
fai={faQuestionCircle}
url="https://genetics-docs.opentargets.org/"
label="Check out our Platform documentation"
external
/>
</Grid>

<Grid item xs={12} sm={'auto'}>
<HelpBoxPanel
fai={faFileAlt}
url="https://genetics-docs.opentargets.org/citation"
label="Read our latest Platform publications"
external
/>
</Grid>

<Grid item xs={12} sm={'auto'}>
<HelpBoxPanel
fai={faCommentDots}
url="https://community.opentargets.org/"
label="Join the Open Targets Community"
external
/>
</Grid>
</Grid>
</Grid>
</Grid>
<Footer externalLinks={externalLinks} />
Expand All @@ -218,4 +304,4 @@ class HomePage extends Component {
}
}

export default withStyles(styles)(HomePage);
export default withStyles(containerStyles)(HomePage);

0 comments on commit f4c6dd8

Please sign in to comment.