fix: disease GWASStudiesSection

opentargets · Nov 1, 2024 · 86d8dcd · 86d8dcd
1 parent 1b696e8
commit 86d8dcd
Showing 1 changed file with 59 additions and 74 deletions.
diff --git a/packages/sections/src/disease/GWASStudies/Body.tsx b/packages/sections/src/disease/GWASStudies/Body.tsx
@@ -1,61 +1,48 @@
 import { useQuery } from "@apollo/client";
-import { Box, Typography } from "@mui/material"; 
-import { Link, SectionItem, Tooltip, DataTable, PublicationsDrawer } from "ui";
+import { Box, Typography } from "@mui/material";
+import { Link, SectionItem, Tooltip, PublicationsDrawer, OtTable } from "ui";
 import Description from "./Description";
-import { defaultRowsPerPageOptions, naLabel } from "../../constants";
+import { naLabel } 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 { epmcUrl } from "ui/src/utils/urls";
 
 const columns = [
   {
     id: "studyId",
     label: "Study ID",
-    renderCell: ({ studyId }) => (
-      <Link to={`/study/${studyId}`}>{studyId}</Link>
-    ),
+    renderCell: ({ studyId }) => <Link to={`/study/${studyId}`}>{studyId}</Link>,
   },
   {
-    id: 'traitFromSource',
-    label: 'Trait from source',
+    id: "traitFromSource",
+    label: "Trait from source",
   },
   {
     id: "publicationFirstAuthor",
     label: "Author",
-    renderCell: ({ projectId, publicationFirstAuthor }) => (
-      getStudyCategory(projectId) === "FINNGEN"
-        ? "FinnGen"
-        : publicationFirstAuthor || naLabel
-    ),
+    renderCell: ({ projectId, publicationFirstAuthor }) =>
+      getStudyCategory(projectId) === "FINNGEN" ? "FinnGen" : publicationFirstAuthor || naLabel,
   },
   {
     id: "publicationDate",
     label: "Date",
-    renderCell: ({ projectId, publicationDate }) => (
+    renderCell: ({ projectId, publicationDate }) =>
       getStudyCategory(projectId) === "FINNGEN"
         ? "2023"
         : publicationDate
-          ? publicationDate.slice(0, 4)
-          : naLabel
-    ),
-    exportValue: ({ projectId, publicationDate }) => (
-      getStudyCategory(projectId) === "FINNGEN"
-        ? "2023"
-        : publicationDate?.slice(0, 4)
-    ),
+        ? publicationDate.slice(0, 4)
+        : naLabel,
+    exportValue: ({ projectId, publicationDate }) =>
+      getStudyCategory(projectId) === "FINNGEN" ? "2023" : publicationDate?.slice(0, 4),
   },
   {
     id: "publicationJournal",
     label: "Journal",
-    renderCell: ({ projectId, publicationJournal }) => (
-      getStudyCategory(projectId) === "FINNGEN"
-        ? naLabel
-        : publicationJournal || naLabel
-    ),
-    exportValue: ({ projectId, publicationJournal }) => (
-      getStudyCategory(projectId) === "FINNGEN" ? null : publicationJournal 
-    ),
+    renderCell: ({ projectId, publicationJournal }) =>
+      getStudyCategory(projectId) === "FINNGEN" ? naLabel : publicationJournal || naLabel,
+    exportValue: ({ projectId, publicationJournal }) =>
+      getStudyCategory(projectId) === "FINNGEN" ? null : publicationJournal,
   },
   {
     id: "nSamples",
@@ -71,59 +58,57 @@ const columns = [
       if (getStudyCategory(projectId) === "FINNGEN") displayText = "FinnGen";
       else if (cohorts?.length) displayText = cohorts.join(", ");
       else return naLabel;
-      return ldPopulationStructure?.length
-        ? <Tooltip
-            title={
-              <>
-                <Typography variant="subtitle2" display="block" align="center">
-                  LD populations and relative sample sizes
-                </Typography>
-                {ldPopulationStructure.map(({ ldPopulation, relativeSampleSize }) => (
-                  <Box key={ldPopulation}>
-                    <Typography variant="caption">
-                      {ldPopulation}: {relativeSampleSize}
-                    </Typography>
-                  </Box>
-                ))}
-              </>
-            }
-            showHelpIcon
-          >
-            {displayText}
-          </Tooltip>
-        : displayText;
+      return ldPopulationStructure?.length ? (
+        <Tooltip
+          title={
+            <>
+              <Typography variant="subtitle2" display="block" align="center">
+                LD populations and relative sample sizes
+              </Typography>
+              {ldPopulationStructure.map(({ ldPopulation, relativeSampleSize }) => (
+                <Box key={ldPopulation}>
+                  <Typography variant="caption">
+                    {ldPopulation}: {relativeSampleSize}
+                  </Typography>
+                </Box>
+              ))}
+            </>
+          }
+          showHelpIcon
+        >
+          {displayText}
+        </Tooltip>
+      ) : (
+        displayText
+      );
     },
-    exportValue: ({ projectId, cohorts }) => (
+    exportValue: ({ projectId, cohorts }) =>
       getStudyCategory(projectId) === "FINNGEN"
         ? "FinnGen"
-        : cohorts?.length ? cohorts.join(", ") : null
-    )
+        : cohorts?.length
+        ? cohorts.join(", ")
+        : null,
   },
   {
     id: "pubmedId",
     label: "PubMed ID",
-    renderCell: ({ projectId, pubmedId }) => (
-      getStudyCategory(projectId) === "GWAS" && pubmedId
-        ? <PublicationsDrawer
-            entries={[{ name: pubmedId, url: epmcUrl(pubmedId)}]}
-          /> 
-        : naLabel
-    ),
-    exportValue: ({ projectId, pubmedId }) => (
-      getStudyCategory(projectId) === "GWAS" && pubmedId 
-        ? pubmedId
-        : null
-    ),
+    renderCell: ({ projectId, pubmedId }) =>
+      getStudyCategory(projectId) === "GWAS" && pubmedId ? (
+        <PublicationsDrawer entries={[{ name: pubmedId, url: epmcUrl(pubmedId) }]} />
+      ) : (
+        naLabel
+      ),
+    exportValue: ({ projectId, pubmedId }) =>
+      getStudyCategory(projectId) === "GWAS" && pubmedId ? pubmedId : null,
   },
 ];
 
 type BodyProps = {
-  id: string,
-  label: string,
+  id: string;
+  label: string;
 };
 
 function Body({ id: efoId, label: diseaseName }: BodyProps) {
-
   const variables = {
     diseaseIds: [efoId],
   };
@@ -139,14 +124,14 @@ function Body({ id: efoId, label: diseaseName }: BodyProps) {
       pageEntity="disease"
       request={request}
       renderDescription={() => <Description name={diseaseName} />}
-      renderBody={({ gwasStudy }) => (
-        <DataTable
+      renderBody={() => (
+        <OtTable
           columns={columns}
-          rows={gwasStudy}
+          rows={request.data?.gwasStudy}
           sortBy="nSamples"
           order="desc"
           dataDownloader
-          rowsPerPageOptions={defaultRowsPerPageOptions}
+          loading={request.loading}
           query={GWAS_STUDIES_BODY_QUERY.loc.source.body}
           variables={variables}
         />