Final changes (#17)

* Small changes * Homepage work, UpSet work * Verbage changes
weng-lab · May 2, 2024 · 68409e5 · 68409e5
1 parent 9f259ef
commit 68409e5
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 29 deletions.
diff --git a/immuscreen/public/assets/phenotype.png b/immuscreen/public/assets/phenotype.png
diff --git a/immuscreen/public/assets/upset.png b/immuscreen/public/assets/upset.png
diff --git a/immuscreen/src/app/about/page.tsx b/immuscreen/src/app/about/page.tsx
@@ -10,7 +10,7 @@ export default function About() {
       <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 by ENCODE</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>

diff --git a/immuscreen/src/app/celllineage/UpSetPlot.tsx b/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);
@@ -213,7 +213,7 @@ export default function UpSetPlot({ width, height, data, handleDownload, referen
         </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();

diff --git a/immuscreen/src/app/celllineage/page.tsx b/immuscreen/src/app/celllineage/page.tsx
@@ -477,8 +477,8 @@ export default function UpSet() {
 
   const HeaderAbout = () =>
     <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="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>

diff --git a/immuscreen/src/app/icres/page.tsx b/immuscreen/src/app/icres/page.tsx
@@ -229,14 +229,13 @@ export default function Icres() {
           <Grid2 xs={12} lg={12}>
             <Tabs aria-label="icres_tabs" value={value} onChange={handleChange}>
               <StyledTab label="Genome Browser" />
-              <StyledTab label="Z-Score UMAP" />
-              <StyledTab label="EBI Associations" />
-              <StyledTab label="Cell type specific zscores" />
-              <StyledTab label="View Activity in Cell Lineage" />
+              <StyledTab label="Activity UMAP" />
+              <StyledTab label="GWAS Associations" />
+              <StyledTab label="Cell Type Specific Activity" />
+              <StyledTab label="Activity in Cell Lineage" />
             </Tabs>
           </Grid2>
         </Grid2>
-
         {value === 0 && adata &&
           <Grid2 xs={12} lg={12}>
             <GenomeBrowserView

diff --git a/immuscreen/src/app/page.tsx b/immuscreen/src/app/page.tsx
@@ -26,15 +26,15 @@ const Home = () => {
   };
 
   return (
-    <Grid2 container pt={3} maxWidth={{ xl: "60%", lg: "75%", md: "85%", sm: "90%", xs: "95%" }} margin={"auto"} rowSpacing={10}>
+    <Grid2 container pt={3} maxWidth={{ xl: "60%", lg: "75%", md: "85%", sm: "90%", xs: "95%" }} margin={"auto"}>
       <Grid2 xs={12}>
         <Image
           src="/igSCREEN_red_light.png"
           width={400}
           height={150}
           alt="igSCREEN logo"
         />
-        <Typography variant="h6" mb={1}>Search <em>immune</em> Candidate cis-Regulatory Elements by ENCODE</Typography>
+        <Typography variant="h6" mb={1}>Search <em>immune</em> Candidate cis-Regulatory Elements</Typography>
         <FormControl variant="standard" sx={{ mb: 2 }}>
           {/* todo, replace this with the Main Search component from SCREEN */}
           <Select
@@ -55,7 +55,7 @@ const Home = () => {
                 : <CcreAutoComplete textColor={"black"} assembly={"GRCh38"} />
         }
       </Grid2>
-      <Grid2 xs={12}>
+      <Grid2 xs={12} mt={10} mb={5}>
         <Divider>
           <Stack
             alignItems={"center"}
@@ -71,19 +71,19 @@ const Home = () => {
         </Divider>
       </Grid2>
       {/* Portals */}
-      <Grid2 xs={12}>
+      <Grid2 xs={12} mb={5}>
         <div>
-          <Grid2 container rowSpacing={8}>
+          <Grid2 container rowSpacing={10}>
             <Grid2 xs={12}>
               {/* Gene Portal */}
               <div>
-                <Grid2 container xs={12} justifyContent={"space-between"}>
-                  <Grid2 xs={12} md={5} order={{ xs: 2, md: 1 }}>
+                <Grid2 container xs={12} justifyContent={"space-between"} spacing={3}>
+                  <Grid2 xs={12} md={6} order={{ xs: 2, md: 1 }} alignSelf={"center"}>
                     <Typography variant="h4">Gene Portal</Typography>
                     <Typography mb={2}>Explore gene expression across immune cell types at bulk and single-cell resolution for 63 cell types across 305 experiments.</Typography>
                     <GeneAutoComplete assembly={"GRCh38"} />
                   </Grid2>
-                  <Grid2 container xs={12} md={7} order={{ xs: 1, md: 2 }} minHeight={250}>
+                  <Grid2 xs={12} md={6} order={{ xs: 1, md: 2 }} minHeight={300}>
                     <Box position={"relative"} height={"100%"} width={'100%'} sx={{ objectPosition: { md: "right bottom", xs: "left bottom" } }}>
                       <Image
                         style={{ objectFit: "contain", objectPosition: "inherit" }}
@@ -102,8 +102,8 @@ const Home = () => {
             <Grid2 xs={12}>
               {/* Element Portal */}
               <div>
-                <Grid2 container xs={12} justifyContent={"space-between"}>
-                  <Grid2 container xs={12} md={7} order={{ xs: 1, md: 1 }} minHeight={250}>
+                <Grid2 container xs={12} justifyContent={"space-between"} spacing={3}>
+                  <Grid2 xs={12} md={6} order={{ xs: 1, md: 1 }} minHeight={300}>
                     <Box position={"relative"} height={"100%"} width={'100%'} sx={{ objectPosition: { md: "left bottom", xs: "left bottom" } }}>
                       <Image
                         style={{ objectFit: "contain", objectPosition: "inherit" }}
@@ -113,7 +113,7 @@ const Home = () => {
                       />
                     </Box>
                   </Grid2>
-                  <Grid2 xs={12} md={5} order={{ xs: 1, md: 1 }}>
+                  <Grid2 xs={12} md={6} order={{ xs: 1, md: 1 }} alignSelf={"center"}>
                     <Typography variant="h4">Element Portal</Typography>
                     <Typography>Explore regulatory element activity (immune cCREs) across immune cell types at bulk and single-cell resolution for 63 cell types across 305 experiments.</Typography>
                     <FormControl variant="standard" sx={{ mb: 2 }}>
@@ -141,13 +141,13 @@ const Home = () => {
             <Grid2 xs={12}>
               {/* SNP Portal */}
               <div>
-                <Grid2 container xs={12} justifyContent={"space-between"}>
-                  <Grid2 xs={12} md={5} order={{ xs: 2, md: 1 }}>
+                <Grid2 container xs={12} justifyContent={"space-between"} spacing={3}>
+                  <Grid2 xs={12} md={6} order={{ xs: 2, md: 1 }} alignSelf={"center"}>
                     <Typography variant="h4">SNP Portal</Typography>
                     <Typography mb={2}>Search SNPs of interest and explore their impact on gene expression, chromatin accessibility, transcription factor (TF) binding and other molecular traits in immune cells.</Typography>
                     <SnpAutoComplete assembly={"GRCh38"} />
                   </Grid2>
-                  <Grid2 container xs={12} md={7} order={{ xs: 1, md: 2 }} minHeight={250}>
+                  <Grid2 xs={12} md={6} order={{ xs: 1, md: 2 }} minHeight={300}>
                     <Box position={"relative"} height={"100%"} width={'100%'} sx={{ objectPosition: { md: "right bottom", xs: "left bottom" } }}>
                       <Image
                         style={{ objectFit: "contain", objectPosition: "inherit" }}
@@ -164,20 +164,20 @@ const Home = () => {
               <Divider />
             </Grid2>
             <Grid2 xs={12}>
-              {/* Phenotype Portal */}
+              {/* LDSC Portal */}
               <div>
-                <Grid2 container xs={12} justifyContent={"space-between"}>
-                  <Grid2 container xs={12} md={7} order={{ xs: 1, md: 1 }} minHeight={250}>
+                <Grid2 container xs={12} justifyContent={"space-between"} spacing={3}>
+                  <Grid2 xs={12} md={6} order={{ xs: 1, md: 1 }} minHeight={300}>
                     <Box position={"relative"} height={"100%"} width={'100%'} sx={{ objectPosition: { md: "left bottom", xs: "left bottom" } }}>
                       <Image
                         style={{ objectFit: "contain", objectPosition: "inherit" }}
-                        src="/assets/snp-qtl.png"
+                        src="/assets/phenotype.png"
                         fill
                         alt="igSCREEN logo"
                       />
                     </Box>
                   </Grid2>
-                  <Grid2 xs={12} md={5} order={{ xs: 1, md: 1 }}>
+                  <Grid2 xs={12} md={6} order={{ xs: 1, md: 1 }} alignSelf={"center"}>
                     <Typography variant="h4">Phenotype Portal</Typography>
                     <Typography mb={2}>Explore heritability enrichment for 280+ traits within gene regulatory features, such as immune cCREs.</Typography>
                     <Button variant="contained" href="/phenotype">
@@ -187,6 +187,33 @@ const Home = () => {
                 </Grid2>
               </div>
             </Grid2>
+            <Grid2 xs={12}>
+              <Divider />
+            </Grid2>
+            <Grid2 xs={12}>
+              {/* Cell Activity Portal */}
+              <div>
+                <Grid2 container xs={12} justifyContent={"space-between"} spacing={3}>
+                  <Grid2 xs={12} md={6} order={{ xs: 2, md: 1 }} alignSelf={"center"}>
+                    <Typography variant="h4">Immune cCRE Activity by Cell Type</Typography>
+                    <Typography mb={2}>Compare immune cCRE activity between immune cell types.</Typography>
+                    <Button variant="contained" href="/celllineage">
+                      Explore cCRE activity
+                    </Button>
+                  </Grid2>
+                  <Grid2 xs={12} md={6} order={{ xs: 1, md: 2 }} minHeight={300}>
+                    <Box position={"relative"} height={"100%"} width={'100%'} sx={{ objectPosition: { md: "right bottom", xs: "left bottom" } }}>
+                      <Image
+                        style={{ objectFit: "contain", objectPosition: "inherit" }}
+                        src="/assets/upset.png"
+                        fill
+                        alt="igSCREEN logo"
+                      />
+                    </Box>
+                  </Grid2>
+                </Grid2>
+              </div>
+            </Grid2>
           </Grid2>
         </div>
       </Grid2>