Merge pull request #440 from KPMP/KPMP-4431_link-out-to-regional-pro

KPMP-4431_link-out-to-regional-pro

data/schema.graphql

@@ -5,7 +5,7 @@ type Query {
   getClusterHieararchies(cellType: String!): [ClusterHierarchy]
   getUmapPlotData(dataType: String!, geneSymbol: String!, tissueType: String): PlotData
   dataTypesForConcept(geneSymbol: String, clusterName: String): [String]
-  getGeneDatasetInformation(geneSymbol: String): [GeneDatasetInformation]
+  getDataTypeSummaryInformation: [getDataTypeSummaryInformation]
   getRTGeneExpressionByTissue(comparisonType: String, geneSymbol: String): RTGeneExpressionByTissue
   getRTGeneExpressionByStructure(structure: String): [RTGeneExpression]
   getDataSummary(dataType: String): [SummaryData]
@@ -37,7 +37,7 @@ type getTissueTypeSummaryData{
   dmrCount: Long
 }
 
-type GeneDatasetInformation {
+type getDataTypeSummaryInformation {
   omicsType: String
   dataType: String
   dataTypeShort: String

src/actions/DataType/dataTypeActions.js

@@ -38,6 +38,10 @@ export const setDataTypeAndRedirect = (dataType, props) => {
                 dispatch(setDataType(dataType));
                 window.open('/explorer/regionalviz', '_self');
                 break;
+            case "rp":
+                dispatch(setDataType(dataType));
+                window.open("/explorer/regionalpro", "_self");
+                break;
             case "wsi":
                 window.open('/spatial-viewer/?size=n_20_n&filters%5B0%5D%5Bfield%5D=datatype&filters%5B0%5D%5Bvalues%5D%5B0%5D=Light%20Microscopic%20Whole%20Slide%20Images&filters%5B0%5D%5Btype%5D=any', '_self')
                 break;

src/components/DataViz/DataTypeSelector.js

@@ -3,7 +3,7 @@ import Select from "react-select";
 import { Row, Col, Container } from 'reactstrap';
 import ConceptSelectContainer from '../ConceptSelect/ConceptSelectContainer';
 import { getTissueTypeOptions, getAllDataTypeOptions, getDataTypeOptionsWithTissueType } from "../../helpers/Utils";
-import { fetchGeneDatasetSummary } from '../../helpers/ApolloClient';
+import { fetchDataTypeSummaryInformation } from '../../helpers/ApolloClient';
 import { handleGoogleAnalyticsEvent } from '../../helpers/googleAnalyticsHelper';
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -37,7 +37,7 @@ class DataTypeSelector extends Component {
             if (this.props.gene.symbol) {
                 this.reloadPageData(this.props.gene.symbol);
             } else {
-                this.fetchGeneDatasetSummary();
+                this.fetchDataTypeSummaryInformation();
             }
         }
     }
@@ -53,7 +53,7 @@ class DataTypeSelector extends Component {
         if (this.props.gene.symbol) {
             this.reloadPageData(this.props.gene.symbol);
         } else {
-            this.fetchGeneDatasetSummary();
+            this.fetchDataTypeSummaryInformation();
         }
     }
 
@@ -85,9 +85,9 @@ class DataTypeSelector extends Component {
         }
         return datasetSummary
     }
-    fetchGeneDatasetSummary = async (geneSymbol) => {
+    fetchDataTypeSummaryInformation = async (geneSymbol) => {
         this.setState({ isDatasetSummaryLoading: true, datasetToggle: 'collapsed' });
-        return fetchGeneDatasetSummary(geneSymbol).then(
+        return fetchDataTypeSummaryInformation(geneSymbol).then(
             (datasetSummary) => {
                 if (datasetSummary) {
                     datasetSummary = this.formatGeneDataset(datasetSummary)
@@ -112,7 +112,7 @@ class DataTypeSelector extends Component {
 
 
     reloadPageData = async (geneSymbol) => {
-        this.fetchGeneDatasetSummary(geneSymbol).then(
+        this.fetchDataTypeSummaryInformation(geneSymbol).then(
             (datasetSummary) => {
                 if (datasetSummary) {
                     datasetSummary = this.formatGeneDataset(datasetSummary)

src/components/DataViz/DataTypeSelectorContainer.js

@@ -24,6 +24,9 @@ const mapDispatchToProps = (dispatch, props) =>
         } else if (dataType === 'sc' || dataType === 'sn') {
             dispatch((dispatch) => window.open("/explorer/dataViz", "_self"));
         }
+        else if(dataType === "rp"){
+          dispatch((dispatch) => window.open("/regionalpro", "_self"));
+        } 
     }
 
 });

src/components/DataViz/RegionalProteomics.js

@@ -1,10 +1,40 @@
 import React, { Component } from 'react';
+import { Container, Row, Col } from 'reactstrap';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import DataTypeSelectorContainer from './DataTypeSelectorContainer';
+import { faShare } from "@fortawesome/free-solid-svg-icons";
+import queryString from 'query-string';
 
 class RegionalProteomics extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { rtAllPlotData: [], rtAllTableData: [], rtGTPlotData: [], rtGTTableData: [], selectedComparison: 'all_segments', selectedPlot: 'box' };
+    const queryParam = queryString.parse(props.location.search);
+    if (queryParam && queryParam.dataType) {
+        this.props.resetState();
+        props.setDataType('rp');
+        window.open(props.location.pathname, '_self');
+    }
+};
     render() {
         return (
             <div className='height-wrapper mb-3 mt-3'>
-              <h1>Blank Regional Proteomics page!</h1>
+              <Container id='outer-wrapper'>
+                <DataTypeSelectorContainer/>
+                <Container className='mt-3 rounded border p-3 shadow-sm mb-5'>
+                            <div className="regional-search-copy">
+                                <Row xs='12'>
+                                    <Col lg={{ size: 1, offset: 4 }}>
+                                        <FontAwesomeIcon className={"fa fa-share"} icon={faShare} />
+                                    </Col>
+                                    <Col lg='7'>
+                                        <h6>Gene Expression:</h6>
+                                        <p>Enter a gene above to get started</p>
+                                    </Col>
+                                </Row>
+                            </div>
+                        </Container >
+              </Container>
             </div>
         )
     }

src/components/DataViz/RegionalProteomicsContainer.js

@@ -0,0 +1,28 @@
+import {connect} from "react-redux";
+import RegionalProteomics from "./RegionalProteomics";
+import { setTissueType } from '../../actions/TissueType/tissueTypeActions'
+import { setDataType } from "../../actions/DataType/dataTypeActions";
+import { resetState } from "../../actions/resetAction";
+
+const mapStateToProps = (state, props) =>
+    ({
+        conceptSummary: state.conceptSummary,
+        gene: state.gene,
+        dataType: state.dataType,
+        tissueType: state.tissueType
+    });
+
+const mapDispatchToProps = (dispatch, props) =>
+    ({
+        setTissueType(tissueType) {
+            dispatch(setTissueType(tissueType));
+        },
+        setDataType(dataType) {
+            dispatch(setDataType(dataType));
+        },
+        resetState() {
+            dispatch(resetState());
+        }
+    });
+
+export default connect(mapStateToProps, mapDispatchToProps)(RegionalProteomics)

src/components/Explorer/SamplesByDataTypeTable.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Row, Col } from 'reactstrap';
 import { handleGoogleAnalyticsEvent } from '../../helpers/googleAnalyticsHelper';
 import { availableDataVisibilityFilter } from '../../helpers/Utils';
-import { fetchSummaryData, fetchGeneDatasetSummary} from '../../helpers/ApolloClient';
+import { fetchSummaryData, fetchDataTypeSummaryInformation} from '../../helpers/ApolloClient';
 import { Grid, TableHeaderRow, Table, TableColumnResizing} from '@devexpress/dx-react-grid-bootstrap4';
 import '@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css';
 
@@ -33,7 +33,7 @@ class SamplesByDataTypeTable extends Component {
 
     async componentDidMount() {
         let summary = await fetchSummaryData("explorerHomepageSummary")
-        const geneDatasetSummary = await fetchGeneDatasetSummary("")
+        const geneDatasetSummary = await fetchDataTypeSummaryInformation()
         summary = summary.concat(geneDatasetSummary)
         summary = summary.slice()
                         .sort( this.compare )
@@ -47,6 +47,7 @@ class SamplesByDataTypeTable extends Component {
             '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',

src/components/Home/AvailableDatasetsTable.js

@@ -31,6 +31,7 @@ class AvailableDatasetsTable extends Component {
             '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',

src/components/Home/SamplesByDataTypeTable.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Grid, TableFixedColumns, TableHeaderRow, Table} from '@devexpress/dx-react-grid-bootstrap4';
 import { availableDataVisibilityFilter } from '../../helpers/Utils';
-import { fetchSummaryData, fetchGeneDatasetSummary} from '../../helpers/ApolloClient';
+import { fetchSummaryData, fetchDataTypeSummaryInformation} from '../../helpers/ApolloClient';
 import { Row, Col, UncontrolledTooltip } from 'reactstrap';
 import { handleGoogleAnalyticsEvent } from '../../helpers/googleAnalyticsHelper';
 
@@ -21,7 +21,7 @@ class SamplesByDataTypeTable extends Component {
         spatialSummary = spatialSummary.sort(this.compare)
         spatialSummary = spatialSummary.filter(availableDataVisibilityFilter)
 
-        let explorerSummary = await fetchGeneDatasetSummary("");
+        let explorerSummary = await fetchDataTypeSummaryInformation();
         explorerSummary = explorerSummary.sort(this.compare)
         explorerSummary = explorerSummary.filter(availableDataVisibilityFilter)
 
@@ -49,6 +49,7 @@ class SamplesByDataTypeTable extends Component {
             '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',
@@ -125,7 +126,7 @@ class SamplesByDataTypeTable extends Component {
                 title: 
                     <span>
                       <span className="table-header data-type-table-header" id="AKIHeader">
-                      AKI
+                      AKIƒ
                       </span>
                       <UncontrolledTooltip 
                         placement="bottom"
@@ -159,7 +160,7 @@ class SamplesByDataTypeTable extends Component {
         return [
             { columnName: 'dataType', width: 265},
             { columnName: 'hrtCount', width: 'auto', align: 'center'},
-            { columnName: 'ckdCount', width: 'auto', align: 'center' },
+            { columnName: 'ckdCount', width: 'auto', alignf: 'center' },
             { columnName: 'akiCount', width: 'auto', align: 'center' },
             { columnName: 'dmrCount', width: 'auto', align: 'center' },
         ]

src/helpers/ApolloClient.js

@@ -137,10 +137,9 @@ export const fetchClusterHierarchy = async (cellType) => {
 }
 
 export const fetchDataTypeSummaryInformation = async (fetchPolicy = 'no-cache') => {
-    const response = await apolloClient.query({
-        query: gql`
-            query {
-                getDataTypeSummaryInformation()
+    const query = gql`
+      query {
+                getDataTypeSummaryInformation
                  {
                     omicsType
                     dataType
@@ -151,7 +150,9 @@ export const fetchDataTypeSummaryInformation = async (fetchPolicy = 'no-cache')
                     dmrCount
                     participantCount
                 }
-            }`,
+            }`;
+    const response = await apolloClient.query({
+        query: query,
         fetchPolicy: fetchPolicy
     });
     if (response.data && response.data.getDataTypeSummaryInformation) {

src/helpers/Utils.js

@@ -130,6 +130,11 @@ export const getDataTypeOptions = async (geneSymbol, cluster) => {
                 value: "rt",
                 isDisabled: !dataTypes.includes("rt")
             },
+            {
+                label: "Regional proteomics",
+                value: "rp",
+                isDisabled: !dataTypes.includes("rp")
+            }
         ];
         return options;
     });