Merge pull request #405 from KPMP/develop

More fixes to styling and to links to repository
KPMP · Jul 3, 2023 · f03616b · f03616b
2 parents 92a8581 + a690455
commit f03616b
Show file tree

Hide file tree

Showing 14 changed files with 43 additions and 30 deletions.
diff --git a/public/ie.html b/public/ie.html
@@ -68,7 +68,7 @@
 </div>
 <article class="container" id="not-found-page">
     <div id="not-found-container" class="me-6 py-5 row">
-        <div class="col-12 col-md-4 text-right">
+        <div class="col-12 col-md-4 text-end">
             <img class="not-found-image" src="img/IE-unsupported.png" alt="IE Not supported" id="oops-image">
         </div>
         <div class="not-found-text col-12 col-md-8">

diff --git a/src/components/DataViz/DataTypeSelector.js b/src/components/DataViz/DataTypeSelector.js
@@ -173,9 +173,9 @@ class DataTypeSelector extends Component {
 
     getRepositoryLink = () => {
         const linkMapping = {
-            'sn': '/repository/?facetTab=files&files_size=60&files_sort=%5B%7B%22field%22%3A%22file_name%22%2C%22order%22%3A%22asc%22%7D%5D&filters=%7B%22op%22%3A%22and%22%2C%22content%22%3A%5B%7B%22op%22%3A%22in%22%2C%22content%22%3A%7B%22field%22%3A%22dois%22%2C%22value%22%3A%5B%2210.48698%2Fyyvc-ak78%22%5D%7D%7D%5D%7D',
-            'sc': '/repository/?facetTab=files&files_size=60&files_sort=%5B%7B%22field%22%3A%22file_name%22%2C%22order%22%3A%22asc%22%7D%5D&filters=%7B%22op%22%3A%22and%22%2C%22content%22%3A%5B%7B%22op%22%3A%22in%22%2C%22content%22%3A%7B%22field%22%3A%22dois%22%2C%22value%22%3A%5B%2210.48698%2F92nk-e805%22%5D%7D%7D%5D%7D',
-            'rt': '/repository/?facetTab=files&files_size=60&files_sort=%5B%7B%22field%22%3A%22file_name%22%2C%22order%22%3A%22asc%22%7D%5D&filters=%7B%22op%22%3A%22and%22%2C%22content%22%3A%5B%7B%22op%22%3A%22in%22%2C%22content%22%3A%7B%22field%22%3A%22dois%22%2C%22value%22%3A%5B%2210.48698%2Ft9fh-qn48%22%5D%7D%7D%5D%7D',
+            'sn': '/repository/?size=n_1000_n&filters%5B0%5D%5Bfield%5D=dois&filters%5B0%5D%5Bvalues%5D%5B0%5D=10.48698%2Fyyvc-ak78&filters%5B0%5D%5Btype%5D=any',
+            'sc': '/repository/?size=n_1000_n&filters%5B0%5D%5Bfield%5D=dois&filters%5B0%5D%5Bvalues%5D%5B0%5D=10.48698%2F92nk-e805&filters%5B0%5D%5Btype%5D=any',
+            'rt': '/repository/?size=n_1000_n&filters%5B0%5D%5Bfield%5D=dois&filters%5B0%5D%5Bvalues%5D%5B0%5D=10.48698%2Ft9fh-qn48&filters%5B0%5D%5Btype%5D=any',
             'default': '/repository',
         }
         if (linkMapping[this.props.dataType]) {

diff --git a/src/components/DataViz/RegionalViz.js b/src/components/DataViz/RegionalViz.js
@@ -121,7 +121,7 @@ class RegionalViz extends Component {
                             </Col>
                         </Row>
                         <Row xs='12'>
-                            <Col lg='12' className='text-left lmd-plot-toggle'>
+                            <Col lg='12' className='text-start lmd-plot-toggle'>
                                 <span className='d-table-cell pe-4 pb-2 text-nowrap'>Display by:</span>
                                 <span className='d-table-cell'>
                                     <ButtonGroup>
@@ -147,7 +147,7 @@ class RegionalViz extends Component {
                                 <h5>{this.props.gene.symbol} expression comparison across regions in {formatTissueType(this.props.tissueType)}</h5>
                                 <h6>NS = Not Significant</h6>
                             </Col>
-                            <Col xs='1' className='text-right'>
+                            <Col xs='1' className='text-end'>
                                 <CSVLink
                                     onClick={() => handleGoogleAnalyticsEvent('Explorer', 'Download', this.getExportFilename())}
                                     data={cleanDownloadData}

diff --git a/src/components/Explorer/AccordionTabSection.js b/src/components/Explorer/AccordionTabSection.js
@@ -66,7 +66,7 @@ class AccordionTabSection extends Component {
                         onClick={() => this.props.handleCellTypeClick(cellType.cellType)}
                         onMouseEnter={() => { this.handleSchematicHoverEnter(cellType.cellType) }}
                         type="button"
-                        className={`btn btn-link text-left p-0 ${(this.props.activeCell === cellType.cellType) ? 'pseudohover' : ''}`}>
+                        className={`btn btn-link text-start p-0`}>
                         {cellType.cellType}</button>
                 </li>
             });
@@ -81,7 +81,7 @@ class AccordionTabSection extends Component {
                         <span onClick={() => this.props.handleCellTypeClick(subregion.subregionName)}
                              onMouseEnter={() => { this.handleSchematicHoverEnter(subregion.subregionName) }}
                              type='button'
-                             className={`btn-link text-left p-0 ${(this.props.activeCell === subregion.subregionName) ? 'pseudohover' : ''}`}>
+                             className={`btn-link text-start p-0 ${(this.props.activeCell === subregion.subregionName) ? 'pseudohover' : ''}`}>
                                  {subregion.subregionName}</span>
                     </span>
                     <Collapse isOpen={collapse === index}>
@@ -105,7 +105,7 @@ class AccordionTabSection extends Component {
                                 onClick={() => this.props.handleCellTypeClick(this.props.topLevelLink)}
                                 onMouseEnter={() => { this.handleSchematicHoverEnter(this.props.topLevelLink);  }}
                                 type="button"
-                                className={`btn btn-link text-left p-0 ${(this.props.activeCell === this.props.topLevelLink) ? 'pseudohover' : ''}`}>
+                                className={`btn btn-link text-start p-0 ${(this.props.activeCell === this.props.topLevelLink) ? 'pseudohover' : ''}`}>
                                     {this.props.topLevelLink}
                                 </button>
                             {cellTypes}

diff --git a/src/components/Explorer/TabSection.js b/src/components/Explorer/TabSection.js
@@ -21,7 +21,7 @@ class TabSection extends Component {
                         onClick={() => this.props.handleCellTypeClick(cellType.cellType)}
                         onMouseEnter={() => { this.handleSchematicHoverEnter(cellType.cellType); this.setState({ activeCell: cellType.cellType }) }}
                         type="button"
-                        className={`btn btn-link text-left p-0 ${(this.props.activeCell === cellType.cellType) ? 'pseudohover' : ''}`} >
+                        className={`btn btn-link text-start p-0`} >
                         {cellType.cellType}
                     </button>
                 </li>
@@ -33,7 +33,7 @@ class TabSection extends Component {
                         onClick={() => this.props.handleCellTypeClick(subregion.subregionName)}
                         onMouseEnter={() => { this.handleSchematicHoverEnter(subregion.subregionName); this.setState({ activeCell: subregion.subregionName }) }}
                         type="button"
-                        className={`btn btn-link text-left p-0 ${(this.props.activeCell === subregion.subregionName) ? 'pseudohover' : ''}`} >
+                        className={`btn btn-link text-start p-0 ${(this.props.activeCell === subregion.subregionName) ? 'pseudohover' : ''}`} >
                             {subregion.subregionName}   
                     </button></li>
                     <ul className='cell-type-list'>
@@ -69,7 +69,7 @@ class TabSection extends Component {
                                 onClick={() => this.props.handleCellTypeClick(this.props.topLevelLink)}
                                 onMouseEnter={() => { this.handleSchematicHoverEnter(this.props.topLevelLink); this.setState({ activeCell: this.props.topLevelLink }) }}
                                 type="button"
-                                className={`btn btn-link text-left p-0 ${(this.props.activeCell === this.props.topLevelLink) ? 'pseudohover' : ''}`}>
+                                className={`btn btn-link text-start p-0 ${(this.props.activeCell === this.props.topLevelLink) ? 'pseudohover' : ''}`}>
                                     {this.props.topLevelLink}
                                 </button>
                             {cellTypes}

diff --git a/src/components/ExpressionTables/DiffexByCluster.js b/src/components/ExpressionTables/DiffexByCluster.js
@@ -55,7 +55,7 @@ class DiffexByCluster extends Component {
     }
 
     getGeneLink = (gene) => {
-        return <button onClick={() => this.handleClick(gene)} type='button' className='table-column btn btn-link text-left p-0'>{gene}</button>
+        return <button onClick={() => this.handleClick(gene)} type='button' className='table-column btn btn-link text-start p-0'>{gene}</button>
     };
 
     getColumns = () => [
@@ -157,7 +157,7 @@ class DiffexByCluster extends Component {
                             :
                             <React.Fragment>
                                 <Row xs='12'>
-                                    <Col xs='12' className='text-right'>
+                                    <Col xs='12' className='text-end'>
                                         <CSVLink
                                             onClick={() => handleGoogleAnalyticsEvent('Explorer', 'Download', this.getExportFilename())}
                                             data={this.cleanResults(this.state.diffexData)}

diff --git a/src/components/ExpressionTables/DiffexInfoBar.js b/src/components/ExpressionTables/DiffexInfoBar.js
@@ -65,7 +65,7 @@ class DiffexInfoBar extends Component {
                     </Col>
                 </Row>
                     <Row xs='12' className='ps-2 pt-2'>
-                        <Col lg='12' className='text-left small'>
+                        <Col lg='12' className='text-start small'>
                             * Gene in selected cell type/region vs. all other cell types/regions
                         </Col>
                     </Row>

diff --git a/src/components/ExpressionTables/ExpressionXCellType.js b/src/components/ExpressionTables/ExpressionXCellType.js
@@ -161,7 +161,7 @@ class ExpressionXCellType extends Component {
                             <h5><span>{this.props.gene}</span> Expression Comparison across Clusters in {formatTissueType(this.props.tissueType)}</h5>
                             <h6>NS = Not Significant</h6>
                         </Col>
-                        <Col xs='1' className='text-right'>
+                        <Col xs='1' className='text-end'>
                             <CSVLink
                                 onClick={() => handleGoogleAnalyticsEvent('Explorer', 'Download', this.getExportFilename())}
                                 data={this.cleanResults(this.props.data)}

diff --git a/src/components/Home/AvailableDatasetsTable.js b/src/components/Home/AvailableDatasetsTable.js
@@ -192,7 +192,7 @@ class AvailableDatasetsTable extends Component {
                         />
                     </Col>
                 </Row>
-                <Row className="float-right">
+                <Row className="float-end">
                     <h2 className="sub-header mt-4 total-file-fix">TOTAL FILES: {this.state.totalFiles}</h2>
                 </Row>
             </article>

diff --git a/src/components/Plots/LMDDotPlot.js b/src/components/Plots/LMDDotPlot.js
@@ -151,7 +151,7 @@ class LMDDotPlot extends Component {
                             useResizeHandler={true}
                         />
                     </Col>
-                    <Col xs={2} id='lmdLegendPlot' className='mt-4 ps-0 text-left'>
+                    <Col xs={2} id='lmdLegendPlot' className='mt-4 ps-0 text-start'>
                         <Plot divId="lmdLegendPlotCanvas" data={this.state.legendPlotData}
                             layout={{
                                 autosize: true,

diff --git a/src/components/Summary/CellTypeSummary.js b/src/components/Summary/CellTypeSummary.js
@@ -136,7 +136,7 @@ class CellTypeSummary extends Component {
 
     linkDataTypeCells(row, dataType) {
         if (row[dataType] === 'Y') {
-            return <button onClick={() => this.handleLinkClick(dataType, row)} type='button' className='btn btn-link text-left p-0 cell-summary-table-button'>View</button>
+            return <button onClick={() => this.handleLinkClick(dataType, row)} type='button' className='btn btn-link text-start p-0 cell-summary-table-button'>View</button>
         }
         return '';
     }

diff --git a/src/components/Summary/GeneSummary.js b/src/components/Summary/GeneSummary.js
@@ -90,7 +90,7 @@ class GeneSummary extends Component {
                 Header: "OMICS TYPE",
                 id: "omicsType",
                 accessor: 'omicsType',
-                headerClassName: 'table-header',
+                headerClassName: 'gene-summary-header',
                 className: 'table-column',
                 minWidth: 200,
             },
@@ -99,7 +99,7 @@ class GeneSummary extends Component {
                 id: "dataType",
                 accessor: 'dataType',
                 minWidth: 300,
-                headerClassName: 'table-header',
+                headerClassName: 'gene-summary-header',
                 className: 'table-column data-type',
                 Cell: ({ row }) => (
                     this.linkDataTypeCells(row)
@@ -110,7 +110,7 @@ class GeneSummary extends Component {
                 id: "hrt",
                 minWidth: 160,
                 accessor: 'hrtCount',
-                headerClassName: 'table-header text-center',
+                headerClassName: 'text-center gene-summary-header',
                 className: 'table-column',
                 Cell: ({ row }) => (
                     <div className={"text-center"}>{row.hrt}</div>
@@ -120,7 +120,7 @@ class GeneSummary extends Component {
                 Header: "AKI TISSUE",
                 id: "aki",
                 accessor: 'akiCount',
-                headerClassName: 'table-header text-center',
+                headerClassName: 'text-center gene-summary-header',
                 className: 'table-column',
                 Cell: ({ row }) => (
                     <div className={"text-center"}>{row.aki}</div>
@@ -130,17 +130,17 @@ class GeneSummary extends Component {
                 Header: "CKD TISSUE",
                 id: "ckd",
                 accessor: 'ckdCount',
-                headerClassName: 'table-header text-center',
+                headerClassName: 'text-center gene-summary-header',
                 className: 'table-column',
                 Cell: ({ row }) => (
                     <div className={"text-center"}>{row.ckd}</div>
                 )
             },
             {
-                Header: "DM-R",
+                Header: "DM-R TISSUE",
                 id: "dmr",
                 accessor: 'dmrCount',
-                headerClassName: 'table-header text-center',
+                headerClassName: 'text-center gene-summary-header',
                 className: 'table-column',
                 Cell: ({ row }) => (
                     <div className={"text-center"}>{row.dmr}</div>
@@ -171,7 +171,7 @@ class GeneSummary extends Component {
         if (this.dataTypeHasData(row) && this.dataTypeIsClickable(row._original.dataTypeShort)) {
             return <button onClick={() => this.handleLinkClick(row._original.dataTypeShort)}
                 type="button"
-                className="btn btn-link text-left p-0 table-column">
+                className="btn btn-link text-start p-0 table-column">
                 {row.dataType}
             </button>
         }
@@ -198,7 +198,7 @@ class GeneSummary extends Component {
                         </div>
                         : <div>
                             <Row xs='12' className="gene-summary-header-container">
-                                <Col xs={{ size: 5, offset: 7 }} className='d-flex justify-content-center gene-summary-header'><span>PARTICIPANTS PER DATA TYPE</span></Col>
+                                <Col xs={{ size: 5, offset: 7 }} className='d-flex justify-content-center gene-summary-header color-light-blue'><span>PARTICIPANTS PER DATA TYPE</span></Col>
                             </Row>
                             <Row xs='12'>
                                 <Col>

diff --git a/src/index.scss b/src/index.scss
@@ -153,6 +153,7 @@ tr.MuiTableRow-root:nth-child(even) {
   }
   .btn.btn-link:hover {
     background-color: #cee5ff;
+    text-decoration: underline;
   }
 
 }
@@ -252,7 +253,11 @@ tr.MuiTableRow-root:nth-child(even) {
   margin-right: 0px;
 }
 
-.cluster_v_others_container, .gene-summary-header {
+.color-light-blue {
+  background-color: #cee5ff;
+}
+
+.cluster_v_others_container {
   padding: 5px;
   background-color: #cee5ff;
 }
@@ -435,7 +440,7 @@ tr.MuiTableRow-root:nth-child(even) {
 .buttonhref {
   cursor: pointer;
   color: #007bff ;
-  text-decoration: none;
+  text-decoration: none !important;
   background-color: transparent;
 }
 

diff --git a/src/info-schematics.scss b/src/info-schematics.scss
@@ -12,6 +12,14 @@
   cursor: pointer;
 }
 
+.btn-link {
+    text-decoration: none;
+}
+
+.btn-link:hover {
+    text-decoration: underline;
+}
+
 .pseudohover {
   color: #0056b3;
   text-decoration: underline;