Skip to content

Commit

Permalink
[Platform]: Validation lab section not showing correct styles (#275)
Browse files Browse the repository at this point in the history
  • Loading branch information
@carcruz
carcruz committed Oct 17, 2023
1 parent 3ec2f4d commit 6781991
Showing 1 changed file with 55 additions and 85 deletions.
140 changes: 55 additions & 85 deletions packages/sections/src/evidence/OTValidation/Body.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand All @@ -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`,
},
}));

Expand Down Expand Up @@ -113,49 +113,43 @@ const hypothesesStatus = [
},
];

const getColumns = (classes) => [
const getColumns = classes => [
{
id: "disease",
label: "Reported disease",
renderCell: (row) => (
<Link to={`/disease/${row.disease.id}`}>{row.disease.name}</Link>
),
filterValue: (row) => `${row.diseaseLabel}, ${row.diseaseId}`,
renderCell: row => <Link to={`/disease/${row.disease.id}`}>{row.disease.name}</Link>,
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 => (
<Link to={`http://home.opentargets.org/${row.projectId}`} external>
{row.projectDescription}
<Typography variant="caption" display="block">
{row.projectId}
</Typography>
</Link>
),
filterValue: (row) => `${row.projectDescription}, ${row.projectId}`,
filterValue: row => `${row.projectDescription}, ${row.projectId}`,
},
{
id: "contrast",
label: "Contrast",
renderCell: (row) => (
renderCell: row => (
<Tooltip title={row.studyOverview} showHelpIcon>
{row.contrast}
</Tooltip>
),
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 => (
<Link
to={`https://cellmodelpassports.sanger.ac.uk/passports/${line.id}`}
external
Expand All @@ -166,49 +160,43 @@ const getColumns = (classes) => [
))}
</>
),
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 => (
<ChipList
small
items={row.biomarkerList.map((bm) => ({
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%",
},
{
id: "confidence",
label: "OTVL hit",
tooltip: <>Binary assessment of gene perturbation effect in contrast</>,
renderCell: (row) => (
<HitIcon isHit={isHit(row.confidence)} classes={classes} />
),
renderCell: row => <HitIcon isHitValue={isHit(row.confidence)} classes={classes} />,
width: "8%",
},
{
id: "projectHit",
label: "Primary project hit",
renderCell: (row) => (
<HitIcon isHit={isHit(row.expectedConfidence)} classes={classes} />
),
renderCell: row => <HitIcon isHitValue={isHit(row.expectedConfidence)} classes={classes} />,
width: "8%",
},
{
Expand All @@ -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),
},
];

Expand All @@ -280,22 +267,19 @@ function Body({ id, label, entity }) {
chipText={dataTypesMap.ot_validation_lab}
request={request}
entity={entity}
renderDescription={() => (
<Description symbol={label.symbol} name={label.name} />
)}
renderDescription={() => <Description symbol={label.symbol} name={label.name} />}
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"
],
}))
),
Expand All @@ -308,28 +292,19 @@ function Body({ id, label, entity }) {
return (
<>
<Box className={classes.hypotesisBox}>
<Typography
variant="subtitle1"
gutterBottom
className={classes.bold}
>
<Typography variant="subtitle1" gutterBottom className={classes.bold}>
<Tooltip
title={
<>
This table provides an overarching summary of the
target-disease association in the context of the listed
biomarkers, based on criteria described{" "}
<Link
external
to="http://home.opentargets.org/ppp-documentation"
>
This table provides an overarching summary of the target-disease association
in the context of the listed biomarkers, based on criteria described{" "}
<Link external to="http://home.opentargets.org/ppp-documentation">
here
</Link>
, 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
Expand All @@ -341,16 +316,11 @@ function Body({ id, label, entity }) {
{/** LEGEND */}
<div className={classes.hypotesisLegend}>
<Grid container spacing={4} direction="row">
{hypothesesStatus.map((hs) => (
{hypothesesStatus.map(hs => (
<Grid item key={hs.status}>
<Grid container spacing={1} alignItems="center">
<Grid item>
<Chip
className={classNames(
classes[hs.styles],
classes.hsLegendChip
)}
/>
<Chip className={classNames(classes.hsLegendChip, classes[hs.styles])} />
</Grid>
<Grid item>
<Typography variant="caption" display="block">
Expand Down

0 comments on commit 6781991

Please sign in to comment.