Skip to content

Commit 2330576

Browse files
caduribascaduribas
committed
Show infernal results
1 parent 17a6cd5 commit 2330576

File tree

11 files changed

+139
-18
lines changed

11 files changed

+139
-18
lines changed

‎package.json‎

Lines changed: 5 additions & 1 deletion
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": "apetrov@ebi.ac.uk"
35+
},
36+
{
37+
"name": "Carlos E. Ribas",
38+
"email": "cribas@ebi.ac.uk"
3539
}
3640
],
3741
"license": "Apache-2.0",

‎src/actions/actionTypes.js‎

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 62 additions & 1 deletion
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‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ class RNAcentralSequenceSearch extends HTMLElement {
3030
// parse arguments
3131
const databases = JSON.parse(this.attributes.databases.nodeValue);
3232
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);
3334

3435
// render React
3536
ReactDOM.render([
@@ -41,7 +42,7 @@ class RNAcentralSequenceSearch extends HTMLElement {
4142
<style key={resultsStyles} dangerouslySetInnerHTML={{__html: resultsStyles}}/>,
4243
<body key='body'>
4344
<Provider key='provider' store={store}>
44-
<SequenceSearch databases={databases} examples={examples}/>
45+
<SequenceSearch databases={databases} examples={examples} rfam={rfam}/>
4546
</Provider>
4647
</body>
4748
],

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

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,44 @@ class Results extends React.Component {
4040
</div>
4141
)
4242
}
43+
{
44+
this.props.rfam && (
45+
(this.props.infernal_status === "loading" || this.props.infernal_status === "success") && [
46+
<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>,
47+
<div key={`infernal-div`}>
48+
<table>
49+
<thead>
50+
<tr>
51+
<th>Family</th>
52+
<th>Accession</th>
53+
<th>Start</th>
54+
<th>End</th>
55+
<th>Bit score</th>
56+
<th>E-value</th>
57+
<th>Strand</th>
58+
</tr>
59+
</thead>
60+
<tbody>
61+
{ this.props.infernal_entries.length ? this.props.infernal_entries.map((entry, index) => (
62+
<tr key={`${index}`}>
63+
<td>{entry.description}</td>
64+
<td>{entry.accession_rfam}</td>
65+
<td>{entry.seq_from}</td>
66+
<td>{entry.seq_to}</td>
67+
<td>{entry.score}</td>
68+
<td>{entry.e_value}</td>
69+
<td>{entry.strand}</td>
70+
</tr>
71+
)) : <tr key={"noResults"}><td colSpan="7" style={{textAlign: 'center'}}>The query sequence did not match any Rfam families.</td></tr> }
72+
</tbody>
73+
</table>
74+
</div>
75+
]
76+
)
77+
}
4378
{
4479
(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>,
80+
<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 } total</small> }</h1>,
4681
<div key={`results-div`} className="small-12 medium-10 medium-push-2 columns">
4782
<section>
4883
{ this.props.entries.map((entry, index) => (
@@ -62,14 +97,16 @@ class Results extends React.Component {
6297
function mapStateToProps(state) {
6398
return {
6499
status: state.status,
100+
infernal_status: state.infernal_status,
65101
sequence: state.sequence,
66102
entries: state.entries,
67103
facets: state.facets,
68104
selectedFacets: state.selectedFacets,
69105
hitCount: state.hitCount,
70106
ordering: state.ordering,
71107
textSearchError: state.textSearchError,
72-
jobId: state.jobId
108+
jobId: state.jobId,
109+
infernal_entries: state.infernal_entries,
73110
};
74111
}
75112

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,12 +91,14 @@ class SearchForm extends React.Component {
9191

9292
const mapStateToProps = (state) => ({
9393
status: state.status,
94+
infernal_status: state.infernal_status,
9495
sequence: state.sequence,
9596
entries: state.entries,
9697
facets: state.facets,
9798
hitCount: state.hitCount,
9899
ordering: state.ordering,
99-
textSearchError: state.textSearchError
100+
textSearchError: state.textSearchError,
101+
infernal_entries: state.infernal_entries,
100102
});
101103

102104
const mapDispatchToProps = (dispatch) => ({

‎src/containers/SequenceSearch/index.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,16 @@ class SequenceSearch extends React.Component {
1313

1414
render() {
1515
return [
16-
<SearchForm key={`searchForm`} databases={this.props.databases} examples={this.props.examples} />,
17-
<Results key={`results`} />
16+
<SearchForm key={`searchForm`} databases={this.props.databases} examples={this.props.examples}/>,
17+
<Results key={`results`} rfam={this.props.rfam}/>
1818
]
1919
}
2020
}
2121

2222
function mapStateToProps(state) {
2323
return {
2424
status: state.status,
25+
infernal_status: state.infernal_status,
2526
jobId: state.jobId,
2627
submissionError: state.submissionError
2728
};

‎src/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@
55
</head>
66
<body>
77
<rnacentral-sequence-search
8-
databases='["pdbe", "mirbase", "refseq"]'
8+
databases='["miRBase"]'
99
examples='[
1010
{"description": "miRNA hsa-let-7a-1", "urs": "URS000004F5D8", "sequence": "CUAUACAAUCUACUGUCUUUC"},
1111
{"description": "5S rRNA", "urs": "URS0000049E57", "sequence": "UGCCUGGCGGCCGUAGCGCGGUGGUCCCACCUGACCCCAUGCCGAACUCAGAAGUGAAACGCCGUAGCGCCGAUGGUAGUGUGGGGUCUCCCCAUGCGAGAGUAGGGAACUGCCAGGCAU"},
1212
{"description": "NKILA lncRNA", "urs": "URS00008120E1", "sequence": "AGACCCGGCACCCGCGCAACGGAGGAGGGGCGCUGUGCCCUCUCCCCAACGGCGGUCAGCUUGGAACGCCUGCCCGGCGCACGCCCGGGGCCGGGGAGCCGAACUCGGUGCCAGCCGCACCCGGGCGGGUUGCUGGUGCGCCCUCCCCUCGCCCCCGUCCCUGGGGUCCUUGACCCAGGCUCUUGGGGCUAGCCUAUCUUCUGAGGAGCACAAGGUCCCUGGGGGCUCAGGGAAGAGAAAUUGGAGAAAGGGGGAGGAAGCCCCCAAGAUGGAUCACCCAUUGCCUGGUUUCGCAGGAGACUGUCCGCCUUCAGUUCUCCAGCAGCUCGGGGAUCAUGGCCCACUGAACCCCCAAGCGCUUUCACCCGAACCCAAGGAGGACGACCAGGAAAGACGGGAACUCGCGUAGACACGCCCGGAAGCCCUUGUCAUGUAAAUAGCUGUCGGGGACUGGUGUAUUGUCGCCGCCCCAGCCGGCGGGACCUGGGGCGAAUCCACACCCAUUGUCUGCUGCCCAAGGGGCCUCCGGCUGGGGGGCGCGGCUGCGGAGUUCAAAAGGGGUAUGAGCAGGAGGGGUGUACUUUUAGUUCAUUAAGUUUUAAUUACAGGAGUGCUACAAGAACACAUUCUUCAGGUUUAAAAAGAUAUUAAAAUAUUACAUAAGAGACCUCCCCUCCCUGGCCCACCUCCAGCCUCUUAAAAAUUUAGUGUGUCGCCUUUUAGACACUUUCUCAAAGCUUCACUUAUUUAACAGGCACUUAAGGAGCACCUACCUGUGCCAGAAACUCUCCAAAUAUUAACUCAACCUGACACCGACUCAGUGUGGCCGAAUAUUACUCUCCCCAUUUUACAGAGCGGGCAGCUGGUCAAGGAAGUCGCUUGUUGAAAGUCACACAGUGGUGGAGCCUGUGUGCCAACCCAGGACCCUGGGGAGCUGCCUCCCCCUCUCCCACGUAGUCCUGAUUCUUUAAGUGUCCACAUAUUCCUGUAAUGCCUGGAGUUUCAGUAAUUAGCAGGGACUUAGUGUGUUCAGAGAAAAAAAAAGCUUUUAAAAAUUAUUGUUACUGUGUUUGUAACAGUUUGGAUAGAGAAGGAAAAGCUGGAAUUUGGGAAGUGAAGGUGGCCUCGGGGUAGAACUUACCUAGACCAGAGCGAAUUCAUCCUGAAGAACUCAGAGAAAGCCGGUGCAGGAAGUGGGUUCCCGCUCUCCCUGCACAGGCACAGUGAUGCUGCCAGAGCUCUCCCAGAAAGACCAGGAGGCUUGUUCUGGAGAAGUCAAGCCCAGGGAUGUGGCUCAGGCUGGUCCAAGCUCUUUGGAGGAGUCCAAGCGUGCCCAGCCCAGAGGGAGGUUCAGAGGCACUGACCGUCUUCUGUUUGGGAGGAGAAGCUCACUCUUGGAGCCACAGCCAGCACUAGGUCAGGACCCAGGCCCCGGCCCAGGAGUGGGGCAAUACCCAGCGUCUACCCCAGAUGGCACCCUGCUGUGAACUGGGCGCCCUCAGCCCCUGCCUUGAGGAAGGGGCAAUACCACCAGCGUGUCUUUUAUCAGGGAAGAUAUUGCUGCAGUUUGGCCGCUGCAACUUAAGAGAAAAGCUAAGGGGUCCCCCAGCAUCCCUUGGGGUGCCACUGCAAAUACUGGCUGGGCCUGGAGAUGACCUGGGUCCCAUUCACUUCCUAGGGUGAAGGAGGUCAUCAUUACCACCCCUGCUUUCAGCCAUUUCUUCAUUCAUUCAAUCAACAAACUGGCUGAGCUGCAACCCUGAGCCGGGGAAUUCAGCCACUCCAGACACAGCCCCUGCCCUCCGGGAAGUCUCGGGAGACCUGGCUAGUCUGGCUGGGAGAAGUCACACGUUGAUUGUCUUGGAAGUGAGAUGGCAUUUACACAAUGGAGGCUGCACUGCCAGCAGGCAAAAAUAACCAGUUAAUUCAGUGGCUUAAAGAAACCAAACCUACCCACAACGCUUGACCUCCCAUUGAUCCAUCUGCGACACCGGCAGUGGCUACCAUUUAUUGAGUGCUGAUGGUGUCACCUGGGAUUGACUUAGUGGUCUCUGGCGCUAGUUCCGAAGUUGAUUCUGUCUGGAGAGCUUAAUGCAGUGUUCAGACCUCAGGGUCCGAACCUGAGGGUCACCCAAAGAUGAGUGGGACAUAGCUGUGUGACCUCGGCUGAGUGCUUUCACCUCUCCAACCUCAGUUUCCUCUUCUGCAAAAUGGGGUGGCUUCAUGGCACCUUCACGUGGUGUGAUUGCGAGGAAUGAAGGGAUCGAUGCCUUGCAAGUAGAGGAGAAGGGGCCGGAUACAUCUUAGUUGUUAUGUUAUUUAAUCAUCUUGGCAACCCCGGGAGGGAGGAACCACUAUCAUUUUAUUUUCCAUUUUGCAGUUGAGGACAAUGAUGAUUCCAGCACAGACAGGGCCCCUGACGGGGCAGUAGGAAAGGAGAAUUGCUUUGGAAGGAGCAUAGGCUGGACUGCCAGCACUCAUAGGAGGCUUCGUGUGUGCCCAGGACUGCGAGAAUUAAAUACAGGACACCCAGUUCAGUUUGAAUUUCAGAUAAACUAUGAAUAAUGAUUAGUGUAAGUAUAUCUCAAUUUAACUGGAAAAAAAAAAAAAAAAAA"}
1313
]'
14+
rfam="true"
1415
/>
1516
</body>
1617
</html>

‎src/reducers/rootReducer.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,21 @@ const rootReducer = function (state = initialState, action) {
3333
return Object.assign({}, state, {});
3434
}
3535

36+
case actions.FETCH_INFERNAL_RESULTS:
37+
if (!action.infernal_status) {
38+
return Object.assign({}, state, {}); // do nothing, all the logic is in action creator
39+
} else if (action.infernal_status === 'success') {
40+
return Object.assign({}, state, {
41+
infernal_status: "success",
42+
infernal_entries: [...action.data],
43+
});
44+
45+
} else if (action.infernal_status === 'error') {
46+
return Object.assign({}, state, { status: 'error' });
47+
} else {
48+
return Object.assign({}, state, {});
49+
}
50+
3651
case actions.FAILED_FETCH_RESULTS:
3752
if ('does not exist') {
3853
return Object.assign({}, state, {status: "does_not_exist", start: 0});
@@ -109,6 +124,7 @@ const rootReducer = function (state = initialState, action) {
109124
return Object.assign({}, state, {
110125
jobId: action.data.job_id,
111126
status: "loading",
127+
infernal_status: "loading",
112128
submissionError: ""
113129
});
114130
case 'error':

‎src/services/routes.jsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,7 @@ module.exports = {
99
jobResult: (resultId) => `${server}/api/job-result/${resultId}`,
1010
facets: (resultId) => `${server}/api/facets/${resultId}`,
1111
facetsSearch: (resultId, query, start, size, ordering) => `${server}/api/facets-search/${resultId}?query=${query}&start=${start}&size=${size}&ordering=${ordering}`,
12-
consumersStatuses: () => `${server}/api/consumers-statuses`
13-
// ebiSearch: (jobId, query, fields, facetcount, facetfields, size, start) =>
14-
// `http://wp-p3s-f8:9050/ebisearch/ws/rest/rnacentral/seqtoolresults` +
15-
// `?query=${query}` +
16-
// `&format=json&fields=${fields}` +
17-
// `&facetcount=${facetcount}` +
18-
// `&facetfields=${facetfields}` +
19-
// `&size=${size}` +
20-
// `&start=${start}`,
12+
consumersStatuses: () => `${server}/api/consumers-statuses`,
13+
infernalJobStatus: (jobId) => `${server}/api/infernal-status/${jobId}`,
14+
infernalJobResult: (resultId) => `${server}/api/infernal-result/${resultId}`,
2115
};

0 commit comments

Comments
 (0)