diff --git a/data/schema.graphql b/data/schema.graphql index 1030e0ec..408815c9 100644 --- a/data/schema.graphql +++ b/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 diff --git a/src/actions/DataType/dataTypeActions.js b/src/actions/DataType/dataTypeActions.js index 20505bf7..25d76544 100644 --- a/src/actions/DataType/dataTypeActions.js +++ b/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; diff --git a/src/components/DataViz/DataTypeSelector.js b/src/components/DataViz/DataTypeSelector.js index d9e828d3..19f4d46e 100644 --- a/src/components/DataViz/DataTypeSelector.js +++ b/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) diff --git a/src/components/DataViz/DataTypeSelectorContainer.js b/src/components/DataViz/DataTypeSelectorContainer.js index 3b200a70..3134e78b 100644 --- a/src/components/DataViz/DataTypeSelectorContainer.js +++ b/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")); + } } }); diff --git a/src/components/DataViz/RegionalProteomics.js b/src/components/DataViz/RegionalProteomics.js index a0e4e510..c43803b1 100644 --- a/src/components/DataViz/RegionalProteomics.js +++ b/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 (
-

Blank Regional Proteomics page!

+ + + +
+ + + + + +
Gene Expression:
+

Enter a gene above to get started

+ + +
+ +
) } diff --git a/src/components/DataViz/RegionalProteomicsContainer.js b/src/components/DataViz/RegionalProteomicsContainer.js new file mode 100644 index 00000000..960561ce --- /dev/null +++ b/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) \ No newline at end of file diff --git a/src/components/Explorer/SamplesByDataTypeTable.js b/src/components/Explorer/SamplesByDataTypeTable.js index 5be9ba27..fd4f4404 100644 --- a/src/components/Explorer/SamplesByDataTypeTable.js +++ b/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', diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js index 35346d50..f43b088f 100644 --- a/src/components/Home/AvailableDatasetsTable.js +++ b/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', diff --git a/src/components/Home/SamplesByDataTypeTable.js b/src/components/Home/SamplesByDataTypeTable.js index 24ba7618..e4854b4b 100644 --- a/src/components/Home/SamplesByDataTypeTable.js +++ b/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: - AKI + AKIƒ { } 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) { diff --git a/src/helpers/Utils.js b/src/helpers/Utils.js index 2207764c..79334e67 100644 --- a/src/helpers/Utils.js +++ b/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; });