Skip to content

Commit

Permalink
Only show the pileup view or the variants list
Browse files Browse the repository at this point in the history
  • Loading branch information
@danvk
danvk committed Jun 12, 2015
1 parent 645a928 commit 711ae0d
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 91 deletions.
120 changes: 68 additions & 52 deletions cycledash/static/js/examine/components/ExaminePage.js
View file
Expand Up @@ -39,7 +39,7 @@ var ExaminePage = React.createClass({
},
handleOpenViewer: function(record) {
this.props.recordActions.setViewerOpen(true);
this.refs.vcfTable.scrollRecordToTop(record);
// this.refs.vcfTable.scrollRecordToTop(record);
},
handleCloseViewer: function() {
this.props.recordActions.setViewerOpen(false);
Expand Down Expand Up @@ -76,61 +76,77 @@ var ExaminePage = React.createClass({
var state = this.state,
props = this.props,
run = props.vcf;
return (
<div className="examine-page">
<div className="examine-header">
<div className="row">
<div className="examine-info-container">
<ExamineInformation run={run}/>
{props.comparableVcfs ?
<VCFValidation vcfs={props.comparableVcfs}
selectedVcfId={state.selectedVcfId}
handleComparisonVcfChange={this.handleComparisonVcfChange} /> :
null}
<Downloads query={state.query} run_id={run.id} />
</div>
<div className="examine-summary-container">
<StatsSummary hasLoaded={state.hasLoaded}
stats={state.stats} />

// The pileup viewer still needs to be created, even if it's not visible,
// so that it will pre-fetch the index chunks.
var pileupViewer = (
<PileupViewer key="pileup-viewer"
vcfPath={run.uri}
normalBamPath={run.normal_bam && run.normal_bam.uri}
tumorBamPath={run.tumor_bam && run.tumor_bam.uri}
igvHttpfsUrl={props.igvHttpfsUrl}
selectedRecord={state.selectedRecord}
columns={state.columns}
isOpen={state.isViewerOpen}
handlePreviousRecord={this.handlePreviousRecord}
handleNextRecord={this.handleNextRecord}
handleClose={this.handleCloseViewer} />
);

if (state.isViewerOpen) {
return (
<div className="examine-page">
{pileupViewer}
</div>
);
} else {
return (
<div className="examine-page">
<div className="examine-header">
<div className="row">
<div className="examine-info-container">
<ExamineInformation run={run}/>
{props.comparableVcfs ?
<VCFValidation vcfs={props.comparableVcfs}
selectedVcfId={state.selectedVcfId}
handleComparisonVcfChange={this.handleComparisonVcfChange} /> :
null}
<Downloads query={state.query} run_id={run.id} />
</div>
<div className="examine-summary-container">
<StatsSummary hasLoaded={state.hasLoaded}
stats={state.stats} />
</div>
</div>
</div>
</div>
<div className="examine-cql">
<QueryBox columns={state.columns}
hasPendingRequest={state.hasPendingRequest}
loadError={state.loadError}
query={state.query}
handleQueryChange={this.handleQueryChange} />
<div className="examine-cql">
<QueryBox columns={state.columns}
hasPendingRequest={state.hasPendingRequest}
loadError={state.loadError}
query={state.query}
handleQueryChange={this.handleQueryChange} />

</div>
<div className="examine-table">
<VCFTable ref="vcfTable"
hasLoaded={state.hasLoaded}
records={state.records}
columns={state.columns}
selectedRecord={state.selectedRecord}
sortBys={state.sortBys}
igvLink={state.igvLink}
handleSortByChange={this.handleSortByChange}
handleRequestPage={this.handleRequestPage}
handleSelectRecord={this.handleSelectRecord}
handleOpenViewer={this.handleOpenViewer}
handleSetComment={this.handleSetComment}
handleDeleteComment={this.handleDeleteComment} />
</div>
{pileupViewer}
</div>
<div className="examine-table">
<VCFTable ref="vcfTable"
hasLoaded={state.hasLoaded}
records={state.records}
columns={state.columns}
selectedRecord={state.selectedRecord}
sortBys={state.sortBys}
igvLink={state.igvLink}
handleSortByChange={this.handleSortByChange}
handleRequestPage={this.handleRequestPage}
handleSelectRecord={this.handleSelectRecord}
handleOpenViewer={this.handleOpenViewer}
handleSetComment={this.handleSetComment}
handleDeleteComment={this.handleDeleteComment} />
<PileupViewer vcfPath={run.uri}
normalBamPath={run.normal_bam && run.normal_bam.uri}
tumorBamPath={run.tumor_bam && run.tumor_bam.uri}
igvHttpfsUrl={props.igvHttpfsUrl}
selectedRecord={state.selectedRecord}
columns={state.columns}
isOpen={state.isViewerOpen}
handlePreviousRecord={this.handlePreviousRecord}
handleNextRecord={this.handleNextRecord}
handleClose={this.handleCloseViewer} />
</div>
</div>
);
}
);
}
}
});

module.exports = ExaminePage;
39 changes: 0 additions & 39 deletions cycledash/static/js/examine/components/PileupViewer.js
View file
Expand Up @@ -180,16 +180,11 @@ var PileupViewer = React.createClass({
componentDidMount: function() {
this.fetchIndexChunks();
this.update();

var pileupEl = this.refs.pileupElement.getDOMNode();
$(pileupEl).on('DOMMouseScroll mousewheel', '.pileup', cancelImpotentScrolls);
},
componentDidUpdate: function() {
this.update();
},
componentWillUnmount: function() {
var pileupEl = this.refs.pileupElement.getDOMNode();
$(pileupEl).off('mousewheel DOMMouseScroll');
},
shouldComponentUpdate: function(nextProps, nextState) {
return ((nextProps.isOpen != this.props.isOpen) ||
Expand All @@ -198,38 +193,4 @@ var PileupViewer = React.createClass({
});


// This prevents mousewheel events at the top/bottom of an element from
// scrolling parent elements. On Cycledash, it prevents mousewheeling on the
// pileup track from scrolling the entire examine page.
// http://stackoverflow.com/a/16324762/388951
function cancelImpotentScrolls(ev) {
/* jshint validthis: true */
var $this = $(this),
scrollTop = this.scrollTop,
scrollHeight = this.scrollHeight,
height = $this.height(),
delta = (ev.type == 'DOMMouseScroll' ?
ev.originalEvent.detail * -40 :
ev.originalEvent.wheelDelta),
up = delta > 0;

var prevent = function() {
ev.stopPropagation();
ev.preventDefault();
ev.returnValue = false;
return false;
};

if (!up && -delta > scrollHeight - height - scrollTop) {
// Scrolling down, but this will take us past the bottom.
$this.scrollTop(scrollHeight);
return prevent();
} else if (up && delta > scrollTop) {
// Scrolling up, but this will take us past the top.
$this.scrollTop(0);
return prevent();
}
}


module.exports = PileupViewer;

0 comments on commit 711ae0d

Please sign in to comment.