sync: master to vercel-preview

immuscreen/package.json

@@ -35,57 +35,59 @@
     }
   },
   "dependencies": {
-    "@apollo/client": "alpha",
-    "@apollo/experimental-nextjs-app-support": "^0.4.1",
-    "@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/styles": "^5.14.5",
-    "@types/node": "^20.4.9",
-    "@types/react": "^18.2.19",
-    "@types/react-dom": "18.2.7",
-    "@visx/axis": "^3.8.0",
-    "@visx/event": "latest",
-    "@visx/glyph": "latest",
+    "@apollo/client": "^3.10.5",
+    "@apollo/experimental-nextjs-app-support": "^0.11.2",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.20",
+    "@mui/material-nextjs": "^5.15.11",
+    "@mui/styles": "^5.15.20",
+    "@types/node": "^20.14.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@visx/axis": "^3.10.1",
+    "@visx/event": "^3.3.0",
+    "@visx/glyph": "^3.3.0",
     "@visx/gradient": "^3.3.0",
     "@visx/grid": "^3.5.0",
     "@visx/group": "^3.3.0",
     "@visx/hierarchy": "^3.3.0",
-    "@visx/legend": "latest",
-    "@visx/mock-data": "latest",
-    "@visx/responsive": "^3.3.0",
-    "@visx/scale": "latest",
+    "@visx/legend": "^3.10.3",
+    "@visx/mock-data": "^3.3.0",
+    "@visx/responsive": "^3.10.2",
+    "@visx/scale": "^3.5.0",
     "@visx/shape": "^3.5.0",
     "@visx/text": "^3.3.0",
     "@visx/tooltip": "^3.3.0",
-    "@visx/vendor": "latest",
-    "@weng-lab/psychscreen-ui-components": "^0.8.6",
+    "@visx/vendor": "^3.5.0",
+    "@weng-lab/psychscreen-ui-components": "^0.8.8",
     "@weng-lab/ts-ztable": "^4.0.1",
-    "autoprefixer": "10.4.15",
-    "bpnet-ui": "^0.2.9",
-    "eslint": "8.47.0",
-    "eslint-config-next": "13.4.19",
-    "graphql": "^16.7.1",
+    "autoprefixer": "^10.4.19",
+    "bpnet-ui": "^0.3.8",
+    "eslint": "^9.5.0",
+    "eslint-config-next": "^14.2.4",
+    "graphql": "^16.8.2",
     "jubilant-carnival": "^0.6.0",
     "logojs-react": "^2.1.1",
-    "next": "14.1.0",
+    "next": "^14.2.4",
     "normalize.css": "^8.0.1",
     "only": "^0.0.2",
-    "postcss": "8.4.27",
+    "postcss": "^8.4.38",
     "queryz": "^0.0.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
-    "semantic-ui-react": "latest",
-    "server": "^1.0.38",
-    "sharp": "^0.32.4",
-    "tailwindcss": "3.3.3",
-    "typescript": "5.1.6",
-    "umap-js": "^1.3.3",
-    "umms-gb": "^3.10.0",
-    "uuid": "^9.0.1"
+    "semantic-ui-react": "^2.1.5",
+    "server": "^1.0.39",
+    "sharp": "^0.33.4",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.4.5",
+    "umap-js": "^1.4.0",
+    "umms-gb": "^3.9.14",
+    "uuid": "^10.0.0"
   },
   "devDependencies": {
     "file-loader": "^6.2.0",
@@ -109,5 +111,6 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "packageManager": "[email protected]+sha512.2dc70be5fce9f66756d25b00a888f3ca66f86b502b76750e72ba54cec89da767b938c54124595e26f868825688e0fe3552c26c76a330673343057acadd5cfcf2"
 }

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 container spacing={4} sx={{ maxWidth: "70%", mr: "auto", ml: "auto", mt: '3rem' }}>
+        <Grid2 xs={12}>
+          <Typography paragraph variant="h3">About igSCREEN</Typography>
+          <Typography paragraph variant="h5">Search <i>immune</i> Candidate cis-Regulatory Elements</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

@@ -153,7 +153,7 @@ export default function UpSetPlot({ width, height, data, handleDownload, referen
         }
         {/* The set size plot */}
         <Group left={0} top={intersectionPlotTotalHeight}>
-          <AxisBottom left={spaceForCellCounts} top={setSizePlotBarsHeight} scale={setSizePlotWidthScale} label='Set Size' tickValues={[0, 100000]} />
+          <AxisBottom left={spaceForCellCounts} top={setSizePlotBarsHeight} scale={setSizePlotWidthScale} label='Set Size' numTicks={2}/>
           <GridColumns left={spaceForCellCounts} top={0} scale={setSizePlotWidthScale} height={setSizePlotBarsHeight} tickValues={[0, 100000]} stroke="#e0e0e0" />
           {setSizeData.map((d, i) => {
             const barWidth = setSizePlotBarsWidth - (setSizePlotWidthScale(d.count) ?? 0);
@@ -205,15 +205,15 @@ 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>
             );
           })}
         </Group>
         {/* The intersection plot and circles */}
         <Group left={setSizePlotTotalWidth} top={spaceForTextTop}>
-          <AxisLeft label='Intersection Size' scale={intersectionPlotHeightScale} />
+          <AxisLeft label='Intersection Size' scale={intersectionPlotHeightScale} labelOffset={45} />
           <GridRows scale={intersectionPlotHeightScale} width={intersectionPlotWidth} height={intersectionPlotBarsHeight} stroke="#e0e0e0" />
           {intersectionData.map((d) => {
             const barWidth = intersectionPlotWidthScale.bandwidth();
@@ -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">Immune cCRE Activity by Cell Type</Typography>
+      <Typography mb={1}>Compare immune cCRE activity between selected immune 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/celllineage/types.ts

@@ -68,7 +68,7 @@ export type CellDisplayName =
   | "Multipotent progenitor"
   | "Common myeloid progenitor"
   | "Megakaryocyte-erythroid progenitor"
-  | "Erythrocyte"
+  | "Erythroblast"
   | "Granulocyte-monocyte progenitors"
   | "Lymphocyte-primed multipotent progenitor"
   | "Common lymphoid progenitor"