From 2b06ab61ac3028f3fe25826ee6eb0d727f4ae08c Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 11:31:09 -0500 Subject: [PATCH 01/14] implement tissue type counts --- src/components/Home/AvailableDatasetsTable.js | 116 +++++++++++++----- 1 file changed, 85 insertions(+), 31 deletions(-) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index f43b088f..47bff1fa 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import { Grid, TableFixedColumns, TableHeaderRow, Table} from '@devexpress/dx-react-grid-bootstrap4'; -import { Row, Col } from 'reactstrap'; +import { Row, Col, UncontrolledTooltip } from 'reactstrap'; import { handleGoogleAnalyticsEvent } from '../../helpers/googleAnalyticsHelper'; import { fetchAtlasSummaryRows } from '../../helpers/ApolloClient'; @@ -12,7 +12,8 @@ class AvailableDatasetsTable extends Component { this.state = { totalFiles: [], - summaryRows: [] + summaryRows: [], + }; } @@ -48,14 +49,14 @@ class AvailableDatasetsTable extends Component { } } - handleEmptyCounts(count, row, controlAccess){ - return count === 0 ? "" : this.formatDataTypeValueCell(count, row, controlAccess) + handleEmptyCounts(count, row){ + return count === 0 ? "" : this.formatDataTypeValueCell(count, row) } - handleDataTypeValueClick(row, controlAccess) { + handleDataTypeValueClick(row) { let linkType = row.linkInformation.linkType; let linkValue = row.linkInformation.linkValue.replace('&', '%26'); - let mapping = `/repository/?size=n_20_n&filters[0][field]=access&filters[0][values][0]=${controlAccess}&filters[0][type]=any&filters[1][field]=${linkType}&filters[1][values][0]=${linkValue}&filters[1][type]=any`; + let mapping = `/repository/?size=n_20_n&filters[0][field]=${linkType}&filters[0][values][0]=${linkValue}&filters[0][type]=any`; if(linkType && linkValue){ return encodeURI(mapping).replace('%2526', '%26'); } else { @@ -78,37 +79,90 @@ class AvailableDatasetsTable extends Component { return [ { columnName: 'omicsType', width: 'auto'}, - { columnName: 'controlledCount', width: 'auto', align: 'center'}, - { columnName: 'openCount', width: 'auto', align: 'center' }, + { columnName: 'akiCount', width: 'auto'}, + { columnName: 'hrtCount', width: 'auto'}, + { columnName: 'ckdCount', width: 'auto'}, + { columnName: 'dmrCount', width: 'auto'}, ] } getColumns() { - return [ - { - title: OMICS TYPE, - name: 'omicsType', - getCellValue: row =>
{row.omicsType}
- - }, - { - title: - CONTROLLED - , - name: 'controlledCount', - getCellValue: row =>
{this.handleEmptyCounts(row.controlledCount, row, "controlled")}
- }, - { - title: - OPEN - , - name: 'openCount', - getCellValue: row =>
{this.handleEmptyCounts(row.openCount, row, "open")}
- } - ] - }; + + return [ + { + title: OMICS TYPE, + name: 'omicsType', + getCellValue: row => this.formatDataTypeCell(row) + }, + { + title: + + + REFERENCE + + + Healthy Reference + + + , + getCellValue: row => this.handleEmptyCounts(row.hrtCount, row), + name: 'hrtCount', + }, + { + title: + + + CKD + + + Chronic Kidney Disease + + + , + getCellValue: row => this.handleEmptyCounts(row.ckdCount, row), + name: 'ckdCount', + }, + { + title: + + + AKI + + + Acute Kidney Injury + + + , + getCellValue: row => this.handleEmptyCounts(row.akiCount, row), + name: 'akiCount', + }, + { + title: + + + DM-R + + + Diabetes Mellitus - Resilient + + + , + getCellValue: row => this.handleEmptyCounts(row.dmrCount, row), + name: 'dmrCount', + } + ] + }; render() { + console.log(this.state) return (
From cea8b0e742ceed6cf0f43dd07d5b80722d18cca2 Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 11:41:01 -0500 Subject: [PATCH 02/14] update frontend graphql schema --- data/schema.graphql | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/data/schema.graphql b/data/schema.graphql index 408815c9..670a3b8b 100644 --- a/data/schema.graphql +++ b/data/schema.graphql @@ -19,8 +19,9 @@ type getAtlasSummaryRows{ } type SummaryRows{ - openCount: Long, - controlledCount: Long, + akiCount: Long, + ckdCount: Long, + hrtCount: Long, omicsType: String, linkInformation: [LinkInformation] } From 6850881f480a8b220ecbafec896e8fcb6a904b74 Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 11:46:47 -0500 Subject: [PATCH 03/14] fix apollo query --- src/components/Home/AvailableDatasetsTableContainer.js | 7 ++++--- src/helpers/ApolloClient.js | 6 ++++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/components/Home/AvailableDatasetsTableContainer.js b/src/components/Home/AvailableDatasetsTableContainer.js index 7876645f..78698292 100644 --- a/src/components/Home/AvailableDatasetsTableContainer.js +++ b/src/components/Home/AvailableDatasetsTableContainer.js @@ -5,10 +5,11 @@ import { withRouter } from 'react-router'; const mapStateToProps = (state, props) => ({ - selectedDataType: state.selectedDataType, - openCount: state.openCount, - controlledCount: state.controlledCount, omicsType: state.omicsType, + hrtCount: state.hrtCount, + dmrCount: state.dmrCount, + akiCount: state.akiCount, + ckdCount: state.ckdCount, linkType: state.linkType, linkValue: state.linkValue }); diff --git a/src/helpers/ApolloClient.js b/src/helpers/ApolloClient.js index 36a37566..991a98dd 100644 --- a/src/helpers/ApolloClient.js +++ b/src/helpers/ApolloClient.js @@ -475,8 +475,10 @@ export const fetchAtlasSummaryRows = async () => { getAtlasSummaryRows{ totalFiles summaryRows { - openCount - controlledCount + akiCount + ckdCount + hrtCount + dmrCount omicsType linkInformation { linkType From 93044c2d76f25e6cc8e270805e2b1dd137a11422 Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 12:04:51 -0500 Subject: [PATCH 04/14] remove formatDataTypeCell --- src/components/Home/AvailableDatasetsTable.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index 47bff1fa..da4a821f 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -92,7 +92,6 @@ class AvailableDatasetsTable extends Component { { title: OMICS TYPE, name: 'omicsType', - getCellValue: row => this.formatDataTypeCell(row) }, { title: From 2f136a4e5bd52c88c72c642b70e924f5bb4bd269 Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 12:08:57 -0500 Subject: [PATCH 05/14] console log summary --- src/components/Home/AvailableDatasetsTable.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index da4a821f..3d0a94fb 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -20,6 +20,7 @@ class AvailableDatasetsTable extends Component { async componentDidMount(){ const summary = await fetchAtlasSummaryRows(); + console.log(summary) this.setState({totalFiles: summary.totalFiles}); this.setState({summaryRows: summary.summaryRows}); From 11233c56afb723373aaac2d89ece1955dbe52b3c Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 12:19:16 -0500 Subject: [PATCH 06/14] add dmrCount --- data/schema.graphql | 1 + src/helpers/ApolloClient.js | 26 +++++++++++++------------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/data/schema.graphql b/data/schema.graphql index 670a3b8b..a86d4e61 100644 --- a/data/schema.graphql +++ b/data/schema.graphql @@ -22,6 +22,7 @@ type SummaryRows{ akiCount: Long, ckdCount: Long, hrtCount: Long, + dmrCount: Long, omicsType: String, linkInformation: [LinkInformation] } diff --git a/src/helpers/ApolloClient.js b/src/helpers/ApolloClient.js index 991a98dd..3e613144 100644 --- a/src/helpers/ApolloClient.js +++ b/src/helpers/ApolloClient.js @@ -472,20 +472,20 @@ export const fetchTissueTypeSummaryCounts = async () => { export const fetchAtlasSummaryRows = async () => { let query = gql` query { - getAtlasSummaryRows{ - totalFiles - summaryRows { - akiCount - ckdCount - hrtCount - dmrCount - omicsType - linkInformation { - linkType - linkValue - } - } + getAtlasSummaryRows { + totalFiles + summaryRows { + akiCount + ckdCount + hrtCount + dmrCount + omicsType + linkInformation { + linkType + linkValue + } } + } }`; const response = await apolloClient.query({ query: query, From e703ba0f6203dc732a5bb19438ba33362f71aec6 Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 12:27:09 -0500 Subject: [PATCH 07/14] log row --- src/components/Home/AvailableDatasetsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index 3d0a94fb..0710a76f 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -20,7 +20,6 @@ class AvailableDatasetsTable extends Component { async componentDidMount(){ const summary = await fetchAtlasSummaryRows(); - console.log(summary) this.setState({totalFiles: summary.totalFiles}); this.setState({summaryRows: summary.summaryRows}); @@ -55,6 +54,7 @@ class AvailableDatasetsTable extends Component { } handleDataTypeValueClick(row) { + console.log(row) let linkType = row.linkInformation.linkType; let linkValue = row.linkInformation.linkValue.replace('&', '%26'); let mapping = `/repository/?size=n_20_n&filters[0][field]=${linkType}&filters[0][values][0]=${linkValue}&filters[0][type]=any`; From 5d01623b9a9512257b8f129bbc57febfc3d63542 Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 12:42:16 -0500 Subject: [PATCH 08/14] pass tissueType to rows --- src/components/Home/AvailableDatasetsTable.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index 0710a76f..4292ca8b 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -49,15 +49,14 @@ class AvailableDatasetsTable extends Component { } } - handleEmptyCounts(count, row){ - return count === 0 ? "" : this.formatDataTypeValueCell(count, row) + handleEmptyCounts(count, row, tissueType){ + return count === 0 ? "" : this.formatDataTypeValueCell(count, row, tissueType) } - handleDataTypeValueClick(row) { - console.log(row) + handleDataTypeValueClick(row, tissueType) { let linkType = row.linkInformation.linkType; let linkValue = row.linkInformation.linkValue.replace('&', '%26'); - let mapping = `/repository/?size=n_20_n&filters[0][field]=${linkType}&filters[0][values][0]=${linkValue}&filters[0][type]=any`; + let mapping = `/repository/?size=n_20_n&filters[0][field]=${linkType}&filters[0][values][0]=${linkValue}&filters[0][type]=any&filters[1][field]=tissue_type&filters[1][values][0]=${tissueType}&filters[1][type]=any` if(linkType && linkValue){ return encodeURI(mapping).replace('%2526', '%26'); } else { @@ -66,9 +65,9 @@ class AvailableDatasetsTable extends Component { } } - formatDataTypeValueCell(value, row, controlAccess) { + formatDataTypeValueCell(value, row, tissueType) { return ( - + {value} @@ -107,7 +106,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row => this.handleEmptyCounts(row.hrtCount, row), + getCellValue: row => this.handleEmptyCounts(row.hrtCount, row, "Healthy Reference"), name: 'hrtCount', }, { @@ -123,7 +122,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row => this.handleEmptyCounts(row.ckdCount, row), + getCellValue: row => this.handleEmptyCounts(row.ckdCount, row, "CKD"), name: 'ckdCount', }, { @@ -139,7 +138,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row => this.handleEmptyCounts(row.akiCount, row), + getCellValue: row => this.handleEmptyCounts(row.akiCount, row, "AKI"), name: 'akiCount', }, { @@ -155,7 +154,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row => this.handleEmptyCounts(row.dmrCount, row), + getCellValue: row => this.handleEmptyCounts(row.dmrCount, row, "DM-R"), name: 'dmrCount', } ] From ce9e148ca7e797aaba7a621253117605acb6af1e Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 12:43:44 -0500 Subject: [PATCH 09/14] include tissueType in url --- src/components/Home/AvailableDatasetsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index 4292ca8b..ebd4517d 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -57,7 +57,7 @@ class AvailableDatasetsTable extends Component { let linkType = row.linkInformation.linkType; let linkValue = row.linkInformation.linkValue.replace('&', '%26'); let mapping = `/repository/?size=n_20_n&filters[0][field]=${linkType}&filters[0][values][0]=${linkValue}&filters[0][type]=any&filters[1][field]=tissue_type&filters[1][values][0]=${tissueType}&filters[1][type]=any` - if(linkType && linkValue){ + if(linkType && linkValue && tissueType){ return encodeURI(mapping).replace('%2526', '%26'); } else { this.props.history.push('/oops'); From 4e21f0891cc32525d7f297b1040c59bc57106ef0 Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 12:45:02 -0500 Subject: [PATCH 10/14] remove tissueType form if statement --- src/components/Home/AvailableDatasetsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index ebd4517d..4292ca8b 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -57,7 +57,7 @@ class AvailableDatasetsTable extends Component { let linkType = row.linkInformation.linkType; let linkValue = row.linkInformation.linkValue.replace('&', '%26'); let mapping = `/repository/?size=n_20_n&filters[0][field]=${linkType}&filters[0][values][0]=${linkValue}&filters[0][type]=any&filters[1][field]=tissue_type&filters[1][values][0]=${tissueType}&filters[1][type]=any` - if(linkType && linkValue && tissueType){ + if(linkType && linkValue){ return encodeURI(mapping).replace('%2526', '%26'); } else { this.props.history.push('/oops'); From 9cb3c3432eed76a950a2132ec4dae06f5da0dd27 Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 12:52:34 -0500 Subject: [PATCH 11/14] add styling --- src/components/Home/AvailableDatasetsTable.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index 4292ca8b..a6c4e157 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -91,6 +91,7 @@ class AvailableDatasetsTable extends Component { return [ { title: OMICS TYPE, + getCellValue: row =>
{row.omicsType}
, name: 'omicsType', }, { @@ -106,7 +107,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row => this.handleEmptyCounts(row.hrtCount, row, "Healthy Reference"), + getCellValue: row =>
{this.handleEmptyCounts(row.hrtCount, row, "Healthy Reference")}
, name: 'hrtCount', }, { @@ -122,7 +123,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row => this.handleEmptyCounts(row.ckdCount, row, "CKD"), + getCellValue: row =>
{this.handleEmptyCounts(row.ckdCount, row, "CKD")}
, name: 'ckdCount', }, { @@ -138,7 +139,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row => this.handleEmptyCounts(row.akiCount, row, "AKI"), + getCellValue: row =>
{this.handleEmptyCounts(row.akiCount, row, "AKI")}
, name: 'akiCount', }, { @@ -154,7 +155,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row => this.handleEmptyCounts(row.dmrCount, row, "DM-R"), + getCellValue: row =>
{this.handleEmptyCounts(row.dmrCount, row, "DM-R")}
, name: 'dmrCount', } ] From 9c9aa6e1c7d5d46fd15695bf52b775926bbcc83e Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 12:55:42 -0500 Subject: [PATCH 12/14] remove styling for everyting except omicsType --- src/components/Home/AvailableDatasetsTable.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index a6c4e157..5f4be5b5 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -107,7 +107,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row =>
{this.handleEmptyCounts(row.hrtCount, row, "Healthy Reference")}
, + getCellValue: row => this.handleEmptyCounts(row.hrtCount, row, "Healthy Reference"), name: 'hrtCount', }, { @@ -123,7 +123,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row =>
{this.handleEmptyCounts(row.ckdCount, row, "CKD")}
, + getCellValue: row => this.handleEmptyCounts(row.ckdCount, row, "CKD"), name: 'ckdCount', }, { @@ -139,7 +139,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row =>
{this.handleEmptyCounts(row.akiCount, row, "AKI")}
, + getCellValue: row => this.handleEmptyCounts(row.akiCount, row, "AKI"), name: 'akiCount', }, { @@ -155,7 +155,7 @@ class AvailableDatasetsTable extends Component { , - getCellValue: row =>
{this.handleEmptyCounts(row.dmrCount, row, "DM-R")}
, + getCellValue: row => this.handleEmptyCounts(row.dmrCount, row, "DM-R"), name: 'dmrCount', } ] From f23894fbd15a78d1252212bf78a895af5a0ef91d Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 13:00:42 -0500 Subject: [PATCH 13/14] remove unused code and fix omicsType width --- src/components/Home/AvailableDatasetsTable.js | 26 +------------------ 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index 5f4be5b5..710ee71a 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -26,29 +26,6 @@ class AvailableDatasetsTable extends Component { } - handleDataTypeClick(dataType) { - handleGoogleAnalyticsEvent('Explorer', 'Navigation', `data type: ${dataType} and gene: ${this.props.gene}`); - let dataLinkageMapping = { - 'Single-nucleus RNA-seq (snRNA-seq)': 'sn', - 'Single-cell RNA-seq (scRNA-seq)': 'sc', - 'Regional transcriptomics': 'rt', - 'Regional proteomics':'rp', - 'Light Microscopic Whole Slide Images': 'wsi', - '3D Tissue Imaging and Cytometry': '3d', - 'CODEX': 'codex', - 'Spatial Metabolomics': 'sm', - 'Spatial Lipidomics': 'sl', - 'Spatial N-glycomics': 'sng', - 'Spatial Transcriptomics': 'st' - }; - if (dataLinkageMapping[dataType]) { - this.props.setDataType(dataLinkageMapping[dataType], this.props); - } else { - this.props.history.push('/oops'); - throw new Error('Datatype not found', dataType) - } - } - handleEmptyCounts(count, row, tissueType){ return count === 0 ? "" : this.formatDataTypeValueCell(count, row, tissueType) } @@ -78,7 +55,7 @@ class AvailableDatasetsTable extends Component { getColumnExtensions() { return [ - { columnName: 'omicsType', width: 'auto'}, + { columnName: 'omicsType', width: 265}, { columnName: 'akiCount', width: 'auto'}, { columnName: 'hrtCount', width: 'auto'}, { columnName: 'ckdCount', width: 'auto'}, @@ -91,7 +68,6 @@ class AvailableDatasetsTable extends Component { return [ { title: OMICS TYPE, - getCellValue: row =>
{row.omicsType}
, name: 'omicsType', }, { From e3c0566a298622520391eb0e52a7772c54b4ce3f Mon Sep 17 00:00:00 2001 From: Nathan Creger Date: Thu, 29 Feb 2024 13:05:04 -0500 Subject: [PATCH 14/14] center numbers --- src/components/Home/AvailableDatasetsTable.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index 710ee71a..83893361 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/src/components/Home/AvailableDatasetsTable.js @@ -56,10 +56,10 @@ class AvailableDatasetsTable extends Component { return [ { columnName: 'omicsType', width: 265}, - { columnName: 'akiCount', width: 'auto'}, - { columnName: 'hrtCount', width: 'auto'}, - { columnName: 'ckdCount', width: 'auto'}, - { columnName: 'dmrCount', width: 'auto'}, + { columnName: 'akiCount', width: 'auto', align: 'center'}, + { columnName: 'hrtCount', width: 'auto', align: 'center'}, + { columnName: 'ckdCount', width: 'auto', align: 'center'}, + { columnName: 'dmrCount', width: 'auto', align: 'center'}, ] }