Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Filter component to handle invalid range filter #162

Merged
merged 6 commits into from
Oct 16, 2017
Merged

Fix Filter component to handle invalid range filter #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
48b3e34
Fix Filter component to handle invalid range filter
Oct 10, 2017
86eca93
remove report filter
Oct 16, 2017
92632c2
add ability to manually enter range values
Oct 16, 2017
775180b
hide slider bubble and style manual input
Oct 16, 2017
53f53b4
update report filter to use float number to capture all values
Oct 16, 2017
854df87
merge changes with view levels update
Oct 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
220 changes: 137 additions & 83 deletions app/assets/javascripts/components/ReportFilter.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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() {
Expand All @@ -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) {
Expand All @@ -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 (
Expand All @@ -141,7 +175,7 @@ class ReportFilter extends React.Component {
<div className="sidebar-pane">
<div className="report-data">
<div className="report-title">
Background Model
Background Model
</div>
<div className="report-value">
{ this.background_model }
Expand Down Expand Up @@ -197,31 +231,46 @@ class ReportFilter extends React.Component {
</div>

<div className="filter-values">
<div className="">
<div className="slider-title">
NT { this.state.view_level } Z Score
</div>
<div className="slider-values">
<div className="nt_zscore start">{ this.state.nt_zscore_start }</div>
<div className="nt_zscore end">{ this.state.nt_zscore_end }</div>
{ (this.highest_nt_zscore && (this.lowest_nt_zscore !== this.highest_nt_zscore)) ? (
<div className="">
<div className="slider-title">
NT { this.state.view_level } Z Score
</div>
<div className="slider-values">
<div suppressContentEditableWarning={true} contentEditable={true} className="nt_zscore start">
{ this.state.nt_zscore_start }
</div>
<div suppressContentEditableWarning={true} contentEditable={true} className="nt_zscore end">
{ this.state.nt_zscore_end }
</div>
</div>
<div id="nt_zscore"></div>
</div>
<div id="nt_zscore"></div>
</div>
) : ''}

<div className="">
<div className="slider-title">
NT { this.state.view_level } RPM
{ (this.highest_nt_rpm && (this.lowest_nt_rpm !== this.highest_nt_rpm)) ? (
<div className="">
<div className="slider-title">
NT { this.state.view_level } RPM
</div>
<div className="slider-values">
<div onBlur={ this.updateThreshold } suppressContentEditableWarning={true} contentEditable={true} className="nt_rpm start">
{ this.state.nt_rpm_start }
</div>
<div onBlur={ this.updateThreshold } suppressContentEditableWarning={true} contentEditable={true} className="nt_rpm end">
{ this.state.nt_rpm_end }
</div>
</div>
<div id="nt_rpm"></div>
</div>
<div className="slider-values">
<div className="nt_rpm start">{ this.state.nt_rpm_start }</div>
<div className="nt_rpm end">{ this.state.nt_rpm_end }</div>
</div>
<div id="nt_rpm"></div>
</div>
) : ''}
{ (!this.has_valid_nt_rpm_range && !this.has_valid_nt_zscore_range) ?
<div className="center"><small>Cannot set thresholds</small></div> : '' }
</div>
</div>
<div className="apply-filter-button center-align">
<a onClick={this.applyFilter} className="btn btn-flat waves-effect grey text-grey text-lighten-5 waves-light apply-filter-button">
<a onClick={this.applyFilter}
className="btn btn-flat waves-effect grey text-grey text-lighten-5 waves-light apply-filter-button">
Apply filter
</a>
</div>
Expand All @@ -231,6 +280,11 @@ class ReportFilter extends React.Component {

</div>
</div>
)
);
}
}

ReportFilter.propTypes = {
background_model: React.PropTypes.string,
highest_tax_counts: React.PropTypes.object,
};
8 changes: 5 additions & 3 deletions app/assets/stylesheets/reports.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

}

.active {
a.active {
color: #5ABCD6 !important;
}

Expand Down Expand Up @@ -92,8 +92,7 @@
background: #979797;
}

.noUi-tooltip span {
overflow: hidden;
.noUi-tooltip {
display: none;
}

Expand Down Expand Up @@ -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;
Expand Down