[Platform] Add/fix column sorting (#595)

* nullish comparator and make betas sortable * posterior probs and variant sorting * other sorting fixes * optional chaining
opentargets · Dec 6, 2024 · 230bcf0 · 230bcf0
1 parent 4035fcc
commit 230bcf0
Show file tree

Hide file tree

Showing 11 changed files with 132 additions and 64 deletions.
diff --git a/packages/sections/src/credibleSet/GWASColoc/Body.tsx b/packages/sections/src/credibleSet/GWASColoc/Body.tsx
@@ -60,7 +60,7 @@ const columns = [
   {
     id: "otherStudyLocus.variant.id",
     label: "Lead Variant",
-    comparator: variantComparator,
+    comparator: variantComparator(d => d?.otherStudyLocus?.variant),
     sortable: true,
     filterValue: ({ otherStudyLocus }) => {
       const v = otherStudyLocus?.variant;

diff --git a/packages/sections/src/credibleSet/MolQTLColoc/Body.tsx b/packages/sections/src/credibleSet/MolQTLColoc/Body.tsx
@@ -78,7 +78,7 @@ const columns = [
   {
     id: "otherStudyLocus.variant.id",
     label: "Lead Variant",
-    comparator: variantComparator,
+    comparator: variantComparator(d => d?.otherStudyLocus?.variant),
     sortable: true,
     filterValue: ({ otherStudyLocus }) => {
       const v = otherStudyLocus?.variant;

diff --git a/packages/sections/src/credibleSet/Variants/Body.tsx b/packages/sections/src/credibleSet/Variants/Body.tsx
@@ -23,7 +23,7 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
     {
       id: "variant.id",
       label: "Variant",
-      comparator: variantComparator,
+      comparator: variantComparator(d => d?.variant),
       sortable: true,
       filterValue: ({ variant: v }) =>
         `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`,
@@ -78,6 +78,7 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
       id: "beta",
       label: "Beta",
       filterValue: false,
+      sortable: true,
       tooltip: "Beta with respect to the ALT allele",
       renderCell: ({ beta }) => {
         if (typeof beta !== "number") return naLabel;
@@ -148,9 +149,9 @@ function getColumns({ leadVariantId, leadReferenceAllele, leadAlternateAllele }:
         const mostSevereConsequence = variant?.mostSevereConsequence
         if (!mostSevereConsequence) return naLabel;
         const displayElement = (
-            <Link external to={identifiersOrgLink("SO", mostSevereConsequence.id.slice(3))}>
-              {formatVariantConsequenceLabel(mostSevereConsequence.label)}
-            </Link>
+          <Link external to={identifiersOrgLink("SO", mostSevereConsequence.id.slice(3))}>
+            {formatVariantConsequenceLabel(mostSevereConsequence.label)}
+          </Link>
         );
         return displayElement;
       },

diff --git a/packages/sections/src/evidence/GWASCredibleSets/Body.jsx b/packages/sections/src/evidence/GWASCredibleSets/Body.jsx
@@ -9,8 +9,9 @@ import {
   OtScoreLinearBar,
   Tooltip,
   Navigate,
+  DisplayVariantId,
 } from "ui";
-
+import { variantComparator } from "../../utils/comparators";
 import { naLabel, sectionsBaseSizeQuery, credsetConfidenceMap } from "../../constants";
 import { definition } from ".";
 import Description from "./Description";
@@ -30,11 +31,22 @@ function getColumns(targetSymbol) {
     {
       id: "variantId",
       label: "Lead Variant",
+      sortable: true,
+      comparator: variantComparator(d => d?.credibleSet?.variant),
       renderCell: ({ credibleSet }) => {
-        const variantId = credibleSet?.variant?.id;
-        if (variantId) return <Link to={`/variant/${variantId}`}>{variantId}</Link>;
-        return naLabel;
+        const v = credibleSet?.variant;
+        if (!v) return naLabel;
+        return <Link to={`/variant/${v.id}`}>
+          <DisplayVariantId
+            variantId={v.id}
+            referenceAllele={v.referenceAllele}
+            alternateAllele={v.alternateAllele}
+            expand={false}
+          />
+        </Link>
       },
+      filterValue: ({ variant: v }) =>
+        `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`,
     },
     {
       id: "trait",
@@ -91,11 +103,12 @@ function getColumns(targetSymbol) {
       },
     },
     {
-      id: "betaConfidenceInterval",
+      id: "credibleSet.beta",
       label: "Beta (CI 95%)",
       numeric: true,
+      sortable: true,
       renderCell: ({ credibleSet }) => {
-        return credibleSet?.beta ? `${parseFloat(credibleSet?.beta.toFixed(3))}` : naLabel;
+        return credibleSet?.beta ? credibleSet.beta.toFixed(3) : naLabel;
       },
     },
     {

diff --git a/packages/sections/src/evidence/GWASCredibleSets/sectionQuery.gql b/packages/sections/src/evidence/GWASCredibleSets/sectionQuery.gql
@@ -30,6 +30,10 @@ query GwasCredibleSetsQuery($ensemblId: String!, $efoId: String!, $size: Int!) {
           }
           variant {
             id
+            chromosome
+            position
+            referenceAllele
+            alternateAllele
           }
           pValueMantissa
           pValueExponent

diff --git a/packages/sections/src/evidence/UniProtVariants/Body.jsx b/packages/sections/src/evidence/UniProtVariants/Body.jsx
@@ -1,14 +1,20 @@
 import { useQuery } from "@apollo/client";
 import { Typography } from "@mui/material";
-import { Link, SectionItem, Tooltip, PublicationsDrawer, LabelChip, OtTable } from "ui";
-
+import {
+  Link,
+  SectionItem,
+  Tooltip,
+  PublicationsDrawer,
+  LabelChip,
+  OtTable,
+  DisplayVariantId,
+} from "ui";
 import { definition } from ".";
-
 import Description from "./Description";
 import { epmcUrl } from "../../utils/urls";
 import { dataTypesMap } from "../../dataTypes";
 import { identifiersOrgLink } from "../../utils/global";
-import { variantComparator } from "../../utils/comparators";
+import { nullishComparator, variantComparator } from "../../utils/comparators";
 import {
   defaultRowsPerPageOptions,
   variantConsequenceSource,
@@ -52,13 +58,20 @@ function getColumns(label) {
     {
       id: "variantId",
       label: "Variant",
-      comparator: variantComparator,
       sortable: true,
+      comparator: nullishComparator(variantComparator(), d => d?.variant),
       filterValue: ({ variant: v }) =>
         `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`,
-      renderCell: ({ variant }) => {
-        if (variant) return <Link to={`/variant/${variant.id}`}>{variant.id}</Link>;
-        return naLabel;
+      renderCell: ({ variant: v }) => {
+        if (!v) return naLabel;
+        return <Link to={`/variant/${v.id}`}>
+          <DisplayVariantId
+            variantId={v.id}
+            referenceAllele={v.referenceAllele}
+            alternateAllele={v.alternateAllele}
+            expand={false}
+          />
+        </Link>
       },
     },
     {
@@ -84,7 +97,7 @@ function getColumns(label) {
         }
         return naLabel;
       }
-    },        
+    },
     {
       id: "variantConsequence",
       label: "Variant Consequence",

diff --git a/packages/sections/src/study/GWASCredibleSets/Body.tsx b/packages/sections/src/study/GWASCredibleSets/Body.tsx
@@ -14,7 +14,7 @@ import { naLabel, credsetConfidenceMap, initialResponse, table5HChunkSize } from
 import { definition } from ".";
 import Description from "./Description";
 import GWAS_CREDIBLE_SETS_QUERY from "./GWASCredibleSetsQuery.gql";
-import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
+import { mantissaExponentComparator, nullishComparator, variantComparator } from "../../utils/comparators";
 import ManhattanPlot from "./ManhattanPlot";
 import { useEffect, useState } from "react";
 import { responseType } from "ui/src/types/response";
@@ -28,7 +28,7 @@ const columns = [
   {
     id: "leadVariant",
     label: "Lead variant",
-    comparator: variantComparator,
+    comparator: variantComparator(d => d?.variant),
     sortable: true,
     filterValue: ({ variant: v }) =>
       `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`,
@@ -73,6 +73,7 @@ const columns = [
     id: "beta",
     label: "Beta",
     filterValue: false,
+    sortable: true,
     tooltip: "Beta with respect to the ALT allele",
     renderCell: ({ beta }) => {
       if (typeof beta !== "number") return naLabel;
@@ -114,8 +115,11 @@ const columns = [
   {
     id: "l2gScore",
     label: "L2G score",
-    comparator: (rowA, rowB) =>
-      rowA?.l2GPredictions?.rows[0]?.score - rowB?.l2GPredictions?.rows[0]?.score,
+    comparator: nullishComparator(
+      (a, b) => a - b,
+      row => row?.l2GPredictions?.rows[0]?.score,
+      false,
+    ),
     sortable: true,
     tooltip:
       "Machine learning prediction linking a gene to a credible set using all features. Score range [0,1].",

diff --git a/packages/sections/src/study/QTLCredibleSets/Body.tsx b/packages/sections/src/study/QTLCredibleSets/Body.tsx
@@ -24,7 +24,7 @@ const columns = [
   {
     id: "leadVariant",
     label: "Lead variant",
-    comparator: variantComparator,
+    comparator: variantComparator(d => d?.variant),
     sortable: true,
     filterValue: ({ variant: v }) =>
       `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`,
@@ -68,6 +68,7 @@ const columns = [
   {
     id: "beta",
     label: "Beta",
+    sortable: true,
     filterValue: false,
     tooltip: "Beta with respect to the ALT allele",
     renderCell: ({ beta }) => {

diff --git a/packages/sections/src/utils/comparators.ts b/packages/sections/src/utils/comparators.ts
@@ -1,3 +1,4 @@
+
 /*
 Example usage:
 const comparatorDiseaseName = generateComparatorFromAccessor(d => d.disease.name);
@@ -10,6 +11,23 @@ export const generateComparatorFromAccessor = accessor => (a, b) => {
   return -1;
 };
 
+/*
+Return comparator that sorts nullish values to end
+*/
+export const nullishComparator =
+  (comparator, accessor = x => x, nullishIsMax = true) => {
+    return (a, b) => {
+      const aVal = accessor(a);
+      const bVal = accessor(b);
+      if (aVal == null) {
+        if (bVal == null) return 0;
+        return nullishIsMax ? 1 : -1;
+      }
+      if (bVal === null) return nullishIsMax ? -1 : 1;
+      return comparator(aVal, bVal);
+    };
+  };
+
 /*
   Compares a breakpoint against a breakpoint helper.
  */
@@ -47,37 +65,43 @@ chromosomeRank.set('X', 23);
 chromosomeRank.set('Y', 24);
 
 type VariantType = {
-  variant: {
-    chromosome: string;
-    position: number;
-    referenceAllele: string;
-    alternateAllele: string;
-  }
+  chromosome: string;
+  position: number;
+  referenceAllele: string;
+  alternateAllele: string;
 };
 
-export function variantComparator(
-      { variant: v1 }: VariantType,
-      { variant: v2 }: VariantType
-    ) {
-
-  if (!v1 || !v2) return 0;
-
-  const chromosomeDiff =
-    chromosomeRank.get(v1.chromosome) - chromosomeRank.get(v2.chromosome);
-  if (chromosomeDiff !== 0) return chromosomeDiff;
-
-  const positionDiff = v1.position - v2.position;
-  if (positionDiff !== 0) return positionDiff
-
-  if (v1.referenceAllele < v2.referenceAllele) return -1;
-  else if (v1.referenceAllele > v2.referenceAllele) return 1;
-  else if (v1.alternateAllele < v2.alternateAllele) return -1;
-  else if (v1.alternateAllele > v2.alternateAllele) return 1;
-
-  return 0;
+export function variantComparator(accessor: (arg: any) => VariantType = d => d) {
+
+  return function (obj1: any, obj2: any) {
+    const v1 = accessor(obj1);
+    const v2 = accessor(obj2);
+
+    if (!v1 || !v2) return 0;
+
+    const chromosomeDiff =
+      chromosomeRank.get(v1.chromosome) - chromosomeRank.get(v2.chromosome);
+    if (chromosomeDiff !== 0) return chromosomeDiff;
+
+    const positionDiff = v1.position - v2.position;
+    if (positionDiff !== 0) return positionDiff
+
+    if (v1.referenceAllele < v2.referenceAllele) return -1;
+    else if (v1.referenceAllele > v2.referenceAllele) return 1;
+    else if (v1.alternateAllele < v2.alternateAllele) return -1;
+    else if (v1.alternateAllele > v2.alternateAllele) return 1;
+
+    return 0;
+  }
+
 }
 
-export function mantissaExponentComparator(m1, e1, m2, e2) {
+export function mantissaExponentComparator(m1, e1, m2, e2, nullishIsMax = true) {
+  if (m1 == null || e1 == null) {
+    if (m2 == null || e2 == null) return 0;
+    return nullishIsMax ? 1 : -1;
+  }
+  if (m2 == null || e2 == null) return nullishIsMax ? -1 : 1;
   if (e1 === e2) return m1 - m2;
   return e1 - e2;
 }
diff --git a/packages/sections/src/variant/GWASCredibleSets/Body.tsx b/packages/sections/src/variant/GWASCredibleSets/Body.tsx
@@ -16,7 +16,7 @@ import { definition } from ".";
 import Description from "./Description";
 import GWAS_CREDIBLE_SETS_QUERY from "./GWASCredibleSetsQuery.gql";
 import { Fragment } from "react/jsx-runtime";
-import { mantissaExponentComparator, variantComparator } from "../../utils/comparators";
+import { mantissaExponentComparator, variantComparator, nullishComparator } from "../../utils/comparators";
 import PheWasPlot from "./PheWasPlot";
 import { useEffect, useState } from "react";
 import { responseType } from "ui/src/types/response";
@@ -37,7 +37,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
     {
       id: "leadVariant",
       label: "Lead variant",
-      comparator: variantComparator,
+      comparator: variantComparator(d => d?.variant),
       sortable: true,
       filterValue: ({ variant: v }) =>
         `${v?.chromosome}_${v?.position}_${v?.referenceAllele}_${v?.alternateAllele}`,
@@ -128,6 +128,7 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
       label: "Beta",
       filterValue: false,
       tooltip: "Beta with respect to the ALT allele",
+      sortable: true,
       renderCell: ({ beta }) => {
         if (typeof beta !== "number") return naLabel;
         return beta.toPrecision(3);
@@ -149,8 +150,10 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
           ) is causal.
         </>
       ),
-      comparator: (rowA, rowB) =>
-        rowA.locus.rows[0].posteriorProbability - rowB.locus.rows[0].posteriorProbability,
+      comparator: (a, b) => {
+        return a?.locus?.rows?.[0]?.posteriorProbability -
+          b?.locus?.rows?.[0]?.posteriorProbability;
+      },
       sortable: true,
       renderCell: ({ locus }) =>
         locus.count > 0 ? locus?.rows[0]?.posteriorProbability.toFixed(3) : naLabel,
@@ -192,8 +195,11 @@ function getColumns({ id, referenceAllele, alternateAllele }: getColumnsType) {
     {
       id: "l2gScore",
       label: "L2G score",
-      comparator: (rowA, rowB) =>
-        rowA?.l2GPredictions?.rows[0]?.score - rowB?.l2GPredictions?.rows[0]?.score,
+      comparator: nullishComparator(
+        (a, b) => a - b,
+        row => row?.l2GPredictions?.rows[0]?.score,
+        false,
+      ),
       sortable: true,
       tooltip:
         "Machine learning prediction linking a gene to a credible set using all features. Score range [0,1].",