Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Platform]: Update plot tooltips #603

Merged
merged 5 commits into from
Dec 9, 2024
Merged

[Platform]: Update plot tooltips #603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1880d35
use linear scales
gjmcn Dec 8, 2024
dea3dd2
spacing and therapeutic areas labels
gjmcn Dec 9, 2024
c6b08e9
manhattan plot tooltip
gjmcn Dec 9, 2024
c075da2
phewas tooltip
gjmcn Dec 9, 2024
bf576a7
Merge branch 'main' into gm-update-tooltips
gjmcn Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 54 additions & 25 deletions packages/sections/src/study/GWASCredibleSets/ManhattanPlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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;
Expand Down Expand Up @@ -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}
/>

Expand All @@ -169,8 +173,10 @@ export default function ManhattanPlot({ loading, data }) {
function tooltipContent(data) {
return (
<HTMLTooltipTable>
<HTMLTooltipRow label="Details" data={data}>
<Link to={`../credible-set/${data.studyLocusId}`}>view</Link>
<HTMLTooltipRow label="Navigate" data={data}>
<Box display="flex">
<Navigate to={`../credible-set/${data.studyLocusId}`} />
</Box>
</HTMLTooltipRow>
<HTMLTooltipRow label="Lead variant" data={data}>
<Link to={`/variant/${data.variant.id}`}>
Expand All @@ -183,32 +189,55 @@ function tooltipContent(data) {
</Link>
</HTMLTooltipRow>
<HTMLTooltipRow label="P-value" data={data}>
<ScientificNotation number={[data.pValueMantissa, data.pValueExponent]} />
<ScientificNotation number={[data.pValueMantissa, data.pValueExponent]} dp={2} />
</HTMLTooltipRow>
<HTMLTooltipRow label="Beta" data={data}>
{data.beta?.toFixed(3) ?? naLabel}
{data.beta?.toPrecision(3) ?? naLabel}
</HTMLTooltipRow>

<HTMLTooltipRow label="Fine-mapping" data={data}>
{data.finemappingMethod ?? naLabel}
<Box display="flex" flexDirection="column" gap={0.25}>
<Box display="flex" gap={0.5}>
Method:{" "}{data.finemappingMethod ?? naLabel}
</Box>
<Box display="flex" gap={0.5}>
Confidence:{" "}
{data.confidence
? <Tooltip title={data.confidence} style="">
<ClinvarStars num={credsetConfidenceMap[data.confidence]} />
</Tooltip>
: naLabel
}
</Box>

</Box>
</HTMLTooltipRow>
{data.l2Gpredictions?.[0]?.target
? <HTMLTooltipRow label="Top L2G" data={data}>
<Link to={`/target/${data.l2Gpredictions[0].target.id}`}>
{data.l2Gpredictions[0].target.approvedSymbol}
</Link>
</HTMLTooltipRow>
: <HTMLTooltipRow label="Top L2G">
{naLabel}
</HTMLTooltipRow>
}
<HTMLTooltipRow label="L2G score" data={data}>
{data.l2Gpredictions?.[0]?.score != null
? data.l2Gpredictions[0].score.toFixed(3)
: naLabel
}
<HTMLTooltipRow label="L2G" data="data">
<Box display="flex" flexDirection="column" gap={0.25}>
<Box display="flex" gap={0.5}>
Top:{" "}
{data.l2GPredictions?.rows?.[0]?.target
? <Link to={`/target/${data.l2GPredictions.rows[0].target.id}`}>
{data.l2GPredictions.rows[0].target.approvedSymbol}
</Link>
: naLabel
}
</Box>
<Box display="flex" alignItems="center" gap={0.5}>
Score:{" "}
{data.l2GPredictions?.rows?.[0]?.score
? <Tooltip title={data.l2GPredictions.rows[0].score.toFixed(3)} style="">
<div>
<OtScoreLinearBar variant="determinate" value={data.l2GPredictions.rows[0].score * 100} />
</div>
</Tooltip>
: naLabel
}
</Box>
</Box>
</HTMLTooltipRow>
<HTMLTooltipRow label="Credible set size" data={data}>
{data.locus?.count ?? naLabel}
{data.locus?.count ? data.locus.count.toLocaleString() : naLabel}
</HTMLTooltipRow>
</HTMLTooltipTable>
);
Expand Down
80 changes: 47 additions & 33 deletions packages/sections/src/variant/GWASCredibleSets/PheWasPlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -226,8 +229,8 @@ export default function PheWasPlot({ loading, data, id, referenceAllele, alterna
<HTMLTooltip
x={(d, i) => rowLookup.get(d).x}
y={d => yMin}
pxWidth={360}
pxHeight={350}
pxWidth={tooltipWidth}
pxHeight={tooltipHeight}
content={tooltipContent}
xOffset={40}
yOffset={-20}
Expand All @@ -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 (
<HTMLTooltipTable>
<HTMLTooltipRow label="Navigate" data={data} labelMinWidth={labelWidth}>
<HTMLTooltipRow label="Navigate" data={data} labelWidth={labelWidth}>
<Link to={`/credible-set/${data.studyLocusId}`}>
<FontAwesomeIcon icon={faArrowRightToBracket} />
</Link>
</HTMLTooltipRow>
<HTMLTooltipRow label="Lead variant" data={data} labelMinWidth={labelWidth}>
<HTMLTooltipRow label="Lead variant" data={data} labelWidth={labelWidth}>
<Link to={`/variant/${data.variant.id}`}>
<DisplayVariantId
variantId={data.variant.id}
Expand All @@ -266,10 +268,22 @@ function tooltipContent(data) {
/>
</Link>
</HTMLTooltipRow>
<HTMLTooltipRow label="Reported trait" data={data} labelMinWidth={labelWidth} >
<HTMLTooltipRow
label="Reported trait"
data={data}
labelWidth={labelWidth}
valueWidth={`${tooltipWidth - labelWidth}px`}
truncateValue
>
{data.study?.traitFromSource ?? naLabel}
</HTMLTooltipRow>
<HTMLTooltipRow label="Disease/phenotype" data={data} labelMinWidth={labelWidth}>
<HTMLTooltipRow
label="Disease/phenotype"
data={data}
labelWidth={labelWidth}
valueWidth={`${tooltipWidth - labelWidth}px`}
truncateValue
>
{data.study?.diseases?.length > 0
? <>
{data.study.diseases.map((d, i) => (
Expand All @@ -282,64 +296,64 @@ function tooltipContent(data) {
: naLabel
}
</HTMLTooltipRow>
<HTMLTooltipRow label="Study" data={data} labelMinWidth={labelWidth}>
<HTMLTooltipRow label="Study" data={data} labelWidth={labelWidth}>
{data.study
? <Link to={`/study/${data.study.studyId}`}>
{data.study.studyId}
? <Link to={`/study/${data.study.id}`}>
{data.study.id}
</Link>
: naLabel
}
</HTMLTooltipRow>
<HTMLTooltipRow label="P-value" data={data} labelMinWidth={labelWidth}>
<ScientificNotation number={[data.pValueMantissa, data.pValueExponent]} />
<HTMLTooltipRow label="P-value" data={data} labelWidth={labelWidth}>
<ScientificNotation number={[data.pValueMantissa, data.pValueExponent]} dp={2} />
</HTMLTooltipRow>
<HTMLTooltipRow label="Beta" data={data} labelMinWidth={labelWidth}>
{data.beta?.toFixed(3) ?? naLabel}
<HTMLTooltipRow label="Beta" data={data} labelWidth={labelWidth}>
{data.beta?.toPrecision(3) ?? naLabel}
</HTMLTooltipRow>
<HTMLTooltipRow label="Posterior probability" data={data} labelMinWidth={labelWidth}>
{data.locus?.rows?.[0].posteriorProbability.toFixed(3) ?? naLabel}
<HTMLTooltipRow label="Posterior probability" data={data} labelWidth={labelWidth}>
{data.locus?.rows?.[0].posteriorProbability.toPrecision(3) ?? naLabel}
</HTMLTooltipRow>
<HTMLTooltipRow label="Fine-mapping" data={data} labelMinWidth={labelWidth}>
<HTMLTooltipRow label="Fine-mapping" data={data} labelWidth={labelWidth}>
<Box display="flex" flexDirection="column" gap={0.25}>
<Box display="flex" gap={0.5}>
Confidence:
Method:{" "}{data.finemappingMethod ?? naLabel}
</Box>
<Box display="flex" gap={0.5}>
Confidence:{" "}
{data.confidence
? <Tooltip title={data.confidence} style="">
<ClinvarStars num={credsetConfidenceMap[data.confidence]} />
</Tooltip>
: naLabel
}
</Box>
<Box display="flex" gap={0.5}>
Method:{" "}{data.finemappingMethod ?? naLabel}
</Box>
</Box>
</HTMLTooltipRow>
<HTMLTooltipRow label="L2G" data="data" labelMinWidth={labelWidth}>
<HTMLTooltipRow label="L2G" data="data" labelWidth={labelWidth}>
<Box display="flex" flexDirection="column" gap={0.25}>
<Box display="flex" gap={0.5}>
Top:
{data.l2Gpredictions?.[0]?.target
? <Link to={`/target/${data.l2Gpredictions[0].target.id}`}>
{data.l2Gpredictions[0].target.approvedSymbol}
Top:{" "}
{data.l2GPredictions?.rows?.[0]?.target
? <Link to={`/target/${data.l2GPredictions.rows[0].target.id}`}>
{data.l2GPredictions.rows[0].target.approvedSymbol}
</Link>
: naLabel
}
</Box>
<Box display="flex" alignItems="center" gap={0.5}>
Score:
{data.l2Gpredictions?.[0]?.score
? <Tooltip title={data.l2Gpredictions[0].score.toFixed(3)} style="">
Score:{" "}
{data.l2GPredictions?.rows?.[0]?.score
? <Tooltip title={data.l2GPredictions.rows[0].score.toFixed(3)} style="">
<div>
<OtScoreLinearBar variant="determinate" value={data.l2Gpredictions[0].score * 100} />
<OtScoreLinearBar variant="determinate" value={data.l2GPredictions.rows[0].score * 100} />
</div>
</Tooltip>
: naLabel
}
</Box>
</Box>
</HTMLTooltipRow>
<HTMLTooltipRow label="Credible set size" data={data} labelMinWidth={labelWidth}>
<HTMLTooltipRow label="Credible set size" data={data} labelWidth={labelWidth}>
{data.locus?.count ?? naLabel}
</HTMLTooltipRow>
</HTMLTooltipTable>
Expand Down
18 changes: 14 additions & 4 deletions packages/ui/src/components/Plot/components/htmlTooltip/HTMLTooltipRow.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ export default function TooltipRow({
children,
label,
data,
labelMinWidth,
labelWidth,
valueWidth,
truncateValue,
}) {

Expand All @@ -18,13 +19,22 @@ export default function TooltipRow({

return (
<tr style={{ verticalAlign: 'top' }}>
<td width={labelMinWidth}>
<Typography variant="subtitle2" fontSize={13} style={{ lineHeight: 1.3, paddingRight: "0.2rem" }}>
<td width={labelWidth}>
<Typography
variant="subtitle2"
fontSize={13}
style={{ lineHeight: 1.15, paddingRight: "0.2rem" }}
>
{label}:
</Typography>
</td>
<td>
<Typography variant="body2" fontSize={13} style={{ lineHeight: 1.3, ...truncateLine }}>
<Typography
variant="body2"
component="div"
fontSize={13}
style={{ lineHeight: 1.15, ...truncateLine, width: valueWidth }}
>
{children}
</Typography>
</td>
Expand Down
Loading