Skip to content

Commit ceecd0f

Browse files
carlosribascarlosribas
committed
� Conflicts: � dist/RNAcentral-sequence-search.js � dist/RNAcentral-sequence-search.js.map
2 parents e9d0a14 + effe1ad commit ceecd0f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+16150
-1983
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -118,21 +118,21 @@ Parameters that you can use to customise some elements of this embeddable compon
118118

119119
parameter | description |
120120
----------------------------|-----------------------------------------------------------------------------------|
121+
fixCss | fix the CSS. Use *"fixCss": "true"* if the button sizes are different |
122+
linkColor | change the color of the links |
121123
h3Color | change the color of the `Similar sequences` and `Rfam classification` text |
122124
h3Size | change the size of the `Similar sequences` and `Rfam classification` text |
123125
exactMatchBackgroundColor | change the background color of the "Exact match" area |
124-
jobIdBackgroundColor | change the background color of the "Job id" area |
125126
similarSeqText | change the `Similar sequences` text |
126127
facetColor | change the color of the facet title |
127128
facetSize | change the size of the facet title |
128-
seqTitleColor | used in results, it changes the color of the title |
129129
seqTitleSize | used in results, it changes the size of the title |
130130
seqInfoColor | used in results, it changes the color of the text `number of nucleotides` |
131131
seqInfoSize | used in results, it changes the size of the text `number of nucleotides` |
132132
searchButtonColor | change the color of the `Search` button |
133133
clearButtonColor | change the color of the `Clear` button |
134134
uploadButtonColor | change the color of the `Upload file` button |
135-
hideUploadButton | hide the `Upload file` button. Use "hideUploadButton": "true" to hide the button |
135+
hideUploadButton | hide the `Upload file` button. Use *"hideUploadButton": "true"* to hide the button|
136136
loadMoreButtonColor | change the color of the `Load more` button |
137137

138138
## Developer details

‎dist/RNAcentral-sequence-search.js

+12-13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/RNAcentral-sequence-search.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

+5,462-1,678
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6-9
Original file line numberDiff line numberDiff line change
@@ -44,24 +44,22 @@
4444
},
4545
"homepage": "https://github.com/RNAcentral/rnacentral-sequence-search-embed#readme",
4646
"dependencies": {
47-
"animate.css": "^3.5.2",
4847
"dotenv": "^8.2.0",
49-
"foundation-sites": "^6.5.0-rc.4",
5048
"jquery": "^3.3.1",
5149
"md5": "^2.2.1",
52-
"react": "^16.1.1",
50+
"react": "^16.13.1",
5351
"react-csv": "^1.1.2",
54-
"react-dom": "^16.1.1",
52+
"react-dom": "^16.13.1",
5553
"react-helmet": "^5.2.0",
56-
"react-redux": "^5.0.7",
54+
"react-icons": "^3.9.0",
55+
"react-redux": "^5.1.2",
5756
"react-router": "^4.2.0",
5857
"react-router-dom": "^4.2.2",
5958
"react-shadow-dom-retarget-events": "^1.0.10",
6059
"redux": "^4.0.1",
6160
"redux-thunk": "^2.3.0"
6261
},
6362
"devDependencies": {
64-
"EBI-Icon-fonts": "^1.3.1",
6563
"babel-core": "^6.25.0",
6664
"babel-jest": "^25.0.0",
6765
"babel-loader": "^7.1.1",
@@ -72,9 +70,8 @@
7270
"babel-preset-react": "^6.24.1",
7371
"css-loader": "^3.2.0",
7472
"css-to-string-loader": "^0.1.3",
75-
"ebi-framework": "^1.3.16",
7673
"extract-text-webpack-plugin": "^4.0.0-beta.0",
77-
"file-loader": "^0.11.2",
74+
"file-loader": "^6.0.0",
7875
"html-webpack-plugin": "^3.2.0",
7976
"jest": "^25.0.0",
8077
"navigator": "~1.0.1",
@@ -83,7 +80,7 @@
8380
"redux-devtools-extension": "^2.13.8",
8481
"sass-loader": "^6.0.6",
8582
"style-loader": "^0.23.1",
86-
"url-loader": "^2.2.0",
83+
"url-loader": "^2.3.0",
8784
"webpack": "^4.41.5",
8885
"webpack-cli": "^3.3.10",
8986
"webpack-dev-server": "^3.10.2"

‎src/actions/actionTypes.js

+2
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@ export const SORT_RESULTS = 'SORT_RESULTS';
1313

1414
export const FETCH_STATUS = 'FETCH_STATUS';
1515
export const SET_STATUS_TIMEOUT = 'SET_STATUS_TIMEOUT';
16+
export const SEARCH_PROGRESS = 'SEARCH_PROGRESS';
1617

1718

1819
// submission form
1920
export const SUBMIT_JOB = 'SUBMIT_JOB';
2021
export const SUBMIT_MULTIPLE_JOB = 'SUBMIT_MULTIPLE_JOB';
22+
export const SUBMIT_URS = 'SUBMIT_URS';
2123
export const INVALID_SEQUENCE = 'INVALID_SEQUENCE';
2224
export const UPDATE_JOB_ID = 'UPDATE_JOB_ID';
2325
export const CLEAR_JOB_ID = 'CLEAR_JOB_ID';

‎src/actions/actions.js

+42
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,28 @@ export function onMultipleSubmit(sequence, databases) {
105105
}
106106
}
107107

108+
export function onSubmitUrs(urs, database) {
109+
return function(dispatch) {
110+
fetch(routes.rnacentralUrs(urs))
111+
.then(function(response) {
112+
if (response.ok) {
113+
return response.json()
114+
} else {
115+
throw response;
116+
}
117+
})
118+
.then(data => {
119+
if(data.sequence.length < 10 || data.sequence.length > 7000) {
120+
dispatch({type: types.SUBMIT_URS, status: 'invalid', data: data.sequence});
121+
dispatch(invalidSequence())
122+
} else {
123+
dispatch(onSubmit(data.sequence, database))
124+
}
125+
})
126+
.catch(error => {dispatch({type: types.SUBMIT_URS, status: 'error', response: error})});
127+
}
128+
}
129+
108130
export function updateJobId(jobId) {
109131
return function(dispatch) {
110132
dispatch({type: types.UPDATE_JOB_ID, data: jobId});
@@ -145,6 +167,26 @@ export function fetchStatus(jobId) {
145167
})
146168
.then((data) => {
147169
if (data.status === 'started' || data.status === 'pending' || data.status === 'running') {
170+
// Given jobChunks from jobStatus route, estimates the search progress.
171+
let finishedChunk = 0;
172+
data.chunks.map(item => {
173+
if (item.status === 'success' || item.status === 'timeout' || item.status === 'error'){
174+
finishedChunk = finishedChunk + 1
175+
}
176+
});
177+
178+
// Update the search progress
179+
let state = store.getState();
180+
let newSearchInProgress = [...state.searchInProgress];
181+
let foundJobId = newSearchInProgress.find(el => el.jobId === data.job_id);
182+
if (foundJobId){
183+
foundJobId['finishedChunk'] = finishedChunk * 100 / data.chunks.length;
184+
} else {
185+
newSearchInProgress.push({jobId: data.job_id, finishedChunk: finishedChunk * 100 / data.chunks.length});
186+
}
187+
dispatch({type: types.SEARCH_PROGRESS, data: newSearchInProgress });
188+
189+
// Wait a little bit and check it again
148190
let statusTimeout = setTimeout(() => store.dispatch(fetchStatus(jobId)), 2000);
149191
dispatch({type: types.SET_STATUS_TIMEOUT, timeout: statusTimeout});
150192
} else if (data.status === 'success' || data.status === 'partial_success') {

‎src/app.jsx

+3-11
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,8 @@ import {Provider} from 'react-redux';
66
import SequenceSearch from 'containers/SequenceSearch/index.jsx';
77
import configureStore from 'store/configureStore.js';
88

9-
import ebiGlobal from 'ebi-framework/css/ebi-global.css';
10-
import themeLight from 'ebi-framework/css/theme-light.css';
11-
import fonts from 'EBI-Icon-fonts/fonts.css';
12-
import animate from 'animate.css/animate.min.css';
13-
import sequenceSearchStyles from 'containers/SequenceSearch/index.scss';
14-
import resultsStyles from 'containers/SequenceSearch/components/Results/index.scss';
9+
import bootstrap from 'styles/bootstrap.css';
10+
import sequenceSearchStyles from 'styles/sequence-search.scss';
1511

1612
// Prepare data
1713
export const store = configureStore();
@@ -35,12 +31,8 @@ class RNAcentralSequenceSearch extends HTMLElement {
3531

3632
// render React
3733
ReactDOM.render([
38-
<style key={ebiGlobal} dangerouslySetInnerHTML={{__html: ebiGlobal}}/>,
39-
<style key={themeLight} dangerouslySetInnerHTML={{__html: themeLight}}/>,
40-
<style key={fonts} dangerouslySetInnerHTML={{__html: fonts}}/>,
41-
<style key={animate} dangerouslySetInnerHTML={{__html: animate}}/>,
34+
<style key={bootstrap} dangerouslySetInnerHTML={{__html: bootstrap}}/>,
4235
<style key={sequenceSearchStyles} dangerouslySetInnerHTML={{__html: sequenceSearchStyles}}/>,
43-
<style key={resultsStyles} dangerouslySetInnerHTML={{__html: resultsStyles}}/>,
4436
<body key='body'>
4537
<Provider key='provider' store={store}>
4638
<SequenceSearch

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

+56-14
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ import React from 'react';
22
import {connect} from "react-redux";
33

44
import * as actionCreators from 'actions/actions';
5+
import {store} from "app.jsx";
6+
7+
import { AiOutlineReload } from 'react-icons/ai';
58

69

710
class Facets extends React.Component {
@@ -11,51 +14,90 @@ class Facets extends React.Component {
1114
this.renderFacet = this.renderFacet.bind(this);
1215
}
1316

17+
onReload() {
18+
const state = store.getState();
19+
if (state.sequence) {
20+
store.dispatch(actionCreators.onClearResult());
21+
store.dispatch(actionCreators.onSubmit(state.sequence, this.props.databases));
22+
}
23+
}
24+
25+
renameFacet(facet){
26+
if (facet==='QC warning found') {
27+
return 'QC warnings'
28+
} else if (facet==='Has GO annotation') {
29+
return 'GO annotations'
30+
} else if (facet==='Has Conserved structure') {
31+
return 'Conserved motifs'
32+
} else {
33+
return facet
34+
}
35+
}
36+
37+
renameFacetValue(facet, facetValue){
38+
const linkColor = this.props.customStyle && this.props.customStyle.linkColor ? this.props.customStyle.linkColor : "#337ab7";
39+
if (facet==='qc_warning_found'){
40+
if (facetValue.label==='False') {facetValue.label = 'No warnings'}
41+
else if (facetValue.label==='True') {facetValue.label = 'Warnings found'}
42+
}
43+
if (facet==='has_go_annotations') {
44+
if (facetValue.label==='True') { facetValue.label = 'Found'; }
45+
else if (facetValue.label==='False') { facetValue.label = 'Not found'; }
46+
}
47+
if (facet==='has_conserved_structure') {
48+
if (facetValue.label === 'True') { facetValue.label = 'Found'; }
49+
else if (facetValue.label === 'False') { facetValue.label = 'Not found'; }
50+
}
51+
return <a className="custom-link" style={{color: linkColor}}>{facetValue.label}&nbsp;<small>({facetValue.count})</small></a>
52+
}
53+
1454
renderFacet(facet) {
1555
let facetStyle = {
1656
color: this.props.customStyle && this.props.customStyle.facetColor ? this.props.customStyle.facetColor : "#007c82",
17-
fontSize: this.props.customStyle && this.props.customStyle.facetSize ? this.props.customStyle.facetSize : "",
57+
fontSize: this.props.customStyle && this.props.customStyle.facetSize ? this.props.customStyle.facetSize : "20px",
1858
};
1959
return [
20-
<legend key={`legend-${facet.id}`}><h5 style={facetStyle}>{ facet.label }</h5></legend>,
21-
<ul key={facet.id} className="vertical menu facet">
60+
<legend key={`legend-${facet.id}`}><span style={facetStyle}>{ this.renameFacet(facet.label) }</span></legend>,
61+
<ul key={facet.id} className="list-unstyled facet">
2262
{
2363
facet.facetValues.map(facetValue => (
24-
<li key={`li ${facetValue.label}`}>
25-
<span className="facetValue">
26-
<input id={`checkbox-${facet.id}-${facetValue.value}`} type="checkbox"
64+
<li className="facetValue" key={`li ${facetValue.label}`}>
65+
<div className="form-check">
66+
<input className="form-check-input" id={`checkbox-${facet.id}-${facetValue.value}`} type="checkbox"
2767
defaultChecked={this.props.selectedFacets.hasOwnProperty(facet.id) && this.props.selectedFacets[facet.id].indexOf(facetValue.value) !== -1}
2868
onClick={(e) => {
2969
this.props.onToggleFacet(e, facet, facetValue)
3070
}}/>
31-
<label htmlFor={`checkbox-${facet.id}-${facetValue.value}`}>{facetValue.label}&nbsp;<small>({facetValue.count})</small></label>
32-
</span>
71+
<label className="form-check-label mt-1" htmlFor={`checkbox-${facet.id}-${facetValue.value}`}>
72+
{ this.renameFacetValue(facet.id, facetValue) }
73+
</label>
74+
</div>
3375
</li>
3476
))
3577
}
36-
<br/>
3778
</ul>
3879
];
3980
}
4081

4182
render() {
4283
let showFacet = this.props.hideFacet ? this.props.facets.filter(facet => !this.props.hideFacet.includes(facet.id)) : this.props.facets;
84+
const linkColor = this.props.customStyle && this.props.customStyle.linkColor ? this.props.customStyle.linkColor : "#337ab7";
4385

4486
return (
45-
<div>
87+
<div className="row">
4688
<section>
4789
<div>
4890
{ showFacet.map(facet => this.renderFacet(facet)) }
4991
</div>
5092
{
5193
this.props.textSearchError &&
52-
<div className="callout alert">
53-
<h3>Failed to retrieve text search data.</h3>
54-
<a onClick={ this.props.onReload }>&lsaquo; Reload</a>
94+
<div className="alert alert-danger">
95+
<p>Failed to retrieve text search data.</p>
96+
<p><a className="custom-link" onClick={ () => this.onReload() }><AiOutlineReload style={{verticalAlign: '-1px'}} /> Reload</a></p>
5597
</div>
5698
}
5799
<small>
58-
Powered by <a href="http://www.ebi.ac.uk/ebisearch/" target="_blank">EBI Search</a>.
100+
Powered by <a className="custom-link" style={{color: linkColor}} href="http://www.ebi.ac.uk/ebisearch/" target="_blank">EBI Search</a>.
59101
</small>
60102
</section>
61103
</div>

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

+15-15
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@ class Filter extends Component {
2222
}
2323

2424
render() {
25+
const fixCss = this.props.customStyle && this.props.customStyle.fixCss && this.props.customStyle.fixCss === "true" ? "1.5rem" : "";
26+
2527
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>
28+
<div className="row" key={`filter-div`}>
29+
<div className="col-sm-4">
30+
<form onSubmit={(e) => this.onFilterSubmit(e)} onReset={(e) => this.onFilterReset(e)}>
31+
<div className="input-group">
32+
<input className="form-control" style={{fontSize: fixCss}} type="text" value={this.props.filter} onChange={(e) => this.props.onFilterChange(e)} placeholder="Text search within results"/>
33+
<button type="submit" className={`btn btn-outline-secondary ${!this.props.filter && "disabled"}`} style={{fontSize: fixCss}}>Filter</button>
34+
<button type="reset" className={`btn btn-outline-secondary ${!this.props.filter && "disabled"}`} style={{fontSize: fixCss}}>Clear</button>
3535
</div>
3636
</form>
3737
</div>
38-
<div className="small-12 medium-4 columns">
39-
<select value={this.props.sortingOrder} onChange={this.props.onSort}>
38+
<div className="col-sm-4">
39+
<select className="form-select" style={{fontSize: fixCss}} value={this.props.sortingOrder} onChange={this.props.onSort}>
4040
<option value="e_value">Sort by E-value (min to max) - default</option>
4141
<option value="-e_value">Sort by E-value (max to min)</option>
4242
<option value="identity">Sort by Identity (max to min)</option>
@@ -47,10 +47,10 @@ class Filter extends Component {
4747
<option value="-target_coverage">Sort by Target coverage: (min to max)</option>
4848
</select>
4949
</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>
50+
<div className="col-sm-4">
51+
<div className="input-group">
52+
<button className="btn btn-outline-secondary" style={{fontSize: fixCss}} onClick={this.props.onToggleAlignmentsCollapsed}>{this.props.alignmentsCollapsed ? 'Show alignments' : 'Hide alignments'}</button>
53+
<button className="btn btn-outline-secondary" style={{fontSize: fixCss}} onClick={this.props.onToggleDetailsCollapsed}>{this.props.detailsCollapsed ? 'Show details' : 'Hide details'}</button>
5454
</div>
5555
</div>
5656
</div>

0 commit comments

Comments
 (0)