diff --git a/apps/platform/src/pages/DiseasePage/Profile.jsx b/apps/platform/src/pages/DiseasePage/Profile.jsx index 8453a920d..7d2566719 100644 --- a/apps/platform/src/pages/DiseasePage/Profile.jsx +++ b/apps/platform/src/pages/DiseasePage/Profile.jsx @@ -47,8 +47,8 @@ const DISEASE_PROFILE_QUERY = gql` ...DiseaseProfileHeaderFragment ...DiseaseProfileSummaryFragment } - gwasStudy(diseaseIds: [$efoId], page: { size: 1, index: 0}) { - studyId + studies(diseaseIds: [$efoId], page: { size: 1, index: 0}) { + count } } ${ProfileHeader.fragments.profileHeader} diff --git a/packages/sections/src/disease/GWASStudies/Body.tsx b/packages/sections/src/disease/GWASStudies/Body.tsx index 269fd3997..613e2a55e 100644 --- a/packages/sections/src/disease/GWASStudies/Body.tsx +++ b/packages/sections/src/disease/GWASStudies/Body.tsx @@ -1,18 +1,26 @@ -import { useQuery } from "@apollo/client"; import { Box, Typography } from "@mui/material"; -import { Link, SectionItem, Tooltip, PublicationsDrawer, OtTable } from "ui"; +import { + Link, + SectionItem, + Tooltip, + PublicationsDrawer, + OtTable, + useBatchQuery, +} from "ui"; import Description from "./Description"; -import { naLabel, sectionsBaseSizeQuery } from "../../constants"; +import { naLabel, initialResponse, table5HChunkSize } from "../../constants"; 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 { responseType } from "ui/src/types/response"; const columns = [ { - id: "studyId", + id: "id", label: "Study", - renderCell: ({ studyId }) => {studyId}, + renderCell: ({ id }) => {id}, }, { id: "traitFromSource", @@ -31,8 +39,8 @@ const columns = [ getStudyCategory(projectId) === "FINNGEN" ? "2023" : publicationDate - ? publicationDate.slice(0, 4) - : naLabel, + ? publicationDate.slice(0, 4) + : naLabel, exportValue: ({ projectId, publicationDate }) => getStudyCategory(projectId) === "FINNGEN" ? "2023" : publicationDate?.slice(0, 4), }, @@ -86,8 +94,8 @@ const columns = [ getStudyCategory(projectId) === "FINNGEN" ? "FinnGen" : cohorts?.length - ? cohorts.join(", ") - : null, + ? cohorts.join(", ") + : null, }, { id: "pubmedId", @@ -111,24 +119,40 @@ type BodyProps = { function Body({ id: efoId, label: diseaseName }: BodyProps) { const variables = { diseaseIds: [efoId], - size: sectionsBaseSizeQuery, }; - const request = useQuery(GWAS_STUDIES_BODY_QUERY, { - variables, + const [request, setRequest] = useState(initialResponse); + + const getData = useBatchQuery({ + query: GWAS_STUDIES_BODY_QUERY, + variables: { + diseaseIds: variables.diseaseIds, + size: table5HChunkSize, + index: 0, + }, + dataPath: "data.studies", + size: table5HChunkSize, }); + useEffect(() => { + getData().then(r => { + setRequest(r); + }); + }, []); + return ( } renderBody={() => ( ( - data?.gwasStudy?.length > 0 || // summary - data?.length > 0 // section - argument is data.gwasStudy + data?.studies?.count > 0 || // summary + data?.count > 0 // section ), };