From d29bceacf3d8f4b5b5a648c72cf227c6319fe37c Mon Sep 17 00:00:00 2001
From: Graham McNeill <gjmcn@users.noreply.github.com>
Date: Mon, 9 Dec 2024 15:42:58 +0000
Subject: [PATCH] [Platform]: Update plot tooltips (#603)

* use linear scales

* spacing and therapeutic areas labels

* manhattan plot tooltip

* phewas tooltip
---
 .../study/GWASCredibleSets/ManhattanPlot.tsx  | 79 ++++++++++++------
 .../variant/GWASCredibleSets/PheWasPlot.tsx   | 80 +++++++++++--------
 .../components/htmlTooltip/HTMLTooltipRow.jsx | 18 ++++-
 3 files changed, 115 insertions(+), 62 deletions(-)

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 (
     <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}`}>
@@ -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>
   );
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
           <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}
@@ -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}
@@ -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) => (
@@ -282,27 +296,30 @@ 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]} />
@@ -310,28 +327,25 @@ function tooltipContent(data) {
               : 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
@@ -339,7 +353,7 @@ function tooltipContent(data) {
           </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>
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 (
     <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>