[Platform]: Use batching for coloc widgets on credible sets page (#591)

* update coloc and l2g widgets * fix l2g typos
opentargets · Dec 5, 2024 · 5590b1c · 5590b1c
1 parent 2f9c2bf
commit 5590b1c
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 78 deletions.
diff --git a/packages/sections/src/credibleSet/GWASColoc/Body.tsx b/packages/sections/src/credibleSet/GWASColoc/Body.tsx
@@ -1,19 +1,20 @@
-import { useQuery } from "@apollo/client";
 import {
   Link,
   SectionItem,
   DisplayVariantId,
   ScientificNotation,
   OtTable,
   Tooltip,
+  useBatchQuery,
   Navigate,
 } from "ui";
-import { naLabel } from "../../constants";
+import { naLabel, initialResponse, table5HChunkSize } from "../../constants";
 import { definition } from ".";
 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";
 
 const columns = [
   {
@@ -196,16 +197,33 @@ function Body({ studyLocusId, entity }: BodyProps) {
     studyLocusId: studyLocusId,
   };
 
-  const request = useQuery(GWAS_COLOC_QUERY, {
-    variables,
+  const [request, setRequest] = useState<responseType>(initialResponse);
+
+  const getData = useBatchQuery({
+    query: GWAS_COLOC_QUERY,
+    variables: {
+      studyLocusId,
+      size: table5HChunkSize,
+      index: 0,
+    },
+    dataPath: "data.credibleSet.colocalisation",
+    size: table5HChunkSize,
   });
 
+  useEffect(() => {
+    getData().then(r => {
+      setRequest(r);
+    });
+  }, []);
+
   return (
     <SectionItem
       definition={definition}
       entity={entity}
       request={request}
       renderDescription={() => <Description />}
+      showContentLoading
+      loadingMessage="Loading data. This may take some time..."
       renderBody={() => {
         return (
           <OtTable
@@ -216,7 +234,7 @@ function Body({ studyLocusId, entity }: BodyProps) {
             order="asc"
             columns={columns}
             loading={request.loading}
-            rows={request.data?.credibleSet.colocalisation}
+            rows={request.data?.credibleSet.colocalisation.rows}
             query={GWAS_COLOC_QUERY.loc.source.body}
             variables={variables}
           />

diff --git a/packages/sections/src/credibleSet/GWASColoc/GWASColocQuery.gql b/packages/sections/src/credibleSet/GWASColoc/GWASColocQuery.gql
@@ -1,30 +1,33 @@
-query GWASColocQuery($studyLocusId: String!) {
+query GWASColocQuery($studyLocusId: String!, $size: Int!, $index: Int!) {
   credibleSet(studyLocusId: $studyLocusId) {
-    colocalisation(studyTypes: [gwas], page: { size: 250, index: 0 }) {
-      otherStudyLocus {
-        studyLocusId
-        study {
-          id
-          projectId
-          traitFromSource
-          publicationFirstAuthor
+    colocalisation(studyTypes: [gwas], page: { size: $size, index: $index }) {
+      count
+      rows {
+        otherStudyLocus {
+          studyLocusId
+          study {
+            id
+            projectId
+            traitFromSource
+            publicationFirstAuthor
+          }
+          variant {
+            id
+            chromosome
+            position
+            referenceAllele
+            alternateAllele
+          }
+          pValueMantissa
+          pValueExponent
         }
-        variant {
-          id
-          chromosome
-          position
-          referenceAllele
-          alternateAllele
-        }
-        pValueMantissa
-        pValueExponent
+        numberColocalisingVariants
+        colocalisationMethod
+        h3
+        h4
+        clpp
+        betaRatioSignAverage
       }
-      numberColocalisingVariants
-      colocalisationMethod
-      h3
-      h4
-      clpp
-      betaRatioSignAverage
     }
   }
 }
diff --git a/packages/sections/src/credibleSet/GWASColoc/GWASColocSummaryFragment.gql b/packages/sections/src/credibleSet/GWASColoc/GWASColocSummaryFragment.gql
@@ -1,5 +1,5 @@
 fragment GWASColocSummaryFragment on credibleSet {
   colocalisation(studyTypes: [gwas], page: { size: 1, index: 0 }) {
-    colocalisationMethod
+    count
   }
 }
diff --git a/packages/sections/src/credibleSet/GWASColoc/index.ts b/packages/sections/src/credibleSet/GWASColoc/index.ts
@@ -3,5 +3,5 @@ export const definition = {
   id,
   name: "GWAS Colocalisation",
   shortName: "GC",
-  hasData: data => data?.colocalisation?.length > 0,
+  hasData: data => data?.colocalisation?.count > 0,
 };
diff --git a/packages/sections/src/credibleSet/Locus2Gene/Body.tsx b/packages/sections/src/credibleSet/Locus2Gene/Body.tsx
@@ -61,7 +61,7 @@ function Body({ studyLocusId, entity }: BodyProps): ReactNode {
             dataDownloaderFileStem={`${studyLocusId}-locus2gene`}
             columns={columns}
             loading={request.loading}
-            rows={request.data?.credibleSet.l2Gpredictions}
+            rows={request.data?.credibleSet.l2GPredictions.rows}
             query={LOCUS2GENE_QUERY.loc.source.body}
             variables={variables}
           />

diff --git a/packages/sections/src/credibleSet/Locus2Gene/Locus2GeneQuery.gql b/packages/sections/src/credibleSet/Locus2Gene/Locus2GeneQuery.gql
@@ -1,11 +1,14 @@
 query Locus2GeneQuery($studyLocusId: String!) {
   credibleSet(studyLocusId: $studyLocusId) {
-    l2Gpredictions {
-      target {
-        id
-        approvedSymbol
+    l2GPredictions {
+      count
+      rows {
+        target {
+          id
+          approvedSymbol
+        }
+        score
       }
-      score
     }
   }
 }
diff --git a/packages/sections/src/credibleSet/Locus2Gene/Locus2GeneQueryFragment.gql b/packages/sections/src/credibleSet/Locus2Gene/Locus2GeneQueryFragment.gql
@@ -1,5 +1,5 @@
 fragment Locus2GeneQueryFragment on credibleSet {
-  l2Gpredictions {
-    score
+  l2GPredictions {
+    count
   }
 }
diff --git a/packages/sections/src/credibleSet/Locus2Gene/index.ts b/packages/sections/src/credibleSet/Locus2Gene/index.ts
@@ -3,5 +3,5 @@ export const definition = {
   id,
   name: "Locus to Gene",
   shortName: "LG",
-  hasData: data => data?.l2Gpredictions.length > 0,
+  hasData: data => data?.l2GPredictions?.count > 0,
 };
diff --git a/packages/sections/src/credibleSet/MolQTLColoc/Body.tsx b/packages/sections/src/credibleSet/MolQTLColoc/Body.tsx
@@ -1,19 +1,20 @@
-import { useQuery } from "@apollo/client";
 import {
   Link,
   SectionItem,
   DisplayVariantId,
   ScientificNotation,
   OtTable,
   Tooltip,
+  useBatchQuery,
   Navigate,
 } from "ui";
-import { naLabel } from "../../constants";
+import { naLabel, initialResponse, table5HChunkSize } from "../../constants";
 import { definition } from ".";
 import Description from "./Description";
 import MOLQTL_COLOC_QUERY from "./MolQTLColocQuery.gql";
 import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
 import { getStudyCategory } from "../../utils/getStudyCategory";
+import { useEffect, useState } from "react";
 
 const columns = [
   {
@@ -213,15 +214,32 @@ function Body({ studyLocusId, entity }: BodyProps) {
     studyLocusId: studyLocusId,
   };
 
-  const request = useQuery(MOLQTL_COLOC_QUERY, {
-    variables,
+  const [request, setRequest] = useState<responseType>(initialResponse);
+
+  const getData = useBatchQuery({
+    query: MOLQTL_COLOC_QUERY,
+    variables: {
+      studyLocusId,
+      size: table5HChunkSize,
+      index: 0,
+    },
+    dataPath: "data.credibleSet.colocalisation",
+    size: table5HChunkSize,
   });
 
+  useEffect(() => {
+    getData().then(r => {
+      setRequest(r);
+    });
+  }, []);
+
   return (
     <SectionItem
       definition={definition}
       entity={entity}
       request={request}
+      showContentLoading
+      loadingMessage="Loading data. This may take some time..."
       renderDescription={() => <Description />}
       renderBody={() => {
         return (
@@ -233,7 +251,7 @@ function Body({ studyLocusId, entity }: BodyProps) {
             order="asc"
             columns={columns}
             loading={request.loading}
-            rows={request.data?.credibleSet.colocalisation}
+            rows={request.data?.credibleSet.colocalisation.rows}
             query={MOLQTL_COLOC_QUERY.loc.source.body}
             variables={variables}
           />

diff --git a/packages/sections/src/credibleSet/MolQTLColoc/MolQTLColocQuery.gql b/packages/sections/src/credibleSet/MolQTLColoc/MolQTLColocQuery.gql
@@ -1,40 +1,43 @@
-query MolQTLColocQuery($studyLocusId: String!) {
+query MolQTLColocQuery($studyLocusId: String!, $size: Int!, $index: Int!) {
   credibleSet(studyLocusId: $studyLocusId) {
-    colocalisation(studyTypes: [tuqtl, pqtl, eqtl, sqtl], page: { size: 250, index: 0 }) {
-      otherStudyLocus {
-        studyLocusId
-        study {
-          id
-          studyType
-          projectId
-          traitFromSource
-          publicationFirstAuthor
-          target {
-            approvedSymbol
+    colocalisation(studyTypes: [tuqtl, pqtl, eqtl, sqtl], page: { size: $size, index: $index }) {
+      count
+      rows {
+        otherStudyLocus {
+          studyLocusId
+          study {
             id
+            studyType
+            projectId
+            traitFromSource
+            publicationFirstAuthor
+            target {
+              approvedSymbol
+              id
+            }
+            biosample {
+              biosampleId
+              biosampleName
+              description
+            }
           }
-          biosample {
-            biosampleId
-            biosampleName
-            description
+          variant {
+            id
+            chromosome
+            position
+            referenceAllele
+            alternateAllele
           }
+          pValueMantissa
+          pValueExponent
         }
-        variant {
-          id
-          chromosome
-          position
-          referenceAllele
-          alternateAllele
-        }
-        pValueMantissa
-        pValueExponent
+        numberColocalisingVariants
+        colocalisationMethod
+        h3
+        h4
+        clpp
+        betaRatioSignAverage
       }
-      numberColocalisingVariants
-      colocalisationMethod
-      h3
-      h4
-      clpp
-      betaRatioSignAverage
     }
   }
 }
diff --git a/packages/sections/src/credibleSet/MolQTLColoc/MolQTLColocSummaryFragment.gql b/packages/sections/src/credibleSet/MolQTLColoc/MolQTLColocSummaryFragment.gql
@@ -3,6 +3,6 @@ fragment MolQTLColocSummaryFragment on credibleSet {
     studyTypes: [tuqtl, pqtl, eqtl, sqtl]
     page: { size: 1, index: 0 }
   ) {
-    colocalisationMethod
+    count
   }
 }
diff --git a/packages/sections/src/credibleSet/MolQTLColoc/index.ts b/packages/sections/src/credibleSet/MolQTLColoc/index.ts
@@ -3,6 +3,6 @@ export const definition = {
   name: "MolQTL Colocalisation",
   shortName: "GC",
   hasData: data => {
-    return data?.colocalisation?.length > 0 || data?.molqtlcolocalisation?.length > 0;
+    return data?.colocalisation?.count > 0 || data?.molqtlcolocalisation?.count > 0;
   },
 };