Skip to content
This repository was archived by the owner on Mar 7, 2018. It is now read-only.

Commit

Permalink
Merge pull request #118 from strbean/master
Browse files Browse the repository at this point in the history 
Move mode toggle button from navigation bar to message box
  • Loading branch information
@melissacline
melissacline authored Jul 7, 2016
2 parents 9968635 + 6a4b9c1 commit a29e534
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 35 deletions.
25 changes: 0 additions & 25 deletions js/NavBarNew.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,6 @@ var NavBarNew = React.createClass({
showModal: false,
}
},
getModeName: function (name) {
return {'research_mode': 'Research Pages', 'default': 'Default Mode'}[name]
},
toggleMode: function () {
this.props.toggleMode();
this.setState({ showModal: false });
},
shouldComponentUpdate: function (nextProps, nextState) {
// Only rerender if path has change or the research mode changes, ignoring query.
var d3TipDiv = document.getElementsByClassName('d3-tip-selection');
Expand All @@ -51,7 +44,6 @@ var NavBarNew = React.createClass({
}
return this.props.mode !== nextProps.mode ||
this.state.loggedin !== nextState.loggedin ||
this.state.showModal !== nextState.showModal ||
this.props.path.split(/\?/)[0] !== nextProps.path.split(/\?/)[0];
},
activePath: function (path, tab) {
Expand All @@ -68,8 +60,6 @@ var NavBarNew = React.createClass({
</h1>
{this.props.mode === 'research_mode' && <span id="research-label" className="label label-info">Research</span>}
</a>);
var mode_name = this.getModeName(this.props.mode);
var other_mode = (this.props.mode === 'research_mode') ? 'default' : 'research_mode';
return (
<div className="navbar-container">
<Navbar fixedTop brand={brand} toggleNavKey={0}>
Expand All @@ -88,21 +78,6 @@ var NavBarNew = React.createClass({
</DropdownButton>
<NavLink to='/variants'>Variants</NavLink>
<NavLink to='/help'>Help</NavLink>
<DropdownButton className={this.activePath(path, "mode")} ref='mode' title={mode_name}>
{this.props.mode === 'research_mode' && <NavLink onClick={this.toggleMode} to='/variants'>
Switch to {this.getModeName(other_mode)}
</NavLink> }
{this.props.mode === 'default' &&
<NavLink onClick={() =>this.setState({showModal: true})} to='/variants'>
Switch to {this.getModeName(other_mode)}
</NavLink>}
{this.props.mode === 'default' && this.state.showModal &&
<Modal onRequestHide={() => this.setState({ showModal: false })}>
<RawHTML html={content.pages.researchWarning}/>
<Button onClick={() => {this.toggleMode()}}>Yes</Button>
<Button onClick={() => this.setState({ showModal: false })}>No</Button>
</Modal>}
</DropdownButton>
<NavLink to='/community'>Community</NavLink>
</Nav>
</Navbar>
Expand Down
43 changes: 33 additions & 10 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ var Community = require('./Community');

var databaseKey = require('../databaseKey');

var {Grid, Col, Row, Table} = require('react-bootstrap');
var {Grid, Col, Row, Table, Button, Modal} = require('react-bootstrap');

var {VariantTable, ResearchVariantTable, research_mode_columns, columns} = require('./VariantTable');
var {Signup} = require('./Signup');
Expand Down Expand Up @@ -235,15 +235,20 @@ var Database = React.createClass({
// Note this is not a pure component because of the calls to
// getQuery().
mixins: [Navigation, State],
showVariant: function (row) {
row.Genomic_Coordinate_hg38 = backend.trimSearchTerm(row.Genomic_Coordinate_hg38);
var d3TipDiv = document.getElementsByClassName('d3-tip-selection');
if (d3TipDiv.length != 0 && d3TipDiv[0].style.opacity != '0') {
d3TipDiv[0].style.opacity='0';
d3TipDiv[0].style.pointerEvents='none';
getInitialState: function () {
return {
showModal: false,
}
this.transitionTo(`/variant/${variantPathJoin(row)}`);
},
},
showVariant: function (row) {
row.Genomic_Coordinate_hg38 = backend.trimSearchTerm(row.Genomic_Coordinate_hg38);
var d3TipDiv = document.getElementsByClassName('d3-tip-selection');
if (d3TipDiv.length != 0 && d3TipDiv[0].style.opacity != '0') {
d3TipDiv[0].style.opacity='0';
d3TipDiv[0].style.pointerEvents='none';
}
this.transitionTo(`/variant/${variantPathJoin(row)}`);
},
showHelp: function (title) {
var d3TipDiv = document.getElementsByClassName('d3-tip-selection');
if (d3TipDiv.length != 0 && d3TipDiv[0].style.opacity != '0') {
Expand Down Expand Up @@ -278,6 +283,10 @@ var Database = React.createClass({
this.transitionTo('/variants', {}, urlFromDatabase(state));
}
},
toggleMode: function () {
this.props.toggleMode();
this.setState({ showModal: false });
},
render: function () {
var {show} = this.props,
params = databaseParams(this.getQuery());
Expand Down Expand Up @@ -323,6 +332,19 @@ var Database = React.createClass({
return <Row>
<Col sm={10} smOffset={1} className="alert alert-warning">
<RawHTML ref='content' html={message}/>
{this.props.mode === 'research_mode' && <Button className="btn-small" onClick={this.toggleMode}>
Show Expert Reviewed Data
</Button>}
{this.props.mode === 'default' &&
<Button className="btn-small" onClick={() =>this.setState({showModal: true})}>
Show All Data
</Button>}
{this.props.mode === 'default' && this.state.showModal &&
<Modal onRequestHide={() => this.setState({ showModal: false })}>
<RawHTML html={content.pages.researchWarning}/>
<Button onClick={() => {this.toggleMode()}}>Yes</Button>
<Button onClick={() => this.setState({ showModal: false })}>No</Button>
</Modal>}
</Col>
</Row>
}
Expand Down Expand Up @@ -450,10 +472,11 @@ var Application = React.createClass({
var path = this.getPath().slice(1);
return (
<div>
<NavBarNew path={path} mode={this.state.mode} toggleMode={this.onChildToggleMode}/>
<NavBarNew path={path} mode={this.state.mode} />
<RouteHandler />
<Database
mode={this.state.mode}
toggleMode={this.onChildToggleMode}
show={path.indexOf('variants') === 0} />
<Footer />
</div>
Expand Down

0 comments on commit a29e534

Please sign in to comment.