Skip to content

Commit

Permalink
refactor(frontend): use iteration for genetic ancestry table
Browse files Browse the repository at this point in the history
  • Loading branch information
@rileyhgrant
rileyhgrant committed May 24, 2024
1 parent e611668 commit e69a1d5
Show file tree
Hide file tree
Showing 3 changed files with 209 additions and 86 deletions.
166 changes: 166 additions & 0 deletions browser/src/StatsPage/StatsPageTables/GeneticAncestryGroupsByVersionData.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
{
"data": [
{
"geneticAncestryGroup": "amr",
"optionalSymbol": "",
"EXaC": {
"sampleCount": 5789
},
"gnomADV2": {
"sampleCount": 17720
},
"gnomADV3": {
"sampleCount": 7647
},
"gnomADV4": {
"sampleCount": 30019,
"percentOfSamples": 3.72,
"foldIncreaseFromV2": 1.7
}
},
{
"geneticAncestryGroup": "afr",
"optionalSymbol": "",
"EXaC": {
"sampleCount": 5203
},
"gnomADV2": {
"sampleCount": 12487
},
"gnomADV3": {
"sampleCount": 20744
},
"gnomADV4": {
"sampleCount": 37545,
"percentOfSamples": 4.65,
"foldIncreaseFromV2": 3
}
},
{
"geneticAncestryGroup": "asj",
"optionalSymbol": "",
"EXaC": {
"sampleCount": 0
},
"gnomADV2": {
"sampleCount": 5185
},
"gnomADV3": {
"sampleCount": 1736
},
"gnomADV4": {
"sampleCount": 14804,
"percentOfSamples": 1.83,
"foldIncreaseFromV2": 2.9
}
},
{
"geneticAncestryGroup": "eas",
"optionalSymbol": "",
"EXaC": {
"sampleCount": 4327
},
"gnomADV2": {
"sampleCount": 9977
},
"gnomADV3": {
"sampleCount": 2604
},
"gnomADV4": {
"sampleCount": 22448,
"percentOfSamples": 2.78,
"foldIncreaseFromV2": 2.3
}
},
{
"geneticAncestryGroup": "eur",
"optionalSymbol": "^",
"EXaC": {
"sampleCount": 36667
},
"gnomADV2": {
"sampleCount": 77165
},
"gnomADV3": {
"sampleCount": 39345
},
"gnomADV4": {
"sampleCount": 622057,
"percentOfSamples": 77.07,
"foldIncreaseFromV2": 8.1
}
},
{
"geneticAncestryGroup": "mid",
"optionalSymbol": "",
"EXaC": {
"sampleCount": 0
},
"gnomADV2": {
"sampleCount": 0
},
"gnomADV3": {
"sampleCount": 158
},
"gnomADV4": {
"sampleCount": 3031,
"percentOfSamples": 0.38,
"foldIncreaseFromV2": 19.2
}
},
{
"geneticAncestryGroup": "remaining",
"optionalSymbol": "^",
"EXaC": {
"sampleCount": 454
},
"gnomADV2": {
"sampleCount": 3614
},
"gnomADV3": {
"sampleCount": 1503
},
"gnomADV4": {
"sampleCount": 31712,
"percentOfSamples": 3.93,
"foldIncreaseFromV2": 8.8
}
},
{
"geneticAncestryGroup": "sas",
"optionalSymbol": "",
"EXaC": {
"sampleCount": 8256
},
"gnomADV2": {
"sampleCount": 15308
},
"gnomADV3": {
"sampleCount": 2419
},
"gnomADV4": {
"sampleCount": 45546,
"percentOfSamples": 5.64,
"foldIncreaseFromV2": 3
}
},
{
"geneticAncestryGroup": "total",
"optionalSymbol": "",
"EXaC": {
"sampleCount": 60706
},
"gnomADV2": {
"sampleCount": 141456
},
"gnomADV3": {
"sampleCount": 76156
},
"gnomADV4": {
"sampleCount": 807162,
"percentOfSamples": 0,
"foldIncreaseFromV2": 0
}
}
]
}
121 changes: 39 additions & 82 deletions browser/src/StatsPage/StatsPageTables/GeneticAncestryGroupsByVersionTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React from 'react'

import { DownloadElementAsPNGButton } from '../DownloadFigure'

import tableData from './GeneticAncestryGroupsByVersionData.json'

import {
StatsTable,
StatsTableHeaderRow,
Expand All @@ -10,10 +12,15 @@ import {
StatsTableCaption,
StatsTableFooter,
} from './TableStyles'
import { populationName } from '@gnomad/dataset-metadata/gnomadPopulations'

const GeneticAncestryGroupsByVersionTable = () => {
const elementId = 'genetic-ancestry-group-size-by-version-table'

const renderNumberOrDash = (number: number): string => {
return number ? number.toLocaleString() : '-'
}

return (
<div>
<StatsTable id={elementId}>
Expand All @@ -36,91 +43,41 @@ const GeneticAncestryGroupsByVersionTable = () => {
</StatsTableSubHeaderRow>
</thead>
<StatsTableBody>
<tr>
<td>Admixed American</td>
<td>5,789</td>
<td>17,720</td>
<td>7,647</td>
<td>30,019</td>
<td>3.72%</td>
<td>1.7x</td>
</tr>
<tr>
<td>African</td>
<td>5,203</td>
<td>12,487</td>
<td>20,744</td>
<td>37,545</td>
<td>4.65%</td>
<td>3x</td>
</tr>
<tr>
<td>Ashkenazi Jewish</td>
<td>-</td>
<td>5,185</td>
<td>1,736</td>
<td>14,804</td>
<td>1.83%</td>
<td>2.9x</td>
</tr>
<tr>
<td>East Asian</td>
<td>4,327</td>
<td>9,977</td>
<td>2,604</td>
<td>22,448</td>
<td>2.78%</td>
<td>2.3x</td>
</tr>
<tr>
<td>European^</td>
<td>36,667</td>
<td>77,165</td>
<td>39,345</td>
<td>622,057</td>
<td>77.07%</td>
<td>8.1x</td>
</tr>
<tr>
<td>Middle Eastern</td>
<td>-</td>
<td>-</td>
<td>158</td>
<td>3,031</td>
<td>0.38%</td>
<td>19.2x</td>
</tr>
<tr>
<td>Remaining Individuals^</td>
<td>454</td>
<td>3,614</td>
<td>1,503</td>
<td>31,712</td>
<td>3.93%</td>
<td>8.8x</td>
</tr>
<tr>
<td>South Asian</td>
<td>8,256</td>
<td>15,308</td>
<td>2,419</td>
<td>45,546</td>
<td>5.64%</td>
<td>3x</td>
</tr>
{tableData.data
.filter((tableRow) => tableRow.geneticAncestryGroup !== 'total')
.map((tableRow) => {
return (
<tr>
<td>{`${populationName(tableRow.geneticAncestryGroup)}${
tableRow.optionalSymbol
}`}</td>
<td>{renderNumberOrDash(tableRow.EXaC.sampleCount)}</td>
<td>{renderNumberOrDash(tableRow.gnomADV2.sampleCount)}</td>
<td>{renderNumberOrDash(tableRow.gnomADV3.sampleCount)}</td>
<td>{renderNumberOrDash(tableRow.gnomADV4.sampleCount)}</td>
<td>{`${tableRow.gnomADV4.percentOfSamples}%`}</td>
<td>{`${tableRow.gnomADV4.foldIncreaseFromV2}x`}</td>
</tr>
)
})}
</StatsTableBody>
<StatsTableFooter>
<tr>
<td>Total</td>
<td>60,706</td>
<td>141,456</td>
<td>76,156</td>
<td>-</td>
<td>807,162</td>
<td>-</td>
</tr>
{tableData.data
.filter((tableRow) => tableRow.geneticAncestryGroup === 'total')
.map((tableRow) => {
return (
<tr>
<td>Total</td>
<td>{renderNumberOrDash(tableRow.EXaC.sampleCount)}</td>
<td>{renderNumberOrDash(tableRow.gnomADV2.sampleCount)}</td>
<td>{renderNumberOrDash(tableRow.gnomADV3.sampleCount)}</td>
<td>{renderNumberOrDash(tableRow.gnomADV4.sampleCount)}</td>
<td>-</td>
<td>-</td>
</tr>
)
})}
</StatsTableFooter>

<StatsTableCaption>
<div>*v4 includes all v3 samples.</div>
<div>
Expand Down
8 changes: 4 additions & 4 deletions browser/src/StatsPage/__snapshots__/StatsPage.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4519,7 +4519,7 @@ exports[`Stats Page has no unexpected changes 1`] = `
</tr>
<tr>
<td>
African
African/African American
</td>
<td>
5,203
Expand Down Expand Up @@ -4634,7 +4634,7 @@ exports[`Stats Page has no unexpected changes 1`] = `
</tr>
<tr>
<td>
Remaining Individuals^
Remaining^
</td>
<td>
454
Expand Down Expand Up @@ -4696,10 +4696,10 @@ exports[`Stats Page has no unexpected changes 1`] = `
76,156
</td>
<td>
-
807,162
</td>
<td>
807,162
-
</td>
<td>
-
Expand Down

0 comments on commit e69a1d5

Please sign in to comment.