feat: credset page metadata improvements

apps/platform/src/constants.js

@@ -309,6 +309,13 @@ export const clinvarStarMap = {
   "no assertion provided": 0,
 };
 
+export const credsetConfidenceMap = {
+  "SuSiE fine-mapped credible set with in-sample LD": 4,
+  "SuSiE fine-mapped credible set with out-of-sample LD": 3,
+  "PICS fine-mapped credible set extracted from summary statistics": 2,
+  "PICS fine-mapped credible set based on reported top hit": 1,
+};
+
 export const formatMap = {
   json: "JSON",
   parquet: "Parquet",

apps/platform/src/pages/CredibleSetPage/ProfileHeader.gql

@@ -24,6 +24,7 @@ fragment CredibleSetProfileHeaderFragment on credibleSet {
   purityMinR2
   locusStart
   locusEnd
+  confidence
   study {
     projectId
     publicationFirstAuthor
@@ -33,15 +34,21 @@ fragment CredibleSetProfileHeaderFragment on credibleSet {
       id
       name
     }
+    backgroundTraits {
+      id
+      name
+    }
     target {
       id
       approvedSymbol
     }
     biosample {
       biosampleId
+      biosampleName
     }
     publicationJournal
     pubmedId
     nSamples
+    studyType
   }
 }

apps/platform/src/pages/CredibleSetPage/ProfileHeader.tsx

@@ -7,11 +7,15 @@ import {
   ScientificNotation,
   Tooltip,
   PublicationsDrawer,
+  ClinvarStars,
 } from "ui";
 import { Box, Typography } from "@mui/material";
 import CREDIBLE_SET_PROFILE_HEADER_FRAGMENT from "./ProfileHeader.gql";
 import { getStudyCategory } from "sections/src/utils/getStudyCategory";
 import { epmcUrl } from "../../utils/urls";
+import {
+  credsetConfidenceMap,
+} from "../../constants";
 
 type ProfileHeaderProps = {
   variantId: string;
@@ -85,7 +89,16 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
           </Field>
         )}
         {typeof credibleSet?.effectAlleleFrequencyFromSource === "number" && (
-          <Field loading={loading} title="EAF">
+          <Field loading={loading} title={<Tooltip
+            title={
+              <Typography variant="caption">
+              Frequency of the effect allele in studied population 
+              </Typography>
+            }
+            showHelpIcon
+          >
+            Effective allele frequency
+          </Tooltip>}>
             {credibleSet.effectAlleleFrequencyFromSource.toPrecision(3)}
           </Field>
         )}
@@ -108,63 +121,50 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
             {leadVariant.posteriorProbability.toPrecision(3)}
           </Field>
         )}
-        <Field loading={loading} title="GRCh38">
-          {credibleSet?.variant &&
-            `${credibleSet.variant.chromosome}:${credibleSet.variant.position}`}
-        </Field>
-        {credibleSet?.variant?.rsIds.length > 0 && (
-          <Field loading={loading} title="Ensembl">
-            {credibleSet.variant.rsIds.map((rsid, index) => (
-              <Fragment key={rsid}>
-                {index > 0 && ", "}
-                <Link
-                  external
-                  to={`https://www.ensembl.org/Homo_sapiens/Variation/Explore?v=${rsid}`}
-                >
-                  {rsid}
-                </Link>
-              </Fragment>
-            ))}
-          </Field>
-        )}
 
         <Typography variant="subtitle1" mt={1}>
-          Credible Set
+          Fine-mapping <Tooltip title={credibleSet?.confidence}>
+            <span>
+              <ClinvarStars num={credsetConfidenceMap[credibleSet?.confidence]} />
+            </span>
+          </Tooltip>
         </Typography>
-        <Field loading={loading} title="Finemapping method">
+        {
+          credibleSet?.locusStart && (<Field loading={loading} title="Locus">
+          {credibleSet?.variant?.chromosome}:{credibleSet?.locusStart}-{credibleSet?.locusEnd}
+        </Field>)
+        }
+        <Field loading={loading} title="Method">
           {credibleSet?.finemappingMethod}
         </Field>
-        <Field loading={loading} title="Credible set index within locus">
-          {credibleSet?.credibleSetIndex}
-        </Field>
-        <Field loading={loading} title="Purity min">
+        <Field
+          loading={loading}
+          title={
+          <Tooltip
+            title={
+              <Typography variant="caption">Minimum pairwise correlation (R<sup>2</sup>) observed between all variants in the credible set</Typography>
+            }
+            showHelpIcon
+          >
+            Minimum R<sup>2</sup>
+          </Tooltip>
+        }
+        >
           {credibleSet?.purityMinR2?.toPrecision(3)}
         </Field>
-        <Field loading={loading} title="Locus start">
-          {credibleSet?.locusStart}
-        </Field>
-        <Field loading={loading} title="Locus end">
-          {credibleSet?.locusEnd}
-        </Field>
       </Box>
 
       <Box>
         <Typography variant="subtitle1" mt={0}>
-          Study
+          {study?.studyType.replace(/(qtl|gwas)/gi, (match) => match.toUpperCase())} Study 
         </Typography>
-        <Field loading={loading} title="Author">
-          {study?.publicationFirstAuthor}
-        </Field>
-        <Field loading={loading} title="Publication year">
-          {study?.publicationDate?.slice(0, 4)}
-        </Field>
         {studyCategory !== "QTL" && (
           <>
             <Field loading={loading} title="Reported trait">
               {study?.traitFromSource}
             </Field>
             {study?.diseases?.length > 0 && (
-              <Field loading={loading} title="Diseases">
+              <Field loading={loading} title="Disease or phenotype">
                 {study.diseases.map(({ id, name }, index) => (
                   <Fragment key={id}>
                     {index > 0 ? ", " : null}
@@ -173,6 +173,16 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
                 ))}
               </Field>
             )}
+            {study?.backgroundTraits?.length > 0 && (
+              <Field loading={loading} title="Background trait">
+                {study.backgroundTraits.map(({ id, name }, index) => (
+                  <Fragment key={id}>
+                    {index > 0 ? ", " : null}
+                    <Link to={`../disease/${id}`}>{name}</Link>
+                  </Fragment>
+                ))}
+              </Field>
+            )}
           </>
         )}
         {studyCategory === "QTL" && (
@@ -186,29 +196,29 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
               <Field loading={loading} title="Affected cell/tissue">
                 <Link
                   external
-                  to={`https://www.ebi.ac.uk/ols4/search?q=${study.biosample.biosampleId}&ontology=uberon`}
+                  to={`https://www.ebi.ac.uk/ols4/search?q=${study.biosample.biosampleId}`}
                 >
-                  {study.biosample.biosampleId}
+                  {study.biosample.biosampleName}
                 </Link>
               </Field>
             )}
           </>
         )}
-        <Field loading={loading} title="Journal">
-          {study?.publicationJournal}
+        <Field loading={loading} title="Sample size">
+          {study?.nSamples.toLocaleString()}
         </Field>
+        {study?.publicationFirstAuthor && (<Field loading={loading} title="Publication">
+          {study?.publicationFirstAuthor} <i>et al.</i> {study?.publicationJournal} ({study?.publicationDate?.slice(0, 4)}) 
+        </Field>)}
         {study?.pubmedId && (
           <Field loading={loading} title="PubMed">
             <PublicationsDrawer entries={[{ name: study.pubmedId, url: epmcUrl(study.pubmedId) }]}>
               {study.pubmedId}
             </PublicationsDrawer>
           </Field>
         )}
-        <Field loading={loading} title="Sample size">
-          {study?.nSamples}
-        </Field>
       </Box>
-    </BaseProfileHeader>
+    </BaseProfileHeader>  
   );
 }
 

packages/sections/src/constants.js

@@ -70,16 +70,19 @@ export const sourceMap = {
   USAN: "United States Adopted Name",
 };
 
+export const credsetConfidenceMap = {
+  "SuSiE fine-mapped credible set with in-sample LD": 4,
+  "SuSiE fine-mapped credible set with out-of-sample LD": 3,
+  "PICS fine-mapped credible set extracted from summary statistics": 2,
+  "PICS fine-mapped credible set based on reported top hit": 1,
+};
+
 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,

packages/sections/src/evidence/GWASCredibleSets/Body.jsx

@@ -11,7 +11,7 @@ import {
   Tooltip,
 } from "ui";
 
-import { naLabel, sectionsBaseSizeQuery, clinvarStarMap } from "../../constants";
+import { naLabel, sectionsBaseSizeQuery, credsetConfidenceMap } from "../../constants";
 import { definition } from ".";
 import Description from "./Description";
 import { dataTypesMap } from "../../dataTypes";
@@ -118,11 +118,11 @@ function getColumns() {
         if (!credibleSet?.confidence) return naLabel;
         return (
           <Tooltip title={credibleSet?.confidence} style="">
-            <ClinvarStars num={clinvarStarMap[credibleSet?.confidence]} />
+            <ClinvarStars num={credsetConfidenceMap[credibleSet?.confidence]} />
           </Tooltip>
         );
       },
-      filterValue: ({ credibleSet }) => clinvarStarMap[credibleSet?.confidence],
+      filterValue: ({ credibleSet }) => credsetConfidenceMap[credibleSet?.confidence],
     },
     {
       id: "finemappingMethod",

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

@@ -10,7 +10,7 @@ import {
   OtTable,
 } from "ui";
 import { Box } from "@mui/material";
-import { clinvarStarMap, naLabel } from "../../constants";
+import { credsetConfidenceMap, naLabel } from "../../constants";
 import { definition } from ".";
 import Description from "./Description";
 import GWAS_CREDIBLE_SETS_QUERY from "./GWASCredibleSetsQuery.gql";
@@ -99,11 +99,11 @@ const columns = [
       if (!confidence) return naLabel;
       return (
         <Tooltip title={confidence} style="">
-          <ClinvarStars num={clinvarStarMap[confidence]} />
+          <ClinvarStars num={credsetConfidenceMap[confidence]} />
         </Tooltip>
       );
     },
-    filterValue: ({ confidence }) => clinvarStarMap[confidence],
+    filterValue: ({ confidence }) => credsetConfidenceMap[confidence],
   },
   {
     id: "topL2G",

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

@@ -10,7 +10,7 @@ import {
   useBatchQuery,
 } from "ui";
 import { Box, Chip } from "@mui/material";
-import { clinvarStarMap, initialResponse, naLabel, table5HChunkSize } from "../../constants";
+import { credsetConfidenceMap, initialResponse, naLabel, table5HChunkSize } from "../../constants";
 import { definition } from ".";
 import Description from "./Description";
 import GWAS_CREDIBLE_SETS_QUERY from "./GWASCredibleSetsQuery.gql";
@@ -162,6 +162,10 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
       renderCell: ({ locus }) => locus.rows[0]?.posteriorProbability.toFixed(3) ?? naLabel,
       exportValue: ({ locus }) => locus.rows[0]?.posteriorProbability.toFixed(3),
     },
+    {
+      id: "finemappingMethod",
+      label: "Fine-mapping method",
+    },
     {
       id: "confidence",
       label: "Fine-mapping confidence",
@@ -172,15 +176,11 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
         if (!confidence) return naLabel;
         return (
           <Tooltip title={confidence} style="">
-            <ClinvarStars num={clinvarStarMap[confidence]} />
+            <ClinvarStars num={credsetConfidenceMap[confidence]} />
           </Tooltip>
         );
       },
-      filterValue: ({ confidence }) => clinvarStarMap[confidence],
-    },
-    {
-      id: "finemappingMethod",
-      label: "Fine-mapping method",
+      filterValue: ({ confidence }) => credsetConfidenceMap[confidence],
     },
     {
       id: "topL2G",

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

@@ -24,7 +24,7 @@ import {
 } from "ui";
 import { scaleLinear, scaleLog, min, scaleOrdinal, schemeCategory10, schemeDark2 } from "d3";
 import { ScientificNotation } from "ui";
-import { naLabel, clinvarStarMap } from "../../constants";
+import { naLabel, credsetConfidenceMap } from "../../constants";
 import { Fragment } from "react/jsx-runtime";
 
 export default function PheWasPlot({ loading, data, id }) {
@@ -305,7 +305,7 @@ function tooltipContent(data) {
             Confidence:
             {data.confidence
               ? <Tooltip title={data.confidence} style="">
-                <ClinvarStars num={clinvarStarMap[data.confidence]} />
+                <ClinvarStars num={credsetConfidenceMap[data.confidence]} />
               </Tooltip>
               : naLabel
             }

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

@@ -9,7 +9,7 @@ import {
   useBatchQuery,
 } from "ui";
 import { Box, Chip } from "@mui/material";
-import { clinvarStarMap, initialResponse, naLabel, table5HChunkSize } from "../../constants";
+import { credsetConfidenceMap, initialResponse, naLabel, table5HChunkSize } from "../../constants";
 import { definition } from ".";
 import Description from "./Description";
 import QTL_CREDIBLE_SETS_QUERY from "./QTLCredibleSetsQuery.gql";
@@ -181,11 +181,11 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
         if (!confidence) return naLabel;
         return (
           <Tooltip title={confidence} style="">
-            <ClinvarStars num={clinvarStarMap[confidence]} />
+            <ClinvarStars num={credsetConfidenceMap[confidence]} />
           </Tooltip>
         );
       },
-      filterValue: ({ confidence }) => clinvarStarMap[confidence],
+      filterValue: ({ confidence }) => credsetConfidenceMap[confidence],
     },
     {
       id: "finemappingMethod",