Skip to content

Commit 3eb8c9a

Browse files
carlosribascarlosribas
committed
2 parents d42d991 + 8c47381 commit 3eb8c9a

File tree

15 files changed

+314
-90
lines changed

15 files changed

+314
-90
lines changed

‎README.md

+59-37
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,42 @@
11
# RNAcentral sequence search embed
22

3-
This is an embeddable component that you can include into
4-
your website to add a non-coding RNA sequence search.
3+
This is an embeddable component that you can include into your website to add a non-coding RNA sequence search.
54

6-
The component sends search requests to EBI-backed API, run on
7-
EBI cloud infrastructure.
5+
The component sends search requests to EBI-backed API, run on EBI cloud infrastructure.
86

9-
It searches against RNAcentral databases (or their arbitrary subset)
10-
with NHMMER and also adds text search functionality, backed by EBI
11-
Lucene text search plugin.
7+
It searches against RNAcentral databases (or their arbitrary subset) with NHMMER, CMSCAN and also adds text search
8+
functionality, backed by EBI Lucene text search plugin.
129

13-
This plugin is written in React/Redux and makes use of Zurb
14-
Foundation-based EBI theme. It is bundled as a Web Component, so it
15-
should not clash with your website's javascript or CSS.
10+
This plugin is written in React/Redux and makes use of Zurb Foundation-based EBI theme. It is bundled as a Web
11+
Component, so it should not clash with your website's javascript or CSS.
1612

1713
## Installation
1814

19-
Install this package with npm or download it directly from Github.
20-
21-
`npm install @rnacentral/rnacentral-sequence-search-embed`
22-
23-
or
15+
Download this package directly from Github.
2416

2517
`git clone https://github.com/RNAcentral/rnacentral-sequence-search-embed.git`
2618

27-
28-
Now you can add the component's javascript bundle (it contains all the styles and fonts)
29-
to your web page either directly or through an import with Webpack:
19+
Now you can add the component's javascript bundle (it contains all the styles and fonts) to your web page either
20+
directly or through an import with Webpack:
3021

3122
`<script type="text/javascript" src="/rnacentral-sequence-search-embed/dist/RNAcentral-sequence-search.js"></script>`
3223

3324
To use it just insert an html tag somewhere in your html:
3425

3526
```
36-
<rnacentral-sequence-search databases='["mirbase"]' />
27+
<rnacentral-sequence-search databases='["miRBase"]' />
28+
```
29+
30+
To show some examples and/or enable the Rfam search, use:
31+
32+
```
33+
<rnacentral-sequence-search
34+
databases='["miRBase"]'
35+
examples='[
36+
{"description": "miRNA hsa-let-7a-1", "urs": "URS000004F5D8", "sequence": "CUAUACAAUCUACUGUCUUUC"},
37+
]
38+
rfam="true"
39+
/>
3740
```
3841

3942
For a minimal example, see [index.html](./index.html).
@@ -48,24 +51,43 @@ and their values are strings (this is a requirement of Web Components):
4851

4952
Array of databases to search query sequence against. Currently you can choose from:
5053

51-
database |
52-
-------------|
53-
ena |
54-
greengenes |
55-
lncrnadb |
56-
mirbase |
57-
pdbe |
58-
pombase |
59-
rdp |
60-
refseq |
61-
rfam |
62-
rgd |
63-
sgd |
64-
snopy |
65-
srpdb |
66-
tair |
67-
tmrna-website|
68-
wormbase |
54+
database |
55+
------------------|
56+
dictybase |
57+
ena |
58+
ensembl |
59+
ensembl_fungi |
60+
ensembl_metazoa |
61+
ensembl_plants |
62+
ensembl_protists |
63+
flybase |
64+
gencode |
65+
greengenes |
66+
gtrnadb |
67+
hgnc |
68+
lncbase |
69+
lncbook |
70+
lncipedia |
71+
lncrnadb |
72+
mgi |
73+
mirbase |
74+
modomics |
75+
noncode |
76+
pdbe |
77+
pombase |
78+
rdp |
79+
refseq |
80+
rfam |
81+
rgd |
82+
sgd |
83+
silva |
84+
snopy |
85+
srpdb |
86+
tair |
87+
tarbase |
88+
tmrna_web |
89+
wormbase |
90+
zwd |
6991

7092
## Developer details
7193

‎index.html

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>RNAcentral sequence search example</title>
4+
<title>Sequence search</title>
55
</head>
66
<body>
7-
<p>
8-
The widget below searches miRBase, RefSeq, and PDBe data only.
9-
</p>
10-
<rnacentral-sequence-search databases='["pdbe", "mirbase", "refseq"]'/>
11-
<script type="text/javascript" src="/rnacentral-sequence-search-embed/dist/RNAcentral-sequence-search.js"></script></body>
7+
<rnacentral-sequence-search
8+
databases='["miRBase"]'
9+
examples='[
10+
{"description": "miRNA hsa-let-7a-1", "urs": "URS000004F5D8", "sequence": "CUAUACAAUCUACUGUCUUUC"},
11+
{"description": "miRNA mmu-let-7g", "urs": "", "sequence": "UGAGGUAGUAGUUUGUACAGU"}
12+
]'
13+
rfam="true"
14+
/>
15+
<script type="text/javascript" src="/rnacentral-sequence-search-embed/dist/RNAcentral-sequence-search.js"></script>
16+
</body>
1217
</html>

‎package.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "rnacentral-sequence-search-embed",
2+
"name": "@rnacentral/rnacentral-sequence-search-embed",
33
"version": "1.0.0",
44
"description": "Embeddable react component for RNA sequence search.",
55
"scripts": {
@@ -32,6 +32,10 @@
3232
{
3333
"name": "Anton I. Petrov",
3434
"email": "[email protected]"
35+
},
36+
{
37+
"name": "Carlos E. Ribas",
38+
"email": "[email protected]"
3539
}
3640
],
3741
"license": "Apache-2.0",

‎src/actions/actionTypes.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// results
22
export const FETCH_RESULTS = 'FETCH_RESULTS';
3+
export const FETCH_INFERNAL_RESULTS = 'FETCH_INFERNAL_RESULTS';
34
export const FAILED_FETCH_RESULTS = 'FAILED_FETCH_RESULTS';
45

56
export const TOGGLE_ALIGNMENTS_COLLAPSED = 'TOGGLE_ALIGNMENTS_COLLAPSED';

‎src/actions/actions.js

+62-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ export function onSubmit(sequence, databases) {
5252
})
5353
.then(data => {
5454
dispatch({type: types.SUBMIT_JOB, status: 'success', data: data});
55-
dispatch(fetchStatus(data.job_id))
55+
dispatch(fetchStatus(data.job_id));
56+
dispatch(fetchInfernalStatus(data.job_id));
5657
})
5758
.catch(error => dispatch({type: types.SUBMIT_JOB, status: 'error', response: error}));
5859
}
@@ -93,6 +94,41 @@ export function fetchStatus(jobId) {
9394
}
9495
}
9596

97+
export function fetchInfernalStatus(jobId) {
98+
return function(dispatch) {
99+
fetch(routes.infernalJobStatus(jobId), {
100+
method: 'GET',
101+
mode: 'cors',
102+
credentials: 'include',
103+
headers: {
104+
'Accept': 'application/json, text/plain, */*',
105+
'Content-Type': 'application/json'
106+
}
107+
})
108+
.then(function(response) {
109+
if (response.ok) {
110+
return response.json()
111+
} else {
112+
throw response;
113+
}
114+
})
115+
.then((data) => {
116+
if (data.status === 'started' || data.status === 'pending') {
117+
let statusTimeout = setTimeout(() => store.dispatch(fetchInfernalStatus(jobId)), 2000);
118+
dispatch({type: types.SET_STATUS_TIMEOUT, timeout: statusTimeout});
119+
} else if (data.status === 'success') {
120+
dispatch(fetchInfernalResults(jobId));
121+
}
122+
})
123+
.catch(error => {
124+
if (store.getState().hasOwnProperty('statusTimeout')) {
125+
clearTimeout(store.getState().statusTimeout); // clear status timeout
126+
}
127+
dispatch({type: types.FETCH_STATUS, infernal_status: 'error'})
128+
});
129+
}
130+
}
131+
96132
export function fetchResults(jobId) {
97133
let state = store.getState();
98134

@@ -120,6 +156,31 @@ export function fetchResults(jobId) {
120156
}
121157
}
122158

159+
export function fetchInfernalResults(jobId) {
160+
return function(dispatch) {
161+
fetch(routes.infernalJobResult(jobId), {
162+
method: 'GET',
163+
mode: 'cors',
164+
credentials: 'include',
165+
headers: {
166+
'Accept': 'application/json, text/plain, */*',
167+
'Content-Type': 'application/json'
168+
}
169+
})
170+
.then(function(response) {
171+
if (response.ok) {
172+
return response.json()
173+
} else {
174+
throw response;
175+
}
176+
})
177+
.then(data => dispatch({type: types.FETCH_INFERNAL_RESULTS, infernal_status: 'success', data: data}))
178+
.catch(error => {
179+
dispatch({type: types.FETCH_INFERNAL_RESULTS, infernal_status: 'error'})
180+
});
181+
}
182+
}
183+
123184
export function failedFetchResults(response) {
124185
if (response.status === 404) {
125186
return { type: types.FAILED_FETCH_RESULTS, status: "does_not_exist", start: 0 };

‎src/app.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ class RNAcentralSequenceSearch extends HTMLElement {
2929

3030
// parse arguments
3131
const databases = JSON.parse(this.attributes.databases.nodeValue);
32+
const examples = JSON.parse(this.attributes.examples ? this.attributes.examples.nodeValue : null);
33+
const rfam = JSON.parse(this.attributes.rfam ? this.attributes.rfam.nodeValue : null);
3234

3335
// render React
3436
ReactDOM.render([
@@ -40,7 +42,7 @@ class RNAcentralSequenceSearch extends HTMLElement {
4042
<style key={resultsStyles} dangerouslySetInnerHTML={{__html: resultsStyles}}/>,
4143
<body key='body'>
4244
<Provider key='provider' store={store}>
43-
<SequenceSearch databases={databases}/>
45+
<SequenceSearch databases={databases} examples={examples} rfam={rfam}/>
4446
</Provider>
4547
</body>
4648
],

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import {connect} from "react-redux";
33

4-
import * as actions from 'actions/actionTypes';
54
import * as actionCreators from 'actions/actions';
65

76

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

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react';
22
import {connect} from "react-redux";
33

4-
import * as actions from 'actions/actionTypes';
54
import * as actionCreators from 'actions/actions';
65

76

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

+49-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Facets from 'containers/SequenceSearch/components/Results/components/Face
55
import Hit from 'containers/SequenceSearch/components/Results/components/Hit.jsx';
66

77
import 'containers/SequenceSearch/components/Results/index.scss';
8-
import routes from 'services/routes.jsx';
98
import * as actionCreators from 'actions/actions';
109

1110

@@ -40,9 +39,44 @@ class Results extends React.Component {
4039
</div>
4140
)
4241
}
42+
{
43+
this.props.rfam && (
44+
(this.props.infernal_status === "loading" || this.props.infernal_status === "success") && [
45+
<h1 key={`infernal-header`} className="margin-top-large margin-bottom-large">Rfam classification: { this.props.infernal_status === "loading" ? <i className="animated infinite flash">...</i> : '' }</h1>,
46+
<div key={`infernal-div`}>
47+
<table>
48+
<thead>
49+
<tr>
50+
<th>Family</th>
51+
<th>Accession</th>
52+
<th>Start</th>
53+
<th>End</th>
54+
<th>Bit score</th>
55+
<th>E-value</th>
56+
<th>Strand</th>
57+
</tr>
58+
</thead>
59+
<tbody>
60+
{ this.props.infernal_entries.length ? this.props.infernal_entries.map((entry, index) => (
61+
<tr key={`${index}`}>
62+
<td>{entry.description}</td>
63+
<td>{entry.accession_rfam}</td>
64+
<td>{entry.seq_from}</td>
65+
<td>{entry.seq_to}</td>
66+
<td>{entry.score}</td>
67+
<td>{entry.e_value}</td>
68+
<td>{entry.strand}</td>
69+
</tr>
70+
)) : <tr key={"noResults"}><td colSpan="7" style={{textAlign: 'center'}}>The query sequence did not match any Rfam families.</td></tr> }
71+
</tbody>
72+
</table>
73+
</div>
74+
]
75+
)
76+
}
4377
{
4478
(this.props.status === "loading" || this.props.status === "success" || this.props.status === "partial_success") && [
45-
<h1 key={`results-header`} className="margin-top-large margin-bottom-large">Results: { this.props.status === "loading" ? <i className="animated infinite flash">...</i> : <small>{ this.props.hitCount } total</small> }</h1>,
79+
<h1 key={`results-header`} className="margin-top-large margin-bottom-large">Similar sequences: { this.props.status === "loading" ? <i className="animated infinite flash">...</i> : <small>{ this.props.hitCount }</small> }</h1>,
4680
<div key={`results-div`} className="small-12 medium-10 medium-push-2 columns">
4781
<section>
4882
{ this.props.entries.map((entry, index) => (
@@ -51,7 +85,16 @@ class Results extends React.Component {
5185
{(this.props.status === "success" || this.props.status === "partial_success") && (this.props.entries.length < this.props.hitCount) && (<a className="button small" onClick={this.props.onLoadMore} target="_blank">Load more</a>)}
5286
</section>
5387
</div>,
54-
<Facets key={`results-facets`} facets={ this.props.facets } selectedFacets={ this.props.selectedFacets } toggleFacet={ this.toggleFacet } ordering={ this.props.ordering } textSearchError={ this.props.textSearchError } />
88+
<div key={`results-facets`}>
89+
{ this.props.entries ?
90+
<Facets
91+
facets={ this.props.facets }
92+
selectedFacets={ this.props.selectedFacets }
93+
toggleFacet={ this.toggleFacet }
94+
ordering={ this.props.ordering }
95+
textSearchError={ this.props.textSearchError }
96+
/> : ''}
97+
</div>
5598
]
5699
}
57100
</div>
@@ -62,14 +105,16 @@ class Results extends React.Component {
62105
function mapStateToProps(state) {
63106
return {
64107
status: state.status,
108+
infernal_status: state.infernal_status,
65109
sequence: state.sequence,
66110
entries: state.entries,
67111
facets: state.facets,
68112
selectedFacets: state.selectedFacets,
69113
hitCount: state.hitCount,
70114
ordering: state.ordering,
71115
textSearchError: state.textSearchError,
72-
jobId: state.jobId
116+
jobId: state.jobId,
117+
infernal_entries: state.infernal_entries,
73118
};
74119
}
75120

0 commit comments

Comments
 (0)