diff --git a/screen2.0/src/app/applets/differential-gene-expression/utils.tsx b/screen2.0/src/app/applets/differential-gene-expression/utils.tsx index 81c71b16..b6934ce9 100644 --- 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" ? ( - {"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")} - ) : <> - } - {highlighted === props.point && option === "h3k27ac" ? ( + ) : ( + <> + )} + {highlighted === props.point && option === "h3k27ac" ? ( - {"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")} - ) : <> - } - {option === "h3k4me2" && props.point.pct === highlightpct ? : <>} - {option === "h3k27ac" && props.point.pct === highlightpct ? : <>} + ) : ( + <> + )} + {option === "h3k4me2" && props.point.pct === highlightpct ? ( + + ) : ( + <> + )} + {option === "h3k27ac" && props.point.pct === highlightpct ? ( + + ) : ( + <> + )} {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] ? ( <> ) : ( - { - 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) - }} + { + 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) + }} > {"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: { )} - ) } @@ -413,11 +431,11 @@ export const SetRange_y = (props: { - {"0.0"} + {props.range.y.end - props.range.y.start < 8 ? "0.0" : "0"} - {"0.0"} + {props.range.y.end - props.range.y.start < 8 ? "0.0" : "0"} @@ -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()} @@ -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()} ) diff --git a/screen2.0/src/app/search/ccredetails/const.ts b/screen2.0/src/app/search/ccredetails/const.ts new file mode 100644 index 00000000..ce1838f8 --- /dev/null +++ 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 index c5d73c4e..077cd8b1 100644 --- a/screen2.0/src/app/search/ccredetails/gene-expression.tsx +++ b/screen2.0/src/app/search/ccredetails/gene-expression.tsx @@ -8,7 +8,7 @@ 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" @@ -16,6 +16,7 @@ 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 + + + + + diff --git a/screen2.0/src/app/search/ccredetails/rampage.tsx b/screen2.0/src/app/search/ccredetails/rampage.tsx index 46da4688..d7795432 100644 --- 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(true) @@ -102,6 +106,11 @@ export default function Rampage(props: { accession: string; assembly: string; ch TSS Activity Profiles by RAMPAGE + + + + + {data[payload.accession]["gene"]["name"]}