[Platform]: Fix sections gql playground (#613)

packages/sections/src/credibleSet/GWASColoc/Body.tsx

@@ -14,7 +14,7 @@ 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";
+import { ReactElement, useEffect, useState } from "react";
 
 const columns = [
   {
@@ -131,12 +131,11 @@ const columns = [
       let category = "Inconclusive";
       if (betaRatioSignAverage <= -0.99) category = "Opposite";
       else if (betaRatioSignAverage >= 0.99) category = "Same";
-      const displayValue = Math.abs(betaRatioSignAverage) === 1
-        ? betaRatioSignAverage
-        : betaRatioSignAverage.toFixed(2)
-      return <Tooltip title={`Beta ratio sign average: ${displayValue}`}>
-        {category}
-      </Tooltip>
+      const displayValue =
+        Math.abs(betaRatioSignAverage) === 1
+          ? betaRatioSignAverage
+          : betaRatioSignAverage.toFixed(2);
+      return <Tooltip title={`Beta ratio sign average: ${displayValue}`}>{category}</Tooltip>;
     },
     filterValue: ({ betaRatioSignAverage }) => {
       if (betaRatioSignAverage == null) return null;
@@ -201,20 +200,18 @@ type BodyProps = {
   entity: string;
 };
 
-function Body({ studyLocusId, entity }: BodyProps) {
+function Body({ studyLocusId, entity }: BodyProps): ReactElement {
   const variables = {
     studyLocusId: studyLocusId,
+    size: table5HChunkSize,
+    index: 0,
   };
 
   const [request, setRequest] = useState<responseType>(initialResponse);
 
   const getData = useBatchQuery({
     query: GWAS_COLOC_QUERY,
-    variables: {
-      studyLocusId,
-      size: table5HChunkSize,
-      index: 0,
-    },
+    variables,
     dataPath: "data.credibleSet.colocalisation",
     size: table5HChunkSize,
   });

packages/sections/src/credibleSet/Variants/Body.tsx

@@ -133,7 +133,8 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
       label: "Posterior Probability",
       filterValue: false,
       numeric: true,
-      tooltip: "Posterior inclusion probability that this variant is causal within the fine-mapped credible set",
+      tooltip:
+        "Posterior inclusion probability that this variant is causal within the fine-mapped credible set",
       comparator: (rowA, rowB) => rowA?.posteriorProbability - rowB?.posteriorProbability,
       sortable: true,
       renderCell: ({ posteriorProbability }) => {
@@ -145,7 +146,8 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
       id: "logBF",
       label: "log(BF)",
       numeric: true,
-      tooltip: "Natural logarithm of the Bayes Factor indicating relative likelihood of the variant being causal",
+      tooltip:
+        "Natural logarithm of the Bayes Factor indicating relative likelihood of the variant being causal",
       filterValue: false,
       sortable: true,
       renderCell: ({ logBF }) => {
@@ -159,7 +161,7 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
       tooltip: "Most severe consequence of the variant. Source: Ensembl VEP",
 
       renderCell: ({ variant }) => {
-        const mostSevereConsequence = variant?.mostSevereConsequence
+        const mostSevereConsequence = variant?.mostSevereConsequence;
         if (!mostSevereConsequence) return naLabel;
         const displayElement = (
           <Link external to={identifiersOrgLink("SO", mostSevereConsequence.id.slice(3))}>
@@ -169,7 +171,7 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
         return displayElement;
       },
       exportValue: ({ variant }) => {
-        return variant?.mostSevereConsequence.label
+        return variant?.mostSevereConsequence.label;
       },
     },
   ];
@@ -192,17 +194,15 @@ function Body({
 }: BodyProps) {
   const variables = {
     studyLocusId: studyLocusId,
+    size: table5HChunkSize,
+    index: 0,
   };
 
   const [request, setRequest] = useState<responseType>(initialResponse);
 
   const getData = useBatchQuery({
     query: VARIANTS_QUERY,
-    variables: {
-      studyLocusId,
-      size: table5HChunkSize,
-      index: 0,
-    },
+    variables,
     dataPath: "data.credibleSet.locus",
     size: table5HChunkSize,
   });

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

@@ -14,9 +14,13 @@ import { naLabel, credsetConfidenceMap, initialResponse, table5HChunkSize } from
 import { definition } from ".";
 import Description from "./Description";
 import GWAS_CREDIBLE_SETS_QUERY from "./GWASCredibleSetsQuery.gql";
-import { mantissaExponentComparator, nullishComparator, variantComparator } from "../../utils/comparators";
+import {
+  mantissaExponentComparator,
+  nullishComparator,
+  variantComparator,
+} from "../../utils/comparators";
 import ManhattanPlot from "./ManhattanPlot";
-import { useEffect, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { responseType } from "ui/src/types/response";
 
 const columns = [
@@ -120,7 +124,7 @@ const columns = [
     comparator: nullishComparator(
       (a, b) => a - b,
       row => row?.l2GPredictions?.rows[0]?.score,
-      false,
+      false
     ),
     sortable: true,
     tooltip:
@@ -144,9 +148,7 @@ const columns = [
     numeric: true,
     filterValue: false,
     renderCell: ({ locus }) => {
-      return typeof locus?.count === "number"
-        ? locus.count.toLocaleString()
-        : naLabel;
+      return typeof locus?.count === "number" ? locus.count.toLocaleString() : naLabel;
     },
     exportValue: ({ locus }) => locus?.count,
   },
@@ -157,20 +159,18 @@ type BodyProps = {
   entity: string;
 };
 
-function Body({ id, entity }: BodyProps) {
+function Body({ id, entity }: BodyProps): ReactElement {
   const variables = {
     studyId: id,
+    size: table5HChunkSize,
+    index: 0,
   };
 
   const [request, setRequest] = useState<responseType>(initialResponse);
 
   const getData = useBatchQuery({
     query: GWAS_CREDIBLE_SETS_QUERY,
-    variables: {
-      studyId: id,
-      size: table5HChunkSize,
-      index: 0,
-    },
+    variables,
     dataPath: "data.study.credibleSets",
     size: table5HChunkSize,
   });

packages/sections/src/study/SharedTraitStudies/Body.tsx

@@ -1,13 +1,6 @@
-import { Fragment } from "react";
+import { Fragment, ReactElement } from "react";
 import { Box, Typography } from "@mui/material";
-import {
-  Link,
-  SectionItem,
-  Tooltip,
-  PublicationsDrawer,
-  OtTable,
-  useBatchQuery,
-} from "ui";
+import { Link, SectionItem, Tooltip, PublicationsDrawer, OtTable, useBatchQuery } from "ui";
 import { definition } from ".";
 import Description from "./Description";
 import { naLabel, initialResponse, table5HChunkSize } from "../../constants";
@@ -56,7 +49,7 @@ function getColumns(diseaseIds: string[]) {
       label: "Sample size",
       numeric: true,
       renderCell: ({ nSamples }) => {
-        return typeof nSamples === "number" ? nSamples.toLocaleString() : naLabel
+        return typeof nSamples === "number" ? nSamples.toLocaleString() : naLabel;
       },
       comparator: (a, b) => a?.nSamples - b?.nSamples,
       sortable: true,
@@ -97,47 +90,47 @@ function getColumns(diseaseIds: string[]) {
         getStudyCategory(projectId) === "FINNGEN"
           ? "FinnGen"
           : cohorts?.length
-            ? cohorts.join(", ")
-            : null,
+          ? cohorts.join(", ")
+          : null,
     },
     {
       id: "publication",
       label: "Publication",
       renderCell: ({ publicationFirstAuthor, publicationDate, pubmedId }) => {
         if (!publicationFirstAuthor) return naLabel;
-        return <PublicationsDrawer
-          entries={[{ name: pubmedId, url: epmcUrl(pubmedId) }]}
-          customLabel={`${publicationFirstAuthor} et al. (${new Date(publicationDate).getFullYear()})`}
-        />
+        return (
+          <PublicationsDrawer
+            entries={[{ name: pubmedId, url: epmcUrl(pubmedId) }]}
+            customLabel={`${publicationFirstAuthor} et al. (${new Date(
+              publicationDate
+            ).getFullYear()})`}
+          />
+        );
       },
       filterValue: ({ publicationYear, publicationFirstAuthor }) =>
         `${publicationYear} ${publicationFirstAuthor}`,
-      exportValue: ({ pubmedId }) =>
-        `${pubmedId}`,
+      exportValue: ({ pubmedId }) => `${pubmedId}`,
     },
   ];
 }
 
 type BodyProps = {
   studyId: string;
   diseaseIds: string[];
-  entity: string;
 };
 
-export function Body({ studyId, diseaseIds, entity }: BodyProps) {
+export function Body({ studyId, diseaseIds }: BodyProps): ReactElement {
   const variables = {
     diseaseIds: diseaseIds,
+    size: table5HChunkSize,
+    index: 0,
   };
 
   const [request, setRequest] = useState<responseType>(initialResponse);
 
   const getData = useBatchQuery({
     query: SHARED_TRAIT_STUDIES_QUERY,
-    variables: {
-      diseaseIds,
-      size: table5HChunkSize,
-      index: 0,
-    },
+    variables,
     dataPath: "data.studies",
     size: table5HChunkSize,
   });