Skip to content

Commit d478aa1

Browse files
y330y330
authored
Merge pull request #141 from BioAnalyticResource/yonah/ChromosomeViewGeneFetchFix
Yonah/chromosome view gene fetch fix
2 parents 2ff7e04 + caf38e6 commit d478aa1

5 files changed

Lines changed: 83 additions & 73 deletions

File tree

‎Eplant/views/ChromosomeViewer/Viewer/Chromosome.tsx‎

Lines changed: 14 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
// -------
22
// IMPORTS
33
// -------
4-
import React, { FC, useEffect, useLayoutEffect, useState } from 'react'
4+
import React, { FC, useEffect, useState } from 'react'
55

6-
import { useCollections, useGeneticElements } from '@eplant/state'
6+
import { useCollections } from '@eplant/state'
77
import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup'
88
import ArrowLeft from '@mui/icons-material/ArrowLeft'
99
import Box from '@mui/material/Box'
@@ -17,28 +17,32 @@ import {
1717
GeneAnnotationItem,
1818
GeneRange,
1919
} from '../types'
20-
21-
import GeneAnnotation from './GeneAnnotation'
22-
import GeneList from './GeneList'
2320
import {
2421
getChromosomeSvg,
2522
getChromosomeXCoordinate,
26-
getGeneAnnotation,
2723
pixelToBp,
28-
} from './utilities'
24+
} from '../utilities'
25+
26+
import GeneAnnotation from './GeneAnnotation'
27+
import GeneList from './GeneList'
2928

3029
//----------
3130
// TYPES
3231
//----------
3332
interface ChromosomeProps {
34-
scale: number
3533
chromosome: ChromosomeItem
34+
annotations: GeneAnnotationItem[]
35+
scale: number
3636
}
3737

3838
//----------
3939
// COMPONENT
4040
//----------
41-
const Chromosome: FC<ChromosomeProps> = ({ scale, chromosome }) => {
41+
const Chromosome: FC<ChromosomeProps> = ({
42+
chromosome,
43+
annotations,
44+
scale,
45+
}) => {
4246
// State
4347
const [isHovered, setIsHovered] = useState<boolean>(false)
4448
const [anchorOrigin, setAnchorOrigin] = useState<number[]>([])
@@ -47,13 +51,7 @@ const Chromosome: FC<ChromosomeProps> = ({ scale, chromosome }) => {
4751
start: 0,
4852
end: 0,
4953
})
50-
// Gene Annotation drawing
51-
const [geneAnnotationArray, setGeneAnnotationArray] = useState<
52-
GeneAnnotationItem[]
53-
>([])
5454

55-
// Global State
56-
const [geneticElements] = useGeneticElements()
5755
const [collections] = useCollections()
5856
const theme = useTheme()
5957

@@ -73,45 +71,6 @@ const Chromosome: FC<ChromosomeProps> = ({ scale, chromosome }) => {
7371
// Gene List popover variables
7472
const openPopup = Boolean(anchorEl)
7573

76-
// Fire before paint, converts geneticElements into geneAnnotationArray
77-
useLayoutEffect(() => {
78-
// TODO: move this to top level to prevent uneccessary api calls
79-
const poplar = false
80-
const species = poplar ? 'Populus_trichocarpa' : 'Arabidopsis_thaliana'
81-
let newGeneAnnotationArray: GeneAnnotationItem[] = []
82-
geneticElements.map((gene) => {
83-
// for each item in geneticElements, fetch it's gene information to add to it's geneAnnotation
84-
fetch(
85-
`https://bar.utoronto.ca/eplant${
86-
poplar ? '_poplar' : ''
87-
}/cgi-bin/querygene.cgi?species=${species}&term=${gene.id}`
88-
)
89-
.then((response) => response.json())
90-
.then((geneItem) => {
91-
if (geneItem.chromosome === chromosome.id) {
92-
newGeneAnnotationArray = geneAnnotationArray
93-
const geneAnnotation: GeneAnnotationItem =
94-
getGeneAnnotation(geneItem)
95-
96-
// Make sure new geneAnnotation is not already in geneAnnotationArray
97-
const isDuplicate = newGeneAnnotationArray.some((gene) => {
98-
if (gene.id === geneAnnotation.id) {
99-
return true
100-
}
101-
return false
102-
})
103-
if (!isDuplicate) {
104-
newGeneAnnotationArray.push(geneAnnotation)
105-
setGeneAnnotationArray(newGeneAnnotationArray)
106-
}
107-
}
108-
})
109-
.catch((err) => {
110-
console.log(err)
111-
})
112-
})
113-
}, [])
114-
11574
// Execute on first render, after paint
11675
useEffect(() => {
11776
const svg: HTMLElement & SVGSVGElement = getChromosomeSvg(chromosome.id)
@@ -288,7 +247,7 @@ const Chromosome: FC<ChromosomeProps> = ({ scale, chromosome }) => {
288247
</g>
289248
{/* GENES ANNOTATION TAGS */}
290249
<g id={`${chromosome.id}_geneAnnotationTags`}>
291-
{geneAnnotationArray.map((gene, i) => {
250+
{annotations.map((gene, i) => {
292251
// Flatten collections into array of gene IDs - important for not drawing removed gene annotations
293252
const flatGeneCollection = collections.flatMap(
294253
(collection) => collection.genes

‎Eplant/views/ChromosomeViewer/Viewer/GeneList.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@ import React, { FC, useEffect, useState } from 'react'
66
import List from '@mui/material/List'
77
import ListItem from '@mui/material/ListItem'
88
import ListItemButton from '@mui/material/ListItemButton'
9-
import ListItemIcon from '@mui/material/ListItemIcon'
109
import ListItemText from '@mui/material/ListItemText'
1110
import useTheme from '@mui/material/styles/useTheme'
1211

13-
import { GeneIcon } from '../icons'
1412
import { GeneItem } from '../types'
1513

1614
import GeneInfoPopup from './GeneInfoPopup'
@@ -47,12 +45,8 @@ const GeneList: FC<GeneListProps> = ({ id, start, end, anchorOrigin }) => {
4745
}/cgi-bin/querygenesbyposition.cgi?chromosome=${id}&start=${start}&end=${end}`
4846
)
4947
.then((response) => response.json())
50-
.then((json) => {
51-
setGeneList(json)
52-
})
53-
.catch((err) => {
54-
console.log(err)
55-
})
48+
.then((json) => setGeneList(json))
49+
.catch((err) => console.log(err))
5650
}, [])
5751
// --------------
5852
// EVENT HANDLERS
@@ -104,7 +98,7 @@ const GeneList: FC<GeneListProps> = ({ id, start, end, anchorOrigin }) => {
10498
className='geneAliases'
10599
style={{ color: theme.palette.secondary.main }}
106100
>
107-
{`/${gene.aliases[0]}`}
101+
{`/${gene?.aliases[0]}`}
108102
</span>
109103
)}
110104
</ListItemText>

‎Eplant/views/ChromosomeViewer/Viewer/Viewer.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,20 @@ import { FC } from 'react'
77
import Box from '@mui/material/Box'
88
import Typography from '@mui/material/Typography'
99

10-
import { ChromosomeItem } from '../types'
10+
import { ChromosomeItem, GeneAnnotationItem } from '../types'
1111

1212
import Chromosome from './Chromosome'
1313

1414
// TYPES
1515
interface ViewerProps {
1616
chromosomes: ChromosomeItem[]
17+
annotations: GeneAnnotationItem[]
1718
scale: number
1819
}
1920
//----------
2021
// COMPONENT
2122
//----------
22-
const Viewer: FC<ViewerProps> = ({ chromosomes, scale }) => {
23+
const Viewer: FC<ViewerProps> = ({ chromosomes, annotations, scale }) => {
2324
return (
2425
<div
2526
style={{
@@ -33,13 +34,23 @@ const Viewer: FC<ViewerProps> = ({ chromosomes, scale }) => {
3334
}}
3435
>
3536
{chromosomes.map((chromosome, i) => {
37+
const chromosomeAnnotations: GeneAnnotationItem[] = []
38+
annotations.map((gene, j) => {
39+
if (gene.chromosome === chromosome.id) {
40+
chromosomeAnnotations.push(gene)
41+
}
42+
})
3643
// Render a Chromosome component for each chromosome
3744
return (
3845
<Box key={i}>
3946
<Typography fontSize='30px' noWrap sx={{ marginLeft: '-20px' }}>
4047
{chromosome.name}
4148
</Typography>
42-
<Chromosome scale={scale} chromosome={chromosome} />
49+
<Chromosome
50+
chromosome={chromosome}
51+
annotations={chromosomeAnnotations}
52+
scale={scale}
53+
/>
4354
<Typography sx={{ fontSize: 8 }} noWrap>
4455
{(chromosome.size * 0.000001).toLocaleString()}Mb
4556
</Typography>

‎Eplant/views/ChromosomeViewer/index.tsx‎

Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@
66
* --------------------
77
* */
88

9-
import React, { useState } from 'react'
9+
import React, { useEffect, useState } from 'react'
1010
import { Space } from 'react-zoomable-ui'
1111

1212
import GeneticElement from '@eplant/GeneticElement'
13+
import { useGeneticElements } from '@eplant/state'
1314
import Box from '@mui/material/Box'
1415
import CircularProgress from '@mui/material/CircularProgress'
1516
import Snackbar from '@mui/material/Snackbar'
@@ -25,8 +26,10 @@ import {
2526
ChromosomeViewerAction,
2627
ChromosomeViewerData,
2728
ChromosomeViewerState,
29+
GeneAnnotationItem,
2830
Transform,
2931
} from './types'
32+
import { getGeneAnnotation } from './utilities'
3033
import ZoomControls from './ZoomControls'
3134

3235
const ChromosomeViewer: View<
@@ -52,11 +55,14 @@ const ChromosomeViewer: View<
5255
) {
5356
const poplar = false
5457
const species = poplar ? 'Populus_trichocarpa' : 'Arabidopsis_thaliana'
55-
const url = `https://bar.utoronto.ca/eplant${
58+
const urlPrefix = `https://bar.utoronto.ca/eplant${
5659
poplar ? '_poplar' : ''
57-
}/cgi-bin/chromosomeinfo.cgi?species=${species}`
60+
}/cgi-bin`
61+
const chromosomeUrl = `/chromosomeinfo.cgi?species=${species}`
5862

59-
const chromosomeViewData: ChromosomeItem[] = await fetch(url)
63+
const chromosomeViewData: ChromosomeItem[] = await fetch(
64+
urlPrefix + chromosomeUrl
65+
)
6066
.then((response) => response.json())
6167
.then((responseObj: ChromosomesResponseObj) => responseObj['chromosomes'])
6268

@@ -82,6 +88,45 @@ const ChromosomeViewer: View<
8288
>) {
8389
const spaceRef = React.useRef<Space | null>(null)
8490
const [messageOpen, setMessageOpen] = useState(true)
91+
const [annotationArray, setAnnotationArray] = useState<
92+
GeneAnnotationItem[]
93+
>([])
94+
95+
// Global State
96+
const [geneticElements] = useGeneticElements()
97+
98+
//converts geneticElements into array of gene annotations
99+
useEffect(() => {
100+
const poplar = false
101+
const species = poplar ? 'Populus_trichocarpa' : 'Arabidopsis_thaliana'
102+
let newAnnotationArray: GeneAnnotationItem[] = []
103+
geneticElements.map((gene) => {
104+
// for each item in geneticElements, fetch it's gene information to add to it's geneAnnotation
105+
fetch(
106+
`https://bar.utoronto.ca/eplant${
107+
poplar ? '_poplar' : ''
108+
}/cgi-bin/querygene.cgi?species=${species}&term=${gene.id}`
109+
)
110+
.then((response) => response.json())
111+
.then((geneItem) => {
112+
newAnnotationArray = annotationArray
113+
const geneAnnotation: GeneAnnotationItem =
114+
getGeneAnnotation(geneItem)
115+
116+
// Make sure new geneAnnotation is not already in geneAnnotationArray
117+
if (
118+
!newAnnotationArray.some((gene) => gene.id === geneAnnotation.id)
119+
) {
120+
newAnnotationArray.push(geneAnnotation)
121+
setAnnotationArray(newAnnotationArray)
122+
}
123+
})
124+
.catch((err) => {
125+
console.log(err)
126+
})
127+
})
128+
}, [geneticElements])
129+
85130
const handleClose = () => {
86131
setMessageOpen(false)
87132
}
@@ -102,7 +147,7 @@ const ChromosomeViewer: View<
102147
vp.setBounds({
103148
x: [-650, 1300],
104149
y: [-450, 815],
105-
zoom: [0.05, 1000 - 0.3],
150+
zoom: [0.02, 1000 - 0.3],
106151
})
107152
}}
108153
onUpdated={(vp) => {
@@ -119,6 +164,7 @@ const ChromosomeViewer: View<
119164
>
120165
<ChromosomeView
121166
chromosomes={activeData.viewData}
167+
annotations={annotationArray}
122168
scale={state.transform.dZoom}
123169
/>
124170
</Space>

Eplant/views/ChromosomeViewer/Viewer/utilities.ts renamed to Eplant/views/ChromosomeViewer/utilities.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
GeneAnnotationItem,
88
GeneItem,
99
GeneRange,
10-
} from '../types'
10+
} from './types'
1111

1212
/**
1313
* formats a GeneItem into GeneAnnotationItem

0 commit comments

Comments
 (0)