Skip to content

Commit

Permalink
[Platform]: fix Credible set profile bug (#579)
Browse files Browse the repository at this point in the history 
* fix: body os share trait

* fix: Credible set page header
  • Loading branch information
@carcruz
carcruz authored Nov 29, 2024
1 parent b069b64 commit c37bf2a
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 94 deletions.
197 changes: 121 additions & 76 deletions apps/platform/src/pages/CredibleSetPage/ProfileHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@ 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 { credsetConfidenceMap, poulationMap } from "../../constants";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretDown, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
import { v1 } from "uuid";
Expand All @@ -27,17 +24,30 @@ type ProfileHeaderProps = {
};

const dicSummary = [
{id:"n_variants", label:"Total variants", tooltip:"Number of harmonised variants"},
{ 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"},
]
{ 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);

if (!sumstatQCValues) return null;

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};
Expand All @@ -47,11 +57,16 @@ function SummaryStatisticsField({ sumstatQCValues }: any) {
};

const open = Boolean(anchorEl);
const id = open ? 'simple-popover' : undefined;
const id = open ? "simple-popover" : undefined;

return (
<Fragment>
<Typography sx={{ cursor: 'pointer', mr: 0.5, fontWeight: 600}} aria-describedby={id} variant="contained" onClick={handleClick}>
<Typography
sx={{ cursor: "pointer", mr: 0.5, fontWeight: 600, color: "secondary.main" }}
aria-describedby={id}
variant="contained"
onClick={handleClick}
>
Available <FontAwesomeIcon icon={faCaretDown} />
</Typography>

Expand All @@ -63,25 +78,36 @@ function SummaryStatisticsField({ sumstatQCValues }: any) {
elevation={1}
disableScrollLock
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
vertical: "bottom",
horizontal: "left",
}}
>
<Typography sx={{ p: 2 }}>
<Typography variant="subtitle1">Harmonised summary statistics</Typography>
<Box sx={{ p: 2 }}>
<Typography sx={{ fontSize: 16, fontWeight: 600, my: 1 }} variant="subtitle2">
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>
<tbody>
{dicSummary.map((sumstat: any) => {
const summStatValue = sumstatQCValues.find(
(v: any) => v.QCCheckName === sumstat.id
).QCCheckValue;
return (
<tr key={v1()}>
<td>
<Tooltip title={sumstat.tooltip} showHelpIcon>
{sumstat.label}
</Tooltip>
</td>
<Typography sx={{ textAlign: "right" }} component="td" variant="body2">
{summStatValue}
</Typography>
</tr>
);
})}
</tbody>
</table>
</Box>
</Popover>
</Fragment>
);
Expand Down Expand Up @@ -155,16 +181,21 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
</Field>
)}
{typeof credibleSet?.effectAlleleFrequencyFromSource === "number" && (
<Field loading={loading} title={<Tooltip
<Field
loading={loading}
title={
<Typography variant="caption">
Frequency of the effect allele in studied population
</Typography>
<Tooltip
title={
<Typography variant="caption">
Frequency of the effect allele in studied population
</Typography>
}
showHelpIcon
>
Effective allele frequency
</Tooltip>
}
showHelpIcon
>
Effective allele frequency
</Tooltip>}>
{credibleSet.effectAlleleFrequencyFromSource.toPrecision(3)}
</Field>
)}
Expand All @@ -191,21 +222,23 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
<Typography variant="subtitle1" mt={1}>
Fine-mapping
</Typography>
{
credibleSet?.locusStart && (<Field loading={loading} title="Locus">
{credibleSet?.variant?.chromosome}:{credibleSet?.locusStart}-{credibleSet?.locusEnd}
</Field>)
}
{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}
<Field
loading={loading}
title={
<Tooltip title="Fine-mapping confidence based on the quality of the linkage-desequilibrium information available and fine-mapping method"
showHelpIcon
>
Confidence
</Tooltip>
<Tooltip
title="Fine-mapping confidence based on the quality of the linkage-desequilibrium information available and fine-mapping method"
showHelpIcon
>
Confidence
</Tooltip>
}
>
<Tooltip title={credibleSet?.confidence}>
Expand All @@ -217,23 +250,26 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
<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>
}
<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>
</Box>

<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" && (
<>
Expand Down Expand Up @@ -281,46 +317,55 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
)}
</>
)}
{study?.publicationFirstAuthor && (<Field loading={loading} title="Publication">
{study?.publicationFirstAuthor} <i>et al.</i> {study?.publicationJournal} ({study?.publicationDate?.slice(0, 4)})
</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>
)}
{study?.analysisFlags && (<Field loading={loading} title={
<Tooltip title="Type of analysis" showHelpIcon>
Analysis
</Tooltip>
}>
{study?.analysisFlags ? study.analysisFlags : "Not Available"}
</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>
<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 && (
study.ldPopulationStructure.map(({ ldPopulation, relativeSampleSize}, index) => (
{study?.ldPopulationStructure?.length > 0 &&
study.ldPopulationStructure.map(({ ldPopulation, relativeSampleSize }, index) => (
<LabelChip
key={ldPopulation}
label={ldPopulation.toUpperCase()}
value={`${(relativeSampleSize * 100).toFixed(0)}%`}
tooltip={`LD reference population: ${ poulationMap[ldPopulation]}`}
tooltip={`LD reference population: ${poulationMap[ldPopulation]}`}
/>
))
)}
))}
{/* Quality controls */}
{study?.qualityControls.length > 0 && (
{study?.qualityControls?.length > 0 && (
<Tooltip title={study?.qualityControls.join(", ")} arrow>
<LabelChip
label={<FontAwesomeIcon size="1x" icon={faTriangleExclamation} />}
Expand All @@ -332,7 +377,7 @@ function ProfileHeader({ variantId }: ProfileHeaderProps) {
)}
</Box>
</Box>
</BaseProfileHeader>
</BaseProfileHeader>
);
}

Expand Down
5 changes: 1 addition & 4 deletions packages/sections/src/study/GWASCredibleSets/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,5 @@ export const definition = {
id,
name: "GWAS Credible Sets",
shortName: "GW",
hasData: data => {
console.log(data, "foo");
return data?.gwasCredibleSets?.count > 0 || data?.credibleSets?.count > 0;
},
hasData: data => data?.gwasCredibleSets?.count > 0 || data?.credibleSets?.count > 0,
};
15 changes: 1 addition & 14 deletions packages/sections/src/study/SharedTraitStudies/Body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,18 +137,6 @@ type BodyProps = {
entity: string;
};

const parseStudies = (studyId, studies) => {
const parsedStudies = [];
const studyIds = new Set([studyId]);
for (const study of studies) {
if (!studyIds.has(study.studyId)) {
parsedStudies.push(study);
studyIds.add(study.studyId);
}
}
return parsedStudies;
};

export function Body({ studyId, diseaseIds, entity }: BodyProps) {
const variables = {
diseaseIds: diseaseIds,
Expand All @@ -167,11 +155,10 @@ export function Body({ studyId, diseaseIds, entity }: BodyProps) {
entity={"studies"}
renderDescription={() => <Description studyId={studyId} />}
renderBody={() => {
const rows = request.data?.studies ? parseStudies(studyId, request.data.studies.rows) : [];
return (
<OtTable
columns={columns}
rows={rows}
rows={request.data?.studies?.rows}
loading={request.loading}
sortBy="nSamples"
order="desc"
Expand Down

0 comments on commit c37bf2a

Please sign in to comment.