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

Jump to bottom

[Platform] Add PheWas plot to variant page #543

Merged
merged 14 commits into from
Nov 26, 2024
Merged

[Platform] Add PheWas plot to variant page #543

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
e5b5fa3
add draft phewas plot
gjmcn Nov 19, 2024
730d230
Merge branch 'main' into gm-phewas-plot
gjmcn Nov 19, 2024
160c1e8
working draft
gjmcn Nov 19, 2024
8f78c03
switch from traits to diseases
gjmcn Nov 20, 2024
7606574
use therapeutic areas
gjmcn Nov 21, 2024
f47d5f5
use therapeutic priority
gjmcn Nov 22, 2024
b9e6650
Merge branch 'main' into gm-phewas-plot
gjmcn Nov 22, 2024
76b6db1
fix colors
gjmcn Nov 22, 2024
3e0eef4
x-axis
gjmcn Nov 22, 2024
1737728
extract tooltip to component
gjmcn Nov 25, 2024
8020306
tooltip content
gjmcn Nov 25, 2024
d7e738a
format tooltip
gjmcn Nov 25, 2024
3ebe93c
fixed label width
gjmcn Nov 26, 2024
5d72e62
Merge branch 'main' into gm-phewas-plot
gjmcn Nov 26, 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
143 changes: 50 additions & 93 deletions packages/sections/src/study/GWASCredibleSets/ManhattanPlot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Box, Skeleton, Typography, useTheme } from "@mui/material";
import { Skeleton, useTheme } from "@mui/material";
import {
Link,
DisplayVariantId,
Expand All @@ -15,7 +15,9 @@ import {
Circle,
Segment,
Rect,
HTML,
HTMLTooltip,
HTMLTooltipTable,
HTMLTooltipRow,
} from "ui";
import { scaleLinear, scaleLog, min } from "d3";
import { ScientificNotation } from "ui";
Expand Down Expand Up @@ -49,16 +51,6 @@ export default function ManhattanPlot({ loading, data }) {
genomePositions[variant.id] = cumulativePosition(variant);
});

function xAnchor(row) {
const x = genomePositions[row.variant.id];
return x < genomeLength / 2 ? 'left' : 'right';
}

function yAnchor(row) {
const y = pValue(row);
return Math.log10(y) > Math.log10(pValueMin) / 2 ? 'bottom' : 'top';
}

return (
<Vis>

Expand Down Expand Up @@ -151,17 +143,12 @@ export default function ManhattanPlot({ loading, data }) {
fill={markColor}
area={circleArea}
/>
<HTML
dataFrom="hover"
<HTMLTooltip
x={d => genomePositions[d.variant.id]}
y={pValue}
pxWidth={290}
pxHeight={200}
content={d => <Tooltip data={d} />}
anchor={d => `${yAnchor(d)}-${xAnchor(d)}`}
pointerEvents="visiblePainted"
dx={d => xAnchor(d) === 'left' ? 10 : -10}
dy={d => yAnchor(d) === 'top' ? 10 : -10}
content={tooltipContent}
/>

{/* axes at end so fade rectangle doesn't cover them */}
Expand All @@ -174,81 +161,51 @@ export default function ManhattanPlot({ loading, data }) {

}

function Tooltip({ data }) {
return (
<div style={{
width: "100%",
height: "100%",
background: "#fffc",
borderColor: "#ddd",
borderWidth: "1px",
borderStyle: "solid",
borderRadius: "0.2rem",
padding: "0.25em 0.5rem",
}}>
<table>
<tbody>
<TooltipRow label="Details">
<Link to={`../credible-set/${data.studyLocusId}`}>view</Link>
</TooltipRow>
<TooltipRow label="Lead variant">
<Link to={`/variant/${data.variant.id}`}>
<DisplayVariantId
variantId={data.variant.id}
referenceAllele={data.variant.referenceAllele}
alternateAllele={data.variant.alternateAllele}
expand={false}
/>
</Link>
</TooltipRow>
<TooltipRow label="P-value">
<ScientificNotation number={[data.pValueMantissa, data.pValueExponent]} />
</TooltipRow>
<TooltipRow label="Beta">
{data.beta?.toFixed(3) ?? naLabel}
</TooltipRow>
<TooltipRow label="Fine-mapping">
{data.finemappingMethod ?? naLabel}
</TooltipRow>
{data.l2Gpredictions?.[0]?.target
? <TooltipRow label="Top L2G">
<Link to={`/target/${data.l2Gpredictions[0].target.id}`}>
{data.l2Gpredictions[0].target.approvedSymbol}
</Link>
</TooltipRow>
: <TooltipRow label="Top L2G">
{naLabel}
</TooltipRow>
}
<TooltipRow label="L2G score">
{data.l2Gpredictions?.[0]?.score != null
? data.l2Gpredictions[0].score.toFixed(3)
: naLabel
}
</TooltipRow>
<TooltipRow label="Credible set size">
{data.locus?.count ?? naLabel}
</TooltipRow>
</tbody>
</table>
</div>
);
}

function TooltipRow({ children, label }) {
function tooltipContent(data) {
return (
<tr>
<td>
<Typography variant="subtitle2" style={{ lineHeight: 1.35, paddingRight: "0.2rem" }}>
{label}:
</Typography>
</td>
<td>
<Typography variant="body2" style={{ lineHeight: 1.35 }}>
{children}
</Typography>
</td>
</tr>
<HTMLTooltipTable>
<HTMLTooltipRow label="Details" data={data}>
<Link to={`../credible-set/${data.studyLocusId}`}>view</Link>
</HTMLTooltipRow>
<HTMLTooltipRow label="Lead variant" data={data}>
<Link to={`/variant/${data.variant.id}`}>
<DisplayVariantId
variantId={data.variant.id}
referenceAllele={data.variant.referenceAllele}
alternateAllele={data.variant.alternateAllele}
expand={false}
/>
</Link>
</HTMLTooltipRow>
<HTMLTooltipRow label="P-value" data={data}>
<ScientificNotation number={[data.pValueMantissa, data.pValueExponent]} />
</HTMLTooltipRow>
<HTMLTooltipRow label="Beta" data={data}>
{data.beta?.toFixed(3) ?? naLabel}
</HTMLTooltipRow>
<HTMLTooltipRow label="Fine-mapping" data={data}>
{data.finemappingMethod ?? naLabel}
</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>
<HTMLTooltipRow label="Credible set size" data={data}>
{data.locus?.count ?? naLabel}
</HTMLTooltipRow>
</HTMLTooltipTable>
);
}

Expand Down
38 changes: 23 additions & 15 deletions packages/sections/src/variant/GWASCredibleSets/Body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import Description from "./Description";
import GWAS_CREDIBLE_SETS_QUERY from "./GWASCredibleSetsQuery.gql";
import { Fragment } from "react/jsx-runtime";
import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
import PheWasPlot from "./PheWasPlot";
import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

Expand Down Expand Up @@ -245,21 +246,28 @@ function Body({ id, entity }: BodyProps) {
)}
renderBody={() => {
return (
<OtTable
dataDownloader
showGlobalFilter
sortBy="l2gScore"
order="desc"
columns={getColumns({
id,
referenceAllele: request.data?.variant.referenceAllele,
alternateAllele: request.data?.variant.alternateAllele,
})}
rows={request.data?.variant.gwasCredibleSets.rows}
loading={request.loading}
query={GWAS_CREDIBLE_SETS_QUERY.loc.source.body}
variables={variables}
/>
<>
<PheWasPlot
loading={request.loading}
data={request.data?.variant.gwasCredibleSets.rows}
id={id}
/>
<OtTable
dataDownloader
showGlobalFilter
sortBy="l2gScore"
order="desc"
columns={getColumns({
id,
referenceAllele: request.data?.variant.referenceAllele,
alternateAllele: request.data?.variant.alternateAllele,
})}
rows={request.data?.variant.gwasCredibleSets.rows}
loading={request.loading}
query={GWAS_CREDIBLE_SETS_QUERY.loc.source.body}
variables={variables}
/>
</>
);
}}
/>
Expand Down
4 changes: 4 additions & 0 deletions packages/sections/src/variant/GWASCredibleSets/GWASCredibleSetsQuery.gql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ query GWASCredibleSetsQuery($variantId: String!, $size: Int!) {
diseases {
name
id
therapeuticAreas {
name
id
}
}
}
locus(variantIds: [$variantId]) {
Expand Down
Loading
Loading