[Platform]: Created Direction of Effect tooltip and added to all rele…

…vant widgets (#366) * New Direction of Effect tooltip added to all relevant widgets * Corrected formating
opentargets · May 7, 2024 · c9f1794 · c9f1794
1 parent 0e1f5ab
commit c9f1794
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 92 deletions.
diff --git a/packages/sections/src/evidence/Chembl/Body.jsx b/packages/sections/src/evidence/Chembl/Body.jsx
@@ -11,6 +11,7 @@ import {
   getComparator,
   getPage,
   DirectionOfEffectIcon,
+  DirectionOfEffectTooltip,
 } from "ui";
 import { defaultRowsPerPageOptions, phaseMap, sourceMap, naLabel } from "../../constants";
 import { dataTypesMap } from "../../dataTypes";
@@ -169,22 +170,7 @@ function getColumns(classes) {
     {
       id: "directionOfVariantEffect",
       label: (
-        <Tooltip
-          showHelpIcon
-          title={
-            <>
-              See{" "}
-              <Link
-                external
-                to="https://platform-docs.opentargets.org/evidence#chembl"
-              >
-                here
-              </Link> for more info on our assessment method
-            </>
-          }
-        >
-          Direction Of Effect
-        </Tooltip>
+        <DirectionOfEffectTooltip docsUrl="https://platform-docs.opentargets.org/evidence#chembl"></DirectionOfEffectTooltip>
       ),
       renderCell: ({ variantEffect, directionOnTrait }) => {
         return (

diff --git a/packages/sections/src/evidence/EVA/Body.jsx b/packages/sections/src/evidence/EVA/Body.jsx
@@ -12,6 +12,7 @@ import {
   useCursorBatchDownloader,
   ClinvarStars,
   DirectionOfEffectIcon,
+  DirectionOfEffectTooltip,
 } from "ui";
 
 import {
@@ -198,23 +199,7 @@ function getColumns(label) {
     {
       id: "directionOfVariantEffect",
       label: (
-        <Tooltip
-          showHelpIcon
-          title={
-            <>
-              See{" "}
-              <Link
-                external
-                to="https://platform-docs.opentargets.org/evidence#clinvar"
-              >
-                here
-              </Link>{" "}
-              for more info on our assessment method
-            </>
-          }
-        >
-          Direction Of Effect
-        </Tooltip>
+        <DirectionOfEffectTooltip docsUrl="https://platform-docs.opentargets.org/evidence#clinvar"></DirectionOfEffectTooltip>
       ),
       renderCell: ({ variantEffect, directionOnTrait }) => {
         return (

diff --git a/packages/sections/src/evidence/EVASomatic/Body.jsx b/packages/sections/src/evidence/EVASomatic/Body.jsx
@@ -13,6 +13,7 @@ import {
   getComparator,
   getPage,
   DirectionOfEffectIcon,
+  DirectionOfEffectTooltip,
 } from "ui";
 import client from "../../client";
 
@@ -137,20 +138,7 @@ const getColumns = label => [
   {
     id: "directionOfVariantEffect",
     label: (
-      <Tooltip
-        showHelpIcon
-        title={
-          <>
-            See{" "}
-            <Link external to="https://platform-docs.opentargets.org/evidence#clinvar-somatic">
-              here
-            </Link>{" "}
-            for more info on our assessment method
-          </>
-        }
-      >
-        Direction Of Effect
-      </Tooltip>
+      <DirectionOfEffectTooltip docsUrl="https://platform-docs.opentargets.org/evidence#clinvar-somatic"></DirectionOfEffectTooltip>
     ),
     renderCell: ({ variantEffect, directionOnTrait }) => {
       return (

diff --git a/packages/sections/src/evidence/Gene2Phenotype/Body.jsx b/packages/sections/src/evidence/Gene2Phenotype/Body.jsx
@@ -1,7 +1,15 @@
 import { List, ListItem, Typography } from "@mui/material";
 import { useQuery } from "@apollo/client";
 import { v1 } from "uuid";
-import { SectionItem, Tooltip, Link, PublicationsDrawer, DataTable, DirectionOfEffectIcon } from "ui";
+import {
+  SectionItem,
+  Tooltip,
+  Link,
+  PublicationsDrawer,
+  DataTable,
+  DirectionOfEffectIcon,
+  DirectionOfEffectTooltip,
+} from "ui";
 
 import { defaultRowsPerPageOptions, naLabel, sectionsBaseSizeQuery } from "../../constants";
 import Description from "./Description";
@@ -56,16 +64,11 @@ const getColumns = label => [
   {
     id: "directionOfVariantEffect",
     label: (
-      <Tooltip showHelpIcon title={<>See <Link external to="https://platform-docs.opentargets.org/evidence#gene2phenotype">here</Link> for more info on our assessment method</>}>
-        Direction Of Effect
-      </Tooltip>
+      <DirectionOfEffectTooltip docsUrl="https://platform-docs.opentargets.org/evidence#gene2phenotype"></DirectionOfEffectTooltip>
     ),
     renderCell: ({ variantEffect, directionOnTrait }) => {
       return (
-        <DirectionOfEffectIcon
-          variantEffect={variantEffect}
-          directionOnTrait={directionOnTrait}
-        />
+        <DirectionOfEffectIcon variantEffect={variantEffect} directionOnTrait={directionOnTrait} />
       );
     },
   },

diff --git a/packages/sections/src/evidence/GeneBurden/Body.jsx b/packages/sections/src/evidence/GeneBurden/Body.jsx
@@ -8,6 +8,7 @@ import {
   DataTable,
   ScientificNotation,
   DirectionOfEffectIcon,
+  DirectionOfEffectTooltip,
 } from "ui";
 
 import { definition } from ".";
@@ -191,20 +192,7 @@ const getColumns = label => [
   {
     id: "directionOfVariantEffect",
     label: (
-      <Tooltip
-        showHelpIcon
-        title={
-          <>
-            See{" "}
-            <Link external to="https://platform-docs.opentargets.org/evidence#gene-burden">
-              here
-            </Link>{" "}
-            for more info on our assessment method
-          </>
-        }
-      >
-        Direction Of Effect
-      </Tooltip>
+      <DirectionOfEffectTooltip docsUrl="https://platform-docs.opentargets.org/evidence#gene-burden"></DirectionOfEffectTooltip>
     ),
     renderCell: ({ variantEffect, directionOnTrait }) => {
       return (

diff --git a/packages/sections/src/evidence/Impc/Body.jsx b/packages/sections/src/evidence/Impc/Body.jsx
@@ -12,6 +12,7 @@ import {
   getComparator,
   getPage,
   DirectionOfEffectIcon,
+  DirectionOfEffectTooltip,
 } from "ui";
 
 import client from "../../client";
@@ -88,9 +89,7 @@ const columns = [
   {
     id: "directionOfVariantEffect",
     label: (
-      <Tooltip showHelpIcon title={<>See <Link external to="https://platform-docs.opentargets.org/evidence#impc">here</Link> for more info on our assessment method</>}>
-        Direction Of Effect
-      </Tooltip>
+      <DirectionOfEffectTooltip docsUrl="https://platform-docs.opentargets.org/evidence#impc"></DirectionOfEffectTooltip>
     ),
     renderCell: ({ variantEffect, directionOnTrait }) => {
       return (

diff --git a/packages/sections/src/evidence/OTGenetics/Body.jsx b/packages/sections/src/evidence/OTGenetics/Body.jsx
@@ -7,6 +7,7 @@ import {
   LabelChip,
   DataTable,
   ScientificNotation,
+  DirectionOfEffectTooltip,
   Tooltip,
   DirectionOfEffectIcon,
 } from "ui";
@@ -142,23 +143,7 @@ function getColumns(label) {
     {
       id: "directionOfVariantEffect",
       label: (
-        <Tooltip
-          showHelpIcon
-          title={
-            <>
-              See{" "}
-              <Link
-                external
-                to="https://platform-docs.opentargets.org/evidence#open-targets-genetics"
-              >
-                here
-              </Link>{" "}
-              for more info on our assessment method
-            </>
-          }
-        >
-          Direction Of Effect
-        </Tooltip>
+        <DirectionOfEffectTooltip docsUrl="https://platform-docs.opentargets.org/evidence#open-targets-genetics"></DirectionOfEffectTooltip>
       ),
       renderCell: ({ variantEffect, directionOnTrait }) => {
         return (

diff --git a/packages/sections/src/evidence/Orphanet/Body.jsx b/packages/sections/src/evidence/Orphanet/Body.jsx
@@ -7,6 +7,7 @@ import {
   PublicationsDrawer,
   DataTable,
   DirectionOfEffectIcon,
+  DirectionOfEffectTooltip,
 } from "ui";
 
 import { definition } from ".";
@@ -71,9 +72,7 @@ const getColumns = label => [
   {
     id: "directionOfVariantEffect",
     label: (
-      <Tooltip showHelpIcon title={<>See <Link external to="https://platform-docs.opentargets.org/evidence#orphanet">here</Link> for more info on our assessment method</>}>
-        Direction Of Effect
-      </Tooltip>
+      <DirectionOfEffectTooltip docsUrl="https://platform-docs.opentargets.org/evidence#orphanet"></DirectionOfEffectTooltip>
     ),
     renderCell: ({ variantEffect, directionOnTrait }) => {
       return (

diff --git a/packages/ui/src/components/DirectionOfEffectTooltip.jsx b/packages/ui/src/components/DirectionOfEffectTooltip.jsx
@@ -0,0 +1,19 @@
+import OTTooltip from "./Tooltip";
+import Link from "./Link";
+
+function DirectionOfEffectTooltip({ docsUrl }) {
+  return (
+    <OTTooltip
+      showHelpIcon
+      title={
+        <Link external to={docsUrl}>
+          More info on our assessment method
+        </Link>
+      }
+    >
+      Direction of Effect
+    </OTTooltip>
+  );
+}
+
+export default DirectionOfEffectTooltip;
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
@@ -13,6 +13,7 @@ export { default as Chip } from "./components/Chip";
 export { default as ChipList } from "./components/ChipList";
 export { default as TooltipStyledLabel } from "./components/TooltipStyledLabel";
 export { default as DirectionOfEffectIcon } from "./components/DirectionOfEffectIcon";
+export { default as DirectionOfEffectTooltip } from "./components/DirectionOfEffectTooltip";
 export { default as LabelChip } from "./components/LabelChip";
 export { default as BasePage } from "./components/BasePage";
 export { default as NewChip } from "./components/NewChip";