Add Stats page

browser/src/Legend.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components'
 
 const LegendWrapper = styled.ul`
   display: flex;
+  flex-wrap: wrap;
   flex-direction: row;
   padding: 0;
   margin: 0 1em 0 0;
@@ -11,11 +12,7 @@ const LegendWrapper = styled.ul`
 
 const LegendItem = styled.li`
   display: flex;
-  margin-left: 1em;
-
-  &:first-child {
-    margin-left: 0;
-  }
+  margin: 0 1em 0.33em 0;
 `
 
 type LegendSwatchProps = {

browser/src/NavBar.tsx

@@ -109,25 +109,30 @@ const NavBar = () => {
             Team
           </Link>
         </li>
+        <li>
+          <Link to="/stats" onClick={closeMenu}>
+            Stats
+          </Link>
+        </li>
         {/* two <a> tags instead of <Link>s because the blog is a separate application */}
         <li>
-        <Link to="/policies" onClick={closeMenu}>
+          <Link to="/policies" onClick={closeMenu}>
             Policies
           </Link>
         </li>
         <li>
-        <Link to="/publications" onClick={closeMenu}>
+          <Link to="/publications" onClick={closeMenu}>
             Publications
           </Link>
         </li>
         <li>
-        <a href="https://gnomad.broadinstitute.org/news/">Blog</a>
+          <a href="https://gnomad.broadinstitute.org/news/">Blog</a>
         </li>
         <li>
           <a href="https://gnomad.broadinstitute.org/news/changelog/">Changelog</a>
         </li>
         <li>
-        <Link to="/downloads" onClick={closeMenu}>
+          <Link to="/downloads" onClick={closeMenu}>
             Downloads
           </Link>
         </li>

browser/src/Routes.tsx

@@ -16,6 +16,7 @@ const HelpPage = lazy(() => import('./help/HelpPage'))
 const HelpTopicPage = lazy(() => import('./help/HelpTopicPage'))
 const HomePage = lazy(() => import('./HomePage'))
 const MOUPage = lazy(() => import('./MOUPage'))
+const StatsPage = lazy(() => import('./StatsPage/StatsPage'))
 const PublicationsPage = lazy(() => import('./PublicationsPage'))
 const PoliciesPage = lazy(() => import('./PoliciesPage'))
 
@@ -167,6 +168,8 @@ const Routes = () => {
 
       <Route exact path="/mou" component={MOUPage} />
 
+      <Route exact path="/stats" component={StatsPage} />
+
       <Route
         exact
         path="/faq"

browser/src/StatsPage/BarGraphData/gnomADExomeGenomeCountsByVersion.json

@@ -0,0 +1,12 @@
+{
+  "colors": {
+    "Exomes": "#0e6fbf",
+    "Genomes": "#508a14"
+  },
+  "data": [
+    { "label": "ExAC", "Exomes": 60706, "Genomes": 0 },
+    { "label": "gnomAD v2", "Exomes": 125758, "Genomes": 15708 },
+    { "label": "gnomAD v3", "Exomes": 0, "Genomes": 76156 },
+    { "label": "gnomAD v4", "Exomes": 730947, "Genomes": 76215 }
+  ]
+}

browser/src/StatsPage/BarGraphData/gnomadV4GeneticAncestryCounts.json

@@ -0,0 +1,59 @@
+{
+  "colors": {
+    "East Asian": "#0e8b45",
+    "South Asian": "#ff9a10",
+    "Middle Eastern": "#050080",
+    "African": "#931193",
+    "Admixed American": "#ed1e23",
+    "Ashkenazi Jewish": "#edc800",
+    "European": "#6aa5ce",
+    "Remaining": "#acb8b9"
+  },
+  "data": [
+    {
+      "label": "ExAC",
+      "East Asian": 4327,
+      "South Asian": 8256,
+      "Middle Eastern": 0,
+      "African": 5203,
+      "Admixed American": 5789,
+      "Ashkenazi Jewish": 0,
+      "Remaining": 454,
+      "European": 36677
+    },
+    {
+      "label": "gnomAD v2",
+      "East Asian": 9977,
+      "South Asian": 15308,
+      "Middle Eastern": 0,
+      "African": 12487,
+      "Admixed American": 17720,
+      "Ashkenazi Jewish": 5185,
+      "Remaining": 3614,
+      "European": 77165
+    },
+    {
+      "label": "gnomAD v3",
+      "East Asian": 2604,
+      "South Asian": 2419,
+      "Middle Eastern": 158,
+      "African": 20744,
+      "Admixed American": 7647,
+      "Ashkenazi Jewish": 1736,
+      "Remaining": 1503,
+      "European": 39345
+    },
+
+    {
+      "label": "gnomAD v4",
+      "East Asian": 19850,
+      "South Asian": 43129,
+      "Middle Eastern": 2884,
+      "African": 16740,
+      "Admixed American": 22362,
+      "Ashkenazi Jewish": 13068,
+      "Remaining": 30198,
+      "European": 582716
+    }
+  ]
+}

browser/src/StatsPage/BarGraphData/gnomadV4GeneticDiversityCounts.json

@@ -0,0 +1,36 @@
+{
+  "colors": {
+    "East Asian": "#0e8b45",
+    "South Asian": "#ff9a10",
+    "European": "#6aa5ce",
+    "Middle Eastern": "#050080",
+    "African": "#931193",
+    "Admixed American": "#ed1e23",
+    "Ashkenazi Jewish": "#edc800",
+    "Remaining": "#acb8b9"
+  },
+  "data": [
+    {
+      "label": "gnomAD v2",
+      "East Asian": 600,
+      "South Asian": 750,
+      "European": 450,
+      "Middle Eastern": 0,
+      "African": 1350,
+      "Admixed American": 750,
+      "Ashkenazi Jewish": 350,
+      "Remaining": 1500
+    },
+    {
+      "label": "gnomAD v4",
+      "East Asian": 2000,
+      "South Asian": 3000,
+      "European": 2000,
+      "Middle Eastern": 3000,
+      "African": 4000,
+      "Admixed American": 3500,
+      "Ashkenazi Jewish": 1150,
+      "Remaining": 3500
+    }
+  ]
+}

browser/src/StatsPage/NumberOfVariantsInGnomadList.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  margin-left: 2rem;
+`
+
+const Section = styled.div`
+  margin-bottom: 1em;
+`
+
+const SectionHeader = styled.div`
+  font-size: 1.1em;
+  font-weight: bold;
+`
+
+const SectionList = styled.ul`
+  margin-top: 0.5em;
+
+  li {
+    margin-bottom: 0.5em;
+  }
+`
+
+const NumberOfVariantsInGnomadList = () => {
+  return (
+    <Container>
+      <Section>
+        <SectionHeader>Short variants</SectionHeader>
+        <SectionList>
+          <li>Total SNVs: 786,500,648</li>
+          <li>Total InDels: 122,583,462</li>
+          <li>
+            Variant type totals
+            <SectionList>
+              <li>Synonymous: 9,643,254</li>
+              <li>Missense: 16,412,219</li>
+              <li>Nonsense: 726,924</li>
+              <li>Frameshift: 1,186,588</li>
+              <li>Canonical splice site: 542,514</li>
+            </SectionList>
+          </li>
+        </SectionList>
+      </Section>
+      <Section>
+        <SectionHeader>Structural variants</SectionHeader>
+        <SectionList>
+          <li>
+            1,199,106 genome SVs
+            <SectionList>
+              <li>627,942 Depletions</li>
+              <li>258,876 Duplications</li>
+              <li>711 CNVs</li>
+              <li>296,184 Insertions</li>
+              <li>2,185 Inversersions</li>
+              <li>13,116 Complex</li>
+              <li>92 Canonical recriprocal translocations</li>
+            </SectionList>
+          </li>
+          <li>
+            {`66,826 rare (<1% AF) exome CNVs`}
+            <SectionList>
+              <li>30,855 Deletions</li>
+              <li>35,971 Duplications</li>
+            </SectionList>
+          </li>
+        </SectionList>
+      </Section>
+      <Section>
+        <SectionHeader>Average number of variants per person</SectionHeader>
+        <SectionList>
+          <li>
+            SNVs per person (<i>coming soon</i>)
+            <SectionList>
+              <li>On average we see 2 SNVs every 3 base pairs</li>
+            </SectionList>
+          </li>
+          <li>{`1 rare (<1% AF) coding CNV per individual`}</li>
+          <li>11,844 SVs per genome</li>
+        </SectionList>
+      </Section>
+    </Container>
+  )
+}
+
+export default NumberOfVariantsInGnomadList