Skip to content

Commit

Permalink
feat(browser): adjust frontend for new gtex/pext schema
Browse files Browse the repository at this point in the history
  • Loading branch information
@rileyhgrant
rileyhgrant committed Oct 22, 2024
1 parent 6bdcb7b commit 91d7fc7
Show file tree
Hide file tree
Showing 10 changed files with 646 additions and 647 deletions.
53 changes: 30 additions & 23 deletions browser/src/GenePage/GenePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,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 +71,7 @@ import {
LegendSwatch,
} from '../ChartStyles'
import { logButtonClick } from '../analytics'
import { GtexTissueExpression } from './TranscriptsTissueExpression'

export type Strand = '+' | '-'

Expand All @@ -88,6 +89,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 +125,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 +524,7 @@ const GenePage = ({ datasetId, gene, geneId }: Props) => {
<TrackWrapper>
<GeneTranscriptsTrack
datasetId={datasetId}
isTissueExpressionAvailable={!!gene.pext}
gene={gene}
includeNonCodingTranscripts={includeNonCodingTranscripts}
includeUTRs={includeUTRs}
Expand All @@ -531,7 +539,7 @@ const GenePage = ({ datasetId, gene, geneId }: Props) => {
exons={cdsCompositeExons}
expressionRegions={gene.pext.regions}
flags={gene.pext.flags}
transcripts={gene.transcripts}
transcripts={gene.transcripts as TranscriptWithTissueExpression[]} // if a gene has pext, it has gtex
preferredTranscriptId={preferredTranscriptId}
preferredTranscriptDescription={preferredTranscriptDescription}
/>
Expand Down Expand Up @@ -563,7 +571,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
110 changes: 4 additions & 106 deletions browser/src/GenePage/GenePageContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,59 +98,8 @@ query ${operationName}($geneId: String, $geneSymbol: String, $referenceGenome: R
stop
}
gtex_tissue_expression {
adipose_subcutaneous
adipose_visceral_omentum
adrenal_gland
artery_aorta
artery_coronary
artery_tibial
bladder
brain_amygdala
brain_anterior_cingulate_cortex_ba24
brain_caudate_basal_ganglia
brain_cerebellar_hemisphere
brain_cerebellum
brain_cortex
brain_frontal_cortex_ba9
brain_hippocampus
brain_hypothalamus
brain_nucleus_accumbens_basal_ganglia
brain_putamen_basal_ganglia
brain_spinal_cord_cervical_c_1
brain_substantia_nigra
breast_mammary_tissue
cells_ebv_transformed_lymphocytes
cells_transformed_fibroblasts
cervix_ectocervix
cervix_endocervix
colon_sigmoid
colon_transverse
esophagus_gastroesophageal_junction
esophagus_mucosa
esophagus_muscularis
fallopian_tube
heart_atrial_appendage
heart_left_ventricle
kidney_cortex
liver
lung
minor_salivary_gland
muscle_skeletal
nerve_tibial
ovary
pancreas
pituitary
prostate
skin_not_sun_exposed_suprapubic
skin_sun_exposed_lower_leg
small_intestine_terminal_ileum
spleen
stomach
testis
thyroid
uterus
vagina
whole_blood
tissue
value
}
}
pext {
Expand All @@ -159,59 +108,8 @@ query ${operationName}($geneId: String, $geneSymbol: String, $referenceGenome: R
stop
mean
tissues {
adipose_subcutaneous
adipose_visceral_omentum
adrenal_gland
artery_aorta
artery_coronary
artery_tibial
bladder
brain_amygdala
brain_anterior_cingulate_cortex_ba24
brain_caudate_basal_ganglia
brain_cerebellar_hemisphere
brain_cerebellum
brain_cortex
brain_frontal_cortex_ba9
brain_hippocampus
brain_hypothalamus
brain_nucleus_accumbens_basal_ganglia
brain_putamen_basal_ganglia
brain_spinal_cord_cervical_c_1
brain_substantia_nigra
breast_mammary_tissue
cells_ebv_transformed_lymphocytes
cells_transformed_fibroblasts
cervix_ectocervix
cervix_endocervix
colon_sigmoid
colon_transverse
esophagus_gastroesophageal_junction
esophagus_mucosa
esophagus_muscularis
fallopian_tube
heart_atrial_appendage
heart_left_ventricle
kidney_cortex
liver
lung
minor_salivary_gland
muscle_skeletal
nerve_tibial
ovary
pancreas
pituitary
prostate
skin_not_sun_exposed_suprapubic
skin_sun_exposed_lower_leg
small_intestine_terminal_ileum
spleen
stomach
testis
thyroid
uterus
vagina
whole_blood
tissue
value
}
}
flags
Expand Down
94 changes: 55 additions & 39 deletions browser/src/GenePage/GeneTranscriptsTrack.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@ import { Track } from '@gnomad/region-viewer'
import TranscriptsTrack from '@gnomad/track-transcripts'
import { Button, Modal, TooltipAnchor } from '@gnomad/ui'

import { GTEX_TISSUE_NAMES } from '../gtex'
import { ALL_GTEX_TISSUES, GtexTissueName } from '../gtex'
import InfoButton from '../help/InfoButton'
import Link from '../Link'
import sortedTranscripts from './sortedTranscripts'
import TranscriptsTissueExpression from './TranscriptsTissueExpression'
import { Gene } from './GenePage'
import { hasStructuralVariants } from '../../../dataset-metadata/metadata'
import { DatasetId, hasStructuralVariants } from '../../../dataset-metadata/metadata'
import { GtexTissueDetail, TranscriptWithTissueExpression } from './TissueExpressionTrack'

const TranscriptsInfoWrapper = styled.div`
display: flex;
Expand All @@ -34,36 +35,46 @@ const RightPanel = styled.div`
padding: 0.375em;
`

type OwnProps = {
datasetId: string
type GeneTranscriptsTrack = {
datasetId: DatasetId
isTissueExpressionAvailable: boolean
gene: Gene
includeNonCodingTranscripts: boolean
includeUTRs: boolean
preferredTranscriptId?: string
preferredTranscriptDescription?: string | React.ReactNode
}

// @ts-expect-error TS(2456) FIXME: Type alias 'Props' circularly references itself.
type Props = OwnProps & typeof GeneTranscriptsTrack.defaultProps

// @ts-expect-error TS(7022) FIXME: 'GeneTranscriptsTrack' implicitly has type 'any' b... Remove this comment to see the full error message
const GeneTranscriptsTrack = ({
datasetId,
isTissueExpressionAvailable,
gene,
includeNonCodingTranscripts,
includeUTRs,
preferredTranscriptId,
preferredTranscriptDescription,
}: Props) => {
}: GeneTranscriptsTrack) => {
const transcriptsTrack = useRef(null)

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

const gtexTissues: Partial<Record<GtexTissueName, GtexTissueDetail>> = {}
if (isTissueExpressionAvailable) {
const preferredTranscript = (gene.transcripts as TranscriptWithTissueExpression[]).find(
(transcript) => transcript.transcript_id === preferredTranscriptId
)
preferredTranscript!.gtex_tissue_expression.forEach((tissue) => {
gtexTissues[tissue.tissue as GtexTissueName] = {
fullName: ALL_GTEX_TISSUES[tissue.tissue as GtexTissueName].fullName || tissue.tissue,
color: ALL_GTEX_TISSUES[tissue.tissue as GtexTissueName].color || '#888888',
value: tissue.value,
}
})
}

const maxMeanExpression = isTissueExpressionAvailable
? max(
gene.transcripts.map((transcript: any) =>
mean(Object.values(transcript.gtex_tissue_expression))
(gene.transcripts as TranscriptWithTissueExpression[]).map(
(transcript) => mean(transcript.gtex_tissue_expression.map((tissue) => tissue.value))!
)
)
: undefined
Expand Down Expand Up @@ -129,15 +140,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!
const circleRadius = Math.sqrt(
circleRadiusMeanContribution + 23.75 * circleRadiusMaxMeanContribution
)

return (
Expand All @@ -147,12 +179,8 @@ const GeneTranscriptsTrack = ({
tooltip={`Mean expression across all tissues = ${meanExpression.toFixed(
2
)} TPM\nMost expressed in ${
// @ts-expect-error TS(2538) FIXME: Type 'undefined' cannot be used as an index type.
GTEX_TISSUE_NAMES[tissueMostExpressedIn]
} (${
// @ts-expect-error TS(2532) FIXME: Object is possibly 'undefined'.
maxExpression.toFixed(2)
} TPM)`}
gtexTissues[tissueMostExpressedIn as GtexTissueName]!.fullName
} (${maxExpression.toFixed(2)} TPM)`}
>
<rect
x={0}
Expand All @@ -163,20 +191,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 @@ -195,7 +210,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 91d7fc7

Please sign in to comment.