Merge branch 'main' of github.com:opentargets/ot-ui-apps into cc-upgr…

…ade-react-router

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

@@ -15,6 +15,9 @@ fragment CredibleSetProfileHeaderFragment on credibleSet {
       standardError
     }
   }
+  locusSize: locus(page: { size: 1, index: 0 }) {
+    count
+  }
   variant {
     chromosome
     position

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

@@ -25,14 +25,15 @@ function ProfileHeader() {
   if (error) return null;
 
   const credibleSet = data?.credibleSet;
+  const leadVariant = credibleSet?.locus?.rows?.[0] || {};
+  const beta = leadVariant.beta ?? credibleSet?.beta;
+  const standardError = leadVariant.standardError ?? credibleSet?.standardError;
   const study = credibleSet?.study;
   const target = study?.target;
-  const leadVariant = credibleSet?.locus.rows[0];
-  const beta = leadVariant?.beta ?? credibleSet?.beta;
-  const standardError = leadVariant?.standardError ?? credibleSet?.standardError;
+
   const { pValueMantissa, pValueExponent } =
     typeof leadVariant?.pValueMantissa === "number" &&
-      typeof leadVariant?.pValueExponent === "number"
+    typeof leadVariant?.pValueExponent === "number"
       ? leadVariant
       : credibleSet ?? {};
 
@@ -169,24 +170,26 @@ function ProfileHeader() {
         >
           {credibleSet?.purityMinR2?.toPrecision(3)}
         </Field>
-        {credibleSet?.qualityControls?.length > 0 &&
+        {credibleSet?.qualityControls?.length > 0 && (
           <Box>
             <DetailPopover title="QC warnings">
-              <ul style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: "0.25rem",
-                padding: 0,
-                margin: "0 0 0 1rem"
-              }}>
+              <ul
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "0.25rem",
+                  padding: 0,
+                  margin: "0 0 0 1rem",
+                }}
+              >
                 {credibleSet.qualityControls.map(warning => (
                   <li key={warning}>{warning}</li>
                 ))}
               </ul>
             </DetailPopover>
           </Box>
-        }
-      </Box >
+        )}
+      </Box>
 
       <Box>
         <Typography variant="subtitle1" mt={0}>
@@ -260,25 +263,26 @@ function ProfileHeader() {
           {study?.analysisFlags?.join(", ")}
         </Field>
         <Field loading={loading} title="Summary statistics">
-          {!study?.hasSumstats
-            ? "Not Available"
-            : study?.sumstatQCValues
-              ? <DetailPopover title="Available">
-                <SummaryStatsTable sumstatQCValues={study.sumstatQCValues} />
-              </DetailPopover>
-              : "Available"
-          }
+          {!study?.hasSumstats ? (
+            "Not Available"
+          ) : study?.sumstatQCValues ? (
+            <DetailPopover title="Available">
+              <SummaryStatsTable sumstatQCValues={study.sumstatQCValues} />
+            </DetailPopover>
+          ) : (
+            "Available"
+          )}
         </Field>
-        {study?.nSamples &&
+        {study?.nSamples && (
           <Field loading={loading} title="Sample size">
             <DisplaySampleSize
               nSamples={study.nSamples}
               cohorts={study?.cohorts}
               initialSampleSize={study?.initialSampleSize}
             />
           </Field>
-        }
-        {study?.ldPopulationStructure?.length > 0 &&
+        )}
+        {study?.ldPopulationStructure?.length > 0 && (
           <Box display="flex" sx={{ gap: 1 }}>
             {study.ldPopulationStructure.map(({ ldPopulation, relativeSampleSize }) => (
               <LabelChip
@@ -289,9 +293,9 @@ function ProfileHeader() {
               />
             ))}
           </Box>
-        }
+        )}
       </Box>
-    </BaseProfileHeader >
+    </BaseProfileHeader>
   );
 }
 

apps/platform/src/pages/HomePage/searchExamples.ts

@@ -43,12 +43,12 @@ export const pppSearchExamples: Examples = {
     { type: "suggestion", entity: "drug", name: "LYRICA", id: "CHEMBL1059" },
   ],
   variants: [
+    { type: "suggestion", entity: "variant", name: "rs7412", id: "19_44908822_C_T" },
     { type: "suggestion", entity: "variant", name: "rs4129267", id: "1_154453788_C_T" },
     { type: "suggestion", entity: "variant", name: "4_1804392_G_A", id: "4_1804392_G_A" },
     { type: "suggestion", entity: "variant", name: "11_64600382_G_A", id: "11_64600382_G_A" },
     { type: "suggestion", entity: "variant", name: "12_6333477_C_T", id: "12_6333477_C_T" },
-    { type: "suggestion", entity: "variant", name: "15_90088702_C_T", id: "15_90088702_C_T" },
-    { type: "suggestion", entity: "variant", name: "17_63945614_C_T", id: "17_63945614_C_T" },
+    { type: "suggestion", entity: "variant", name: "17_43093010_G_A", id: "17_43093010_G_A" },
   ],
 };
 

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

@@ -49,9 +49,26 @@ function ProfileHeader() {
 
       {data?.variant.alleleFrequencies.length > 0 && (
         <Paper sx={{ py: 2, px: 5, maxWidth: "100%" }} elevation={0} variant="outlined">
-          <Typography variant="subtitle2" mb={1}>
-            Population Allele Frequencies
-          </Typography>
+          <Box
+            display="flex"
+            justifyContent="space-between"
+            flexWrap="wrap"
+            columnGap={2}
+            mb={1.5}
+            alignItems="center"
+          >
+            <Typography variant="subtitle2">
+              Population Allele Frequencies
+            </Typography>
+            <Typography variant="body2">
+              <em>
+                Source:{" "}
+                <Link to="https://gnomad.broadinstitute.org/" external>
+                  gnomAD
+                </Link>
+              </em>
+            </Typography>
+          </Box>
           <Box sx={{ margin: "0 auto", maxWidth: "550px" }}>
             <AlleleFrequencyPlot data={data.variant.alleleFrequencies} />
           </Box>

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

@@ -14,7 +14,7 @@ import Description from "./Description";
 import GWAS_COLOC_QUERY from "./GWASColocQuery.gql";
 import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
 import { getStudyCategory } from "../../utils/getStudyCategory";
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 
 const columns = [
   {
@@ -131,12 +131,11 @@ const columns = [
       let category = "Inconclusive";
       if (betaRatioSignAverage <= -0.99) category = "Opposite";
       else if (betaRatioSignAverage >= 0.99) category = "Same";
-      const displayValue = Math.abs(betaRatioSignAverage) === 1
-        ? betaRatioSignAverage
-        : betaRatioSignAverage.toFixed(2)
-      return <Tooltip title={`Beta ratio sign average: ${displayValue}`}>
-        {category}
-      </Tooltip>
+      const displayValue =
+        Math.abs(betaRatioSignAverage) === 1
+          ? betaRatioSignAverage
+          : betaRatioSignAverage.toFixed(2);
+      return <Tooltip title={`Beta ratio sign average: ${displayValue}`}>{category}</Tooltip>;
     },
     filterValue: ({ betaRatioSignAverage }) => {
       if (betaRatioSignAverage == null) return null;
@@ -201,20 +200,18 @@ type BodyProps = {
   entity: string;
 };
 
-function Body({ studyLocusId, entity }: BodyProps) {
+function Body({ studyLocusId, entity }: BodyProps): ReactElement {
   const variables = {
     studyLocusId: studyLocusId,
+    size: table5HChunkSize,
+    index: 0,
   };
 
   const [request, setRequest] = useState<responseType>(initialResponse);
 
   const getData = useBatchQuery({
     query: GWAS_COLOC_QUERY,
-    variables: {
-      studyLocusId,
-      size: table5HChunkSize,
-      index: 0,
-    },
+    variables,
     dataPath: "data.credibleSet.colocalisation",
     size: table5HChunkSize,
   });
@@ -223,7 +220,7 @@ function Body({ studyLocusId, entity }: BodyProps) {
     getData().then(r => {
       setRequest(r);
     });
-  }, []);
+  }, [studyLocusId]);
 
   return (
     <SectionItem

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

@@ -4,7 +4,7 @@ import { Link } from "ui";
 function Description(): ReactElement {
   return (
     <>
-      Gene assignment based on machine-learning prioritisation of credible set features. Source:{" "}
+      Gene assignment based on machine-learning prioritisation of credible set features [Feature metrics coming soon]. Source:{" "}
       <Link to="https://home.opentargets.org/merged-product-documentation" external>
         Open Targets
       </Link>

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

@@ -234,7 +234,7 @@ function Body({ studyLocusId, entity }: BodyProps) {
     getData().then(r => {
       setRequest(r);
     });
-  }, []);
+  }, [studyLocusId]);
 
   return (
     <SectionItem

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

@@ -133,7 +133,8 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
       label: "Posterior Probability",
       filterValue: false,
       numeric: true,
-      tooltip: "Posterior inclusion probability that this variant is causal within the fine-mapped credible set",
+      tooltip:
+        "Posterior inclusion probability that this variant is causal within the fine-mapped credible set",
       comparator: (rowA, rowB) => rowA?.posteriorProbability - rowB?.posteriorProbability,
       sortable: true,
       renderCell: ({ posteriorProbability }) => {
@@ -145,7 +146,8 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
       id: "logBF",
       label: "log(BF)",
       numeric: true,
-      tooltip: "Natural logarithm of the Bayes Factor indicating relative likelihood of the variant being causal",
+      tooltip:
+        "Natural logarithm of the Bayes Factor indicating relative likelihood of the variant being causal",
       filterValue: false,
       sortable: true,
       renderCell: ({ logBF }) => {
@@ -159,7 +161,7 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
       tooltip: "Most severe consequence of the variant. Source: Ensembl VEP",
 
       renderCell: ({ variant }) => {
-        const mostSevereConsequence = variant?.mostSevereConsequence
+        const mostSevereConsequence = variant?.mostSevereConsequence;
         if (!mostSevereConsequence) return naLabel;
         const displayElement = (
           <Link external to={identifiersOrgLink("SO", mostSevereConsequence.id.slice(3))}>
@@ -169,7 +171,7 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
         return displayElement;
       },
       exportValue: ({ variant }) => {
-        return variant?.mostSevereConsequence.label
+        return variant?.mostSevereConsequence.label;
       },
     },
   ];
@@ -192,17 +194,15 @@ function Body({
 }: BodyProps) {
   const variables = {
     studyLocusId: studyLocusId,
+    size: table5HChunkSize,
+    index: 0,
   };
 
   const [request, setRequest] = useState<responseType>(initialResponse);
 
   const getData = useBatchQuery({
     query: VARIANTS_QUERY,
-    variables: {
-      studyLocusId,
-      size: table5HChunkSize,
-      index: 0,
-    },
+    variables,
     dataPath: "data.credibleSet.locus",
     size: table5HChunkSize,
   });
@@ -211,7 +211,7 @@ function Body({
     getData().then(r => {
       setRequest(r);
     });
-  }, []);
+  }, [studyLocusId]);
 
   const columns = getColumns({
     leadVariantId,

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

@@ -2,4 +2,7 @@ fragment VariantsSummaryFragment on credibleSet {
   locus(variantIds: $variantIds) {
     count
   }
+  locusSize: locus(page: { size: 1, index: 0 }) {
+    count
+  }
 }

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

@@ -3,5 +3,5 @@ export const definition = {
   id,
   name: "Credible Set Variants",
   shortName: "VA",
-  hasData: data => data?.locus.count > 0,
+  hasData: data => data?.locus.count > 0 || data?.locusSize.count > 0,
 };

packages/sections/src/disease/GWASStudies/Body.tsx

@@ -13,7 +13,7 @@ import { getStudyCategory } from "../../utils/getStudyCategory";
 import GWAS_STUDIES_BODY_QUERY from "./GWASStudiesQuery.gql";
 import { definition } from ".";
 import { epmcUrl } from "ui/src/utils/urls";
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { responseType } from "ui/src/types/response";
 
 const columns = [
@@ -116,20 +116,18 @@ type BodyProps = {
   label: string;
 };
 
-function Body({ id: efoId, label: diseaseName }: BodyProps) {
+function Body({ id: efoId, label: diseaseName }: BodyProps): ReactElement {
   const variables = {
     diseaseIds: [efoId],
+    size: table5HChunkSize,
+    index: 0,
   };
 
   const [request, setRequest] = useState<responseType>(initialResponse);
 
   const getData = useBatchQuery({
     query: GWAS_STUDIES_BODY_QUERY,
-    variables: {
-      diseaseIds: variables.diseaseIds,
-      size: table5HChunkSize,
-      index: 0,
-    },
+    variables,
     dataPath: "data.studies",
     size: table5HChunkSize,
   });
@@ -138,7 +136,7 @@ function Body({ id: efoId, label: diseaseName }: BodyProps) {
     getData().then(r => {
       setRequest(r);
     });
-  }, []);
+  }, [efoId]);
 
   return (
     <SectionItem