Skip to content

Commit

Permalink
[Platform]: AotF Target interactors UI recap (opentargets#489)
Browse files Browse the repository at this point in the history
  • Loading branch information
@carcruz
carcruz authored Sep 24, 2024
1 parent 3188a66 commit cfb829b
Show file tree
Hide file tree
Showing 7 changed files with 176 additions and 150 deletions.
72 changes: 20 additions & 52 deletions ...form/src/components/AssociationsToolkit/components/RowInteractors/RowInteractorsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,7 @@ type ThresholdState = number | null | undefined;
const INTERACTORS_SOURCE_LABEL = (
assoc: number,
interactors: number,
source: InteractorsSource,
targetName: string
source: InteractorsSource
): ReactElement => {
const interactorTypeMap = {
[INTERACTORS_SOURCES.REACTOME]: "pathway-based",
Expand All @@ -55,8 +54,7 @@ const INTERACTORS_SOURCE_LABEL = (
return (
<>
<b>{assoc}</b> target-disease association{assoc === 1 ? "" : "s"} found for{" "}
<b>{interactors}</b> {interactorType} interactor{interactors === 1 ? "" : "s"} of{" "}
<b>{targetName}</b>
<b>{interactors}</b> {interactorType} interactor{interactors === 1 ? "" : "s"}
</>
);
};
Expand All @@ -73,18 +71,15 @@ const btnStyles = {

const leftBTNStyles = {
...btnStyles,
background: grey[300],
marginRight: 2,
marginRight: 1,
};

const rightBTNStyles = {
...btnStyles,
marginLeft: 2,
borderLeft: "1px solid",
marginRight: 2,
borderColor: grey[400],
cursor: "pointer",
"&:hover": {
background: grey[300],
color: "#000",
},
};
Expand All @@ -107,24 +102,6 @@ const OTSlider = styled(Slider)({
},
});

function RowLine() {
return (
<Box
sx={{
left: "10px",
width: "20px",
bottom: "24px",
height: "6000px",
position: "absolute",
background: "transparent",
borderLeft: 1.5,
borderBottom: 1.5,
borderColor: grey[400],
}}
></Box>
);
}

function RowInteractorsTable({ row, columns, nameProperty, parentTable }) {
const {
id: diseaseId,
Expand Down Expand Up @@ -221,46 +198,25 @@ function RowInteractorsTable({ row, columns, nameProperty, parentTable }) {
return (
<Box sx={{ pb: 2, background: grey[100], position: "relative" }}>
<Box sx={{ position: "relative", pt: 2 }}>
<RowLine />
<Box
sx={{
// justifyContent: "space-between",
boxSizing: "border-box",
alignItems: "center",
display: "flex",
border: "1px solid",
borderColor: grey[400],
position: "relative",
mb: 2,
ml: 3,
}}
>
<Box sx={leftBTNStyles}>
<FontAwesomeIcon size="sm" icon={faBezierCurve} />
<FontAwesomeIcon icon={faBezierCurve} />
</Box>
<Box sx={{ display: "flex", alignItems: "center", gap: 1, width: "100%" }}>
<Typography variant="controlHeader" sx={{ mr: 2 }}>
Interactors
Interactors for {label}
</Typography>
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
gap={1}
width="100%"
>
{loading ? (
<Skeleton width={500} />
) : (
<Typography variant="body2" sx={{ mr: 4 }}>
{INTERACTORS_SOURCE_LABEL(
data?.length,
interactorsMetadata?.count,
focusElement?.interactorsSource,
label
)}
</Typography>
)}
<Box display="flex" alignItems="center" justifyContent="space-between" gap={1} flex={1}>
<Box sx={{ display: "flex", gap: 2 }}>
<Box display="flex" alignItems="center" gap={1}>
<InputLabel sx={{ fontSize: "0.85rem" }} htmlFor="intaractor_data_source">
Expand Down Expand Up @@ -335,11 +291,23 @@ function RowInteractorsTable({ row, columns, nameProperty, parentTable }) {
)}
</Box>
</Box>
{loading ? (
<Skeleton width={500} />
) : (
<Typography variant="body2" sx={{ mr: 4 }}>
{INTERACTORS_SOURCE_LABEL(
data?.length,
interactorsMetadata?.count,
focusElement?.interactorsSource,
label
)}
</Typography>
)}
</Box>
</Box>
<Tooltip title={`Close ${label} interactors`}>
<Box onClick={() => onClickCloseInteractors()} sx={rightBTNStyles}>
<FontAwesomeIcon size="sm" icon={faClose} />
<FontAwesomeIcon size="xl" icon={faClose} />
</Box>
</Tooltip>
</Box>
Expand Down
26 changes: 23 additions & 3 deletions ...latform/src/components/AssociationsToolkit/components/RowInteractors/useRowInteractors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,14 @@ function useRowInteractors({
},
});

if (!targetRowInteractorsRequest.data) {
if (!targetRowInteractorsRequest?.data?.target?.interactions?.rows) {
setState({
interactorsMetadata: { count: 0 },
loading: false,
initialLoading: false,
count: 0,
data: [],
});
return;
}

Expand Down Expand Up @@ -96,12 +103,17 @@ function useRowInteractors({
interactorsAssociationsRequest.data
);

const interactorsAssociationsWithScore = addInteractorScore(
interactorsAssociations,
targetRowInteractorsRequest.data.target.interactions.rows
);

setState({
interactorsMetadata: targetRowInteractorsRequest.data.target.interactions,
loading: false,
initialLoading: false,
count: interactorsAssociations.length,
data: interactorsAssociations,
count: interactorsAssociationsWithScore.length,
data: interactorsAssociationsWithScore,
});
}
if (isCurrent) getInteractors();
Expand All @@ -111,4 +123,12 @@ function useRowInteractors({
return state;
}

function addInteractorScore(associationsData, interactorsMetaData) {
return associationsData.map(element => {
const foundInteractor = interactorsMetaData.find(x => x.targetB?.id === element.id);
if (!foundInteractor) return { ...element, interactorScore: 0 };
return { ...element, interactorScore: foundInteractor.score };
});
}

export default useRowInteractors;
22 changes: 21 additions & 1 deletion apps/platform/src/components/AssociationsToolkit/components/Table/CellName.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,11 @@ function CellName({ cell, colorScale }) {
});
};

const handleContextMenu = e => {
e.preventDefault();
handleToggle();
};

const handleToggle = () => {
setOpenContext(true);
dispatch({
Expand Down Expand Up @@ -196,15 +201,30 @@ function CellName({ cell, colorScale }) {

return (
<NameContainer>
<TextContainer onClick={handleToggle}>
<TextContainer onClick={handleToggle} onContextMenu={handleContextMenu}>
<Typography sx={{ width: isSmallScreen ? "90px" : "150px" }} noWrap variant="body2">
{name}
{prefix === TABLE_PREFIX.INTERACTORS && cell.row.original.interactorScore ? (
<>
{" "}
-
<Box
component="span"
sx={{ fontSize: "0.8rem", width: "35px", display: "inline-block", fontWeight: 800 }}
>
{cell.row.original.interactorScore.toFixed(2)}
</Box>
</>
) : (
""
)}
</Typography>
</TextContainer>
<ContextMenuContainer
ref={contextMenuRef}
className="ContextMenuContainer"
onClick={handleToggle}
onContextMenu={handleContextMenu}
active={openContext}
>
<FontAwesomeIcon icon={faEllipsisVertical} size="lg" />
Expand Down
82 changes: 41 additions & 41 deletions apps/platform/src/components/AssociationsToolkit/components/Table/SectionRender.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,10 @@ const LoadingContainer = styled("div")({
const Container = styled("div", {
shouldForwardProp: prop => prop !== "table",
})(({ table, theme }) => ({
paddingTop: "10px",
paddingBottom: "10px",
paddingLeft: table === "interactors" ? theme.spacing(9) : theme.spacing(3),
paddingTop: theme.spacing(2),
paddingBottom: theme.spacing(2),
paddingLeft: table === "interactors" ? theme.spacing(6) : theme.spacing(3),
paddingRight: table === "interactors" ? theme.spacing(6) : theme.spacing(3),
background: grey[100],
}));

Expand All @@ -39,10 +40,36 @@ function SectionNotFound() {
return <div>Section not found</div>;
}

const getComponentConfig = (displayedTable, row, entity, id, section) => {
switch (displayedTable) {
case "prioritisations":
return {
Component: targetSections.get(section[1]),
componentId: entity === ENTITIES.DISEASE ? row.id : id,
label: row.original.targetSymbol,
entityOfSection: "target",
};
case "associations":
return {
Component: evidenceSections.get(section[1]),
componentId: {
ensgId: entity === ENTITIES.DISEASE ? row.id : id,
efoId: entity === ENTITIES.DISEASE ? id : row.id,
},
label: {
symbol: row.original.targetSymbol,
name: row.original.diseaseName,
},
entityOfSection: "disease",
};
default:
return { Component: SectionNotFound };
}
};

export function SectionRender({
id,
entity,
focusElement,
row,
table,
entityToGet,
Expand All @@ -51,44 +78,17 @@ export function SectionRender({
cols = [],
section,
}) {
let label = row.original[entityToGet][nameProperty];
let ensgId;
let efoId;
let componentId;
let Component;
let entityOfSection = entity;

if (section === undefined) return <></>;

// const section = focusElement

const flatCols = cols.map(c => c.id);
if (!flatCols.includes(section[0])) return <></>;

switch (displayedTable) {
case "prioritisations": {
Component = targetSections.get(section[1]);
const { targetSymbol } = row.original;
ensgId = entity === ENTITIES.DISEASE ? row.id : id;
label = targetSymbol;
componentId = ensgId;
entityOfSection = "target";
break;
}
case "associations": {
Component = evidenceSections.get(section[1]);
const { diseaseName, targetSymbol } = row.original;
ensgId = entity === ENTITIES.DISEASE ? row.id : id;
efoId = entity === ENTITIES.DISEASE ? id : row.id;
componentId = { ensgId, efoId };
label = { symbol: targetSymbol, name: diseaseName };
entityOfSection = "disease";
break;
}
default:
return <SectionNotFound />;
if (!section || !cols.some(c => c.id === section[0])) {
return null;
}

const {
Component,
componentId,
label = row.original[entityToGet][nameProperty],
entityOfSection = entity,
} = getComponentConfig(displayedTable, row, entity, id, section);

if (!Component) return <SectionNotFound />;

return (
Expand All @@ -99,6 +99,6 @@ export function SectionRender({
}

export function SectionRendererWrapper({ children, section }) {
if (!section) return <></>;
if (!section) return null;
return <Suspense fallback={<LoadingSection />}>{children}</Suspense>;
}
Loading

0 comments on commit cfb829b

Please sign in to comment.