[Platform]: Use new Navigate component

packages/sections/src/credibleSet/GWASColoc/Body.tsx

@@ -6,28 +6,22 @@ import {
   ScientificNotation,
   OtTable,
   Tooltip,
+  Navigate,
 } from "ui";
 import { naLabel } from "../../constants";
 import { definition } from ".";
 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: "otherStudyLocus.studyLocusId",
     label: "Navigate",
     renderCell: ({ otherStudyLocus }) => {
       if (!otherStudyLocus?.variant) return naLabel;
-      return (<Box sx={{ display: "flex" }}>
-        <Link to={`./${otherStudyLocus.studyLocusId}`}>
-          <FontAwesomeIcon icon={faArrowRightToBracket} />
-        </Link>
-      </Box>)
+      return <Navigate to={`./${otherStudyLocus.studyLocusId}`} />;
     },
   },
   {

packages/sections/src/credibleSet/GWASMolQTL/Body.tsx

@@ -6,28 +6,22 @@ import {
   ScientificNotation,
   OtTable,
   Tooltip,
+  Navigate,
 } from "ui";
 import { naLabel } from "../../constants";
 import { definition } from ".";
 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: "otherStudyLocus.studyLocusId",
     label: "Navigate",
     renderCell: ({ otherStudyLocus }) => {
       if (!otherStudyLocus?.variant) return naLabel;
-      return (<Box sx={{ display: "flex" }}>
-        <Link to={`./${otherStudyLocus.studyLocusId}`}>
-          <FontAwesomeIcon icon={faArrowRightToBracket} />
-        </Link>
-      </Box>)
+      return <Navigate to={`./${otherStudyLocus.studyLocusId}`} />;
     },
   },
   {

packages/sections/src/evidence/GWASCredibleSets/Body.jsx

@@ -1,5 +1,4 @@
 import { useQuery } from "@apollo/client";
-// import { Tooltip } from "@mui/material";
 import {
   SectionItem,
   Link,
@@ -9,6 +8,7 @@ import {
   ClinvarStars,
   OtScoreLinearBar,
   Tooltip,
+  Navigate,
 } from "ui";
 
 import { naLabel, sectionsBaseSizeQuery, credsetConfidenceMap } from "../../constants";
@@ -17,31 +17,22 @@ import Description from "./Description";
 import { dataTypesMap } from "../../dataTypes";
 import GWAS_CREDIBLE_SETS_QUERY from "./sectionQuery.gql";
 import { mantissaExponentComparator } from "../../utils/comparators";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
-import { Box } from "@mui/material";
 
 function getColumns() {
   return [
     {
       id: "credibleSet",
       label: "Navigate",
       renderCell: ({ credibleSet }) => {
-        return (
-          <Box sx={{ display: "flex", justifyContent: "center" }}>
-            <Link to={`/credible-set/${credibleSet?.studyLocusId}`}>
-              <FontAwesomeIcon icon={faArrowRightToBracket} />
-            </Link>
-          </Box>
-        );
+        return <Navigate to={`/credible-set/${credibleSet?.studyLocusId}`} />;
       },
     },
     {
       id: "variantId",
       label: "Lead Variant",
       renderCell: ({ credibleSet }) => {
-        const variant = credibleSet.variant;
-        if (variant?.id) return <Link to={`/variant/${variant?.id}`}>{variant?.id}</Link>;
+        const variantId = credibleSet?.variant?.id;
+        if (variantId) return <Link to={`/variant/${variantId}`}>{variantId}</Link>;
         return naLabel;
       },
     },

packages/sections/src/study/GWASCredibleSets/Body.tsx

@@ -8,16 +8,14 @@ import {
   OtScoreLinearBar,
   OtTable,
   useBatchQuery,
+  Navigate,
 } from "ui";
-import { Box } from "@mui/material";
 import { naLabel, credsetConfidenceMap, initialResponse, table5HChunkSize } 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";
 import { useEffect, useState } from "react";
 import { responseType } from "ui/src/types/response";
 
@@ -26,11 +24,7 @@ const columns = [
     id: "studyLocusId",
     label: "Navigate",
     renderCell: ({ studyLocusId }) => (
-      <Box sx={{ display: "flex" }}>
-        <Link to={`/credible-set/${studyLocusId}`}>
-          <FontAwesomeIcon icon={faArrowRightToBracket} />
-        </Link>
-      </Box>
+      <Navigate to={`/credible-set/${studyLocusId}`} />
     ),
   },
   {

packages/sections/src/study/QTLCredibleSets/Body.tsx

@@ -1,25 +1,25 @@
 import { useQuery } from "@apollo/client";
-import { Link, SectionItem, ScientificNotation, DisplayVariantId, OtTable } from "ui";
-import { Box } from "@mui/material";
+import {
+  Link,
+  SectionItem,
+  ScientificNotation,
+  DisplayVariantId,
+  OtTable,
+  Navigate,
+} 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 { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 const columns = [
   {
     id: "studyLocusId",
     label: "Navigate",
     renderCell: ({ studyLocusId }) => (
-      <Box sx={{ display: "flex" }}>
-        <Link to={`/credible-set/${studyLocusId}`}>
-          <FontAwesomeIcon icon={faArrowRightToBracket} />
-        </Link>
-      </Box>
-    ),
+      <Navigate to={`/credible-set/${studyLocusId}`} />
+    )
   },
   {
     id: "leadVariant",

packages/sections/src/variant/GWASCredibleSets/Body.tsx

@@ -8,6 +8,7 @@ import {
   ClinvarStars,
   OtScoreLinearBar,
   useBatchQuery,
+  Navigate,
 } from "ui";
 import { Box, Chip } from "@mui/material";
 import { credsetConfidenceMap, initialResponse, naLabel, table5HChunkSize } from "../../constants";
@@ -17,8 +18,6 @@ import GWAS_CREDIBLE_SETS_QUERY from "./GWASCredibleSetsQuery.gql";
 import { Fragment } from "react/jsx-runtime";
 import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
 import PheWasPlot from "./PheWasPlot";
-import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
 import { responseType } from "ui/src/types/response";
 
@@ -34,11 +33,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
       id: "studyLocusId",
       label: "Navigate",
       renderCell: ({ studyLocusId }) => (
-        <Box sx={{ display: "flex", justifyContent: "center" }}>
-          <Link to={`/credible-set/${studyLocusId}`}>
-            <FontAwesomeIcon icon={faArrowRightToBracket} />
-          </Link>
-        </Box>
+        <Navigate to={`/credible-set/${studyLocusId}`} />
       ),
     },
     {

packages/sections/src/variant/QTLCredibleSets/Body.tsx

@@ -7,6 +7,7 @@ import {
   Tooltip,
   ClinvarStars,
   useBatchQuery,
+  Navigate,
 } from "ui";
 import { Box, Chip } from "@mui/material";
 import { credsetConfidenceMap, initialResponse, naLabel, table5HChunkSize } from "../../constants";
@@ -16,8 +17,6 @@ import QTL_CREDIBLE_SETS_QUERY from "./QTLCredibleSetsQuery.gql";
 import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
 import { ReactNode, useEffect, useState } from "react";
 import { responseType } from "ui/src/types/response";
-import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type getColumnsType = {
   id: string;
@@ -31,11 +30,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
       id: "studyLocusId",
       label: "Navigate",
       renderCell: ({ studyLocusId }) => (
-        <Box sx={{ display: "flex", justifyContent: "center" }}>
-          <Link to={`/credible-set/${studyLocusId}`}>
-            <FontAwesomeIcon icon={faArrowRightToBracket} />
-          </Link>
-        </Box>
+        <Navigate to={`/credible-set/${studyLocusId}`} />
       ),
     },
     {

packages/ui/src/components/Navigate.tsx

@@ -0,0 +1,19 @@
+
+import { Box } from "@mui/material";
+import Link from "./Link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRightToBracket } from "@fortawesome/free-solid-svg-icons";
+
+type NavigateProps = {
+  to: string;
+};
+
+export default function Navigate({ to }: NavigateProps) {
+  return (
+    <Box display="flex" justifyContent="center">
+      <Link to={to}>
+        <FontAwesomeIcon icon={faArrowRightToBracket} />
+      </Link>
+    </Box>
+  );
+}

packages/ui/src/index.tsx

@@ -9,6 +9,7 @@ export { default as SummaryContainer } from "./components/Summary/SummaryContain
 export { default as SummaryItem } from "./components/Summary/SummaryItem";
 export { default as Tooltip } from "./components/Tooltip";
 export { default as Link } from "./components/Link";
+export { default as Navigate } from "./components/Navigate";
 export { default as Chip } from "./components/Chip";
 export { default as ChipList } from "./components/ChipList";
 export { default as TooltipStyledLabel } from "./components/TooltipStyledLabel";