public/js/report.js in sequenceserver-1.1.0.beta10 vs public/js/report.js in sequenceserver-1.1.0.beta11
- old
+ new
@@ -16,11 +16,11 @@
/**
* Dynamically create form and submit.
*/
var downloadFASTA = function (sequence_ids, database_ids) {
- var form = $('<form/>').attr('method', 'post').attr('action', '/get_sequence');
+ var form = $('<form/>').attr('method', 'post').attr('action', 'get_sequence');
addField("sequence_ids", sequence_ids);
addField("database_ids", database_ids);
form.appendTo('body').submit().remove();
function addField(name, val) {
@@ -65,10 +65,11 @@
return {
search_id: '',
program: '',
program_version: '',
submitted_at: '',
+ num_queries: 0,
queries: [],
querydb: [],
params: [],
stats: []
};
@@ -124,10 +125,11 @@
//responseJSON.veryBig = !_.every(queries, (query) => {
//numHits += query.hits.length;
//return (numHits <= 500);
//});
responseJSON.queries = queries.splice(0, 50);
+ responseJSON.num_queries = queries.length;
this.setState(responseJSON);
// Render results for remaining queries.
var update = function () {
if (queries.length > 0) {
@@ -199,12 +201,14 @@
program={this.state.program} collapsed="true"/>
: <span></span> }
{
_.map(this.state.queries, _.bind(function (query) {
return (
- <Query key={"Query_"+query.id} query={query} data={this.state}
- selectHit={this.selectHit}/>
+ <Query key={"Query_"+query.id}
+ program={this.state.program} querydb={this.state.querydb}
+ query={query} num_queries={this.state.num_queries}
+ veryBig={this.state.veryBig} selectHit={this.selectHit}/>
);
}, this))
}
</div>
</div>
@@ -365,27 +369,19 @@
return;
}
var $hit = $(checkbox.data('target'));
- // Highlight selected hit and sync checkboxes if sequence viewer is open.
+ // Highlight selected hit and enable 'Download FASTA/Alignment of
+ // selected' links.
if (checkbox.is(":checked")) {
- $hit
- .addClass('glow')
- .find(":checkbox").not(checkbox).check();
- var $a = $('.download-fasta-of-selected');
- var $b = $('.download-alignment-of-selected');
- $b.enable()
- var $n = $a.find('span');
- $a
- .enable()
+ $hit.find('.section-content').addClass('glow');
+ $('.download-alignment-of-selected').enable();
+ $('.download-fasta-of-selected').enable();
}
-
else {
- $hit
- .removeClass('glow')
- .find(":checkbox").not(checkbox).uncheck();
+ $hit.find('.section-content').removeClass('glow');
}
if (num_checked >= 1)
{
var $a = $('.download-fasta-of-selected');
@@ -429,16 +425,14 @@
// Life cycle methods //
render: function () {
return (
- <div
- className="resultn" id={this.domID()}
+ <div className="resultn" id={this.domID()}
data-query-len={this.props.query.length}
- data-algorithm={this.props.data.program}>
- <div
- className="section-header">
+ data-algorithm={this.props.program}>
+ <div className="section-header">
<h3>
Query= {this.props.query.id}
<small>
{this.props.query.title}
@@ -446,29 +440,28 @@
</h3>
<span
className="label label-reset pos-label"
title={"Query" + this.props.query.number + "."}
data-toggle="tooltip">
- {this.props.query.number + "/" + this.props.data.queries.length}
+ {this.props.query.number + "/" + this.props.num_queries}
</span>
</div>
{this.numhits() &&
(
<div className="section-content">
- <HitsOverview key={"GO_"+this.props.query.number} query={this.props.query} program={this.props.data.program} collapsed={this.props.data.veryBig}/>
- <LengthDistribution key={"LD_"+this.props.query.id} query={this.props.query} algorithm={this.props.data.program} collapsed="true"/>
+ <HitsOverview key={"GO_"+this.props.query.number} query={this.props.query} program={this.props.program} collapsed={this.props.veryBig}/>
+ <LengthDistribution key={"LD_"+this.props.query.id} query={this.props.query} algorithm={this.props.program} collapsed="true"/>
<HitsTable key={"HT_"+this.props.query.number} query={this.props.query}/>
- <div
- id="hits">
+ <div id="hits">
{
_.map(this.props.query.hits, _.bind(function (hit) {
return (
<Hit
hit={hit}
key={"HIT_"+hit.number}
- algorithm={this.props.data.program}
- querydb={this.props.data.querydb}
+ algorithm={this.props.program}
+ querydb={this.props.querydb}
query={this.props.query}
selectHit={this.props.selectHit}/>
);
}, this))
}
@@ -489,10 +482,14 @@
)
}
</div>
)
},
+
+ shouldComponentUpdate: function (nextProps, nextState) {
+ if (!this.props.query) return true;
+ }
});
/**
* Renders summary of all hits per query in a tabular form.
*/
@@ -638,99 +635,90 @@
}
},
render: function () {
return (
- <div
- className="hit" id={this.domID()}
+ <div className="hit" id={this.domID()}
data-hit-def={this.props.hit.id} data-hit-evalue={this.props.hit.evalue}
data-hit-len={this.props.hit.length}>
- <div
- className="section-header">
- <h4
- data-toggle="collapse"
- data-target={ "#Query_" + this.props.query.number + "_hit_"
- + this.props.hit.number + "_alignment"} >
+ <div className="section-header">
+ <h4 data-toggle="collapse"
+ data-target={this.domID() + "_content"}>
<i className="fa fa-chevron-down"></i>
<span>
{this.props.hit.id}
<small>
{this.props.hit.title}
</small>
</span>
</h4>
- <span
- className="label label-reset pos-label"
- title={"Query " + this.props.query.number + ". Hit "
+ <span className="label label-reset pos-label"
+ title={"Query " + this.props.query.number + ". Hit "
+ this.props.hit.number + " of "
+ this.props.query.hits.length + "."}
data-toggle="tooltip">
{this.props.hit.number + "/" + this.props.query.hits.length}
</span>
</div>
- <div
- className="section-content collapse in"
- id={"Query_" + this.props.query.number + "_hit_"
- + this.props.hit.number + "_alignment"}>
- <div
- className="hit-links">
- <label>
- <input
- type="checkbox" id={this.domID() + "_checkbox"}
- value={this.accession()}
- data-target={"#Query_" + this.props.query.number
- + "_hit_" + this.props.hit.number}
- onChange=
- {
- _.bind(function () {
- this.props.selectHit(this.domID() + "_checkbox");
- }, this)
- }
- />
- <span>{" Select "}</span>
- </label>
- <span> | </span>
- { this.viewSequenceButton() }
- {
- this.state.showSequenceViewer && <SequenceViewer
- url={this.viewSequenceLink()} onHide={this.hideSequenceViewer}/>
- }
- <span> | </span>
- <button
- className='btn btn-link download-fa'
- onClick={this.downloadFASTA}>
- <i className="fa fa-download"></i> FASTA
- </button>
- <span> | </span>
- <button
- className='btn btn-link download-aln'
- onClick={this.downloadAlignment}>
- <i className="fa fa-download"></i> Alignment
- </button>
- {
- _.map(this.props.hit.links, _.bind(function (link) {
- return [<span> | </span>, this.a(link)];
- }, this))
- }
- </div>
+ <div id={this.domID() + "_content"}
+ className="section-content collapse in">
+ { this.hitLinks() }
<HSPOverview key={"kablammo"+this.props.query.id}
query={this.props.query} hit={this.props.hit}
algorithm={this.props.algorithm}/>
{ this.hspListJSX() }
</div>
</div>
);
},
+ hitLinks: function () {
+ return (
+ <div className="hit-links">
+ <label>
+ <input type="checkbox" id={this.domID() + "_checkbox"}
+ value={this.accession()} onChange={function () {
+ this.props.selectHit(this.domID() + "_checkbox");
+ }.bind(this)} data-target={'#' + this.domID()}
+ /> Select
+ </label>
+ |
+ { this.viewSequenceButton() }
+ {
+ this.state.showSequenceViewer && <SequenceViewer
+ url={this.viewSequenceLink()} onHide={this.hideSequenceViewer}/>
+ }
+ |
+ <button className='btn btn-link download-fa'
+ onClick={this.downloadFASTA}>
+ <i className="fa fa-download"></i> FASTA
+ </button>
+ |
+ <button className='btn btn-link download-aln'
+ onClick={this.downloadAlignment}>
+ <i className="fa fa-download"></i> Alignment
+ </button>
+ {
+ _.map(this.props.hit.links, _.bind(function (link) {
+ return [<span> | </span>, this.a(link)];
+ }, this))
+ }
+ </div>
+ );
+ },
+
hspListJSX: function () {
return <div className="hsps">
{
this.props.hit.hsps.map((hsp) => {
- return <HSP algorithm={this.props.algorithm} hsp={hsp}
- query={this.props.query} hit={this.props.hit}/>}, this)
+ return <HSP key={hsp.number}
+ algorithm={this.props.algorithm}
+ queryNumber={this.props.query.number}
+ hitNumber={this.props.hit.number} hsp={hsp}/>
+ }, this)
}
</div>
}
});
@@ -782,11 +770,11 @@
sequence: this.props.sequence.value,
target: this.widgetID,
format: 'PRIDE',
columns: {
size: 40,
- spacedEach: 5
+ spacedEach: 0
},
formatOptions: {
title: false,
footer: false
}
@@ -966,10 +954,10 @@
var hsps_arr = [];
var aln_exporter = new AlignmentExporter();
console.log('check '+sequence_ids.toString());
_.each(this.props.data.queries, _.bind(function (query) {
_.each(query.hits, function (hit) {
- if (_.indexOf(sequence_ids, hit.id) != -1) {
+ if (_.indexOf(sequence_ids, hit.accession) != -1) {
_.each(hit.hsps, function (hsp) {
hsp.hit_id = hit.id;
hsp.query_id = query.id;
hsps_arr.push(hsp);
});