Allow easy downloads of Stats page tables

broadinstitute · Oct 30, 2023 · d7969ef · d7969ef
1 parent 2c557c7
commit d7969ef
Show file tree

Hide file tree

Showing 8 changed files with 1,255 additions and 1,084 deletions.
diff --git a/browser/package.json b/browser/package.json
@@ -30,6 +30,7 @@
     "d3-scale": "^2.2.2",
     "d3-shape": "^1.3.5",
     "glob": "^7.1.3",
+    "html2canvas": "^1.4.1",
     "igv": "^2.1.0",
     "js-worker-search": "^1.4.0",
     "lodash-es": "^4.17.21",

diff --git a/browser/src/StatsPage/StatsPage.tsx b/browser/src/StatsPage/StatsPage.tsx
@@ -307,6 +307,7 @@ const StatsPage = () => {
 
           <ResponsiveTable style={{ marginBottom: '3em' }}>
             <GeneticAncestryGroupsByVersionTable />
+            {/* <button onClick={downloadTableAsPNG}>Download Image</button> */}
           </ResponsiveTable>
 
           <DiversityBarGraphContainer style={{ marginBottom: '1em' }}>

diff --git a/browser/src/StatsPage/StatsPageTables/GeneticAncestryGroupsByVersionTable.tsx b/browser/src/StatsPage/StatsPageTables/GeneticAncestryGroupsByVersionTable.tsx
@@ -1,6 +1,9 @@
 import React from 'react'
 
+import { Button } from '@gnomad/ui'
+
 import {
+  downloadTableAsPNG,
   StatsTable,
   StatsTableHeaderRow,
   StatsTableSubHeaderRow,
@@ -9,10 +12,12 @@ import {
   StatsTableFooter,
 } from './TableStyles'
 
-const V4GeneticAncestryTable = () => {
+const GeneticAncestryGroupsByVersionTable = () => {
+  const elementID = 'gnomad-genetic-ancestry-group-size-by-version-table'
+
   return (
-    <>
-      <StatsTable>
+    <div>
+      <StatsTable id={elementID} style={{ marginBottom: '3em' }}>
         <thead>
           <StatsTableHeaderRow>
             <th>&nbsp;</th>
@@ -126,8 +131,11 @@ const V4GeneticAncestryTable = () => {
           </div>
         </StatsTableCaption>
       </StatsTable>
-    </>
+      <div>
+        <Button onClick={() => downloadTableAsPNG(elementID)}>Download Table</Button>
+      </div>
+    </div>
   )
 }
 
-export default V4GeneticAncestryTable
+export default GeneticAncestryGroupsByVersionTable
diff --git a/browser/src/StatsPage/StatsPageTables/StudyDiseasesInGnomadTable.tsx b/browser/src/StatsPage/StatsPageTables/StudyDiseasesInGnomadTable.tsx
@@ -1,6 +1,9 @@
 import React from 'react'
 
+import { Button } from '@gnomad/ui'
+
 import {
+  downloadTableAsPNG,
   StatsTable,
   StatsTableHeaderRow,
   StatsTableBody,
@@ -9,9 +12,11 @@ import {
 } from './TableStyles'
 
 const StudyDiseasesInGnomadTable = () => {
+  const elementID = 'study-diseases-in-gnomad-table'
+
   return (
-    <>
-      <StatsTable>
+    <div>
+      <StatsTable id={elementID} style={{ marginBottom: '3em' }}>
         <thead>
           <StatsTableHeaderRow>
             <th>Phenotypes</th>
@@ -133,8 +138,8 @@ const StudyDiseasesInGnomadTable = () => {
 
         <StatsTableCaption>
           <div>
-            * This category includes: GTEx, 1KG, UKBB, and the Qatar Genome Project, as well as
-            theFinnGen and MGB biobank samples when no phenotype was specified
+            * This category includes: GTEx, 1KG, UKBB, and the Qatar Genome Project, as well as the
+            FinnGen and MGB biobank samples when no phenotype was specified
           </div>
           <div>
             {' '}
@@ -147,7 +152,10 @@ const StudyDiseasesInGnomadTable = () => {
           </div>
         </StatsTableCaption>
       </StatsTable>
-    </>
+      <div>
+        <Button onClick={() => downloadTableAsPNG(elementID)}>Download Table</Button>
+      </div>
+    </div>
   )
 }
 

diff --git a/browser/src/StatsPage/StatsPageTables/TableStyles.tsx b/browser/src/StatsPage/StatsPageTables/TableStyles.tsx
@@ -1,9 +1,25 @@
+import html2canvas from 'html2canvas'
 import styled from 'styled-components'
 
+export const downloadTableAsPNG = (elementID: string) => {
+  const table = document.getElementById(elementID)
+
+  if (table) {
+    html2canvas(table).then((canvas) => {
+      const link = document.createElement('a')
+      link.download = `${elementID}.png`
+      link.href = canvas.toDataURL('image/png')
+      link.click()
+    })
+  }
+}
+
 export const StatsTable = styled.table`
   border-collapse: collapse;
   min-width: 400px;
   font-size: 0.9em;
+  /* non-zero letter spacing fixes html2canvas rendering errors */
+  letter-spacing: 0.01px;
 
   th,
   td {

diff --git a/browser/src/StatsPage/StatsPageTables/V4GeneticAncestryTable.tsx b/browser/src/StatsPage/StatsPageTables/V4GeneticAncestryTable.tsx
@@ -1,17 +1,22 @@
 import React from 'react'
 
+import { Button } from '@gnomad/ui'
+
 import {
+  downloadTableAsPNG,
   StatsTable,
   StatsTableHeaderRow,
   StatsTableSubHeaderRow,
   StatsTableBody,
   StatsTableCaption,
 } from './TableStyles'
 
-const GeneticAncestryGroupsByVersionTable = () => {
+const V4GeneticAncestryTable = () => {
+  const elementID = 'gnomad-v4-genetic-ancestry-group-size-table'
+
   return (
-    <>
-      <StatsTable>
+    <div>
+      <StatsTable id={elementID} style={{ marginBottom: '3em' }}>
         <thead>
           <StatsTableHeaderRow>
             <th style={{ width: '15%' }}>Imputed Genetic Ancestry Group for v4</th>
@@ -235,12 +240,15 @@ const GeneticAncestryGroupsByVersionTable = () => {
           <br />
           <div>
             These labels are also a mix of researcher assigned, sometimes participant self reported.
-            Non of these labels are used for training our imputed ancestry data.
+            None of these labels are used for training our imputed ancestry data.
           </div>
         </StatsTableCaption>
       </StatsTable>
-    </>
+      <div>
+        <Button onClick={() => downloadTableAsPNG(elementID)}>Download Table</Button>
+      </div>
+    </div>
   )
 }
 
-export default GeneticAncestryGroupsByVersionTable
+export default V4GeneticAncestryTable