[Platform]: Fix lead variant link from PheWas plot tooltip (#620)

opentargets · Dec 11, 2024 · 9af583e · 9af583e
1 parent c8e431d
commit 9af583e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/packages/sections/src/variant/GWASCredibleSets/Body.tsx b/packages/sections/src/variant/GWASCredibleSets/Body.tsx
@@ -24,6 +24,7 @@ import {
 import PheWasPlot from "./PheWasPlot";
 import { useEffect, useState } from "react";
 import { responseType } from "ui/src/types/response";
+import { v1 } from "uuid";
 
 type getColumnsType = {
   id: string;
@@ -286,6 +287,7 @@ function Body({ id, entity }: BodyProps) {
         });
         return (
           <PheWasPlot
+            key={v1()}
             columns={columns}
             query={GWAS_CREDIBLE_SETS_QUERY.loc.source.body}
             variables={variables}

diff --git a/packages/sections/src/variant/GWASCredibleSets/PheWasPlot.tsx b/packages/sections/src/variant/GWASCredibleSets/PheWasPlot.tsx
@@ -1,4 +1,4 @@
-import { Box, Skeleton, Typography, useTheme } from "@mui/material";
+import { Box, Chip, Skeleton, Typography, useTheme } from "@mui/material";
 import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -77,6 +77,7 @@ export default function PheWasPlot({
   variables,
   columns,
 }) {
+
   const theme = useTheme();
   const background = theme.palette.background.paper;
   const fontFamily = theme.typography.fontFamily;
@@ -264,7 +265,7 @@ export default function PheWasPlot({
             y={d => yMin}
             pxWidth={tooltipWidth}
             pxHeight={tooltipHeight}
-            content={tooltipContent}
+            content={d => tooltipContent(d, id)}
             xOffset={40}
             yOffset={-20}
           />
@@ -278,8 +279,16 @@ export default function PheWasPlot({
   );
 }
 
-function tooltipContent(data) {
+function tooltipContent(data, pageVariantId) {
   const labelWidth = 160;
+
+  const displayId = <DisplayVariantId
+    variantId={data.variant.id}
+    referenceAllele={data.variant.referenceAllele}
+    alternateAllele={data.variant.alternateAllele}
+    expand={false}
+  />;
+
   return (
     <HTMLTooltipTable>
       <HTMLTooltipRow label="Navigate" data={data} labelWidth={labelWidth}>
@@ -288,14 +297,13 @@ function tooltipContent(data) {
         </Link>
       </HTMLTooltipRow>
       <HTMLTooltipRow label="Lead variant" data={data} labelWidth={labelWidth}>
-        <Link to={`/variant/${data.variant.id}`}>
-          <DisplayVariantId
-            variantId={data.variant.id}
-            referenceAllele={data.variant.referenceAllele}
-            alternateAllele={data.variant.alternateAllele}
-            expand={false}
-          />
-        </Link>
+        {data.variant.id === pageVariantId
+          ? <Box display="flex" alignItems="center" gap={0.5}>
+            {displayId}
+            <Chip label="self" variant="outlined" size="small" />
+          </Box>
+          : <Link to={`/variant/${data.variant.id}`}>{displayId}</Link>
+        }
       </HTMLTooltipRow>
       <HTMLTooltipRow
         label="Reported trait"