diff --git a/immuscreen/public/igSCREEN.png b/immuscreen/public/igSCREEN.png new file mode 100644 index 0000000..5365237 Binary files /dev/null and b/immuscreen/public/igSCREEN.png differ diff --git a/immuscreen/src/app/icres/icresbyregion.tsx b/immuscreen/src/app/icres/icresbyregion.tsx index 2ee5437..2eff465 100644 --- a/immuscreen/src/app/icres/icresbyregion.tsx +++ b/immuscreen/src/app/icres/icresbyregion.tsx @@ -3,17 +3,17 @@ import { client } from "../../common/utils" import { DataTable } from "@weng-lab/psychscreen-ui-components" import React, { useState } from "react" 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" import { StyledTab } from "../../common/utils" -import { CircularProgress, Collapse, List, ListItemButton, ListItemIcon, ListItemText, Stack, Tooltip, Typography } from "@mui/material" +import { CircularProgress, Collapse, List, ListItemButton, ListItemText, Stack, Tooltip, Typography } from "@mui/material" import { Tabs } from "@mui/material" import { ICRES_ACTIVE_EXPERIMENTS, ICRES_QUERY } from "./queries" import { experimentInfo } from "../../common/consts" import { getCellDisplayName } from "../celllineage/utils" -import { ExpandLess, ExpandMore, InfoOutlined, StarBorder } from "@mui/icons-material" -import { CellQueryValue } from "../celllineage/types" +import { ExpandLess, ExpandMore, InfoOutlined } from "@mui/icons-material" +import { ICRE_Data, Experiment_Data } from "./types" +import { ActiveCellTypesList, ActiveExperimentList } from "./utils" export const IcresByRegion = (props) => { const searchParams: ReadonlyURLSearchParams = useSearchParams()! @@ -23,9 +23,6 @@ export const IcresByRegion = (props) => { setValue(newValue) } - 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, error: error_icres }: { loading: boolean, data: { iCREQuery: ICRE_Data[] }, error?: ApolloError } = useQuery(ICRES_QUERY, { variables: { coordinates: { @@ -125,7 +122,7 @@ export const IcresByRegion = (props) => { Active Cell Types - + @@ -133,34 +130,8 @@ export const IcresByRegion = (props) => { }, 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) => { - event.stopPropagation() - setOpen(!open); - }; - return ( - celltypes.length > 0 ? - - ) => handleClick(event)}> - - {open ? : } - - - - { - celltypes.map((cell: string) => - - ) - } - - - - : - Not Active + ) } }, @@ -172,7 +143,7 @@ export const IcresByRegion = (props) => { Active Experiments - + @@ -180,65 +151,9 @@ export const IcresByRegion = (props) => { }, value: (row: ICRE_Row) => row?.activeExps ? Object.values(row.activeExps).flat().length : 0, FunctionalRender: (row: ICRE_Row) => { - const [open, setOpen] = useState(false) - - const handleClick = (event: React.MouseEvent) => { - event.stopPropagation() - setOpen(!open); - }; - - - type GroupListProps = { exps: Experiment_Data[], grouping: string } - - const GroupList: React.FC = (props: GroupListProps) => { - const [openGroup, setOpenGroup] = useState(false) - - const handleClick = (event: React.MouseEvent) => { - event.stopPropagation() - setOpenGroup(!openGroup); - }; - - return ( - - ) => handleClick(event)}> - - {openGroup ? : } - - - - { - props.exps.sort((a, b) => experimentInfo[a.name].order - experimentInfo[b.name].order).map((exp) => - - - - - - - ) - } - - - - ) - } - return ( row?.activeExps ? - - ) => handleClick(event)}> - - {open ? : } - - - - { - Object.entries(row.activeExps).map(([grouping, exps]: [string, Experiment_Data[]]) => - - ) - } - - - + : ) diff --git a/immuscreen/src/app/icres/page.tsx b/immuscreen/src/app/icres/page.tsx index 980ba17..38f9841 100644 --- a/immuscreen/src/app/icres/page.tsx +++ b/immuscreen/src/app/icres/page.tsx @@ -4,12 +4,12 @@ import { useRouter } from "next/navigation" import { StyledTab } from "../../common/utils" import { client } from "../../common/utils" import SearchIcon from "@mui/icons-material/Search" -import { CircularProgress, Stack, ToggleButtonGroup, Typography } from "@mui/material" +import { Box, CircularProgress, Collapse, List, ListItemButton, ListItemText, Stack, ToggleButtonGroup, Typography } from "@mui/material" import { Tabs } from "@mui/material" import Grid2 from "@mui/material/Unstable_Grid2/Grid2" import { TextField, IconButton, InputAdornment } from "@mui/material" import { FormControl, MenuItem } from "@mui/material" -import { useQuery } from "@apollo/client" +import { ApolloError, useQuery } from "@apollo/client" import Select, { SelectChangeEvent } from "@mui/material/Select"; import { ReadonlyURLSearchParams, useSearchParams} from "next/navigation" @@ -18,18 +18,21 @@ import { CcreAutoComplete } from "../../common/components/mainsearch/CcreAutocom import { DataTable } from "@weng-lab/psychscreen-ui-components" import {IcresByRegion} from "./icresbyregion" -import { ATAC_UMAP_QUERY, EBI_ASSO_QUERY, ICRES_BYCT_ZSCORES_QUERY, ICRES_CT_ZSCORES_QUERY, ICRES_QUERY } from "./queries" +import { ATAC_UMAP_QUERY, EBI_ASSO_QUERY, ICRES_ACTIVE_EXPERIMENTS, ICRES_BYCT_ZSCORES_QUERY, ICRES_CT_ZSCORES_QUERY, ICRES_QUERY } from "./queries" import InputLabel from "@mui/material/InputLabel"; import { stringToColour } from "../../common/utils"; import { AtacBarPlot } from "./atacbarplot" import { cellTypeStaticInfo } from "../../common./../common/consts"; import { UmapPlot } from "../../common/components/umapplot"; import CellTypeTree from "../../common/components/cellTypeTree" -import { generateCellLineageTreeState, getCellColor } from "../celllineage/utils" +import { generateCellLineageTreeState, getCellColor, getCellDisplayName } from "../celllineage/utils" //Need better text styling import ToggleButton from '@mui/material/ToggleButton'; +import { Experiment_Data } from "./types" +import { ExpandLess, ExpandMore } from "@mui/icons-material" +import { ActiveCellTypesList, ActiveExperimentList } from "./utils" export default function Icres() { @@ -73,8 +76,7 @@ export default function Icres() { client, }) - - const { loading: aloading, data: adata } = useQuery(ICRES_QUERY, { + const { loading: aloading, data: adata, error: error_adata } = useQuery(ICRES_QUERY, { variables: { accession: searchParams.get('accession') }, @@ -84,6 +86,29 @@ export default function Icres() { client, }) + const { loading: loading_experiments, data: data_experiments, error: error_experiments }: { loading: boolean, data: { calderoncorcesAtacQuery: Experiment_Data[] }, error?: ApolloError } = useQuery(ICRES_ACTIVE_EXPERIMENTS, { + variables: { + accession: searchParams.get('accession') ? [searchParams.get('accession')] : [] + }, + skip: !searchParams.get('accession'), + fetchPolicy: "cache-and-network", + nextFetchPolicy: "cache-first", + client, + }) + + //Parse experiment info + let activeExps: { [key: string]: Experiment_Data[] } = {} + data_experiments?.calderoncorcesAtacQuery.forEach(exp => { + //Cutoff for experiment activity set at 1.64 + if (exp.value > 1.64) { + if (activeExps[exp.grouping]) { + activeExps[exp.grouping] = [...activeExps[exp.grouping], exp] + } else { + activeExps[exp.grouping] = [exp] + } + } + }); + let barplotdata = icrezscoredata && icrezscoredata.calderoncorcesAtacQuery.map(ic => { return { @@ -376,11 +401,19 @@ return !searchParams.get('accession') && !searchParams.get('chromosome') ? ( (aloading ? : - (adata?.iCREQuery[0].celltypes.length === 0) ? - Not identified as active in immune cells - : - {searchParams.get('accession')} is determined to be active in the following cells: + + { + aloading ? + : error_adata ? Something went wrong fetching activity in cell types + : + } + { + loading_experiments ? + : error_experiments ? Something went wrong fetching activity in individual experiments + : + } + = (props: GroupListProps) => { + const [openGroup, setOpenGroup] = useState(false) + + const handleClick = (event: React.MouseEvent) => { + event.stopPropagation() + setOpenGroup(!openGroup); + }; + + return ( + + ) => handleClick(event)}> + + {openGroup ? : } + + + + { + props.exps.sort((a, b) => experimentInfo[a.name].order - experimentInfo[b.name].order).map((exp) => + + + + + + + ) + } + + + + ) +} + +type ActiveExperimentListProps = { activeExps: { [key: string]: Experiment_Data[] } } + +export const ActiveExperimentList: React.FC = (props: ActiveExperimentListProps) => { + const [open, setOpen] = useState(false) + + const handleClick = (event: React.MouseEvent) => { + event.stopPropagation() + setOpen(!open); + }; + + return ( + + ) => handleClick(event)}> + + {open ? : } + + + + { + Object.entries(props.activeExps).map(([grouping, exps]: [string, Experiment_Data[]]) => + + ) + } + + + + ) +} + +type ActiveCellTypesListProps = { celltypes: CellQueryValue[] } + +export const ActiveCellTypesList: React.FC = (props: ActiveCellTypesListProps) => { + const [open, setOpen] = useState(false) + + const celltypes = [... new Set(props.celltypes.map(x => getCellDisplayName(x, true)))].sort() + + const handleClick = (event: React.MouseEvent) => { + event.stopPropagation() + setOpen(!open); + }; + + return ( + + ) => handleClick(event)}> + + {open ? : } + + + + { + celltypes.map((cell: string) => + + ) + } + + + + ) +} \ No newline at end of file diff --git a/immuscreen/src/common/components/HomeAppBar.tsx b/immuscreen/src/common/components/HomeAppBar.tsx index 20307ae..c3f323d 100644 --- a/immuscreen/src/common/components/HomeAppBar.tsx +++ b/immuscreen/src/common/components/HomeAppBar.tsx @@ -7,6 +7,7 @@ import { ThemeProvider } from "@mui/material/styles" import Link from "next/link" import nextConfig from "../../../next.config" import { defaultTheme } from "../lib/themes" +import Image from 'next/image' const pageLinks = [ { @@ -82,7 +83,7 @@ const HomeAppBar = () => { - { }} > igSCREEN - + */} + igSCREEN logo {/* Hamburger Menu, open on click */}