Merge pull request #44 from sanger-pathogens/feature/collapsible-rese…

…arch-themes

src/components/Collapsible.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import Card from "@material-ui/core/Card";
+import Collapse from "@material-ui/core/Collapse";
+import CardHeader from "@material-ui/core/CardHeader";
+import CardContent from "@material-ui/core/CardContent";
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
+import IconButton from "@material-ui/core/IconButton";
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles'
+
+
+const useStyles = makeStyles(() => ({
+    cardHeaderAction: {
+        margin: "auto"
+    }
+}));
+
+
+const Collapsible = (props) => {
+    const [open, setOpen] = useState(false);
+
+    const classes = useStyles()
+
+    return (
+        <>
+            <Card elevation={0}>
+                <CardHeader
+                    title={<Typography style={{ fontStyle: 'italic' }} variant={"h5"}>{props.title}</Typography>}
+                    onClick={() => setOpen(!open)}
+                    action={
+                        <IconButton>
+                            {open ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+                        </IconButton>
+                    }
+                    avatar={
+                        <Avatar 
+                            src={props.logo}
+                            style={{ width: '100px', height: '100px' }}
+                        />
+                    }
+                    classes={{
+                        action: classes.cardHeaderAction
+                    }}
+                ></CardHeader>
+
+                <Collapse in={open} timeout="auto" unmountOnExit>
+                    <CardContent>
+                        <Typography align={"justify"}>{props.children}</Typography>
+                    </CardContent>
+                </Collapse>
+            </Card>
+        </>
+    );
+}
+
+export default Collapsible

src/components/Markdown.js

@@ -9,7 +9,7 @@ const renderers = {
       {children}
     </Typography>
   ),
-  image: props => <img {...props} width="250px" />,
+  image: props => <img {...props} width="250px" alt='No description'/>,
   link: props => <Link {...props} target="_blank" rel="noopener noreferrer" />,
 };
 

src/components/Outreach.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import raw from 'raw.macro';
-import { Grid, Box, Typography, Link } from '@material-ui/core';
+import { Grid, Box, Link } from '@material-ui/core';
 
 import outreach from '../content/outreach';
-import Markdown from './Markdown';
 import TeamDescriptionRenderer from './TeamDescriptionRenderer';
 
 const Item = ({ title, url, description, image }) => (

src/components/ResearchThemes.js

@@ -2,11 +2,28 @@ import React from 'react';
 import raw from 'raw.macro';
 
 import Markdown from './Markdown';
+import Collapsible from './Collapsible';
 
-const mdResearchThemes = raw('../content/research-themes.md');
+const mdResearchIntro = raw('../content/research-intro.md');
+const mdResearchGPS = raw('../content/research-gps.md');
+const mdResearchJUNO = raw('../content/research-juno.md');
+const mdResearchMeningococcus = raw('../content/research-meningococcus.md');
 
 const ResearchThemes = () => {
-  return <Markdown md={mdResearchThemes} />;
+  return (
+    <div>
+      <Markdown md={mdResearchIntro} />
+      <Collapsible title='Streptococcus pneumoniae' logo='logos/gps-logo.png'>
+        <Markdown md={mdResearchGPS} />
+      </Collapsible>
+      <Collapsible title='Streptococcus agalactiae' logo='logos/juno-logo.png'>
+        <Markdown md={mdResearchJUNO} />
+      </Collapsible>
+      <Collapsible title='Neisseria meningitidis' logo='logos/meningococcus.png'>
+        <Markdown md={mdResearchMeningococcus} />
+      </Collapsible>
+    </div>
+  );
 };
 
 export default ResearchThemes;

src/content/research-gps.md

@@ -0,0 +1 @@
+*Streptococcus pneumoniae* naturally colonises the nasopharynx of healthy individuals but can cause serious invasive diseases such as bacteremia and meningitis and is the leading cause of bacterial pneumonia. Through the [Global Pneumococcal Sequencing Project](https://www.pneumogen.net/) we have worked with partners from >50 countries to a develop a database of >25,000 genomes representing pneumococcal populations in >60 countries before and after the global rollout of pneumococcal conjugate vaccines. Data from GPS is being used to identify future high-risk strains and to design future vaccine formulations that will reduce the burden of disease and antibiotic resistance. Through collaborations with [Paul Turner](https://www.tropmedres.ac/team/paul-turner) and colleagues in South East Asia and [Felix Dube](http://www.mcb.uct.ac.za/mcb/people/staff/academic/felix-dube) and colleagues in South Africa we are using genomics to study microevolution during carriage and transmission in densely sampled human populations. We hope these studies will uncover the selective processes at play, particularly during disease episodes and antibiotic treatment.

src/content/research-intro.md

@@ -0,0 +1,6 @@
+Infectious disease is one of the leading causes of mortality in children under five*. Large-scale genome sequencing, open access data and increasing collaborative networks are enhancing our ability to tackle the challenges of infectious disease from a global standpoint. Through multiple large-scale projects, we aim to understand the evolution of bacterial pathogens associated with pneumonia, meningitis and neonatal sepsis providing global context with a focus on high disease burden in resource-poor settings.
+
+*[World Health Organization](https://www.who.int/gho/child_health/mortality/causes/en/)
+
+
+#### Our priority pathogens

src/content/research-juno.md

@@ -0,0 +1 @@
+*Streptococcus agalactiae* (aka Group B Streptococcus or GBS) is an opportunistic pathogen and a major cause of neonatal invasive disease, with a particular impact on infant mortality in low and middle-income countries (LMICs), where disease prevention strategies are less often implemented or have low coverage. Through the [JUNO](https://www.gbsgen.net/) project are conducting a global genomic survey of GBS isolates from across a broad geographical and temporal span with the central aim of informing vaccine development and other disease intervention strategies. The project will focus on three key areas of GBS biology: global genomic diversity, genetic associations with the disease and transmission.

src/content/research-meningococcus.md

@@ -0,0 +1,3 @@
+*Neisseria meningitidis* is found exclusively in humans and is a leading cause of bacterial meningitis and septicaemia. Meningococcal infections are difficult to treat and have a high case fatality rate but, as with the pneumococcus, colonisation is normally asymptomatic. The meningococcus has a substantial disease burden in the meningitis belt of sub-Saharan Africa, where the incidence of infection and disease are much higher than other regions of the world. We work with numerous collaborators to study several population genomic datasets of *N. meningitidis* including a large carriage collection from [Burkina Faso](https://www.ncbi.nlm.nih.gov/pubmed/23914778) (with [Dominique Caugant](http://www.menafrinet.org/en-us/Who/Advisory-Board)), the [MenAfriCar](https://www.thelancet.com/journals/laninf/article/PIIS1473-3099(17)30301-8/fulltext) meningitis belt carriage surveillance project, and a global collection of carriage and disease isolates with considerable temporal spread. Through these studies we hope to understand the evolution that leads to meningococcal disease epidemics in the Meningitis Belt and help to inform future vaccine intervention strategies worldwide.
+
+*Image: Arthur Charles-Orszag, [Neisseria meningitidis](https://commons.wikimedia.org/wiki/File:Neisseria_meningitidis_Charles-Orszag_2018.png), [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/legalcode)*