[Platform]: Batch load studies and use updated study api on disease p…

…age (#573)
opentargets · Nov 28, 2024 · 71e37dc · 71e37dc
1 parent 2ba5ca7
commit 71e37dc
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 32 deletions.
diff --git 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
@@ -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 }) => <Link to={`/study/${studyId}`}>{studyId}</Link>,
+    renderCell: ({ id }) => <Link to={`/study/${id}`}>{id}</Link>,
   },
   {
     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<responseType>(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 (
     <SectionItem
       definition={definition}
-      entity="gwasStudy"
+      entity="studies"
       pageEntity="disease"
+      showContentLoading
+      loadingMessage="Loading data. This may take some time..."
       request={request}
       renderDescription={() => <Description name={diseaseName} />}
       renderBody={() => (
         <OtTable
           columns={columns}
-          rows={request.data?.gwasStudy}
+          rows={request.data?.studies.rows}
           sortBy="nSamples"
           order="desc"
           dataDownloader

diff --git a/packages/sections/src/disease/GWASStudies/GWASStudiesQuery.gql b/packages/sections/src/disease/GWASStudies/GWASStudiesQuery.gql
@@ -1,17 +1,20 @@
-query GWASStudiesQuery($diseaseIds: [String!]!, $size: Int!) {
-  gwasStudy(diseaseIds: $diseaseIds, page: { size: $size, index: 0 }) {
-    studyId
-    projectId
-    traitFromSource
-    publicationFirstAuthor
-    publicationDate
-    publicationJournal
-    nSamples
-    cohorts
-    pubmedId
-    ldPopulationStructure {
-      ldPopulation
-      relativeSampleSize
+query GWASStudiesQuery($diseaseIds: [String!]!, $size: Int!, $index: Int!) {
+  studies(diseaseIds: $diseaseIds, page: { size: $size, index: $index }) {
+    count
+    rows {
+      id
+      projectId
+      traitFromSource
+      publicationFirstAuthor
+      publicationDate
+      publicationJournal
+      nSamples
+      cohorts
+      pubmedId
+      ldPopulationStructure {
+        ldPopulation
+        relativeSampleSize
+      }
     }
   }
 }
diff --git a/packages/sections/src/disease/GWASStudies/index.ts b/packages/sections/src/disease/GWASStudies/index.ts
@@ -3,7 +3,7 @@ export const definition = {
   name: "GWAS Studies",
   shortName: "GS",
   hasData: data => (
-    data?.gwasStudy?.length > 0 ||  // summary
-    data?.length > 0                // section - argument is data.gwasStudy
+    data?.studies?.count > 0 ||  // summary
+    data?.count > 0              // section
   ),
 };