added rampage tooltip, changed numbers on y-axis

weng-lab · Aug 3, 2023 · 8735ceb · 8735ceb
1 parent 68d3b57
commit 8735ceb
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 61 deletions.
diff --git a/screen2.0/src/app/applets/differential-gene-expression/utils.tsx b/screen2.0/src/app/applets/differential-gene-expression/utils.tsx
@@ -65,35 +65,45 @@ export const Point = (props: {
       {highlighted === props.point && option === "h3k4me3" ? (
         <circle cx={t_h3k4me3.x} cy={t_h3k4me3.y} r="5" fill="black" opacity="100%">
           <title>
-          {"pct: " +
-            props.point.pct +
-            "\nlength: " +
-            props.point.len +
-            "\nh3k4me3 z-score: " +
-            h3k4me3.y +
-            "\ncoordinates: " +
-            x.toLocaleString("en-US")}
+            {"pct: " +
+              props.point.pct +
+              "\nlength: " +
+              props.point.len +
+              "\nh3k4me3 z-score: " +
+              h3k4me3.y +
+              "\ncoordinates: " +
+              x.toLocaleString("en-US")}
           </title>
         </circle>
-        ) : <></>
-        }
-        {highlighted === props.point && option === "h3k27ac" ? (
+      ) : (
+        <></>
+      )}
+      {highlighted === props.point && option === "h3k27ac" ? (
         <circle cx={t_h3k27ac.x} cy={t_h3k27ac.y} r="5" fill="black" opacity="100%">
           <title>
-          {"pct: " +
-            props.point.pct +
-            "\nlength: " +
-            props.point.len +
-            "\nh3k27ac z-score: " +
-            h3k27ac.y +
-            "\ncoordinates: " +
-            x.toLocaleString("en-US")}
+            {"pct: " +
+              props.point.pct +
+              "\nlength: " +
+              props.point.len +
+              "\nh3k27ac z-score: " +
+              h3k27ac.y +
+              "\ncoordinates: " +
+              x.toLocaleString("en-US")}
           </title>
         </circle>
-        ) : <></>
-        }
-        {option === "h3k4me2" && props.point.pct === highlightpct ? <circle cx={t_h3k4me3.x} cy={t_h3k4me3.y} r="5" fill="black" opacity="100%" /> : <></>}
-        {option === "h3k27ac" && props.point.pct === highlightpct ? <circle cx={t_h3k27ac.x} cy={t_h3k27ac.y} r="5" fill="black" opacity="100%" /> : <></>}
+      ) : (
+        <></>
+      )}
+      {option === "h3k4me2" && props.point.pct === highlightpct ? (
+        <circle cx={t_h3k4me3.x} cy={t_h3k4me3.y} r="5" fill="black" opacity="100%" />
+      ) : (
+        <></>
+      )}
+      {option === "h3k27ac" && props.point.pct === highlightpct ? (
+        <circle cx={t_h3k27ac.x} cy={t_h3k27ac.y} r="5" fill="black" opacity="100%" />
+      ) : (
+        <></>
+      )}
       {h3k4me3.y === undefined ||
       h3k4me3.x > props.range.x.end ||
       h3k4me3.x < props.range.x.start ||
@@ -102,22 +112,26 @@ export const Point = (props: {
       !props.togglePCT[props.point.pct] ? (
         <></>
       ) : (
-        <circle cx={t_h3k4me3.x} cy={t_h3k4me3.y} r="4" fill={H3K4me3} 
-        onMouseEnter={() => {
-          setHighlighted(props.point)
-          setOption("h3k4me3")
-        }}
-        onMouseOut={() => {
-          setHighlighted(null)
-        }}
-        onMouseOver={() => {
-          setHighlighted(props.point)
-          setOption("h3k4me3")
-        }}
-        onClick={() => {
-          if (highlightpct === props.point.pct) setHighlightpct("")
-          else setHighlightpct(props.point.pct)
-        }}
+        <circle
+          cx={t_h3k4me3.x}
+          cy={t_h3k4me3.y}
+          r="4"
+          fill={H3K4me3}
+          onMouseEnter={() => {
+            setHighlighted(props.point)
+            setOption("h3k4me3")
+          }}
+          onMouseOut={() => {
+            setHighlighted(null)
+          }}
+          onMouseOver={() => {
+            setHighlighted(props.point)
+            setOption("h3k4me3")
+          }}
+          onClick={() => {
+            if (highlightpct === props.point.pct) setHighlightpct("")
+            else setHighlightpct(props.point.pct)
+          }}
         >
           <title>
             {"pct: " +
@@ -139,22 +153,27 @@ export const Point = (props: {
       !props.togglePCT[props.point.pct] ? (
         <></>
       ) : (
-        <circle cx={t_h3k27ac.x} cy={t_h3k27ac.y} r="4" fill={H3K27ac}
-        onMouseEnter={() => {
-          setHighlighted(props.point)
-          setOption("h3k27ac")
-        }}
-        onMouseOut={() => {
-          setHighlighted(null)
-        }}
-        onMouseOver={() => {
-          setHighlighted(props.point)
-          setOption("h3k27ac")
-        }}
-        onClick={() => {
-          if (highlightpct === props.point.pct) setHighlightpct("")
-          else setHighlightpct(props.point.pct)
-        }}>
+        <circle
+          cx={t_h3k27ac.x}
+          cy={t_h3k27ac.y}
+          r="4"
+          fill={H3K27ac}
+          onMouseEnter={() => {
+            setHighlighted(props.point)
+            setOption("h3k27ac")
+          }}
+          onMouseOut={() => {
+            setHighlighted(null)
+          }}
+          onMouseOver={() => {
+            setHighlighted(props.point)
+            setOption("h3k27ac")
+          }}
+          onClick={() => {
+            if (highlightpct === props.point.pct) setHighlightpct("")
+            else setHighlightpct(props.point.pct)
+          }}
+        >
           <title>
             {"pct: " +
               props.point.pct +
@@ -167,7 +186,6 @@ export const Point = (props: {
           </title>
         </circle>
       )}
-
     </g>
   )
 }
@@ -413,11 +431,11 @@ export const SetRange_y = (props: {
           <line x1={100} x2={900} y1={t.y} y2={t.y} stroke="black"></line>
           <line x1={900} x2={906} y1={t.y} y2={t.y} stroke="#549623"></line>
           <text x={65} y={t.y + 4} style={{ fontSize: 12 }}>
-            {"0.0"}
+            {props.range.y.end - props.range.y.start < 8 ? "0.0" : "0"}
           </text>
           <line x1={94} x2={100} y1={t.y} y2={t.y} stroke="black"></line>
           <text x={925} y={t.y + 4} style={{ fontSize: 12, fill: "#549623" }}>
-            {"0.0"}
+            {props.range.y.end - props.range.y.start < 8 ? "0.0" : "0"}
           </text>
           <line x1={41} x2={50} y1={t.y} y2={t.y} stroke="black"></line>
           <g transform={cellTypeLabel[1]}>
@@ -444,7 +462,9 @@ export const SetRange_y = (props: {
               ? y
               : y.toString().split(".").length > 1
               ? ""
-              : y.toString() + ".0"}
+              : props.range.y.end - props.range.y.start < 10 && y % 2 !== 0
+              ? ""
+              : y.toString()}
           </text>
           <line x1={94} x2={100} y1={t.y} y2={t.y} stroke="black"></line>
           <line x1={900} x2={906} y1={t.y} y2={t.y} stroke="#549623"></line>
@@ -453,7 +473,9 @@ export const SetRange_y = (props: {
               ? y
               : y.toString().split(".").length > 1
               ? ""
-              : y.toString() + ".0"}
+              : props.range.y.end - props.range.y.start < 10 && y % 2 !== 0
+              ? ""
+              : y.toString()}
           </text>
         </Fragment>
       )

diff --git a/screen2.0/src/app/search/ccredetails/const.ts b/screen2.0/src/app/search/ccredetails/const.ts
@@ -0,0 +1,3 @@
+export const RampageToolTipInfo = () => {
+  return "RAMPAGE (RNA Annotiation and Mapping of Promoters for Analysis of Gene Expression) data allows for the annotation of and expression at transcription start sites with nucleotide precision. Here, we display the sum of signal (from ENCODE Data Coordination Center's RAMPAGE pipeline) in a +-50bp window around GENCODE V19 annotated TSSs for the cRE's nearest protein coding gene. As, this signal is strand specific, we display signal from both the + and - strands for each experiment."
+}
diff --git a/screen2.0/src/app/search/ccredetails/gene-expression.tsx b/screen2.0/src/app/search/ccredetails/gene-expression.tsx
@@ -8,14 +8,15 @@ import { PlotGeneExpression } from "../../applets/gene-expression/utils"
 import { GeneExpressions } from "../../applets/gene-expression/types"
 import { Range2D } from "jubilant-carnival"
 
-import { Box, Button, Typography, IconButton, Drawer, Toolbar, AppBar, Stack, Paper, TextField, MenuItem } from "@mui/material"
+import { Box, Button, Typography, IconButton, Drawer, Toolbar, AppBar, Stack, Paper, TextField, MenuItem, Tooltip } from "@mui/material"
 
 import Grid2 from "@mui/material/Unstable_Grid2/Grid2"
 import Divider from "@mui/material/Divider"
 import { ThemeProvider } from "@mui/material/styles"
 import { defaultTheme } from "../../../common/lib/themes"
 import MenuIcon from "@mui/icons-material/Menu"
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"
+import InfoIcon from "@mui/icons-material/Info"
 
 import Image from "next/image"
 import {
@@ -26,6 +27,7 @@ import {
   OptionsReplicates,
   OptionsScale,
 } from "../../applets/gene-expression/options"
+import { GeneExpressionInfoTooltip } from "../../applets/gene-expression/const"
 
 export function GeneExpression(props: {
   accession: string
@@ -197,6 +199,11 @@ export function GeneExpression(props: {
                         {" "}
                         Gene Expression Profiles by RNA-seq
                       </Typography>
+                      <Tooltip title={GeneExpressionInfoTooltip()}>
+                        <IconButton>
+                          <InfoIcon />
+                        </IconButton>
+                      </Tooltip>
                     </Box>
                   </Grid2>
                   <Grid2 xs={1.5} sx={{ mt: 2, height: 100, width: 190 }}>

diff --git a/screen2.0/src/app/search/ccredetails/rampage.tsx b/screen2.0/src/app/search/ccredetails/rampage.tsx
@@ -7,12 +7,14 @@ import {
   Box,
   Button,
   FormControl,
+  IconButton,
   InputLabel,
   MenuItem,
   Select,
   SelectChangeEvent,
   ThemeProvider,
   Toolbar,
+  Tooltip,
   Typography,
   createTheme,
 } from "@mui/material"
@@ -21,6 +23,8 @@ import { Range2D } from "jubilant-carnival"
 import { PlotActivityProfiles } from "./utils"
 import Image from "next/image"
 import { defaultTheme } from "../../../common/lib/themes"
+import InfoIcon from "@mui/icons-material/Info"
+import { RampageToolTipInfo } from "./const"
 
 export default function Rampage(props: { accession: string; assembly: string; chromosome: string }) {
   const [loading, setLoading] = useState<boolean>(true)
@@ -102,6 +106,11 @@ export default function Rampage(props: { accession: string; assembly: string; ch
                   <Typography variant="h5" fontSize={30}>
                     TSS Activity Profiles by RAMPAGE
                   </Typography>
+                  <Tooltip title={RampageToolTipInfo()}>
+                    <IconButton>
+                      <InfoIcon />
+                    </IconButton>
+                  </Tooltip>
                 </Box>
                 <Box mt={2} ml={0.5}>
                   <Typography variant="h5">{data[payload.accession]["gene"]["name"]}</Typography>