From 26b3d2c85349cf6e009a9df2bc0d5ab19297a466 Mon Sep 17 00:00:00 2001 From: jpfisher72 Date: Tue, 23 Apr 2024 15:44:24 -0400 Subject: [PATCH] Logo, add exp info to lineage --- immuscreen/public/igSCREEN.png | Bin 0 -> 8656 bytes immuscreen/src/app/icres/icresbyregion.tsx | 101 ++---------------- immuscreen/src/app/icres/page.tsx | 53 +++++++-- immuscreen/src/app/icres/types.ts | 5 + immuscreen/src/app/icres/utils.tsx | 101 ++++++++++++++++++ .../src/common/components/HomeAppBar.tsx | 11 +- 6 files changed, 166 insertions(+), 105 deletions(-) create mode 100644 immuscreen/public/igSCREEN.png create mode 100644 immuscreen/src/app/icres/types.ts create mode 100644 immuscreen/src/app/icres/utils.tsx diff --git a/immuscreen/public/igSCREEN.png b/immuscreen/public/igSCREEN.png new file mode 100644 index 0000000000000000000000000000000000000000..536523722b440ad8515f4abcaccfa39a160eaf3e GIT binary patch literal 8656 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 iEizmll=W1(74rY)>lZH@*%A@}0000 { 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 */}