[Platform] Add PheWas plot to variant page (#543)

* add draft phewas plot * working draft * switch from traits to diseases * use therapeutic areas * use therapeutic priority * fix colors * x-axis * extract tooltip to component * tooltip content * format tooltip * fixed label width
opentargets · Nov 26, 2024 · 3b91679 · 3b91679
1 parent 6a9b78d
commit 3b91679
Show file tree

Hide file tree

Showing 12 changed files with 702 additions and 111 deletions.
diff --git a/packages/sections/src/study/GWASCredibleSets/ManhattanPlot.tsx b/packages/sections/src/study/GWASCredibleSets/ManhattanPlot.tsx
@@ -1,4 +1,4 @@
-import { Box, Skeleton, Typography, useTheme } from "@mui/material";
+import { Skeleton, useTheme } from "@mui/material";
 import {
   Link,
   DisplayVariantId,
@@ -15,7 +15,9 @@ import {
   Circle,
   Segment,
   Rect,
-  HTML,
+  HTMLTooltip,
+  HTMLTooltipTable,
+  HTMLTooltipRow,
 } from "ui";
 import { scaleLinear, scaleLog, min } from "d3";
 import { ScientificNotation } from "ui";
@@ -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>
 
@@ -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 */}
@@ -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>
   );
 }
 

diff --git a/packages/sections/src/variant/GWASCredibleSets/Body.tsx b/packages/sections/src/variant/GWASCredibleSets/Body.tsx
@@ -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";
 
@@ -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}
+            />
+          </>
         );
       }}
     />

diff --git a/packages/sections/src/variant/GWASCredibleSets/GWASCredibleSetsQuery.gql b/packages/sections/src/variant/GWASCredibleSets/GWASCredibleSetsQuery.gql
@@ -25,6 +25,10 @@ query GWASCredibleSetsQuery($variantId: String!, $size: Int!) {
           diseases {
             name
             id
+            therapeuticAreas {
+              name
+              id
+            }
           }
         }
         locus(variantIds: [$variantId]) {
-Original file line number
+Diff line change
@@ Expand Up @@
               diseases {
                 name
                 id
+                therapeuticAreas {
+                  name
+                  id
+                }
               }
             }
             locus(variantIds: [$variantId]) {
@@ Expand Down @@