Skip to content

Commit

Permalink
Modify SNP Page
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpfisher72
jpfisher72 committed Apr 25, 2024
1 parent e8952d1 commit 599f6ec
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 122 deletions.
4 changes: 2 additions & 2 deletions immuscreen/src/app/gene/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ const Gene = () =>{
}

]}
tableTitle={`GTEX eQTLs have been identified for ${searchParams.get('gene')}:`}
tableTitle={`GTEX whole-blood eQTLs for ${searchParams.get('gene')}:`}
rows={data?.icreeQTLQuery || []}


Expand Down Expand Up @@ -158,7 +158,7 @@ const Gene = () =>{

}
]}
tableTitle={`Yazar.Powell eQTLs have been identified for ${searchParams.get('gene')}:`}
tableTitle={`Yazar.Powell eQTLs for ${searchParams.get('gene')}:`}
rows={(yazarData.icreeQTLQuery) || []}

sortColumn={3}
Expand Down
260 changes: 140 additions & 120 deletions immuscreen/src/app/snp/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client"
import React, { useState } from "react"
import React, { useMemo, useState } from "react"
import { DataTable } from "@weng-lab/psychscreen-ui-components"
import { Tabs, Typography } from "@mui/material"
import { CircularProgress, Tabs, Typography } from "@mui/material"
import { client } from "../../common/utils"
import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
import { ReadonlyURLSearchParams, useSearchParams, usePathname } from "next/navigation"
Expand All @@ -12,6 +12,7 @@ import { SnpAutoComplete } from "../../common/components/mainsearch/SnpAutocompl
import { StyledTab } from "../../common/utils"
import { ICRES_QUERY, EBI_ASSO_QUERY } from "../icres/queries"
import { getCellDisplayName } from "../celllineage/utils"
import { ActiveCellTypesList } from "../icres/utils"

const EQTL_QUERY = gql`
query iCREeQTLQuery($study: String!, $rsid: String) {
Expand Down Expand Up @@ -71,7 +72,7 @@ const Snp = () => {
client,
})

const { loading: loadingSNP, data: dataSNP } = useQuery(SNP_Query, {
const { loading: loadingSNP, data: dataSNP, error: errorSNP } = useQuery(SNP_Query, {
variables: {
snpids: [snp]
},
Expand All @@ -81,12 +82,65 @@ const Snp = () => {

const { loading: loadingOverlapICRE, data: dataOverlapICRE } = useQuery(ICRES_QUERY, {
variables: {
coordinates: { chromosome: dataSNP?.snpQuery[0].coordinates.chromosome, start: dataSNP?.snpQuery[0].coordinates.start - 2000, end: dataSNP?.snpQuery[0].coordinates.start + 2000 }
coordinates: { chromosome: dataSNP?.snpQuery[0].coordinates.chromosome, start: dataSNP?.snpQuery[0].coordinates.end - 2000, end: dataSNP?.snpQuery[0].coordinates.end + 2000 }
},
skip: loadingSNP || !dataSNP,
client,
})

const NearbyICREs = () => useMemo(() => {
return (
<DataTable
columns={[
{
header: "Distance to SNP",
value: (row) => Math.abs(row.coordinates.start - dataSNP?.snpQuery[0].coordinates.end),
FunctionalRender: (row) => {
return (
loadingSNP ? <CircularProgress />
: errorSNP ? <Typography>Error fetching SNP location</Typography>
: <Typography>{Math.abs(row.coordinates.start - dataSNP?.snpQuery[0].coordinates.end)}</Typography>
)
}
},
{
header: "Accession",
value: (row) => row.accession,
},
{
header: "rDHS",
value: (row) => row.rdhs,
},
{
header: "Chromosome",
value: (row) => row.coordinates.chromosome,
},
{
header: "Start",
value: (row) => row.coordinates.start,
},
{
header: "End",
value: (row) => row.coordinates.end,
},
{
header: "Class",
value: (row) => row.group,
},
{
header: "Cell Type Specific Activity",
value: (row) => row.celltypes.length,
FunctionalRender: (row) => <ActiveCellTypesList celltypes={row.celltypes} />
},
]}
tableTitle={`iCREs within 2kbp of ${snp}`}
rows={dataOverlapICRE?.iCREQuery || []}
itemsPerPage={10}
sortDescending
/>
)
}, [dataOverlapICRE, dataSNP, loadingSNP, errorSNP])

return !snp ? (<main>

<Grid2 container spacing={6} sx={{ mr: "auto", ml: "auto", mt: "3rem" }}>
Expand All @@ -104,124 +158,90 @@ const Snp = () => {
<Grid2 xs={12} lg={12}>
{snp && <Typography variant="h4">SNP Details: {snp}{dataSNP && " - " + dataSNP.snpQuery[0].coordinates.chromosome + ":" + dataSNP.snpQuery[0].coordinates.end}</Typography>}
<Tabs aria-label="snps_tabs" value={value} onChange={handleChange}>
<StyledTab label="eQTLs" />
<StyledTab label="GWAS Variants" />
<StyledTab label="Nearby iCREs" />
<StyledTab label="eQTLs + GWAS Variants" />
</Tabs>
</Grid2>
<Grid2 xs={12} lg={12}>
<DataTable
columns={[
{
header: "Accession",
value: (row) => row.accession,
},
{
header: "rDHS",
value: (row) => row.rdhs,
},
{
header: "Chromosome",
value: (row) => row.coordinates.chromosome,
},
{
header: "Start",
value: (row) => row.coordinates.start,
},
{
header: "End",
value: (row) => row.coordinates.end,
},
{
header: "Class",
value: (row) => row.group,
},
{
header: "Cell Type Specific Activity",
value: (row) => [... new Set(row.celltypes.map(x => getCellDisplayName(x, true)))].join(', '),
},
]}
tableTitle={`iCREs within 2kbp of ${snp}:`}
rows={dataOverlapICRE?.iCREQuery || []}
itemsPerPage={10}
sortColumn={3}
/>
</Grid2>
<Grid2 xs={12} lg={12}>
<DataTable
columns={[
{
header: "Gene Id",
value: (row) => row.geneid || "",
},
{
header: "P-Value",
value: (row) => row.pvalue && row.pvalue.toExponential(2) || 0,
},
{
header: "Q-Value",
value: (row) => row.qvalue && row.qvalue.toExponential(2) || 0,
},
{
header: "Celltype",
value: (row) => row.celltype || "",
}
]}
tableTitle={`Yazar.Powell eQTLs identified for ${searchParams.get('rsid')}:`}
rows={data?.icreeQTLQuery || []}
itemsPerPage={10}
/>
</Grid2>
<Grid2 xs={12} lg={12}>
<DataTable
columns={[
{
header: "Chromosome",
value: (row) => row.chromosome,
},
{
header: "Position",
value: (row) => row.position,
},
{
header: "Strongest snp risk allele",
value: (row) => row.strongest_snp_risk_allele,
},
{
header: "Risk Allele Frequency",
value: (row) => row.risk_allele_frequency,

},
{
header: "P-Value",
value: (row) => row.p_value && row.p_value.toExponential(2) || 0,
},
{
header: "Study",
value: (row) => row.study,
},
{
header: "Region",
value: (row) => row.region,
},
{
header: "Immu screen trait",
value: (row) => row.immu_screen_trait
},
{
header: "mapped_trait",
value: (row) => row.mapped_trait
},
{
header: "Pubmed Id",
value: (row) => row.pubmedid
}
]}
tableTitle={`Trait Associations for ${snp}:`}
rows={ebidata?.ebiAssociationsQuery || []}
sortColumn={3}
itemsPerPage={10}
/>
</Grid2>
{value === 0 &&
<Grid2 xs={12} lg={12}>
<NearbyICREs />
</Grid2>
}
{value === 1 &&
<><Grid2 xs={12} lg={12}>
<DataTable
columns={[
{
header: "Gene Id",
value: (row) => row.geneid || "",
},
{
header: "P-Value",
value: (row) => row.pvalue && row.pvalue.toExponential(2) || 0,
},
{
header: "Q-Value",
value: (row) => row.qvalue && row.qvalue.toExponential(2) || 0,
},
{
header: "Celltype",
value: (row) => row.celltype || "",
}
]}
tableTitle={`Yazar.Powell eQTLs for ${searchParams.get('rsid')}`}
rows={data?.icreeQTLQuery || []}
itemsPerPage={10} />
</Grid2>
<Grid2 xs={12} lg={12}>
<DataTable
columns={[
{
header: "Chromosome",
value: (row) => row.chromosome,
},
{
header: "Position",
value: (row) => row.position,
},
{
header: "Strongest snp risk allele",
value: (row) => row.strongest_snp_risk_allele,
},
{
header: "Risk Allele Frequency",
value: (row) => row.risk_allele_frequency,
},
{
header: "P-Value",
value: (row) => row.p_value && row.p_value.toExponential(2) || 0,
},
{
header: "Study",
value: (row) => row.study,
},
{
header: "Region",
value: (row) => row.region,
},
{
header: "Immu screen trait",
value: (row) => row.immu_screen_trait
},
{
header: "mapped_trait",
value: (row) => row.mapped_trait
},
{
header: "Pubmed Id",
value: (row) => row.pubmedid
}
]}
tableTitle={`Trait Associations for ${snp}:`}
rows={ebidata?.ebiAssociationsQuery || []}
sortColumn={3}
itemsPerPage={10} />
</Grid2></>
}
</Grid2>
</main>
)
Expand Down

0 comments on commit 599f6ec

Please sign in to comment.