Skip to content

Commit

Permalink
Merge pull request #121 from bcgsc/release/v6.6.1
Browse files Browse the repository at this point in the history 
Release/v6.6.1
  • Loading branch information
@kttkjl
kttkjl authored Nov 19, 2021
2 parents 917f6f5 + bffd140 commit 8772cea
Show file tree
Hide file tree
Showing 10 changed files with 372 additions and 36 deletions.
97 changes: 97 additions & 0 deletions app/components/DataTable/components/CivicCellRenderer/CivicCellRenderer.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
// eslint-disable-next-line import/no-extraneous-dependencies
import '@ag-grid-community/core/dist/styles/ag-grid.css';
// eslint-disable-next-line import/no-extraneous-dependencies
import '@ag-grid-community/core/dist/styles/ag-theme-material.min.css';
import React from 'react';
import { Story } from '@storybook/react/types-6-0';
import { AgGridReact } from '@ag-grid-community/react/lib/agGridReact';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import CivicCellRenderer, { CivicCellRendererProps } from '.';

export default {
title: 'renderers/CivicCellRenderer',
component: CivicCellRenderer,
};

const Template = (args) => <CivicCellRenderer {...args} />;

export const WithinGrid = ({
data = [
{
externalSource: ['IPRKB', 'GraphKB', 'CIViC'],
externalStatementId: ['uuid-iprkb', 'uuid-kb', '1100', '1110', '1111'],
}, {
externalSource: 'CIViC',
externalStatementId: '1100',
},
],
}: CivicCellRendererProps): JSX.Element => (
<div className="ag-theme-material">
<AgGridReact
columnDefs={[
{
headerName: 'External Source',
colId: 'externalSource',
cellRenderer: 'CivicCellRenderer',
},
]}
frameworkComponents={{
CivicCellRenderer,
}}
suppressAnimationFrame
suppressColumnVirtualisation
disableStaticMarkup
modules={[ClientSideRowModelModule]}
rowData={data}
domLayout="autoHeight"
/>
</div>
);

export const CivicSingle: Story<CivicCellRendererProps> = Template.bind({});
CivicSingle.args = {
data: {
externalSource: 'CIViC',
externalStatementId: '1100',
},
};

export const CivicArray: Story<CivicCellRendererProps> = Template.bind({});
CivicArray.args = {
data: {
externalSource: 'CIViC',
externalStatementId: ['1000', '1100', '1110', '1111'],
},
};

export const VariousSourcesNoCivicArray: Story<CivicCellRendererProps> = Template.bind({});
VariousSourcesNoCivicArray.args = {
data: {
externalSource: ['IPRKB', 'totes-not-civic'],
externalStatementId: ['uuid-id', '1100', '1110', '1111'],
},
};

export const VariousSourcesWithCivicArray: Story<CivicCellRendererProps> = Template.bind({});
VariousSourcesWithCivicArray.args = {
data: {
externalSource: ['IPRKB', 'GraphKB', 'CIViC'],
externalStatementId: ['uuid-id', '1100', '1110', '1111'],
},
};

export const NoCivicSingle: Story<CivicCellRendererProps> = Template.bind({});
NoCivicSingle.args = {
data: {
externalSource: 'IPRKB',
externalStatementId: 'uuid-id',
},
};

export const NoCivicArray: Story<CivicCellRendererProps> = Template.bind({});
NoCivicArray.args = {
data: {
externalSource: 'IPRKB',
externalStatementId: ['uuid-id1', 'uuid-id2', 'uuid-id3'],
},
};
92 changes: 80 additions & 12 deletions app/components/DataTable/components/CivicCellRenderer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,33 +3,101 @@ import React, { useState, useEffect } from 'react';
import NewTabLink from '@/components/NewTabLink';
// eslint-disable-next-line import/no-extraneous-dependencies
import { ICellRendererParams } from '@ag-grid-community/core';
import {
Button, IconButton, Menu, MenuItem,
} from '@material-ui/core';
import { OpenInNew } from '@material-ui/icons';

type CivicCellRendererProps = ICellRendererParams['data'];

const CivicCellRenderer = ({
data,
}: CivicCellRendererProps): JSX.Element => {
const {
externalStatementId,
externalSource,
} = data;

const [link, setLink] = useState('');
const [links, setLinks] = useState<string[]>([]);
const [text, setText] = useState('');
const [anchorEl, setAnchorEl] = useState<Element>(null);

const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => setAnchorEl(event.currentTarget);
const handleMenuClose = () => setAnchorEl(null);

useEffect(() => {
if (data?.externalSource?.toLowerCase() === 'civic'
&& !Number.isNaN(parseInt(data.externalStatementId, 10))) {
setLink(`https://civicdb.org/links/evidence/${parseInt(data.externalStatementId, 10)}`);
setText(data.externalSource);
} else {
setText(data.externalSource);
if (data) {
if (Array.isArray(externalSource)) {
const numOnly = /^\d+$/;
if (externalSource.map((es) => es.toLowerCase()).includes('civic')) {
// TODO: Assume all numeric for now that it is civic ids, more types of external sources to come
setLinks(externalStatementId.filter((id) => numOnly.test(id)));
setText(externalSource.filter((src) => src?.toLowerCase() !== 'civic').join(', '));
} else {
setText(externalSource.join(', '));
}
} else {
const intId = parseInt(externalStatementId, 10);
if (
externalSource?.toLowerCase() === 'civic'
&& !Number.isNaN(intId)
) {
if (Array.isArray(externalStatementId)) {
setLinks(externalStatementId);
} else {
setLink(`https://civicdb.org/links/evidence/${intId}`);
setText(externalSource);
}
} else {
setText(externalSource);
}
}
}
}, [data]);
}, [data, externalStatementId, externalSource]);

if (link) {
const menuItems = links.map((linkId) => (
<MenuItem
key={linkId}
onClick={handleMenuClose}
>
<NewTabLink link={`https://civicdb.org/links/evidence/${linkId}`} text={linkId} />
</MenuItem>
));

if (links.length > 1) {
return (
<NewTabLink link={link} text={text} />
<>
<span>{text ? `${text},` : '' }</span>
<button
type="button"
style={{
backgroundColor: 'unset',
border: 'none',
}}
aria-label="Open in CIViC"
title="Open in CIViC"
className="new-tab-link"
onClick={handleMenuOpen}
>
CIViC
</button>
<Menu
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleMenuClose}
>
{menuItems}
</Menu>
</>
);
}
return (
<div>{text}</div>
);

if (link) {
return <NewTabLink link={link} text={text} />;
}
return <div>{text}</div>;
};

export default CivicCellRenderer;
export { CivicCellRendererProps };
26 changes: 20 additions & 6 deletions app/views/ReportView/components/CopyNumber/columnDefs.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
const columnDefs = [{
// eslint-disable-next-line import/no-extraneous-dependencies
import { ColDef } from '@ag-grid-community/core';

const columnDefs: ColDef[] = [{
headerName: 'Gene',
cellRenderer: 'GeneCellRenderer',
cellRendererParams: { link: true },
Expand Down Expand Up @@ -34,18 +37,29 @@ const columnDefs = [{
hide: false,
}, {
headerName: 'Expression (RPKM)',
field: 'gene.expressionVariants.rpkm',
hide: false,
colId: 'rpkm',
valueGetter: 'data.gene.expressionVariants.rpkm',
hide: true,
}, {
headerName: 'Expression (Normal FC)',
colId: 'primarySiteFoldChange',
field: 'gene.expressionVariants.primarySiteFoldChange',
hide: false,
valueGetter: 'data.gene.expressionVariants.primarySiteFoldChange',
hide: true,
}, {
headerName: 'Expression (Perc)',
colId: 'diseasePercentile',
field: 'gene.expressionVariants.diseasePercentile',
valueGetter: 'data.gene.expressionVariants.diseasePercentile',
hide: false,
}, {
headerName: 'Expression (TPM)',
colId: 'tpm',
valueGetter: 'data.gene.expressionVariants.tpm',
hide: true,
}, {
headerName: 'Expression (kIQR)',
colId: 'primarySitekIQR',
valueGetter: 'data.gene.expressionVariants.primarySitekIQR',
hide: true,
}, {
headerName: 'Oncogene',
colId: 'oncogene',
Expand Down
48 changes: 44 additions & 4 deletions app/views/ReportView/components/CopyNumber/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ const TITLE_MAP = {
lowExp: 'Lowly Expressed Tumour Suppressors with Copy Losses',
};

const getInfoDescription = (relevance: string) => `Copy variants where the variant matched 1 or
more statements of ${relevance} relevance in the knowledge base matches section. Details on these
matches can be seen in the knowledge base matches section of this report.`;
const getInfoDescription = (relevance: string) => `Copy variants where the variant matched 1 or
more statements of ${relevance} relevance in the knowledge base matches section. Details on these
matches can be seen in the knowledge base matches section of this report.`;

const INFO_BUBBLES = {
biological: getInfoDescription('biological'),
Expand Down Expand Up @@ -60,6 +60,13 @@ const CopyNumber = ({
highExp: [],
lowExp: [],
});
const [visibleCols, setVisibleCols] = useState<string[]>(
columnDefs.reduce((accumulator: string[], current) => {
if (current.hide === false || !current.hide) {
accumulator.push(current.field ?? current.colId);
} return accumulator;
}, []),
);

useEffect(() => {
if (report) {
Expand All @@ -69,7 +76,36 @@ const CopyNumber = ({
api.get(`/reports/${report.ident}/copy-variants`),
api.get(`/reports/${report.ident}/image/retrieve/cnvLoh.circos,cnv.1,cnv.2,cnv.3,cnv.4,cnv.5,loh.1,loh.2,loh.3,loh.4,loh.5`),
]);
const [cnvsResp, imagesResp] = await apiCalls.request();
const [cnvsResp, imagesResp] = await apiCalls.request() as [CopyNumberType[], ImageType[]];

if (cnvsResp?.length) {
const nextVisible = [];
for (const {
gene: {
expressionVariants: {
tpm, rpkm, primarySiteFoldChange, primarySitekIQR,
},
},
} of cnvsResp) {
/* Show either RPKM or TPM columns based on which is populated */
if (tpm !== null && !nextVisible.includes('tpm')) {
nextVisible.push('tpm');
}
if (rpkm !== null && !nextVisible.includes('rpkm')) {
nextVisible.push('rpkm');
}
if (primarySiteFoldChange !== null && !nextVisible.includes('primarySiteFoldChange')) {
nextVisible.push('primarySiteFoldChange');
}
if (primarySitekIQR !== null && !nextVisible.includes('primarySitekIQR')) {
nextVisible.push('primarySitekIQR');
}
if (nextVisible.length === 2) {
break;
}
}
setVisibleCols((prevVal) => [...prevVal, ...nextVisible]);
}

const circosIndex = imagesResp.findIndex((img) => img.key === 'cnvLoh.circos');
const [circosResp] = imagesResp.splice(circosIndex, 1);
Expand Down Expand Up @@ -151,6 +187,8 @@ const CopyNumber = ({
}
}, [cnvs]);

const handleVisibleColsChange = (change) => setVisibleCols(change);

return (
<div className="copy-number">
<Typography variant="h3">Copy Number Analyses</Typography>
Expand All @@ -177,6 +215,8 @@ const CopyNumber = ({
rowData={value}
titleText={TITLE_MAP[key]}
demoDescription={INFO_BUBBLES[key]}
visibleColumns={visibleCols}
syncVisibleColumns={handleVisibleColsChange}
/>
</React.Fragment>
))}
Expand Down
30 changes: 22 additions & 8 deletions app/views/ReportView/components/SmallMutations/columnDefs.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
const columnDefs = [{
// eslint-disable-next-line import/no-extraneous-dependencies
import { ColDef } from '@ag-grid-community/core';

const columnDefs: ColDef[] = [{
headerName: 'Gene',
field: 'gene.name',
hide: false,
Expand Down Expand Up @@ -54,20 +57,31 @@ const columnDefs = [{
hide: true,
}, {
headerName: 'Expression (RPKM)',
field: 'gene.expressionVariants.rpkm',
hide: false,
colId: 'rpkm',
valueGetter: 'data.gene.expressionVariants.rpkm',
hide: true,
}, {
headerName: 'Expression (FC normal)',
colId: 'foldChange',
field: 'gene.expressionVariants.primarySiteFoldChange',
hide: false,
colId: 'primarySiteFoldChange',
valueGetter: 'data.gene.expressionVariants.primarySiteFoldChange',
hide: true,
}, {
headerName: 'Expression (TPM)',
colId: 'tpm',
valueGetter: 'data.gene.expressionVariants.tpm',
hide: true,
}, {
headerName: 'Expression (Perc Disease)',
colId: 'diseasePercentile',
field: 'gene.expressionVariants.diseasePercentile',
hide: false,
valueGetter: 'data.gene.expressionVariants.diseasePercentile',
}, {
headerName: 'Expression (kIQR)',
colId: 'primarySitekIQR',
valueGetter: 'data.gene.expressionVariants.primarySitekIQR',
hide: true,
}, {
headerName: 'Actions',
colId: 'actions',
cellRenderer: 'ActionCellRenderer',
pinned: 'right',
sortable: false,
Expand Down
Loading

0 comments on commit 8772cea

Please sign in to comment.