[Platform]: Variant page review

apps/platform/.env

@@ -1,3 +1,3 @@
-VITE_API_URL=https://api.genetics.dev.opentargets.xyz/api/v4/graphql
+VITE_API_URL=https://api.platform.dev.opentargets.xyz/api/v4/graphql
 VITE_AI_API_URL=https://dev-ai-api-w37vlfsidq-ew.a.run.app
 VITE_PROFILE=default

apps/platform/src/pages/VariantPage/Profile.tsx

@@ -18,25 +18,17 @@ import QTLCredibleSetsSummary from "sections/src/variant/QTLCredibleSets/Summary
 
 import client from "../../client";
 import ProfileHeader from "./ProfileHeader";
-const PharmacogenomicsSection = lazy(
-  () => import("sections/src/variant/Pharmacogenomics/Body")
-);
+const PharmacogenomicsSection = lazy(() => import("sections/src/variant/Pharmacogenomics/Body"));
 const InSilicoPredictorsSection = lazy(
   () => import("sections/src/variant/InSilicoPredictors/Body")
 );
 const VariantEffectPredictorSection = lazy(
   () => import("sections/src/variant/VariantEffectPredictor/Body")
 );
 const EVASection = lazy(() => import("sections/src/variant/EVA/Body"));
-const UniProtVariantsSection = lazy(
-  () => import("sections/src/variant/UniProtVariants/Body")
-);
-const GWASCredibleSetsSection = lazy(
-  () => import("sections/src/variant/GWASCredibleSets/Body")
-);
-const QTLCredibleSetsSection = lazy(
-  () => import("sections/src/variant/QTLCredibleSets/Body")
-);
+const UniProtVariantsSection = lazy(() => import("sections/src/variant/UniProtVariants/Body"));
+const GWASCredibleSetsSection = lazy(() => import("sections/src/variant/GWASCredibleSets/Body"));
+const QTLCredibleSetsSection = lazy(() => import("sections/src/variant/QTLCredibleSets/Body"));
 
 const summaries = [
   PharmacogenomicsSummary,
@@ -49,10 +41,7 @@ const summaries = [
 ];
 
 const VARIANT = "variant";
-const VARIANT_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(
-  summaries,
-  "Variant"
-);
+const VARIANT_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(summaries, "Variant");
 const VARIANT_PROFILE_QUERY = gql`
   query VariantProfileQuery($variantId: String!) {
     variant(variantId: $variantId) {
@@ -80,19 +69,16 @@ function Profile({ varId }: ProfileProps) {
       <ProfileHeader />
 
       <SummaryContainer>
-        <PharmacogenomicsSummary /> 
         <InSilicoPredictorsSummary />
         <VariantEffectPredictorSummary />
         <EVASummary />
         <UniProtVariantsSummary />
         <GWASCredibleSetsSummary />
         <QTLCredibleSetsSummary />
+        <PharmacogenomicsSummary />
       </SummaryContainer>
 
       <SectionContainer>
-        <Suspense fallback={<SectionLoader />}>
-          <PharmacogenomicsSection id={varId} entity={VARIANT} />
-        </Suspense>
         <Suspense fallback={<SectionLoader />}>
           <InSilicoPredictorsSection id={varId} entity={VARIANT} />
         </Suspense>
@@ -111,6 +97,9 @@ function Profile({ varId }: ProfileProps) {
         <Suspense fallback={<SectionLoader />}>
           <QTLCredibleSetsSection id={varId} entity={VARIANT} />
         </Suspense>
+        <Suspense fallback={<SectionLoader />}>
+          <PharmacogenomicsSection id={varId} entity={VARIANT} />
+        </Suspense>
       </SectionContainer>
     </PlatformApiProvider>
   );

packages/sections/src/constants.js

@@ -66,13 +66,18 @@ export const sourceMap = {
 
 export const clinvarStarMap = {
   "practice guideline": 4,
+  "SuSiE fine-mapped credible set with in-sample LD": 4,
   "reviewed by expert panel": 3,
+  "SuSiE fine-mapped credible set with out-of-sample LD": 3,
   "criteria provided, multiple submitters, no conflicts": 2,
+  "PICS fine-mapped credible set extracted from summary statistics": 2,
   "criteria provided, conflicting interpretations": 1,
   "criteria provided, single submitter": 1,
+  "PICS fine-mapped credible set based on reported top hit": 1,
   "no assertion for the individual variant": 0,
   "no assertion criteria provided": 0,
   "no assertion provided": 0,
+  "Unknown confidence": 0,
 };
 
 export const formatMap = {

packages/sections/src/variant/GWASCredibleSets/Body.tsx

@@ -1,7 +1,16 @@
 import { useQuery } from "@apollo/client";
-import { Link, SectionItem, ScientificNotation, DisplayVariantId, OtTable } from "ui";
+import {
+  Link,
+  SectionItem,
+  ScientificNotation,
+  DisplayVariantId,
+  OtTable,
+  Tooltip,
+  ClinvarStars,
+  OtScoreLinearBar,
+} from "ui";
 import { Box, Chip } from "@mui/material";
-import { naLabel } from "../../constants";
+import { clinvarStarMap, naLabel } from "../../constants";
 import { definition } from ".";
 import Description from "./Description";
 import GWAS_CREDIBLE_SETS_QUERY from "./GWASCredibleSetsQuery.gql";
@@ -23,11 +32,11 @@ function getColumns({
 }: getColumnsType) {
   return [
     {
-      id: "view",
-      label: "Details",
-      renderCell: ({ studyLocusId }) => <Link to={`../credible-set/${studyLocusId}`}>view</Link>,
-      filterValue: false,
-      exportValue: false,
+      id: "studyLocusId",
+      label: "More details",
+      renderCell: ({ studyLocusId }) => (
+        <Link to={`../credible-set/${studyLocusId}`}>{studyLocusId}</Link>
+      ),
     },
     {
       id: "leadVariant",
@@ -151,26 +160,18 @@ function getColumns({
       exportValue: ({ locus }) => posteriorProbabilities.get(locus)?.toFixed(3),
     },
     {
-      id: "ldr2",
-      label: "LD (r²)",
-      filterValue: false,
-      tooltip: (
-        <>
-          Linkage disequilibrium with the fixed page variant (
-          <DisplayVariantId
-            variantId={id}
-            referenceAllele={referenceAllele}
-            alternateAllele={alternateAllele}
-            expand={false}
-          />
-          ).
-        </>
-      ),
-      renderCell: ({ locus }) => {
-        const r2 = locus?.find(obj => obj.variant?.id === id)?.r2Overall;
-        if (typeof r2 !== "number") return naLabel;
-        return r2.toFixed(2);
+      id: "confidence",
+      label: "Confidence",
+      sortable: true,
+      renderCell: ({ confidence }) => {
+        if (!confidence) return naLabel;
+        return (
+          <Tooltip title={confidence} style="">
+            <ClinvarStars num={clinvarStarMap[confidence]} />
+          </Tooltip>
+        );
       },
+      filterValue: ({ confidence }) => clinvarStarMap[confidence],
     },
     {
       id: "finemappingMethod",
@@ -179,27 +180,28 @@ function getColumns({
     {
       id: "topL2G",
       label: "Top L2G",
-      filterValue: ({ strongestLocus2gene }) => strongestLocus2gene?.target.approvedSymbol,
+      filterValue: ({ l2Gpredictions }) => l2Gpredictions?.target.approvedSymbol,
       tooltip: "Top gene prioritised by our locus-to-gene model",
-      renderCell: ({ strongestLocus2gene }) => {
-        if (!strongestLocus2gene?.target) return naLabel;
-        const { target } = strongestLocus2gene;
+      renderCell: ({ l2Gpredictions }) => {
+        if (!l2Gpredictions[0]?.target) return naLabel;
+        const { target } = l2Gpredictions[0];
         return <Link to={`/target/${target.id}`}>{target.approvedSymbol}</Link>;
       },
-      exportValue: ({ strongestLocus2gene }) => strongestLocus2gene?.target.approvedSymbol,
+      exportValue: ({ l2Gpredictions }) => l2Gpredictions?.target.approvedSymbol,
     },
     {
       id: "l2gScore",
       label: "L2G score",
-      comparator: (rowA, rowB) =>
-        rowA?.strongestLocus2gene?.score - rowB?.strongestLocus2gene?.score,
+      comparator: (rowA, rowB) => rowA?.l2Gpredictions[0]?.score - rowB?.l2Gpredictions[0]?.score,
       sortable: true,
-      filterValue: false,
-      renderCell: ({ strongestLocus2gene }) => {
-        if (typeof strongestLocus2gene?.score !== "number") return naLabel;
-        return strongestLocus2gene.score.toFixed(3);
+      renderCell: ({ l2Gpredictions }) => {
+        if (!l2Gpredictions[0]?.score) return naLabel;
+        return (
+          <Tooltip title={l2Gpredictions[0].score.toFixed(3)} style="">
+            <OtScoreLinearBar variant="determinate" value={l2Gpredictions[0].score * 100} />
+          </Tooltip>
+        );
       },
-      exportValue: ({ strongestLocus2gene }) => strongestLocus2gene?.score,
     },
     {
       id: "credibleSetSize",

packages/sections/src/variant/GWASCredibleSets/GWASCredibleSetsQuery.gql

@@ -5,6 +5,11 @@ query GWASCredibleSetsQuery($variantId: String!) {
     alternateAllele
     credibleSets(studyTypes: [gwas], page: { size: 2000, index: 0 }) {
       studyLocusId
+      pValueMantissa
+      pValueExponent
+      beta
+      finemappingMethod
+      confidence
       variant {
         id
         chromosome
@@ -20,18 +25,14 @@ query GWASCredibleSetsQuery($variantId: String!) {
           id
         }
       }
-      pValueMantissa
-      pValueExponent
-      beta
       locus {
         variant {
           id
         }
         r2Overall
         posteriorProbability
       }
-      finemappingMethod
-      strongestLocus2gene {
+      l2Gpredictions(size: 1) {
         target {
           id
           approvedSymbol
@@ -40,4 +41,4 @@ query GWASCredibleSetsQuery($variantId: String!) {
       }
     }
   }
-}
+}

packages/sections/src/variant/QTLCredibleSets/Body.tsx

@@ -1,11 +1,20 @@
 import { useQuery } from "@apollo/client";
-import { Link, SectionItem, ScientificNotation, DisplayVariantId, OtTable } from "ui";
+import {
+  Link,
+  SectionItem,
+  ScientificNotation,
+  DisplayVariantId,
+  OtTable,
+  Tooltip,
+  ClinvarStars,
+} from "ui";
 import { Box, Chip } from "@mui/material";
-import { naLabel } from "../../constants";
+import { clinvarStarMap, naLabel } from "../../constants";
 import { definition } from ".";
 import Description from "./Description";
 import QTL_CREDIBLE_SETS_QUERY from "./QTLCredibleSetsQuery.gql";
 import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
+import { ReactNode } from "react";
 
 type getColumnsType = {
   id: string;
@@ -22,11 +31,11 @@ function getColumns({
 }: getColumnsType) {
   return [
     {
-      id: "view",
-      label: "Details",
-      renderCell: ({ studyLocusId }) => <Link to={`../credible-set/${studyLocusId}`}>view</Link>,
-      filterValue: false,
-      exportValue: false,
+      id: "studyLocusId",
+      label: "More details",
+      renderCell: ({ studyLocusId }) => (
+        <Link to={`../credible-set/${studyLocusId}`}>{studyLocusId}</Link>
+      ),
     },
     {
       id: "leadVariant",
@@ -89,22 +98,22 @@ function getColumns({
       },
     },
     {
-      id: "study.biosample.biosampleId",
+      id: "study",
       label: "Affected tissue/cell",
       renderCell: ({ study }) => {
         const biosampleId = study?.biosample?.biosampleId;
         if (!biosampleId) return naLabel;
         return (
           <Link external to={`https://www.ebi.ac.uk/ols4/search?q=${biosampleId}&ontology=uberon`}>
-            {biosampleId}
+            {study?.biosample?.biosampleName}
           </Link>
         );
       },
     },
     {
       id: "study.condition",
       label: "Condition",
-      renderCell: () => <i>Not in API</i>,
+      renderCell: ({ study }) => study?.condition || naLabel,
     },
     {
       id: "pValue",
@@ -133,6 +142,7 @@ function getColumns({
       label: "Beta",
       filterValue: false,
       tooltip: "Beta with respect to the ALT allele",
+      sortable: true,
       renderCell: ({ beta }) => {
         if (typeof beta !== "number") return naLabel;
         return beta.toPrecision(3);
@@ -160,6 +170,20 @@ function getColumns({
       renderCell: ({ locus }) => posteriorProbabilities.get(locus)?.toFixed(3) ?? naLabel,
       exportValue: ({ locus }) => posteriorProbabilities.get(locus)?.toFixed(3),
     },
+    {
+      id: "confidence",
+      label: "Confidence",
+      sortable: true,
+      renderCell: ({ confidence }) => {
+        if (!confidence) return naLabel;
+        return (
+          <Tooltip title={confidence} style="">
+            <ClinvarStars num={clinvarStarMap[confidence]} />
+          </Tooltip>
+        );
+      },
+      filterValue: ({ confidence }) => clinvarStarMap[confidence],
+    },
     {
       id: "finemappingMethod",
       label: "Finemapping method",
@@ -181,7 +205,7 @@ type BodyProps = {
   entity: string;
 };
 
-function Body({ id, entity }: BodyProps) {
+function Body({ id, entity }: BodyProps): ReactNode {
   const variables = {
     variantId: id,
   };

packages/sections/src/variant/QTLCredibleSets/Description.tsx

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { Link, DisplayVariantId } from "ui";
 
 type DescriptionProps = {
@@ -6,7 +7,11 @@ type DescriptionProps = {
   alternateAllele: string;
 };
 
-function Description({ variantId, referenceAllele, alternateAllele }: DescriptionProps) {
+function Description({
+  variantId,
+  referenceAllele,
+  alternateAllele,
+}: DescriptionProps): ReactElement {
   return (
     <>
       molQTL 99% credible sets containing{" "}
@@ -17,12 +22,9 @@ function Description({ variantId, referenceAllele, alternateAllele }: Descriptio
           alternateAllele={alternateAllele}
         />
       </strong>
-      . Source{" "}
-      <Link external to="https://www.ebi.ac.uk/eqtl/" >
-        eQTL Catalog
-      </Link>
+      . Source <Link to="/">Open Targets</Link>
     </>
   );
 }
 
-export default Description;
+export default Description;