From 6865d207a4320181e1f8954f5fe9c17bafc60932 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 11:25:03 +0100
Subject: [PATCH 01/21] Update display

---
 js/components/moleculeView.js  | 40 +++++++++++++++++++++++-----------
 js/containers/previewHolder.js |  2 +-
 2 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 58039a62b..a8be02ac6 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -25,12 +25,14 @@ class MoleculeView extends GenericView {
         this.getViewUrl = this.getViewUrl.bind(this);
         this.onVector = this.onVector.bind(this);
         this.onComplex = this.onComplex.bind(this);
+        this.handleChange = this.handleChange.bind(this);
         var base_url = window.location.protocol + "//" + window.location.host
         this.base_url = base_url;
         this.url = new URL(base_url + '/api/molimg/' + this.props.data.id + "/")
         this.key = "mol_image"
         this.state.vectorOn = false
         this.state.complexOn = false
+        this.state.value = []
         this.colourToggle = this.getRandomColor();
     }
 
@@ -125,6 +127,21 @@ class MoleculeView extends GenericView {
         this.props.setVectorList(objList)
     }
 
+    handleChange(value){
+        if (value==1){
+            this.onComplex();
+            this.setState({ value: value });
+        }
+        else if (value==2){
+            this.handleClick();
+            this.setState({ value: value });
+        }
+        else if (value==3){
+            this.onVector();
+            this.setState({ value: value });
+        }
+    }
+
     componentDidMount() {
         this.loadFromServer(this.props.width,this.props.height);
         var thisToggleOn = this.props.fragmentDisplayList.has(this.props.data.id);
@@ -137,21 +154,18 @@ class MoleculeView extends GenericView {
         const selected_style = {width: this.props.width.toString+'px',
             height: this.props.height.toString()+'px', backgroundColor: this.colourToggle}
         this.current_style = this.state.isToggleOn ? selected_style : this.not_selected_style;
-        return <div>
+        return <div style="border:1px solid black;">
             <div onClick={this.handleClick} style={this.current_style}>{svg_image}</div>
             <div>{this.props.data.protein_code}</div>
-            <Toggle onClick={this.onComplex}
-                on={<p>Complex ON</p>}
-                off={<p>Complex OFF</p>}
-                size="xs"
-                offstyle="danger"
-                active={this.state.complexOn}/>
-            <Toggle onClick={this.onVector}
-                on={<p>Vector ON</p>}
-                off={<p>Vector OFF</p>}
-                size="xs"
-                offstyle="danger"
-                active={this.props.to_query==this.props.data.smiles}/>
+              <ButtonToolbar>
+                  <ToggleButtonGroup type="checkbox"
+                                     value={this.state.value}
+                                     onChange={this.handleChange}>
+                      <ToggleButton value={1}>Complex</ToggleButton>
+                      <ToggleButton value={2}>Ligand</ToggleButton>
+                      <ToggleButton value={3}>Vectors</ToggleButton>
+                  </ToggleButtonGroup>
+              </ButtonToolbar>
             </div>
     }
 
diff --git a/js/containers/previewHolder.js b/js/containers/previewHolder.js
index 0d2295971..350abfea7 100644
--- a/js/containers/previewHolder.js
+++ b/js/containers/previewHolder.js
@@ -119,7 +119,7 @@ class Preview extends Component {
                     <MoleculeList style={{overflow: scroll}}/>
                 </Col>
                 <Col xs={5} md={5}>
-                    <NGLView div_id="major_view" height="600px"/>
+                    <NGLView div_id="major_view" height="90%"/>
                     <NglViewerControls/>
                 </Col>
                 <Col xs={4} md={4}>

From e3ecdba5d0b9c5f022df7a1f4ab1012b07f0e5e1 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 11:28:00 +0100
Subject: [PATCH 02/21] Debug

---
 js/components/moleculeView.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index a8be02ac6..c0ff0dc3b 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -4,6 +4,7 @@
 
 import React from "react";
 import {connect} from "react-redux";
+import {ButtonToolbar ToggleButtonGroup ToggleButton} from "react-bootstrap";
 import * as nglLoadActions from "../actions/nglLoadActions";
 import {GenericView} from "./generalComponents";
 import * as nglObjectTypes from "./nglObjectTypes";

From 52d251475213d95904c080023154617a5374019c Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 11:30:26 +0100
Subject: [PATCH 03/21] Update

---
 js/components/moleculeView.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index c0ff0dc3b..a821e7f89 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -4,14 +4,13 @@
 
 import React from "react";
 import {connect} from "react-redux";
-import {ButtonToolbar ToggleButtonGroup ToggleButton} from "react-bootstrap";
+import {ButtonToolbar, ToggleButtonGroup, ToggleButton} from "react-bootstrap";
 import * as nglLoadActions from "../actions/nglLoadActions";
 import {GenericView} from "./generalComponents";
 import * as nglObjectTypes from "./nglObjectTypes";
 import * as selectionActions from "../actions/selectionActions";
 import * as listTypes from "./listTypes";
 import "../../css/toggle.css";
-import Toggle from "react-bootstrap-toggle";
 import SVGInline from "react-svg-inline";
 import fetch from "cross-fetch";
 

From 02aa48f374da3e3e678a33d4cb2d8eaeba00afe0 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 11:37:19 +0100
Subject: [PATCH 04/21] DEbug

---
 js/components/moleculeView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index a821e7f89..492f79554 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -154,7 +154,7 @@ class MoleculeView extends GenericView {
         const selected_style = {width: this.props.width.toString+'px',
             height: this.props.height.toString()+'px', backgroundColor: this.colourToggle}
         this.current_style = this.state.isToggleOn ? selected_style : this.not_selected_style;
-        return <div style="border:1px solid black;">
+        return <div style={{border: "1px solid black"}}>
             <div onClick={this.handleClick} style={this.current_style}>{svg_image}</div>
             <div>{this.props.data.protein_code}</div>
               <ButtonToolbar>

From 28c3276c184767781134d5b3dd828bbb6f4a3c5c Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 11:50:53 +0100
Subject: [PATCH 05/21] Update

---
 js/components/moleculeView.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 492f79554..66ffe8b4a 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -128,18 +128,21 @@ class MoleculeView extends GenericView {
     }
 
     handleChange(value){
-        if (value==1){
+        var old = this.state.value;
+        var removed = old.filter(function(i) {return value.indexOf(i)<0;})[0]
+        var added = value.filter(function(i) {return old.indexOf(i)<0;})[0]
+        var changed = [removed,added];
+
+        if (1 in changed){
             this.onComplex();
-            this.setState({ value: value });
         }
-        else if (value==2){
+        else if (2 in changed){
             this.handleClick();
-            this.setState({ value: value });
         }
-        else if (value==3){
+        else if (3 in changed){
             this.onVector();
-            this.setState({ value: value });
         }
+        this.setState({ value: value });
     }
 
     componentDidMount() {

From e6360ae190a6f6e351cd43359a4baa19fc858166 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 11:55:13 +0100
Subject: [PATCH 06/21] Update

---
 js/components/moleculeView.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 66ffe8b4a..3408b260e 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -133,13 +133,13 @@ class MoleculeView extends GenericView {
         var added = value.filter(function(i) {return old.indexOf(i)<0;})[0]
         var changed = [removed,added];
 
-        if (1 in changed){
+        if (changed.index(1)>-1){
             this.onComplex();
         }
-        else if (2 in changed){
+        if (changed.index(2)>-1){
             this.handleClick();
         }
-        else if (3 in changed){
+        if (changed.index(3)>-1){
             this.onVector();
         }
         this.setState({ value: value });

From d8b453e25800c69db4a34f249decfc2722b7fe27 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 11:57:18 +0100
Subject: [PATCH 07/21] Update

---
 js/components/moleculeView.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 3408b260e..41d4b6211 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -133,13 +133,13 @@ class MoleculeView extends GenericView {
         var added = value.filter(function(i) {return old.indexOf(i)<0;})[0]
         var changed = [removed,added];
 
-        if (changed.index(1)>-1){
+        if (changed.indexOf(1)>-1){
             this.onComplex();
         }
-        if (changed.index(2)>-1){
+        if (changed.indexOf(2)>-1){
             this.handleClick();
         }
-        if (changed.index(3)>-1){
+        if (changed.indexOf(3)>-1){
             this.onVector();
         }
         this.setState({ value: value });

From 0be6cff827401dd3de10595e96eabb2ee49e3329 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 13:25:18 +0100
Subject: [PATCH 08/21] Update mol view

---
 js/components/moleculeView.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 41d4b6211..e10b2719c 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -132,7 +132,6 @@ class MoleculeView extends GenericView {
         var removed = old.filter(function(i) {return value.indexOf(i)<0;})[0]
         var added = value.filter(function(i) {return old.indexOf(i)<0;})[0]
         var changed = [removed,added];
-
         if (changed.indexOf(1)>-1){
             this.onComplex();
         }
@@ -149,7 +148,17 @@ class MoleculeView extends GenericView {
         this.loadFromServer(this.props.width,this.props.height);
         var thisToggleOn = this.props.fragmentDisplayList.has(this.props.data.id);
         var complexOn = this.props.complexList.has(this.props.data.id);
-        this.setState(prevState => ({complexOn: complexOn, isToggleOn: thisToggleOn}))
+        var value_list = []
+        if(complexOn){
+            value_list.push(1)
+        }
+        if(thisToggleOn){
+            value_list.push(2)
+        }
+        if(this.props.to_query==this.props.data.smiles){
+            value_list.push(3)
+        }
+        this.setState(prevState => ({value: value_list, complexOn: complexOn, isToggleOn: thisToggleOn}))
     }
 
     render() {

From 968eb3572b42c508b7d00d82e4d70308c48004f2 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 13:29:35 +0100
Subject: [PATCH 09/21] Update to not click ligand on too

---
 js/components/moleculeView.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index e10b2719c..7cd4dae42 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -207,9 +207,6 @@ class MoleculeView extends GenericView {
         else{
             this.props.loadObject(Object.assign({display_div: "major_view"}, this.generateObject()))
             this.props.appendComplexList(this.generateMolId())
-            if(this.state.isToggleOn==false){
-                this.handleClick()
-            }
         }
     }
 

From e3461a9f89e73e5689c140ea92f314e4af93b8e7 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 13:30:52 +0100
Subject: [PATCH 10/21] Update

---
 js/components/moleculeView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 7cd4dae42..5af704856 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -167,7 +167,7 @@ class MoleculeView extends GenericView {
             height: this.props.height.toString()+'px', backgroundColor: this.colourToggle}
         this.current_style = this.state.isToggleOn ? selected_style : this.not_selected_style;
         return <div style={{border: "1px solid black"}}>
-            <div onClick={this.handleClick} style={this.current_style}>{svg_image}</div>
+            <div style={this.current_style}>{svg_image}</div>
             <div>{this.props.data.protein_code}</div>
               <ButtonToolbar>
                   <ToggleButtonGroup type="checkbox"

From c39c19f4f81f016c30d828f877f8c5411ce07d31 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 13:35:52 +0100
Subject: [PATCH 11/21] Update

---
 js/components/moleculeView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 5af704856..ac3e7479b 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -165,7 +165,7 @@ class MoleculeView extends GenericView {
         const svg_image = <SVGInline svg={this.state.img_data}/>;
         const selected_style = {width: this.props.width.toString+'px',
             height: this.props.height.toString()+'px', backgroundColor: this.colourToggle}
-        this.current_style = this.state.isToggleOn ? selected_style : this.not_selected_style;
+        this.current_style = this.state.isToggleOn || this.state.complexOn ? selected_style : this.not_selected_style;
         return <div style={{border: "1px solid black"}}>
             <div style={this.current_style}>{svg_image}</div>
             <div>{this.props.data.protein_code}</div>

From 2d1bb85dbaeebb71a06fcf4b5c1d4e046f8699c3 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 13:39:11 +0100
Subject: [PATCH 12/21] Update to alter selected

---
 js/components/moleculeView.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index ac3e7479b..84b24ace2 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -161,6 +161,19 @@ class MoleculeView extends GenericView {
         this.setState(prevState => ({value: value_list, complexOn: complexOn, isToggleOn: thisToggleOn}))
     }
 
+    componentWillReceiveProps(nextProps){
+        var value_list = this.state.value.slice();
+        if(nextProps.to_query!=this.props.data.smiles){
+            var index = value_list.indexOf(3);
+            if (index > -1) {
+                value_list.splice(index, 1);
+            }
+        }
+        this.setState(prevState => ({value: value_list, complexOn: complexOn, isToggleOn: thisToggleOn}))
+
+    }
+
+
     render() {
         const svg_image = <SVGInline svg={this.state.img_data}/>;
         const selected_style = {width: this.props.width.toString+'px',

From f456ba478648f75408a69ad06f9aaa71fcf474c3 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 13:43:44 +0100
Subject: [PATCH 13/21] Update

---
 js/components/moleculeView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 84b24ace2..bed8f4b33 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -169,7 +169,7 @@ class MoleculeView extends GenericView {
                 value_list.splice(index, 1);
             }
         }
-        this.setState(prevState => ({value: value_list, complexOn: complexOn, isToggleOn: thisToggleOn}))
+        this.setState(prevState => ({value: value_list}))
 
     }
 

From a08ee3eb5cc9922ea6ff785278698b2e7072b3a6 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 14:37:47 +0100
Subject: [PATCH 14/21] Update

---
 js/components/moleculeView.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index bed8f4b33..0d9833722 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -30,9 +30,9 @@ class MoleculeView extends GenericView {
         this.base_url = base_url;
         this.url = new URL(base_url + '/api/molimg/' + this.props.data.id + "/")
         this.key = "mol_image"
+        this.state.value = []
         this.state.vectorOn = false
         this.state.complexOn = false
-        this.state.value = []
         this.colourToggle = this.getRandomColor();
     }
 
@@ -129,6 +129,7 @@ class MoleculeView extends GenericView {
 
     handleChange(value){
         var old = this.state.value;
+        var new_list = value.slice();
         var removed = old.filter(function(i) {return value.indexOf(i)<0;})[0]
         var added = value.filter(function(i) {return old.indexOf(i)<0;})[0]
         var changed = [removed,added];
@@ -141,7 +142,7 @@ class MoleculeView extends GenericView {
         if (changed.indexOf(3)>-1){
             this.onVector();
         }
-        this.setState({ value: value });
+        this.setState({ value: new_list });
     }
 
     componentDidMount() {
@@ -170,7 +171,6 @@ class MoleculeView extends GenericView {
             }
         }
         this.setState(prevState => ({value: value_list}))
-
     }
 
 

From 53448c9d84e8c980afb659ef3a47e64b0e0e209e Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 14:46:39 +0100
Subject: [PATCH 15/21] Update

---
 js/components/moleculeView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 0d9833722..f96feac07 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -183,7 +183,7 @@ class MoleculeView extends GenericView {
             <div style={this.current_style}>{svg_image}</div>
             <div>{this.props.data.protein_code}</div>
               <ButtonToolbar>
-                  <ToggleButtonGroup type="checkbox"
+                  <ToggleButtonGroup vertical block type="checkbox"
                                      value={this.state.value}
                                      onChange={this.handleChange}>
                       <ToggleButton value={1}>Complex</ToggleButton>

From d4272bd8b25dbb28865fe2b3621cb12f5efd98ff Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 14:59:30 +0100
Subject: [PATCH 16/21] Update

---
 js/components/moleculeView.js     | 2 +-
 js/containers/fraggleBoxHolder.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index f96feac07..c146b8602 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -183,7 +183,7 @@ class MoleculeView extends GenericView {
             <div style={this.current_style}>{svg_image}</div>
             <div>{this.props.data.protein_code}</div>
               <ButtonToolbar>
-                  <ToggleButtonGroup vertical block type="checkbox"
+                  <ToggleButtonGroup vertical type="checkbox"
                                      value={this.state.value}
                                      onChange={this.handleChange}>
                       <ToggleButton value={1}>Complex</ToggleButton>
diff --git a/js/containers/fraggleBoxHolder.js b/js/containers/fraggleBoxHolder.js
index 5a0a228a5..f75248595 100644
--- a/js/containers/fraggleBoxHolder.js
+++ b/js/containers/fraggleBoxHolder.js
@@ -41,7 +41,6 @@ class FraggleBox extends Component {
                     <NGLView div_id="summary_view" height="200px"/>
                     <MolGroupSlider />
                     <MoleculeList style={{overflow:scroll}}/>
-                    <Image src={ require('../img/Fragglebox_logo_v0.2.png')} responsive rounded />
                 </Col>
                 <Col xs={5} md={5} >
                     <NGLView div_id="major_view" height="600px"/>

From a5385c8358709e9c1e0cf0789c3bdd32012bf4ca Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 15:02:01 +0100
Subject: [PATCH 17/21] Update

---
 js/components/generalComponents.js | 2 +-
 js/components/moleculeView.js      | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js
index 1dda93a9b..f02827da6 100644
--- a/js/components/generalComponents.js
+++ b/js/components/generalComponents.js
@@ -172,7 +172,7 @@ export class GenericView extends React.Component{
         '<circle cx="6.6987298" cy="25" r="5" transform="translate(5 5)"/> ' +
         '<circle cx="25" cy="6.6987298" r="5" transform="translate(5 5)"/> ' +
         '<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 55 55" to="360 55 55" dur="3s" repeatCount="indefinite" /> </g> ' +
-        '</svg>'}
+        '</svg>', value: [], vectorOn: false, complexOn:false}
         this.selected_style = {width: props.width.toString+'px', height: props.height.toString()+'px', backgroundColor: "#B7C185"}
         this.conf_on_style = {borderStyle: "solid"}
         this.comp_on_style = {backgroundColor: "#B7C185"}
diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index c146b8602..1abbccd82 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -30,9 +30,6 @@ class MoleculeView extends GenericView {
         this.base_url = base_url;
         this.url = new URL(base_url + '/api/molimg/' + this.props.data.id + "/")
         this.key = "mol_image"
-        this.state.value = []
-        this.state.vectorOn = false
-        this.state.complexOn = false
         this.colourToggle = this.getRandomColor();
     }
 

From f730216dc85ed79153a8bab4c597642494723482 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 15:03:05 +0100
Subject: [PATCH 18/21] Update

---
 js/components/moleculeView.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 1abbccd82..b7f75a300 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -180,7 +180,7 @@ class MoleculeView extends GenericView {
             <div style={this.current_style}>{svg_image}</div>
             <div>{this.props.data.protein_code}</div>
               <ButtonToolbar>
-                  <ToggleButtonGroup vertical type="checkbox"
+                  <ToggleButtonGroup type="checkbox"
                                      value={this.state.value}
                                      onChange={this.handleChange}>
                       <ToggleButton value={1}>Complex</ToggleButton>

From 54b5fe3d62642b5c4339270811e3d834aa1a5eff Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 15:18:14 +0100
Subject: [PATCH 19/21] Update

---
 js/components/moleculeView.js | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index b7f75a300..990b17849 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -131,15 +131,14 @@ class MoleculeView extends GenericView {
         var added = value.filter(function(i) {return old.indexOf(i)<0;})[0]
         var changed = [removed,added];
         if (changed.indexOf(1)>-1){
-            this.onComplex();
+            this.onComplex(new_list);
         }
         if (changed.indexOf(2)>-1){
-            this.handleClick();
+            this.handleClick(new_list);
         }
         if (changed.indexOf(3)>-1){
-            this.onVector();
+            this.onVector(new_list);
         }
-        this.setState({ value: new_list });
     }
 
     componentDidMount() {
@@ -196,8 +195,13 @@ class MoleculeView extends GenericView {
         return colourList[this.props.data.id % colourList.length];
     }
 
-    handleClick(e) {
-        this.setState(prevState => ({isToggleOn: !prevState.isToggleOn}))
+    handleClick(new_list=undefined) {
+        if(new_list!=undefined){
+            this.setState(prevState => ({isToggleOn: !prevState.isToggleOn, value: new_list}));
+        }
+        else{
+            this.setState(prevState => ({isToggleOn: !prevState.isToggleOn}))
+        }
         if(this.state.isToggleOn){
             this.props.deleteObject(Object.assign({display_div: "major_view"}, this.generateMolObject()))
             this.props.removeFromFragmentDisplayList(this.generateMolId())
@@ -208,8 +212,13 @@ class MoleculeView extends GenericView {
         }
     }
 
-    onComplex() {
-        this.setState(prevState => ({complexOn: !prevState.complexOn}))
+    onComplex(new_list=undefined) {
+        if(new_list!=undefined) {
+            this.setState(prevState => ({complexOn: !prevState.complexOn, value: new_list}))
+        }
+        else{
+            this.setState(prevState => ({complexOn: !prevState.complexOn}))
+        }
         if(this.state.complexOn){
             this.props.deleteObject(Object.assign({display_div: "major_view"}, this.generateObject()))
             this.props.removeFromComplexList(this.generateMolId())
@@ -220,8 +229,13 @@ class MoleculeView extends GenericView {
         }
     }
 
-    onVector() {
-        this.setState(prevState => ({vectorOn: !prevState.vectorOn}))
+    onVector(new_list=undefined) {
+        if(new_list!=undefined) {
+            this.setState(prevState => ({vectorOn: !prevState.vectorOn, value: new_list}))
+        }
+        else{
+            this.setState(prevState => ({vectorOn: !prevState.vectorOn}))
+        }
         if(this.state.vectorOn) {
             this.props.vector_list.forEach(item => this.props.deleteObject(Object.assign({display_div: "major_view"}, item)));
             this.props.setMol("");

From cba2dd0d2436439bd6f57e870936d3074555d3ad Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 16:00:21 +0100
Subject: [PATCH 20/21] Update

---
 js/components/moleculeView.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 990b17849..823f0eace 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -158,18 +158,6 @@ class MoleculeView extends GenericView {
         this.setState(prevState => ({value: value_list, complexOn: complexOn, isToggleOn: thisToggleOn}))
     }
 
-    componentWillReceiveProps(nextProps){
-        var value_list = this.state.value.slice();
-        if(nextProps.to_query!=this.props.data.smiles){
-            var index = value_list.indexOf(3);
-            if (index > -1) {
-                value_list.splice(index, 1);
-            }
-        }
-        this.setState(prevState => ({value: value_list}))
-    }
-
-
     render() {
         const svg_image = <SVGInline svg={this.state.img_data}/>;
         const selected_style = {width: this.props.width.toString+'px',

From 917af251d2d957cab9de570d197005d3dda76693 Mon Sep 17 00:00:00 2001
From: abradle <you@example.com>
Date: Fri, 14 Sep 2018 16:01:13 +0100
Subject: [PATCH 21/21] Update

---
 js/components/moleculeView.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js
index 823f0eace..b96816cd7 100644
--- a/js/components/moleculeView.js
+++ b/js/components/moleculeView.js
@@ -158,6 +158,18 @@ class MoleculeView extends GenericView {
         this.setState(prevState => ({value: value_list, complexOn: complexOn, isToggleOn: thisToggleOn}))
     }
 
+    componentWillReceiveProps(nextProps){
+        var value_list = this.state.value.slice();
+        if(nextProps.to_query!=this.props.data.smiles){
+            var index = value_list.indexOf(3);
+            if (index > -1) {
+                value_list.splice(index, 1);
+                this.setState(prevState => ({value: value_list}))
+            }
+        }
+    }
+
+
     render() {
         const svg_image = <SVGInline svg={this.state.img_data}/>;
         const selected_style = {width: this.props.width.toString+'px',