From 5590b1c70043b44ac95adbefd878a3115c59cb70 Mon Sep 17 00:00:00 2001 From: Graham McNeill Date: Thu, 5 Dec 2024 14:01:57 +0000 Subject: [PATCH] [Platform]: Use batching for coloc widgets on credible sets page (#591) * update coloc and l2g widgets * fix l2g typos --- .../src/credibleSet/GWASColoc/Body.tsx | 28 ++++++-- .../credibleSet/GWASColoc/GWASColocQuery.gql | 51 ++++++++------- .../GWASColoc/GWASColocSummaryFragment.gql | 2 +- .../src/credibleSet/GWASColoc/index.ts | 2 +- .../src/credibleSet/Locus2Gene/Body.tsx | 2 +- .../Locus2Gene/Locus2GeneQuery.gql | 13 ++-- .../Locus2Gene/Locus2GeneQueryFragment.gql | 4 +- .../src/credibleSet/Locus2Gene/index.ts | 2 +- .../src/credibleSet/MolQTLColoc/Body.tsx | 28 ++++++-- .../MolQTLColoc/MolQTLColocQuery.gql | 65 ++++++++++--------- .../MolQTLColocSummaryFragment.gql | 2 +- .../src/credibleSet/MolQTLColoc/index.ts | 2 +- 12 files changed, 123 insertions(+), 78 deletions(-) diff --git a/packages/sections/src/credibleSet/GWASColoc/Body.tsx b/packages/sections/src/credibleSet/GWASColoc/Body.tsx index 0a6ffff26..aebc9e4b3 100644 --- a/packages/sections/src/credibleSet/GWASColoc/Body.tsx +++ b/packages/sections/src/credibleSet/GWASColoc/Body.tsx @@ -1,4 +1,3 @@ -import { useQuery } from "@apollo/client"; import { Link, SectionItem, @@ -6,14 +5,16 @@ import { 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(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 ( } + showContentLoading + loadingMessage="Loading data. This may take some time..." renderBody={() => { return ( diff --git a/packages/sections/src/credibleSet/GWASColoc/GWASColocQuery.gql b/packages/sections/src/credibleSet/GWASColoc/GWASColocQuery.gql index 36f83ba95..861bb8c54 100644 --- 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 index daf3f7f67..89be2cec2 100644 --- 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 } } \ No newline at end of file diff --git a/packages/sections/src/credibleSet/GWASColoc/index.ts b/packages/sections/src/credibleSet/GWASColoc/index.ts index 236a8c457..7a0b35f62 100644 --- 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 index d756aec44..c2b5f949a 100644 --- 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 index 90e061373..37129b34b 100644 --- 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 index caa73e23d..96db69912 100644 --- 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 index 4a5334a1e..0d4343f77 100644 --- 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 index d325c9ea4..891d6fbbd 100644 --- a/packages/sections/src/credibleSet/MolQTLColoc/Body.tsx +++ b/packages/sections/src/credibleSet/MolQTLColoc/Body.tsx @@ -1,4 +1,3 @@ -import { useQuery } from "@apollo/client"; import { Link, SectionItem, @@ -6,14 +5,16 @@ import { 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(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 ( } 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 index beb546f6f..bc49ca334 100644 --- 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 index 4876f4ce9..f560a26be 100644 --- 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 index 23c1f5e44..d35951534 100644 --- 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; }, };