From 626eff1ece4a2ea3bdf5ee266a017d27531400da Mon Sep 17 00:00:00 2001 From: Jacky Li Date: Mon, 15 Nov 2021 17:37:23 -0800 Subject: [PATCH 1/9] fix: update civicCellRenderer to take into account when externalSource are of type array DEVSU-1683 --- .../components/CivicCellRenderer/index.tsx | 79 ++++++++++++++++--- 1 file changed, 67 insertions(+), 12 deletions(-) diff --git a/app/components/DataTable/components/CivicCellRenderer/index.tsx b/app/components/DataTable/components/CivicCellRenderer/index.tsx index ee62b682f..9ccea063c 100644 --- a/app/components/DataTable/components/CivicCellRenderer/index.tsx +++ b/app/components/DataTable/components/CivicCellRenderer/index.tsx @@ -3,33 +3,88 @@ 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 { 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([]); const [text, setText] = useState(''); + const [anchorEl, setAnchorEl] = useState(null); + + const handleMenuOpen = (event) => 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')) { + 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) + ) { + setLink(`https://civicdb.org/links/evidence/${intId}`); + setText(externalSource); + } else { + setText(externalSource); + } + } } - }, [data]); + }, [data, externalStatementId, externalSource]); - if (link) { + const menuItems = links.map((linkId) => ( + + + + )); + + if (links.length > 1) { return ( - + <> + {text} + + + + + {menuItems} + + ); } - return ( -
{text}
- ); + + if (link) { + return ; + } + return
{text}
; }; export default CivicCellRenderer; From 830bca8ce3665ed92ea63f5c39d7a382420c8260 Mon Sep 17 00:00:00 2001 From: Jacky Li Date: Tue, 16 Nov 2021 12:47:17 -0800 Subject: [PATCH 2/9] 6.6.1 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e53427cb..84e94942b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ipr-client", - "version": "6.6.0", + "version": "6.6.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 571852504..ade129582 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "ipr-client", - "version": "6.6.0", + "version": "6.6.1", "keywords": [], "license": "GPL-3.0", "sideEffects": false, From bc99dece5fab88cf60190becaed2e69e613fda7f Mon Sep 17 00:00:00 2001 From: Jacky Li Date: Tue, 16 Nov 2021 19:48:10 -0800 Subject: [PATCH 3/9] test: add story for civicCellRenderer DEVSU-1683 --- .../CivicCellRenderer.stories.tsx | 92 +++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 app/components/DataTable/components/CivicCellRenderer/CivicCellRenderer.stories.tsx diff --git a/app/components/DataTable/components/CivicCellRenderer/CivicCellRenderer.stories.tsx b/app/components/DataTable/components/CivicCellRenderer/CivicCellRenderer.stories.tsx new file mode 100644 index 000000000..7b4dd40e1 --- /dev/null +++ b/app/components/DataTable/components/CivicCellRenderer/CivicCellRenderer.stories.tsx @@ -0,0 +1,92 @@ +// 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) => ; + +export const WithinGrid = ({ + data = [{ + externalSource: ['IPRKB', 'GraphKB', 'CIViC'], + externalStatementId: ['uuid-iprkb', 'uuid-kb', '1100', '1110', '1111'], + }], +}: CivicCellRendererProps): JSX.Element => ( +
+ +
+); + +export const CivicSingle: Story = Template.bind({}); +CivicSingle.args = { + data: { + externalSource: 'CIViC', + externalStatementId: '1100', + }, +}; + +export const CivicArray: Story = Template.bind({}); +CivicArray.args = { + data: { + externalSource: 'CIViC', + externalStatementId: ['1000', '1100', '1110', '1111'], + }, +}; + +export const VariousSourcesNoCivicArray: Story = Template.bind({}); +VariousSourcesNoCivicArray.args = { + data: { + externalSource: ['IPRKB', 'totes-not-civic'], + externalStatementId: ['uuid-id', '1100', '1110', '1111'], + }, +}; + +export const VariousSourcesWithCivicArray: Story = Template.bind({}); +VariousSourcesWithCivicArray.args = { + data: { + externalSource: ['IPRKB', 'GraphKB', 'CIViC'], + externalStatementId: ['uuid-id', '1100', '1110', '1111'], + }, +}; + +export const NoCivicSingle: Story = Template.bind({}); +NoCivicSingle.args = { + data: { + externalSource: 'IPRKB', + externalStatementId: 'uuid-id', + }, +}; + +export const NoCivicArray: Story = Template.bind({}); +NoCivicArray.args = { + data: { + externalSource: 'IPRKB', + externalStatementId: ['uuid-id1', 'uuid-id2', 'uuid-id3'], + }, +}; From e4f5c2d7e2a99aa4cd85485fb4ff78d458106dff Mon Sep 17 00:00:00 2001 From: Jacky Li Date: Tue, 16 Nov 2021 20:20:55 -0800 Subject: [PATCH 4/9] fix: add check for when source is civic and has multiple ids DEVSU-1683 --- .../DataTable/components/CivicCellRenderer/index.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/app/components/DataTable/components/CivicCellRenderer/index.tsx b/app/components/DataTable/components/CivicCellRenderer/index.tsx index 9ccea063c..907e78217 100644 --- a/app/components/DataTable/components/CivicCellRenderer/index.tsx +++ b/app/components/DataTable/components/CivicCellRenderer/index.tsx @@ -29,10 +29,11 @@ const CivicCellRenderer = ({ 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(',')); + setText(externalSource.filter((src) => src?.toLowerCase() !== 'civic').join(', ')); } else { - setText(externalSource.join(',')); + setText(externalSource.join(', ')); } } else { const intId = parseInt(externalStatementId, 10); @@ -40,7 +41,11 @@ const CivicCellRenderer = ({ externalSource?.toLowerCase() === 'civic' && !Number.isNaN(intId) ) { - setLink(`https://civicdb.org/links/evidence/${intId}`); + if (Array.isArray(externalStatementId)) { + setLinks(externalStatementId); + } else { + setLink(`https://civicdb.org/links/evidence/${intId}`); + } setText(externalSource); } else { setText(externalSource); @@ -88,3 +93,4 @@ const CivicCellRenderer = ({ }; export default CivicCellRenderer; +export { CivicCellRendererProps }; From 5da925311c8ad1d85003770e9958c9ba52784ef8 Mon Sep 17 00:00:00 2001 From: Jacky Li Date: Wed, 17 Nov 2021 13:24:59 -0800 Subject: [PATCH 5/9] PR address: add types --- .../DataTable/components/CivicCellRenderer/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/DataTable/components/CivicCellRenderer/index.tsx b/app/components/DataTable/components/CivicCellRenderer/index.tsx index 907e78217..ead02a3d3 100644 --- a/app/components/DataTable/components/CivicCellRenderer/index.tsx +++ b/app/components/DataTable/components/CivicCellRenderer/index.tsx @@ -17,11 +17,11 @@ const CivicCellRenderer = ({ } = data; const [link, setLink] = useState(''); - const [links, setLinks] = useState([]); + const [links, setLinks] = useState([]); const [text, setText] = useState(''); - const [anchorEl, setAnchorEl] = useState(null); + const [anchorEl, setAnchorEl] = useState(null); - const handleMenuOpen = (event) => setAnchorEl(event.currentTarget); + const handleMenuOpen = (event: React.MouseEvent) => setAnchorEl(event.currentTarget); const handleMenuClose = () => setAnchorEl(null); useEffect(() => { From b95ebe9ad4134b7d5d75be021f857b4d908b392c Mon Sep 17 00:00:00 2001 From: Jacky Li Date: Wed, 17 Nov 2021 19:19:02 -0800 Subject: [PATCH 6/9] fix: apply changes done to Expression to SmallMut, CNV, SV - Add colDef for tpm and kIQR for SM, CNV, SV - Add interactions to show either rpkm/tpm DEVSU-1686 --- .../components/CopyNumber/columnDefs.ts | 24 ++++++++--- .../components/CopyNumber/index.tsx | 37 +++++++++++++++-- .../components/SmallMutations/columnDefs.ts | 30 ++++++++++---- .../components/SmallMutations/index.tsx | 34 +++++++++++++++- .../StructuralVariants/columnDefs.ts | 12 +++++- .../components/StructuralVariants/index.tsx | 40 ++++++++++++++++++- 6 files changed, 158 insertions(+), 19 deletions(-) diff --git a/app/views/ReportView/components/CopyNumber/columnDefs.ts b/app/views/ReportView/components/CopyNumber/columnDefs.ts index 64f80b94d..d4fe8a465 100644 --- a/app/views/ReportView/components/CopyNumber/columnDefs.ts +++ b/app/views/ReportView/components/CopyNumber/columnDefs.ts @@ -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 }, @@ -34,17 +37,28 @@ 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', + valueGetter: 'data.gene.expressionVariants.primarySiteFoldChange', hide: false, }, { 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: false, }, { headerName: 'Oncogene', diff --git a/app/views/ReportView/components/CopyNumber/index.tsx b/app/views/ReportView/components/CopyNumber/index.tsx index 368459d6a..27244088a 100644 --- a/app/views/ReportView/components/CopyNumber/index.tsx +++ b/app/views/ReportView/components/CopyNumber/index.tsx @@ -26,8 +26,8 @@ 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 +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 = { @@ -60,6 +60,13 @@ const CopyNumber = ({ highExp: [], lowExp: [], }); + const [visibleCols, setVisibleCols] = useState( + columnDefs.reduce((accumulator: string[], current) => { + if (current.hide === false || !current.hide) { + accumulator.push(current.field ?? current.colId); + } return accumulator; + }, []), + ); useEffect(() => { if (report) { @@ -69,7 +76,27 @@ 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) { + for (const { + gene: { + expressionVariants: { + tpm, rpkm, + }, + }, + } of cnvsResp) { + /* Show either RPKM or TPM columns based on which is populated */ + if (tpm !== null) { + setVisibleCols((prevVal) => [...prevVal, 'tpm']); + break; + } + if (rpkm !== null) { + setVisibleCols((prevVal) => [...prevVal, 'rpkm']); + break; + } + } + } const circosIndex = imagesResp.findIndex((img) => img.key === 'cnvLoh.circos'); const [circosResp] = imagesResp.splice(circosIndex, 1); @@ -151,6 +178,8 @@ const CopyNumber = ({ } }, [cnvs]); + const handleVisibleColsChange = (change) => setVisibleCols(change); + return (
Copy Number Analyses @@ -177,6 +206,8 @@ const CopyNumber = ({ rowData={value} titleText={TITLE_MAP[key]} demoDescription={INFO_BUBBLES[key]} + visibleColumns={visibleCols} + syncVisibleColumns={handleVisibleColsChange} /> ))} diff --git a/app/views/ReportView/components/SmallMutations/columnDefs.ts b/app/views/ReportView/components/SmallMutations/columnDefs.ts index b9317ea3f..42e12f341 100644 --- a/app/views/ReportView/components/SmallMutations/columnDefs.ts +++ b/app/views/ReportView/components/SmallMutations/columnDefs.ts @@ -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, @@ -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', + // hide: true, +}, { + headerName: 'Expression (kIQR)', + colId: 'primarySitekIQR', + valueGetter: 'data.gene.expressionVariants.primarySitekIQR', }, { headerName: 'Actions', + colId: 'actions', cellRenderer: 'ActionCellRenderer', pinned: 'right', sortable: false, diff --git a/app/views/ReportView/components/SmallMutations/index.tsx b/app/views/ReportView/components/SmallMutations/index.tsx index d772e7124..42fd9feec 100644 --- a/app/views/ReportView/components/SmallMutations/index.tsx +++ b/app/views/ReportView/components/SmallMutations/index.tsx @@ -2,7 +2,6 @@ import React, { useState, useEffect, useContext } from 'react'; import { Typography, } from '@material-ui/core'; - import api from '@/services/api'; import snackbar from '@/services/SnackbarUtils'; import DataTable from '@/components/DataTable'; @@ -43,6 +42,13 @@ const SmallMutations = ({ biological: [], unknown: [], }); + const [visibleCols, setVisibleCols] = useState( + columnDefs.reduce((accumulator: string[], current) => { + if (current.hide === false || !current.hide) { + accumulator.push(current.field ?? current.colId); + } return accumulator; + }, []), + ); useEffect(() => { if (report) { @@ -51,6 +57,28 @@ const SmallMutations = ({ const smallMutationsResp = await api.get( `/reports/${report.ident}/small-mutations`, ).request(); + + // Hide some columns if no values are returned + if (smallMutationsResp?.length) { + for (const { + gene: { + expressionVariants: { + tpm, rpkm, + }, + }, + } of smallMutationsResp) { + /* Show either RPKM or TPM columns based on which is populated */ + if (tpm !== null) { + setVisibleCols((prevVal) => [...prevVal, 'tpm']); + break; + } + if (rpkm !== null) { + setVisibleCols((prevVal) => [...prevVal, 'rpkm']); + break; + } + } + } + setSmallMutations(smallMutationsResp); } catch (err) { snackbar.error(`Network error: ${err}`); @@ -99,6 +127,8 @@ const SmallMutations = ({ } }, [smallMutations]); + const handleVisibleColsChange = (change) => setVisibleCols(change); + return (
@@ -113,6 +143,8 @@ const SmallMutations = ({ columnDefs={columnDefs} rowData={value} titleText={TITLE_MAP[key]} + syncVisibleColumns={handleVisibleColsChange} + visibleColumns={visibleCols} demoDescription={INFO_BUBBLES[key]} /> ))} diff --git a/app/views/ReportView/components/StructuralVariants/columnDefs.ts b/app/views/ReportView/components/StructuralVariants/columnDefs.ts index 69318670b..cc238adb6 100644 --- a/app/views/ReportView/components/StructuralVariants/columnDefs.ts +++ b/app/views/ReportView/components/StructuralVariants/columnDefs.ts @@ -55,7 +55,7 @@ const columnDefs = [{ headerName: 'Expression (RPKM) 5`/3`', colId: 'rpkm', valueGetter: createGeneRelatedValueGetter('expressionVariants', ' / ', 'rpkm'), - hide: false, + hide: true, }, { headerName: 'Expression (normal FC) 5`/3`', colId: 'primarySiteFoldChange', @@ -66,6 +66,15 @@ const columnDefs = [{ colId: 'diseasePercentile', valueGetter: createGeneRelatedValueGetter('expressionVariants', ' / ', 'diseasePercentile'), hide: false, +}, { + headerName: 'Expression (TPM) 5`/3', + colId: 'tpm', + valueGetter: createGeneRelatedValueGetter('expressionVariants', ' / ', 'tpm'), + hide: true, +}, { + headerName: 'Expression (kIQR) 5`/3', + colId: 'primarySitekIQR', + valueGetter: createGeneRelatedValueGetter('expressionVariants', ' / ', 'primarySitekIQR'), }, { headerName: 'Oncogene', colId: 'oncogene', @@ -104,6 +113,7 @@ const columnDefs = [{ }, { headerName: 'Actions', cellRenderer: 'ActionCellRenderer', + colId: 'actions', pinned: 'right', sortable: false, suppressMenu: true, diff --git a/app/views/ReportView/components/StructuralVariants/index.tsx b/app/views/ReportView/components/StructuralVariants/index.tsx index 2f0310f67..f1fc3fbcc 100644 --- a/app/views/ReportView/components/StructuralVariants/index.tsx +++ b/app/views/ReportView/components/StructuralVariants/index.tsx @@ -52,6 +52,13 @@ const StructuralVariants = ({ const [genomeCircos, setGenomeCircos] = useState(); const [transcriptomeCircos, setTranscriptomeCircos] = useState(); const [tabIndex, setTabIndex] = useState(0); + const [visibleCols, setVisibleCols] = useState( + columnDefs.reduce((accumulator: string[], current) => { + if (current.hide === false || !current.hide) { + accumulator.push(current.field ?? current.colId); + } return accumulator; + }, []), + ); useEffect(() => { if (report) { @@ -61,7 +68,34 @@ const StructuralVariants = ({ api.get(`/reports/${report.ident}/structural-variants`), api.get(`/reports/${report.ident}/image/retrieve/circosSv.genome,circosSv.transcriptome`), ]); - const [svsResp, imagesResp] = await apiCalls.request(); + const [svsResp, imagesResp] = await apiCalls.request() as [StructuralVariantType[], ImageType[]]; + + if (svsResp?.length) { + for (const respRow of svsResp) { + const { + gene1: { + expressionVariants: { + rpkm: rpkm1, + tpm: tpm1, + }, + }, + gene2: { + expressionVariants: { + rpkm: rpkm2, + tpm: tpm2, + }, + }, + } = respRow; + if (tpm1 !== null || tpm2 !== null) { + setVisibleCols((prevVal) => [...prevVal, 'tpm']); + break; + } + if (rpkm1 !== null || rpkm2 !== null) { + setVisibleCols((prevVal) => [...prevVal, 'rpkm']); + break; + } + } + } setSvs(svsResp); setGenomeCircos(imagesResp.find((img: ImageType) => img.key === 'circosSv.genome')); @@ -117,6 +151,8 @@ const StructuralVariants = ({ setTabIndex(newValue); }; + const handleVisibleColsChange = (change) => setVisibleCols(change); + return (
Structural Variation @@ -163,6 +199,8 @@ const StructuralVariants = ({ columnDefs={columnDefs} rowData={value} titleText={TITLE_MAP[key]} + visibleColumns={visibleCols} + syncVisibleColumns={handleVisibleColsChange} canToggleColumns demoDescription={INFO_BUBBLES[key]} /> From a71aea0204d12eb233c21b787b8ed5cb3de2f3ba Mon Sep 17 00:00:00 2001 From: Jacky Li Date: Wed, 17 Nov 2021 21:23:50 -0800 Subject: [PATCH 7/9] fix: add more consistent styling to CIViC links DEVSU-1683 --- .../CivicCellRenderer.stories.tsx | 13 ++++++++---- .../components/CivicCellRenderer/index.tsx | 21 ++++++++++++------- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/app/components/DataTable/components/CivicCellRenderer/CivicCellRenderer.stories.tsx b/app/components/DataTable/components/CivicCellRenderer/CivicCellRenderer.stories.tsx index 7b4dd40e1..5a8346b7e 100644 --- a/app/components/DataTable/components/CivicCellRenderer/CivicCellRenderer.stories.tsx +++ b/app/components/DataTable/components/CivicCellRenderer/CivicCellRenderer.stories.tsx @@ -16,10 +16,15 @@ export default { const Template = (args) => ; export const WithinGrid = ({ - data = [{ - externalSource: ['IPRKB', 'GraphKB', 'CIViC'], - externalStatementId: ['uuid-iprkb', 'uuid-kb', '1100', '1110', '1111'], - }], + data = [ + { + externalSource: ['IPRKB', 'GraphKB', 'CIViC'], + externalStatementId: ['uuid-iprkb', 'uuid-kb', '1100', '1110', '1111'], + }, { + externalSource: 'CIViC', + externalStatementId: '1100', + }, + ], }: CivicCellRendererProps): JSX.Element => (
1) { return ( <> - {text} - {text ? `${text},` : '' } + Date: Thu, 18 Nov 2021 15:11:14 -0800 Subject: [PATCH 8/9] fix: add column hide to kIQR and TPM on SM, SV, and CNV DEVSU-1686 --- .../components/CopyNumber/columnDefs.ts | 4 +-- .../components/CopyNumber/index.tsx | 27 ++++++++++++++--- .../components/SmallMutations/columnDefs.ts | 4 +-- .../components/SmallMutations/index.tsx | 24 +++++++++++++-- .../StructuralVariants/columnDefs.ts | 3 +- .../components/StructuralVariants/index.tsx | 30 +++++++++++++++++-- 6 files changed, 79 insertions(+), 13 deletions(-) diff --git a/app/views/ReportView/components/CopyNumber/columnDefs.ts b/app/views/ReportView/components/CopyNumber/columnDefs.ts index d4fe8a465..6c3019fe2 100644 --- a/app/views/ReportView/components/CopyNumber/columnDefs.ts +++ b/app/views/ReportView/components/CopyNumber/columnDefs.ts @@ -44,7 +44,7 @@ const columnDefs: ColDef[] = [{ headerName: 'Expression (Normal FC)', colId: 'primarySiteFoldChange', valueGetter: 'data.gene.expressionVariants.primarySiteFoldChange', - hide: false, + hide: true, }, { headerName: 'Expression (Perc)', colId: 'diseasePercentile', @@ -59,7 +59,7 @@ const columnDefs: ColDef[] = [{ headerName: 'Expression (kIQR)', colId: 'primarySitekIQR', valueGetter: 'data.gene.expressionVariants.primarySitekIQR', - hide: false, + hide: true, }, { headerName: 'Oncogene', colId: 'oncogene', diff --git a/app/views/ReportView/components/CopyNumber/index.tsx b/app/views/ReportView/components/CopyNumber/index.tsx index 27244088a..784375a68 100644 --- a/app/views/ReportView/components/CopyNumber/index.tsx +++ b/app/views/ReportView/components/CopyNumber/index.tsx @@ -27,8 +27,8 @@ const TITLE_MAP = { }; 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.`; + 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'), @@ -79,6 +79,7 @@ const CopyNumber = ({ const [cnvsResp, imagesResp] = await apiCalls.request() as [CopyNumberType[], ImageType[]]; if (cnvsResp?.length) { + const nextVisible = []; for (const { gene: { expressionVariants: { @@ -88,14 +89,32 @@ const CopyNumber = ({ } of cnvsResp) { /* Show either RPKM or TPM columns based on which is populated */ if (tpm !== null) { - setVisibleCols((prevVal) => [...prevVal, 'tpm']); + nextVisible.push('tpm'); break; } if (rpkm !== null) { - setVisibleCols((prevVal) => [...prevVal, 'rpkm']); + nextVisible.push('rpkm'); break; } } + /* Show either Normal or kIQR columns based on which is populated */ + for (const { + gene: { + expressionVariants: { + primarySiteFoldChange, primarySitekIQR, + }, + }, + } of cnvsResp) { + if (primarySiteFoldChange !== null) { + nextVisible.push('primarySiteFoldChange'); + break; + } + if (primarySitekIQR !== null) { + nextVisible.push('primarySitekIQR'); + break; + } + } + setVisibleCols((prevVal) => [...prevVal, ...nextVisible]); } const circosIndex = imagesResp.findIndex((img) => img.key === 'cnvLoh.circos'); diff --git a/app/views/ReportView/components/SmallMutations/columnDefs.ts b/app/views/ReportView/components/SmallMutations/columnDefs.ts index 42e12f341..ffdb0a9ce 100644 --- a/app/views/ReportView/components/SmallMutations/columnDefs.ts +++ b/app/views/ReportView/components/SmallMutations/columnDefs.ts @@ -64,7 +64,7 @@ const columnDefs: ColDef[] = [{ headerName: 'Expression (FC normal)', colId: 'primarySiteFoldChange', valueGetter: 'data.gene.expressionVariants.primarySiteFoldChange', - // hide: true, + hide: true, }, { headerName: 'Expression (TPM)', colId: 'tpm', @@ -74,11 +74,11 @@ const columnDefs: ColDef[] = [{ headerName: 'Expression (Perc Disease)', colId: 'diseasePercentile', valueGetter: 'data.gene.expressionVariants.diseasePercentile', - // hide: true, }, { headerName: 'Expression (kIQR)', colId: 'primarySitekIQR', valueGetter: 'data.gene.expressionVariants.primarySitekIQR', + hide: true, }, { headerName: 'Actions', colId: 'actions', diff --git a/app/views/ReportView/components/SmallMutations/index.tsx b/app/views/ReportView/components/SmallMutations/index.tsx index 42fd9feec..d5d62be50 100644 --- a/app/views/ReportView/components/SmallMutations/index.tsx +++ b/app/views/ReportView/components/SmallMutations/index.tsx @@ -60,6 +60,7 @@ const SmallMutations = ({ // Hide some columns if no values are returned if (smallMutationsResp?.length) { + const nextVisible = []; for (const { gene: { expressionVariants: { @@ -69,14 +70,33 @@ const SmallMutations = ({ } of smallMutationsResp) { /* Show either RPKM or TPM columns based on which is populated */ if (tpm !== null) { - setVisibleCols((prevVal) => [...prevVal, 'tpm']); + nextVisible.push('tpm'); break; } if (rpkm !== null) { - setVisibleCols((prevVal) => [...prevVal, 'rpkm']); + nextVisible.push('rpkm'); break; } } + /* Show either Normal or kIQR columns based on which is populated */ + for (const { + gene: { + expressionVariants: { + primarySiteFoldChange, primarySitekIQR, + }, + }, + } of smallMutationsResp) { + /* Show either RPKM or TPM columns based on which is populated */ + if (primarySiteFoldChange !== null) { + nextVisible.push('primarySiteFoldChange'); + break; + } + if (primarySitekIQR !== null) { + nextVisible.push('primarySitekIQR'); + break; + } + } + setVisibleCols((prevVal) => [...prevVal, ...nextVisible]); } setSmallMutations(smallMutationsResp); diff --git a/app/views/ReportView/components/StructuralVariants/columnDefs.ts b/app/views/ReportView/components/StructuralVariants/columnDefs.ts index cc238adb6..e56c5a5cc 100644 --- a/app/views/ReportView/components/StructuralVariants/columnDefs.ts +++ b/app/views/ReportView/components/StructuralVariants/columnDefs.ts @@ -60,7 +60,7 @@ const columnDefs = [{ headerName: 'Expression (normal FC) 5`/3`', colId: 'primarySiteFoldChange', valueGetter: createGeneRelatedValueGetter('expressionVariants', ' / ', 'primarySiteFoldChange'), - hide: false, + hide: true, }, { headerName: 'Expression (Perc) 5`/3`', colId: 'diseasePercentile', @@ -75,6 +75,7 @@ const columnDefs = [{ headerName: 'Expression (kIQR) 5`/3', colId: 'primarySitekIQR', valueGetter: createGeneRelatedValueGetter('expressionVariants', ' / ', 'primarySitekIQR'), + hide: true, }, { headerName: 'Oncogene', colId: 'oncogene', diff --git a/app/views/ReportView/components/StructuralVariants/index.tsx b/app/views/ReportView/components/StructuralVariants/index.tsx index f1fc3fbcc..6703ba311 100644 --- a/app/views/ReportView/components/StructuralVariants/index.tsx +++ b/app/views/ReportView/components/StructuralVariants/index.tsx @@ -71,6 +71,7 @@ const StructuralVariants = ({ const [svsResp, imagesResp] = await apiCalls.request() as [StructuralVariantType[], ImageType[]]; if (svsResp?.length) { + const nextVisible = []; for (const respRow of svsResp) { const { gene1: { @@ -87,14 +88,39 @@ const StructuralVariants = ({ }, } = respRow; if (tpm1 !== null || tpm2 !== null) { - setVisibleCols((prevVal) => [...prevVal, 'tpm']); + nextVisible.push('tpm'); break; } if (rpkm1 !== null || rpkm2 !== null) { - setVisibleCols((prevVal) => [...prevVal, 'rpkm']); + nextVisible.push('rpkm'); break; } } + for (const respRow of svsResp) { + const { + gene1: { + expressionVariants: { + primarySiteFoldChange: primarySiteFoldChange1, + primarySitekIQR: primarySitekIQR1, + }, + }, + gene2: { + expressionVariants: { + primarySiteFoldChange: primarySiteFoldChange2, + primarySitekIQR: primarySitekIQR2, + }, + }, + } = respRow; + if (primarySiteFoldChange1 !== null || primarySiteFoldChange2 !== null) { + nextVisible.push('primarySiteFoldChange'); + break; + } + if (primarySitekIQR1 !== null || primarySitekIQR2 !== null) { + nextVisible.push('primarySitekIQR'); + break; + } + } + setVisibleCols((prevVal) => [...prevVal, ...nextVisible]); } setSvs(svsResp); From 7c43d454d60974fc63de737d8378c487680d9bd3 Mon Sep 17 00:00:00 2001 From: Jacky Li Date: Fri, 19 Nov 2021 11:38:21 -0800 Subject: [PATCH 9/9] fix: condensed visible column logic for CNV, SM, SV DEVSU-1686 --- .../components/CopyNumber/index.tsx | 24 ++++---------- .../components/SmallMutations/index.tsx | 23 ++++--------- .../components/StructuralVariants/index.tsx | 33 ++++++------------- 3 files changed, 23 insertions(+), 57 deletions(-) diff --git a/app/views/ReportView/components/CopyNumber/index.tsx b/app/views/ReportView/components/CopyNumber/index.tsx index 784375a68..15799b4c9 100644 --- a/app/views/ReportView/components/CopyNumber/index.tsx +++ b/app/views/ReportView/components/CopyNumber/index.tsx @@ -83,34 +83,24 @@ const CopyNumber = ({ for (const { gene: { expressionVariants: { - tpm, rpkm, + tpm, rpkm, primarySiteFoldChange, primarySitekIQR, }, }, } of cnvsResp) { /* Show either RPKM or TPM columns based on which is populated */ - if (tpm !== null) { + if (tpm !== null && !nextVisible.includes('tpm')) { nextVisible.push('tpm'); - break; } - if (rpkm !== null) { + if (rpkm !== null && !nextVisible.includes('rpkm')) { nextVisible.push('rpkm'); - break; } - } - /* Show either Normal or kIQR columns based on which is populated */ - for (const { - gene: { - expressionVariants: { - primarySiteFoldChange, primarySitekIQR, - }, - }, - } of cnvsResp) { - if (primarySiteFoldChange !== null) { + if (primarySiteFoldChange !== null && !nextVisible.includes('primarySiteFoldChange')) { nextVisible.push('primarySiteFoldChange'); - break; } - if (primarySitekIQR !== null) { + if (primarySitekIQR !== null && !nextVisible.includes('primarySitekIQR')) { nextVisible.push('primarySitekIQR'); + } + if (nextVisible.length === 2) { break; } } diff --git a/app/views/ReportView/components/SmallMutations/index.tsx b/app/views/ReportView/components/SmallMutations/index.tsx index d5d62be50..04234785c 100644 --- a/app/views/ReportView/components/SmallMutations/index.tsx +++ b/app/views/ReportView/components/SmallMutations/index.tsx @@ -69,30 +69,19 @@ const SmallMutations = ({ }, } of smallMutationsResp) { /* Show either RPKM or TPM columns based on which is populated */ - if (tpm !== null) { + if (tpm !== null && !nextVisible.includes('tpm')) { nextVisible.push('tpm'); - break; } - if (rpkm !== null) { + if (rpkm !== null && !nextVisible.includes('rpkm')) { nextVisible.push('rpkm'); - break; } - } - /* Show either Normal or kIQR columns based on which is populated */ - for (const { - gene: { - expressionVariants: { - primarySiteFoldChange, primarySitekIQR, - }, - }, - } of smallMutationsResp) { - /* Show either RPKM or TPM columns based on which is populated */ - if (primarySiteFoldChange !== null) { + if (primarySiteFoldChange !== null && !nextVisible.includes('primarySiteFoldChange')) { nextVisible.push('primarySiteFoldChange'); - break; } - if (primarySitekIQR !== null) { + if (primarySitekIQR !== null && !nextVisible.includes('primarySitekIQR')) { nextVisible.push('primarySitekIQR'); + } + if (nextVisible.length === 2) { break; } } diff --git a/app/views/ReportView/components/StructuralVariants/index.tsx b/app/views/ReportView/components/StructuralVariants/index.tsx index 6703ba311..3aa0ae520 100644 --- a/app/views/ReportView/components/StructuralVariants/index.tsx +++ b/app/views/ReportView/components/StructuralVariants/index.tsx @@ -78,45 +78,32 @@ const StructuralVariants = ({ expressionVariants: { rpkm: rpkm1, tpm: tpm1, + primarySiteFoldChange: primarySiteFoldChange1, + primarySitekIQR: primarySitekIQR1, }, }, gene2: { expressionVariants: { rpkm: rpkm2, tpm: tpm2, + primarySiteFoldChange: primarySiteFoldChange2, + primarySitekIQR: primarySitekIQR2, }, }, } = respRow; - if (tpm1 !== null || tpm2 !== null) { + if ((tpm1 !== null || tpm2 !== null) && !nextVisible.includes('tpm')) { nextVisible.push('tpm'); - break; } - if (rpkm1 !== null || rpkm2 !== null) { + if ((rpkm1 !== null || rpkm2 !== null) && !nextVisible.includes('rpkm')) { nextVisible.push('rpkm'); - break; } - } - for (const respRow of svsResp) { - const { - gene1: { - expressionVariants: { - primarySiteFoldChange: primarySiteFoldChange1, - primarySitekIQR: primarySitekIQR1, - }, - }, - gene2: { - expressionVariants: { - primarySiteFoldChange: primarySiteFoldChange2, - primarySitekIQR: primarySitekIQR2, - }, - }, - } = respRow; - if (primarySiteFoldChange1 !== null || primarySiteFoldChange2 !== null) { + if ((primarySiteFoldChange1 !== null || primarySiteFoldChange2 !== null) && !nextVisible.includes('primarySiteFoldChange')) { nextVisible.push('primarySiteFoldChange'); - break; } - if (primarySitekIQR1 !== null || primarySitekIQR2 !== null) { + if ((primarySitekIQR1 !== null || primarySitekIQR2 !== null) && !nextVisible.includes('primarySitekIQR')) { nextVisible.push('primarySitekIQR'); + } + if (nextVisible.length === 2) { break; } }