Misc improvements (#201)

* Fix hover thing in AppBar menus

* Tooltips, Labels in Gene exp

* grid for v4 specs, move ATAC cols

* Tooltips w/o content

* Slight table changes

* Formatting, Quick fix for Gene Exp scaling on applet

* Bold in Table Header, cap width of gene exp

* Gene Exp labels, Icons in home table

* Move biosample tables around

* Rm exp ID from gene exp

Author: jpfisher72

screen2.0/public/humanDark.png

@@ -53,7 +53,7 @@ export default function About() {
             across all profiles and select the DHS with the highest signal (read depth normalized signal) as the rDHS for each cluster. This
             iterative clustering and selection process continues until it results in a list of non-overlapping rDHSs—2.2 million rDHSs in
             human and 1.2 rDHSs in mouse—representing all DHSs (Figure 3). We then further selected rDHSs with high DNase signal in at least
-            one biosample (defined as a Z-score `{">"}` 1.64, see details on defining high signal below). Finally, from this subset of high
+            one biosample (defined as a Z-score {">"} 1.64, see details on defining high signal below). Finally, from this subset of high
             signal rDHSs, we selected all elements that were also supported by high H3K4me3, H3K27ac, and/or CTCF ChIP-seq signals in
             concerted biosamples (i.e., samples with complementary assay coverage). This resulted in a total of 926,535 human cCREs and
             339,815 mouse cCREs (Figure 2).
@@ -72,7 +72,7 @@ export default function About() {
             rDHS. The signals of H3K4me3 and H3K27ac were averaged across an extended region— the rDHS plus a 500-bp flanking region on each
             side—to account for these histone marks at the flanking nucleosomes. We then took the log10 of these signals and computed a
             Z-score for each rDHS compared with all other rDHSs within a biosample. rDHSs with a raw signal of 0 were assigned a Z-score of
-            -10. For all analysis we defined `"`high signal`"` as a Z-score greater than 1.64, a threshold corresponding to the
+            -10. For all analysis we defined " high signal " as a Z-score greater than 1.64, a threshold corresponding to the
             95th percentile of a one-tailed test. We define a max-Z of a rDHS as the maximum z-score for a signal across all surveyed
             biosamples.
           </Typography>
@@ -92,8 +92,8 @@ export default function About() {
           <Typography variant="h4">Classification of cCREs</Typography>
           <Typography>
             Many uses of cCREs are based on the regulatory role associated with their biochemical signatures. Thus, we putatively defined
-            cCREs in one of the following annotation groups based on each element`&apos;`s dominant biochemical signals across all available
-            biosamples. Analogous to GENCODE`&apos;`s catalog of genes, which are defined irrespective of their varying expression levels
+            cCREs in one of the following annotation groups based on each element&apos;s dominant biochemical signals across all available
+            biosamples. Analogous to GENCODE&apos;s catalog of genes, which are defined irrespective of their varying expression levels
             and alternative transcripts across different cell types, we provide a general, cell type-agnostic classification of cCREs based
             on the max-Zs as well as its proximity to the nearest annotated TSS:
           </Typography>
@@ -184,22 +184,22 @@ export default function About() {
           <Typography>
             We downloaded associations reported in the NHGRI-EBI genome-wide association studies (GWAS) catalog as of January 1, 2019.
             Because mixed populations complicate linkage disequilibrium (LD) structures, we only selected studies that were performed on a
-            single population. For each study, we downloaded all reported SNPs (p `{">"}` 10-6), even those that were just under genome wide
-            significance. We then intersected all reported SNPs and SNPs in high LD (r2 `{">"}` 0.7), with GRCh38 cCREs. These results are
+            single population. For each study, we downloaded all reported SNPs (p {">"} 10-6), even those that were just under genome wide
+            significance. We then intersected all reported SNPs and SNPs in high LD (r2 {">"} 0.7), with GRCh38 cCREs. These results are
             available through the SCREEN GWAS app.
           </Typography>
           <Typography variant="h5">Determining Cell Types with cCREs Enriched in GWAS SNPs</Typography>
           <Typography>
             For studies with more than 25 lead SNPs, we performed biosample enrichment analysis. For each study, we generated a matching set
-            of control SNPs as follows: for each SNP in the study (p-value `{">"}` 10-6) we selected a SNP on Illumina and Affymetrix SNP
+            of control SNPs as follows: for each SNP in the study (p-value {">"} 10-6) we selected a SNP on Illumina and Affymetrix SNP
             chips that fell within the same population-specific minor allele frequency (MAF) quartile and the same distance to TSS quartile.
             We repeated this process 500 times, generating 500 random control SNPs for each GWAS SNP. Then, for both GWAS and control SNPs,
-            we retrieved all SNPs in high linkage disequilibrium (LD r2 `{">"}` 0.7), creating LD groups. This method was adapted and
+            we retrieved all SNPs in high linkage disequilibrium (LD r2 {">"} 0.7), creating LD groups. This method was adapted and
             modified from the Uncovering Enrichment through Simulation (UES) method developed by the Klein Lab (Hayes et al. 2015).
           </Typography>
           <Typography>
             To assess whether the cCREs in a biosample were enriched in the GWAS SNPs, we intersected GWAS and control LD groups with cCREs
-            with an H3K27ac Z-score `{">"}` 1.64 in the biosample. To avoid overcounting, we pruned the overlaps, counting each LD group
+            with an H3K27ac Z-score {">"} 1.64 in the biosample. To avoid overcounting, we pruned the overlaps, counting each LD group
             once per biosample. We modified the UES method by calculating p-values from Z-scores for performing statistical testing. We
             calculated enrichment for overlapping cCREs by comparing the GWAS LD groups with the 500 matched controls. Finally, we applied a
             false discovery rate threshold of 5% to each study.

screen2.0/public/mouseDark.png

@@ -14,7 +14,8 @@ type QuantificationData = {
   color: string,
   file_accession: string,
   tpm: number,
-  value: number
+  value: number,
+  // replicate_num: number,
 }[]
 
 /**
@@ -40,11 +41,7 @@ export function PlotGeneExpression(props: {
 }) {
   const router = useRouter()
 
-  let byTissue: {
-    [id: string]: {
-      values: QuantificationData
-    }
-  } = {}
+  let byTissue: { [id: string]: { values: QuantificationData } } = {}
   let byTissueMean: { [id: string]: { values: QuantificationData } } = {}
   let byValueTissues: { [id: string]: { values: QuantificationData } } = {}
   let byTissueMaxTissues: { [id: string]: { values: QuantificationData } } = {}
@@ -55,14 +52,13 @@ export function PlotGeneExpression(props: {
   //Filter Data to [...]
   props.data.filter(s => s["tissue"]).map((biosample) => {
 
-    //
     if (!byTissue[biosample["tissue"]]) {
       byTissue[biosample["tissue"]] = { values: [] }
     }
 
-    biosample["gene_quantification_files"].forEach(d => {
-      if (d.quantifications.length > 0) {
-        d.quantifications.forEach(q => {
+    biosample["gene_quantification_files"].forEach((file, i) => {
+      if (file.quantifications.length > 0) {
+        file.quantifications.forEach(q => {
           let val = props.scale === "logTPM" ? Math.log10(q.tpm + 1) : q.tpm
           if (val > max) {
             max = val
@@ -75,7 +71,8 @@ export function PlotGeneExpression(props: {
               accession: biosample.accession,
               value: val, tpm: q.tpm, file_accession: q.file_accession,
               color: tissueColors[biosample["tissue"]] ? tissueColors[biosample["tissue"]] :
-                stringToColour(biosample["tissue"])
+                stringToColour(biosample["tissue"]),
+              // replicate_num: i + 1
             })
           }
         })
@@ -103,7 +100,8 @@ export function PlotGeneExpression(props: {
             tpm: r[0].tpm, 
             file_accession: r[0].file_accession,
             color: tissueColors[k] ? tissueColors[k] :
-              stringToColour(k)
+              stringToColour(k),
+            // replicate_num: 0
           }
         )
       })
@@ -124,9 +122,7 @@ export function PlotGeneExpression(props: {
 
     let info = entry[1]
 
-    //Value here will be p1.x
-    //So entry[1].values[x].value = width?
-    return info.values.map((item: { color: string, biosample: string, file_accession: string, accession: string, value: number }, i: number) => {
+    return info.values.map((item: { color: string, biosample: string, file_accession: string, accession: string, value: number, replicate_num: number }, i: number) => {
       //Shouldn't this just be LinearTransform? Why 2D?
       p1 = linearTransform2D(props.range, props.dimensions)({ x: item.value, y: 0 })
       return (
@@ -143,11 +139,13 @@ export function PlotGeneExpression(props: {
               <title>{item.biosample + "\n" + item.accession + "-" + item.file_accession}</title>
             </rect>
           </a>
-          {/* The ccore and exp/biosample ID */}
+          {/* The score and exp/biosample ID */}
           <text x={p1.x + 0 + 170} y={y + i * 20 + 12.5} style={{ fontSize: 12 }}>
-            {Number(item.value.toFixed(3)) + " "}
+            {Number(item.value.toFixed(1)) + ", "}
+            {item.biosample + " ("}
             <a href={"https://www.encodeproject.org/experiments/" + item.accession}>{item.accession}</a>
-            {" " + item.file_accession + " " + item.biosample}
+            {/* {item.replicate_num ? ", rep. " + item.replicate_num + ")" : ")"} */}
+            {")"}
           </text>
           {/* The biosample category */}
           {(props.group === 'byTissueMaxTPM' || props.group === 'byExperimentTPM') &&
@@ -199,29 +197,22 @@ export function PlotGeneExpression(props: {
   let tissues: { [id: string]: { values: QuantificationData } } = props.group === "byExperimentTPM" ? byValueTissues : props.group === "byTissueMaxTPM" ? byTissueMaxTissues : byTissue // dict of ftissues
 
   return (
-    <>
-      <Grid2 xs={12} md={12} lg={12} mt={1} ml={2} mr={2}>
-        {Object.keys(tissues).length === 0 ? <span>{'No Data Available'}</span> : <Stack>
-        
-            {Object.entries(tissues).map((entry, index: number) => {
-          
-            let info = entry[1]
-          
-
-            let view: string = "0 0 1200 " + (info.values.length * (props.group === 'byTissueTPM' ? 20 : 3) + 20)
-            
-            return (
-              <svg className="graph" aria-labelledby="title desc" role="img" viewBox={view} key={index}>
-                <g className="data" data-setname="gene expression plot">
-                  {/* Why 5? */}
-                  {plotGeneExp(entry, index, 5)}
-                </g>
-              </svg>
-            )
-          })}
-          
-        </Stack>}
-      </Grid2>
-    </>
+    Object.keys(tissues).length === 0 ?
+      <span>{'No Data Available'}</span>
+      :
+      <Stack>
+        {Object.entries(tissues).map((entry, index: number) => {
+          let info = entry[1]
+          let view: string = "0 0 1200 " + (info.values.length * (props.group === 'byTissueTPM' ? 20 : 3) + 20)
+          return (
+            <svg className="graph" aria-labelledby="title desc" role="img" viewBox={view} key={index}>
+              <g className="data" data-setname="gene expression plot">
+                {/* Why 5? */}
+                {plotGeneExp(entry, index, 5)}
+              </g>
+            </svg>
+          )
+        })}
+      </Stack>
   )
 }

screen2.0/src/app/about/page.tsx

@@ -140,7 +140,7 @@ export default function GeneAutoComplete(props: {
             }
           }
         }}
-        renderInput={(tprops) => <TextField {...tprops} label={"Select a Gene"} />}
+        renderInput={(tprops) => <TextField {...tprops} placeholder={"Select a Gene"} />}
         renderOption={(props, opt) => {
           return (
             <li {...props} key={props.id}>

screen2.0/src/app/applets/gene-expression/PlotGeneExpression.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { Box } from "@mui/material"
-import { GeneExpression } from "../../search/ccredetails/gene-expression"
+import { GeneExpression } from "../../search/ccredetails/geneexpression"
 
 export default function GeneExpressionApplet() {
   return (

screen2.0/src/app/applets/gene-expression/gene-autocomplete.tsx

@@ -1,10 +1,12 @@
 "use client"
 
-import { Typography } from "@mui/material"
+import { Box, Divider, Stack, Typography } from "@mui/material"
 import MainSearch from "../common/components/mainsearch/MainSearch"
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
 import homeImage from "../../public/homeImage.png"
 import Image from "next/image"
+import humanIcon from "../../public/humanDark.png"
+import mouseIcon from "../../public/mouseDark.png"
 
 export default function Home() {
   return (
@@ -16,7 +18,7 @@ export default function Home() {
         </Grid2>
         <Grid2 xs={12} lg={6}>
           <MainSearch />
-          <Typography variant="h5" mt="3rem">
+          <Typography variant="h5" mt={4}>
             What is SCREEN?
           </Typography>
           <Typography paragraph>
@@ -25,23 +27,50 @@ export default function Home() {
             cross-referenced across species. SCREEN presents the data that support biochemical activities of the cCREs and the expression of
             nearby genes in specific cell and tissue types.
           </Typography>
-          <Typography variant="h5" mt="2rem">
+          <Typography variant="h5" mt={3} mb={1}>
             Version 4 Annotations:
           </Typography>
-          <Typography>
-            Human Genome assembly: hg38
-            <br />
-            Human cCRE count: 1,063,878
-            <br />
-            Human cell and tissue types covered: 1,518
-            <br />
-            Mouse Genome assembly: mm10
-            <br />
-            Mouse cCRE count: 313,838
-            <br />
-            Mouse cell and tissue types covered: 169
-          </Typography>
+          <Grid2 container justifyContent={"flex-start"}>
+            <Grid2 direction="column" flexGrow={0} border={"1px solid LightGray"} borderRight={"none"}>
+              <Typography p={1} align="left">Genome Assembly</Typography>
+              <Divider />
+              <Stack direction="row" pl={1} >
+                <Box position={"relative"} minWidth={"30px"}>
+                  <Image objectFit="contain" src={humanIcon} alt={""} fill />
+                </Box>
+                <Typography p={1} align="left">Human (hg38)</Typography>
+              </Stack>
+              <Divider />
+              <Stack direction="row" pl={1} >
+                <Box position={"relative"} minWidth={"30px"}>
+                  <Image objectFit="contain" src={mouseIcon} alt={""} fill />
+                </Box>
+                <Typography p={1} align="left">Mouse (mm10)</Typography>
+              </Stack>
+            </Grid2>
+            <Grid2>
+              <Divider orientation="vertical" />
+            </Grid2>
+            <Grid2 direction="column" flexGrow={0} border={"1px solid LightGray"} borderLeft={"none"} borderRight={"none"}>
+              <Typography p={1} align="right">cCRE Count</Typography>
+              <Divider />
+              <Typography p={1} align="right">1,063,878</Typography>
+              <Divider />
+              <Typography p={1} align="right">313,838</Typography>
+            </Grid2>
+            <Grid2>
+              <Divider orientation="vertical" />
+            </Grid2>
+            <Grid2 direction="column" flexGrow={0} border={"1px solid LightGray"} borderLeft={"none"}>
+              <Typography p={1} align="right">Cell/Tissue Types Covered</Typography>
+              <Divider />
+              <Typography p={1} align="right">1,518</Typography>
+              <Divider />
+              <Typography p={1} align="right">169</Typography>
+            </Grid2>
+          </Grid2>
         </Grid2>
+
         <Grid2 xs={12} lg={6}>
           <Image src={homeImage} alt={"SCREEN home image"} />
         </Grid2>

screen2.0/src/app/applets/gene-expression/page.tsx

@@ -9,7 +9,7 @@ import { Ortholog } from "./linkedccres"
 import { TfIntersection } from "./tfintersection"
 import { FunctionData } from "./functionaldata"
 import Rampage from "./rampage"
-import { GeneExpression } from "./gene-expression"
+import { GeneExpression } from "./geneexpression"
 import { TfSequenceFeatures} from "../gbview/tfsequencefeatures"
 
 //Passing these props through this file could be done with context to reduce prop drilling
@@ -28,7 +28,7 @@ export const CcreDetails: React.FC<CcreDetailsProps> = ({ accession, region, glo
     <>
       <Stack direction="row" justifyContent={"space-between"} alignItems={"baseline"}>
         <Typography variant="h4">{accession}</Typography>
-        <Typography variant="h5">{`${region.chrom}:${region.start}-${region.end}`}</Typography>
+        <Typography variant="h6">{`${region.chrom}:${region.start}-${region.end}`}</Typography>
       </Stack>
       <Divider sx={{mb: 2}}/>
       {page === 0 && <InSpecificBiosamples accession={accession} globals={globals} assembly={assembly} />}