feat(frontend): render add'l v4.1.1 flags on Gene page

Author: rileyhgrant

browser/src/ConstraintTable/ConstraintTable.tsx

@@ -126,7 +126,7 @@ const ConstraintTable = ({ datasetId, geneOrTranscript }: Props) => {
       {['controls', 'non_neuro', 'non_cancer', 'non_topmed'].some((subset) =>
         datasetId.includes(subset)
       ) && <p>Constraint is based on the full gnomAD dataset, not the selected subset.</p>}
-      <GnomadConstraintTable constraint={gnomadConstraint!} />
+      <GnomadConstraintTable geneFlags={geneOrTranscript.flags} constraint={gnomadConstraint!} />
       {isGene(geneOrTranscript) && (
         <p style={{ marginBottom: 0 }}>
           Constraint metrics based on {transcriptDescription} transcript (

browser/src/ConstraintTable/GnomadConstraintTable.tsx

@@ -135,6 +135,13 @@ const CONSTRAINT_FLAG_DESCRIPTIONS = {
   outlier_syn: 'More or fewer synonymous variants than expected',
 }
 
+const GENE_LEVEL_CONSTRAINT_FLAG_DESCRIPTIONS: Record<string, string> = {
+  low_exome_coverage:
+    'This gene is not well covered in the gnomAD v4.1.1 exomes. Allele frequency estimates in the exomes and gene constraint metrics may not be reliable.',
+  low_exome_mapping_quality:
+    'This gene has poor read mapping statistics in the gnomAD v4.1.1 exomes. Allele frequency estimates in the exomes and gene constraint metrics may not be reliable.',
+}
+
 export type GnomadConstraint = {
   exp_lof: number | null
   exp_mis: number | null
@@ -165,10 +172,11 @@ type OEMetricField =
   | `oe_${ConstraintFieldWithOEMetrics}_upper`
 
 type GnomadConstraintTableProps = {
+  geneFlags: string[]
   constraint: GnomadConstraint
 }
 
-const GnomadConstraintTable = ({ constraint }: GnomadConstraintTableProps) => {
+const GnomadConstraintTable = ({ geneFlags, constraint }: GnomadConstraintTableProps) => {
   let lofHighlightColor = null
   if (constraint.oe_lof_upper !== null) {
     if (constraint.oe_lof_upper < 0.33) {
@@ -284,6 +292,30 @@ const GnomadConstraintTable = ({ constraint }: GnomadConstraintTableProps) => {
           </p>
         </React.Fragment>
       )}
+
+      {geneFlags.length > 0 && (
+        <React.Fragment>
+          {geneFlags
+            .filter((flag) => flag in GENE_LEVEL_CONSTRAINT_FLAG_DESCRIPTIONS)
+            .map((flag) => {
+              let flagDescription
+              if (flag in GENE_LEVEL_CONSTRAINT_FLAG_DESCRIPTIONS) {
+                flagDescription = GENE_LEVEL_CONSTRAINT_FLAG_DESCRIPTIONS[flag]
+              } else {
+                flagDescription = (
+                  <span>
+                    Gene constraint flag: <code>{flag}</code>
+                  </span>
+                )
+              }
+              return (
+                <p key={flag} style={{ maxWidth: '460px' }}>
+                  <Badge level="info">Note</Badge> {flagDescription}
+                </p>
+              )
+            })}
+        </React.Fragment>
+      )}
     </div>
   )
 }

browser/src/GenePage/GeneInfo.tsx

@@ -6,6 +6,7 @@ import InlineList from '../InlineList'
 import Link from '../Link'
 
 import GeneReferences from './GeneReferences'
+import { Badge } from '@gnomad/ui'
 
 type ManeSelectTranscriptIdProps = {
   gene: {
@@ -66,9 +67,17 @@ type GeneInfoProps = {
       transcript_id: string
       transcript_version: string
     }[]
+    flags: string[]
   }
 }
 
+const GENE_FLAGS_TO_RENDER: Record<string, string> = {
+  low_exome_coverage:
+    'This gene is not well covered in the gnomAD v4.1.1 exomes. Allele frequency estimates in the exomes and gene constraint metrics may not be reliable.',
+  low_exome_mapping_quality:
+    'This gene has poor read mapping statistics in the gnomAD v4.1.1 exomes. Allele frequency estimates in the exomes and gene constraint metrics may not be reliable.',
+}
+
 const GeneInfo = ({ gene }: GeneInfoProps) => {
   const canonicalTranscript = gene.canonical_transcript_id
     ? gene.transcripts.find(
@@ -152,6 +161,16 @@ const GeneInfo = ({ gene }: GeneInfoProps) => {
       <AttributeListItem label="External resources">
         <GeneReferences gene={gene} />
       </AttributeListItem>
+
+      {gene.flags
+        .filter((flag) => flag in GENE_FLAGS_TO_RENDER)
+        .map((flag) => {
+          return (
+            <p>
+              <Badge level="warning">Warning</Badge> {GENE_FLAGS_TO_RENDER[flag]}
+            </p>
+          )
+        })}
     </AttributeList>
   )
 }