From c859339fef583ad25b97229415c63a35bd055c55 Mon Sep 17 00:00:00 2001
From: David Ochoa <dogcaesar@gmail.com>
Date: Fri, 22 Nov 2024 23:27:44 +0000
Subject: [PATCH] [Platform]: consistent navigate button (#553)

---
 .../src/credibleSet/GWASColoc/Body.tsx        | 16 ++++++++----
 .../src/credibleSet/GWASMolQTL/Body.tsx       | 26 ++++++++-----------
 .../src/study/GWASCredibleSets/Body.tsx       | 15 ++++++++---
 .../src/study/QTLCredibleSets/Body.tsx        | 15 ++++++++---
 .../src/variant/QTLCredibleSets/Body.tsx      |  8 +++++-
 5 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/packages/sections/src/credibleSet/GWASColoc/Body.tsx b/packages/sections/src/credibleSet/GWASColoc/Body.tsx
index e136e5e83..36f4a73d6 100644
--- 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
index fe1304950..701f98d5f 100644
--- 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
index 8f65cde4d..d620f0c4e 100644
--- 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
index a00e7a7a0..b0b05ad55 100644
--- 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
index f39926a8b..03b68ec36 100644
--- 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>
       ),
     },
     {