Add transcript link below mito constraint table

broadinstitute · Feb 26, 2025 · cf33d8c · cf33d8c
1 parent 5c52b3c
commit cf33d8c
Show file tree

Hide file tree

Showing 3 changed files with 5,244 additions and 4,601 deletions.
diff --git a/browser/src/ConstraintTable/ConstraintTable.tsx b/browser/src/ConstraintTable/ConstraintTable.tsx
@@ -68,7 +68,12 @@ const ConstraintTable = ({ datasetId, geneOrTranscript }: Props) => {
 
   if (geneOrTranscript.chrom === 'M') {
     if (isGene(geneOrTranscript)) {
-      return <MitochondrialConstraintTable constraint={geneOrTranscript.mitochondrial_constraint} />
+      return (
+        <MitochondrialConstraintTable
+          constraint={geneOrTranscript.mitochondrial_constraint}
+          transcript={geneOrTranscript.transcripts[0]}
+        />
+      )
     }
     return <p>Constraint is not available for mitochondrial transcripts</p>
   }

diff --git a/browser/src/ConstraintTable/MitochondrialConstraintTable.tsx b/browser/src/ConstraintTable/MitochondrialConstraintTable.tsx
@@ -3,8 +3,10 @@ import {
   MitochondrialGeneConstraint,
   ProteinMitochondrialGeneConstraint,
   RNAMitochondrialGeneConstraint,
+  GeneTranscript,
 } from '../GenePage/GenePage'
 import { BaseTable, TooltipAnchor } from '@gnomad/ui'
+import Link from '../Link'
 import { ConstraintHighlight } from './constraintMetrics'
 
 const isProteinMitochondrialGeneConstraint = (
@@ -138,45 +140,57 @@ const RNAConstraintMetrics = ({ constraint }: { constraint: RNAMitochondrialGene
 
 const MitochondrialConstraintTable = ({
   constraint,
+  transcript,
 }: {
   constraint: MitochondrialGeneConstraint | null
+  transcript: GeneTranscript | null
 }) => {
   if (constraint === null) {
     return <p>Constraint is not available on this gene</p>
   }
 
   return (
-    // @ts-expect-error
-    <BaseTable>
-      <thead>
-        <tr>
-          <th scope="col">Category</th>
-          <th scope="col">
-            {' '}
-            <>
-              {/* @ts-expect-error */}
-              <TooltipAnchor tooltip="Sum of maximum heteroplasmy of expected SNVs in gene">
-                <span>Expected</span>
-              </TooltipAnchor>
-            </>
-          </th>
-          <th scope="col">
-            <>
-              {/* @ts-expect-error */}
-              <TooltipAnchor tooltip="Sum of maximum heteroplasmy of observed SNVs in gene">
-                <span>Observed</span>
-              </TooltipAnchor>
-            </>
-          </th>
-          <th scope="col">Constraint metrics</th>
-        </tr>
-      </thead>{' '}
-      {isProteinMitochondrialGeneConstraint(constraint) ? (
-        <ProteinConstraintMetrics constraint={constraint} />
-      ) : (
-        <RNAConstraintMetrics constraint={constraint} />
+    <>
+      {/* @ts-expect-error */}
+      <BaseTable>
+        <thead>
+          <tr>
+            <th scope="col">Category</th>
+            <th scope="col">
+              {' '}
+              <>
+                {/* @ts-expect-error */}
+                <TooltipAnchor tooltip="Sum of maximum heteroplasmy of expected SNVs in gene">
+                  <span>Expected</span>
+                </TooltipAnchor>
+              </>
+            </th>
+            <th scope="col">
+              <>
+                {/* @ts-expect-error */}
+                <TooltipAnchor tooltip="Sum of maximum heteroplasmy of observed SNVs in gene">
+                  <span>Observed</span>
+                </TooltipAnchor>
+              </>
+            </th>
+            <th scope="col">Constraint metrics</th>
+          </tr>
+        </thead>
+        {isProteinMitochondrialGeneConstraint(constraint) ? (
+          <ProteinConstraintMetrics constraint={constraint} />
+        ) : (
+          <RNAConstraintMetrics constraint={constraint} />
+        )}
+      </BaseTable>
+      {transcript !== null && (
+        <>
+          Constraint metrics based on transcript{' '}
+          <Link to={`/transcript/${transcript.transcript_id}`}>
+            {transcript.transcript_id}.{transcript.transcript_version}
+          </Link>
+        </>
       )}
-    </BaseTable>
+    </>
   )
 }