-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
1869475
commit 26b3d2c
Showing
6 changed files
with
166 additions
and
105 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
import { CellQueryValue } from "../celllineage/types" | ||
|
||
|
||
export type ICRE_Data = { accession: string, rdhs: string, celltypes: CellQueryValue[], coordinates: { chromosome: string, start: number, end: number, } } | ||
export type Experiment_Data = { grouping: string, description: string, name: string, start: number, value: number } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
import { useState } from "react"; | ||
import { Experiment_Data } from "./types"; | ||
import { ExpandLess, ExpandMore, InfoOutlined } from "@mui/icons-material"; | ||
import { List, ListItemButton, ListItemText, Collapse, Tooltip, Stack } from "@mui/material"; | ||
import { experimentInfo } from "../../common/consts"; | ||
import { CellQueryValue } from "../celllineage/types"; | ||
import { getCellDisplayName } from "../celllineage/utils"; | ||
|
||
type GroupListProps = { exps: Experiment_Data[], grouping: string } | ||
|
||
const ExperimentGroupList: 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> | ||
) | ||
} | ||
|
||
type ActiveExperimentListProps = { activeExps: { [key: string]: Experiment_Data[] } } | ||
|
||
export const ActiveExperimentList: React.FC<ActiveExperimentListProps> = (props: ActiveExperimentListProps) => { | ||
const [open, setOpen] = useState(false) | ||
|
||
const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { | ||
event.stopPropagation() | ||
setOpen(!open); | ||
}; | ||
|
||
return ( | ||
<List disablePadding> | ||
<ListItemButton onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => handleClick(event)}> | ||
<ListItemText primary={"Active in " + Object.values(props.activeExps).flat().length + " experiments"} /> | ||
{open ? <ExpandLess /> : <ExpandMore />} | ||
</ListItemButton> | ||
<Collapse in={open} timeout="auto" unmountOnExit> | ||
<List sx={{ pl: 2 }} component="div" disablePadding> | ||
{ | ||
Object.entries(props.activeExps).map(([grouping, exps]: [string, Experiment_Data[]]) => | ||
<ExperimentGroupList key={grouping} exps={exps} grouping={grouping} /> | ||
) | ||
} | ||
</List> | ||
</Collapse> | ||
</List> | ||
) | ||
} | ||
|
||
type ActiveCellTypesListProps = { celltypes: CellQueryValue[] } | ||
|
||
export const ActiveCellTypesList: React.FC<ActiveCellTypesListProps> = (props: ActiveCellTypesListProps) => { | ||
const [open, setOpen] = useState(false) | ||
|
||
const celltypes = [... new Set(props.celltypes.map(x => getCellDisplayName(x, true)))].sort() | ||
|
||
const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { | ||
event.stopPropagation() | ||
setOpen(!open); | ||
}; | ||
|
||
return ( | ||
<List disablePadding> | ||
<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> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters