[Platform]: direction of effect column (#332)

opentargets · Feb 26, 2024 · b383f9b · b383f9b
1 parent 7235fab
commit b383f9b
Show file tree

Hide file tree

Showing 17 changed files with 340 additions and 45 deletions.
diff --git a/packages/sections/src/evidence/Chembl/Body.jsx b/packages/sections/src/evidence/Chembl/Body.jsx
@@ -10,6 +10,7 @@ import {
   useCursorBatchDownloader,
   getComparator,
   getPage,
+  DirectionOfEffectIcon,
 } from "ui";
 import { defaultRowsPerPageOptions, phaseMap, sourceMap, naLabel } from "../../constants";
 import { dataTypesMap } from "../../dataTypes";
@@ -165,6 +166,35 @@ function getColumns(classes) {
         return `${anchorMa || naLabel}${mas.size > 0 ? ` and ${mas.size} other MoA` : ""}`;
       },
     },
+    {
+      id: "directionOfVariantEffect",
+      label: (
+        <Tooltip
+          showHelpIcon
+          title={
+            <>
+              See{" "}
+              <Link
+                external
+                to="https://home.opentargets.org/aotf-documentation#direction-of-effect"
+              >
+                here
+              </Link> for more info on our assessment method
+            </>
+          }
+        >
+          Direction Of Effect
+        </Tooltip>
+      ),
+      renderCell: ({ variantEffect, directionOnTrait }) => {
+        return (
+          <DirectionOfEffectIcon
+            variantEffect={variantEffect}
+            directionOnTrait={directionOnTrait}
+          />
+        );
+      },
+    },
     {
       id: "clinicalPhase",
       label: "Phase",

diff --git a/packages/sections/src/evidence/Chembl/ChemblQuery.gql b/packages/sections/src/evidence/Chembl/ChemblQuery.gql
@@ -33,6 +33,8 @@ query ChemblQuery($ensemblId: String!, $efoId: String!, $size: Int!, $cursor: St
             }
           }
         }
+        variantEffect
+        directionOnTrait
         targetFromSourceId
         clinicalPhase
         clinicalStatus

diff --git a/packages/sections/src/evidence/EVA/Body.jsx b/packages/sections/src/evidence/EVA/Body.jsx
@@ -11,6 +11,7 @@ import {
   getComparator,
   useCursorBatchDownloader,
   ClinvarStars,
+  DirectionOfEffectIcon,
 } from "ui";
 
 import {
@@ -28,6 +29,45 @@ import CLINVAR_QUERY from "./ClinvarQuery.gql";
 import { dataTypesMap } from "../../dataTypes";
 import { sentenceCase, identifiersOrgLink } from "../../utils/global";
 
+const exportColumns = [
+  {
+    label: "diseaseId",
+    exportValue: row => row.disease.id,
+  },
+  {
+    label: "diseaseName",
+    exportValue: row => row.disease.name,
+  },
+  {
+    label: "variantId",
+    exportValue: row => row.variantId,
+  },
+  {
+    label: "variantRsId",
+    exportValue: row => row.variantRsId,
+  },
+  {
+    label: "variantHgvsId",
+    exportValue: row => row.variantHgvsId,
+  },
+  {
+    label: "variantConsequence",
+    exportValue: row => row.variantFunctionalConsequence,
+  },
+  {
+    label: "clinicalSignificances",
+    exportValue: row => row.clinicalSignificances,
+  },
+  {
+    label: "allelicRequirements",
+    exportValue: row => row.alleleOrigins,
+  },
+  {
+    label: "reviewStatus",
+    exportValue: row => row.confidence,
+  },
+];
+
 function getColumns(label) {
   return [
     {
@@ -155,6 +195,36 @@ function getColumns(label) {
           variantFunctionalConsequenceFromQtlId.label
         )}`,
     },
+    {
+      id: "directionOfVariantEffect",
+      label: (
+        <Tooltip
+          showHelpIcon
+          title={
+            <>
+              See{" "}
+              <Link
+                external
+                to="https://home.opentargets.org/aotf-documentation#direction-of-effect"
+              >
+                here
+              </Link>{" "}
+              for more info on our assessment method
+            </>
+          }
+        >
+          Direction Of Effect
+        </Tooltip>
+      ),
+      renderCell: ({ variantEffect, directionOnTrait }) => {
+        return (
+          <DirectionOfEffectIcon
+            variantEffect={variantEffect}
+            directionOnTrait={directionOnTrait}
+          />
+        );
+      },
+    },
     {
       id: "clinicalSignificances",
       filterValue: ({ clinicalSignificances }) => clinicalSignificances.join(),
@@ -242,45 +312,6 @@ function getColumns(label) {
   ];
 }
 
-const exportColumns = [
-  {
-    label: "diseaseId",
-    exportValue: row => row.disease.id,
-  },
-  {
-    label: "diseaseName",
-    exportValue: row => row.disease.name,
-  },
-  {
-    label: "variantId",
-    exportValue: row => row.variantId,
-  },
-  {
-    label: "variantRsId",
-    exportValue: row => row.variantRsId,
-  },
-  {
-    label: "variantHgvsId",
-    exportValue: row => row.variantHgvsId,
-  },
-  {
-    label: "variantConsequence",
-    exportValue: row => row.variantFunctionalConsequence,
-  },
-  {
-    label: "clinicalSignificances",
-    exportValue: row => row.clinicalSignificances,
-  },
-  {
-    label: "allelicRequirements",
-    exportValue: row => row.alleleOrigins,
-  },
-  {
-    label: "reviewStatus",
-    exportValue: row => row.confidence,
-  },
-];
-
 function fetchClinvar({ ensemblId, efoId, cursor, size, freeTextQuery }) {
   return client.query({
     query: CLINVAR_QUERY,
@@ -305,7 +336,6 @@ function Body({ id, label, entity }) {
   const [size, setPageSize] = useState(10);
   const [sortColumn, setSortColumn] = useState(null);
   const [sortOrder, setSortOrder] = useState("asc");
-  // const [globalFilter, setGlobalFilter] = useState('');
 
   const columns = getColumns(label);
 

diff --git a/packages/sections/src/evidence/EVA/ClinvarQuery.gql b/packages/sections/src/evidence/EVA/ClinvarQuery.gql
@@ -19,6 +19,8 @@ query ClinvarQuery($ensemblId: String!, $efoId: String!, $size: Int!, $cursor: S
           id
           name
         }
+        variantEffect
+        directionOnTrait
         diseaseFromSource
         variantId
         variantRsId

diff --git a/packages/sections/src/evidence/EVASomatic/Body.jsx b/packages/sections/src/evidence/EVASomatic/Body.jsx
@@ -12,6 +12,7 @@ import {
   useCursorBatchDownloader,
   getComparator,
   getPage,
+  DirectionOfEffectIcon,
 } from "ui";
 import client from "../../client";
 
@@ -133,6 +134,19 @@ const getColumns = label => [
     },
     filterValue: ({ clinicalSignificances }) => clinicalSignificances.join(),
   },
+  {
+    id: "directionOfVariantEffect",
+    label: (
+      <Tooltip showHelpIcon title={<>See <Link external to="https://home.opentargets.org/aotf-documentation#direction-of-effect">here</Link> for more info on our assessment method</>}>
+        Direction Of Effect
+      </Tooltip>
+    ),
+    renderCell: ({ variantEffect, directionOnTrait }) => {
+      return (
+        <DirectionOfEffectIcon variantEffect={variantEffect} directionOnTrait={directionOnTrait} />
+      );
+    },
+  },
   {
     id: "allelicRequirements",
     label: "Allele origin",

diff --git a/packages/sections/src/evidence/EVASomatic/EvaSomaticQuery.gql b/packages/sections/src/evidence/EVASomatic/EvaSomaticQuery.gql
@@ -15,6 +15,8 @@ query EvaSomaticQuery($ensemblId: String!, $efoId: String!, $size: Int!, $cursor
           id
           name
         }
+        variantEffect
+        directionOnTrait
         diseaseFromSource
         variantId
         variantRsId

diff --git a/packages/sections/src/evidence/Gene2Phenotype/Body.jsx b/packages/sections/src/evidence/Gene2Phenotype/Body.jsx
@@ -1,7 +1,7 @@
 import { List, ListItem, Typography } from "@mui/material";
 import { useQuery } from "@apollo/client";
 import { v1 } from "uuid";
-import { SectionItem, Tooltip, Link, PublicationsDrawer, DataTable } from "ui";
+import { SectionItem, Tooltip, Link, PublicationsDrawer, DataTable, DirectionOfEffectIcon } from "ui";
 
 import { defaultRowsPerPageOptions, naLabel, sectionsBaseSizeQuery } from "../../constants";
 import Description from "./Description";
@@ -53,6 +53,22 @@ const getColumns = label => [
     filterValue: ({ variantFunctionalConsequence }) =>
       sentenceCase(variantFunctionalConsequence?.label),
   },
+  {
+    id: "directionOfVariantEffect",
+    label: (
+      <Tooltip showHelpIcon title={<>See <Link external to="https://home.opentargets.org/aotf-documentation#direction-of-effect">here</Link> for more info on our assessment method</>}>
+        Direction Of Effect
+      </Tooltip>
+    ),
+    renderCell: ({ variantEffect, directionOnTrait }) => {
+      return (
+        <DirectionOfEffectIcon
+          variantEffect={variantEffect}
+          directionOnTrait={directionOnTrait}
+        />
+      );
+    },
+  },
   {
     id: "allelicRequirements",
     label: "Allelic requirement",

diff --git a/packages/sections/src/evidence/GeneBurden/Body.jsx b/packages/sections/src/evidence/GeneBurden/Body.jsx
@@ -1,6 +1,14 @@
 import { useQuery } from "@apollo/client";
 import { Typography } from "@mui/material";
-import { Link, Tooltip, SectionItem, PublicationsDrawer, DataTable, ScientificNotation } from "ui";
+import {
+  Link,
+  Tooltip,
+  SectionItem,
+  PublicationsDrawer,
+  DataTable,
+  ScientificNotation,
+  DirectionOfEffectIcon,
+} from "ui";
 
 import { definition } from ".";
 import Description from "./Description";
@@ -180,6 +188,30 @@ const getColumns = label => [
     filterValue: ({ beta, betaConfidenceIntervalLower, betaConfidenceIntervalUpper }) =>
       `${beta} ${betaConfidenceIntervalLower} ${betaConfidenceIntervalUpper} ${naLabel}`,
   },
+  {
+    id: "directionOfVariantEffect",
+    label: (
+      <Tooltip
+        showHelpIcon
+        title={
+          <>
+            See{" "}
+            <Link external to="https://home.opentargets.org/aotf-documentation#direction-of-effect">
+              here
+            </Link>{" "}
+            for more info on our assessment method
+          </>
+        }
+      >
+        Direction Of Effect
+      </Tooltip>
+    ),
+    renderCell: ({ variantEffect, directionOnTrait }) => {
+      return (
+        <DirectionOfEffectIcon variantEffect={variantEffect} directionOnTrait={directionOnTrait} />
+      );
+    },
+  },
   {
     id: "pValue",
     label: (
@@ -221,11 +253,9 @@ export function Body({ id, label, entity }) {
     efoId,
     size: sectionsBaseSizeQuery,
   };
-
   const request = useQuery(GENE_BURDEN_QUERY, {
     variables,
   });
-
   const columns = getColumns(label);
 
   return (

diff --git a/packages/sections/src/evidence/GeneBurden/GeneBurdenQuery.gql b/packages/sections/src/evidence/GeneBurden/GeneBurdenQuery.gql
@@ -18,6 +18,8 @@ query GeneBurdenQuery($ensemblId: String!, $efoId: String!, $size: Int!) {
           id
           approvedSymbol
         }
+        variantEffect
+        directionOnTrait
         allelicRequirements
         studyId
         ancestry

diff --git a/packages/sections/src/evidence/Impc/Body.jsx b/packages/sections/src/evidence/Impc/Body.jsx
@@ -11,6 +11,7 @@ import {
   useCursorBatchDownloader,
   getComparator,
   getPage,
+  DirectionOfEffectIcon,
 } from "ui";
 
 import client from "../../client";
@@ -84,6 +85,19 @@ const columns = [
     filterValue: ({ diseaseModelAssociatedModelPhenotypes = [] }) =>
       diseaseModelAssociatedModelPhenotypes.map(dmamp => dmamp.label).join(),
   },
+  {
+    id: "directionOfVariantEffect",
+    label: (
+      <Tooltip showHelpIcon title={<>See <Link external to="https://home.opentargets.org/aotf-documentation#direction-of-effect">here</Link> for more info on our assessment method</>}>
+        Direction Of Effect
+      </Tooltip>
+    ),
+    renderCell: ({ variantEffect, directionOnTrait }) => {
+      return (
+        <DirectionOfEffectIcon variantEffect={variantEffect} directionOnTrait={directionOnTrait} />
+      );
+    },
+  },
   {
     id: "literature",
     label: "Mouse model allelic composition",

diff --git a/packages/sections/src/evidence/Impc/sectionQuery.gql b/packages/sections/src/evidence/Impc/sectionQuery.gql
@@ -19,6 +19,8 @@ query impcQuery($ensemblId: String!, $efoId: String!, $size: Int!, $cursor: Stri
           id
           approvedSymbol
         }
+        variantEffect
+        directionOnTrait
         diseaseFromSource
         biologicalModelGeneticBackground
         biologicalModelAllelicComposition