feat: enhance InSilicoPredictors component with sorting and improved …

…chart labels
opentargets · Dec 9, 2024 · 045476d · 045476d
1 parent b19b288
commit 045476d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/packages/sections/src/variant/InSilicoPredictors/Body.tsx b/packages/sections/src/variant/InSilicoPredictors/Body.tsx
@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import { useQuery } from "@apollo/client";
 import { Typography } from "@mui/material";
 import { SectionItem, Tooltip, OtTable } from "ui";
@@ -51,7 +52,15 @@ type BodyProps = {
   entity: string;
 };
 
-export function Body({ id, entity }: BodyProps) {
+function getSortedRows(request) {
+  return request.data?.variant?.inSilicoPredictors
+    ? [...request.data.variant.inSilicoPredictors]
+        .filter(e => e.method !== null)
+        .sort((row1, row2) => row1.method.localeCompare(row2.method))
+    : [];
+}
+
+export function Body({ id, entity }: BodyProps): ReactElement {
   const variables = {
     variantId: id,
   };
@@ -72,20 +81,19 @@ export function Body({ id, entity }: BodyProps) {
           alternateAllele={request.data?.variant.alternateAllele}
         />
       )}
-      renderChart={() => (
-        <InSilicoPredictorsVisualisation
-          data={request.data.variant.inSilicoPredictors}
-          query={IN_SILICO_PREDICTORS_QUERY.loc.source.body}
-          variables={variables}
-          columns={columns}
-        />
-      )}
+      renderChart={() => {
+        const rows = getSortedRows(request);
+        return (
+          <InSilicoPredictorsVisualisation
+            data={rows}
+            query={IN_SILICO_PREDICTORS_QUERY.loc.source.body}
+            variables={variables}
+            columns={columns}
+          />
+        );
+      }}
       renderBody={() => {
-        let rows = [];
-        if (request.data)
-          rows = [...request.data.variant.inSilicoPredictors].sort((row1, row2) => {
-            return row1.method.localeCompare(row2.method);
-          });
+        const rows = getSortedRows(request);
         return (
           <OtTable
             columns={columns}

diff --git a/packages/sections/src/variant/InSilicoPredictors/InSilicoPredictorsPlot.tsx b/packages/sections/src/variant/InSilicoPredictors/InSilicoPredictorsPlot.tsx
@@ -87,6 +87,9 @@ function Plot({ data, width }) {
         tickSize: 0,
         domain: [-1, 1],
       },
+      y: {
+        tickSize: 0,
+      },
 
       color: {
         legend: false,
@@ -114,28 +117,31 @@ function Plot({ data, width }) {
           fill: "normalisedScore",
           stroke: grey[100],
           strokeWidth: 4,
+          strokeOpacity: 0.8,
           tip: {
             fontSize: 14,
             textPadding: 20,
+            textOverflow: "clip",
             format: {
               x: false,
               y: false,
               fill: false,
+              stroke: false,
               normalisedScore: false,
             },
           },
           channels: {
             method: {
               value: "method",
-              label: "",
+              label: "Method:",
             },
             assessment: {
               value: "assessment",
               label: "Assessment:",
             },
             score: {
               value: "score",
-              label: "Score:",
+              label: "Method score:",
             },
             assessmentFlag: {
               value: "assessmentFlag",