Skip to content

Commit

Permalink
wip(browser): updates types to appease tsc
Browse files Browse the repository at this point in the history
  • Loading branch information
@rileyhgrant
rileyhgrant committed Oct 16, 2024
1 parent aaba7db commit 3078c3a
Show file tree
Hide file tree
Showing 8 changed files with 199 additions and 192 deletions.
59 changes: 35 additions & 24 deletions browser/src/GenePage/GenePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
isExac,
hasCopyNumberVariants,
isV2,
getTopLevelDataset,
} from '@gnomad/dataset-metadata/metadata'
import ConstraintTable from '../ConstraintTable/ConstraintTable'
import VariantCooccurrenceCountsTable, {
Expand Down Expand Up @@ -50,7 +51,7 @@ import MitochondrialGeneCoverageTrack from './MitochondrialGeneCoverageTrack'
import MitochondrialVariantsInGene from './MitochondrialVariantsInGene'
import { getPreferredTranscript } from './preferredTranscript'
import StructuralVariantsInGene from './StructuralVariantsInGene'
import TissueExpressionTrack from './TissueExpressionTrack'
import TissueExpressionTrack, { TranscriptWithTissueExpression } from './TissueExpressionTrack'
import VariantsInGene from './VariantsInGene'

import { GnomadConstraint } from '../ConstraintTable/GnomadConstraintTable'
Expand All @@ -71,6 +72,8 @@ import {
LegendSwatch,
} from '../ChartStyles'
import { logButtonClick } from '../analytics'
import { GtexTissueExpression } from './TranscriptsTissueExpression'
import { GTEX_TISSUES } from '../gtex'

export type Strand = '+' | '-'

Expand All @@ -88,6 +91,30 @@ export type GeneMetadata = {
flags: string[]
}

export type GeneTranscript = {
transcript_id: string
transcript_version: string
exons: {
feature_type: string
start: number
stop: number
}[]
gtex_tissue_expression: GtexTissueExpression | null
}

export type Pext = {
regions: {
start: number
stop: number
mean: number
tissues: {
tissue: string
value: number
}[]
}[]
flags: string[]
}

export type Gene = GeneMetadata & {
reference_genome: ReferenceGenome
name?: string
Expand All @@ -100,29 +127,11 @@ export type Gene = GeneMetadata & {
start: number
stop: number
}[]
transcripts: {
transcript_id: string
transcript_version: string
exons: {
feature_type: string
start: number
stop: number
}[]
}[]
transcripts: GeneTranscript[]
flags: string[]
gnomad_constraint?: GnomadConstraint
exac_constraint?: ExacConstraint
pext?: {
regions: {
start: number
stop: number
mean: number
tissues: {
[key: string]: number
}
}[]
flags: string[]
}
pext?: Pext
short_tandem_repeats?: {
id: string
}[]
Expand Down Expand Up @@ -517,6 +526,8 @@ const GenePage = ({ datasetId, gene, geneId }: Props) => {
<TrackWrapper>
<GeneTranscriptsTrack
datasetId={datasetId}
isTissueExpressionAvailable={!!gene.pext}
gtexTissues={GTEX_TISSUES[getTopLevelDataset(datasetId)]}
gene={gene}
includeNonCodingTranscripts={includeNonCodingTranscripts}
includeUTRs={includeUTRs}
Expand All @@ -528,11 +539,12 @@ const GenePage = ({ datasetId, gene, geneId }: Props) => {

{hasCodingExons && gene.chrom !== 'M' && gene.pext && (
<TissueExpressionTrack
datasetId={datasetId}
gtexTissues={GTEX_TISSUES[getTopLevelDataset(datasetId)]}
exons={cdsCompositeExons}
expressionRegions={gene.pext.regions}
flags={gene.pext.flags}
transcripts={gene.transcripts}
// if a gene has pext, it also has GTEx
transcripts={gene.transcripts as TranscriptWithTissueExpression[]} // if a gene has pext,
preferredTranscriptId={preferredTranscriptId}
preferredTranscriptDescription={preferredTranscriptDescription}
/>
Expand Down Expand Up @@ -564,7 +576,6 @@ const GenePage = ({ datasetId, gene, geneId }: Props) => {
<VariantsInGene
datasetId={datasetId}
gene={gene}
// @ts-expect-error TS(2322) FIXME: Type '{ datasetId: string; gene: { gene_id: string... Remove this comment to see the full error message
includeNonCodingTranscripts={includeNonCodingTranscripts}
includeUTRs={includeUTRs}
zoomRegion={zoomRegion}
Expand Down
79 changes: 41 additions & 38 deletions browser/src/GenePage/GeneTranscriptsTrack.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,14 @@ import { Track } from '@gnomad/region-viewer'
import TranscriptsTrack from '@gnomad/track-transcripts'
import { Button, Modal, TooltipAnchor } from '@gnomad/ui'

import { GTEX_TISSUES } from '../gtex'
import { AllGtexTissues, TissueDetail } from '../gtex'
import InfoButton from '../help/InfoButton'
import Link from '../Link'
import sortedTranscripts from './sortedTranscripts'
import TranscriptsTissueExpression from './TranscriptsTissueExpression'
import { Gene } from './GenePage'
import {
DatasetId,
getTopLevelDataset,
hasStructuralVariants,
} from '../../../dataset-metadata/metadata'
import { Transcript } from '../TranscriptPage/TranscriptPage'
import { DatasetId, hasStructuralVariants } from '../../../dataset-metadata/metadata'
import { TranscriptWithTissueExpression } from './TissueExpressionTrack'

const TranscriptsInfoWrapper = styled.div`
display: flex;
Expand All @@ -41,6 +37,8 @@ const RightPanel = styled.div`

type GeneTranscriptsTrack = {
datasetId: DatasetId
isTissueExpressionAvailable: boolean
gtexTissues: Partial<AllGtexTissues> & { [key: string]: TissueDetail | undefined }
gene: Gene
includeNonCodingTranscripts: boolean
includeUTRs: boolean
Expand All @@ -50,24 +48,21 @@ type GeneTranscriptsTrack = {

const GeneTranscriptsTrack = ({
datasetId,
isTissueExpressionAvailable,
gtexTissues,
gene,
includeNonCodingTranscripts,
includeUTRs,
preferredTranscriptId,
preferredTranscriptDescription,
}: GeneTranscriptsTrack) => {
const transcriptsTrack = useRef(null)

const gtexTissues = GTEX_TISSUES[getTopLevelDataset(datasetId)]

const isTissueExpressionAvailable = gene.reference_genome === 'GRCh37'
const [showTissueExpressionModal, setShowTissueExpressionModal] = useState(false)

const maxMeanExpression = isTissueExpressionAvailable
? max(
// @ts-ignore
gene.transcripts.map((transcript: Transcript) =>
mean(transcript.gtex_tissue_expression!.map((tissue) => tissue.value))
(gene.transcripts as TranscriptWithTissueExpression[]).map(
(transcript) => mean(transcript.gtex_tissue_expression.map((tissue) => tissue.value))!
)
)
: undefined
Expand Down Expand Up @@ -133,15 +128,36 @@ const GeneTranscriptsTrack = ({
renderTranscriptRightPanel={
!isTissueExpressionAvailable
? null
: ({ transcript, width }: any) => {
: ({
transcript,
width,
}: {
transcript: TranscriptWithTissueExpression
width: number
}) => {
if (width < 36) {
return null
}

const meanExpression = mean(Object.values(transcript.gtex_tissue_expression))
const maxExpression = max(Object.values(transcript.gtex_tissue_expression))
const tissueMostExpressedIn = Object.keys(transcript.gtex_tissue_expression).find(
(tissue: any) => transcript.gtex_tissue_expression[tissue] === maxExpression
const meanExpression = mean(
transcript.gtex_tissue_expression.map(
(tissueExpression) => tissueExpression.value
)
)!
const maxExpression = max(
transcript.gtex_tissue_expression.map(
(tissueExpression) => tissueExpression.value
)
)!
const tissueMostExpressedIn = transcript.gtex_tissue_expression.find(
(tissue) => tissue.value === maxExpression
)!.tissue

const circleRadiusMeanContribution = meanExpression === 0 ? 0 : 0.25
const circleRadiusMaxMeanContribution =
maxMeanExpression === 0 ? 0 : meanExpression / maxMeanExpression! // if the right panel render, maxMean is defined
const circleRadius = Math.sqrt(
circleRadiusMeanContribution + 23.75 * circleRadiusMaxMeanContribution
)

return (
Expand All @@ -150,10 +166,9 @@ const GeneTranscriptsTrack = ({
// @ts-expect-error TS(2322) FIXME: Type '{ children: Element; tooltip: string; }' is ... Remove this comment to see the full error message
tooltip={`Mean expression across all tissues = ${meanExpression.toFixed(
2
)} TPM\nMost expressed in ${gtexTissues[tissueMostExpressedIn].fullName} (${
// @ts-expect-error TS(2532) FIXME: Object is possibly 'undefined'.
maxExpression.toFixed(2)
} TPM)`}
)} TPM\nMost expressed in ${
gtexTissues[tissueMostExpressedIn]!.fullName
} (${maxExpression.toFixed(2)} TPM)`}
>
<rect
x={0}
Expand All @@ -164,20 +179,7 @@ const GeneTranscriptsTrack = ({
pointerEvents="visible"
/>
</TooltipAnchor>
<circle
cx={15}
cy={5}
r={Math.sqrt(
meanExpression === 0
? 0
: 0.25 +
23.75 *
// @ts-expect-error TS(2367) FIXME: This condition will always return 'false' since th... Remove this comment to see the full error message
(maxMeanExpression === 0 ? 0 : meanExpression / maxMeanExpression)
)}
fill="#333"
pointerEvents="none"
/>
<circle cx={15} cy={5} r={circleRadius} fill="#333" pointerEvents="none" />
</svg>
)
}
Expand All @@ -196,7 +198,8 @@ const GeneTranscriptsTrack = ({
}}
>
<TranscriptsTissueExpression
transcripts={gene.transcripts}
gtexTissues={gtexTissues}
transcripts={gene.transcripts as TranscriptWithTissueExpression[]}
includeNonCodingTranscripts={includeNonCodingTranscripts}
preferredTranscriptId={preferredTranscriptId}
preferredTranscriptDescription={preferredTranscriptDescription}
Expand Down
Loading

0 comments on commit 3078c3a

Please sign in to comment.