[Platform]: Update variant page to use new API

apps/platform/.env

@@ -1,4 +1,5 @@
-VITE_API_URL=https://dev.opentargets.xyz/api/v4/graphql
+# VITE_API_URL=https://dev.opentargets.xyz/api/v4/graphql
+VITE_API_URL=https://ng.opentargets.org:8080/latest/graphql
 VITE_AI_API_URL=https://dev-ai-api-w37vlfsidq-ew.a.run.app
 VITE_PROFILE=platform
 VITE_PATHWAYS_API_URL=

apps/platform/src/pages/VariantPage/Profile.tsx

@@ -17,10 +17,10 @@ import ProfileHeader from "./ProfileHeader";
 const variantProfileWidgets = new Map<string, Widget>([
   [Variant.VariantEffect.definition.id, Variant.VariantEffect],
   [Variant.MolecularStructure.definition.id, Variant.MolecularStructure],
-  [Variant.VariantGenomicRegion.definition.id, Variant.VariantGenomicRegion],
+  // [Variant.VariantGenomicRegion.definition.id, Variant.VariantGenomicRegion],
   [Variant.VariantEffectPredictor.definition.id, Variant.VariantEffectPredictor],
-  [Variant.EVA.definition.id, Variant.EVA],
-  [Variant.UniProtVariants.definition.id, Variant.UniProtVariants],
+  // [Variant.EVA.definition.id, Variant.EVA],
+  // [Variant.UniProtVariants.definition.id, Variant.UniProtVariants],
   [Variant.GWASCredibleSets.definition.id, Variant.GWASCredibleSets],
   [Variant.QTLCredibleSets.definition.id, Variant.QTLCredibleSets],
   [Variant.EnhancerToGenePredictions.definition.id, Variant.EnhancerToGenePredictions],
@@ -41,7 +41,6 @@ const VARIANT_PROFILE_SUMMARY_FRAGMENT = summaryUtils.createSummaryFragment(
 const VARIANT_PROFILE_QUERY = gql`
   query VariantProfileQuery($variantId: String!) {
     variant(variantId: $variantId) {
-      id
       ...VariantProfileHeaderFragment
       ...VariantProfileSummaryFragment
     }

apps/platform/src/pages/VariantPage/VariantPage.gql

@@ -1,6 +1,5 @@
 query VariantPageQuery($variantId: String!) {
   variant(variantId: $variantId) {
-    id
     dbXrefs {
       id
       source

packages/sections/src/variant/EnhancerToGenePredictions/Body.tsx

@@ -1,5 +1,5 @@
-import { useQuery } from "@apollo/client";
-import { Link, SectionItem, OtTable, Tooltip } from "ui";
+import { useState } from "react";
+import { Link, SectionItem, OtTableOffsetPagination, Tooltip } from "ui";
 import { naLabel } from "@ot/constants";
 import { definition } from ".";
 
@@ -243,13 +243,8 @@ type BodyProps = {
 };
 
 function Body({ id, entity }: BodyProps) {
-  const variables = {
-    variantId: id,
-  };
-
-  const request = useQuery(ENHANCER_TO_GENE_PREDICTIONS_QUERY, {
-    variables,
-  });
+  const variables = { variantId: id };
+  const [request, setRequest] = useState<any>({ loading: true, data: null, error: null });
 
   return (
     <SectionItem
@@ -264,23 +259,15 @@ function Body({ id, entity }: BodyProps) {
         />
       )}
       renderBody={() => (
-        <OtTable
+        <OtTableOffsetPagination
           dataDownloader
           dataDownloaderFileStem={`${id}-enhancer-to-gene-predictions`}
-          showGlobalFilter
+          entity="variant"
+          sectionName="enhancerToGene"
+          setInitialRequestData={setRequest}
           columns={columns}
-          loading={request.loading}
-          rows={request.data?.variant?.enhancerToGenes?.rows || []}
-          query={ENHANCER_TO_GENE_PREDICTIONS_QUERY.loc?.source?.body}
+          query={ENHANCER_TO_GENE_PREDICTIONS_QUERY}
           variables={variables}
-          tableDataLoading={request.loading}
-          verticalHeaders={false}
-          order="desc"
-          sortBy="score"
-          defaultSortObj={{ id: "score", desc: true }}
-          showColumnVisibilityControl={true}
-          showPagination={true}
-          pageSize={10}
         />
       )}
     />

packages/sections/src/variant/EnhancerToGenePredictions/EnhancerToGenePredictionsQuery.gql

@@ -1,10 +1,8 @@
-query EnhancerToGenePredictionsQuery($variantId: String!) {
+query EnhancerToGenePredictionsQuery($variantId: String!, $page: Page) {
   variant(variantId: $variantId) {
-    id
-    rsIds
     referenceAllele
     alternateAllele
-    enhancerToGenes(page: { size: 3000, index: 0 }) {
+    enhancerToGene(page: $page) {
       count
       rows {
         chromosome

packages/sections/src/variant/EnhancerToGenePredictions/EnhancerToGenePredictionsSummaryFragment.gql

@@ -1,5 +1,5 @@
 fragment VariantEnhancerToGenePredictionsSummaryFragment on Variant {
-  enhancerToGenes {
+  enhancerToGene {
     count
   }
-} 
+}

packages/sections/src/variant/EnhancerToGenePredictions/index.ts

@@ -6,11 +6,11 @@ export const definition = {
   name: "Enhancer-to-gene predictions",
   shortName: "EG",
   hasData: (data: Variant) => {
-    return (data.enhancerToGenes?.count || 0) > 0;
+    return (data.enhancerToGene?.count || 0) > 0;
   },
 };
 
 // Components
 export { default as Summary } from "./Summary";
 
-export const getBodyComponent = () => lazy(() => import("./Body"));
+export const getBodyComponent = () => lazy(() => import("./Body"));

packages/sections/src/variant/GWASCredibleSets/Body.tsx

@@ -3,22 +3,24 @@ import {
   SectionItem,
   ScientificNotation,
   DisplayVariantId,
-  OtTable,
+  OtTableOffsetPagination,
   Tooltip,
   ClinvarStars,
   L2GScoreIndicator,
-  useBatchQuery,
   Navigate,
   Box,
   Chip,
 } from "ui";
 import { definition } from ".";
 import Description from "./Description";
-import GWAS_CREDIBLE_SETS_QUERY from "./GWASCredibleSetsQuery.gql";
+import GWAS_CREDIBLE_SETS_TABLE_QUERY from "./GWASCredibleSetsTableQuery.gql";
 import { Fragment } from "react/jsx-runtime";
 import { mantissaExponentComparator, variantComparator, nullishComparator } from "@ot/utils";
 import PheWasPlot from "./PheWasPlot";
-import { credsetConfidenceMap, naLabel, table5HChunkSize } from "@ot/constants";
+import { credsetConfidenceMap, naLabel } from "@ot/constants";
+import { useState } from "react";
+import GWAS_CREDIBLE_SETS_PLOT_QUERY from "./GWASCredibleSetsPlotQuery.gql";
+import { useQuery } from "@apollo/client";
 
 type getColumnsType = {
   id: string;
@@ -45,7 +47,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
         `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`,
       renderCell: ({ variant }) => {
         if (!variant) return naLabel;
-        const { id: variantId, referenceAllele, alternateAllele } = variant;
+        const { variantId, referenceAllele, alternateAllele } = variant;
         const displayElement = (
           <DisplayVariantId
             variantId={variantId}
@@ -68,7 +70,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
           </Link>
         );
       },
-      exportValue: ({ variant }) => variant?.id,
+      exportValue: ({ variant }) => variant?.variantId,
     },
     {
       id: "trait",
@@ -281,52 +283,25 @@ type BodyProps = {
 };
 
 function Body({ id, entity }: BodyProps) {
-  const variables = {
-    variantId: id,
-    size: table5HChunkSize,
-    index: 0,
-  };
-
-  const request = useBatchQuery({
-    id,
-    query: GWAS_CREDIBLE_SETS_QUERY,
-    variables,
-    dataPath: "variant.gwasCredibleSets",
-    size: table5HChunkSize,
-  });
+  const variables = { variantId: id };
+  const [request, setRequest] = useState<any>({ loading: true, data: null, error: null });
 
   return (
     <SectionItem
       definition={definition}
       entity={entity}
       request={request}
-      showContentLoading
-      loadingMessage="Loading data. This may take some time..."
       renderDescription={() => (
         <Description
-          variantId={request.data?.variant.id}
+          variantId={id}
           referenceAllele={request.data?.variant.referenceAllele}
           alternateAllele={request.data?.variant.alternateAllele}
         />
       )}
       renderChart={() => {
-        const columns = getColumns({
-          id,
-          referenceAllele: request.data?.variant.referenceAllele,
-          alternateAllele: request.data?.variant.alternateAllele,
-        });
         return (
           <Box mb={1} ml={2}>
-            <PheWasPlot
-              columns={columns}
-              query={GWAS_CREDIBLE_SETS_QUERY.loc.source.body}
-              variables={variables}
-              loading={request.loading}
-              data={request.data?.variant.gwasCredibleSets.rows}
-              pageId={id}
-              pageReferenceAllele={request.data?.variant.referenceAllele}
-              pageAlternateAllele={request.data?.variant.alternateAllele}
-            />
+            <Plot variantId={id} />
           </Box>
         );
       }}
@@ -337,24 +312,36 @@ function Body({ id, entity }: BodyProps) {
           alternateAllele: request.data?.variant.alternateAllele,
         });
         return (
-          <>
-            <OtTable
-              dataDownloader
-              dataDownloaderFileStem={`${id}-gwas-credible-sets-variant`}
-              showGlobalFilter
-              sortBy="l2gScore"
-              order="desc"
-              columns={columns}
-              rows={request.data?.variant.gwasCredibleSets.rows}
-              loading={request.loading}
-              query={GWAS_CREDIBLE_SETS_QUERY.loc.source.body}
-              variables={variables}
-            />
-          </>
+          <OtTableOffsetPagination
+            dataDownloader
+            dataDownloaderFileStem={`${id}-gwas-credible-sets-variant`}
+            entity="variant"
+            sectionName="gwasCredibleSets"
+            setInitialRequestData={setRequest}
+            columns={columns}
+            query={GWAS_CREDIBLE_SETS_TABLE_QUERY}
+            variables={variables}
+          />
         );
       }}
     />
   );
 }
 
+function Plot({ variantId }: { variantId: string }) {
+  const { data, loading } = useQuery(GWAS_CREDIBLE_SETS_PLOT_QUERY, {
+    variables: { variantId },
+  });
+
+  return (
+    <PheWasPlot
+      loading={loading}
+      data={data?.variant?.gwasCredibleSets?.rows}
+      pageId={variantId}
+      pageReferenceAllele={data?.variant?.referenceAllele}
+      pageAlternateAllele={data?.variant?.alternateAllele}
+    />
+  );
+}
+
 export default Body;

packages/sections/src/variant/GWASCredibleSets/GWASCredibleSetsPlotQuery.gql

@@ -0,0 +1,25 @@
+query GWASCredibleSetsPlotQuery($variantId: String!) {
+  variant(variantId: $variantId) {
+    referenceAllele
+    alternateAllele
+    gwasCredibleSets: credibleSets(
+      filter: { studyTypes: [gwas] }
+      page: { index: 0, size: 50000 }
+    ) {
+      rows {
+        studyLocusId
+        pValueMantissa
+        pValueExponent
+        beta
+        variant {
+          variantId
+        }
+        study {
+          diseases {
+            therapeuticAreas
+          }
+        }
+      }
+    }
+  }
+}

packages/sections/src/variant/GWASCredibleSets/GWASCredibleSetsSummaryFragment.gql

@@ -1,5 +1,5 @@
 fragment VariantGWASCredibleSetsSummaryFragment on Variant {
-  gwasCredibleSets: credibleSets(studyTypes: [gwas], page: { size: 1, index: 0 }) {
+  gwasCredibleSets: credibleSets(filter: { studyTypes: [gwas] }, page: { size: 1, index: 0 }) {
     count
   }
 }

packages/sections/src/variant/GWASCredibleSets/GWASCredibleSetsQuery.gql → packages/sections/src/variant/GWASCredibleSets/GWASCredibleSetsTableQuery.gql

@@ -1,9 +1,8 @@
-query GWASCredibleSetsQuery($variantId: String!, $size: Int!, $index: Int!) {
+query GWASCredibleSetsTableQuery($variantId: String!, $page: Page) {
   variant(variantId: $variantId) {
-    id
     referenceAllele
     alternateAllele
-    gwasCredibleSets: credibleSets(studyTypes: [gwas], page: { size: $size, index: $index }) {
+    gwasCredibleSets: credibleSets(filter: { studyTypes: [gwas] }, page: $page) {
       count
       rows {
         studyLocusId
@@ -13,7 +12,7 @@ query GWASCredibleSetsQuery($variantId: String!, $size: Int!, $index: Int!) {
         finemappingMethod
         confidence
         variant {
-          id
+          variantId
           chromosome
           position
           referenceAllele
@@ -25,13 +24,9 @@ query GWASCredibleSetsQuery($variantId: String!, $size: Int!, $index: Int!) {
           diseases {
             name
             id
-            therapeuticAreas {
-              name
-              id
-            }
           }
         }
-        locus(variantIds: [$variantId]) {
+        locus(filter: { variantIds: [$variantId] }) {
           rows {
             posteriorProbability
           }