From dd55e58f899cae5dc50df7888d396d8e0bad429a Mon Sep 17 00:00:00 2001
From: Riley Grant <grantrileyh@gmail.com>
Date: Thu, 17 Oct 2024 10:10:12 -0500
Subject: [PATCH] wip(browser): update frontend types

---
 browser/src/GenePage/GenePage.tsx             |   7 +-
 browser/src/GenePage/GeneTranscriptsTrack.tsx |  27 +++-
 .../src/GenePage/TissueExpressionTrack.tsx    | 147 +++++++++++------
 browser/src/gtex.ts                           | 152 +++++++++---------
 4 files changed, 199 insertions(+), 134 deletions(-)

diff --git a/browser/src/GenePage/GenePage.tsx b/browser/src/GenePage/GenePage.tsx
index e686aaecc..2b07cfe6e 100644
--- a/browser/src/GenePage/GenePage.tsx
+++ b/browser/src/GenePage/GenePage.tsx
@@ -2,7 +2,7 @@
 import LeftArrow from '@fortawesome/fontawesome-free/svgs/solid/arrow-circle-left.svg'
 // @ts-expect-error TS(2307) FIXME: Cannot find module '@fortawesome/fontawesome-free/... Remove this comment to see the full error message
 import RightArrow from '@fortawesome/fontawesome-free/svgs/solid/arrow-circle-right.svg'
-import React, { useState, Dispatch, SetStateAction } from 'react'
+import React, { useState, Dispatch, SetStateAction, useEffect } from 'react'
 import styled from 'styled-components'
 
 // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module '@gno... Remove this comment to see the full error message
@@ -527,7 +527,6 @@ const GenePage = ({ datasetId, gene, geneId }: Props) => {
             <GeneTranscriptsTrack
               datasetId={datasetId}
               isTissueExpressionAvailable={!!gene.pext}
-              gtexTissues={GTEX_TISSUES[getTopLevelDataset(datasetId)]}
               gene={gene}
               includeNonCodingTranscripts={includeNonCodingTranscripts}
               includeUTRs={includeUTRs}
@@ -539,7 +538,9 @@ const GenePage = ({ datasetId, gene, geneId }: Props) => {
 
         {hasCodingExons && gene.chrom !== 'M' && gene.pext && (
           <TissueExpressionTrack
-            gtexTissues={GTEX_TISSUES[getTopLevelDataset(datasetId)]}
+            datasetId={datasetId}
+            // gtexTissues={GTEX_TISSUES[getTopLevelDataset(datasetId)]}
+            // gtexTissues={GTEX_TISSUES[getTopLevelDataset(datasetId)]}
             exons={cdsCompositeExons}
             expressionRegions={gene.pext.regions}
             flags={gene.pext.flags}
diff --git a/browser/src/GenePage/GeneTranscriptsTrack.tsx b/browser/src/GenePage/GeneTranscriptsTrack.tsx
index 0116273d2..b567053c1 100644
--- a/browser/src/GenePage/GeneTranscriptsTrack.tsx
+++ b/browser/src/GenePage/GeneTranscriptsTrack.tsx
@@ -1,5 +1,5 @@
 import { max, mean } from 'd3-array'
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module '@gno... Remove this comment to see the full error message
@@ -8,13 +8,17 @@ import { Track } from '@gnomad/region-viewer'
 import TranscriptsTrack from '@gnomad/track-transcripts'
 import { Button, Modal, TooltipAnchor } from '@gnomad/ui'
 
-import { AllGtexTissues, TissueDetail } from '../gtex'
+import { AllGtexTissues, GTEX_TISSUES, 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, hasStructuralVariants } from '../../../dataset-metadata/metadata'
+import {
+  DatasetId,
+  getTopLevelDataset,
+  hasStructuralVariants,
+} from '../../../dataset-metadata/metadata'
 import { TranscriptWithTissueExpression } from './TissueExpressionTrack'
 
 const TranscriptsInfoWrapper = styled.div`
@@ -49,7 +53,6 @@ type GeneTranscriptsTrack = {
 const GeneTranscriptsTrack = ({
   datasetId,
   isTissueExpressionAvailable,
-  gtexTissues,
   gene,
   includeNonCodingTranscripts,
   includeUTRs,
@@ -59,6 +62,18 @@ const GeneTranscriptsTrack = ({
   const transcriptsTrack = useRef(null)
   const [showTissueExpressionModal, setShowTissueExpressionModal] = useState(false)
 
+  const gtexTissues = GTEX_TISSUES[getTopLevelDataset(datasetId)]
+
+  // const [gtexTissues, setGtexTissues] = useState<Partial<AllGtexTissues> & { [key: string]: TissueDetail | undefined }>([])
+  //
+  // useEffect(() => {
+  //   const newGtexTissues = GTEX_TISSUES[getTopLevelDataset(datasetId)]
+  //   setGtexTissues(newGtexTissues)
+  // }, [datasetId])
+  //
+  //
+  //
+
   const maxMeanExpression = isTissueExpressionAvailable
     ? max(
         (gene.transcripts as TranscriptWithTissueExpression[]).map(
@@ -160,6 +175,10 @@ const GeneTranscriptsTrack = ({
                   circleRadiusMeanContribution + 23.75 * circleRadiusMaxMeanContribution
                 )
 
+                console.log('Hellooo!!!')
+                console.log('Gtex tissues:', gtexTissues)
+                console.log('Tissue most expressed in', tissueMostExpressedIn)
+
                 return (
                   <svg width={width} height={10}>
                     <TooltipAnchor
diff --git a/browser/src/GenePage/TissueExpressionTrack.tsx b/browser/src/GenePage/TissueExpressionTrack.tsx
index 09af63f25..bb242182a 100644
--- a/browser/src/GenePage/TissueExpressionTrack.tsx
+++ b/browser/src/GenePage/TissueExpressionTrack.tsx
@@ -1,6 +1,6 @@
 import { max, mean } from 'd3-array'
 import { scaleLinear } from 'd3-scale'
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 // @ts-expect-error TS(7016) FIXME: Could not find a declaration file for module '@gno... Remove this comment to see the full error message
@@ -9,13 +9,14 @@ import { Track } from '@gnomad/region-viewer'
 import { RegionsPlot } from '@gnomad/track-regions'
 import { Badge, Button, Modal, SearchInput, Select, TooltipAnchor } from '@gnomad/ui'
 
-import { AllGtexTissues } from '../gtex'
+import { AllGtexTissues, GTEX_TISSUES } from '../gtex'
 import InfoButton from '../help/InfoButton'
 
 import { logButtonClick } from '../analytics'
 
 import TranscriptsTissueExpression, { GtexTissueExpression } from './TranscriptsTissueExpression'
 import { GeneTranscript } from './GenePage'
+import { DatasetId, getTopLevelDataset } from '@gnomad/dataset-metadata/metadata'
 
 const getPlotRegions = (expressionRegions: any, getValueForRegion: any) => {
   const roundedRegions = expressionRegions.map((region: any) => ({
@@ -189,13 +190,16 @@ const IndividualTissueTrack = ({
   const isExpressed = expressionRegions.some(
     (region: any) =>
       region.tissues.find((tissueObject: ExpressedTissue) => tissueObject.tissue === tissue)
-        .value !== 0
+        ?.value !== 0
   )
 
+  console.log('ok in individual tissue track')
+  console.log('tissue:', tissue)
+
   return (
     <Track
       // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-      renderLeftPanel={() => <TissueName>{gtexTissuesForDataset[tissue].fullName}</TissueName>}
+      renderLeftPanel={() => <TissueName>{gtexTissues[tissue].fullName}</TissueName>}
       renderRightPanel={({ width }: any) =>
         width > 36 && (
           <svg width={width} height={31}>
@@ -224,7 +228,7 @@ const IndividualTissueTrack = ({
                       transcriptWithMaxExpressionInTissue!.transcript_version
                     })`
                   : // @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message
-                    `Gene is not expressed in ${gtexTissuesForDataset[tissue].fullName}`
+                    `Gene is not expressed in ${gtexTissues[tissue].fullName}`
               }
             >
               <rect x={12} y={2} width={25} height={27} fill="none" pointerEvents="visible" />
@@ -264,7 +268,7 @@ const IndividualTissueTrack = ({
                 expressionRegions,
                 (r: any) =>
                   r.tissues.find((tissueObject: ExpressedTissue) => tissueObject.tissue === tissue)
-                    .value
+                    ?.value || 0
               )}
               scalePosition={scalePosition}
               width={width}
@@ -330,7 +334,8 @@ export type TranscriptWithTissueExpression = Omit<GeneTranscript, 'gtex_tissue_e
 }
 
 type TissueExpressionTrackProps = {
-  gtexTissues: Partial<AllGtexTissues>
+  datasetId: DatasetId
+  // gtexTissues: Partial<AllGtexTissues>
   exons: {
     start: number
     stop: number
@@ -351,7 +356,8 @@ type TissueExpressionTrackProps = {
 }
 
 const TissueExpressionTrack = ({
-  gtexTissues,
+  // gtexTissues,
+  datasetId,
   exons,
   expressionRegions,
   flags,
@@ -368,6 +374,16 @@ const TissueExpressionTrack = ({
     'alphabetical'
   )
 
+  // useEffect(() => {
+  //   console.log("i got called!")
+  //   setIsExpanded(false)
+  // }, [datasetId])
+
+  // console.log("what the heck state!")
+  // console.log(datasetId)
+  const gtexTissues = GTEX_TISSUES[getTopLevelDataset(datasetId)]
+  // console.log(Object.keys(gtexTissues).length)
+
   type ExpressionByTissueDetails = {
     maxTranscriptExpressionInTissue: number
     meanTranscriptExpressionInTissue: number
@@ -378,18 +394,26 @@ const TissueExpressionTrack = ({
   }
   type ExpressionByTissue = Record<string, ExpressionByTissueDetails>
 
+  // console.log(gtexTissues)
   const expressionByTissue: ExpressionByTissue = Object.keys(gtexTissues).reduce(
     (acc, tissueId) => {
+      // console.log(tissueId)
+
       let maxTranscriptExpressionInTissue = 0
       let transcriptWithMaxExpressionInTissue = null
 
       transcripts.forEach((transcript) => {
         const expressionInTissue = transcript.gtex_tissue_expression.find(
           (tissue) => tissue.tissue === tissueId
-        )!.value
+        )
+
+        // const expressionInTissueValue = expressionInTissue ? expressionInTissue.value : 0
+
+        // console.log(transcript)
+        // console.log(expressionInTissue)
 
-        if (expressionInTissue > maxTranscriptExpressionInTissue) {
-          maxTranscriptExpressionInTissue = expressionInTissue!
+        if (expressionInTissue && expressionInTissue.value > maxTranscriptExpressionInTissue) {
+          maxTranscriptExpressionInTissue = expressionInTissue.value
           transcriptWithMaxExpressionInTissue = {
             transcript_id: transcript.transcript_id,
             transcript_version: transcript.transcript_version,
@@ -398,10 +422,12 @@ const TissueExpressionTrack = ({
       })
 
       const meanTranscriptExpressionInTissue = mean(
-        transcripts.map(
-          (transcript) =>
-            transcript.gtex_tissue_expression.find((tissue) => tissue.tissue === tissueId)!.value
-        )
+        transcripts
+          .map(
+            (transcript) =>
+              transcript.gtex_tissue_expression.find((tissue) => tissue.tissue === tissueId)?.value
+          )
+          .filter((value): value is number => value != undefined)
       )
 
       return {
@@ -420,23 +446,39 @@ const TissueExpressionTrack = ({
     Object.values(expressionByTissue).map((v) => v.meanTranscriptExpressionInTissue)
   )!
 
-  let tissues
-  if (sortTissuesBy === 'mean-expression') {
-    tissues = Object.entries(gtexTissues)
-      .sort((t1, t2) => {
-        const t1Expression = expressionByTissue[t1[0]].meanTranscriptExpressionInTissue
-        const t2Expression = expressionByTissue[t2[0]].meanTranscriptExpressionInTissue
-        if (t1Expression === t2Expression) {
-          return t1[1].fullName.localeCompare(t2[1].fullName)
-        }
-        return t2Expression - t1Expression
-      })
-      .map((t: any) => t[0])
-  } else {
-    tissues = Object.entries(gtexTissues)
-      .sort((t1, t2) => t1[1].fullName.localeCompare(t2[1].fullName))
-      .map((t) => t[0])
-  }
+  const tissues =
+    sortTissuesBy === 'mean-expression'
+      ? Object.entries(gtexTissues)
+          .sort((t1, t2) => {
+            const t1Expression = expressionByTissue[t1[0]].meanTranscriptExpressionInTissue
+            const t2Expression = expressionByTissue[t2[0]].meanTranscriptExpressionInTissue
+            if (t1Expression === t2Expression) {
+              return t1[1].fullName.localeCompare(t2[1].fullName)
+            }
+            return t2Expression - t1Expression
+          })
+          .map((t: any) => t[0])
+      : Object.entries(gtexTissues)
+          .sort((t1, t2) => t1[1].fullName.localeCompare(t2[1].fullName))
+          .map((t) => t[0])
+
+  // let tissues
+  // if (sortTissuesBy === 'mean-expression') {
+  //   tissues = Object.entries(gtexTissues)
+  //     .sort((t1, t2) => {
+  //       const t1Expression = expressionByTissue[t1[0]].meanTranscriptExpressionInTissue
+  //       const t2Expression = expressionByTissue[t2[0]].meanTranscriptExpressionInTissue
+  //       if (t1Expression === t2Expression) {
+  //         return t1[1].fullName.localeCompare(t2[1].fullName)
+  //       }
+  //       return t2Expression - t1Expression
+  //     })
+  //     .map((t: any) => t[0])
+  // } else {
+  // tissues = Object.entries(gtexTissues)
+  //   .sort((t1, t2) => t1[1].fullName.localeCompare(t2[1].fullName))
+  //   .map((t) => t[0])
+  // }
 
   const isExpressed = expressionRegions.some((region: any) => region.mean !== 0)
 
@@ -579,25 +621,28 @@ const TissueExpressionTrack = ({
               }}
             </Track>
             {(tissueFilterText ? tissues.filter(tissuePredicate(tissueFilterText)) : tissues).map(
-              (tissue: any) => (
-                <IndividualTissueTrack
-                  gtexTissues={gtexTissues}
-                  key={tissue}
-                  exons={exons}
-                  expressionRegions={expressionRegions}
-                  maxTranscriptExpressionInTissue={
-                    expressionByTissue[tissue].maxTranscriptExpressionInTissue
-                  }
-                  maxMeanTranscriptExpressionInAnyTissue={maxMeanTranscriptExpressionInAnyTissue}
-                  meanTranscriptExpressionInTissue={
-                    expressionByTissue[tissue].meanTranscriptExpressionInTissue
-                  }
-                  transcriptWithMaxExpressionInTissue={
-                    expressionByTissue[tissue].transcriptWithMaxExpressionInTissue
-                  }
-                  tissue={tissue}
-                />
-              )
+              (tissue: any) => {
+                console.log(tissue)
+                return (
+                  <IndividualTissueTrack
+                    gtexTissues={gtexTissues}
+                    key={`${tissue}-${datasetId}`}
+                    exons={exons}
+                    expressionRegions={expressionRegions}
+                    maxTranscriptExpressionInTissue={
+                      expressionByTissue[tissue].maxTranscriptExpressionInTissue
+                    }
+                    maxMeanTranscriptExpressionInAnyTissue={maxMeanTranscriptExpressionInAnyTissue}
+                    meanTranscriptExpressionInTissue={
+                      expressionByTissue[tissue].meanTranscriptExpressionInTissue
+                    }
+                    transcriptWithMaxExpressionInTissue={
+                      expressionByTissue[tissue].transcriptWithMaxExpressionInTissue
+                    }
+                    tissue={tissue}
+                  />
+                )
+              }
             )}
             <span>
               <Button
diff --git a/browser/src/gtex.ts b/browser/src/gtex.ts
index e93a4faa6..48608f298 100644
--- a/browser/src/gtex.ts
+++ b/browser/src/gtex.ts
@@ -23,10 +23,6 @@ const SHARED_GTEX_TISSUES = {
     fullName: 'Artery - Tibial',
     color: '#FF0000',
   },
-  bladder: {
-    fullName: 'Bladder',
-    color: '#AA0000',
-  },
   brain_amygdala: {
     fullName: 'Brain - Amygdala',
     color: '#EEEE00',
@@ -87,14 +83,6 @@ const SHARED_GTEX_TISSUES = {
     fullName: 'Cells - EBV-transformed lymphocytes',
     color: '#CC66FF',
   },
-  cervix_ectocervix: {
-    fullName: 'Cervix - Ectocervix',
-    color: '#FFCCCC',
-  },
-  cervix_endocervix: {
-    fullName: 'Cervix - Endocervix',
-    color: '#CCAADD',
-  },
   colon_sigmoid: {
     fullName: 'Colon - Sigmoid',
     color: '#EEBB77',
@@ -115,10 +103,6 @@ const SHARED_GTEX_TISSUES = {
     fullName: 'Esophagus - Muscularis',
     color: '#BB9988',
   },
-  fallopian_tube: {
-    fullName: 'Fallopian Tube',
-    color: '#FFCCCC',
-  },
   heart_atrial_appendage: {
     fullName: 'Heart - Atrial Appendage',
     color: '#9900FF',
@@ -217,10 +201,26 @@ export type TissueDetail = {
 }
 
 const V2_SPECIFIC_GTEX_TISSUES = {
+  bladder: {
+    fullName: 'Bladder',
+    color: '#AA0000',
+  },
   cells_transformed_fibroblasts: {
     fullName: 'Cells - Transformed fibroblasts',
     color: '#AAEEFF',
   },
+  cervix_ectocervix: {
+    fullName: 'Cervix - Ectocervix',
+    color: '#FFCCCC',
+  },
+  cervix_endocervix: {
+    fullName: 'Cervix - Endocervix',
+    color: '#CCAADD',
+  },
+  fallopian_tube: {
+    fullName: 'Fallopian Tube',
+    color: '#FFCCCC',
+  },
 }
 
 type V2GtexTissueNames = SharedGtexTissueNames | keyof typeof V2_SPECIFIC_GTEX_TISSUES
@@ -235,66 +235,66 @@ const V4_SPECIFIC_GTEX_TISSUES = {
     fullName: 'Cells - Cultured fibroblasts',
     color: '#AAEEFF',
   },
-  colon_transverse_mixed_cell: {
-    fullName: 'Colon - Transverse mixed cell',
-    color: '#CC9955',
-  },
-  colon_transverse_mucosa: {
-    fullName: 'Colon - Transverse mucosa',
-    color: '#CC9955',
-  },
-  colon_transverse_muscularis: {
-    fullName: 'Colon - Transverse muscularis',
-    color: '#CC9955',
-  },
-  kidney_medulla: {
-    fullName: 'Kidney - Medulla',
-    color: '#33FFC2',
-  },
-  liver_hepatocyte: {
-    fullName: 'Liver - Hepatocyte',
-    color: '#AABB66',
-  },
-  liver_mixed_cell: {
-    fullName: 'Liver - Mixed cell',
-    color: '#AABB66',
-  },
-  liver_portal_tract: {
-    fullName: 'Liver - Portal tract',
-    color: '#AABB66',
-  },
-  pancreas_acini: {
-    fullName: 'Pancreas - Acini',
-    color: '#995522',
-  },
-  pancreas_islets: {
-    fullName: 'Pancreas - Islets',
-    color: '#995522',
-  },
-  pancreas_mixed_cell: {
-    fullName: 'Pancreas - Mixed cell',
-    color: '#995522',
-  },
-  small_intestine_terminal_ileum_lymphoid_aggregate: {
-    fullName: 'Small Intestine - Terminal ileum lymphoid aggregate',
-    color: '#555522',
-  },
-  small_intestine_terminal_ileum_mixed_cell: {
-    fullName: 'Small intestine - Terminal ileum mixed cell',
-    color: '#555522',
-  },
-  stomach_mixed_cell: {
-    fullName: 'Stomach - Mixed cell',
-    color: '#FFDD99',
-  },
-  stomach_mucosa: {
-    fullName: 'Stomach - Mucosa',
-    color: '#FFDD99',
-  },
-  stomach_muscularis: {
-    fullName: 'Stomach - Muscularis',
-    color: '#FFDD99',
-  },
+  // colon_transverse_mixed_cell: {
+  //   fullName: 'Colon - Transverse mixed cell',
+  //   color: '#CC9955',
+  // },
+  // colon_transverse_mucosa: {
+  //   fullName: 'Colon - Transverse mucosa',
+  //   color: '#CC9955',
+  // },
+  // colon_transverse_muscularis: {
+  //   fullName: 'Colon - Transverse muscularis',
+  //   color: '#CC9955',
+  // },
+  // kidney_medulla: {
+  //   fullName: 'Kidney - Medulla',
+  //   color: '#33FFC2',
+  // },
+  // liver_hepatocyte: {
+  //   fullName: 'Liver - Hepatocyte',
+  //   color: '#AABB66',
+  // },
+  // liver_mixed_cell: {
+  //   fullName: 'Liver - Mixed cell',
+  //   color: '#AABB66',
+  // },
+  // liver_portal_tract: {
+  //   fullName: 'Liver - Portal tract',
+  //   color: '#AABB66',
+  // },
+  // pancreas_acini: {
+  //   fullName: 'Pancreas - Acini',
+  //   color: '#995522',
+  // },
+  // pancreas_islets: {
+  //   fullName: 'Pancreas - Islets',
+  //   color: '#995522',
+  // },
+  // pancreas_mixed_cell: {
+  //   fullName: 'Pancreas - Mixed cell',
+  //   color: '#995522',
+  // },
+  // small_intestine_terminal_ileum_lymphoid_aggregate: {
+  //   fullName: 'Small Intestine - Terminal ileum lymphoid aggregate',
+  //   color: '#555522',
+  // },
+  // small_intestine_terminal_ileum_mixed_cell: {
+  //   fullName: 'Small intestine - Terminal ileum mixed cell',
+  //   color: '#555522',
+  // },
+  // stomach_mixed_cell: {
+  //   fullName: 'Stomach - Mixed cell',
+  //   color: '#FFDD99',
+  // },
+  // stomach_mucosa: {
+  //   fullName: 'Stomach - Mucosa',
+  //   color: '#FFDD99',
+  // },
+  // stomach_muscularis: {
+  //   fullName: 'Stomach - Muscularis',
+  //   color: '#FFDD99',
+  // },
 }
 
 type V4GtexTissueNames = SharedGtexTissueNames | keyof typeof V4_SPECIFIC_GTEX_TISSUES