[Platform]: fix study sections (#513)

* fix: SharedTraitStudies * fix: study GWASCredibleSets * fix: study QTLCredibleSetsSection
opentargets · Oct 31, 2024 · 0ebbb1c · 0ebbb1c
1 parent ef7e7e0
commit 0ebbb1c
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 200 deletions.
diff --git a/packages/sections/src/study/GWASCredibleSets/Body.tsx b/packages/sections/src/study/GWASCredibleSets/Body.tsx
@@ -1,27 +1,16 @@
 import { useQuery } from "@apollo/client";
-import {
-  Link,
-  SectionItem,
-  DataTable,
-  ScientificNotation,
-  DisplayVariantId,
-} from "ui";
-import { naLabel, defaultRowsPerPageOptions } from "../../constants";
+import { Link, SectionItem, ScientificNotation, DisplayVariantId, OtTable } from "ui";
+import { naLabel } from "../../constants";
 import { definition } from ".";
 import Description from "./Description";
 import GWAS_CREDIBLE_SETS_QUERY from "./GWASCredibleSetsQuery.gql";
-import {
-  mantissaExponentComparator,
-  variantComparator
-} from "../../utils/comparators";
+import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
 
 const columns = [
   {
     id: "view",
     label: "Details",
-    renderCell: ({ studyLocusId }) => (
-      <Link to={`../credible-set/${studyLocusId}`}>view</Link>
-    ),
+    renderCell: ({ studyLocusId }) => <Link to={`../credible-set/${studyLocusId}`}>view</Link>,
     filterValue: false,
     exportValue: false,
   },
@@ -30,42 +19,42 @@ const columns = [
     label: "Lead variant",
     comparator: variantComparator,
     sortable: true,
-    filterValue: ({ variant: v }) => (
-      `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`
-    ),
+    filterValue: ({ variant: v }) =>
+      `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`,
     renderCell: ({ variant }) => {
       if (!variant) return naLabel;
       const { id: variantId, referenceAllele, alternateAllele } = variant;
-      return <Link to={`/variant/${variantId}`}>
-        <DisplayVariantId
-          variantId={variantId}
-          referenceAllele={referenceAllele}
-          alternateAllele={alternateAllele}
-          expand={false}
-        />
-      </Link>;
+      return (
+        <Link to={`/variant/${variantId}`}>
+          <DisplayVariantId
+            variantId={variantId}
+            referenceAllele={referenceAllele}
+            alternateAllele={alternateAllele}
+            expand={false}
+          />
+        </Link>
+      );
     },
     exportValue: ({ variant }) => variant?.id,
   },
   {
     id: "pValue",
     label: "P-value",
-    comparator: (a, b) => mantissaExponentComparator(
-      a?.pValueMantissa,
-      a?.pValueExponent,
-      b?.pValueMantissa,
-      b?.pValueExponent,
-    ),
+    comparator: (a, b) =>
+      mantissaExponentComparator(
+        a?.pValueMantissa,
+        a?.pValueExponent,
+        b?.pValueMantissa,
+        b?.pValueExponent
+      ),
     sortable: true,
     filterValue: false,
     renderCell: ({ pValueMantissa, pValueExponent }) => {
-      if (typeof pValueMantissa !== "number" ||
-          typeof pValueExponent !== "number") return naLabel;
+      if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return naLabel;
       return <ScientificNotation number={[pValueMantissa, pValueExponent]} />;
     },
     exportValue: ({ pValueMantissa, pValueExponent }) => {
-      if (typeof pValueMantissa !== "number" ||
-          typeof pValueExponent !== "number") return null;
+      if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return null;
       return `${pValueMantissa}x10${pValueExponent}`;
     },
   },
@@ -88,33 +77,25 @@ const columns = [
     id: "topL2G",
     label: "Top L2G",
     tooltip: "Top gene prioritised by our locus-to-gene model",
-    filterValue: ({ strongestLocus2gene }) => (
-      strongestLocus2gene?.target.approvedSymbol
-    ),
+    filterValue: ({ strongestLocus2gene }) => strongestLocus2gene?.target.approvedSymbol,
     renderCell: ({ strongestLocus2gene }) => {
       if (!strongestLocus2gene?.target) return naLabel;
       const { target } = strongestLocus2gene;
-      return <Link to={`/target/${target.id}`}>
-        {target.approvedSymbol}
-      </Link>;
+      return <Link to={`/target/${target.id}`}>{target.approvedSymbol}</Link>;
     },
-    exportValue: ({ strongestLocus2gene }) => (
-      strongestLocus2gene?.target.approvedSymbol
-    ),
+    exportValue: ({ strongestLocus2gene }) => strongestLocus2gene?.target.approvedSymbol,
   },
   {
     id: "l2gScore",
     label: "L2G score",
-    comparator: (rowA, rowB) => (
-      rowA?.strongestLocus2gene?.score - rowB?.strongestLocus2gene?.score
-    ),
+    comparator: (rowA, rowB) => rowA?.strongestLocus2gene?.score - rowB?.strongestLocus2gene?.score,
     sortable: true,
     filterValue: false,
     renderCell: ({ strongestLocus2gene }) => {
       if (typeof strongestLocus2gene?.score !== "number") return naLabel;
       return strongestLocus2gene.score.toFixed(3);
     },
-    exportValue: ({ strongestLocus2gene }) => strongestLocus2gene?.score
+    exportValue: ({ strongestLocus2gene }) => strongestLocus2gene?.score,
   },
   {
     id: "credibleSetSize",
@@ -124,12 +105,12 @@ const columns = [
     filterValue: false,
     renderCell: ({ locus }) => locus?.length ?? naLabel,
     exportValue: ({ locus }) => locus?.length,
-  }
+  },
 ];
 
 type BodyProps = {
-  id: string,
-  entity: string,
+  id: string;
+  entity: string;
 };
 
 function Body({ id, entity }: BodyProps) {
@@ -140,28 +121,27 @@ function Body({ id, entity }: BodyProps) {
   const request = useQuery(GWAS_CREDIBLE_SETS_QUERY, {
     variables,
   });
-  
+
   return (
     <SectionItem
       definition={definition}
       entity={entity}
       request={request}
-      renderDescription={({ gwasStudy }) => <Description studyId={gwasStudy[0].studyId} />}
-      renderBody={({ gwasStudy }) => (
-        <DataTable
+      renderDescription={() => <Description studyId={request.data?.gwasStudy[0].studyId} />}
+      renderBody={() => (
+        <OtTable
           dataDownloader
           showGlobalFilter
           sortBy="pValue"
+          loading={request.loading}
           columns={columns}
-          rows={gwasStudy[0].credibleSets}
-          rowsPerPageOptions={defaultRowsPerPageOptions}
+          rows={request.data?.gwasStudy[0].credibleSets}
           query={GWAS_CREDIBLE_SETS_QUERY.loc.source.body}
           variables={variables}
         />
       )}
     />
   );
-
 }
 
-export default Body;
+export default Body;
diff --git a/packages/sections/src/study/QTLCredibleSets/Body.tsx b/packages/sections/src/study/QTLCredibleSets/Body.tsx
@@ -1,27 +1,16 @@
 import { useQuery } from "@apollo/client";
-import {
-  Link,
-  SectionItem,
-  DataTable,
-  ScientificNotation,
-  DisplayVariantId
-} from "ui";
-import { naLabel, defaultRowsPerPageOptions } from "../../constants";
+import { Link, SectionItem, ScientificNotation, DisplayVariantId, OtTable } from "ui";
+import { naLabel } from "../../constants";
 import { definition } from ".";
 import Description from "./Description";
 import QTL_CREDIBLE_SETS_QUERY from "./QTLCredibleSetsQuery.gql";
-import {
-  mantissaExponentComparator,
-  variantComparator
-} from "../../utils/comparators";
+import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
 
 const columns = [
   {
     id: "view",
     label: "Details",
-    renderCell: ({ studyLocusId }) => (
-      <Link to={`../credible-set/${studyLocusId}`}>view</Link>
-    ),
+    renderCell: ({ studyLocusId }) => <Link to={`../credible-set/${studyLocusId}`}>view</Link>,
     filterValue: false,
     exportValue: false,
   },
@@ -30,42 +19,42 @@ const columns = [
     label: "Lead variant",
     comparator: variantComparator,
     sortable: true,
-    filterValue: ({ variant: v }) => (
-      `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`
-    ),
+    filterValue: ({ variant: v }) =>
+      `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`,
     renderCell: ({ variant }) => {
       if (!variant) return naLabel;
       const { id: variantId, referenceAllele, alternateAllele } = variant;
-      return <Link to={`/variant/${variantId}`}>
-        <DisplayVariantId
-          variantId={variantId}
-          referenceAllele={referenceAllele}
-          alternateAllele={alternateAllele}
-          expand={false}
-        />
-      </Link>;
+      return (
+        <Link to={`/variant/${variantId}`}>
+          <DisplayVariantId
+            variantId={variantId}
+            referenceAllele={referenceAllele}
+            alternateAllele={alternateAllele}
+            expand={false}
+          />
+        </Link>
+      );
     },
     exportValue: ({ variant }) => variant?.id,
   },
   {
     id: "pValue",
     label: "P-value",
-    comparator: (a, b) => mantissaExponentComparator(
-      a?.pValueMantissa,
-      a?.pValueExponent,
-      b?.pValueMantissa,
-      b?.pValueExponent,
-    ),
+    comparator: (a, b) =>
+      mantissaExponentComparator(
+        a?.pValueMantissa,
+        a?.pValueExponent,
+        b?.pValueMantissa,
+        b?.pValueExponent
+      ),
     sortable: true,
     filterValue: false,
     renderCell: ({ pValueMantissa, pValueExponent }) => {
-      if (typeof pValueMantissa !== "number" ||
-          typeof pValueExponent !== "number") return naLabel;
+      if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return naLabel;
       return <ScientificNotation number={[pValueMantissa, pValueExponent]} />;
     },
     exportValue: ({ pValueMantissa, pValueExponent }) => {
-      if (typeof pValueMantissa !== "number" ||
-          typeof pValueExponent !== "number") return null;
+      if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return null;
       return `${pValueMantissa}x10${pValueExponent}`;
     },
   },
@@ -91,12 +80,12 @@ const columns = [
     filterValue: false,
     renderCell: ({ locus }) => locus?.length ?? naLabel,
     exportValue: ({ locus }) => locus?.length,
-  }
+  },
 ];
 
 type BodyProps = {
-  id: string,
-  entity: string,
+  id: string;
+  entity: string;
 };
 
 function Body({ id, entity }: BodyProps) {
@@ -107,28 +96,27 @@ function Body({ id, entity }: BodyProps) {
   const request = useQuery(QTL_CREDIBLE_SETS_QUERY, {
     variables,
   });
-  
+
   return (
     <SectionItem
       definition={definition}
       entity={entity}
       request={request}
-      renderDescription={({ gwasStudy }) => <Description studyId={gwasStudy[0].studyId} />}
-      renderBody={({ gwasStudy }) => (
-        <DataTable
+      renderDescription={() => <Description studyId={request.data?.gwasStudy[0].studyId} />}
+      renderBody={() => (
+        <OtTable
           dataDownloader
           showGlobalFilter
           sortBy="pValue"
           columns={columns}
-          rows={gwasStudy[0].credibleSets}
-          rowsPerPageOptions={defaultRowsPerPageOptions}
+          loading={request.loading}
+          rows={request.data?.gwasStudy[0].credibleSets}
           query={QTL_CREDIBLE_SETS_QUERY.loc.source.body}
           variables={variables}
         />
       )}
     />
   );
-
 }
 
-export default Body;
+export default Body;