Skip to content

Commit

Permalink
Extend Bootstrap grid and components to project.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaclynperrone
jaclynperrone committed May 21, 2015
1 parent a38d91f commit 5008b79
Show file tree
Hide file tree
Showing 12 changed files with 372 additions and 443 deletions.
38 changes: 21 additions & 17 deletions cycledash/static/js/comments/components/comment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ var LatestComments = React.createClass({
},
render: function() {
return (
<div className='comments'>
<h4>Last {this.props.comments.length} Comments</h4>
<div className='container'>
<h4>Last {this.props.comments.length} Comments
<a href='/comments' className='all-comments'>(See all)</a></h4>
<Comments comments={this.props.comments} />
<a href='/comments' className='all-comments'>See all…</a>
</div>
);
}
Expand All @@ -40,9 +40,9 @@ var Comments = React.createClass({
render: function() {
var comments = this.props.comments.map(c => <Comment comment={c} key={c.id} />);
return (
<ul className='comments'>
<table className='comments'>
{comments}
</ul>
</table>
);
}
});
Expand All @@ -62,18 +62,22 @@ var Comment = React.createClass({
var authorName = comment.authorName ?
comment.authorName.slice(0, 15) : 'Anonymous';
return (
<li>
<span className='run-id'>
<a href={`/runs/${comment.vcfId}/examine`}>Run {comment.vcfId}</a>
</span>
<a className='location' href={this.urlForComment(comment)}>
{comment.contig}:{comment.position}
</a>
<span className='summary-container'>
<b>{authorName}</b>: <span className='summary'>{comment.commentText.slice(0, 45)}</span>
</span>
<span className='time' title={comment.lastModified}>{relativeDate}</span>
</li>
<tr>
<td className='location'>
<a className='run-id' href={`/runs/${comment.vcfId}/examine`}>Run {comment.vcfId}</a>
<a className='location' href={this.urlForComment(comment)}>
{comment.contig}:{comment.position}
</a>
</td>
<td className='summary-container'>
<span>
<span className='author-name'>{authorName}</span><span className='summary'>{comment.commentText.slice(0, 45)}</span>
</span>
</td>
<td className='time'>
<span title={comment.lastModified}>{relativeDate}</span>
</td>
</tr>
);
}
});
Expand Down
74 changes: 39 additions & 35 deletions cycledash/static/js/examine/components/CommentBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,22 +246,22 @@ var VCFCommentHeader = React.createClass({
// The links are worded differently depending on previous actions.
var didClick = this.props.didClickIGVLink;
var igvLinks = this.state.initialHasOpenedIgv ?
[<a key="jump" href={jumpLink} onClick={didClick}>Jump to Locus</a>,
<a key="load" href={loadIGVLink} onClick={didClick}>(reload)</a>] :
[<a key="load" href={loadIGVLink} onClick={didClick}>Load at Locus</a>,
<a key="jump" href={jumpLink} onClick={didClick}>(Jump)</a>];
[<a key="jump" className='igv-load' href={jumpLink} onClick={didClick}>Jump to Locus</a>,
<a key="load" className='igv-load' href={loadIGVLink} onClick={didClick}>Reload</a>] :
[<a key="load" className='igv-load' href={loadIGVLink} onClick={didClick}>Load at Locus</a>,
<a key="jump" className='igv-load' href={jumpLink} onClick={didClick}>Jump</a>];

return (
<div className='comment-box-header'>
<a className='dalliance-open'
onClick={() => {this.props.handleOpenViewer(r);}}>
Open Pileup Viewer
</a>
<span className='igv-links'>
IGV: {igvLinks[0]}&nbsp;
{igvLinks[1]}&nbsp;
<a href="https://github.com/hammerlab/cycledash/wiki/IGV-Integration" className="igv-help" title="IGV Help"></a>
</span>
<div className='igv-links'>
{igvLinks[0]}
{igvLinks[1]}
<a href="https://github.com/hammerlab/cycledash/wiki/IGV-Integration" className="igv-help" title="IGV Help"></a>
</div>
</div>
);
}
Expand All @@ -284,18 +284,20 @@ var VCFCommentViewer = React.createClass({

var markedDownText = marked(plainText);
return (
<div className='comment-view-container'>
<div className='comment-header'>
<span className='comment-by'>
Comment by <b>{this.props.authorName}</b>, <span className='time'>{this.props.createdString}</span>
</span>
<span className='edit-buttons'>
<a className='comment-edit' title='Edit Comment' href='#' onClick={this.props.handleEdit}></a>
<a className='comment-delete' title='Delete Comment' href='#' onClick={this.props.handleDelete}></a>
</span>
<div className='row'>
<div className='comment-view-container'>
<div className='comment-header'>
<span className='comment-by'>
Comment by <b>{this.props.authorName}</b>, <span className='time'>{this.props.createdString}</span>
</span>
<span className='edit-buttons'>
<a className='comment-edit' title='Edit Comment' href='#' onClick={this.props.handleEdit}></a>
<a className='comment-delete' title='Delete Comment' href='#' onClick={this.props.handleDelete}></a>
</span>
</div>
<div className='comment-text'
dangerouslySetInnerHTML={{__html: markedDownText}} />
</div>
<div className='comment-text'
dangerouslySetInnerHTML={{__html: markedDownText}} />
</div>
);
}
Expand Down Expand Up @@ -370,34 +372,36 @@ var VCFCommentEditor = React.createClass({
var buttons = [];
if (this.props.cancelable) {
buttons.push(
<button className='btn btn-xs comment-button btn-default comment-cancel'
<button className='btn btn-link comment-button btn-default comment-cancel'
key='cancel'
onClick={this.handleCancelConfirm}>
Cancel
</button>
);
}
buttons.push(
<button className='btn btn-xs comment-button btn-success comment-save'
<button className='btn comment-button btn-success comment-save'
key='save'
onClick={this.handleSaveText}>
Save
</button>
);
return (
<div className='comment-edit-container'>
<input className='form-control comment-author'
type='text'
value={this.state.newAuthorName}
placeholder='Enter your name here'
onChange={this.handleAuthorChange} />
<textarea className='form-control comment-textarea'
value={this.state.newCommentText}
placeholder={this.props.placeHolder}
onChange={this.handleTextChange}
ref='textArea' />
<div className='save-buttons'>
{buttons}
<div className='row'>
<div className='comment-edit-container'>
<input className='form-control comment-author'
type='text'
value={this.state.newAuthorName}
placeholder='Enter your name here'
onChange={this.handleAuthorChange} />
<textarea className='form-control comment-textarea'
value={this.state.newCommentText}
placeholder={this.props.placeHolder}
onChange={this.handleTextChange}
ref='textArea' />
<div className='save-buttons'>
{buttons}
</div>
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions cycledash/static/js/examine/components/ExamineInformation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,10 @@ var ExamineInformation = React.createClass({
var run = this.props.run;
return (
<div className="examine-information">
<dl>
<dl className='dl-horizontal'>
<dt>VCF URI</dt> <dd>{run.uri}</dd>
<dt>Caller</dt> <dd>{run.caller_name}</dd>
<dt>Submitted At</dt> <dd>{run.created_at}</dd>
<dt>Submitted</dt> <dd>{run.created_at}</dd>
</dl>
</div>
);
Expand Down
89 changes: 51 additions & 38 deletions cycledash/static/js/examine/components/ExaminePage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,44 +78,57 @@ var ExaminePage = React.createClass({
run = props.vcf;
return (
<div className="examine-page">
<StatsSummary hasLoaded={state.hasLoaded}
stats={state.stats} />
<ExamineInformation run={run}/>
{props.comparableVcfs ?
<VCFValidation vcfs={props.comparableVcfs}
selectedVcfId={state.selectedVcfId}
handleComparisonVcfChange={this.handleComparisonVcfChange} /> :
null}
<QueryBox columns={state.columns}
hasPendingRequest={state.hasPendingRequest}
loadError={state.loadError}
query={state.query}
handleQueryChange={this.handleQueryChange} />
<Downloads query={state.query} run_id={run.id} />
<VCFTable ref="vcfTable"
hasLoaded={state.hasLoaded}
records={state.records}
range={state.range}
columns={state.columns}
selectedRecord={state.selectedRecord}
contigs={state.contigs}
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}
isOpen={state.isViewerOpen}
handlePreviousRecord={this.handlePreviousRecord}
handleNextRecord={this.handleNextRecord}
handleClose={this.handleCloseViewer} />
<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 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}
range={state.range}
columns={state.columns}
selectedRecord={state.selectedRecord}
contigs={state.contigs}
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}
isOpen={state.isViewerOpen}
handlePreviousRecord={this.handlePreviousRecord}
handleNextRecord={this.handleNextRecord}
handleClose={this.handleCloseViewer} />
</div>
</div>
);
}
Expand Down
13 changes: 8 additions & 5 deletions cycledash/static/js/examine/components/VCFValidation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,14 @@ var VCFValidation = React.createClass({
.map(v => <option value={v.id} key={v.uri}>{v.uri}</option>);
return (
<div id='vcf-validations'>
Compare to:
<select onChange={this.handleSelect}
value={this.props.compareToVcfId}>
{vcfs}
</select>
<dl className='dl-horizontal'>
<dt>Compare to</dt>
<dd>
<select onChange={this.handleSelect} value={this.props.compareToVcfId}>
{vcfs}
</select>
</dd>
</dl>
</div>
);
}
Expand Down
6 changes: 3 additions & 3 deletions cycledash/static/js/runs/components/RunsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,9 @@ var RunsPage = React.createClass({
</h1>
{this.state.displayProjectForm ? newProjectForm : null}
<LatestComments comments={this.props.comments} />
<h5>
<h5 className='filter-runs'>
Filter runs by project name:&nbsp;&nbsp;
<select value={this.state.projectFilter}
<select className='select-project-filter' value={this.state.projectFilter}
onChange={this.handleProjectFilter}>
{projectOptions}
</select>
Expand Down Expand Up @@ -136,7 +136,7 @@ var ProjectTable = React.createClass({
}
return (
<div className='project'>
<div className='project-header'>
<div className='project-header'>
<h2 title={this.props.project_id}>{this.props.name === 'null' ? 'No Project' : this.props.name}</h2>
<div className='project-stats'>
<div>
Expand Down
Loading

0 comments on commit 5008b79

Please sign in to comment.