Skip to content

Commit

Permalink
[Platform]: Target prioritisation mouse phenotypes (#290)
Browse files Browse the repository at this point in the history
  • Loading branch information
@carcruz
carcruz authored Nov 16, 2023
1 parent fc7ba39 commit a55b306
Show file tree
Hide file tree
Showing 5 changed files with 286 additions and 266 deletions.
8 changes: 6 additions & 2 deletions apps/platform/src/components/AssociationsToolkit/DataDownloader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import useBatchDownloader from "./hooks/useBatchDownloader";
import useAotfContext from "./hooks/useAotfContext";
import OriginalDataSources from "./static_datasets/dataSourcesAssoc";
import prioritizationCols from "./static_datasets/prioritizationCols";
import prioritizationCols from "./static_datasets/prioritisationColumns";
import {
getRowsQuerySelector,
getExportedColumns,
Expand Down Expand Up @@ -295,7 +295,11 @@ function DataDownloader({ fileStem }) {
>
<DialogTitle>Export: {fileStem} data</DialogTitle>
<DialogContent>
<Typography sx={{m: theme=> `${theme.spacing(1)} 0 ${theme.spacing(4)} 0`}} variant="subtitle2" gutterBottom>
<Typography
sx={{ m: theme => `${theme.spacing(1)} 0 ${theme.spacing(4)} 0` }}
variant="subtitle2"
gutterBottom
>
By clicking on the download tabs from this view, you will export the entire association
table (default option). Please expand the advanced options to export your own customised
view.
Expand Down
44 changes: 17 additions & 27 deletions apps/platform/src/components/AssociationsToolkit/Table/AggregationsRow.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,23 @@
import { useState } from 'react';
import { styled, Grid } from '@mui/material';
import { useState } from "react";
import { styled, Grid } from "@mui/material";

import AggregationsTooltip from './AssocTooltip';
import associationsColumns from '../static_datasets/dataSourcesAssoc';
import prioritizationColumns from '../static_datasets/prioritizationCols';
import { groupViewColumnsBy } from '../utils';
import { GridContainer } from '../layout';
import AggregationsTooltip from "./AssocTooltip";
import associationsColumns from "../static_datasets/dataSourcesAssoc";
import prioritizationColumns from "../static_datasets/prioritisationColumns";
import { groupViewColumnsBy } from "../utils";
import { GridContainer } from "../layout";

const AggregationsContainer = styled(GridContainer)({
gridColumnGap: '4px',
gridColumnGap: "4px",
});

const HiddenCol = styled('div')({
width: 'var(--table-left-column-width)',
display: 'flex',
const HiddenCol = styled("div")({
width: "var(--table-left-column-width)",
display: "flex",
});

const associationGrouped = groupViewColumnsBy(
associationsColumns,
'aggregation'
);
const prioritizationGrouped = groupViewColumnsBy(
prioritizationColumns,
'aggregation'
);
const associationGrouped = groupViewColumnsBy(associationsColumns, "aggregation");
const prioritizationGrouped = groupViewColumnsBy(prioritizationColumns, "aggregation");

function AggregationItem({
aggregation,
Expand Down Expand Up @@ -52,7 +46,7 @@ function AggregationItem({
gridRow: `row1-start / 2`,
};
const isActive = active === aggregation || open;
const className = `aggregation-indicator ${isActive && 'active'} clickAble`;
const className = `aggregation-indicator ${isActive && "active"} clickAble`;
return (
<button
type="button"
Expand All @@ -62,11 +56,8 @@ function AggregationItem({
onMouseLeave={() => onMouseLeave()}
onClick={() => onClick()}
>
<AggregationsTooltip
title={aggregation}
open={active === aggregation || open}
>
<div style={{ width: '100%' }} />
<AggregationsTooltip title={aggregation} open={active === aggregation || open}>
<div style={{ width: "100%" }} />
</AggregationsTooltip>
</button>
);
Expand All @@ -80,8 +71,7 @@ function AggregationsRow({
setActiveHeadersControlls,
columnsCount,
}) {
const dataset =
table === 'associations' ? associationGrouped : prioritizationGrouped;
const dataset = table === "associations" ? associationGrouped : prioritizationGrouped;
const aggregations = Object.keys(dataset);

return (
Expand Down
151 changes: 68 additions & 83 deletions apps/platform/src/components/AssociationsToolkit/Table/TableAssociations.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,98 +1,87 @@
/* eslint-disable */
import { useMemo } from 'react';
import { useMemo } from "react";
import {
useReactTable,
getCoreRowModel,
getExpandedRowModel,
createColumnHelper,
} from '@tanstack/react-table';
} from "@tanstack/react-table";

import { styled, Skeleton, Typography } from '@mui/material';
import { styled, Skeleton, Typography } from "@mui/material";

import dataSourcesCols from '../static_datasets/dataSourcesAssoc';
import prioritizationCols from '../static_datasets/prioritizationCols';
import dataSourcesCols from "../static_datasets/dataSourcesAssoc";
import prioritizationCols from "../static_datasets/prioritisationColumns";

import AggregationsTooltip from './AssocTooltip';
import ColoredCell from './ColoredCell';
import AggregationsTooltip from "./AssocTooltip";
import ColoredCell from "./ColoredCell";

import HeaderControls from '../HeaderControls';
import CellName from './CellName';
import TableHeader from './TableHeader';
import TableFooter from './TableFooter';
import TableBody from './TableBody';
import useAotfContext from '../hooks/useAotfContext';
import HeaderControls from "../HeaderControls";
import CellName from "./CellName";
import TableHeader from "./TableHeader";
import TableFooter from "./TableFooter";
import TableBody from "./TableBody";
import useAotfContext from "../hooks/useAotfContext";

import { cellHasValue, isPartnerPreview, tableCSSVariables } from '../utils';
import { cellHasValue, isPartnerPreview, tableCSSVariables } from "../utils";

const TableElement = styled('main')({
maxWidth: '1600px',
margin: '0 auto',
const TableElement = styled("main")({
maxWidth: "1600px",
margin: "0 auto",
});

const TableDivider = styled('div')({
borderBottom: '1px solid #ececec',
const TableDivider = styled("div")({
borderBottom: "1px solid #ececec",
marginBottom: 4,
});

const columnHelper = createColumnHelper();

/* Build table columns bases on displayed table */
function getDatasources({ expanderHandler, displayedTable }) {
const isAssociations = displayedTable === 'associations';
const isAssociations = displayedTable === "associations";
const baseCols = isAssociations ? dataSourcesCols : prioritizationCols;
const dataProp = isAssociations ? 'dataSources' : 'prioritisations';
const dataProp = isAssociations ? "dataSources" : "prioritisations";
const datasources = [];
baseCols.forEach(
({
baseCols.forEach(({ id, label, sectionId, description, aggregation, isPrivate, docsLink }) => {
if (isPrivate && isPrivate !== isPartnerPreview) return;
const column = columnHelper.accessor(row => row[dataProp][id], {
id,
label,
header: isAssociations ? (
<Typography variant="assoc_header">{label}</Typography>
) : (
<AggregationsTooltip title={description} placement="right">
<div className="cursor-help">
<Typography variant="assoc_header">{label}</Typography>
</div>
</AggregationsTooltip>
),
sectionId,
description,
enableSorting: isAssociations,
aggregation,
isPrivate,
docsLink,
}) => {
if (isPrivate && isPrivate !== isPartnerPreview) return;
const column = columnHelper.accessor(row => row[dataProp][id], {
id,
header: isAssociations ? (
<Typography variant="assoc_header">{label}</Typography>
cell: row => {
const { prefix, loading } = row.table.getState();
if (loading) return <Skeleton variant="circular" width={26} height={26} />;
const hasValue = cellHasValue(row.getValue());
return hasValue ? (
<ColoredCell
hasValue
scoreId={id}
scoreValue={row.getValue()}
onClick={expanderHandler(row.row.getToggleExpandedHandler())}
cell={row}
loading={loading}
isAssociations={isAssociations}
tablePrefix={prefix}
/>
) : (
<AggregationsTooltip title={description} placement="right">
<div className="cursor-help">
<Typography variant="assoc_header">{label}</Typography>
</div>
</AggregationsTooltip>
),
sectionId,
enableSorting: isAssociations,
aggregation,
isPrivate,
docsLink,
cell: row => {
const { prefix, loading } = row.table.getState();
if (loading)
return <Skeleton variant="circular" width={26} height={26} />;
const hasValue = cellHasValue(row.getValue());
return hasValue ? (
<ColoredCell
hasValue
scoreId={id}
scoreValue={row.getValue()}
onClick={expanderHandler(row.row.getToggleExpandedHandler())}
cell={row}
loading={loading}
isAssociations={isAssociations}
tablePrefix={prefix}
/>
) : (
<ColoredCell />
);
},
});
datasources.push(column);
}
);
<ColoredCell />
);
},
});
datasources.push(column);
});
return datasources;
}

Expand All @@ -116,16 +105,16 @@ function TableAssociations() {
pinnedLoading,
} = useAotfContext();

const rowNameEntity = entity === 'target' ? 'name' : 'approvedSymbol';
const rowNameEntity = entity === "target" ? "name" : "approvedSymbol";

const columns = useMemo(
() => [
columnHelper.group({
header: 'header',
id: 'naiming-cols',
header: "header",
id: "naiming-cols",
columns: [
columnHelper.accessor(row => row[entityToGet][rowNameEntity], {
id: 'name',
id: "name",
enableSorting: false,
cell: row => {
const { loading, prefix } = row.table.getState();
Expand All @@ -140,19 +129,16 @@ function TableAssociations() {
);
},
header: () => {
const label = entityToGet === 'target' ? 'Target' : 'Disease';
const label = entityToGet === "target" ? "Target" : "Disease";
return <Typography variant="assoc_header">{label}</Typography>;
},
}),
columnHelper.accessor(row => row.score, {
id: 'score',
header: (
<Typography variant="assoc_header">Association Score</Typography>
),
id: "score",
header: <Typography variant="assoc_header">Association Score</Typography>,
cell: row => {
const { loading } = row.table.getState();
if (loading)
return <Skeleton variant="rect" width={30} height={25} />;
if (loading) return <Skeleton variant="rect" width={30} height={25} />;
return (
<ColoredCell
scoreValue={row.getValue()}
Expand All @@ -167,8 +153,8 @@ function TableAssociations() {
],
}),
columnHelper.group({
header: 'entities',
id: 'entity-cols',
header: "entities",
id: "entity-cols",
columns: [...getDatasources({ expanderHandler, displayedTable })],
}),
],
Expand All @@ -186,7 +172,7 @@ function TableAssociations() {
expanded: tableExpanded,
pagination,
sorting,
prefix: 'body',
prefix: "body",
loading: associationsLoading,
},
pageCount: count,
Expand All @@ -211,7 +197,7 @@ function TableAssociations() {
pageSize: 150,
},
sorting,
prefix: 'pinned',
prefix: "pinned",
loading: pinnedLoading,
},
pageCount: count,
Expand All @@ -226,8 +212,7 @@ function TableAssociations() {
manualSorting: true,
});

const entitesHeaders =
coreAssociationsTable.getHeaderGroups()[0].headers[1].subHeaders;
const entitesHeaders = coreAssociationsTable.getHeaderGroups()[0].headers[1].subHeaders;

return (
<div className="TAssociations" style={tableCSSVariables}>
Expand Down
Loading

0 comments on commit a55b306

Please sign in to comment.