Further fixes (#16)

* Small fixes

* Add proper theme support

* Final changes to UpSet Generator

* Update search components

* misc

* About Page

* UMAP

* fix build

* fix build

immuscreen/package.json

@@ -37,11 +37,13 @@
   "dependencies": {
     "@apollo/client": "alpha",
     "@apollo/experimental-nextjs-app-support": "^0.4.1",
+    "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.3",
     "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.14.2",
+    "@mui/material-nextjs": "^5.15.11",
     "@mui/styles": "^5.14.5",
     "@types/node": "^20.4.9",
     "@types/react": "^18.2.19",

immuscreen/src/app/about/page.tsx

@@ -4,18 +4,17 @@ import { Typography } from "@mui/material"
 
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
 
-
-
-//Need better text styling
-
 export default function About() {
   return (
     <main>
       <Grid2 container spacing={4} sx={{ maxWidth: "70%", mr: "auto", ml: "auto", mt: "3rem" }}>
-        <Grid2 xs={12} lg={6}>
-          <Typography variant="h3">About igSCREEN</Typography>
-          <Typography variant="h5">Search immune Candidate cis-Regulatory Elements by ENCODE</Typography>         
-        </Grid2>              
+        <Grid2 xs={12}>
+          <Typography paragraph variant="h3">About igSCREEN</Typography>
+          <Typography paragraph variant="h5">Search <i>immune</i> Candidate cis-Regulatory Elements by ENCODE</Typography>
+          <Typography paragraph>igSCREEN is a comprehensive catalog of multi-omic knowledge about human immune cells. It was designed and built by Dr. Zhiping Weng’s and Dr. Jill Moore’s labs at UMass Chan Medical School.</Typography>
+          <Typography paragraph>For questions or comments please contact us at [email protected] and [email protected]</Typography>
+          <Typography paragraph>This work is supported by U01AI173584.</Typography>
+        </Grid2>
       </Grid2>
     </main>
   )

immuscreen/src/app/celllineage/UpSetPlot.tsx

@@ -205,7 +205,7 @@ export default function UpSetPlot({ width, height, data, handleDownload, referen
                     {d.name.length > 12 ? d.name.substring(0, 9).replaceAll('_', ' ') + '...' : d.name.replaceAll('_', ' ')}
                   </Text>
                   {/* this expands clickable area for download */}
-                  <rect x={spaceForTextRight} y={barY} width={setSizePlotTotalWidth} height={barHeight} fill="rgba(0, 255, 0, 0)" />
+                  <rect x={spaceForTextRight} y={barY} width={setSizePlotTotalWidth} height={barHeight} fill="none" />
                 </Group>
               </Group>
             );
@@ -262,7 +262,7 @@ export default function UpSetPlot({ width, height, data, handleDownload, referen
                   />
                 </Group>
                 {/* this expands clickable area for download */}
-                <rect x={barX} y={barY} width={barWidth} height={barHeight + setSizePlotBarsHeight} fill="rgba(255, 0, 0, 0)" />
+                <rect x={barX} y={barY} width={barWidth} height={barHeight + setSizePlotBarsHeight} fill="none" />
                 {Array.from(d.name).map((char, index) => (
                   <Circle
                     key={`circle-${index}`}

immuscreen/src/app/celllineage/page.tsx

@@ -3,7 +3,7 @@ import * as React from "react"
 import CellTypeTree from "../../common/components/cellTypeTree"
 import { Ref, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2";
-import { Box, Button, Checkbox, CircularProgress, FormControlLabel, Snackbar, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Button, Checkbox, CircularProgress, FormControlLabel, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Snackbar, Stack, Tooltip, Typography } from "@mui/material";
 import { gql, useLazyQuery } from "@apollo/client";
 import { client } from "../../common/utils";
 import UpSetPlot from "./UpSetPlot";
@@ -16,7 +16,7 @@ import FlashOffOutlinedIcon from '@mui/icons-material/FlashOffOutlined';
 import FlashAutoIcon from '@mui/icons-material/FlashAuto';
 import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
 import LoadingButton from '@mui/lab/LoadingButton';
-import { Download, Sync } from "@mui/icons-material";
+import { ArrowRight, Circle, Download, Sync } from "@mui/icons-material";
 import { downloadSVG, extractQueryValues, generateCellLineageTreeState } from "./utils";
 import { CellQueryValue, CellLineageTreeState, CellName, DynamicCellTypeInfo } from "./types";
 import { cellTypeStaticInfo } from "../../common/consts";
@@ -174,7 +174,7 @@ export default function UpSet() {
           const a = document.createElement('a');
           const blobUrl = URL.createObjectURL(blob);
           a.href = blobUrl;
-          a.download = `${(downloadKey[0] === '0' || downloadKey[0] === '1') ? `Intersect(${cellGroupings.intersect.map(vals => vals[0]).flat().join(',')})${cellGroupings.exclude.length > 0 ? `Except(${cellGroupings.exclude.map(vals => vals[0]).flat().join(',')})` : ''}` : downloadKey}.bed`
+          a.download = `${(downloadKey[0] === '0' || downloadKey[0] === '1') ? `Intersect_${cellGroupings.intersect.map(vals => vals[0]).flat().join('_')}_${cellGroupings.exclude.length > 0 ? `Except_${cellGroupings.exclude.map(vals => vals[0]).flat().join('_')}` : ''}` : downloadKey}.bed`
           a.click();
           URL.revokeObjectURL(blobUrl);
         })
@@ -450,6 +450,7 @@ export default function UpSet() {
 
   const Checkboxes = () =>
     <>
+      <Typography variant="h6">Immune cCRE classes to Include:</Typography>
       <FormControlLabel
         label="All Classes"
         control={
@@ -475,15 +476,64 @@ export default function UpSet() {
     </>
 
   const HeaderAbout = () =>
-    <>
-      <Typography variant="h5">UpSet Generator</Typography>
-      <Typography variant="body1" paragraph maxWidth={cellTypeTreeWidth}>
-        Select Up to 6 cells to generate an UpSet plot. For stimulable cells, hold Option/Command (MacOS) or Alt/Windows (Windows) and click to stimulate cell. By default, all cells are unstimulated. Stimulable cells can be unstimulated, stimulated, or both (counts as two selections). Stimulating a cell does not automatically select it. The more cells types that are selected, the longer it will take to generate. Click any bar/count in UpSet plot to download set (.BED)
-      </Typography>
-    </>
+    <Box maxWidth={cellTypeTreeWidth}>
+      <Typography variant="h4">UpSet Generator</Typography>
+      <Typography mb={1}>Generate UpSet plots of immune cCREs active in selected cell types.</Typography>
+      <Typography variant="h6">How to Use:</Typography>
+      <List disablePadding dense sx={{mb: 2}}>
+          <ListItem disablePadding>
+              <ListItemIcon>
+                <ArrowRight  />
+              </ListItemIcon>
+              <ListItemText>
+                Click to select up to 6 cells.
+              </ListItemText>
+          </ListItem>
+          <ListItem disablePadding>
+              <ListItemIcon>
+                <ArrowRight  />
+              </ListItemIcon>
+              <ListItemText>
+              For stimulable cells, hold Option/Command (MacOS) or Alt/Windows (Windows) and click to stimulate cell.
+              </ListItemText>
+          </ListItem>
+          <ListItem disablePadding>
+              <ListItemIcon>
+                <ArrowRight  />
+              </ListItemIcon>
+              <ListItemText>
+              Stimulating a cell does not automatically select it.
+              </ListItemText>
+          </ListItem>
+          <ListItem disablePadding>
+              <ListItemIcon>
+                <ArrowRight  />
+              </ListItemIcon>
+              <ListItemText>
+              By default, all cells are unstimulated. Stimulable cells can be unstimulated, stimulated, or both (counts as two selections).
+              </ListItemText>
+          </ListItem>
+          <ListItem disablePadding>
+              <ListItemIcon>
+                <ArrowRight  />
+              </ListItemIcon>
+              <ListItemText>
+              The more cells types that are selected, the longer it will take to generate.
+              </ListItemText>
+          </ListItem>
+          <ListItem disablePadding>
+              <ListItemIcon>
+                <ArrowRight  />
+              </ListItemIcon>
+              <ListItemText>
+              Click any bar/count in UpSet plot to download set (.BED)
+              </ListItemText>
+          </ListItem>
+        </List>
+    </Box>
 
   const GenerateUpsetButton = () =>
-    <LoadingButton loading={loading_count} loadingPosition="end" disabled={noneSelected} endIcon={data_count ? <Sync /> : <BarChartOutlinedIcon />} sx={{ textTransform: "none", m: 1 }} variant="contained" onClick={handleGenerateUpSet}>
+    <LoadingButton loading={loading_count} loadingPosition="end" disabled={noneSelected} endIcon={data_count ? <Sync /> : <BarChartOutlinedIcon />} sx={{ textTransform: "none", mt: 2, mb: 2, mr: 2 }} variant="contained" onClick={handleGenerateUpSet}>
       <span>{loading_count ? "Generating" : noneSelected ? "Select Cells to Generate UpSet" : "Generate UpSet"}</span>
     </LoadingButton>
 
@@ -495,7 +545,7 @@ export default function UpSet() {
 
   return (
     <>
-      <Grid2 container mt={3}>
+      <Grid2 container mt={3} ml={3} mr={3}>
         <Grid2 xs={12} xl={5} container justifyContent={"center"}>
           {/* Display header, checkboxes and UpSet on left on big screen */}
           <Box display={{ xs: "none", xl: "block" }}>

immuscreen/src/app/gene/page.tsx

@@ -77,7 +77,7 @@ const Gene = () => {
   return (
     searchParams.get('gene') ?
       // Gene Selected View
-      <Grid2 container sx={{ maxWidth: "80%", mr: "auto", ml: "auto", mt: "3rem" }}>
+      <Grid2 container sx={{ maxWidth: "90%", mr: "auto", ml: "auto", mt: "3rem" }}>
         <Grid2 container spacing={3} sx={{ mt: "2rem", mb: "1rem" }}>
           <Grid2 xs={12} lg={12}>
             {searchParams.get("gene") && <Typography variant="h4">Gene Details: {searchParams.get("gene")}</Typography>}
@@ -86,7 +86,7 @@ const Gene = () => {
             <Tabs aria-label="basic tabs example" value={value} onChange={handleChange}>
               <StyledTab label="Genome Browser" />
               <StyledTab label="eQTLs" />
-              <StyledTab label="Gene Expression UMAP" />
+              <StyledTab label="Gene Expression" />
             </Tabs>
           </Grid2>
         </Grid2>
@@ -190,8 +190,8 @@ const Gene = () => {
               onChange={handleColorSchemeChange}
               aria-label="Platform"
             >
-              <ToggleButton value="geneexp">Gene Expression</ToggleButton>
-              <ToggleButton value="celltype">CellType Cluster</ToggleButton>
+              <ToggleButton sx={{textTransform: 'none'}} value="geneexp">Gene Expression</ToggleButton>
+              <ToggleButton sx={{textTransform: 'none'}} value="celltype">Cell Type Cluster</ToggleButton>
             </ToggleButtonGroup>
             <br />
             <br />
@@ -207,7 +207,7 @@ const Gene = () => {
           <br />
           <br />
           <br />
-          {<GeneAutoComplete textColor={"black"} assembly={"GRCh38"} />}
+          {<GeneAutoComplete assembly={"GRCh38"} />}
         </Grid2>
       </Grid2>
   )

immuscreen/src/app/icres/atacbarplot.tsx

@@ -35,6 +35,7 @@ const tooltipStyles = {
 const legendGlyphSize = 15;
 
 
+//This should eventually be redone. It feels wrong to style the tooltip this way
 const CellTypesLegends = ({ title, plottitle, children }: { title: string; plottitle?: string; children: React.ReactNode }) => {
   return (
     <div className="legend">
@@ -73,8 +74,6 @@ const CellTypesLegends = ({ title, plottitle, children }: { title: string; plott
   );
 }
 
-
-
 export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study: string, barplotdata: { color: string, ct_description?: string, celltype: string, class: string, subclass: string, description: string, order: number, value: number, name: string, study: string, group: string, grouping: string, stimulation: string }[] }> = (props) => {
   const width = 1000
   const height = 700
@@ -139,7 +138,7 @@ export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study:
   });
 
   return (
-    <div style={{ position: 'relative' }}>
+    <div style={{display: "flex", flexWrap: "wrap", alignItems: "center"}}>
       <svg width={width} height={height} ref={containerRef}>
         <Group top={margin.top} left={margin.left}>
           <BarGroup
@@ -271,10 +270,10 @@ export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study:
         </Group>
       </svg>
       <div className="legends">
-        <CellTypesLegends title={props.byct ? "Immune Cell Types" : `${props.study} Immune Cell Types`} plottitle={props.plottitle}>
-          <LegendOrdinal scale={ordinalColorScale} labelFormat={(label: CellDisplayName) => label}>
+        <CellTypesLegends title={"Immune Cell Types"} plottitle={props.plottitle}>
+          <LegendOrdinal scale={ordinalColorScale}>
             {(labels) => (
-              <div style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: '10px' }}>
+              <div style={{ display: 'flex', flexDirection: 'column', flexWrap: 'wrap', gap: '10px', maxHeight: '500px' }}>
                 {labels.map((label, i) => {
                   return (
                     <LegendItem
@@ -284,7 +283,7 @@ export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study:
                       <svg width={legendGlyphSize} height={legendGlyphSize}>
                         <rect fill={label.value} width={legendGlyphSize} height={legendGlyphSize} />
                       </svg>
-                      <LegendLabel align="left" margin="0 0 0 4px" color={"#ff0000"}>
+                      <LegendLabel align="left" margin="0 10px 0 4px" color={"#ff0000"}>
                         <p className={"labelcolor"}>
                           {label.text}
                         </p>
@@ -296,15 +295,13 @@ export const AtacBarPlot: React.FC<{ plottitle?: string, byct?: boolean, study:
             )}
           </LegendOrdinal>
         </CellTypesLegends>
+        {/* Why is the styling being done like this, not readable. Why is there also styling above in CellTypeLegends? */}
         <style>
           {`
             .legends {
               display: flex;
-              font-family: arial;
-              font-weight: 900;        
-              border-radius: 14px;        
-              margin-left: 50px;        
-              
+              font-family: arial;       
+              border-radius: 14px;
             }
             .labelcolor {
               color:  #000000;

immuscreen/src/app/icres/page.tsx

@@ -221,7 +221,7 @@ export default function Icres() {
       <IcresByRegion />
     ) : (
     <main>
-      <Grid2 container sx={{ maxWidth: "80%", mr: "auto", ml: "auto", mt: "3rem" }}>
+      <Grid2 container sx={{ maxWidth: "90%", mr: "auto", ml: "auto", mt: "3rem" }}>
         <Grid2 container sx={{ ml: "0.5em", mt: "4rem", mb: "2rem" }}>
           <Grid2 xs={12} lg={12}>
             {searchParams.get("accession") && <Typography variant="h4">Accession Details: {searchParams.get("accession")}</Typography>}
@@ -266,12 +266,12 @@ export default function Icres() {
               onChange={handleColorSchemeChange}
               aria-label="Platform"
             >
-              <ToggleButton value="ZScore">Zscore</ToggleButton>
-              <ToggleButton value="celltype">CellType Cluster</ToggleButton>
+              <ToggleButton sx={{textTransform: 'none'}} value="ZScore">Z-score</ToggleButton>
+              <ToggleButton sx={{textTransform: 'none'}} value="celltype">Cell Type Cluster</ToggleButton>
             </ToggleButtonGroup>
             <br />
             <br />
-            <UmapPlot colorScheme={colorScheme} data={atacumapdata.calderonAtacUmapQuery} plottitle={"ZScore"} />
+            <UmapPlot colorScheme={colorScheme} data={atacumapdata.calderonAtacUmapQuery} plottitle={"Z-score"} />
           </Grid2>
         }
         {value === 2 && ebidata &&
@@ -336,8 +336,8 @@ export default function Icres() {
           <Grid2 xs={12} lg={12}>
             <Tabs aria-label="icres_tabs" value={tabVal} onChange={handleTabChange}>
               <StyledTab value="Aggregate" label="Aggregate ATAC by Celltype" />
-              <StyledTab value="Calderon" label="Calderon" />
-              <StyledTab value="Corces" label="Corces" />
+              <StyledTab value="Calderon" label="Study: Calderon" />
+              <StyledTab value="Corces" label="Study: Corces" />
             </Tabs>
             {tabVal === "Aggregate" && (
               icrebyctzscoreloading ?
@@ -381,6 +381,7 @@ export default function Icres() {
                 height={1100}
                 orientation="vertical"
                 cellTypeState={generateCellLineageTreeState(adata?.iCREQuery[0].celltypes || [], false)}
+                noneSelectedOpacity='translucent'
               />
             </Stack>
           )

immuscreen/src/app/layout.tsx

@@ -3,8 +3,10 @@ import { Inter } from "next/font/google"
 import AppBar from "../common/components/HomeAppBar"
 import Footer from "../common/components/Footer"
 import { Suspense } from "react"
-import { CssBaseline, ThemeProvider } from "@mui/material"
+import { CssBaseline } from "@mui/material"
+import { ThemeProvider } from '@mui/material/styles';
 import { defaultTheme } from "../common/lib/themes"
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -17,14 +19,18 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body className={inter.className} id="page-container">
-        <div id="content-wrapper">
-          <CssBaseline />
-          <AppBar />
-          <Suspense>
-            <div id="body-wrapper">{children}</div>
-          </Suspense>
-        </div>
-        <Footer />
+        <Suspense>
+          <AppRouterCacheProvider>
+            <ThemeProvider theme={defaultTheme}>
+              <div id="content-wrapper">
+                <CssBaseline />
+                <AppBar />
+                <div id="body-wrapper">{children}</div>
+              </div>
+              <Footer />
+            </ThemeProvider>
+          </AppRouterCacheProvider>
+        </Suspense>
       </body>
     </html>
   )