From 3dd8f9dd9d66d05dad98dbddb5b1f462af64b9ab Mon Sep 17 00:00:00 2001 From: Graham McNeill Date: Fri, 6 Dec 2024 14:45:13 +0000 Subject: [PATCH] [Platform] Numeric formatting on new pages (#597) --- .../src/credibleSet/GWASColoc/Body.tsx | 18 ++++++++++++++---- .../src/credibleSet/MolQTLColoc/Body.tsx | 18 ++++++++++++++---- .../sections/src/credibleSet/Variants/Body.tsx | 14 ++++++++++---- .../src/study/GWASCredibleSets/Body.tsx | 13 ++++++++++--- .../src/study/QTLCredibleSets/Body.tsx | 11 +++++++++-- .../src/study/SharedTraitStudies/Body.tsx | 4 ++++ .../src/variant/GWASCredibleSets/Body.tsx | 14 +++++++++++--- .../src/variant/QTLCredibleSets/Body.tsx | 14 +++++++++++--- .../ui/src/components/ScientificNotation.tsx | 5 +++-- 9 files changed, 86 insertions(+), 25 deletions(-) diff --git a/packages/sections/src/credibleSet/GWASColoc/Body.tsx b/packages/sections/src/credibleSet/GWASColoc/Body.tsx index 97d2658b2..fd5bcacd0 100644 --- a/packages/sections/src/credibleSet/GWASColoc/Body.tsx +++ b/packages/sections/src/credibleSet/GWASColoc/Body.tsx @@ -85,6 +85,7 @@ const columns = [ { id: "pValue", label: "P-Value", + numeric: true, comparator: ({ otherStudyLocus: a }, { otherStudyLocus: b }) => mantissaExponentComparator( a?.pValueMantissa, @@ -97,7 +98,7 @@ const columns = [ renderCell: ({ otherStudyLocus }) => { const { pValueMantissa, pValueExponent } = otherStudyLocus ?? {}; if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return naLabel; - return ; + return ; }, exportValue: ({ otherStudyLocus }) => { const { pValueMantissa, pValueExponent } = otherStudyLocus ?? {}; @@ -108,8 +109,14 @@ const columns = [ { id: "numberColocalisingVariants", label: "Colocalising Variants (n)", + numeric: true, filterValue: false, comparator: (a, b) => a?.numberColocalisingVariants - b?.numberColocalisingVariants, + renderCell: ({ numberColocalisingVariants }) => { + return typeof numberColocalisingVariants === "number" + ? numberColocalisingVariants.toLocaleString() + : naLabel; + }, sortable: true, }, { @@ -149,6 +156,7 @@ const columns = [ { id: "h3", label: "H3", + numeric: true, tooltip: ( <> Posterior probability that the signals do not colocalise @@ -159,30 +167,32 @@ const columns = [ sortable: true, renderCell: ({ h3 }) => { if (typeof h3 !== "number") return naLabel; - return h3.toPrecision(3); + return h3.toFixed(3); }, }, { id: "h4", label: "H4", + numeric: true, tooltip: "Posterior probability that the signals colocalise", filterValue: false, comparator: (a, b) => a?.h4 - b?.h4, sortable: true, renderCell: ({ h4 }) => { if (typeof h4 !== "number") return naLabel; - return h4.toPrecision(3); + return h4.toFixed(3); }, }, { id: "clpp", label: "CLPP", + numeric: true, filterValue: false, comparator: (a, b) => a?.clpp - b?.clpp, sortable: true, renderCell: ({ clpp }) => { if (typeof clpp !== "number") return naLabel; - return clpp.toPrecision(3); + return clpp.toFixed(3); }, }, ]; diff --git a/packages/sections/src/credibleSet/MolQTLColoc/Body.tsx b/packages/sections/src/credibleSet/MolQTLColoc/Body.tsx index 568b9b495..3083f2954 100644 --- a/packages/sections/src/credibleSet/MolQTLColoc/Body.tsx +++ b/packages/sections/src/credibleSet/MolQTLColoc/Body.tsx @@ -103,6 +103,7 @@ const columns = [ { id: "pValue", label: "P-Value", + numeric: true, comparator: ({ otherStudyLocus: a }, { otherStudyLocus: b }) => mantissaExponentComparator( a?.pValueMantissa, @@ -115,7 +116,7 @@ const columns = [ renderCell: ({ otherStudyLocus }) => { const { pValueMantissa, pValueExponent } = otherStudyLocus ?? {}; if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return naLabel; - return ; + return ; }, exportValue: ({ otherStudyLocus }) => { const { pValueMantissa, pValueExponent } = otherStudyLocus ?? {}; @@ -127,8 +128,14 @@ const columns = [ id: "numberColocalisingVariants", label: "Colocalising Variants (n)", filterValue: false, + numeric: true, comparator: (a, b) => a?.numberColocalisingVariants - b?.numberColocalisingVariants, sortable: true, + renderCell: ({ numberColocalisingVariants }) => { + return typeof numberColocalisingVariants === "number" + ? numberColocalisingVariants.toLocaleString() + : naLabel; + }, }, { id: "colocalisationMethod", @@ -172,11 +179,12 @@ const columns = [ ), filterValue: false, + numeric: true, comparator: (a, b) => a?.h3 - b?.h3, sortable: true, renderCell: ({ h3 }) => { if (typeof h3 !== "number") return naLabel; - return h3.toPrecision(3); + return h3.toFixed(3); }, }, { @@ -184,22 +192,24 @@ const columns = [ label: "H4", tooltip: "Posterior probability that the signals colocalise", filterValue: false, + numeric: true, comparator: (a, b) => a?.h4 - b?.h4, sortable: true, renderCell: ({ h4 }) => { if (typeof h4 !== "number") return naLabel; - return h4.toPrecision(3); + return h4.toFixed(3); }, }, { id: "clpp", label: "CLPP", filterValue: false, + numeric: true, comparator: (a, b) => a?.clpp - b?.clpp, sortable: true, renderCell: ({ clpp }) => { if (typeof clpp !== "number") return naLabel; - return clpp.toPrecision(3); + return clpp.toFixed(3); }, }, ]; diff --git a/packages/sections/src/credibleSet/Variants/Body.tsx b/packages/sections/src/credibleSet/Variants/Body.tsx index 2e7a5db1e..78c4439a3 100644 --- a/packages/sections/src/credibleSet/Variants/Body.tsx +++ b/packages/sections/src/credibleSet/Variants/Body.tsx @@ -62,6 +62,7 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }: { id: "pValue", label: "P-value", + numeric: true, comparator: (a, b) => mantissaExponentComparator( a?.pValueMantissa, @@ -74,7 +75,7 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }: renderCell: ({ pValueMantissa, pValueExponent }) => { if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return naLabel; - return ; + return ; }, exportValue: ({ pValueMantissa, pValueExponent }) => { if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return null; @@ -84,29 +85,32 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }: { id: "beta", label: "Beta", + numeric: true, filterValue: false, sortable: true, tooltip: "Beta with respect to the ALT allele", renderCell: ({ beta }) => { if (typeof beta !== "number") return naLabel; - return beta.toPrecision(3); + return beta.toFixed(3); }, }, { id: "standardError", label: "Standard error", + numeric: true, filterValue: false, tooltip: "Standard Error: Estimate of the standard deviation of the sampling distribution of the beta", renderCell: ({ standardError }) => { if (typeof standardError !== "number") return naLabel; - return standardError.toPrecision(3); + return standardError.toFixed(3); }, }, { id: "r2Overall", label: "LD (r²)", filterValue: false, + numeric: true, tooltip: ( <> Linkage disequilibrium with the lead variant ( @@ -128,17 +132,19 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }: id: "posteriorProbability", label: "Posterior Probability", filterValue: false, + numeric: true, tooltip: "Posterior inclusion probability that this variant is causal within the fine-mapped credible set", comparator: (rowA, rowB) => rowA?.posteriorProbability - rowB?.posteriorProbability, sortable: true, renderCell: ({ posteriorProbability }) => { if (typeof posteriorProbability !== "number") return naLabel; - return posteriorProbability.toPrecision(3); + return posteriorProbability.toFixed(3); }, }, { id: "logBF", label: "log(BF)", + numeric: true, tooltip: "Natural logarithm of the Bayes Factor indicating relative likelihood of the variant being causal", filterValue: false, sortable: true, diff --git a/packages/sections/src/study/GWASCredibleSets/Body.tsx b/packages/sections/src/study/GWASCredibleSets/Body.tsx index ab587336f..54b246555 100644 --- a/packages/sections/src/study/GWASCredibleSets/Body.tsx +++ b/packages/sections/src/study/GWASCredibleSets/Body.tsx @@ -51,6 +51,7 @@ const columns = [ { id: "pValue", label: "P-value", + numeric: true, comparator: (a, b) => mantissaExponentComparator( a?.pValueMantissa, @@ -62,7 +63,7 @@ const columns = [ filterValue: false, renderCell: ({ pValueMantissa, pValueExponent }) => { if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return naLabel; - return ; + return ; }, exportValue: ({ pValueMantissa, pValueExponent }) => { if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return null; @@ -73,11 +74,12 @@ const columns = [ id: "beta", label: "Beta", filterValue: false, + numeric: true, sortable: true, tooltip: "Beta with respect to the ALT allele", renderCell: ({ beta }) => { if (typeof beta !== "number") return naLabel; - return beta.toPrecision(3); + return beta.toFixed(3); }, }, { @@ -138,8 +140,13 @@ const columns = [ label: "Credible set size", comparator: (a, b) => a.locus?.count - b.locus?.count, sortable: true, + numeric: true, filterValue: false, - renderCell: ({ locus }) => locus?.count ?? naLabel, + renderCell: ({ locus }) => { + return typeof locus?.count === "number" + ? locus.count.toLocaleString() + : naLabel; + }, exportValue: ({ locus }) => locus?.count, }, ]; diff --git a/packages/sections/src/study/QTLCredibleSets/Body.tsx b/packages/sections/src/study/QTLCredibleSets/Body.tsx index e67fe2263..4e710c81c 100644 --- a/packages/sections/src/study/QTLCredibleSets/Body.tsx +++ b/packages/sections/src/study/QTLCredibleSets/Body.tsx @@ -47,6 +47,7 @@ const columns = [ { id: "pValue", label: "P-value", + numeric: true, comparator: (a, b) => mantissaExponentComparator( a?.pValueMantissa, @@ -58,7 +59,7 @@ const columns = [ filterValue: false, renderCell: ({ pValueMantissa, pValueExponent }) => { if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return naLabel; - return ; + return ; }, exportValue: ({ pValueMantissa, pValueExponent }) => { if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return null; @@ -68,6 +69,7 @@ const columns = [ { id: "beta", label: "Beta", + numeric: true, sortable: true, filterValue: false, tooltip: "Beta with respect to the ALT allele", @@ -85,8 +87,13 @@ const columns = [ label: "Credible set size", comparator: (a, b) => a.locus?.count - b.locus?.count, sortable: true, + numeric: true, filterValue: false, - renderCell: ({ locus }) => locus?.count ?? naLabel, + renderCell: ({ locus }) => { + return typeof locus?.count === "number" + ? locus.count.toLocaleString() + : naLabel; + }, exportValue: ({ locus }) => locus?.count, }, ]; diff --git a/packages/sections/src/study/SharedTraitStudies/Body.tsx b/packages/sections/src/study/SharedTraitStudies/Body.tsx index 49bf80fe2..d0cd10394 100644 --- a/packages/sections/src/study/SharedTraitStudies/Body.tsx +++ b/packages/sections/src/study/SharedTraitStudies/Body.tsx @@ -53,6 +53,10 @@ function getColumns(diseaseIds: string[]) { { id: "nSamples", label: "Sample size", + numeric: true, + renderCell: ({ nSamples }) => { + return typeof nSamples === "number" ? nSamples.toLocaleString() : naLabel + }, comparator: (a, b) => a?.nSamples - b?.nSamples, sortable: true, }, diff --git a/packages/sections/src/variant/GWASCredibleSets/Body.tsx b/packages/sections/src/variant/GWASCredibleSets/Body.tsx index f342172e0..b6813ec82 100644 --- a/packages/sections/src/variant/GWASCredibleSets/Body.tsx +++ b/packages/sections/src/variant/GWASCredibleSets/Body.tsx @@ -104,6 +104,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) { { id: "pValue", label: "P-value", + numeric: true, comparator: (a, b) => mantissaExponentComparator( a?.pValueMantissa, @@ -116,7 +117,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) { renderCell: ({ pValueMantissa, pValueExponent }) => { if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return naLabel; - return ; + return ; }, exportValue: ({ pValueMantissa, pValueExponent }) => { if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return null; @@ -126,17 +127,19 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) { { id: "beta", label: "Beta", + numeric: true, filterValue: false, tooltip: "Beta with respect to the ALT allele", sortable: true, renderCell: ({ beta }) => { if (typeof beta !== "number") return naLabel; - return beta.toPrecision(3); + return beta.toFixed(3); }, }, { id: "posteriorProbability", label: "Posterior probability", + numeric: true, filterValue: false, tooltip: ( <> @@ -217,8 +220,13 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) { label: "Credible set size", comparator: (a, b) => a.locus?.count - b.locus?.count, sortable: true, + numeric: true, filterValue: false, - renderCell: ({ locus }) => locus?.count ?? naLabel, + renderCell: ({ locus }) => { + return typeof locus?.count === "number" + ? locus.count.toLocaleString() + : naLabel; + }, exportValue: ({ locus }) => locus?.count, }, ]; diff --git a/packages/sections/src/variant/QTLCredibleSets/Body.tsx b/packages/sections/src/variant/QTLCredibleSets/Body.tsx index 36e4d01e2..07f692cb1 100644 --- a/packages/sections/src/variant/QTLCredibleSets/Body.tsx +++ b/packages/sections/src/variant/QTLCredibleSets/Body.tsx @@ -114,6 +114,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) { { id: "pValue", label: "P-value", + numeric: true, comparator: (a, b) => mantissaExponentComparator( a?.pValueMantissa, @@ -126,7 +127,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) { renderCell: ({ pValueMantissa, pValueExponent }) => { if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return naLabel; - return ; + return ; }, exportValue: ({ pValueMantissa, pValueExponent }) => { if (typeof pValueMantissa !== "number" || typeof pValueExponent !== "number") return null; @@ -136,17 +137,19 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) { { id: "beta", label: "Beta", + numeric: true, filterValue: false, tooltip: "Beta with respect to the ALT allele", sortable: true, renderCell: ({ beta }) => { if (typeof beta !== "number") return naLabel; - return beta.toPrecision(3); + return beta.toFixed(3); }, }, { id: "posteriorProbability", label: "Posterior probability", + numeric: true, filterValue: false, sortable: true, comparator: (a, b) => { @@ -193,10 +196,15 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) { { id: "credibleSetSize", label: "Credible set size", + numeric: true, comparator: (a, b) => a.locus?.count - b.locus?.count, sortable: true, filterValue: false, - renderCell: ({ locus }) => locus?.count ?? naLabel, + renderCell: ({ locus }) => { + return typeof locus?.count === "number" + ? locus.count.toLocaleString() + : naLabel; + }, exportValue: ({ locus }) => locus?.count, }, ]; diff --git a/packages/ui/src/components/ScientificNotation.tsx b/packages/ui/src/components/ScientificNotation.tsx index 4344d3299..d2bca5a58 100644 --- a/packages/ui/src/components/ScientificNotation.tsx +++ b/packages/ui/src/components/ScientificNotation.tsx @@ -3,9 +3,10 @@ import { decimalPlaces } from "../constants"; type ScientificNotationProps = { number: number | number[]; + dp?: number }; -function ScientificNotation({ number }: ScientificNotationProps): ReactElement | null { +function ScientificNotation({ number, dp = decimalPlaces }: ScientificNotationProps): ReactElement | null { if (!number) return null; let mantissa: number | string; @@ -18,7 +19,7 @@ function ScientificNotation({ number }: ScientificNotationProps): ReactElement | exponent = exponent.charAt(0) === "+" ? exponent.slice(1) : exponent; } - mantissa = parseFloat(parseFloat(String(mantissa)).toFixed(decimalPlaces)); + mantissa = Number(mantissa).toFixed(dp); return ( <>