Skip to content

Commit 15c6dd2

Browse files
caduribascaduribas
committed
Create filter component, fix the bug related to the Clear button
1 parent 4769183 commit 15c6dd2

File tree

5 files changed

+88
-61
lines changed

5 files changed

+88
-61
lines changed

‎src/actions/actionTypes.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export const CLEAR_JOB_ID = 'CLEAR_JOB_ID';
2323
export const CLEAR_RESULT = 'CLEAR_RESULT';
2424
export const TEXTAREA_CHANGE = 'TEXTAREA_CHANGE';
2525
export const FILTER_CHANGE = 'FILTER_CHANGE';
26-
export const CLEAR_FILTER = 'CLEAR_FILTER';
2726
export const EXAMPLE_SEQUENCE = 'EXAMPLE_SEQUENCE';
2827
export const CLEAR_SEQUENCE = 'CLEAR_SEQUENCE';
2928
export const FILE_UPLOAD = 'FILE_UPLOAD';

‎src/actions/actions.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ export function failedFetchResults(response) {
254254

255255
export function onFilterResult() {
256256
let state = store.getState();
257-
let selectedFacets = {...state.selectedFacets};
257+
let selectedFacets = state.filter ? {...state.selectedFacets} : {};
258258

259259
return function(dispatch) {
260260
fetch(routes.facetsSearch(state.jobId, buildQuery(selectedFacets), 0, state.size, state.ordering), {
@@ -278,13 +278,6 @@ export function onFilterResult() {
278278
}
279279
}
280280

281-
export function onClearFilter() {
282-
return function(dispatch) {
283-
dispatch({type: types.CLEAR_FILTER});
284-
dispatch(onFilterResult());
285-
}
286-
}
287-
288281
export function onToggleFacet(event, facet, facetValue) {
289282
return function (dispatch) {
290283
let state = store.getState();

‎src/containers/SequenceSearch/components/Results/components/Filter.jsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, {Component} from 'react';
2+
import {store} from "app.jsx";
3+
import * as actionCreators from 'actions/actions';
4+
import {connect} from "react-redux";
5+
6+
class Filter extends Component {
7+
onFilterSubmit(event) {
8+
event.preventDefault();
9+
const state = store.getState();
10+
if (state.filter) {
11+
store.dispatch(actionCreators.onFilterResult());
12+
}
13+
}
14+
15+
onFilterReset(event) {
16+
event.preventDefault();
17+
const state = store.getState();
18+
if (state.sequence) {
19+
store.dispatch(actionCreators.onClearResult());
20+
store.dispatch(actionCreators.onSubmit(state.sequence, this.props.databases));
21+
}
22+
}
23+
24+
render() {
25+
return (
26+
<div className="row">
27+
<div className="small-12 medium-4 columns">
28+
<form className="input-group" onSubmit={(e) => this.onFilterSubmit(e)} onReset={(e) => this.onFilterReset(e)}>
29+
<input className="input-group-field" type="text" value={this.props.filter} onChange={(e) => this.props.onFilterChange(e)} placeholder="Search within results"/>
30+
<div className="input-group-button">
31+
<button className={`hollow button secondary ${!this.props.filter && "disabled"}`} type="submit" name="submit">Filter</button>
32+
</div>
33+
<div className="input-group-button">
34+
<button className={`hollow button secondary ${!this.props.filter && "disabled"}`} type="reset" name="reset">Clear</button>
35+
</div>
36+
</form>
37+
</div>
38+
<div className="small-12 medium-4 columns">
39+
<select value={this.props.sortingOrder} onChange={this.props.onSort}>
40+
<option value="e_value">Sort by E-value (min to max) - default</option>
41+
<option value="-e_value">Sort by E-value (max to min)</option>
42+
<option value="identity">Sort by Identity (max to min)</option>
43+
<option value="-identity">Sort by Identity: (min to max)</option>
44+
<option value="query_coverage">Sort by Query coverage: (max to min)</option>
45+
<option value="-query_coverage">Sort by Query coverage: (min to max)</option>
46+
<option value="target_coverage">Sort by Target coverage: (max to min)</option>
47+
<option value="-target_coverage">Sort by Target coverage: (min to max)</option>
48+
</select>
49+
</div>
50+
<div className="small-12 medium-4 columns">
51+
<div className="button-group">
52+
<button className="hollow button secondary" onClick={this.props.onToggleAlignmentsCollapsed}>{this.props.alignmentsCollapsed ? 'Show alignments' : 'Hide alignments'}</button>
53+
<button className="hollow button secondary" onClick={this.props.onToggleDetailsCollapsed}>{this.props.detailsCollapsed ? 'Show details' : 'Hide details'}</button>
54+
</div>
55+
</div>
56+
</div>
57+
);
58+
}
59+
}
60+
61+
function mapStateToProps(state) {
62+
return {
63+
alignmentsCollapsed: state.alignmentsCollapsed,
64+
detailsCollapsed: state.detailsCollapsed,
65+
filter: state.filter
66+
};
67+
}
68+
69+
function mapDispatchToProps(dispatch) {
70+
return {
71+
onToggleAlignmentsCollapsed: () => dispatch({ type: 'TOGGLE_ALIGNMENTS_COLLAPSED' }),
72+
onToggleDetailsCollapsed: () => dispatch({ type: 'TOGGLE_DETAILS_COLLAPSED' }),
73+
onSort: (event) => dispatch(actionCreators.onSort(event)),
74+
onFilterChange: (event) => dispatch(actionCreators.onFilterChange(event)),
75+
}
76+
}
77+
78+
export default connect(
79+
mapStateToProps,
80+
mapDispatchToProps
81+
)(Filter);

‎src/containers/SequenceSearch/components/Results/index.jsx‎

Lines changed: 5 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { CSVLink } from "react-csv";
44

55
import Facets from 'containers/SequenceSearch/components/Results/components/Facets.jsx';
66
import Hit from 'containers/SequenceSearch/components/Results/components/Hit.jsx';
7+
import Filter from 'containers/SequenceSearch/components/Results/components/Filter.jsx';
78

89
import 'containers/SequenceSearch/components/Results/index.scss';
910
import * as actionCreators from 'actions/actions';
@@ -34,48 +35,6 @@ class Results extends React.Component {
3435
}
3536
}
3637

37-
onFilterSubmit(event) {
38-
event.preventDefault();
39-
const state = store.getState();
40-
if (state.filter) {
41-
store.dispatch(actionCreators.onFilterResult());
42-
}
43-
}
44-
45-
showFilter(){
46-
return <div className="row">
47-
<div className="small-12 medium-4 columns">
48-
<form className="input-group" onSubmit={(e) => this.onFilterSubmit(e)}>
49-
<input className="input-group-field" type="text" value={this.props.filter} onChange={(e) => this.props.onFilterChange(e)} placeholder="Search within results"/>
50-
<div className="input-group-button">
51-
<button className={`hollow button secondary ${!this.props.filter && "disabled"}`} type="submit">Filter</button>
52-
</div>
53-
<div className="input-group-button">
54-
<button className={`hollow button secondary ${!this.props.filter && "disabled"}`} onClick={this.props.onClearFilter}>Clear</button>
55-
</div>
56-
</form>
57-
</div>
58-
<div className="small-12 medium-4 columns">
59-
<select value={this.props.sortingOrder} onChange={this.props.onSort}>
60-
<option value="e_value">Sort by E-value (min to max) - default</option>
61-
<option value="-e_value">Sort by E-value (max to min)</option>
62-
<option value="identity">Sort by Identity (max to min)</option>
63-
<option value="-identity">Sort by Identity: (min to max)</option>
64-
<option value="query_coverage">Sort by Query coverage: (max to min)</option>
65-
<option value="-query_coverage">Sort by Query coverage: (min to max)</option>
66-
<option value="target_coverage">Sort by Target coverage: (max to min)</option>
67-
<option value="-target_coverage">Sort by Target coverage: (min to max)</option>
68-
</select>
69-
</div>
70-
<div className="small-12 medium-4 columns">
71-
<div className="button-group">
72-
<button className="hollow button secondary" onClick={this.props.onToggleAlignmentsCollapsed}>{this.props.alignmentsCollapsed ? 'Show alignments' : 'Hide alignments'}</button>
73-
<button className="hollow button secondary" onClick={this.props.onToggleDetailsCollapsed}>{this.props.detailsCollapsed ? 'Show details' : 'Hide details'}</button>
74-
</div>
75-
</div>
76-
</div>
77-
}
78-
7938
render() {
8039
let h3Style = {
8140
color: this.props.customStyle && this.props.customStyle.h3Color ? this.props.customStyle.h3Color : "#666",
@@ -194,9 +153,11 @@ class Results extends React.Component {
194153
<div className="row" key={`results-div`}>
195154
<div className="small-12 columns">
196155
<h3 style={h3Style}>Similar sequences: { this.props.status === "loading" ? <i className="animated infinite flash">...</i> : <small>{ this.props.hitCount }</small> } { this.props.hits > 1000 ? <small>of { this.props.hits } <a href="https://rnacentral.org/help/sequence-search" style={{borderBottomStyle: "none"}} target="_blank"><i className="icon icon-generic icon-help" style={{fontSize: "70%"}}></i></a></small> : "" }</h3>
156+
{
157+
this.props.entries && this.props.entries.length || this.props.filter ? <Filter databases={this.props.databases}/> : ""
158+
}
197159
{
198160
this.props.entries && this.props.entries.length ? <div>
199-
{this.showFilter()}
200161
<div className="small-3 columns">
201162
<Facets
202163
facets={ this.props.facets }
@@ -218,7 +179,7 @@ class Results extends React.Component {
218179
</div>
219180
</section>
220181
</div>
221-
</div> : this.props.status === "loading" ? <i className="animated infinite flash">...</i> : this.props.filter ? this.showFilter() : this.props.rnacentral ? <div>No results at <img src={'https://rnacentral.org/static/img/logo/rnacentral-logo.png'} alt="RNAcentral logo" style={{width: "2%", verticalAlign: "sub"}}/> RNAcentral.</div> : <div>The query sequence did not match any {this.props.databases} sequences. You can <a href="#" onClick={this.submitToRnacentral}>try to search against RNAcentral</a>.</div>
182+
</div> : this.props.status === "loading" ? <i className="animated infinite flash">...</i> : this.props.filter ? <div>No results. Try a different search or press the Clear button to view all results.</div> : this.props.rnacentral ? <div>No results at <img src={'https://rnacentral.org/static/img/logo/rnacentral-logo.png'} alt="RNAcentral logo" style={{width: "2%", verticalAlign: "sub"}}/> RNAcentral.</div> : <div>The query sequence did not match any {this.props.databases} sequences. You can <a href="#" onClick={this.submitToRnacentral}>try to search against RNAcentral</a>.</div>
222183
}
223184
</div>
224185
</div>
@@ -254,12 +215,7 @@ function mapStateToProps(state) {
254215

255216
function mapDispatchToProps(dispatch) {
256217
return {
257-
onToggleAlignmentsCollapsed: () => dispatch({ type: 'TOGGLE_ALIGNMENTS_COLLAPSED' }),
258-
onToggleDetailsCollapsed: () => dispatch({ type: 'TOGGLE_DETAILS_COLLAPSED' }),
259218
onLoadMore: (event) => dispatch(actionCreators.onLoadMore(event)),
260-
onSort: (event) => dispatch(actionCreators.onSort(event)),
261-
onFilterChange: (event) => dispatch(actionCreators.onFilterChange(event)),
262-
onClearFilter: () => dispatch(actionCreators.onClearFilter())
263219
}
264220
}
265221

‎src/reducers/rootReducer.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,7 @@ const rootReducer = function (state = initialState, action) {
178178
infernalStatus: "loading",
179179
infernalEntries: [],
180180
exactMatch: null,
181+
filter: "",
181182
});
182183

183184
case actions.INVALID_SEQUENCE:
@@ -203,9 +204,6 @@ const rootReducer = function (state = initialState, action) {
203204
case actions.FILTER_CHANGE:
204205
return Object.assign({}, state, {filter: action.data});
205206

206-
case actions.CLEAR_FILTER:
207-
return Object.assign({}, state, {filter: ""});
208-
209207
case actions.TEXTAREA_CHANGE:
210208
return Object.assign({}, state, {
211209
jobId: null,

0 commit comments

Comments
 (0)