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
-
+ */}
+
{/* Hamburger Menu, open on click */}