From 6781991021180813be74f80c05b0456a742ba934 Mon Sep 17 00:00:00 2001 From: Carlos Cruz Date: Tue, 17 Oct 2023 14:17:48 +0100 Subject: [PATCH] [Platform]: Validation lab section not showing correct styles (#275) --- .../src/evidence/OTValidation/Body.jsx | 140 +++++++----------- 1 file changed, 55 insertions(+), 85 deletions(-) diff --git a/packages/sections/src/evidence/OTValidation/Body.jsx b/packages/sections/src/evidence/OTValidation/Body.jsx index 31169ca0a..47a7c836d 100644 --- a/packages/sections/src/evidence/OTValidation/Body.jsx +++ b/packages/sections/src/evidence/OTValidation/Body.jsx @@ -14,7 +14,7 @@ import { dataTypesMap } from "../../dataTypes"; import { defaultRowsPerPageOptions } from "../../constants"; import VALIDATION_QUERY from "./OTValidationQuery.gql"; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles(theme => ({ primaryColor: { color: theme.palette.primary.main, }, @@ -40,31 +40,31 @@ const useStyles = makeStyles((theme) => ({ width: "32px", }, hsGreen: { - backgroundColor: "#407253", // same as PPP green - border: `1px solid ${theme.palette.grey[600]}`, + backgroundColor: "#407253 !important", // same as PPP green + border: `1px solid ${theme.palette.grey[600]} !important`, }, hsRed: { - backgroundColor: "#9e1316", - border: `1px solid ${theme.palette.grey[600]}`, + backgroundColor: "#9e1316 !important", + border: `1px solid ${theme.palette.grey[600]} !important`, }, hsWhite: { - backgroundColor: "#ffffff", - color: theme.palette.grey[600], - border: `1px solid ${theme.palette.grey[600]}`, + backgroundColor: "#ffffff !important", + color: `${theme.palette.grey[600]} !important`, + border: `1px solid ${theme.palette.grey[600]} !important`, }, hsBlack: { - backgroundColor: "#000", - border: `1px solid ${theme.palette.grey[600]}`, + backgroundColor: "#000 !important", + border: `1px solid ${theme.palette.grey[600]} !important`, }, hsBlue: { - backgroundColor: "#3489ca", - border: `1px solid ${theme.palette.grey[600]}`, + backgroundColor: "#3489ca !important", + border: `1px solid ${theme.palette.grey[600]} !important`, }, // in the unlikely case the hypothesis status is unavailable, // we don't want to display the primary green (for PPP) hsUndefined: { - backgroundColor: theme.palette.grey[500], - border: `1px solid ${theme.palette.grey[600]}`, + backgroundColor: `${theme.palette.grey[500]} !important`, + border: `1px solid ${theme.palette.grey[600]} !important`, }, })); @@ -113,24 +113,18 @@ const hypothesesStatus = [ }, ]; -const getColumns = (classes) => [ +const getColumns = classes => [ { id: "disease", label: "Reported disease", - renderCell: (row) => ( - {row.disease.name} - ), - filterValue: (row) => `${row.diseaseLabel}, ${row.diseaseId}`, + renderCell: row => {row.disease.name}, + filterValue: row => `${row.diseaseLabel}, ${row.diseaseId}`, }, { id: "projectDescription", label: "OTAR primary project", - tooltip: ( - <> - Binary assessment of gene perturbation effect in primary project screen - - ), - renderCell: (row) => ( + tooltip: <>Binary assessment of gene perturbation effect in primary project screen, + renderCell: row => ( {row.projectDescription} @@ -138,24 +132,24 @@ const getColumns = (classes) => [ ), - filterValue: (row) => `${row.projectDescription}, ${row.projectId}`, + filterValue: row => `${row.projectDescription}, ${row.projectId}`, }, { id: "contrast", label: "Contrast", - renderCell: (row) => ( + renderCell: row => ( {row.contrast} ), - filterValue: (row) => `${row.contrast}, ${row.studyOverview}`, + filterValue: row => `${row.contrast}, ${row.studyOverview}`, }, { id: "diseaseCellLines", label: "Cell line", - renderCell: (row) => ( + renderCell: row => ( <> - {row.diseaseCellLines.map((line) => ( + {row.diseaseCellLines.map(line => ( [ ))} ), - filterValue: (row) => - row.diseaseCellLines.map((line) => `${line.name}, ${line.id}`).join(", "), + filterValue: row => row.diseaseCellLines.map(line => `${line.name}, ${line.id}`).join(", "), width: "8%", }, { id: "biomarkerList", label: "Cell line biomarkers", - renderCell: (row) => ( + renderCell: row => ( ({ + items={row.biomarkerList.map(bm => ({ label: bm.name, tooltip: bm.description, customClass: classes.hsWhite, }))} /> ), - filterValue: (row) => - row.biomarkerList.map((bm) => `${bm.name}, ${bm.description}`).join(", "), + filterValue: row => row.biomarkerList.map(bm => `${bm.name}, ${bm.description}`).join(", "), width: "16%", }, { id: "resourceScore", label: "Effect size", - renderCell: (row) => row.resourceScore, + renderCell: row => row.resourceScore, numeric: true, width: "8%", }, @@ -198,17 +190,13 @@ const getColumns = (classes) => [ id: "confidence", label: "OTVL hit", tooltip: <>Binary assessment of gene perturbation effect in contrast, - renderCell: (row) => ( - - ), + renderCell: row => , width: "8%", }, { id: "projectHit", label: "Primary project hit", - renderCell: (row) => ( - - ), + renderCell: row => , width: "8%", }, { @@ -221,48 +209,47 @@ const getColumns = (classes) => [ const exportColumns = [ { label: "disease", - exportValue: (row) => row.disease.name, + exportValue: row => row.disease.name, }, { label: "disease id", - exportValue: (row) => row.disease.id, + exportValue: row => row.disease.id, }, { label: "project description", - exportValue: (row) => row.projectDescription, + exportValue: row => row.projectDescription, }, { label: "project id", - exportValue: (row) => row.projectId, + exportValue: row => row.projectId, }, { label: "contrast", - exportValue: (row) => row.contrast, + exportValue: row => row.contrast, }, { label: "study overview", - exportValue: (row) => row.studyOverview, + exportValue: row => row.studyOverview, }, { label: "disease cell line", - exportValue: (row) => - row.diseaseCellLines.map((line) => `${line.name} (${line.id})`), + exportValue: row => row.diseaseCellLines.map(line => `${line.name} (${line.id})`), }, { label: "biomarkers", - exportValue: (row) => row.biomarkerList.map((bm) => bm.name), + exportValue: row => row.biomarkerList.map(bm => bm.name), }, { label: "effect size", - exportValue: (row) => row.resourceScore, + exportValue: row => row.resourceScore, }, { label: "hit", - exportValue: (row) => isHit(row.confidence), + exportValue: row => isHit(row.confidence), }, { label: "primary project hit", - exportValue: (row) => isHit(row.expectedConfidence), + exportValue: row => isHit(row.expectedConfidence), }, ]; @@ -280,22 +267,19 @@ function Body({ id, label, entity }) { chipText={dataTypesMap.ot_validation_lab} request={request} entity={entity} - renderDescription={() => ( - - )} + renderDescription={() => } renderBody={({ disease }) => { const { rows } = disease.otValidationSummary; const hypothesis = _.uniqBy( rows.reduce( (prev, curr) => prev.concat( - curr.validationHypotheses.map((vht) => ({ + curr.validationHypotheses.map(vht => ({ label: vht.name, tooltip: vht.description, customClass: classes[ - hypothesesStatus.find((s) => s.status === vht.status) - ?.styles || "hsUndefined" + hypothesesStatus.find(s => s.status === vht.status)?.styles || "hsUndefined" ], })) ), @@ -308,28 +292,19 @@ function Body({ id, label, entity }) { return ( <> - + - This table provides an overarching summary of the - target-disease association in the context of the listed - biomarkers, based on criteria described{" "} - + This table provides an overarching summary of the target-disease association + in the context of the listed biomarkers, based on criteria described{" "} + here - , as informed by the target performance across the whole - cell line panel. Colour-coding indicates whether a - dependency was expected to be associated with a biomarker - (based on Project SCORE data) and whether it was observed - as such (based on OTVL data). + , as informed by the target performance across the whole cell line panel. + Colour-coding indicates whether a dependency was expected to be associated + with a biomarker (based on Project SCORE data) and whether it was observed as + such (based on OTVL data). } showHelpIcon @@ -341,16 +316,11 @@ function Body({ id, label, entity }) { {/** LEGEND */}
- {hypothesesStatus.map((hs) => ( + {hypothesesStatus.map(hs => ( - +