Skip to content

Commit d362c20

Browse files
jpfisher72jpfisher72
authored
Homepage (#14)
Homepage + GB + ATAC Bar Plot
1 parent 6d9be70 commit d362c20

21 files changed

+534
-857
lines changed

‎immuscreen/public/assets/disease-trait.png

422 KB
Loading

‎immuscreen/public/assets/gene-bcre.png

415 KB
Loading

‎immuscreen/public/assets/single-cell.png

420 KB
Loading

‎immuscreen/public/assets/snp-qtl.png

518 KB
Loading

‎immuscreen/src/app/gene/page.tsx

+139-160
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"use client"
2-
import React, { useState} from "react"
2+
import React, { useState } from "react"
33
import { Tabs, Tab, Typography, colors } from "@mui/material"
44
import { client } from "../../common/utils"
55
import { StyledTab } from "../../common/utils"
@@ -15,10 +15,19 @@ import ToggleButton from '@mui/material/ToggleButton';
1515
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
1616

1717

18-
const Gene = () =>{
18+
const Gene = () => {
1919
const searchParams: ReadonlyURLSearchParams = useSearchParams()!
20+
2021
const [value, setValue] = useState(0)
21-
22+
const [colorScheme, setcolorScheme] = useState('geneexp');
23+
24+
const handleColorSchemeChange = (
25+
event: React.MouseEvent<HTMLElement>,
26+
newScheme: string,
27+
) => {
28+
setcolorScheme(newScheme);
29+
};
30+
2231
const handleChange = (_, newValue: number) => {
2332
setValue(newValue)
2433
}
@@ -65,172 +74,142 @@ const Gene = () =>{
6574
client,
6675
})
6776

68-
69-
const [colorScheme, setcolorScheme] = useState('genexp');
70-
const handleColorSchemeChange = (
71-
event: React.MouseEvent<HTMLElement>,
72-
newScheme: string,
73-
) => {
74-
setcolorScheme(newScheme);
75-
};
76-
77-
return !searchParams.get('gene') ? <main>
78-
79-
<Grid2 container spacing={6} sx={{ mr: "auto", ml: "auto", mt: "3rem" }}>
80-
<Grid2 xs={6} sx={{ mt: "5em", ml:"2em"}}>
81-
<Typography variant="h3">Gene Portal</Typography>
82-
83-
<br/>
84-
85-
<br/>
86-
<br/>
87-
{<GeneAutoComplete textColor={"black"} assembly={"GRCh38"} /> }
77+
return (
78+
searchParams.get('gene') ?
79+
// Gene Selected View
80+
<Grid2 container sx={{ maxWidth: "80%", mr: "auto", ml: "auto", mt: "3rem" }}>
81+
<Grid2 container spacing={3} sx={{ mt: "2rem", mb: "1rem" }}>
82+
<Grid2 xs={12} lg={12}>
83+
{searchParams.get("gene") && <Typography variant="h4">Gene Details: {searchParams.get("gene")}</Typography>}
84+
</Grid2>
85+
<Grid2 xs={12} lg={12}>
86+
<Tabs aria-label="basic tabs example" value={value} onChange={handleChange}>
87+
<StyledTab label="Genome Browser" />
88+
<StyledTab label="eQTLs" />
89+
<StyledTab label="Gene Expression UMAP" />
90+
</Tabs>
91+
</Grid2>
8892
</Grid2>
89-
90-
</Grid2>
91-
92-
</main>: (
93-
<main>
94-
<Grid2 container sx={{ maxWidth: "80%", mr: "auto", ml: "auto", mt: "3rem" }}>
95-
<Grid2 container spacing={3} sx={{ mt: "2rem", mb: "1rem" }}>
96-
<Grid2 xs={12} lg={12}>
97-
{searchParams.get("gene") && <Typography variant="h4">Gene Details: {searchParams.get("gene")}</Typography>}
98-
</Grid2>
99-
<Grid2 xs={12} lg={12}>
100-
<Tabs aria-label="basic tabs example" value={value} onChange={handleChange}>
101-
<StyledTab label="Genome Browser" />
102-
<StyledTab label="eQTLs" />
103-
<StyledTab label="Gene Expression UMAP" />
104-
</Tabs>
105-
</Grid2>
93+
{value === 0 &&
94+
<Grid2 xs={12}>
95+
<GenomeBrowserView
96+
gene={searchParams.get('gene')}
97+
assembly={"GRCh38"}
98+
coordinates={{
99+
start: +searchParams.get("start") - 20000, end: +searchParams.get("end") + 20000,
100+
chromosome: searchParams.get("chromosome")
101+
}}
102+
/>
103+
</Grid2>
104+
}
105+
{value === 1 && !loading && !soskicLoading && !yazarLoading &&
106+
<Grid2 container spacing={3}>
107+
<Grid2 xs={6} lg={6}>
108+
<DataTable
109+
columns={[
110+
{
111+
header: "Variant Id",
112+
value: (row) => row.variant_id || "",
113+
},
114+
{
115+
header: "Nominal P-Value",
116+
value: (row) => row.pval_nominal && row.pval_nominal.toExponential(2) || 0,
117+
},
118+
{
119+
header: "Beta P-Value",
120+
value: (row) => row.pval_beta && row.pval_beta.toExponential(2) || 0,
121+
}
122+
]}
123+
tableTitle={`GTEX whole-blood eQTLs for ${searchParams.get('gene')}:`}
124+
rows={data?.icreeQTLQuery || []}
125+
itemsPerPage={10}
126+
/>
106127
</Grid2>
107-
108-
{value===1 && !loading && !soskicLoading && !yazarLoading &&
109-
<Grid2 container>
110-
<Grid2 xs={6} lg={6}>
111-
<DataTable
112-
columns={[
113-
114-
{
115-
header: "Variant Id",
116-
value: (row) => row.variant_id || "",
117-
118-
},
119-
{
120-
header: "Nominal P-Value",
121-
value: (row) => row.pval_nominal && row.pval_nominal.toExponential(2) || 0,
122-
},
123-
{
124-
header: "Beta P-Value",
125-
value: (row) => row.pval_beta && row.pval_beta.toExponential(2) || 0,
126-
}
127-
128-
]}
129-
tableTitle={`GTEX whole-blood eQTLs for ${searchParams.get('gene')}:`}
130-
rows={data?.icreeQTLQuery || []}
131-
132-
133-
itemsPerPage={10}
134-
/>
135-
</Grid2>
136-
<Grid2 xs={0.5} lg={0.5}></Grid2>
137-
<Grid2 xs={5.5} lg={5.5}>
138-
<DataTable
139-
columns={[
140-
141-
{
142-
header: "SNP",
143-
value: (row) => row.rsid || "",
144-
145-
},
146-
147-
{
148-
header: "P-Value",
149-
value: (row) => row.pvalue && row.pvalue.toExponential(2) || 0 ,
150-
},
151-
{
152-
header: "Q-Value",
153-
value: (row) => row.qvalue && row.qvalue.toExponential(2) || 0,
154-
},
155-
{
156-
header: "Celltype",
157-
value: (row) => row.celltype || "",
158-
159-
}
160-
]}
161-
tableTitle={`Yazar.Powell eQTLs for ${searchParams.get('gene')}:`}
162-
rows={(yazarData.icreeQTLQuery) || []}
163-
164-
sortColumn={3}
165-
itemsPerPage={10}
166-
/>
167-
</Grid2>
168-
169-
<Grid2 xs={6} lg={6}>
170-
<DataTable
171-
columns={[
172-
173-
{
174-
header: "Variant Id",
175-
value: (row) => row.variant_id || "",
176-
177-
},
178-
{
179-
header: "Nominal P-Value",
180-
value: (row) => row.pval_nominal && row.pval_nominal.toExponential(2) || 0,
181-
},
182-
{
183-
header: "Beta P-Value",
184-
value: (row) => row.pval_beta && row.pval_beta.toExponential(2) || 0,
185-
},
186-
{
187-
header: "Celltype",
188-
value: (row) => row.celltype || "",
189-
190-
}
191-
]}
192-
tableTitle={`Soskic.Trynka eQTLs have been identified for ${searchParams.get('gene')}:`}
193-
rows={(soskicData.icreeQTLQuery) || []}
194-
195-
sortColumn={3}
196-
itemsPerPage={10}
197-
/>
198-
199-
</Grid2>
200-
201-
202-
</Grid2>
203-
}
204-
{value===0 && <GenomeBrowserView
205-
gene={searchParams.get('gene')}
206-
207-
assembly={"GRCh38"}
208-
coordinates={{ start: +searchParams.get("start")-20000, end: +searchParams.get("end")+20000,
209-
chromosome:searchParams.get("chromosome") }}
210-
/>}
211-
{value===2 && rnumapdata && !rnaumaploading && rnumapdata.calderonRnaUmapQuery.length>0 &&
212-
<Grid2 xs={12} lg={12}>
213-
Color Scheme:
214-
<br/><br/>
215-
<ToggleButtonGroup
128+
<Grid2 xs={6} lg={6}>
129+
<DataTable
130+
columns={[
131+
{
132+
header: "SNP",
133+
value: (row) => row.rsid || "",
134+
},
135+
{
136+
header: "P-Value",
137+
value: (row) => row.pvalue && row.pvalue.toExponential(2) || 0,
138+
},
139+
{
140+
header: "Q-Value",
141+
value: (row) => row.qvalue && row.qvalue.toExponential(2) || 0,
142+
},
143+
{
144+
header: "Celltype",
145+
value: (row) => row.celltype || "",
146+
}
147+
]}
148+
tableTitle={`Yazar.Powell eQTLs for ${searchParams.get('gene')}:`}
149+
rows={(yazarData.icreeQTLQuery) || []}
150+
sortColumn={3}
151+
itemsPerPage={10}
152+
/>
153+
</Grid2>
154+
<Grid2 xs={6} lg={6}>
155+
<DataTable
156+
columns={[
157+
{
158+
header: "Variant Id",
159+
value: (row) => row.variant_id || "",
160+
},
161+
{
162+
header: "Nominal P-Value",
163+
value: (row) => row.pval_nominal && row.pval_nominal.toExponential(2) || 0,
164+
},
165+
{
166+
header: "Beta P-Value",
167+
value: (row) => row.pval_beta && row.pval_beta.toExponential(2) || 0,
168+
},
169+
{
170+
header: "Celltype",
171+
value: (row) => row.celltype || "",
172+
}
173+
]}
174+
tableTitle={`Soskic.Trynka eQTLs for ${searchParams.get('gene')}:`}
175+
rows={(soskicData.icreeQTLQuery) || []}
176+
sortColumn={3}
177+
itemsPerPage={10}
178+
/>
179+
</Grid2>
180+
</Grid2>
181+
}
182+
{value === 2 && rnumapdata && !rnaumaploading && rnumapdata.calderonRnaUmapQuery.length > 0 &&
183+
<Grid2 xs={12} lg={12}>
184+
Color Scheme:
185+
<br /><br />
186+
<ToggleButtonGroup
216187
color="primary"
217188
value={colorScheme}
218189
exclusive
219190
onChange={handleColorSchemeChange}
220191
aria-label="Platform"
221-
>
222-
<ToggleButton value="geneexp">Gene Expression</ToggleButton>
223-
<ToggleButton value="celltype">CellType Cluster</ToggleButton>
192+
>
193+
<ToggleButton value="geneexp">Gene Expression</ToggleButton>
194+
<ToggleButton value="celltype">CellType Cluster</ToggleButton>
224195
</ToggleButtonGroup>
225-
<br/>
226-
<br/>
227-
<UmapPlot colorScheme={colorScheme} data={rnumapdata.calderonRnaUmapQuery.map(d=>{return {...d, value: Math.log(d.value+0.01)} })} plottitle={"log10 TPM"}/>
228-
</Grid2>
229-
}
196+
<br />
197+
<br />
198+
<UmapPlot colorScheme={colorScheme} data={rnumapdata.calderonRnaUmapQuery.map(d => { return { ...d, value: Math.log(d.value + 0.01) } })} plottitle={"log10 TPM"} />
199+
</Grid2>
200+
}
201+
</Grid2>
202+
:
203+
//Gene Not Selected View
204+
<Grid2 container spacing={6} sx={{ mr: "auto", ml: "auto", mt: "3rem" }}>
205+
<Grid2 xs={6} sx={{ mt: "5em", ml: "2em" }}>
206+
<Typography variant="h3">Gene Portal</Typography>
207+
<br />
208+
<br />
209+
<br />
210+
{<GeneAutoComplete textColor={"black"} assembly={"GRCh38"} />}
230211
</Grid2>
231-
232-
233-
</main>
212+
</Grid2>
234213
)
235214
}
236215

‎immuscreen/src/app/globals.css

-1
Original file line numberDiff line numberDiff line change
@@ -397,7 +397,6 @@ template {
397397

398398
/* Limit the amount of space the content can take up so it doesn't run into edge */
399399
#body-wrapper {
400-
max-width: 95%;
401400
margin-left: auto;
402401
margin-right: auto;
403402
}

‎immuscreen/src/app/icres/atacbarplot.tsx

+12-2
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const CellTypesLegends = ({ title, plottitle, children }: { title: string; plott
7676

7777

7878
export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study: string, barplotdata: { color: string, ct_description?: string, celltype: string, class: string, subclass: string, description: string, order: number, value: number, name: string, study: string, group: string, grouping: string, stimulation: string }[] }> = (props) => {
79-
const width = 800
79+
const width = 1000
8080
const height = 700
8181
const margin = { top: 40, right: 8, bottom: 40, left: 60 };
8282
const xMax = width - margin.left - margin.right;
@@ -202,7 +202,16 @@ export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study:
202202
x2={xMax}
203203
stroke="#000000"
204204
/>
205-
205+
{yScale.domain()[1] > 1.64 &&
206+
<line
207+
y1={yScale(1.64)}
208+
y2={yScale(1.64)}
209+
x1={0}
210+
x2={xMax}
211+
stroke="#000000"
212+
strokeDasharray={'5 7'}
213+
/>
214+
}
206215
</Group>
207216
<AxisBottom
208217
left={margin.left}
@@ -235,6 +244,7 @@ export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study:
235244
}}
236245
tickFormat={yScaleTickFormat}
237246
tickValues={ticks}
247+
label="ATAC Signal Z-Score"
238248
/>
239249
<Group top={margin.top} left={margin.left}>
240250
{/* Axis Break */}

0 commit comments

Comments
 (0)