[Platform]: variant page section update (#514)

--------- Co-authored-by: Carlos Cruz <[email protected]>
opentargets · Oct 31, 2024 · 75067d3 · 75067d3
1 parent 0ebbb1c
commit 75067d3
Show file tree

Hide file tree

Showing 12 changed files with 632 additions and 737 deletions.
diff --git a/apps/platform/src/pages/CredibleSetPage/CredibleSetPage.tsx b/apps/platform/src/pages/CredibleSetPage/CredibleSetPage.tsx
@@ -1,15 +1,7 @@
-import { Suspense } from "react";
 import { useQuery } from "@apollo/client";
-import {
-  useLocation,
-  useParams,
-  Switch,
-  Route,
-  useRouteMatch,
-  Link,
-} from "react-router-dom";
+import { useLocation, useParams, Switch, Route, useRouteMatch, Link } from "react-router-dom";
 import { Box, Tabs, Tab } from "@mui/material";
-import { BasePage, ScrollToTop, LoadingBackdrop } from "ui";
+import { BasePage, ScrollToTop } from "ui";
 import Header from "./Header";
 import NotFoundPage from "../NotFoundPage";
 import CREDIBLE_SET_PAGE_QUERY from "./CredibleSetPage.gql";
@@ -30,15 +22,14 @@ function CredibleSetPage() {
 
   const credibleSet = data?.credibleSets[0];
   const variantId = credibleSet?.variant?.id;
-  const referenceAllele = credibleSet?.variant?.referenceAllele
-  const alternateAllele = credibleSet?.variant?.alternateAllele
+  const referenceAllele = credibleSet?.variant?.referenceAllele;
+  const alternateAllele = credibleSet?.variant?.alternateAllele;
   const studyId = credibleSet?.study?.studyId;
 
   return (
     <BasePage
-      title={ variantId && studyId
-        ? `Credible set around ${variantId} for ${studyId}`
-        : studyLocusId
+      title={
+        variantId && studyId ? `Credible set around ${variantId} for ${studyId}` : studyLocusId
       }
       description={`Annotation information for credible set ${studyLocusId}`}
       location={location}
@@ -66,18 +57,17 @@ function CredibleSetPage() {
           </Box>
         )}
       />
-      <Suspense fallback={<LoadingBackdrop height={11500} />}>
-        <Switch>
-          <Route exact path={path}>
-            <Profile
-              studyLocusId={studyLocusId}
-              variantId={variantId}
-              referenceAllele={referenceAllele}
-              alternateAllele={alternateAllele}
-            />
-          </Route>
-        </Switch>
-      </Suspense>
+
+      <Switch>
+        <Route exact path={path}>
+          <Profile
+            studyLocusId={studyLocusId}
+            variantId={variantId}
+            referenceAllele={referenceAllele}
+            alternateAllele={alternateAllele}
+          />
+        </Route>
+      </Switch>
     </BasePage>
   );
 }

diff --git a/apps/platform/src/pages/StudyPage/StudyPage.tsx b/apps/platform/src/pages/StudyPage/StudyPage.tsx
@@ -1,7 +1,5 @@
-
-import { Suspense } from "react";
 import { useQuery } from "@apollo/client";
-import { BasePage, ScrollToTop, LoadingBackdrop } from "ui";
+import { BasePage, ScrollToTop } from "ui";
 import { Box, Tabs, Tab } from "@mui/material";
 import {
   useLocation,
@@ -41,7 +39,7 @@ function StudyPage() {
       description={`Annotation information for ${studyId}`}
       location={location}
     >
-      <Header 
+      <Header
         loading={loading}
         studyId={studyId}
         backgroundTraits={studyInfo?.backgroundTraits}
@@ -66,20 +64,15 @@ function StudyPage() {
           </Box>
         )}
       />
-      <Suspense fallback={<LoadingBackdrop height={11500} />}>
-        <Switch>
-          <Route exact path={path}>
-            <Profile
-              studyId={studyId}
-              studyCategory={studyCategory}
-              diseases={studyInfo?.diseases}
-            />
-          </Route>
-          <Route path="*">
-            <Redirect to={`/study/${studyId}`} />
-          </Route>
-        </Switch>
-      </Suspense>
+
+      <Switch>
+        <Route exact path={path}>
+          <Profile studyId={studyId} studyCategory={studyCategory} diseases={studyInfo?.diseases} />
+        </Route>
+        <Route path="*">
+          <Redirect to={`/study/${studyId}`} />
+        </Route>
+      </Switch>
     </BasePage>
   );
 }

diff --git a/apps/platform/src/pages/VariantPage/VariantPage.tsx b/apps/platform/src/pages/VariantPage/VariantPage.tsx
@@ -1,15 +1,7 @@
-import { Suspense } from "react";
 import { useQuery } from "@apollo/client";
-import {
-  useLocation,
-  useParams,
-  Switch,
-  Route,
-  useRouteMatch,
-  Link,
-} from "react-router-dom";
+import { useLocation, useParams, Switch, Route, useRouteMatch, Link } from "react-router-dom";
 import { Box, Tabs, Tab } from "@mui/material";
-import { BasePage, ScrollToTop, LoadingBackdrop } from "ui";
+import { BasePage, ScrollToTop } from "ui";
 import Header from "./Header";
 import NotFoundPage from "../NotFoundPage";
 import VARIANT_PAGE_QUERY from "./VariantPage.gql";
@@ -34,11 +26,7 @@ function VariantPage() {
       description={`Annotation information for ${varId}`}
       location={location}
     >
-      <Header
-        loading={loading}
-        variantId={varId}
-        variantPageData={data?.variant}
-      />
+      <Header loading={loading} variantId={varId} variantPageData={data?.variant} />
       <ScrollToTop />
       <Route
         path="/"
@@ -55,13 +43,12 @@ function VariantPage() {
           </Box>
         )}
       />
-      <Suspense fallback={<LoadingBackdrop height={11500} />}>
-        <Switch>
-          <Route exact path={path}>
-            <Profile varId={varId} />
-          </Route>
-        </Switch>
-      </Suspense>
+
+      <Switch>
+        <Route exact path={path}>
+          <Profile varId={varId} />
+        </Route>
+      </Switch>
     </BasePage>
   );
 }

diff --git a/packages/sections/src/variant/EVA/Body.tsx b/packages/sections/src/variant/EVA/Body.tsx
@@ -1,18 +1,7 @@
 import { useQuery } from "@apollo/client";
-import {
-  Link,
-  Tooltip,
-  SectionItem,
-  PublicationsDrawer,
-  DataTable,
-  ClinvarStars,
-} from "ui";
+import { Link, Tooltip, SectionItem, PublicationsDrawer, ClinvarStars, OtTable } from "ui";
 import { Typography } from "@mui/material";
-import {
-  clinvarStarMap,
-  naLabel,
-  defaultRowsPerPageOptions,
-} from "../../constants";
+import { clinvarStarMap, naLabel } from "../../constants";
 import { definition } from ".";
 
 import Description from "./Description";
@@ -25,15 +14,13 @@ const columns = [
     id: "disease.name",
     label: "Disease/phenotype",
     renderCell: ({ disease, diseaseFromSource, cohortPhenotypes }) => {
-      let displayElement = <Link to={`/disease/${disease.id}`}>
-        {disease.name}
-      </Link>;
+      let displayElement = <Link to={`/disease/${disease.id}`}>{disease.name}</Link>;
       if (diseaseFromSource || cohortPhenotypes?.length > 0) {
-        displayElement = <Tooltip
-          title={
-            <>
-              {
-                diseaseFromSource && 
+        displayElement = (
+          <Tooltip
+            title={
+              <>
+                {diseaseFromSource && (
                   <>
                     <Typography variant="subtitle2" display="block" align="center">
                       Reported disease or phenotype:
@@ -42,9 +29,8 @@ const columns = [
                       {diseaseFromSource}
                     </Typography>
                   </>
-              }
-              {
-                cohortPhenotypes?.length > (diseaseFromSource ? 1 : 0) &&
+                )}
+                {cohortPhenotypes?.length > (diseaseFromSource ? 1 : 0) && (
                   <>
                     <Typography variant="subtitle2" display="block" align="center">
                       All reported phenotypes:
@@ -55,13 +41,14 @@ const columns = [
                       ))}
                     </Typography>
                   </>
-              }
-            </>
-          }
-          showHelpIcon
-        >
-          {displayElement}
-        </Tooltip>;
+                )}
+              </>
+            }
+            showHelpIcon
+          >
+            {displayElement}
+          </Tooltip>
+        );
       }
       return displayElement;
     },
@@ -73,10 +60,12 @@ const columns = [
     label: "ClinVar ID",
     renderCell: ({ studyId }) => {
       if (!studyId) return naLabel;
-      return <Link external to={`https://www.ncbi.nlm.nih.gov/clinvar/${studyId}`}>
-        {studyId}
-      </Link>
-    }
+      return (
+        <Link external to={`https://www.ncbi.nlm.nih.gov/clinvar/${studyId}`}>
+          {studyId}
+        </Link>
+      );
+    },
   },
   {
     id: "clinicalSignificances",
@@ -94,7 +83,7 @@ const columns = [
     },
     filterValue: ({ clinicalSignificances }) => {
       return clinicalSignificances?.join(" ") || "";
-    }
+    },
   },
   {
     id: "allelicRequirements",
@@ -103,7 +92,7 @@ const columns = [
       if (!alleleOrigins || alleleOrigins.length === 0) return naLabel;
       let displayElement = alleleOrigins.map(a => sentenceCase(a)).join("; ");
       if (allelicRequirements) {
-        displayElement = 
+        displayElement = (
           <Tooltip
             title={
               <>
@@ -121,19 +110,22 @@ const columns = [
           >
             {displayElement}
           </Tooltip>
+        );
       }
       return displayElement;
     },
-    filterValue: ({ alleleOrigins }) => (alleleOrigins?.join(" ") || ""),
+    filterValue: ({ alleleOrigins }) => alleleOrigins?.join(" ") || "",
   },
   {
     id: "reviewStatus",
     label: "Review status",
     renderCell: ({ confidence }) => {
       if (!confidence) return naLabel;
-      return <Tooltip title={confidence}>
-        <ClinvarStars num={clinvarStarMap[confidence]} />
-      </Tooltip>;
+      return (
+        <Tooltip title={confidence}>
+          <ClinvarStars num={clinvarStarMap[confidence]} />
+        </Tooltip>
+      );
     },
   },
   {
@@ -151,16 +143,14 @@ const columns = [
           }
           return acc;
         }, []) || [];
-      return (
-        <PublicationsDrawer entries={literatureList} />
-      );
+      return <PublicationsDrawer entries={literatureList} />;
     },
   },
 ];
 
 type BodyProps = {
-  id: string,
-  entity: string,
+  id: string;
+  entity: string;
 };
 
 function Body({ id, entity }: BodyProps) {
@@ -177,27 +167,26 @@ function Body({ id, entity }: BodyProps) {
       definition={definition}
       entity={entity}
       request={request}
-      renderDescription={({ variant }) => (
+      renderDescription={() => (
         <Description
-          variantId={variant.id}
-          referenceAllele={variant.referenceAllele}
-          alternateAllele={variant.alternateAllele}
+          variantId={request.data?.variant.id}
+          referenceAllele={request.data?.variant.referenceAllele}
+          alternateAllele={request.data?.variant.alternateAllele}
         />
       )}
-      renderBody={({ variant }) => (
-        <DataTable
+      renderBody={() => (
+        <OtTable
           dataDownloader
           showGlobalFilter
           columns={columns}
-          rows={variant.evidences.rows}
-          rowsPerPageOptions={defaultRowsPerPageOptions}
+          loading={request.loading}
+          rows={request.data?.variant.evidences.rows}
           query={EVA_QUERY.loc.source.body}
           variables={variables}
         />
       )}
     />
   );
-
 }
 
-export default Body;
+export default Body;