KPMP-4941_update-files-in-data-repo

data/schema.graphql

@@ -19,8 +19,10 @@ type getAtlasSummaryRows{
 }
 
 type SummaryRows{
-  openCount: Long,
-  controlledCount: Long,
+  akiCount: Long,
+  ckdCount: Long,
+  hrtCount: Long,
+  dmrCount: Long,
   omicsType: String,
   linkInformation: [LinkInformation]
 }

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: [],
+
         };
 
     }
@@ -25,37 +26,14 @@ 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)
     }
 
-    handleEmptyCounts(count, row, controlAccess){
-        return count === 0 ? "" : this.formatDataTypeValueCell(count, row, controlAccess)
-    }
-
-    handleDataTypeValueClick(row, controlAccess) {
+    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]=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&filters[1][field]=tissue_type&filters[1][values][0]=${tissueType}&filters[1][type]=any`
         if(linkType && linkValue){
             return encodeURI(mapping).replace('%2526', '%26');
         } else {
@@ -64,9 +42,9 @@ class AvailableDatasetsTable extends Component {
         }
     }
 
-    formatDataTypeValueCell(value, row, controlAccess) {
+    formatDataTypeValueCell(value, row, tissueType) {
         return (
-            <a href={`${this.handleDataTypeValueClick(row, controlAccess)}`}>
+            <a href={`${this.handleDataTypeValueClick(row, tissueType)}`}>
                 <span className="buttonhref">
                     {value}
                 </span>
@@ -77,38 +55,90 @@ class AvailableDatasetsTable extends Component {
     getColumnExtensions() {
 
         return [
-            { columnName: 'omicsType', width: 'auto'},
-            { columnName: 'controlledCount', width: 'auto', align: 'center'},
-            { columnName: 'openCount', width: 'auto', align: 'center' },
+            { columnName: 'omicsType', width: 265},
+            { columnName: 'akiCount', width: 'auto', align: 'center'},
+            { columnName: 'hrtCount', width: 'auto', align: 'center'},
+            { columnName: 'ckdCount', width: 'auto', align: 'center'},
+            { columnName: 'dmrCount', width: 'auto', align: 'center'},
         ]
     }
 
     getColumns() {
-        return [
-            {
-                title: <span className="table-header omics data-type-table-header">OMICS TYPE</span>,
-                name: 'omicsType',
-                getCellValue: row => <div className='data-type-table-content' style={{'flex': '250 0 auto'}} role='gridcell'>{row.omicsType}</div>
-
-            },
-            {
-                title: 
-                    <a href={`https://www.kpmp.org/controlled-data`} ><span className="data-type-table-header">CONTROLLED</span></a>
-                ,
-                name: 'controlledCount',
-                getCellValue: row => <div className='rt-td data-type-table-content' style={{'flex': '250 0 auto','textAlign': 'center'}} role='gridcell'>{this.handleEmptyCounts(row.controlledCount, row, "controlled")}</div>
-            },
-            {
-                title:
-                    <span className='table-header data-type-table-header rt-resizable-header-content'>OPEN</span>
-                ,
-                name: 'openCount',
-                getCellValue: row =>  <div className='rt-td data-type-table-content' style={{'flex': '250 0 auto','textAlign': 'center'}} role='gridcell'>{this.handleEmptyCounts(row.openCount, row, "open")}</div>
-            }
-        ]
-    };
+
+      return [
+          {
+              title: <span className="omics data-type-table-header table-header">OMICS TYPE</span>,
+              name: 'omicsType',
+          },
+          {
+              title: 
+                  <span>
+                    <span className="table-header data-type-table-header" id="HealthyReferenceHeader">
+                     REFERENCE
+                    </span>
+                    <UncontrolledTooltip 
+                      placement="bottom"
+                      target="HealthyReferenceHeader">
+                    Healthy Reference
+                    </UncontrolledTooltip>
+                  </span>
+              ,
+              getCellValue: row => this.handleEmptyCounts(row.hrtCount, row, "Healthy Reference"),
+              name: 'hrtCount',
+          },
+          {
+              title:
+                  <span>
+                    <span className="table-header data-type-table-header" id="CKDHeader">
+                    CKD
+                    </span>
+                    <UncontrolledTooltip 
+                      placement="bottom"
+                      target="CKDHeader">
+                    Chronic Kidney Disease
+                    </UncontrolledTooltip>
+                  </span>
+              ,
+              getCellValue: row => this.handleEmptyCounts(row.ckdCount, row, "CKD"),
+              name: 'ckdCount',
+          },
+          {
+              title: 
+                  <span>
+                    <span className="table-header data-type-table-header" id="AKIHeader">
+                    AKI
+                    </span>
+                    <UncontrolledTooltip 
+                      placement="bottom"
+                      target="AKIHeader">
+                    Acute Kidney Injury
+                    </UncontrolledTooltip>
+                  </span>
+              ,
+              getCellValue: row => this.handleEmptyCounts(row.akiCount, row, "AKI"),
+              name: 'akiCount',
+          },
+          {
+              title: 
+                  <span>
+                    <span className="table-header data-type-table-header" id="ResistorHeader">
+                    DM-R
+                    </span>
+                    <UncontrolledTooltip 
+                      placement="bottom"
+                      target="ResistorHeader">
+                    Diabetes Mellitus - Resilient
+                    </UncontrolledTooltip>
+                  </span>
+              ,
+              getCellValue: row => this.handleEmptyCounts(row.dmrCount, row, "DM-R"),
+              name: 'dmrCount',
+          }   
+      ]
+  };
 
     render() {
+      console.log(this.state)
         return (
             <article id='summary-plot'>
                 <Row className='mt-4'>

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
 });

src/helpers/ApolloClient.js

@@ -472,18 +472,20 @@ export const fetchTissueTypeSummaryCounts = async () => {
 export const fetchAtlasSummaryRows = async () => {
     let query = gql`
         query {
-            getAtlasSummaryRows{
-                totalFiles
-                summaryRows {
-                    openCount
-                    controlledCount
-                    omicsType
-                    linkInformation {
-                        linkType
-                        linkValue
-                    }
-                }
+          getAtlasSummaryRows {
+            totalFiles
+            summaryRows {
+              akiCount
+              ckdCount
+              hrtCount
+              dmrCount
+              omicsType
+              linkInformation {
+                linkType
+                linkValue
+              }
             }
+          }
         }`;
     const response = await apolloClient.query({
         query: query,