Merge pull request #546 from KPMP/develop

Release v2.6 (Q4 2024)

changelog.md

@@ -2,12 +2,13 @@
 
 ## Release 2.5 (unreleased)
 Brief summary of what's in this release:
+- updated to use 'enrollmentCategory' instead of 'tissueType' in variables
+- updated code to call new graphql endpoints (because of renames)
+- added new section to the Atlas home page
+- updated kpmp-common-components to get new menu items
 
 ### Breaking changes
-Breaking changes include any database updates needed, if we need to edit any files on system (like .env or certs, etc). Things that are outside of the code itself that need changed for the system to work.
-
-### Non-breaking changes
-Just a place to keep track of things that have changed in the code that we may want to pay special attention to when smoke testing, etc.
+This won't work with previous versions of pegasus-data because the names and structure of underlying graphql queries have been updated
 
 
 -----

data/schema.graphql

@@ -1,15 +1,15 @@
 type Query {
   autocomplete(searchTerm: String): [AutoCompleteResult]
   cellTypeHierarchy: CellTypeHierarchy
-  geneExpressionSummary(dataType: String, geneSymbol: String, cellType: String, tissueType: String) : [GeneExpressionSummary]
+  geneExpressionSummary(dataType: String, geneSymbol: String, cellType: String, enrollmentCategory: String) : [GeneExpressionSummary]
   getClusterHieararchies(cellType: String!): [ClusterHierarchy]
-  getUmapPlotData(dataType: String!, geneSymbol: String!, tissueType: String): PlotData
+  getUmapPlotData(dataType: String!, geneSymbol: String!, enrollmentCategory: String): PlotData
   dataTypesForConcept(geneSymbol: String, clusterName: String): [String]
   getDataTypeSummaryInformation: [getDataTypeSummaryInformation]
   getRTGeneExpressionByTissue(comparisonType: String, geneSymbol: String): RTGeneExpressionByTissue
   getRTGeneExpressionByStructure(structure: String): [RTGeneExpression]
   getDataSummary(dataType: String): [SummaryData]
-  getTissueTypeSummaryData: [getTissueTypeSummaryData]
+  getEnrollmentCategorySummaryData: [getEnrollmentCategorySummaryData]
   getAtlasSummaryRows: [getAtlasSummaryRows]
 }
 
@@ -32,7 +32,7 @@ type LinkInformation{
   linkValue: String
 }
 
-type getTissueTypeSummaryData{
+type getEnrollmentCategorySummaryData{
   akiCount: Long,
   ckdCount: Long,
   hrtCount: Long,
@@ -78,7 +78,7 @@ type CellType {
 
 type GeneExpressionSummary {
     id: ID
-    tissueType: String
+    enrollmentCategory: String
     gene: String
     pVal: Float
     pValAdj: Float
@@ -134,7 +134,7 @@ type RTGeneExpression {
     pVal: Float
     stdDev: Float
     pValLog10: Float
-    tissueType: String
+    enrollmentCategory: String
     sampleCount: Int
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pegasus-web",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "private": true,
   "homepage": "/",
   "dependencies": {
@@ -32,7 +32,7 @@
     "history": "5.0.0",
     "html-react-parser": "1.4.0",
     "isomorphic-unfetch": "3.1.0",
-    "kpmp-common-components": "1.2.14",
+    "kpmp-common-components": "1.2.16",
     "kpmp-common-styles": "1.0.13",
     "material-table": "1.69.3",
     "npm-run-all": "4.1.5",

src/actions/EnrollmentCategory/enrollmentCategoryActions.js

@@ -0,0 +1,8 @@
+import actionNames from '../actionNames'
+
+export const setEnrollmentCategory = (enrollmentCategory) => {
+    return {
+        type: actionNames.SET_ENROLLMENT_CATEGORY,
+        payload: enrollmentCategory
+    }
+};

src/actions/actionNames.js

@@ -3,7 +3,7 @@ const actionNames = {
   RESET_STATE: 'RESET_STATE',
   SET_SELECTED_CONCEPT: 'SET_SELECTED_CONCEPT',
   SET_DATA_TYPE: 'SET_DATA_TYPE',
-  SET_TISSUE_TYPE: 'SET_TISSUE_TYPE',
+  SET_ENROLLMENT_CATEGORY: 'SET_ENROLLMENT_CATEGORY',
   SET_CLUSTER: 'SET_CLUSTER',
   SET_CELL_TYPE: 'SET_CELL_TYPE',
   SET_GENE: 'SET_GENE',

src/components/DataViz/DataTypeSelector.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import Select from "react-select";
 import { Row, Col, Container} from 'reactstrap';
 import ConceptSelectContainer from '../ConceptSelect/ConceptSelectContainer';
-import { getTissueTypeOptions, getAllDataTypeOptions, getDataTypeOptionsWithTissueType } from "../../helpers/Utils";
+import { getEnrollmentCategoryOptions, getAllDataTypeOptions, getDataTypeOptionsWithEnrollmentCategory } from "../../helpers/Utils";
 import { fetchDataTypeSummaryInformation } from '../../helpers/ApolloClient';
 import { handleGoogleAnalyticsEvent } from '../../helpers/googleAnalyticsHelper';
 import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons";
@@ -13,7 +13,7 @@ class DataTypeSelector extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            tissueInputValue: this.props.tissueType ? this.props.tissueType : "all",
+            tissueInputValue: this.props.enrollmentCategory ? this.props.enrollmentCategory : "all",
             isDatasetSummaryLoading: false,
             tissueValue: null,
             dataTypeInputValue: null,
@@ -33,7 +33,7 @@ class DataTypeSelector extends Component {
     componentDidUpdate(prevProps) {
         if ((this.props.gene.symbol !== prevProps.gene.symbol
             || this.props.dataType !== prevProps.dataType
-            || this.props.tissueType !== prevProps.tissueType)) {
+            || this.props.enrollmentCategory !== prevProps.enrollmentCategory)) {
             if (this.props.gene.symbol) {
                 this.reloadPageData(this.props.gene.symbol);
             } else {
@@ -44,11 +44,11 @@ class DataTypeSelector extends Component {
 
     componentDidMount() {
         let options = getAllDataTypeOptions()
-        let tissueTypeOptions = getTissueTypeOptions(this.state.selectedDataset, this.props.gene.symbol);
+        let enrollmentCategoryOptions = getEnrollmentCategoryOptions(this.state.selectedDataset, this.props.gene.symbol);
 
         let selectedOption = options.find(item => this.props.dataType === item.value);
-        let selectedTissueType = tissueTypeOptions.find(item => this.state.tissueInputValue === item.value)
-        this.setState({ dataTypeOptions: options, dataTypeInputValue: selectedOption, tissueValue: selectedTissueType })
+        let selectedEnrollmentCategory = enrollmentCategoryOptions.find(item => this.state.tissueInputValue === item.value)
+        this.setState({ dataTypeOptions: options, dataTypeInputValue: selectedOption, tissueValue: selectedEnrollmentCategory })
 
         if (this.props.gene.symbol) {
             this.reloadPageData(this.props.gene.symbol);
@@ -61,14 +61,14 @@ class DataTypeSelector extends Component {
         // Coming from homepage search (no datatype yet)
         if (!dataTypeShort && availableData && availableData.length > 0) {
             this.props.setDataType(availableData[0].dataTypeShort);
-            this.props.setTissueType(this.props.tissueType ? this.props.tissueType : "all");
+            this.props.setEnrollmentCategory(this.props.enrollmentCategory ? this.props.enrollmentCategory : "all");
             this.setState({ selectedDataset: availableData[0], tissueInputValue: "all"})
             return
         }
         // Coming from search on viz page (has datatype)
         for (const [, dataset] of availableData.entries()) {
             if (dataset["dataTypeShort"] === dataTypeShort) {
-                this.props.setTissueType(this.props.tissueType ? this.props.tissueType : "all");
+                this.props.setEnrollmentCategory(this.props.enrollmentCategory ? this.props.enrollmentCategory : "all");
                 this.setState({ selectedDataset: dataset, })
                 return
             }
@@ -117,13 +117,13 @@ class DataTypeSelector extends Component {
                 if (datasetSummary) {
                     datasetSummary = this.formatGeneDataset(datasetSummary)
                     this.setSelectedDatasetSummary(this.props.dataType, datasetSummary)
-                    getDataTypeOptionsWithTissueType(this.props.gene.symbol, "", datasetSummary, this.props.tissueType).then(
+                    getDataTypeOptionsWithEnrollmentCategory(this.props.gene.symbol, "", datasetSummary, this.props.enrollmentCategory).then(
                         (options) => {
                             let selectedOption = options.find(item => this.props.dataType === item.value);
-                            let tissueTypeOptions = getTissueTypeOptions(this.state.selectedDataset, this.props.gene.symbol);
+                            let enrollmentCategoryOptions = getEnrollmentCategoryOptions(this.state.selectedDataset, this.props.gene.symbol);
 
-                            let selectedTissueType = tissueTypeOptions.find(item => this.state.tissueInputValue === item.value)
-                            this.setState({ dataTypeOptions: options, dataTypeInputValue: selectedOption, availableData: datasetSummary, tissueValue: selectedTissueType })
+                            let selectedEnrollmentCategory = enrollmentCategoryOptions.find(item => this.state.tissueInputValue === item.value)
+                            this.setState({ dataTypeOptions: options, dataTypeInputValue: selectedOption, availableData: datasetSummary, tissueValue: selectedEnrollmentCategory })
                         },
                         (error) => {
                             this.setState({ dataTypeOptions: [] });
@@ -149,8 +149,8 @@ class DataTypeSelector extends Component {
 
 
     handleTissueSelect = (selected, actionMeta) => {
-        handleGoogleAnalyticsEvent('Explorer', 'Filter', `tissueType: ${selected.value}`);
-        this.props.setTissueType(selected.value);
+        handleGoogleAnalyticsEvent('Explorer', 'Filter', `enrollmentCategory: ${selected.value}`);
+        this.props.setEnrollmentCategory(selected.value);
         this.setState({ tissueValue: selected });
     };
 
@@ -163,7 +163,7 @@ class DataTypeSelector extends Component {
     };
 
     getInputValue = () => {
-        let options = getTissueTypeOptions(this.state.selectedDataset, this.props.gene.symbol);
+        let options = getEnrollmentCategoryOptions(this.state.selectedDataset, this.props.gene.symbol);
         try {
             return options.find(element => element.value === this.state.tissueInputValue).label
         } catch (e) {
@@ -222,7 +222,7 @@ class DataTypeSelector extends Component {
                             <span className='d-table-cell text-bigger pe-2'>in:</span>
                             <Select
                                 allowClear
-                                options={getTissueTypeOptions(this.state.selectedDataset, this.props.gene.symbol, this.props.dataType)}
+                                options={getEnrollmentCategoryOptions(this.state.selectedDataset, this.props.gene.symbol, this.props.dataType)}
                                 onChange={this.handleTissueSelect}
                                 value={this.state.tissueValue}
                                 inputValue={this.getInputValue()}

src/components/DataViz/DataTypeSelectorContainer.js

@@ -1,21 +1,21 @@
 import { connect } from 'react-redux';
 import DataTypeSelector from './DataTypeSelector';
 import { withRouter } from 'react-router';
-import { setTissueType } from '../../actions/TissueType/tissueTypeActions'
+import { setEnrollmentCategory } from '../../actions/EnrollmentCategory/enrollmentCategoryActions'
 import { setDataType } from "../../actions/DataType/dataTypeActions";
 
 const mapStateToProps = (state, props) =>
 ({
-    tissueType: state.tissueType,
+    enrollmentCategory: state.enrollmentCategory,
     dataType: state.dataType,
     gene: state.gene,
     isLoadingUmap: props.isLoadingUmap
 });
 
 const mapDispatchToProps = (dispatch, props) =>
 ({
-    setTissueType(tissueType) {
-        dispatch(setTissueType(tissueType));
+    setEnrollmentCategory(enrollmentCategory) {
+        dispatch(setEnrollmentCategory(enrollmentCategory));
     },
     setDataType(dataType) {
         dispatch(setDataType(dataType));

src/components/DataViz/RNASeqViz.js

@@ -31,29 +31,29 @@ class RNASeqViz extends Component {
         const queryParam = queryString.parse(this.props.location.search);
         if (this.props.gene.symbol !== undefined && this.props.gene.symbol !== '' && (!queryParam || !queryParam.dataType)) {
             await this.fetchDataType(this.props.gene.symbol)
-            if (!this.props.tissueType) {
-                this.props.setTissueType('all')
+            if (!this.props.enrollmentCategory) {
+                this.props.setEnrollmentCategory('all')
             }
             if (this.props.dataType) {
-                this.getGeneExpression(this.props.dataType, this.props.gene.symbol, "", this.props.tissueType, 'network-only');
-                this.getUmapPoints(this.props.dataType, this.props.gene.symbol, this.props.tissueType, 'network-only');
+                this.getGeneExpression(this.props.dataType, this.props.gene.symbol, "", this.props.enrollmentCategory, 'network-only');
+                this.getUmapPoints(this.props.dataType, this.props.gene.symbol, this.props.enrollmentCategory, 'network-only');
             }
         } else {
             this.setState({ isLoading: false, isLoadingUmap: false })
         }
     }
 
     async componentDidUpdate(prevProps) {
-        if (this.props.tissueType !== prevProps.tissueType
+        if (this.props.enrollmentCategory !== prevProps.enrollmentCategory
             || this.props.dataType !== prevProps.dataType
             || this.props.gene.symbol !== prevProps.gene.symbol) {
             if (this.props.gene.symbol && this.props.dataType) {
                 this.setState({ plotData: [], geneExpressionData: [], isLoading: true, isLoadingUmap: true });
-                if (!this.props.tissueType) {
-                    this.props.setTissueType('all')
+                if (!this.props.enrollmentCategory) {
+                    this.props.setEnrollmentCategory('all')
                 }
-                this.getGeneExpression(this.props.dataType, this.props.gene.symbol, "", this.props.tissueType);
-                this.getUmapPoints(this.props.dataType, this.props.gene.symbol, this.props.tissueType);
+                this.getGeneExpression(this.props.dataType, this.props.gene.symbol, "", this.props.enrollmentCategory);
+                this.getUmapPoints(this.props.dataType, this.props.gene.symbol, this.props.enrollmentCategory);
             }
         }
     }
@@ -79,14 +79,14 @@ class RNASeqViz extends Component {
         }
     }
 
-    getGeneExpression = async (dataType, gene, cellType, tissueType, fetchPolicy) => {
-        const results = await fetchGeneExpression(dataType, gene, cellType, tissueType, fetchPolicy);
+    getGeneExpression = async (dataType, gene, cellType, enrollmentCategory, fetchPolicy) => {
+        const results = await fetchGeneExpression(dataType, gene, cellType, enrollmentCategory, fetchPolicy);
         const cleanResults = this.cleanResults(results);
         this.setState({ geneExpressionData: cleanResults, isLoading: false });
     }
 
-    getUmapPoints = async (dataType, gene, tissueType, fetchPolicy) => {
-        const results = await fetchPlotlyData(dataType, gene, tissueType, fetchPolicy);
+    getUmapPoints = async (dataType, gene, enrollmentCategory, fetchPolicy) => {
+        const results = await fetchPlotlyData(dataType, gene, enrollmentCategory, fetchPolicy);
         this.setState({ plotData: results, isLoadingUmap: false });
     };
 
@@ -107,7 +107,7 @@ class RNASeqViz extends Component {
                             </Row>
                             <Row>
                                 <Col lg='6' className="umapPlot-container">
-                                    <UMAPPlot data={this.state.plotData} dataType={this.props.dataType ? this.props.dataType : 'sc'} tissueType={this.props.tissueType} />
+                                    <UMAPPlot data={this.state.plotData} dataType={this.props.dataType ? this.props.dataType : 'sc'} enrollmentCategory={this.props.enrollmentCategory} />
                                 </Col>
                             </Row>
                         </Col>
@@ -120,7 +120,7 @@ class RNASeqViz extends Component {
                             </Row>
                             <Row className={(!this.state.isLoadingUmap && !this.props.gene.symbol && this.state.plotData.length >= 0) ? 'featurePlot-loader-background' : ''}>
                                 <Col lg='12' className="featurePlot-container">
-                                    <FeaturePlot data={this.state.plotData} dataType={this.props.dataType} isLoading={this.state.isLoadingUmap} gene={this.props.gene.symbol} tissueType={this.props.tissueType} />
+                                    <FeaturePlot data={this.state.plotData} dataType={this.props.dataType} isLoading={this.state.isLoadingUmap} gene={this.props.gene.symbol} enrollmentCategory={this.props.enrollmentCategory} />
                                 </Col>
                             </Row>
                         </Col>
@@ -130,7 +130,7 @@ class RNASeqViz extends Component {
                             {(!this.state.isLoading && this.state.geneExpressionData.length > 0) && <hr />}
                         </Col>
                     </Row>
-                    <ExpressionXCellType dataType={this.props.dataType} data={this.state.geneExpressionData} isLoading={this.state.isLoading} gene={this.props.gene.symbol} tissueType={this.props.tissueType} />
+                    <ExpressionXCellType dataType={this.props.dataType} data={this.state.geneExpressionData} isLoading={this.state.isLoading} gene={this.props.gene.symbol} enrollmentCategory={this.props.enrollmentCategory} />
                 </Container>
             </Container>
             </div>

src/components/DataViz/RNASeqVizContainer.js

@@ -1,6 +1,6 @@
 import { connect } from "react-redux";
 import RNASeqViz from "./RNASeqViz";
-import { setTissueType } from '../../actions/TissueType/tissueTypeActions'
+import { setEnrollmentCategory } from '../../actions/EnrollmentCategory/enrollmentCategoryActions'
 import { setDataType } from "../../actions/DataType/dataTypeActions";
 import { resetState } from "../../actions/resetAction";
 
@@ -9,16 +9,16 @@ const mapStateToProps = (state, props) =>
     conceptSummary: state.conceptSummary,
     gene: state.gene,
     dataType: state.dataType,
-    tissueType: state.tissueType
+    enrollmentCategory: state.enrollmentCategory
 });
 
 const mapDispatchToProps = (dispatch, props) =>
 ({
     setDataType(dataType) {
         dispatch(setDataType(dataType));
     },
-    setTissueType(tissueType) {
-        dispatch(setTissueType(tissueType));
+    setEnrollmentCategory(enrollmentCategory) {
+        dispatch(setEnrollmentCategory(enrollmentCategory));
     },
     resetState() {
         dispatch(resetState());