[Platform]: consistent navigate button (#553)

opentargets · Nov 22, 2024 · c859339 · c859339
1 parent 6365dac
commit c859339
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 29 deletions.
diff --git a/packages/sections/src/credibleSet/GWASColoc/Body.tsx b/packages/sections/src/credibleSet/GWASColoc/Body.tsx
@@ -6,15 +6,21 @@ import Description from "./Description";
 import GWAS_COLOC_QUERY from "./GWASColocQuery.gql";
 import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
 import { getStudyCategory } from "../../utils/getStudyCategory";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
+import { Box } from "@mui/material";
 
 const columns = [
   {
-    id: "view",
+    id: "otherStudyLocus.studyLocusId",
     label: "Navigate",
-    renderCell: ({ otherStudyLocus }) => {
-      if (!otherStudyLocus) return naLabel;
-      return <Link to={`./${otherStudyLocus.studyLocusId}`}>view</Link>;
-    },
+    renderCell: ({ otherStudyLocus }) => (
+      <Box sx={{ display: "flex" }}>
+        <Link to={`./${otherStudyLocus.studyLocusId}`}>
+          <FontAwesomeIcon icon={faArrowRightToBracket} />
+        </Link>
+      </Box>
+    ),
     filterValue: false,
     exportValue: false,
   },

diff --git a/packages/sections/src/credibleSet/GWASMolQTL/Body.tsx b/packages/sections/src/credibleSet/GWASMolQTL/Body.tsx
@@ -6,26 +6,22 @@ import Description from "./Description";
 import GWAS_COLOC_QUERY from "./GWASMolQTLColocQuery.gql";
 import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
 import { getStudyCategory } from "../../utils/getStudyCategory";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
+import { Box } from "@mui/material";
 
 const columns = [
   {
-    id: "view",
+    id: "otherStudyLocus.studyLocusId",
     label: "Navigate",
-    renderCell: ({ otherStudyLocus }) => {
-      if (!otherStudyLocus) return naLabel;
-      return <Link to={`./${otherStudyLocus.studyLocusId}`}>view</Link>;
-    },
+    renderCell: ({ otherStudyLocus }) => (
+      <Box sx={{ display: "flex" }}>
+        <Link to={`./${otherStudyLocus.studyLocusId}`}>
+          <FontAwesomeIcon icon={faArrowRightToBracket} />
+        </Link>
+      </Box>
+    ),
     filterValue: false,
-    exportValue: false,
-  },
-  {
-    id: "otherStudyLocus.study.target",
-    label: "Gene",
-    renderCell: ({ otherStudyLocus }) => {
-      const study = otherStudyLocus?.study;
-      if (!study?.target) return naLabel;
-      return <Link to={`../study/${study.target.id}`}>{study.target.approvedSymbol}</Link>;
-    },
   },
   {
     id: "otherStudyLocus.study.studyId",

diff --git a/packages/sections/src/study/GWASCredibleSets/Body.tsx b/packages/sections/src/study/GWASCredibleSets/Body.tsx
@@ -6,20 +6,27 @@ import {
   DisplayVariantId,
   OtTable,
 } from "ui";
+import { Box } from "@mui/material";
 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 ManhattanPlot from "./ManhattanPlot";
+import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const columns = [
   {
-    id: "view",
+    id: "studyLocusId",
     label: "Navigate",
-    renderCell: ({ studyLocusId }) => <Link to={`../credible-set/${studyLocusId}`}>view</Link>,
-    filterValue: false,
-    exportValue: false,
+    renderCell: ({ studyLocusId }) => (
+      <Box sx={{ display: "flex" }}>
+        <Link to={`/credible-set/${studyLocusId}`}>
+          <FontAwesomeIcon icon={faArrowRightToBracket} />
+        </Link>
+      </Box>
+    ),
   },
   {
     id: "leadVariant",

diff --git a/packages/sections/src/study/QTLCredibleSets/Body.tsx b/packages/sections/src/study/QTLCredibleSets/Body.tsx
@@ -1,18 +1,25 @@
 import { useQuery } from "@apollo/client";
 import { Link, SectionItem, ScientificNotation, DisplayVariantId, OtTable } from "ui";
+import { Box } from "@mui/material";
 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 { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const columns = [
   {
-    id: "view",
+    id: "studyLocusId",
     label: "Navigate",
-    renderCell: ({ studyLocusId }) => <Link to={`../credible-set/${studyLocusId}`}>view</Link>,
-    filterValue: false,
-    exportValue: false,
+    renderCell: ({ studyLocusId }) => (
+      <Box sx={{ display: "flex" }}>
+        <Link to={`/credible-set/${studyLocusId}`}>
+          <FontAwesomeIcon icon={faArrowRightToBracket} />
+        </Link>
+      </Box>
+    ),
   },
   {
     id: "leadVariant",

diff --git a/packages/sections/src/variant/QTLCredibleSets/Body.tsx b/packages/sections/src/variant/QTLCredibleSets/Body.tsx
@@ -15,6 +15,8 @@ import Description from "./Description";
 import QTL_CREDIBLE_SETS_QUERY from "./QTLCredibleSetsQuery.gql";
 import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
 import { ReactNode } from "react";
+import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type getColumnsType = {
   id: string;
@@ -28,7 +30,11 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
       id: "studyLocusId",
       label: "Navigate",
       renderCell: ({ studyLocusId }) => (
-        <Link to={`../credible-set/${studyLocusId}`}>{studyLocusId}</Link>
+        <Box sx={{ display: "flex", justifyContent: "center" }}>
+          <Link to={`/credible-set/${studyLocusId}`}>
+            <FontAwesomeIcon icon={faArrowRightToBracket} />
+          </Link>
+        </Box>
       ),
     },
     {