[Platform]: Add variants widget to credible set page

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

@@ -30,6 +30,8 @@ function CredibleSetPage() {
 
   const credibleSet = data?.credibleSets[0];
   const variantId = credibleSet?.variant?.id;
+  const referenceAllele = credibleSet?.variant?.referenceAllele
+  const alternateAllele = credibleSet?.variant?.alternateAllele
   const studyId = credibleSet?.study?.studyId;
 
   return (
@@ -45,8 +47,8 @@ function CredibleSetPage() {
         loading={loading}
         studyId={studyId}
         variantId={variantId}
-        referenceAllele={credibleSet?.variant?.referenceAllele}
-        alternateAllele={credibleSet?.variant?.alternateAllele}
+        referenceAllele={referenceAllele}
+        alternateAllele={alternateAllele}
       />
       <ScrollToTop />
       <Route
@@ -67,7 +69,12 @@ function CredibleSetPage() {
       <Suspense fallback={<LoadingBackdrop height={11500} />}>
         <Switch>
           <Route exact path={path}>
-            <Profile studyLocusId={studyLocusId} variantId={variantId} />
+            <Profile
+              studyLocusId={studyLocusId}
+              variantId={variantId}
+              referenceAllele={referenceAllele}
+              alternateAllele={alternateAllele}
+            />
           </Route>
         </Switch>
       </Suspense>

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

@@ -8,16 +8,16 @@ import {
   summaryUtils,
 } from "ui";
 
-// import PharmacogenomicsSummary from "sections/src/variant/Pharmacogenomics/Summary";
+import VariantsSummary from "sections/src/credibleSet/Variants/Summary";
 
 import client from "../../client";
 import ProfileHeader from "./ProfileHeader";
-// const PharmacogenomicsSection = lazy(
-//   () => import("sections/src/variant/Pharmacogenomics/Body")
-// );
+const VariantsSection = lazy(
+  () => import("sections/src/credibleSet/Variants/Body")
+);
 
 const summaries = [
-  // PharmacogenomicsSummary,
+  VariantsSummary,
 ];
 
 const CREDIBLE_SET = "credibleSets";
@@ -41,9 +41,17 @@ const CREDIBLE_SET_PROFILE_QUERY = gql`
 type ProfileProps = {
   studyLocusId: string;
   variantId: string;
+  referenceAllele: string;
+  alternateAllele: string;
 };
 
-function Profile({ studyLocusId, variantId }: ProfileProps) {
+function Profile({
+      studyLocusId,
+      variantId,
+      referenceAllele,
+      alternateAllele,
+    }: ProfileProps) {
+
   return (
     <PlatformApiProvider
       entity={CREDIBLE_SET}
@@ -54,16 +62,23 @@ function Profile({ studyLocusId, variantId }: ProfileProps) {
       <ProfileHeader variantId={variantId} />
 
       <SummaryContainer>
-        {/* <PharmacogenomicsSummary />  */}
+        <VariantsSummary /> 
       </SummaryContainer>
 
       <SectionContainer>
-        {/* <Suspense fallback={<SectionLoader />}>
-          <PharmacogenomicsSection id={varId} entity={VARIANT} />
-        </Suspense> */}
+        <Suspense fallback={<SectionLoader />}>
+          <VariantsSection
+            studyLocusId={studyLocusId}
+            leadVariantId={variantId}
+            leadReferenceAllele={referenceAllele}
+            leadAlternateAllele={alternateAllele}
+            entity={CREDIBLE_SET}
+          />
+        </Suspense>
       </SectionContainer>
     </PlatformApiProvider>
   );
+
 }
 
 export default Profile;

packages/sections/src/credibleSet/Variants/Body.tsx

@@ -0,0 +1,198 @@
+import { useQuery } from "@apollo/client";
+import { Box, Chip } from "@mui/material";
+import {
+  Link,
+  SectionItem,
+  DataTable,
+  ScientificNotation,
+  DisplayVariantId,
+} from "ui";
+import { naLabel, defaultRowsPerPageOptions } from "../../constants";
+import { definition } from ".";
+import Description from "./Description";
+import VARIANTS_QUERY from "./VariantsQuery.gql";
+import { variantComparator } from "../../utils/comparators";
+
+type getColumnsType = {
+  leadVariantId: string;
+  leadReferenceAllele: string;
+  leadAlternateAllele: string;
+};
+
+function getColumns({
+      leadVariantId,
+      leadReferenceAllele,
+      leadAlternateAllele,
+    }: getColumnsType) {
+
+  return [
+    {
+      id: "variant.id",
+      label: "Variant ID",
+      comparator: variantComparator,
+      sortable: true,
+      filterValue: ({ variant: v }) => (
+        `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`
+      ),
+      renderCell: ({ variant }) => {
+        if (!variant) return naLabel;
+        const { id: variantId, referenceAllele, alternateAllele } = variant;
+        const displayElement = <Link to={`/variant/${variantId}`}>
+          <DisplayVariantId
+            variantId={variantId}
+            referenceAllele={referenceAllele}
+            alternateAllele={alternateAllele}
+            expand={false}
+          />
+        </Link>;
+        if (variantId === leadVariantId) {
+          return <Box display="flex" alignItems="center" gap={0.5}>
+            {displayElement}
+            <Chip label="lead" variant="outlined" size="small"/>
+          </Box>;
+        }
+        return displayElement;
+      },
+      exportValue: ({ variant }) => variant?.id,
+    },
+    {
+      id: "pValue",
+      label: "P-value",
+      comparator: (a, b) =>
+        a?.pValueMantissa * 10 ** a?.pValueExponent -
+          b?.pValueMantissa * 10 ** b?.pValueExponent,
+      sortable: true,
+      filterValue: false,
+      renderCell: ({ pValueMantissa, pValueExponent }) => {
+        if (typeof pValueMantissa !== "number" ||
+            typeof pValueExponent !== "number") return naLabel;
+        return <ScientificNotation number={[pValueMantissa, pValueExponent]} />;
+      },
+      exportValue: ({ pValueMantissa, pValueExponent }) => {
+        if (typeof pValueMantissa !== "number" ||
+            typeof pValueExponent !== "number") return null;
+        return `${pValueMantissa}x10${pValueExponent}`;
+      },
+    },
+    {
+      id: "beta",
+      label: "Beta",
+      filterValue: false,
+      tooltip: "Beta with respect to the ALT allele",
+      renderCell: ({ beta }) => {
+        if (typeof beta !== "number") return naLabel;
+        return beta.toPrecision(3);
+      },
+    },
+    {
+      id: "standardError",
+      label: "Standard error",
+      filterValue: false,
+      tooltip: "Standard Error: Estimate of the standard deviation of the sampling distribution of the beta",
+      renderCell: ({ standardError }) => {
+        if (typeof standardError !== "number") return naLabel;
+        return standardError.toPrecision(3);
+      },
+    },
+    {
+      id: "r2Overall",
+      label: "LD (r²)",
+      filterValue: false,
+      tooltip: <>
+        Linkage disequilibrium with the lead variant (
+          <DisplayVariantId
+            variantId={leadVariantId}
+            referenceAllele={leadReferenceAllele}
+            alternateAllele={leadAlternateAllele}
+            expand={false}
+          />
+        )
+      </>,
+      renderCell: ({ r2Overall }) => {
+        if (typeof r2Overall !== "number") return naLabel;
+        return r2Overall.toPrecision(3);
+      },
+    },
+    {
+      id: "posteriorProbability",
+      label: "Posterior Probability",
+      filterValue: false,
+      tooltip: "Posterior inclusion probability from fine-mapping that this variant is causal",
+      comparator: (rowA, rowB) => rowA?.posteriorProbability - rowB?.posteriorProbability,
+      sortable: true,
+      renderCell: ({ posteriorProbability }) => {
+        if (typeof posteriorProbability !== "number") return naLabel;
+        return posteriorProbability.toPrecision(3);
+      },
+    },
+    {
+      id: 'logBF',
+      label: 'LOG(BF)',
+      filterValue: false,
+      renderCell: ({ logBF }) => {
+        if (typeof logBF !== "number") return naLabel;
+        return logBF.toPrecision(3);
+      },
+    }
+  ];
+
+}
+
+type BodyProps = {
+  studyLocusId: string,
+  leadVariantId: string,
+  leadReferenceAllele: string,
+  leadAlternateAllele: string,
+  entity: string,
+};
+
+function Body({
+      studyLocusId,
+      leadVariantId,
+      leadReferenceAllele,
+      leadAlternateAllele,
+      entity
+    }: BodyProps) {
+
+  const variables = {
+    studyLocusIds: [studyLocusId],
+  };
+
+  const request = useQuery(VARIANTS_QUERY, {
+    variables,
+  });
+
+  const columns = getColumns({
+    leadVariantId,
+    leadReferenceAllele,
+    leadAlternateAllele,
+  });
+
+  return (
+    <SectionItem
+      definition={definition}
+      entity={entity}
+      request={request}
+      renderDescription={() => <Description />}
+      renderBody={({ credibleSets }) => {
+        // debugger
+        return (
+          <DataTable
+            dataDownloader
+            showGlobalFilter
+            sortBy="posteriorProbability"
+            order="desc"
+            columns={columns}
+            rows={credibleSets[0].locus}
+            rowsPerPageOptions={defaultRowsPerPageOptions}
+            query={VARIANTS_QUERY.loc.source.body}
+            variables={variables}
+          />
+        );
+      }}
+    />
+  );
+
+}
+
+export default Body;

packages/sections/src/credibleSet/Variants/Description.tsx

@@ -0,0 +1,14 @@
+import { Link } from "ui";
+
+function Description() {
+  return (
+    <>
+      Source:{" "}
+      <Link to="../" >
+        Open Targets
+      </Link>
+    </>
+  );
+}
+
+export default Description;

packages/sections/src/credibleSet/Variants/Summary.tsx

@@ -0,0 +1,16 @@
+import { SummaryItem, usePlatformApi } from "ui";
+
+import { definition } from ".";
+import VARIANTS_SUMMARY from "./VariantsSummaryFragment.gql";
+
+function Summary() {
+  const request = usePlatformApi(VARIANTS_SUMMARY);
+
+  return <SummaryItem definition={definition} request={request} />;
+}
+
+Summary.fragments = {
+  VariantsSummaryFragment: VARIANTS_SUMMARY,
+};
+
+export default Summary;

packages/sections/src/credibleSet/Variants/VariantsQuery.gql

@@ -0,0 +1,21 @@
+query VariantsQuery($studyLocusIds: [String!]!) {
+  credibleSets(studyLocusIds: $studyLocusIds) {
+    studyLocusId
+		locus {
+      logBF
+      posteriorProbability
+      variant {
+        id
+        chromosome
+        position
+        referenceAllele
+        alternateAllele
+      }
+      pValueMantissa
+      pValueExponent
+      beta
+      standardError
+      r2Overall
+    }
+  }
+}

packages/sections/src/credibleSet/Variants/VariantsSummaryFragment.gql

@@ -0,0 +1,5 @@
+fragment VariantsSummaryFragment on credibleSet {
+  locus {
+    beta
+  }
+}

packages/sections/src/credibleSet/Variants/index.ts

@@ -0,0 +1,7 @@
+const id = "variants";
+export const definition = {
+  id,
+  name: "Variants in Credible Set",
+  shortName: "VA",
+  hasData: data => data?.[0]?.locus?.length > 0,
+};