Update v4 variant page to display fraction coverage

broadinstitute · Nov 1, 2023 · 45eabb3 · 45eabb3
1 parent ff35d8f
commit 45eabb3
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 15 deletions.
diff --git a/browser/src/VariantPage/VariantOccurrenceTable.tsx b/browser/src/VariantPage/VariantOccurrenceTable.tsx
@@ -7,7 +7,7 @@ import { Badge, TooltipAnchor, TooltipHint } from '@gnomad/ui'
 import { GNOMAD_POPULATION_NAMES } from '@gnomad/dataset-metadata/gnomadPopulations'
 import sampleCounts from '@gnomad/dataset-metadata/sampleCounts'
 
-import { DatasetId, labelForDataset } from '@gnomad/dataset-metadata/metadata'
+import { DatasetId, labelForDataset, isV4 } from '@gnomad/dataset-metadata/metadata'
 import InfoButton from '../help/InfoButton'
 import Link from '../Link'
 import QCFilter from '../QCFilter'
@@ -220,8 +220,14 @@ export const GnomadVariantOccurrenceTable = ({
   const genomeHemizygoteCount = isPresentInGenome ? variant.genome.ac_hemi : 0
   const totalHemizygoteCount = exomeHemizygoteCount + genomeHemizygoteCount
 
-  const exomeCoverage = (variant.coverage.exome || { mean: null }).mean
-  const genomeCoverage = (variant.coverage.genome || { mean: null }).mean
+  const exomeCoverage = {
+    mean: (variant.coverage.exome || { mean: null }).mean,
+    over30: (variant.coverage.exome || { over_30: null }).over_30,
+  }
+  const genomeCoverage = {
+    mean: (variant.coverage.genome || { mean: null }).mean,
+    over30: (variant.coverage.genome || { over_30: null }).over_30,
+  }
 
   // Display a warning if a variant's AN is < 50% of the max AN for exomes/genomes.
   // Max AN is 2 * sample count, so 50% max AN is equal to sample count.
@@ -411,18 +417,47 @@ export const GnomadVariantOccurrenceTable = ({
               {showTotal && <td>{totalHemizygoteCount}</td>}
             </tr>
           )}
-          <tr>
-            <th scope="row">
-              {/* @ts-expect-error TS(2322) FIXME: Type '{ children: Element; tooltip: string; }' is ... Remove this comment to see the full error message */}
-              <TooltipAnchor tooltip="Mean depth of coverage at this variant's locus">
-                {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
-                <TooltipHint>Mean depth of coverage</TooltipHint>
-              </TooltipAnchor>
-            </th>
-            {showExomes && <td>{exomeCoverage !== null ? exomeCoverage.toFixed(1) : '–'}</td>}
-            {showGenomes && <td>{genomeCoverage !== null ? genomeCoverage.toFixed(1) : '–'}</td>}
-            {showTotal && <td />}
-          </tr>
+          {!isV4(datasetId) && (
+            <tr>
+              <th scope="row">
+                {/* @ts-expect-error TS(2322) FIXME: Type '{ children: Element; tooltip: string; }' is ... Remove this comment to see the full error message */}
+                <TooltipAnchor tooltip="Mean depth of coverage at this variant's locus">
+                  {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
+                  <TooltipHint>Mean depth of coverage</TooltipHint>
+                </TooltipAnchor>
+              </th>
+              {showExomes && (
+                <td>{exomeCoverage.mean !== null ? exomeCoverage.mean.toFixed(1) : '–'}</td>
+              )}
+              {showGenomes && (
+                <td>{genomeCoverage.mean !== null ? genomeCoverage.mean.toFixed(1) : '–'}</td>
+              )}
+              {showTotal && <td />}
+            </tr>
+          )}
+          {isV4(datasetId) && (
+            <tr>
+              <th scope="row">
+                {/* @ts-expect-error TS(2322) FIXME: Type '{ children: Element; tooltip: string; }' is ... Remove this comment to see the full error message */}
+                <TooltipAnchor tooltip="Fraction of individuals with >30x coverage at this variant's locus">
+                  {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
+                  <TooltipHint>Fraction of individuals with &gt;30x coverage</TooltipHint>
+                </TooltipAnchor>
+              </th>
+              {/* TODO: this logic can be extracted into a helper, and cleaned for clarity, todo after V4 mvp launch */}
+              {variant.exome ? (
+                <td>{exomeCoverage.over30 !== null ? exomeCoverage.over30.toFixed(1) : '–'}</td>
+              ) : (
+                <td />
+              )}
+              {variant.genome ? (
+                <td>{genomeCoverage.over30 !== null ? genomeCoverage.over30.toFixed(1) : '–'}</td>
+              ) : (
+                <td />
+              )}
+              {showTotal && <td />}
+            </tr>
+          )}
         </tbody>
       </Table>
       {(hasLowAlleleNumberInExomes || hasLowAlleleNumberInGenomes) && (

diff --git a/browser/src/VariantPage/VariantPage.tsx b/browser/src/VariantPage/VariantPage.tsx
@@ -460,9 +460,11 @@ query ${operationName}($variantId: String!, $datasetId: DatasetId!, $referenceGe
     coverage {
       exome {
         mean
+        over_30
       }
       genome {
         mean
+        over_30
       }
     }
     multi_nucleotide_variants {
-Original file line number
+Diff line change
@@ Expand Up @@
         coverage {
           exome {
             mean
+            over_30
           }
           genome {
             mean
+            over_30
           }
         }
         multi_nucleotide_variants {
@@ Expand Down @@