Skip to content

Commit 9be3958

Browse files
caduribascaduribas
committed
Show the filter button if the filter returns empty
1 parent e9310d6 commit 9be3958

File tree

1 file changed

+36
-32
lines changed
  • src/containers/SequenceSearch/components/Results

1 file changed

+36
-32
lines changed

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

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,40 @@ class Results extends React.Component {
4242
}
4343
}
4444

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+
4579
render() {
4680
let h3Style = {
4781
color: this.props.customStyle && this.props.customStyle.h3Color ? this.props.customStyle.h3Color : "#666",
@@ -162,37 +196,7 @@ class Results extends React.Component {
162196
<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>
163197
{
164198
this.props.entries && this.props.entries.length ? <div>
165-
<div className="row">
166-
<div className="small-12 medium-4 columns">
167-
<form className="input-group" onSubmit={(e) => this.onFilterSubmit(e)}>
168-
<input className="input-group-field" type="text" value={this.props.filter} onChange={(e) => this.props.onFilterChange(e)} placeholder="Search within results"/>
169-
<div className="input-group-button">
170-
<button className={`hollow button secondary ${!this.props.filter && "disabled"}`} type="submit">Filter</button>
171-
</div>
172-
<div className="input-group-button">
173-
<button className={`hollow button secondary ${!this.props.filter && "disabled"}`} onClick={this.props.onClearFilter}>Clear</button>
174-
</div>
175-
</form>
176-
</div>
177-
<div className="small-12 medium-4 columns">
178-
<select value={this.props.sortingOrder} onChange={this.props.onSort}>
179-
<option value="e_value">Sort by E-value (min to max) - default</option>
180-
<option value="-e_value">Sort by E-value (max to min)</option>
181-
<option value="identity">Sort by Identity (max to min)</option>
182-
<option value="-identity">Sort by Identity: (min to max)</option>
183-
<option value="query_coverage">Sort by Query coverage: (max to min)</option>
184-
<option value="-query_coverage">Sort by Query coverage: (min to max)</option>
185-
<option value="target_coverage">Sort by Target coverage: (max to min)</option>
186-
<option value="-target_coverage">Sort by Target coverage: (min to max)</option>
187-
</select>
188-
</div>
189-
<div className="small-12 medium-4 columns">
190-
<div className="button-group">
191-
<button className="hollow button secondary" onClick={this.props.onToggleAlignmentsCollapsed}>{this.props.alignmentsCollapsed ? 'Show alignments' : 'Hide alignments'}</button>
192-
<button className="hollow button secondary" onClick={this.props.onToggleDetailsCollapsed}>{this.props.detailsCollapsed ? 'Show details' : 'Hide details'}</button>
193-
</div>
194-
</div>
195-
</div>
199+
{this.showFilter()}
196200
<div className="small-3 columns">
197201
<Facets
198202
facets={ this.props.facets }
@@ -214,7 +218,7 @@ class Results extends React.Component {
214218
</div>
215219
</section>
216220
</div>
217-
</div> : this.props.status === "loading" ? <i className="animated infinite flash">...</i> : 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>
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>
218222
}
219223
</div>
220224
</div>

0 commit comments

Comments
 (0)