diff --git a/packages/sections/src/credibleSet/Variants/Body.tsx b/packages/sections/src/credibleSet/Variants/Body.tsx index 9042bc160..2e7a5db1e 100644 --- a/packages/sections/src/credibleSet/Variants/Body.tsx +++ b/packages/sections/src/credibleSet/Variants/Body.tsx @@ -1,12 +1,19 @@ -import { useQuery } from "@apollo/client"; import { Box, Chip } from "@mui/material"; -import { Link, SectionItem, ScientificNotation, DisplayVariantId, OtTable } from "ui"; -import { naLabel } from "../../constants"; +import { + Link, + SectionItem, + ScientificNotation, + DisplayVariantId, + OtTable, + useBatchQuery, +} from "ui"; +import { naLabel, initialResponse, table5HChunkSize } from "../../constants"; import { definition } from "."; import Description from "./Description"; import VARIANTS_QUERY from "./VariantsQuery.gql"; import { mantissaExponentComparator, variantComparator } from "../../utils/comparators"; import { identifiersOrgLink } from "../../utils/global"; +import { useEffect, useState } from "react"; type getColumnsType = { leadVariantId: string; @@ -181,10 +188,25 @@ function Body({ studyLocusId: studyLocusId, }; - const request = useQuery(VARIANTS_QUERY, { - variables, + const [request, setRequest] = useState(initialResponse); + + const getData = useBatchQuery({ + query: VARIANTS_QUERY, + variables: { + studyLocusId, + size: table5HChunkSize, + index: 0, + }, + dataPath: "data.credibleSet.locus", + size: table5HChunkSize, }); + useEffect(() => { + getData().then(r => { + setRequest(r); + }); + }, []); + const columns = getColumns({ leadVariantId, leadReferenceAllele, @@ -196,6 +218,8 @@ function Body({ definition={definition} entity={entity} request={request} + showContentLoading + loadingMessage="Loading data. This may take some time..." renderDescription={() => } renderBody={() => { return ( diff --git a/packages/sections/src/credibleSet/Variants/VariantsQuery.gql b/packages/sections/src/credibleSet/Variants/VariantsQuery.gql index 055ba0796..8f6e2234c 100644 --- a/packages/sections/src/credibleSet/Variants/VariantsQuery.gql +++ b/packages/sections/src/credibleSet/Variants/VariantsQuery.gql @@ -1,7 +1,7 @@ -query VariantsQuery($studyLocusId: String!) { +query VariantsQuery($studyLocusId: String!, $size: Int!, $index: Int!) { credibleSet(studyLocusId: $studyLocusId) { studyLocusId - locus { + locus(page: { size: $size, index: $index }) { count rows { logBF