diff --git a/apps/platform/src/pages/CredibleSetPage/ProfileHeader.gql b/apps/platform/src/pages/CredibleSetPage/ProfileHeader.gql index eb002b77b..15d1846f6 100644 --- 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 index ca1b2815b..528cd2906 100644 --- 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,7 +10,7 @@ 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"; @@ -18,11 +18,75 @@ 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(null); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const open = Boolean(anchorEl); + const id = open ? 'simple-popover' : undefined; + + return ( + + + Available + + + + + Harmonised summary statistics + + {dicSummary.map((sumstat: any) => { + const summStatValue = sumstatQCValues.find((v: any) => v.QCCheckName === sumstat.id).QCCheckValue + return ( + + + {sumstat.label} + + {summStatValue} + +)})} +
+
+
+
+ ); +} + function ProfileHeader({ variantId }: ProfileHeaderProps) { const { loading, error, data } = usePlatformApi(); @@ -169,7 +233,7 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) { - {study?.studyType.replace(/(qtl|gwas)/gi, (match) => match.toUpperCase())} Study + {study?.studyType.replace(/(qtl|gwas)/gi, (match) => match.toUpperCase())} Study {studyCategory !== "QTL" && ( <> @@ -227,22 +291,46 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) { )} + {study?.analysisFlags && ( + Analysis + + }> + {study?.analysisFlags ? study.analysisFlags : "Not Available"} + + )} + {study?.hasSumstats && ( + + + + )} {study?.nSamples.toLocaleString()} + + + {/* LD Ancestries */} {study?.ldPopulationStructure?.length > 0 && ( - - {study.ldPopulationStructure.map(({ ldPopulation, relativeSampleSize}, index) => ( + study.ldPopulationStructure.map(({ ldPopulation, relativeSampleSize}, index) => ( - ))} - - )} - - + )) + )} + {/* Quality controls */} + {study?.qualityControls.length > 0 && ( + + } + value={study?.qualityControls.length + " issue"} + tooltip={study?.qualityControls.join("; ")} + color="orange" + /> + + )} + );