Skip to content

Commit

Permalink
Handle error in iCRE table, fix typo
Browse files Browse the repository at this point in the history
  • Loading branch information
@jpfisher72
jpfisher72 committed Apr 23, 2024
1 parent 27ae6c7 commit 1869475
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 142 deletions.
2 changes: 1 addition & 1 deletion immuscreen/src/app/gene/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ const Gene = () =>{

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


itemsPerPage={10}
Expand Down
299 changes: 158 additions & 141 deletions immuscreen/src/app/icres/icresbyregion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { client } from "../../common/utils"
import { DataTable } from "@weng-lab/psychscreen-ui-components"
import React, { useState } from "react"
import { useQuery } from "@apollo/client"
import { ApolloError, useQuery } from "@apollo/client"
import { gql } from "@apollo/client"
import { ReadonlyURLSearchParams, useSearchParams, useRouter } from "next/navigation"
import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
Expand All @@ -26,7 +26,7 @@ export const IcresByRegion = (props) => {
type ICRE_Data = { accession: string, rdhs: string, celltypes: CellQueryValue[], coordinates: { chromosome: string, start: number, end: number, } }
type Experiment_Data = { grouping: string, description: string, name: string, start: number, value: number }

const { loading: loading_icres, data: data_icres }: { loading: boolean, data: { iCREQuery: ICRE_Data[] } } = useQuery(ICRES_QUERY, {
const { loading: loading_icres, data: data_icres, error: error_icres }: { loading: boolean, data: { iCREQuery: ICRE_Data[] }, error?: ApolloError } = useQuery(ICRES_QUERY, {
variables: {
coordinates: {
chromosome: searchParams.get("chromosome"),
Expand Down Expand Up @@ -84,159 +84,176 @@ export const IcresByRegion = (props) => {
</Tabs>
</Grid2>
</Grid2>
{value === 0 && !loading_icres ? <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: "Active Cell Types",
value: (row) => row.celltypes.map(x => getCellDisplayName(x)).length,
FunctionalRender: (row) => {
const [open, setOpen] = useState(false)

const celltypes = [... new Set(row.celltypes.map(x => getCellDisplayName(x, true)))].sort()

const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.stopPropagation()
setOpen(!open);
};

return (
celltypes.length > 0 ?
<List>
<ListItemButton onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => handleClick(event)}>
<ListItemText primary={"Active in " + celltypes.length + " immune cell types"} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout="auto" unmountOnExit>
<List sx={{ pl: 2 }} component="div" disablePadding>
{
celltypes.map((cell: string) =>
<ListItemText key={cell} primary={"\u2022 " + cell} />
)
}
</List>
</Collapse>
</List>
:
<Typography pl={2}>Not Active</Typography>
)
}
},
{
header: "Active Experiments",
HeaderRender: () => {
return (
<Stack direction={"row"} spacing={1} alignItems={"center"}>
<Typography variant="body2">
Active Experiments
</Typography>
<Tooltip title="Activity in individual experiments determined by an ATAC-seq signal z-score of >1.65 (95th percentile)">
<InfoOutlined />
</Tooltip>
</Stack>
)
{value === 0 &&
loading_icres ?
<CircularProgress />
:
error_icres ?
<Typography>There was an error fetching data, please try again soon!</Typography>
:
<DataTable
columns={[
{
header: "Accession",
value: (row) => row.accession,

},
value: (row: ICRE_Row) => row?.activeExps ? Object.values(row.activeExps).flat().length : 0,
FunctionalRender: (row: ICRE_Row) => {
const [open, setOpen] = useState(false)
{
header: "rDHS",
value: (row) => row.rdhs,
},
{
header: "Chromosome",
value: (row) => row.coordinates.chromosome || "",

const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.stopPropagation()
setOpen(!open);
};
},
{
header: "Start",
value: (row) => row.coordinates.start || "",

},
{
header: "End",
value: (row) => row.coordinates.end || "",

type GroupListProps = { exps: Experiment_Data[], grouping: string }
},
{
header: "Active Cell Types",
HeaderRender: () => {
return (
<Stack direction={"row"} spacing={1} alignItems={"center"}>
<Typography variant="body2">
Active Cell Types
</Typography>
<Tooltip title="Activity in cell types determined by aggregated ATAC-seq signal z-score of >1.64 (95th percentile)">
<InfoOutlined />
</Tooltip>
</Stack>
)
},
value: (row) => row.celltypes.map(x => getCellDisplayName(x)).length,
FunctionalRender: (row) => {
const [open, setOpen] = useState(false)

const GroupList: React.FC<GroupListProps> = (props: GroupListProps) => {
const [openGroup, setOpenGroup] = useState(false)
const celltypes = [... new Set(row.celltypes.map(x => getCellDisplayName(x, true)))].sort()

const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.stopPropagation()
setOpenGroup(!openGroup);
setOpen(!open);
};

return (
<List disablePadding>
<ListItemButton onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => handleClick(event)}>
<ListItemText primary={`${props.grouping} (${props.exps.length})`} />
{openGroup ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={openGroup} timeout="auto" unmountOnExit>
<List sx={{ pl: 2 }} component="div" disablePadding>
{
props.exps.sort((a, b) => experimentInfo[a.name].order - experimentInfo[b.name].order).map((exp) =>
<Tooltip key={exp.name} title={exp.description}>
<Stack direction={"row"} alignItems={"center"}>
<ListItemText primary={"\u2022 " + exp.name} />
<InfoOutlined fontSize="small" />
</Stack>
</Tooltip>
)
}
</List>
</Collapse>
</List>
celltypes.length > 0 ?
<List>
<ListItemButton onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => handleClick(event)}>
<ListItemText primary={"Active in " + celltypes.length + " immune cell types"} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout="auto" unmountOnExit>
<List sx={{ pl: 2 }} component="div" disablePadding>
{
celltypes.map((cell: string) =>
<ListItemText key={cell} primary={"\u2022 " + cell} />
)
}
</List>
</Collapse>
</List>
:
<Typography pl={2}>Not Active</Typography>
)
}
},
{
header: "Active Experiments",
HeaderRender: () => {
return (
<Stack direction={"row"} spacing={1} alignItems={"center"}>
<Typography variant="body2">
Active Experiments
</Typography>
<Tooltip title="Activity in individual experiments determined by an ATAC-seq signal z-score of >1.64 (95th percentile)">
<InfoOutlined />
</Tooltip>
</Stack>
)
},
value: (row: ICRE_Row) => row?.activeExps ? Object.values(row.activeExps).flat().length : 0,
FunctionalRender: (row: ICRE_Row) => {
const [open, setOpen] = useState(false)

return (
row?.activeExps ?
<List disablePadding>
<ListItemButton onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => handleClick(event)}>
<ListItemText primary={"Active in " + Object.values(row.activeExps).flat().length + " experiments"} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout="auto" unmountOnExit>
<List sx={{ pl: 2 }} component="div" disablePadding>
{
Object.entries(row.activeExps).map(([grouping, exps]: [string, Experiment_Data[]]) =>
<GroupList key={grouping} exps={exps} grouping={grouping} />
)
}
</List>
</Collapse>
</List>
:
<CircularProgress />
)
}
},
]}
tableTitle={`iCREs`}
rows={rowsWithExps ?? rowsNoExps}
onRowClick={(row) => {
router.push(`/icres?accession=${row.accession}`)
}}
sortColumn={3}
itemsPerPage={10}
searchable
/>
:
<CircularProgress />
const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.stopPropagation()
setOpen(!open);
};


type GroupListProps = { exps: Experiment_Data[], grouping: string }

const GroupList: React.FC<GroupListProps> = (props: GroupListProps) => {
const [openGroup, setOpenGroup] = useState(false)

const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.stopPropagation()
setOpenGroup(!openGroup);
};

return (
<List disablePadding>
<ListItemButton onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => handleClick(event)}>
<ListItemText primary={`${props.grouping} (${props.exps.length})`} />
{openGroup ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={openGroup} timeout="auto" unmountOnExit>
<List sx={{ pl: 2 }} component="div" disablePadding>
{
props.exps.sort((a, b) => experimentInfo[a.name].order - experimentInfo[b.name].order).map((exp) =>
<Tooltip key={exp.name} title={exp.description}>
<Stack direction={"row"} alignItems={"center"}>
<ListItemText primary={"\u2022 " + exp.name} />
<InfoOutlined fontSize="small" />
</Stack>
</Tooltip>
)
}
</List>
</Collapse>
</List>
)
}

return (
row?.activeExps ?
<List disablePadding>
<ListItemButton onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => handleClick(event)}>
<ListItemText primary={"Active in " + Object.values(row.activeExps).flat().length + " experiments"} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout="auto" unmountOnExit>
<List sx={{ pl: 2 }} component="div" disablePadding>
{
Object.entries(row.activeExps).map(([grouping, exps]: [string, Experiment_Data[]]) =>
<GroupList key={grouping} exps={exps} grouping={grouping} />
)
}
</List>
</Collapse>
</List>
:
<CircularProgress />
)
}
},
]}
tableTitle={`iCREs`}
rows={rowsWithExps ?? rowsNoExps}
onRowClick={(row) => {
router.push(`/icres?accession=${row.accession}`)
}}
sortColumn={3}
itemsPerPage={10}
searchable
/>
}
</Grid2>
</main>
Expand Down

0 comments on commit 1869475

Please sign in to comment.