From 7996cd30621bcffb69f948d66cfc3654ad2a4c4f Mon Sep 17 00:00:00 2001 From: Graham McNeill Date: Fri, 29 Nov 2024 16:19:25 +0000 Subject: [PATCH] [Platform]: Use new Navigate component (#577) --- .../src/credibleSet/GWASColoc/Body.tsx | 10 ++-------- .../src/credibleSet/GWASMolQTL/Body.tsx | 10 ++-------- .../src/evidence/GWASCredibleSets/Body.jsx | 17 ++++------------ .../src/study/GWASCredibleSets/Body.tsx | 10 ++-------- .../src/study/QTLCredibleSets/Body.tsx | 20 +++++++++---------- .../src/variant/GWASCredibleSets/Body.tsx | 9 ++------- .../src/variant/QTLCredibleSets/Body.tsx | 9 ++------- packages/ui/src/components/Navigate.tsx | 19 ++++++++++++++++++ packages/ui/src/index.tsx | 1 + 9 files changed, 44 insertions(+), 61 deletions(-) create mode 100644 packages/ui/src/components/Navigate.tsx diff --git a/packages/sections/src/credibleSet/GWASColoc/Body.tsx b/packages/sections/src/credibleSet/GWASColoc/Body.tsx index fd9cf2969..0a6ffff26 100644 --- a/packages/sections/src/credibleSet/GWASColoc/Body.tsx +++ b/packages/sections/src/credibleSet/GWASColoc/Body.tsx @@ -6,6 +6,7 @@ import { ScientificNotation, OtTable, Tooltip, + Navigate, } from "ui"; import { naLabel } from "../../constants"; import { definition } from "."; @@ -13,9 +14,6 @@ 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 = [ { @@ -23,11 +21,7 @@ const columns = [ label: "Navigate", renderCell: ({ otherStudyLocus }) => { if (!otherStudyLocus?.variant) return naLabel; - return ( - - - - ) + return ; }, }, { diff --git a/packages/sections/src/credibleSet/GWASMolQTL/Body.tsx b/packages/sections/src/credibleSet/GWASMolQTL/Body.tsx index 5d97bf02a..d41d4770a 100644 --- a/packages/sections/src/credibleSet/GWASMolQTL/Body.tsx +++ b/packages/sections/src/credibleSet/GWASMolQTL/Body.tsx @@ -6,6 +6,7 @@ import { ScientificNotation, OtTable, Tooltip, + Navigate, } from "ui"; import { naLabel } from "../../constants"; import { definition } from "."; @@ -13,9 +14,6 @@ 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 = [ { @@ -23,11 +21,7 @@ const columns = [ label: "Navigate", renderCell: ({ otherStudyLocus }) => { if (!otherStudyLocus?.variant) return naLabel; - return ( - - - - ) + return ; }, }, { diff --git a/packages/sections/src/evidence/GWASCredibleSets/Body.jsx b/packages/sections/src/evidence/GWASCredibleSets/Body.jsx index 1dd918399..8d713562c 100644 --- a/packages/sections/src/evidence/GWASCredibleSets/Body.jsx +++ b/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,9 +17,6 @@ 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 [ @@ -27,21 +24,15 @@ function getColumns() { id: "credibleSet", label: "Navigate", renderCell: ({ credibleSet }) => { - return ( - - - - - - ); + return ; }, }, { id: "variantId", label: "Lead Variant", renderCell: ({ credibleSet }) => { - const variant = credibleSet.variant; - if (variant?.id) return {variant?.id}; + const variantId = credibleSet?.variant?.id; + if (variantId) return {variantId}; return naLabel; }, }, diff --git a/packages/sections/src/study/GWASCredibleSets/Body.tsx b/packages/sections/src/study/GWASCredibleSets/Body.tsx index e91f2c804..01e6c0a97 100644 --- a/packages/sections/src/study/GWASCredibleSets/Body.tsx +++ b/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 }) => ( - - - - - + ), }, { diff --git a/packages/sections/src/study/QTLCredibleSets/Body.tsx b/packages/sections/src/study/QTLCredibleSets/Body.tsx index 5e727a02d..11c578a14 100644 --- a/packages/sections/src/study/QTLCredibleSets/Body.tsx +++ b/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 }) => ( - - - - - - ), + + ) }, { id: "leadVariant", diff --git a/packages/sections/src/variant/GWASCredibleSets/Body.tsx b/packages/sections/src/variant/GWASCredibleSets/Body.tsx index a2b4256d6..343cf0af7 100644 --- a/packages/sections/src/variant/GWASCredibleSets/Body.tsx +++ b/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 }) => ( - - - - - + ), }, { diff --git a/packages/sections/src/variant/QTLCredibleSets/Body.tsx b/packages/sections/src/variant/QTLCredibleSets/Body.tsx index 639c36822..4bc520235 100644 --- a/packages/sections/src/variant/QTLCredibleSets/Body.tsx +++ b/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 }) => ( - - - - - + ), }, { diff --git a/packages/ui/src/components/Navigate.tsx b/packages/ui/src/components/Navigate.tsx new file mode 100644 index 000000000..1ea962e11 --- /dev/null +++ b/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 ( + + + + + + ); +} \ No newline at end of file diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx index ea7fdcb00..818efb463 100644 --- a/packages/ui/src/index.tsx +++ b/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";