Merge pull request #424 from KPMP/master

Merging to master for point release

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "@apollo/client": "3.3.7",
     "@babel/polyfill": "7.12.1",
+    "@babel/runtime-corejs3": "7.22.6",
     "@fontsource/libre-franklin": "4.5.0",
     "@fortawesome/fontawesome-free": "6.0.0",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
@@ -21,11 +22,12 @@
     "bootstrap-5-css-only": "5.1.3",
     "buffer": "6.0.3",
     "colormap": "2.3.2",
+    "core-js": "3.32.0",
     "graphql": "15.4.0",
     "history": "5.0.0",
     "html-react-parser": "1.4.0",
     "isomorphic-unfetch": "3.1.0",
-    "kpmp-common-components": "1.2.2",
+    "kpmp-common-components": "1.2.3",
     "kpmp-common-styles": "1.0.13",
     "material-table": "1.69.3",
     "npm-run-all": "4.1.5",

src/actions/DataType/dataTypeActions.js

@@ -1,5 +1,4 @@
 import actionNames from '../actionNames';
-import { resetState } from '../resetAction';
 
 export const setDataType = (dataType) => {
     let shortDataType = "";

src/components/DataViz/DataTypeSelector.js

@@ -261,11 +261,11 @@ class DataTypeSelector extends Component {
                                     : <span className="a-button" onClick={this.toggleDataset}>Hide dataset details <FontAwesomeIcon icon={faChevronUp} /></span>
                                 }    
                                 {(this.props.dataType === 'sc' ) &&
-                                    <span> | <a class='btn btn-primary float-end' rel='noreferrer'target='_blank' href='https://cellxgene.cziscience.com/e/32b9bdce-2481-4c85-ba1b-6ad5fcea844c.cxg/'>Disease-specific DiffEx in cellxgene</a> </span>
+                                    <span><a class='btn btn-primary float-end btn-sm' rel='noreferrer'target='_blank' href='https://cellxgene.cziscience.com/e/32b9bdce-2481-4c85-ba1b-6ad5fcea844c.cxg/'>Disease-specific DiffEx in cellxgene</a> </span>
                                 }
                                 {
                                     (this.props.dataType === 'sn') &&
-                                    <span> | <a class='btn btn-primary float-end' rel='noreferrer' target='_blank' href='https://cellxgene.cziscience.com/e/07854d9c-5375-4a9b-ac34-fa919d3c3686.cxg/'>Disease-specific DiffEx in cellxgene</a> </span>
+                                    <span><a class='btn btn-primary float-end btn-sm' rel='noreferrer' target='_blank' href='https://cellxgene.cziscience.com/e/07854d9c-5375-4a9b-ac34-fa919d3c3686.cxg/'>Disease-specific DiffEx in cellxgene</a> </span>
                                 }
                             </div>
                             }

src/components/DataViz/RNASeqViz.js

@@ -12,21 +12,24 @@ class RNASeqViz extends Component {
     constructor(props) {
         super(props);
         this.state = { prevPath: '', plotData: [], geneExpressionData: [], isLoading: true, isLoadingUmap: true };
-        
+
         const queryParam = queryString.parse(props.location.search);
         if (queryParam && queryParam.dataType) {
             props.resetState();
             props.setDataType(queryParam.dataType);
             props.history.push(props.location.pathname);
+            this.setState({isLoading: false, isLoadingUmap: false})
         }
+
     };
 
     cleanResults = (results) => {
         return results.filter((result) => result.clusterName !== "TOTAL CELLS: ");
     };
 
     async componentDidMount() {
-        if (this.props.gene.symbol) {
+        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')

src/components/Error/NotFoundPage.js

@@ -27,7 +27,7 @@ class NotFoundPage extends Component {
     render() {
         document.title = getPageTitle(window.location.pathname)
         return (
-            <article className="container" id='not-found-page'>
+            <article className="container height-wrapper" id='not-found-page'>
                 <Row id="not-found-container" className='me-5 p-5'>
                     <Col xs={12} md={4}>
                         <img className='not-found-image' src="/img/404-img.svg" alt="Page not found" id="oops-image"/>

src/components/Error/Oops.js

@@ -4,7 +4,7 @@ import { Col, Row, Button } from 'reactstrap';
 class Oops extends Component {
   render() {
     return (
-      <article className="container-fluid">
+      <article className="container-fluid height-wrapper">
         <Row id="oops-content">
           <Col xs={0} md={2}>
             &nbsp;

src/components/ExpressionTables/ExpressionXCellType.js

@@ -26,7 +26,7 @@ class ExpressionXCellType extends Component {
                     clusterAbbrev: cluster,
                     clusterName: clusterName,
                     cellCount: cellCount ? cellCount : 0,
-                    medianExp: formatNumberToPrecision(avgExp, 3),
+                    meanExp: formatNumberToPrecision(avgExp, 3),
                     pctCellsExpressing: formatNumberToPrecision(pct1Value, 3),
                     foldChange: formatNumberToPrecision(foldChange, 3),
                     pVal: formatNumberToPrecision(pVal, 3),

src/index.scss

@@ -891,7 +891,7 @@ tr.MuiTableRow-root:nth-child(even) {
 }
 
 .height-wrapper {
-  min-height: calc(100vh - 16px
+  min-height: calc(100vh + 16px
     - #{$header-height-padded}
     - #{$footer-height-padded});
 }