From 28bc01267a0325f42fe75bb60b3fafcab30e27e3 Mon Sep 17 00:00:00 2001
From: Joe Thomas <str.bean.joe@gmail.com>
Date: Tue, 28 Jun 2016 23:38:03 -0700
Subject: [PATCH 1/2] Move clinical/research space toggling from navigation bar
 to message box button.

---
 js/NavBarNew.js | 15 ---------------
 js/index.js     | 41 ++++++++++++++++++++++++++++++++---------
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/js/NavBarNew.js b/js/NavBarNew.js
index d3798cb..98e1fba 100644
--- a/js/NavBarNew.js
+++ b/js/NavBarNew.js
@@ -88,21 +88,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>
diff --git a/js/index.js b/js/index.js
index 119b433..a452443 100644
--- a/js/index.js
+++ b/js/index.js
@@ -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');
@@ -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') {
@@ -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());
@@ -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>
     }
@@ -454,6 +476,7 @@ var Application = React.createClass({
                 <RouteHandler />
                 <Database
                     mode={this.state.mode}
+                    toggleMode={this.onChildToggleMode}
                     show={path.indexOf('variants') === 0} />
                 <Footer />
             </div>

From 6a4b9c118f799ac8f57e8002eb6c967663ffe316 Mon Sep 17 00:00:00 2001
From: Joe Thomas <str.bean.joe@gmail.com>
Date: Wed, 29 Jun 2016 23:25:24 -0700
Subject: [PATCH 2/2] Clean up leftover mode toggling code in NavBarNew.js

---
 js/NavBarNew.js | 10 ----------
 js/index.js     |  2 +-
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/js/NavBarNew.js b/js/NavBarNew.js
index 98e1fba..09ed00f 100644
--- a/js/NavBarNew.js
+++ b/js/NavBarNew.js
@@ -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');
@@ -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) {
@@ -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}>
diff --git a/js/index.js b/js/index.js
index a452443..3e2546b 100644
--- a/js/index.js
+++ b/js/index.js
@@ -472,7 +472,7 @@ 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}