diff --git a/packages/sections/src/study/GWASCredibleSets/ManhattanPlot.tsx b/packages/sections/src/study/GWASCredibleSets/ManhattanPlot.tsx index e0a77a814..03626e551 100644 --- a/packages/sections/src/study/GWASCredibleSets/ManhattanPlot.tsx +++ b/packages/sections/src/study/GWASCredibleSets/ManhattanPlot.tsx @@ -1,7 +1,11 @@ -import { Skeleton, useTheme } from "@mui/material"; +import { Box, Skeleton, useTheme } from "@mui/material"; import { + ClinvarStars, Link, + Tooltip, DisplayVariantId, + Navigate, + OtScoreLinearBar, Plot, Vis, XAxis, @@ -21,11 +25,11 @@ import { } from "ui"; import { scaleLinear, min } from "d3"; import { ScientificNotation } from "ui"; -import { naLabel } from "../../constants"; +import { naLabel, credsetConfidenceMap } from "../../constants"; export default function ManhattanPlot({ loading, data }) { - const plotHeight = 390; + const plotHeight = 410; const theme = useTheme(); const background = theme.palette.background.paper; const markColor = theme.palette.primary.main; @@ -152,7 +156,7 @@ export default function ManhattanPlot({ loading, data }) { x={d => genomePositions[d.variant.id]} y={d => d._y} pxWidth={290} - pxHeight={200} + pxHeight={210} content={tooltipContent} /> @@ -169,8 +173,10 @@ export default function ManhattanPlot({ loading, data }) { function tooltipContent(data) { return ( - - view + + + + @@ -183,32 +189,55 @@ function tooltipContent(data) { - + - {data.beta?.toFixed(3) ?? naLabel} + {data.beta?.toPrecision(3) ?? naLabel} + - {data.finemappingMethod ?? naLabel} + + + Method:{" "}{data.finemappingMethod ?? naLabel} + + + Confidence:{" "} + {data.confidence + ? + + + : naLabel + } + + + - {data.l2Gpredictions?.[0]?.target - ? - - {data.l2Gpredictions[0].target.approvedSymbol} - - - : - {naLabel} - - } - - {data.l2Gpredictions?.[0]?.score != null - ? data.l2Gpredictions[0].score.toFixed(3) - : naLabel - } + + + + Top:{" "} + {data.l2GPredictions?.rows?.[0]?.target + ? + {data.l2GPredictions.rows[0].target.approvedSymbol} + + : naLabel + } + + + Score:{" "} + {data.l2GPredictions?.rows?.[0]?.score + ? + + + + + : naLabel + } + + - {data.locus?.count ?? naLabel} + {data.locus?.count ? data.locus.count.toLocaleString() : naLabel} ); diff --git a/packages/sections/src/variant/GWASCredibleSets/PheWasPlot.tsx b/packages/sections/src/variant/GWASCredibleSets/PheWasPlot.tsx index 478737bc9..f75760c4c 100644 --- a/packages/sections/src/variant/GWASCredibleSets/PheWasPlot.tsx +++ b/packages/sections/src/variant/GWASCredibleSets/PheWasPlot.tsx @@ -26,9 +26,12 @@ import { ScientificNotation } from "ui"; import { naLabel, credsetConfidenceMap } from "../../constants"; import { Fragment } from "react/jsx-runtime"; +const plotHeight = 450; +const tooltipHeight = 310; +const tooltipWidth = 360; + export default function PheWasPlot({ loading, data, id, referenceAllele, alternateAllele }) { - const plotHeight = 450; const theme = useTheme(); const background = theme.palette.background.paper; const fontFamily = theme.typography.fontFamily; @@ -226,8 +229,8 @@ export default function PheWasPlot({ loading, data, id, referenceAllele, alterna rowLookup.get(d).x} y={d => yMin} - pxWidth={360} - pxHeight={350} + pxWidth={tooltipWidth} + pxHeight={tooltipHeight} content={tooltipContent} xOffset={40} yOffset={-20} @@ -247,16 +250,15 @@ export default function PheWasPlot({ loading, data, id, referenceAllele, alterna function tooltipContent(data) { - const labelWidth = 148; - // const valueWidth = 100; + const labelWidth = 160; return ( - + - + - + {data.study?.traitFromSource ?? naLabel} - + {data.study?.diseases?.length > 0 ? <> {data.study.diseases.map((d, i) => ( @@ -282,27 +296,30 @@ function tooltipContent(data) { : naLabel } - + {data.study - ? - {data.study.studyId} + ? + {data.study.id} : naLabel } - - + + - - {data.beta?.toFixed(3) ?? naLabel} + + {data.beta?.toPrecision(3) ?? naLabel} - - {data.locus?.rows?.[0].posteriorProbability.toFixed(3) ?? naLabel} + + {data.locus?.rows?.[0].posteriorProbability.toPrecision(3) ?? naLabel} - + - Confidence: + Method:{" "}{data.finemappingMethod ?? naLabel} + + + Confidence:{" "} {data.confidence ? @@ -310,28 +327,25 @@ function tooltipContent(data) { : naLabel } - - Method:{" "}{data.finemappingMethod ?? naLabel} - - + - Top: - {data.l2Gpredictions?.[0]?.target - ? - {data.l2Gpredictions[0].target.approvedSymbol} + Top:{" "} + {data.l2GPredictions?.rows?.[0]?.target + ? + {data.l2GPredictions.rows[0].target.approvedSymbol} : naLabel } - Score: - {data.l2Gpredictions?.[0]?.score - ? + Score:{" "} + {data.l2GPredictions?.rows?.[0]?.score + ? - + : naLabel @@ -339,7 +353,7 @@ function tooltipContent(data) { - + {data.locus?.count ?? naLabel} diff --git a/packages/ui/src/components/Plot/components/htmlTooltip/HTMLTooltipRow.jsx b/packages/ui/src/components/Plot/components/htmlTooltip/HTMLTooltipRow.jsx index 74e8abbd1..93a40fea5 100644 --- a/packages/ui/src/components/Plot/components/htmlTooltip/HTMLTooltipRow.jsx +++ b/packages/ui/src/components/Plot/components/htmlTooltip/HTMLTooltipRow.jsx @@ -4,7 +4,8 @@ export default function TooltipRow({ children, label, data, - labelMinWidth, + labelWidth, + valueWidth, truncateValue, }) { @@ -18,13 +19,22 @@ export default function TooltipRow({ return ( - - + + {label}: - + {children}