[Platform]: feat add summary statistics and analysis flag to study in…

… credible set page (#578)
opentargets · Nov 29, 2024 · b069b64 · b069b64
1 parent 7996cd3
commit b069b64
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 10 deletions.
diff --git a/apps/platform/src/pages/CredibleSetPage/ProfileHeader.gql b/apps/platform/src/pages/CredibleSetPage/ProfileHeader.gql
@@ -4,6 +4,7 @@ fragment CredibleSetProfileHeaderFragment on credibleSet {
   beta
   standardError
   effectAlleleFrequencyFromSource
+  qualityControls
   locus(variantIds: $variantIds) {
     count
     rows {
@@ -49,6 +50,12 @@ fragment CredibleSetProfileHeaderFragment on credibleSet {
     pubmedId
     nSamples
     studyType
+    hasSumstats
+    analysisFlags
+    sumstatQCValues {
+      QCCheckName
+      QCCheckValue
+    }
     ldPopulationStructure {
       ldPopulation
       relativeSampleSize

diff --git a/apps/platform/src/pages/CredibleSetPage/ProfileHeader.tsx b/apps/platform/src/pages/CredibleSetPage/ProfileHeader.tsx
@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, useState } from "react";
 import {
   usePlatformApi,
   Field,
@@ -10,19 +10,83 @@ import {
   ClinvarStars,
   LabelChip,
 } from "ui";
-import { Box, Typography } from "@mui/material";
+import { Box, Typography, Popover } 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,
   poulationMap,
 } from "../../constants";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCaretDown, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
+import { v1 } from "uuid";
 
 type ProfileHeaderProps = {
   variantId: string;
 };
 
+const dicSummary = [
+  {id:"n_variants", label:"Total variants", tooltip:"Number of harmonised variants"},
+  { id: "n_variants_sig", label: "Significant variants", tooltip: "P-value significant variants" },
+  {id:"mean_beta", label:"Mean beta", tooltip:"Mean effect size across all variants"},
+  {id:"gc_lambda", label:"GC lambda", tooltip:"Additive Genomic Control (GC) lambda indicating GWAS inflation"},
+  {id:"mean_diff_pz", label:"Mean diff P-Z", tooltip:"Mean difference between reported and calculated log p-values"},
+  {id:"se_diff_pz", label:"SD diff P-Z", tooltip:"Standard deviation of the difference between reported and calculated log p-values"},
+]
+
+function SummaryStatisticsField({ sumstatQCValues }: any) {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+
+  return (
+    <Fragment>
+      <Typography sx={{ cursor: 'pointer', mr: 0.5, fontWeight: 600}} aria-describedby={id} variant="contained" onClick={handleClick}>
+        Available <FontAwesomeIcon icon={faCaretDown} />
+      </Typography>
+
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        elevation={1}
+        disableScrollLock
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+      >
+        <Typography sx={{ p: 2 }}>
+          <Typography variant="subtitle1">Harmonised summary statistics</Typography>
+          <table>
+            {dicSummary.map((sumstat: any) => {
+              const summStatValue = sumstatQCValues.find((v: any) => v.QCCheckName === sumstat.id).QCCheckValue
+              return (
+                <tr key={v1()}>
+                  <Tooltip title={sumstat.tooltip} showHelpIcon>
+                    {sumstat.label}
+                  </Tooltip>
+                  <Typography sx={{ textAlign: 'right' }} component="td" variant="body2">{summStatValue}</Typography>
+    </tr >
+)})}
+            </table>
+        </Typography>
+      </Popover>
+    </Fragment>
+  );
+}
+
 function ProfileHeader({ variantId }: ProfileHeaderProps) {
   const { loading, error, data } = usePlatformApi();
 
@@ -169,7 +233,7 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
 
       <Box>
         <Typography variant="subtitle1" mt={0}>
-          {study?.studyType.replace(/(qtl|gwas)/gi, (match) => match.toUpperCase())} Study 
+          {study?.studyType.replace(/(qtl|gwas)/gi, (match) => match.toUpperCase())} Study
         </Typography>
         {studyCategory !== "QTL" && (
           <>
@@ -227,22 +291,46 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
             </PublicationsDrawer>
           </Field>
         )}
+        {study?.analysisFlags && (<Field loading={loading} title={
+          <Tooltip title="Type of analysis" showHelpIcon>
+            Analysis
+          </Tooltip>
+        }>
+          {study?.analysisFlags ? study.analysisFlags : "Not Available"}
+        </Field>
+        )}
+        {study?.hasSumstats && (
+          <Field loading={loading} title="Summary statistics">
+            <SummaryStatisticsField hasSumstats={study?.hasSumstats} sumstatQCValues={study?.sumstatQCValues} />
+        </Field>
+        )}
         <Field loading={loading} title="Sample size">
           {study?.nSamples.toLocaleString()}
+        </Field>
+        <Box display="flex" sx={{ gap: 1 }}>
+          {/* LD Ancestries */}
           {study?.ldPopulationStructure?.length > 0 && (
-            <Box display="flex" sx={{ gap: 1 }}>
-            {study.ldPopulationStructure.map(({ ldPopulation,  relativeSampleSize}, index) => (
+            study.ldPopulationStructure.map(({ ldPopulation,  relativeSampleSize}, index) => (
               <LabelChip
                 key={ldPopulation}
                 label={ldPopulation.toUpperCase()}
                 value={`${(relativeSampleSize * 100).toFixed(0)}%`}
                 tooltip={`LD reference population: ${ poulationMap[ldPopulation]}`}
               />
-            ))}
-            </Box>
-        )}
-        </Field>
-
+            ))
+          )}
+          {/* Quality controls */}
+          {study?.qualityControls.length > 0 && (
+            <Tooltip title={study?.qualityControls.join(", ")} arrow>
+              <LabelChip
+                label={<FontAwesomeIcon size="1x" icon={faTriangleExclamation} />}
+                value={study?.qualityControls.length + " issue"}
+                tooltip={study?.qualityControls.join("; ")}
+                color="orange"
+              />
+            </Tooltip>
+          )}
+        </Box>
       </Box>
     </BaseProfileHeader>  
   );