Skip to content

Commit

Permalink
Merge pull request #285 from cytoscape/feature/landing-page-sections-…
Browse files Browse the repository at this point in the history
…simple

Feature/landing page sections simple
  • Loading branch information
chrtannus authored May 2, 2024
2 parents 97a3746 + dc213c5 commit c6a22d2
Show file tree
Hide file tree
Showing 18 changed files with 869 additions and 336 deletions.
30 changes: 29 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@
"@material-ui/lab": "^4.0.0-alpha.56",
"@react-hook/resize-observer": "^1.2.6",
"@sentry/browser": "^7.107.0",
"@sentry/integrations": "7.107.0",
"@sentry/node": "^7.107.0",
"@sentry/tracing": "^7.107.0",
"@sentry/integrations": "7.107.0",
"body-parser": "^1.19.0",
"canvg": "4.0.1",
"chroma-js": "^2.4.2",
Expand Down Expand Up @@ -80,7 +80,7 @@
"react-dom": "^16.13.1",
"react-horizontal-stacked-bar-chart": "^8.15.2",
"react-query": "^3.39.2",
"react-router-dom": "^5.1.2",
"react-router-dom": "^5.3.3",
"react-virtuoso": "^3.1.1",
"uuid": "^3.4.0",
"uuid-mongodb": "^2.5.1",
Expand All @@ -91,6 +91,7 @@
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.1",
"@types/react-router-dom": "^5.3.3",
"babel-loader": "^8.1.0",
"babel-plugin-import": "^1.13.8",
"chai": "^4.2.0",
Expand Down
93 changes: 93 additions & 0 deletions src/client/components/home/about.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

import { linkoutProps } from '../defaults';
import Citation from './citation';

import { Container, Link, Typography } from '@material-ui/core';

import { AppLogoIcon } from '../svg-icons';


const useStyles = makeStyles(theme => ({
logo: {
width: 128,
height: 'auto',
marginBottom: theme.spacing(4),
[theme.breakpoints.down('xs')]: {
width: 96,
marginBottom: theme.spacing(2),
},
},
subtitle: {
fontSize: '1.85rem',
fontWeight: 'bold',
marginBottom: theme.spacing(2),
[theme.breakpoints.down('xs')]: {
fontSize: '1.5rem',
},
},
citeContainer: {
paddingLeft: 0,
paddingRight: 0,
marginTop: theme.spacing(6),
marginBottom: theme.spacing(6),
[theme.breakpoints.down('xs')]: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(2),
},
},
authorsContainer: {
paddingLeft: 0,
paddingRight: 0,
marginTop: theme.spacing(12),
marginBottom: 0,
[theme.breakpoints.down('xs')]: {
marginTop: theme.spacing(6),
},
},
description: {
marginBottom: theme.spacing(4),
textAlign: 'left',
[theme.breakpoints.down('xs')]: {
marginBottom: theme.spacing(2),
fontSize: 'unset',
},
},
authors: {
textAlign: 'center',
},
linkAuthor: {
color: theme.palette.text.secondary,
},
}));

export function About() {
const classes = useStyles();

return (
<>
<div style={{textAlign: 'center'}}>
<AppLogoIcon className={classes.logo} />
</div>
<Container maxWidth="md" className={classes.citeContainer}>
<Typography variant="h3" className={classes.subtitle}>Cite EnrichmentMap</Typography>
<Typography variant="body1" color="textSecondary" className={classes.description}>
To cite this app in a paper, for now, please cite this Nature Protocols article &#40;an article specific to this app will be published shortly&#41;:
</Typography>
<Citation />
</Container>
<Container maxWidth="md" className={classes.authorsContainer}>
<Typography variant="body2" color="textSecondary" className={classes.authors}>
EnrichmentMap is authored by:&nbsp;&nbsp;
<Link href="https://github.com/maxkfranz" className={classes.linkAuthor} {...linkoutProps}>Max Franz</Link>,&nbsp;&nbsp;
<Link href="https://github.com/mikekucera" className={classes.linkAuthor} {...linkoutProps}>Mike Kucera</Link>,&nbsp;&nbsp;
<Link href="https://github.com/chrtannus"className={classes.linkAuthor} {...linkoutProps}>Christian Lopes</Link>,&nbsp;&nbsp;
<Link href="https://baderlab.org" className={classes.linkAuthor} {...linkoutProps}>Gary Bader</Link>.
</Typography>
</Container>
</>
);
}

export default About;
63 changes: 20 additions & 43 deletions src/client/components/home/citation.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,83 +8,60 @@ import FormatQuoteIcon from '@material-ui/icons/FormatQuote';


const useStyles = makeStyles((theme) => ({
cite: {
container: {
marginTop: 0,
padding: theme.spacing(1, 4, 2, 6),
maxWidth: 660,
maxWidth: 800,
textAlign: 'left',
fontFamily: 'Monaco,Courier New,Monospace',
overflow: 'hidden',
textOverflow: 'ellipsis',
backgroundColor: theme.palette.background.accent,
borderRadius: 18,
backgroundColor: theme.palette.background.paper,
border: `1px solid ${theme.palette.text.accent}`,
borderRadius: 16,
[theme.breakpoints.down('sm')]: {
marginTop: theme.spacing(2),
},
[theme.breakpoints.down('xs')]: {
marginTop: theme.spacing(4),
padding: theme.spacing(0.5, 1, 1, 4),
maxWidth: '90%',
},
},
citeLogo: {
icon: {
position: 'absolute',
color: theme.palette.text.accent,
marginTop: theme.spacing(-0.5),
marginLeft: theme.spacing(-5),
width: 30,
height: 30,
[theme.breakpoints.down('sm')]: {
marginLeft: theme.spacing(-3.5),
},
},
citeText: {
marginTop: theme.spacing(2),
fontSize: '0.85rem',
color: theme.palette.text.secondary,
filter: 'opacity(80%)',
},
citeTextAuthors: {
text: {
marginTop: theme.spacing(2),
fontSize: '0.85rem',
color: theme.palette.text.secondary,
textAlign: 'center',
width: '100%'
},
citeLink: {
color: theme.palette.text.secondary,
},
citeLinkAuthor: {
link: {
color: theme.palette.text.secondary,
},
}));

function EasyCitation() {
function Citation() {
const classes = useStyles();

// Note: This text is also included in the README.md file that's part of the data export.
// IMPORTANT: This text is also included in the README.md file that's part of the data export.
// If you change the text here it needs to be changed there as well.
return (
<Grid container direction="column" alignItems="center">
<Container className={classes.cite}>
<FormatQuoteIcon className={classes.citeLogo} />
<Typography className={classes.citeText}>
To cite this app in a paper, for now, please cite this Nature Protocols article (an article specific to this app will be published shortly):
&nbsp;&nbsp;
<Link className={classes.citeLink} href="https://doi.org/10.1038/s41596-018-0103-9" {...linkoutProps}>
<Container className={classes.container}>
<FormatQuoteIcon className={classes.icon} />
<Typography variant="body2" className={classes.text}>
<Link className={classes.link} href="https://doi.org/10.1038/s41596-018-0103-9" {...linkoutProps}>
Reimand, J., Isserlin, R., ..., Bader, G. &nbsp;
Pathway enrichment analysis and visualization of omics data using g:Profiler, GSEA, Cytoscape and EnrichmentMap.&nbsp;
Nat Protoc 14, 482–517 (2019).
</Link>&nbsp;
</Typography>
</Container>
<Container>
<Typography className={classes.citeTextAuthors}>
<span>App authored by: </span>
<Link href="https://github.com/maxkfranz" className={classes.citeLinkAuthor}>Max Franz</Link><span>, </span>
<Link href="https://github.com/mikekucera" className={classes.citeLinkAuthor}>Mike Kucera</Link><span>, </span>
<Link href="https://github.com/chrtannus"className={classes.citeLinkAuthor} >Christian Lopes</Link><span>, </span>
<span>..., </span>
<Link href="https://baderlab.org" className={classes.citeLinkAuthor}>Gary Bader</Link>
</Typography>
</Container>
</Grid>
);
}

export default EasyCitation;
export default Citation;
Loading

0 comments on commit c6a22d2

Please sign in to comment.