diff --git a/app/assets/javascripts/components/ReportFilter.jsx b/app/assets/javascripts/components/ReportFilter.jsx index 91710a5499..767af21f64 100644 --- a/app/assets/javascripts/components/ReportFilter.jsx +++ b/app/assets/javascripts/components/ReportFilter.jsx @@ -1,11 +1,28 @@ +/** + @class ReportFilter + @desc Creates react component to handle filtering in the page + */ class ReportFilter extends React.Component { constructor(props) { super(props); const view_level = props.view_level || 'Genus'; this.background_model = props.background_model || 'N/A'; - this.report_title = props.report_title || 'Not Set'; - const default_nt_zscore_threshold = `0,${this.props.highest_tax_counts.highest_nt_zscore}`; - const default_nt_rpm_threshold = `0,${this.props.highest_tax_counts.highest_nt_rpm}`; + + this.highest_nt_zscore = this.props.highest_tax_counts.highest_nt_zscore; + this.highest_nt_rpm = this.props.highest_tax_counts.highest_nt_rpm; + + this.lowest_nt_zscore = this.props.highest_tax_counts.lowest_nt_zscore; + this.lowest_nt_rpm = this.props.highest_tax_counts.lowest_nt_rpm; + + this.has_valid_nt_zscore_range = + (this.highest_nt_zscore && (this.lowest_nt_zscore < this.highest_nt_zscore)); + + this.has_valid_nt_rpm_range = + (this.highest_nt_rpm && (this.lowest_nt_rpm < this.highest_nt_rpm)); + + + const default_nt_zscore_threshold = `${this.lowest_nt_zscore},${this.highest_nt_zscore}`; + const default_nt_rpm_threshold = `${this.lowest_nt_rpm},${this.highest_nt_rpm}`; const nt_zscore_threshold = ReportFilter.getFilter('nt_zscore_threshold') ? ReportFilter.getFilter('nt_zscore_threshold') : default_nt_zscore_threshold; @@ -14,22 +31,24 @@ class ReportFilter extends React.Component { ? ReportFilter.getFilter('nt_rpm_threshold') : default_nt_rpm_threshold; const nt_zscore_start = - (nt_zscore_threshold.split(',').length > 0) ? parseInt(nt_zscore_threshold.split(',')[0], 10) : 0; + (nt_zscore_threshold.split(',').length > 0) ? nt_zscore_threshold.split(',')[0] : + this.lowest_nt_zscore; const nt_zscore_end = - (nt_zscore_threshold.split(',').length > 1) ? parseInt(nt_zscore_threshold.split(',')[1], 10) : - this.props.highest_tax_counts.highest_nt_zscore; + (nt_zscore_threshold.split(',').length > 1) ? nt_zscore_threshold.split(',')[1] : + this.highest_nt_zscore; const nt_rpm_start = - (nt_rpm_threshold.split(',').length > 0) ? parseInt(nt_rpm_threshold.split(',')[0], 10) : 0; + (nt_rpm_threshold.split(',').length > 0) ? nt_rpm_threshold.split(',')[0]: + this.lowest_nt_rpm; const nt_rpm_end = - (nt_rpm_threshold.split(',').length > 1) ? parseInt(nt_rpm_threshold.split(',')[1], 10) : - this.props.highest_tax_counts.highest_nt_rpm; - + (nt_rpm_threshold.split(',').length > 1) ? nt_rpm_threshold.split(',')[1] : + this.highest_nt_rpm; this.state = { nt_zscore_start, nt_zscore_end, nt_rpm_start, nt_rpm_end, view_level }; this.applyFilter = this.applyFilter.bind(this); this.selectViewLevel = this.selectViewLevel.bind(this); + this.updateThreshold = this.updateThreshold.bind(this); } applyFilter() { @@ -38,7 +57,7 @@ class ReportFilter extends React.Component { const sort_by = currentSort.sort_query ? `&${currentSort.sort_query}` : ''; window.location = `${current_url}?nt_zscore_threshold=${this.state.nt_zscore_start},${this.state.nt_zscore_end}&nt_rpm_threshold=${ - this.state.nt_rpm_start},${this.state.nt_rpm_end}&view_level=${this.state.view_level}${sort_by}`; + this.state.nt_rpm_start},${this.state.nt_rpm_end}&view_level=${this.state.view_level}${sort_by}`; } static getFilter(name) { @@ -61,60 +80,75 @@ class ReportFilter extends React.Component { }); } - componentDidMount() { - const nt_zscore = document.getElementById('nt_zscore'); - const nt_rpm = document.getElementById('nt_rpm'); - - noUiSlider.create(nt_zscore, { - start: [this.state.nt_zscore_start, this.state.nt_zscore_end], - connect: true, - step: 1, - orientation: 'horizontal', // 'horizontal' or 'vertical', - behaviour: 'tap-drag', - range: { - 'min': 0, - 'max': this.props.highest_tax_counts.highest_nt_zscore - }, - format: wNumb({ - decimals: 0 - }) - }); - noUiSlider.create(nt_rpm, { - start: [this.state.nt_rpm_start, this.state.nt_rpm_end], - connect: true, - step: 1, - orientation: 'horizontal', // 'horizontal' or 'vertical' - range: { - 'min': 0, - 'max': this.props.highest_tax_counts.highest_nt_rpm - }, - format: wNumb({ - decimals: 0 - }) - }); - nt_zscore.noUiSlider.on('update', (values, handle) => { - if (handle === 0) { - this.setState({ - nt_zscore_start: Math.round(values[handle]) - }); - } else { - this.setState({ - nt_zscore_end: Math.round(values[handle]) - }); + + updateThreshold(e) { + const { innerText, className } = e.target; + if (className.indexOf('nt_zscore') >= 0) { + const ntZscore = document.getElementById('nt_zscore'); + if (ntZscore) { + (className.indexOf('start') >= 0) + ? ntZscore.noUiSlider.set([innerText, null]) : ntZscore.noUiSlider.set([null, innerText]); } - }); - nt_rpm.noUiSlider.on('update', (values, handle) => { - if (handle === 0) { - this.setState({ - nt_rpm_start: Math.round(values[handle]) - }); - } else { - this.setState({ - nt_rpm_end: Math.round(values[handle]) - }); + } else if (className.indexOf('nt_rpm') >= 0) { + const ntRpm = document.getElementById('nt_rpm'); + if (ntRpm) { + (className.indexOf('start') >= 0) + ? ntRpm.noUiSlider.set([innerText, null]) : ntRpm.noUiSlider.set([null, innerText]); } - }); + } + } + parseRange(value) { + value = +Number(value).toFixed(3); + return value; + } + + componentDidMount() { + if (this.has_valid_nt_zscore_range) { + const nt_zscore = document.getElementById('nt_zscore'); + noUiSlider.create(nt_zscore, { + start: [this.parseRange(this.state.nt_zscore_start), this.parseRange(this.state.nt_zscore_end)], + connect: true, + step: 0.1, + orientation: 'horizontal', // 'horizontal' or 'vertical', + behaviour: 'tap-drag', + range: { + min: this.parseRange(this.lowest_nt_zscore), + max: this.parseRange(this.highest_nt_zscore) + }, + format: wNumb({ + decimals: 0 + }) + }); + + nt_zscore.noUiSlider.on('update', (values, handle) => { + const value = this.parseRange(values[handle]); + const newState = (handle === 0) ? { nt_zscore_start: value } : { nt_zscore_end: value }; + this.setState(newState); + }); + } + + if (this.has_valid_nt_rpm_range) { + const nt_rpm = document.getElementById('nt_rpm'); + noUiSlider.create(nt_rpm, { + start: [this.parseRange(this.state.nt_rpm_start), this.parseRange(this.state.nt_rpm_end)], + connect: true, + step: 0.1, + orientation: 'horizontal', // 'horizontal' or 'vertical' + range: { + min: this.parseRange(this.lowest_nt_rpm), + max: this.parseRange(this.highest_nt_rpm) + }, + format: wNumb({ + decimals: 0 + }) + }); + nt_rpm.noUiSlider.on('update', (values, handle) => { + const value = this.parseRange(values[handle]); + const newState = (handle === 0) ? { nt_rpm_start: value } : { nt_rpm_end: value }; + this.setState(newState); + }); + } } render() { return ( @@ -141,7 +175,7 @@ class ReportFilter extends React.Component {
- Background Model + Background Model
{ this.background_model } @@ -197,31 +231,46 @@ class ReportFilter extends React.Component {
-
-
- NT { this.state.view_level } Z Score -
-
-
{ this.state.nt_zscore_start }
-
{ this.state.nt_zscore_end }
+ { (this.highest_nt_zscore && (this.lowest_nt_zscore !== this.highest_nt_zscore)) ? ( +
+
+ NT { this.state.view_level } Z Score +
+
+
+ { this.state.nt_zscore_start } +
+
+ { this.state.nt_zscore_end } +
+
+
-
-
+ ) : ''} -
-
- NT { this.state.view_level } RPM + { (this.highest_nt_rpm && (this.lowest_nt_rpm !== this.highest_nt_rpm)) ? ( +
+
+ NT { this.state.view_level } RPM +
+
+
+ { this.state.nt_rpm_start } +
+
+ { this.state.nt_rpm_end } +
+
+
-
-
{ this.state.nt_rpm_start }
-
{ this.state.nt_rpm_end }
-
-
-
+ ) : ''} + { (!this.has_valid_nt_rpm_range && !this.has_valid_nt_zscore_range) ? +
Cannot set thresholds
: '' }
- + Apply filter
@@ -231,6 +280,11 @@ class ReportFilter extends React.Component {
- ) + ); } } + +ReportFilter.propTypes = { + background_model: React.PropTypes.string, + highest_tax_counts: React.PropTypes.object, +}; diff --git a/app/assets/stylesheets/reports.scss b/app/assets/stylesheets/reports.scss index fbc2fbb567..19b5dd902a 100644 --- a/app/assets/stylesheets/reports.scss +++ b/app/assets/stylesheets/reports.scss @@ -39,7 +39,7 @@ } - .active { + a.active { color: #5ABCD6 !important; } @@ -92,8 +92,7 @@ background: #979797; } - .noUi-tooltip span { - overflow: hidden; + .noUi-tooltip { display: none; } @@ -135,6 +134,9 @@ margin-bottom: 15px; color: #9B9B9B; font-size: 12px; + border: 1px solid rgb(200, 200,200); + padding: 0 5px; + background: white; } .slider-values .end { float: right;