From 0ce863278c9541cc71fee52982c02ad1006089af Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 14:39:15 -0400 Subject: [PATCH 001/147] DEV --- js/components/moleculeView.js | 7 +++++++ js/tests/apiReducers.test.js | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index ea33ec3a8..fe7d72b56 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -76,6 +76,13 @@ class MoleculeView extends GenericView { outList.push(this.generateCylinderObject(linker[key][0], linker[key][1],key.split("_")[0],colour)) } + + var rings = out_data["ring"] + for (var key in ring){ + outList.push(this.generateCylinderObject(ring[key][0], + ring[key][3],key.split("_")[0],colour)) + } + return outList; } diff --git a/js/tests/apiReducers.test.js b/js/tests/apiReducers.test.js index 2b6b36566..3ded8436a 100644 --- a/js/tests/apiReducers.test.js +++ b/js/tests/apiReducers.test.js @@ -17,7 +17,7 @@ function getInitialState(){ group_id: undefined, isFetching: false, group_type: "MC" -} + } } From 919f35f5e27a187656041b2f822a151c1a497d4a Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 14:40:54 -0400 Subject: [PATCH 002/147] DEV --- 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 fe7d72b56..880c2b370 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -78,7 +78,7 @@ class MoleculeView extends GenericView { } var rings = out_data["ring"] - for (var key in ring){ + for (var key in rings){ outList.push(this.generateCylinderObject(ring[key][0], ring[key][3],key.split("_")[0],colour)) } From 5081474f2e8255232bf435ef6328052dc8506233 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 14:43:23 -0400 Subject: [PATCH 003/147] DEV --- js/components/moleculeView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 880c2b370..83d07c9c3 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -79,8 +79,8 @@ class MoleculeView extends GenericView { var rings = out_data["ring"] for (var key in rings){ - outList.push(this.generateCylinderObject(ring[key][0], - ring[key][3],key.split("_")[0],colour)) + outList.push(this.generateCylinderObject(rings[key][0], + rings[key][3],key.split("_")[0],colour)) } return outList; From feebb23329d6d6bb7342d216e94bf773e242c1e3 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:01:28 -0400 Subject: [PATCH 004/147] DEV --- 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 83d07c9c3..847df250b 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -80,7 +80,7 @@ class MoleculeView extends GenericView { var rings = out_data["ring"] for (var key in rings){ outList.push(this.generateCylinderObject(rings[key][0], - rings[key][3],key.split("_")[0],colour)) + rings[key][2],key.split("_")[0],colour)) } return outList; From 5d75fcb07770ad801b02084fa6913cd3b9a3a12b Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:14:47 -0400 Subject: [PATCH 005/147] DEV --- js/components/moleculeView.js | 3 +-- js/components/nglComponents.js | 7 ++++++- js/components/overallComponents.js | 3 ++- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 847df250b..2d82551b0 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -105,8 +105,7 @@ class MoleculeView extends GenericView { "colour": colour } } - - + generateMolObject(){ // Get the data const data = this.props.data; diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 46b250f0d..3aec2f7fa 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -20,7 +20,12 @@ export class NGLView extends React.Component { super(props); // Create NGL Stage object this.div_id = "viewport"; - this.height = "600px"; + if(props.height){ + this.height = props.height; + } + else{ + this.height = "600px"; + } this.interval = 300; this.focus_var = 95; this.stage = undefined; diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index b6e6162bf..c5361acea 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -26,10 +26,11 @@ class Tindspect extends Component { + - + From 93fa77742a30fe219b1ad051a025362933e31eb6 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:16:27 -0400 Subject: [PATCH 006/147] DEV --- js/components/overallComponents.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index c5361acea..423ae5b5c 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -25,12 +25,12 @@ class Tindspect extends Component { - - + + - - + + From 69fae493426e542071f36acf817e8de6e649cda8 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:18:24 -0400 Subject: [PATCH 007/147] DEV --- js/components/nglComponents.js | 7 ++++++- js/components/overallComponents.js | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 3aec2f7fa..3f08d13de 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -19,7 +19,12 @@ export class NGLView extends React.Component { constructor(props) { super(props); // Create NGL Stage object - this.div_id = "viewport"; + if (this.props.div_id){ + this.div_id = this.props.div_id; + } + else{ + this.div_id = "viewport"; + } if(props.height){ this.height = props.height; } diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index 423ae5b5c..0b9bdc71d 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -30,7 +30,7 @@ class Tindspect extends Component { - + From d4c11245f179f598cfb51850c24d25192f27c0e9 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:26:32 -0400 Subject: [PATCH 008/147] DEV --- js/reducers/reducers.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/reducers/reducers.js b/js/reducers/reducers.js index d20d169d0..8a03e5c68 100644 --- a/js/reducers/reducers.js +++ b/js/reducers/reducers.js @@ -18,7 +18,8 @@ const rootReducer = combineReducers({ burgerMenu, selectionReducers, loadingBar: loadingBarReducer, - nglReducers + overviewNgl: nglReducers, + detailNgl: nglReducers, })   export default rootReducer; \ No newline at end of file From 45016d714844c0c61fe70f0d81d974f478814ce1 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:27:45 -0400 Subject: [PATCH 009/147] DEV --- js/reducers/reducers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/reducers/reducers.js b/js/reducers/reducers.js index 8a03e5c68..cb6e766c7 100644 --- a/js/reducers/reducers.js +++ b/js/reducers/reducers.js @@ -19,7 +19,7 @@ const rootReducer = combineReducers({ selectionReducers, loadingBar: loadingBarReducer, overviewNgl: nglReducers, - detailNgl: nglReducers, + nglReducers, })   export default rootReducer; \ No newline at end of file From 8131cfed2b1034a7cb5f7e2fa09c3f9326fb04d4 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:41:20 -0400 Subject: [PATCH 010/147] DEV --- js/components/nglComponents.js | 40 ++++++++++++++++++++++-------- js/components/overallComponents.js | 2 +- 2 files changed, 30 insertions(+), 12 deletions(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 3f08d13de..1057a9741 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -38,6 +38,7 @@ export class NGLView extends React.Component { this.renderComplex = this.renderComplex.bind(this); this.generateObject = this.generateObject.bind(this); this.showPick = this.showPick.bind(this); + this.typeCheck = this.typeCheck.bind(this); } showPick (stage, pickingProxy) { @@ -164,6 +165,17 @@ export class NGLView extends React.Component { } + typeCheck(nglObject){ + var expectedDiv + if(nglObject["OBJECT_TYPE"] in [nglObjectTypes.ARROW,nglObjectTypes.COMPLEX, nglObjectTypes.CYLINDER,nglObjectTypes.MOLECULE]){ + expectedDiv = "major_view" + } + if(nglObject["OBJECT_TYPE"] in [nglObjectTypes.SPHERE, nglObjectTypes.PROTEIN]){ + expectedDiv = "summary_view" + } + return this.div_id==expectedDiv + } + /** * Function to deal with the logic of showing molecules @@ -171,22 +183,28 @@ export class NGLView extends React.Component { renderDisplay() { for(var nglKey in this.props.objectsToLoad){ var nglObject = this.props.objectsToLoad[nglKey]; - this.generateObject(nglKey, nglObject); - this.props.objectLoading(nglObject); - this.props.showLoading() + if (this.typeCheck(nglObject)) { + this.generateObject(nglKey, nglObject); + this.props.objectLoading(nglObject); + this.props.showLoading() + } } for(var nglKey in this.props.objectsToDelete){ - var comps = this.stage.getComponentsByName(nglKey) - for (var component in comps.list){ - this.stage.removeComponent(comps.list[component]); + if (this.typeCheck(nglObject)) { + var comps = this.stage.getComponentsByName(nglKey) + for (var component in comps.list) { + this.stage.removeComponent(comps.list[component]); + } + this.props.deleteObjectSuccess(this.props.objectsToDelete[nglKey]) } - this.props.deleteObjectSuccess(this.props.objectsToDelete[nglKey]) } for(var nglKey in this.props.objectsLoading){ - if(this.stage.getComponentsByName(nglKey).list.length>0){ - var nglObject = this.props.objectsLoading[nglKey]; - this.props.loadObjectSuccess(nglObject); - this.props.hideLoading() + if (this.typeCheck(nglObject)) { + if (this.stage.getComponentsByName(nglKey).list.length > 0) { + var nglObject = this.props.objectsLoading[nglKey]; + this.props.loadObjectSuccess(nglObject); + this.props.hideLoading() + } } } } diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index 0b9bdc71d..2c2f7811b 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -26,7 +26,7 @@ class Tindspect extends Component { - + From 2df290e5d17ed20b91c95e218267571467804161 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:44:41 -0400 Subject: [PATCH 011/147] DEV --- js/components/overallComponents.js | 1 - js/reducers/reducers.js | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index 2c2f7811b..446f74261 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -1,7 +1,6 @@ import React, { Component } from 'react' import { connect } from 'react-redux' import { Row, Col, Grid, Well } from 'react-bootstrap'; -import TargetList from './targetList' import NGLView from './nglComponents'; import MolGroupList from './molGroupList'; import MoleculeList from './moleculeList'; diff --git a/js/reducers/reducers.js b/js/reducers/reducers.js index cb6e766c7..d20d169d0 100644 --- a/js/reducers/reducers.js +++ b/js/reducers/reducers.js @@ -18,8 +18,7 @@ const rootReducer = combineReducers({ burgerMenu, selectionReducers, loadingBar: loadingBarReducer, - overviewNgl: nglReducers, - nglReducers, + nglReducers })   export default rootReducer; \ No newline at end of file From 56e3f0bfcd3a81cd88d4fd4b6a334e1204982cf3 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:46:27 -0400 Subject: [PATCH 012/147] DEV --- js/components/targetList.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/components/targetList.js b/js/components/targetList.js index 882a64172..32c0c5df1 100644 --- a/js/components/targetList.js +++ b/js/components/targetList.js @@ -46,6 +46,7 @@ class TargetList extends GenericList { var prot_to_load = targetData.protein_set[0] // var out_object = { + "name": "PROTEIN_"+prot_to_load.toString(); "prot_url": this.getViewUrl(prot_to_load,"prot_from_pk"), "OBJECT_TYPE": nglObjectTypes.PROTEIN } From acf8d5eb0e005a4e9831ac108e699eb4793d3d58 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:46:43 -0400 Subject: [PATCH 013/147] DEV --- js/components/targetList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/targetList.js b/js/components/targetList.js index 32c0c5df1..1d1a0dff4 100644 --- a/js/components/targetList.js +++ b/js/components/targetList.js @@ -46,7 +46,7 @@ class TargetList extends GenericList { var prot_to_load = targetData.protein_set[0] // var out_object = { - "name": "PROTEIN_"+prot_to_load.toString(); + "name": "PROTEIN_"+prot_to_load.toString(), "prot_url": this.getViewUrl(prot_to_load,"prot_from_pk"), "OBJECT_TYPE": nglObjectTypes.PROTEIN } From 5a37e1ce2ac2f75e37cc57898b0fe5d421735996 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:51:37 -0400 Subject: [PATCH 014/147] DEV --- js/components/nglComponents.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 1057a9741..c8d036c9c 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -167,12 +167,19 @@ export class NGLView extends React.Component { typeCheck(nglObject){ var expectedDiv - if(nglObject["OBJECT_TYPE"] in [nglObjectTypes.ARROW,nglObjectTypes.COMPLEX, nglObjectTypes.CYLINDER,nglObjectTypes.MOLECULE]){ - expectedDiv = "major_view" + var majorList = [nglObjectTypes.ARROW,nglObjectTypes.COMPLEX, nglObjectTypes.CYLINDER,nglObjectTypes.MOLECULE] + var summaryList = [nglObjectTypes.SPHERE, nglObjectTypes.PROTEIN] + for (var index in majorList) { + if (nglObject["OBJECT_TYPE"] == majorList[index]) { + expectedDiv = "major_view" + } } - if(nglObject["OBJECT_TYPE"] in [nglObjectTypes.SPHERE, nglObjectTypes.PROTEIN]){ - expectedDiv = "summary_view" + for (var index in summaryList) { + if (nglObject["OBJECT_TYPE"] == summaryList[index]) { + expectedDiv = "summary_view" + } } + return this.div_id==expectedDiv } From 1e5be460dc1319cb2ae5480e752975512d463e64 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:54:27 -0400 Subject: [PATCH 015/147] DEV --- js/components/nglComponents.js | 8 +------- js/components/overallComponents.js | 1 + 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index c8d036c9c..74e8574c4 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -179,7 +179,6 @@ export class NGLView extends React.Component { expectedDiv = "summary_view" } } - return this.div_id==expectedDiv } @@ -217,13 +216,8 @@ export class NGLView extends React.Component { } render(){ - return
-
- -
-
+ return
-
} } diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index 446f74261..f2e765482 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -18,6 +18,7 @@ class Tindspect extends Component { return (
+
From 2dfb0c952d2bd2fd8f4e34bc79a9f04a0386c253 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:55:12 -0400 Subject: [PATCH 016/147] DEV --- js/components/nglComponents.js | 1 - js/components/overallComponents.js | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 74e8574c4..6b4ceedbd 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -11,7 +11,6 @@ import * as nglObjectTypes from '../components/nglObjectTypes' import * as listTypes from '../components/listTypes' import { showLoading, hideLoading } from 'react-redux-loading-bar' import * as selectionActions from '../actions/selectionActions' -import LoadingBar from 'react-redux-loading-bar' export class NGLView extends React.Component { diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index f2e765482..58e3c736c 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -7,6 +7,8 @@ import MoleculeList from './moleculeList'; import SummaryView from './summaryView'; import Header from './header';  import {MyMenu} from './menuView' +import LoadingBar from 'react-redux-loading-bar' + class Tindspect extends Component { From 7b3f63414fdab8dbc3cab1d85a7c6d0458ba6400 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 15:58:58 -0400 Subject: [PATCH 017/147] DEV --- js/components/nglComponents.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 6b4ceedbd..822136f69 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -195,6 +195,7 @@ export class NGLView extends React.Component { } } for(var nglKey in this.props.objectsToDelete){ + var nglObject = this.props.objectsToDelete[nglKey] if (this.typeCheck(nglObject)) { var comps = this.stage.getComponentsByName(nglKey) for (var component in comps.list) { @@ -204,6 +205,7 @@ export class NGLView extends React.Component { } } for(var nglKey in this.props.objectsLoading){ + var nglObject = this.props.objectsLoading[nglKey] if (this.typeCheck(nglObject)) { if (this.stage.getComponentsByName(nglKey).list.length > 0) { var nglObject = this.props.objectsLoading[nglKey]; From cbe88e1e726d9257562dadd1c3fc6abc2b8bb2ae Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 16:02:31 -0400 Subject: [PATCH 018/147] DEV --- js/components/moleculeView.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 2d82551b0..521404917 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -105,7 +105,7 @@ class MoleculeView extends GenericView { "colour": colour } } - + generateMolObject(){ // Get the data const data = this.props.data; @@ -133,17 +133,19 @@ class MoleculeView extends GenericView { handleClick(e){ this.setState(prevState => ({isToggleOn: !prevState.isToggleOn})) if(this.state.isToggleOn){ - //this.props.removeFromToBuyList(this.props.data); + + this.props.deleteObject(this.generateMolObject()) + if(e.shiftKey) { this.props.deleteObject(this.generateObject()) } } else{ - this.getVects() - this.getGraph() - // this.props.appendToBuyList(this.props.data); + this.props.loadObject(this.generateMolObject()) if(e.shiftKey) { this.props.loadObject(this.generateObject()) + this.getVects() + this.getGraph() } } } From 77b0cf6697e28fddb777bee32355ec8adf28910b Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 17:12:27 -0400 Subject: [PATCH 019/147] DEV --- js/actions/actonTypes.js | 2 +- js/actions/selectionActions.js | 11 ++++++- js/components/moleculeView.js | 55 +++++++++++++++++--------------- js/reducers/selectionReducers.js | 8 ++++- 4 files changed, 48 insertions(+), 28 deletions(-) diff --git a/js/actions/actonTypes.js b/js/actions/actonTypes.js index baae496bd..521e7bbce 100644 --- a/js/actions/actonTypes.js +++ b/js/actions/actonTypes.js @@ -44,4 +44,4 @@ export const POST_TO_API_FAILURE = 'POST_TO_API_FAILURE'; export const GET_FULL_GRAPH = 'GET_FULL_GRAPH'; export const GOT_FULL_GRAPH = 'GOT_FULL_GRAPH'; export const SELECT_VECTOR = 'SELECT_VECTOR'; - +export const SET_VECTOR_LIST = 'SET_VECTOR_LIST'; diff --git a/js/actions/selectionActions.js b/js/actions/selectionActions.js index f6d5381ec..8f2af3a62 100644 --- a/js/actions/selectionActions.js +++ b/js/actions/selectionActions.js @@ -2,7 +2,7 @@ * Created by abradley on 15/03/2018. */ -import {SET_TO_BUY_LIST, APPEND_TO_BUY_LIST, REMOVE_FROM_TO_BUY_LIST, GET_FULL_GRAPH, GOT_FULL_GRAPH, SELECT_VECTOR} from './actonTypes' +import {SET_TO_BUY_LIST, APPEND_TO_BUY_LIST, REMOVE_FROM_TO_BUY_LIST, GET_FULL_GRAPH, GOT_FULL_GRAPH, SET_VECTOR_LIST, SELECT_VECTOR} from './actonTypes' export const setToBuyList = function (to_buy_list){ console.log("ACTIONS: "+ to_buy_list) @@ -46,6 +46,15 @@ export const gotFullGraph = function (result){ } } +export const setVectorList = function (vectList){ + console.log("ACTIONS: "+ vectList) + return { + type: SET_VECTOR_LIST, + vector_list: vectList + } + +} + export const selectVector = function (vector){ console.log("ACTIONS: "+ vector) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 521404917..b9595e03b 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -20,7 +20,6 @@ class MoleculeView extends GenericView { this.generateMolObject = this.generateMolObject.bind(this); this.getGraph = this.getGraph.bind(this); this.getViewUrl = this.getViewUrl.bind(this); - this.getVects = this.getVects.bind(this); var base_url = window.location.protocol + "//" + window.location.host this.url = new URL(base_url + '/viewer/img_from_mol_pk/' + this.props.data.id + "/") } @@ -33,27 +32,6 @@ class MoleculeView extends GenericView { } - getGraph(){ - // Set this - this.props.getFullGraph(this.props.data); - // Do the query - fetch(this.getViewUrl(this.props.data.id,"get_graph_from_pk")) - .then( - response => response.text(), - error => console.log('An error occurred.', error) - ) - .then(json => this.props.gotFullGraph(json)) - } - - getVects(){ - - fetch(this.getViewUrl(this.props.data.id,"get_vects_from_pk")) - .then( - response => response.json(), - error => console.log('An error occurred.', error) - ) - .then(json => this.generateObjectList(json).forEach(item => this.props.loadObject(item))) - } /** * Convert the JSON into a list of arrow objects @@ -82,7 +60,6 @@ class MoleculeView extends GenericView { outList.push(this.generateCylinderObject(rings[key][0], rings[key][2],key.split("_")[0],colour)) } - return outList; } @@ -130,6 +107,14 @@ class MoleculeView extends GenericView { } + handleVector(json){ + + var objList = this.generateObjectList(json); + objList.forEach(item => this.props.loadObject(item)); + this.props.setVectorList(objList) + + } + handleClick(e){ this.setState(prevState => ({isToggleOn: !prevState.isToggleOn})) if(this.state.isToggleOn){ @@ -138,14 +123,33 @@ class MoleculeView extends GenericView { if(e.shiftKey) { this.props.deleteObject(this.generateObject()) + + } } else{ this.props.loadObject(this.generateMolObject()) if(e.shiftKey) { this.props.loadObject(this.generateObject()) - this.getVects() - this.getGraph() + + fetch(this.getViewUrl(this.props.data.id,"get_vects_from_pk")) + .then( + response => response.json(), + error => console.log('An error occurred.', error) + ) + .then(json => this.handleVector(json)) + + // Set this + this.props.getFullGraph(this.props.data); + // Do the query + fetch(this.getViewUrl(this.props.data.id,"get_graph_from_pk")) + .then( + response => response.text(), + error => console.log('An error occurred.', error) + ) + .then(json => this.props.gotFullGraph(json)) + + } } } @@ -160,6 +164,7 @@ function mapStateToProps(state) { } const mapDispatchToProps = { getFullGraph: selectionActions.getFullGraph, + setVectorList: selectionActions.setVectorList, gotFullGraph: selectionActions.gotFullGraph, transferList: apiActions.transferList, deleteObject: nglLoadActions.deleteObject, diff --git a/js/reducers/selectionReducers.js b/js/reducers/selectionReducers.js index 385382bb1..7611f17cf 100644 --- a/js/reducers/selectionReducers.js +++ b/js/reducers/selectionReducers.js @@ -9,6 +9,7 @@ import * as actions from '../actions/actonTypes' const INITIALSTATE = { to_buy_list: [], to_select: {}, + vector_list: [], this_vector_list: {}, querying: false, to_query: undefined @@ -31,7 +32,12 @@ export default function selectionReducers(state = INITIALSTATE, action) { to_buy_list.push(action.item) return Object.assign({}, state, { to_buy_list: to_buy_list - }); + }) + + case actions.SET_VECTOR_LIST: + return Object.assign({}, state, { + vector_list: action.vector_list + }) case actions.REMOVE_FROM_TO_BUY_LIST: var to_buy_list = state.to_buy_list From 31b7b9c7233ff60e3d93e2e172ca228ee6476de4 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 17:15:12 -0400 Subject: [PATCH 020/147] DEV --- 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 b9595e03b..04b4e4ab3 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -18,7 +18,7 @@ class MoleculeView extends GenericView { super(props); this.generateObject = this.generateObject.bind(this); this.generateMolObject = this.generateMolObject.bind(this); - this.getGraph = this.getGraph.bind(this); + this.handleVector = this.handleVector.bind(this); this.getViewUrl = this.getViewUrl.bind(this); var base_url = window.location.protocol + "//" + window.location.host this.url = new URL(base_url + '/viewer/img_from_mol_pk/' + this.props.data.id + "/") From 2902d786ab045b8036bf1d0855516ceac5949da2 Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 17:18:03 -0400 Subject: [PATCH 021/147] DEV --- js/components/moleculeView.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 04b4e4ab3..683666fbb 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -120,18 +120,15 @@ class MoleculeView extends GenericView { if(this.state.isToggleOn){ this.props.deleteObject(this.generateMolObject()) - if(e.shiftKey) { this.props.deleteObject(this.generateObject()) - - + this.props.vector_list.forEach(item => this.props.deleteObject(item)); } } else{ this.props.loadObject(this.generateMolObject()) if(e.shiftKey) { this.props.loadObject(this.generateObject()) - fetch(this.getViewUrl(this.props.data.id,"get_vects_from_pk")) .then( response => response.json(), @@ -159,6 +156,7 @@ function mapStateToProps(state) { return { currentList: state.apiReducers.possibleMols, binList: state.apiReducers.binnedMols, + vector_list: state.selectionReducers.vector_list, newListTwo: state.apiReducers.chosenMols, } } From 2e4e05089c2ff98bd93d837d5c23ef135730127c Mon Sep 17 00:00:00 2001 From: abradle Date: Wed, 21 Mar 2018 18:42:12 -0400 Subject: [PATCH 022/147] DEV --- js/components/summaryView.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/js/components/summaryView.js b/js/components/summaryView.js index 46a1eb978..8e0691069 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -3,7 +3,7 @@ */ import React from 'react'; import { connect } from 'react-redux' -import { Button } from 'react-bootstrap' +import { Button, Well } from 'react-bootstrap' import * as selectionActions from '../actions/selectionActions' import CompoundList from './compoundList'; @@ -67,10 +67,12 @@ class SummaryView extends React.Component{ render(){ return
-

Number picked: {this.state.list_len}

-

Number vectors explored: {this.state.num_vectors}

-

Number series explored: {this.state.num_series}

-

Estimated cost: £{this.state.cost}

+ +

Number picked: {this.state.list_len}

+

Number vectors explored: {this.state.num_vectors}

+

Number series explored: {this.state.num_series}

+

Estimated cost: £{this.state.cost}

+
From c82312e8eb15b9dfdcf4c9f1f7b8472155bfd9dd Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 09:06:21 -0400 Subject: [PATCH 023/147] DEV --- js/components/nglComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 822136f69..4ed55ce41 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -100,7 +100,7 @@ export class NGLView extends React.Component { } else if(input_dict["OBJECT_TYPE"]==nglObjectTypes.CYLINDER){ var colour = [1,0,0]; - var radius = 1.0; + var radius = 0.7; var coords = input_dict["coords"]; var shape = new Shape( object_name ); shape.addCylinder(input_dict["start"],input_dict["end"], colour, radius); From d210e9801e9d0722efa66ea220d0e40606398e7e Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 09:27:39 -0400 Subject: [PATCH 024/147] DEV --- js/components/nglComponents.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 4ed55ce41..b8aabe098 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -71,6 +71,7 @@ export class NGLView extends React.Component { this.renderDisplay(); setInterval(this.renderDisplay,this.interval) this.stage.mouseControls.add("clickPick-left",this.showPick); + this.old_mol_group_on = -1; } generateObject(object_name, input_dict){ @@ -151,7 +152,6 @@ export class NGLView extends React.Component { } renderProtein(ol){ - var cs = ol[0] var stage = ol[1]; var focus_var = ol[2]; @@ -159,8 +159,6 @@ export class NGLView extends React.Component { // Set the object name var comp = stage.addComponentFromObject(cs) comp.addRepresentation("cartoon") - - } @@ -186,6 +184,7 @@ export class NGLView extends React.Component { * Function to deal with the logic of showing molecules */ renderDisplay() { + for(var nglKey in this.props.objectsToLoad){ var nglObject = this.props.objectsToLoad[nglKey]; if (this.typeCheck(nglObject)) { @@ -214,6 +213,11 @@ export class NGLView extends React.Component { } } } + if(this.props.mol_group_on != this.old_mol_group_on){ + var comps = this.stage.getComponentsByName("MOLGROUPS_"+this.props.mol_group_on.toString()); + this.old_mol_group_on = this.props.mol_group_on + } + } render(){ @@ -239,6 +243,7 @@ const mapDispatchToProps = { hideLoading: hideLoading, showLoading: showLoading, objectLoading: nglLoadActions.objectLoading, + loadObject: nglLoadActions.loadObject loadObjectSuccess: nglLoadActions.loadObjectSuccess, loadObjectFailure: nglLoadActions.loadObjectFailure, deleteObjectSuccess: nglLoadActions.deleteObjectSuccess From 8ada02908164a63040335d10271ad68abe089835 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 09:28:04 -0400 Subject: [PATCH 025/147] DEV --- js/components/nglComponents.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index b8aabe098..84be9be4a 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -243,7 +243,6 @@ const mapDispatchToProps = { hideLoading: hideLoading, showLoading: showLoading, objectLoading: nglLoadActions.objectLoading, - loadObject: nglLoadActions.loadObject loadObjectSuccess: nglLoadActions.loadObjectSuccess, loadObjectFailure: nglLoadActions.loadObjectFailure, deleteObjectSuccess: nglLoadActions.deleteObjectSuccess From 1d73ab1f18b91df88d6fd3b9c533aa5874d21751 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 09:30:05 -0400 Subject: [PATCH 026/147] DEV --- js/components/nglComponents.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 84be9be4a..0ee600034 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -215,7 +215,12 @@ export class NGLView extends React.Component { } if(this.props.mol_group_on != this.old_mol_group_on){ var comps = this.stage.getComponentsByName("MOLGROUPS_"+this.props.mol_group_on.toString()); - this.old_mol_group_on = this.props.mol_group_on + if(comps.list.length==0){ + + } + else{ + this.old_mol_group_on = this.props.mol_group_on + } } } From 21d580e8b65cbefe7616cf90cb14771318e04e2d Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 09:31:01 -0400 Subject: [PATCH 027/147] DEV --- js/components/nglComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 0ee600034..0e29a05a9 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -213,7 +213,7 @@ export class NGLView extends React.Component { } } } - if(this.props.mol_group_on != this.old_mol_group_on){ + if(this.props.mol_group_on && this.props.mol_group_on != this.old_mol_group_on){ var comps = this.stage.getComponentsByName("MOLGROUPS_"+this.props.mol_group_on.toString()); if(comps.list.length==0){ From e32d1e5e7dfcba05b417980637cb8cfe920937d5 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 09:47:33 -0400 Subject: [PATCH 028/147] DEV --- js/components/molGroupList.js | 33 ++++++++++++++++++++++++++++----- js/components/nglComponents.js | 12 +----------- 2 files changed, 29 insertions(+), 16 deletions(-) diff --git a/js/components/molGroupList.js b/js/components/molGroupList.js index 8e959adf2..0c4209412 100644 --- a/js/components/molGroupList.js +++ b/js/components/molGroupList.js @@ -23,14 +23,21 @@ class MolGroupList extends GenericList { return null } - generateObject(data){ + generateObject(data,selected=false){ this.list_type = listType.MOLGROUPS + var sele = "" + var colour = [1,0,0] + if(selected){ + sele = "SELECT" + colour = [0,1,0] + } // Move this out of this var nglObject = { - "OBJECT_TYPE": nglObjectTypes.SPHERE, - "name": this.list_type + "_" + data.id.toString(), - "radius": data.mol_id.length, - "coords": [data.x_com, data.y_com, data.z_com], + "OBJECT_TYPE": nglObjectTypes.SPHERE, + "name": this.list_type + sele + "_" + + data.id.toString(), + "radius": data.mol_id.length, + "colour": colour, + "coords": [data.x_com, data.y_com, data.z_com], } return nglObject } @@ -51,6 +58,22 @@ class MolGroupList extends GenericList { handleOptionChange(changeEvent) { const new_value = changeEvent.target.value; this.props.setObjectOn(new_value); + + var old_data; + var new_data; + for (var index in this.props.object_list){ + if(this.props.object_list[index].id==this.props.object_on){ + old_data = this.props.object_list[index]; + } + if(this.props.object_list[index].id==new_value) { + new_data = this.props.object_list[index]; + } + } + // Delete the two old spheres + this.props.deleteObject(generateObject(new_data)) + this.props.deleteObject(this.generateObject(old_data,true)) + this.props.loadObject(generateObject(new_data,true)) + this.props.loadObject(generateObject(old_data)) } } function mapStateToProps(state) { diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 0e29a05a9..f442f918e 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -77,7 +77,7 @@ export class NGLView extends React.Component { generateObject(object_name, input_dict){ if(input_dict["OBJECT_TYPE"]==nglObjectTypes.SPHERE) { - var colour = [1,0,0]; + var colour = input_dict["colour"]; var radius = input_dict["radius"]; var coords = input_dict["coords"]; var shape = new Shape( object_name ); @@ -213,16 +213,6 @@ export class NGLView extends React.Component { } } } - if(this.props.mol_group_on && this.props.mol_group_on != this.old_mol_group_on){ - var comps = this.stage.getComponentsByName("MOLGROUPS_"+this.props.mol_group_on.toString()); - if(comps.list.length==0){ - - } - else{ - this.old_mol_group_on = this.props.mol_group_on - } - } - } render(){ From b9600fb9f6b7900fe0aa91c3a95655e0eb830961 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 09:48:40 -0400 Subject: [PATCH 029/147] DEV --- js/components/molGroupList.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/components/molGroupList.js b/js/components/molGroupList.js index 0c4209412..652689c7b 100644 --- a/js/components/molGroupList.js +++ b/js/components/molGroupList.js @@ -70,10 +70,10 @@ class MolGroupList extends GenericList { } } // Delete the two old spheres - this.props.deleteObject(generateObject(new_data)) + this.props.deleteObject(this.generateObject(new_data)) this.props.deleteObject(this.generateObject(old_data,true)) - this.props.loadObject(generateObject(new_data,true)) - this.props.loadObject(generateObject(old_data)) + this.props.loadObject(this.generateObject(new_data,true)) + this.props.loadObject(this.generateObject(old_data)) } } function mapStateToProps(state) { From 5a0f6cd4799bd57b5ea4daa66b2caab571a48fee Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 09:56:30 -0400 Subject: [PATCH 030/147] DEV --- js/components/molGroupList.js | 16 -------------- js/components/nglComponents.js | 39 ++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 16 deletions(-) diff --git a/js/components/molGroupList.js b/js/components/molGroupList.js index 652689c7b..b57d58448 100644 --- a/js/components/molGroupList.js +++ b/js/components/molGroupList.js @@ -58,22 +58,6 @@ class MolGroupList extends GenericList { handleOptionChange(changeEvent) { const new_value = changeEvent.target.value; this.props.setObjectOn(new_value); - - var old_data; - var new_data; - for (var index in this.props.object_list){ - if(this.props.object_list[index].id==this.props.object_on){ - old_data = this.props.object_list[index]; - } - if(this.props.object_list[index].id==new_value) { - new_data = this.props.object_list[index]; - } - } - // Delete the two old spheres - this.props.deleteObject(this.generateObject(new_data)) - this.props.deleteObject(this.generateObject(old_data,true)) - this.props.loadObject(this.generateObject(new_data,true)) - this.props.loadObject(this.generateObject(old_data)) } } function mapStateToProps(state) { diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index f442f918e..a16db1628 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -38,6 +38,7 @@ export class NGLView extends React.Component { this.generateObject = this.generateObject.bind(this); this.showPick = this.showPick.bind(this); this.typeCheck = this.typeCheck.bind(this); + this.generateSphere = this.generateSphere.bind(this); } showPick (stage, pickingProxy) { @@ -162,6 +163,25 @@ export class NGLView extends React.Component { } + generateSphere(data,selected=false){ + this.list_type = listType.MOLGROUPS + var sele = "" + var colour = [1,0,0] + if(selected){ + sele = "SELECT" + colour = [0,1,0] + } + // Move this out of this + var nglObject = { + "OBJECT_TYPE": nglObjectTypes.SPHERE, + "name": this.list_type + sele + "_" + + data.id.toString(), + "radius": data.mol_id.length, + "colour": colour, + "coords": [data.x_com, data.y_com, data.z_com], + } + return nglObject + } + typeCheck(nglObject){ var expectedDiv var majorList = [nglObjectTypes.ARROW,nglObjectTypes.COMPLEX, nglObjectTypes.CYLINDER,nglObjectTypes.MOLECULE] @@ -213,6 +233,25 @@ export class NGLView extends React.Component { } } } + if (this.props.mol_group_on && this.props.mol_group_on != this.old_mol_group_on){ + var old_data; + var new_data; + for (var index in this.props.mol_group_list){ + if(this.props.mol_group_list[index].id==this.props.mol_group_on){ + old_data = this.props.mol_group_list[index]; + } + if(this.props.mol_group_list[index].id==new_value) { + new_data = this.props.mol_group_list[index]; + } + } + // Delete the two old spheres + this.props.deleteObject(this.generateSphere(new_data)); + this.props.deleteObject(this.generateSphere(old_data,true)); + this.props.loadObject(this.generateSphere(new_data,true)); + this.props.loadObject(this.generateSphere(old_data)); + this.old_mol_group_on = this.props.mol_group_on; + } + } render(){ From fb0f96f7cbd97ed8a10bd76f29cefd1f001d07ef Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:00:02 -0400 Subject: [PATCH 031/147] DEV --- js/components/nglComponents.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index a16db1628..2b6538288 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -238,17 +238,19 @@ export class NGLView extends React.Component { var new_data; for (var index in this.props.mol_group_list){ if(this.props.mol_group_list[index].id==this.props.mol_group_on){ - old_data = this.props.mol_group_list[index]; - } - if(this.props.mol_group_list[index].id==new_value) { new_data = this.props.mol_group_list[index]; } + if(this.props.mol_group_list[index].id==this.old_mol_group_on) { + old_data = this.props.mol_group_list[index]; + } + } + if (old_data) { + this.props.deleteObject(this.generateSphere(old_data, true)); + this.props.loadObject(this.generateSphere(old_data)); } // Delete the two old spheres this.props.deleteObject(this.generateSphere(new_data)); - this.props.deleteObject(this.generateSphere(old_data,true)); this.props.loadObject(this.generateSphere(new_data,true)); - this.props.loadObject(this.generateSphere(old_data)); this.old_mol_group_on = this.props.mol_group_on; } From c3b4aaea429c0a43021c0c05e541fcfe1c90522d Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:02:45 -0400 Subject: [PATCH 032/147] DEV --- js/components/nglComponents.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 2b6538288..3738f8f4a 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -8,10 +8,11 @@ import { connect } from 'react-redux' import * as apiActions from '../actions/apiActions' import * as nglLoadActions from '../actions/nglLoadActions' import * as nglObjectTypes from '../components/nglObjectTypes' -import * as listTypes from '../components/listTypes' +import * as listTypes from './listTypes' import { showLoading, hideLoading } from 'react-redux-loading-bar' import * as selectionActions from '../actions/selectionActions' + export class NGLView extends React.Component { @@ -164,7 +165,7 @@ export class NGLView extends React.Component { generateSphere(data,selected=false){ - this.list_type = listType.MOLGROUPS + var list_type = listTypes.MOLGROUPS var sele = "" var colour = [1,0,0] if(selected){ @@ -174,7 +175,7 @@ export class NGLView extends React.Component { // Move this out of this var nglObject = { "OBJECT_TYPE": nglObjectTypes.SPHERE, - "name": this.list_type + sele + "_" + + data.id.toString(), + "name": list_type + sele + "_" + + data.id.toString(), "radius": data.mol_id.length, "colour": colour, "coords": [data.x_com, data.y_com, data.z_com], From a4d0adcbe2db93992c8b57bf61caf5f7bde98cf1 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:03:32 -0400 Subject: [PATCH 033/147] DEV --- js/components/nglComponents.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 3738f8f4a..2112268c9 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -282,6 +282,8 @@ const mapDispatchToProps = { objectLoading: nglLoadActions.objectLoading, loadObjectSuccess: nglLoadActions.loadObjectSuccess, loadObjectFailure: nglLoadActions.loadObjectFailure, + deleteObject: nglLoadActions.deleteObject, + loadObject: nglLoadActions.loadObject, deleteObjectSuccess: nglLoadActions.deleteObjectSuccess } export default connect(mapStateToProps, mapDispatchToProps)(NGLView); \ No newline at end of file From d6053cbedb93a2d5a1b95663ac0c0e7fc76b133e Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:24:20 -0400 Subject: [PATCH 034/147] DEV --- js/components/molGroupList.js | 2 +- js/components/nglComponents.js | 2 +- js/components/targetList.js | 4 ++++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/js/components/molGroupList.js b/js/components/molGroupList.js index b57d58448..8e0bba584 100644 --- a/js/components/molGroupList.js +++ b/js/components/molGroupList.js @@ -26,7 +26,7 @@ class MolGroupList extends GenericList { generateObject(data,selected=false){ this.list_type = listType.MOLGROUPS var sele = "" - var colour = [1,0,0] + var colour = [0,0,1] if(selected){ sele = "SELECT" colour = [0,1,0] diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 2112268c9..747f45ca5 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -167,7 +167,7 @@ export class NGLView extends React.Component { generateSphere(data,selected=false){ var list_type = listTypes.MOLGROUPS var sele = "" - var colour = [1,0,0] + var colour = [0,0,1] if(selected){ sele = "SELECT" colour = [0,1,0] diff --git a/js/components/targetList.js b/js/components/targetList.js index 1d1a0dff4..923447feb 100644 --- a/js/components/targetList.js +++ b/js/components/targetList.js @@ -60,6 +60,9 @@ class TargetList extends GenericList { this.props.deleteObject(this.generateTargetObject(this.props.object_on)); } this.props.setObjectOn(new_value); + for(var key in this.props.objectsInView){ + this.props.deleteObject(this.props.objectsInView[key]); + } this.props.loadObject(this.generateTargetObject(new_value)); } @@ -81,6 +84,7 @@ class TargetList extends GenericList { function mapStateToProps(state) { return { + objectsInView: state.nglReducers.objectsInView, object_list: state.apiReducers.target_id_list, object_on: state.apiReducers.target_on } From be5c6f56fe7d7d218f5f60c2cfd30a2cdb0926fd Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:29:20 -0400 Subject: [PATCH 035/147] DEV --- js/components/menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/menu.js b/js/components/menu.js index dcb273a80..1671f99f7 100644 --- a/js/components/menu.js +++ b/js/components/menu.js @@ -1,7 +1,7 @@ /** * Created by abradley on 20/03/2018. */ -import {slide as Menu} from 'react-burger-menu'; +import {pushRotate as Menu} from 'react-burger-menu'; import {decorator as reduxBurgerMenu} from 'redux-burger-menu'; export default reduxBurgerMenu(Menu); From d1990f3c0840e46a034aeaf7acb54f7d56c95601 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:31:51 -0400 Subject: [PATCH 036/147] DEV --- js/components/menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/menu.js b/js/components/menu.js index 1671f99f7..740feeb19 100644 --- a/js/components/menu.js +++ b/js/components/menu.js @@ -1,7 +1,7 @@ /** * Created by abradley on 20/03/2018. */ -import {pushRotate as Menu} from 'react-burger-menu'; +import {push as Menu} from 'react-burger-menu'; import {decorator as reduxBurgerMenu} from 'redux-burger-menu'; export default reduxBurgerMenu(Menu); From 391b860c0ad8baf43e0819e3c97610d5c6c5240f Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:34:09 -0400 Subject: [PATCH 037/147] DEV --- js/components/menu.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/menu.js b/js/components/menu.js index 740feeb19..452a56a02 100644 --- a/js/components/menu.js +++ b/js/components/menu.js @@ -1,7 +1,7 @@ /** * Created by abradley on 20/03/2018. */ -import {push as Menu} from 'react-burger-menu'; +import {fallDown as Menu} from 'react-burger-menu'; import {decorator as reduxBurgerMenu} from 'redux-burger-menu'; export default reduxBurgerMenu(Menu); From 1c75232a075c560046d99c2a4bd7d9ca9caf650e Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:35:04 -0400 Subject: [PATCH 038/147] DEV --- js/components/nglComponents.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 747f45ca5..49e3367e2 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -160,7 +160,8 @@ export class NGLView extends React.Component { var object_name = ol[3] // Set the object name var comp = stage.addComponentFromObject(cs) - comp.addRepresentation("cartoon") + comp.addRepresentation("cartoon"); + this.stage.autoView(); } From 3f7c56a3f801987a021a6b95d1958f249cbb02b4 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:40:52 -0400 Subject: [PATCH 039/147] DEV --- js/components/targetList.js | 22 ++++++++++++---------- package.json | 1 + 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/js/components/targetList.js b/js/components/targetList.js index 923447feb..93b8aef8f 100644 --- a/js/components/targetList.js +++ b/js/components/targetList.js @@ -44,26 +44,28 @@ class TargetList extends GenericList { } // Now deal with this target var prot_to_load = targetData.protein_set[0] - // - var out_object = { - "name": "PROTEIN_"+prot_to_load.toString(), - "prot_url": this.getViewUrl(prot_to_load,"prot_from_pk"), - "OBJECT_TYPE": nglObjectTypes.PROTEIN + if(prot_to_load!=undefined) { + var out_object = { + "name": "PROTEIN_" + prot_to_load.toString(), + "prot_url": this.getViewUrl(prot_to_load, "prot_from_pk"), + "OBJECT_TYPE": nglObjectTypes.PROTEIN + } + return out_object } - return out_object + return undefined; } handleOptionChange(changeEvent) { const new_value = changeEvent.target.value; this.props.setMoleculeList([]); - if (this.props.object_on) { - this.props.deleteObject(this.generateTargetObject(this.props.object_on)); - } this.props.setObjectOn(new_value); for(var key in this.props.objectsInView){ this.props.deleteObject(this.props.objectsInView[key]); } - this.props.loadObject(this.generateTargetObject(new_value)); + var targObject = this.generateTargetObject(new_value); + if(targObject) { + this.props.loadObject(targObject); + } } render() { diff --git a/package.json b/package.json index 92f800143..882139b14 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "nprogress": "^0.2.0", "react": "^16.2.0", "react-bootstrap": "^0.32.1", + "react-bootstrap-switch": "^15.5.3", "react-bootstrap-table-next": "^0.1.4", "react-bootstrap-table2-editor": "^0.1.2", "react-bootstrap-table2-filter": "^0.1.3", From 6435e5683532fc36e4d50d3b4f34835aa3e949bb Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:45:05 -0400 Subject: [PATCH 040/147] DEV --- js/components/molGroupList.js | 19 +++++++++++++++---- js/components/nglComponents.js | 13 ++++++++++++- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/js/components/molGroupList.js b/js/components/molGroupList.js index 8e0bba584..222f784e8 100644 --- a/js/components/molGroupList.js +++ b/js/components/molGroupList.js @@ -24,9 +24,20 @@ class MolGroupList extends GenericList { } generateObject(data,selected=false){ - this.list_type = listType.MOLGROUPS - var sele = "" - var colour = [0,0,1] + this.list_type = listType.MOLGROUPS; + var sele = ""; + var colour = [0,0,1]; + var radius; + if(data.mol_id.length>10){ + radius = 6.0 + } + else if(data.mol_id.length>5){ + radius = 4.0 + } + else{ + radius = 2.0 + } + if(selected){ sele = "SELECT" colour = [0,1,0] @@ -35,7 +46,7 @@ class MolGroupList extends GenericList { var nglObject = { "OBJECT_TYPE": nglObjectTypes.SPHERE, "name": this.list_type + sele + "_" + + data.id.toString(), - "radius": data.mol_id.length, + "radius": radius, "colour": colour, "coords": [data.x_com, data.y_com, data.z_com], } diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 49e3367e2..c62936681 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -169,6 +169,17 @@ export class NGLView extends React.Component { var list_type = listTypes.MOLGROUPS var sele = "" var colour = [0,0,1] + var radius; + if(data.mol_id.length>10){ + radius = 6.0 + } + else if(data.mol_id.length>5){ + radius = 4.0 + } + else{ + radius = 2.0 + } + if(selected){ sele = "SELECT" colour = [0,1,0] @@ -177,7 +188,7 @@ export class NGLView extends React.Component { var nglObject = { "OBJECT_TYPE": nglObjectTypes.SPHERE, "name": list_type + sele + "_" + + data.id.toString(), - "radius": data.mol_id.length, + "radius": radius, "colour": colour, "coords": [data.x_com, data.y_com, data.z_com], } From 6236d2b2630bc753ad8d398fed052db760016999 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:46:12 -0400 Subject: [PATCH 041/147] DEV --- js/components/nglComponents.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index c62936681..f0a51fa2a 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -171,15 +171,15 @@ export class NGLView extends React.Component { var colour = [0,0,1] var radius; if(data.mol_id.length>10){ - radius = 6.0 + radius = 5.0 } else if(data.mol_id.length>5){ - radius = 4.0 + radius = 3.0 } else{ radius = 2.0 } - + if(selected){ sele = "SELECT" colour = [0,1,0] From a5e576dc088a6f3ada2d129204aa04f3f310b3d3 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:51:23 -0400 Subject: [PATCH 042/147] DEV --- js/components/nglComponents.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index f0a51fa2a..72e6a3b20 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -120,7 +120,8 @@ export class NGLView extends React.Component { } else if(input_dict["OBJECT_TYPE"]==nglObjectTypes.PROTEIN){ this.stage.loadFile( input_dict["prot_url"], { name: object_name, ext: "pdb" } ).then( function( comp ){ - comp.addRepresentation( "ribbon", { } ); + comp.addRepresentation( "cartoon", { } ); + comp.autoView(); }); } } @@ -153,17 +154,6 @@ export class NGLView extends React.Component { stage.setFocus(focus_var); } - renderProtein(ol){ - var cs = ol[0] - var stage = ol[1]; - var focus_var = ol[2]; - var object_name = ol[3] - // Set the object name - var comp = stage.addComponentFromObject(cs) - comp.addRepresentation("cartoon"); - this.stage.autoView(); - } - generateSphere(data,selected=false){ var list_type = listTypes.MOLGROUPS From 1a21865550ae829b2a7b09eec170d480025ff6f7 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:52:30 -0400 Subject: [PATCH 043/147] DEV --- js/components/menuView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/menuView.js b/js/components/menuView.js index 09f8fbfc9..7517062dd 100644 --- a/js/components/menuView.js +++ b/js/components/menuView.js @@ -53,7 +53,7 @@ export class MyMenu extends React.Component { ] return ( - + {menuBody} ); From f174a177de2057502d756bdf4600efd8a78cc774 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 10:54:32 -0400 Subject: [PATCH 044/147] DEV --- js/components/overallComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index 58e3c736c..c4962ac20 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -19,7 +19,7 @@ class Tindspect extends Component { render() { return (
- +
From 54f7ad20872d0468d68da80db0de5de68613512c Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 11:11:01 -0400 Subject: [PATCH 045/147] DEV --- js/components/overallComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index c4962ac20..5ec531955 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -19,7 +19,7 @@ class Tindspect extends Component { render() { return (
- + START HERE
From a8bc9c915ddb7f6efac1087a2d93960d290384c1 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:01:07 -0400 Subject: [PATCH 046/147] DEV --- js/components/molGroupList.js | 2 +- js/components/molGroupSlider.js | 54 ++++++++++++++++++++++++++++++ js/components/overallComponents.js | 2 ++ 3 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 js/components/molGroupSlider.js diff --git a/js/components/molGroupList.js b/js/components/molGroupList.js index 222f784e8..6b459bdc7 100644 --- a/js/components/molGroupList.js +++ b/js/components/molGroupList.js @@ -20,7 +20,7 @@ class MolGroupList extends GenericList { } render() { - return null + return null; } generateObject(data,selected=false){ diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js new file mode 100644 index 000000000..72d965acc --- /dev/null +++ b/js/components/molGroupSlider.js @@ -0,0 +1,54 @@ +/** + * Created by abradley on 22/03/2018. + */ +import { ListGroupItem, ListGroup, Col} from 'react-bootstrap'; +import React from 'react'; +import { connect } from 'react-redux' +import * as apiActions from '../actions/apiActions' +import {Pager, ProgressBar} from 'react-boostrap'; + + +class MolGroupSlider extends React.Component{ + + constructor(props) { + super(props); + this.state = {currentlySelected: 0, progress: 0} + + } + render() { + return
+ Previous{' '} + Next + + ; +
; + } + + handleClick(staging){ + var selected; + var progress; + if (staging=='previous'){ + if (this.state.selected>0){ + selected=this.state.selected-1 + } + } + else if (staging=='next'){ + if (this.state.selected ({currentlySelected: selected, progress: progress})) + } +} +function mapStateToProps(state) { + return { + object_list: state.apiReducers.mol_group_list, + object_on: state.apiReducers.mol_group_on + } +} +const mapDispatchToProps = { + setObjectOn: apiActions.setMolGroupOn, + setObjectList: apiActions.setMolGroupList +} +export default connect(mapStateToProps, mapDispatchToProps)(MolGroupSlider); diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index 5ec531955..c4cd5cda7 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -4,6 +4,7 @@ import { Row, Col, Grid, Well } from 'react-bootstrap'; import NGLView from './nglComponents'; import MolGroupList from './molGroupList'; import MoleculeList from './moleculeList'; +import MolGroupSlider from './molGroupSlider' import SummaryView from './summaryView'; import Header from './header';  import {MyMenu} from './menuView' @@ -29,6 +30,7 @@ class Tindspect extends Component { + From 920754371f50062febd84e6e9338fa55481c21f5 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:01:34 -0400 Subject: [PATCH 047/147] DEV --- js/components/molGroupSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 72d965acc..0ce98e19f 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -5,7 +5,7 @@ import { ListGroupItem, ListGroup, Col} from 'react-bootstrap'; import React from 'react'; import { connect } from 'react-redux' import * as apiActions from '../actions/apiActions' -import {Pager, ProgressBar} from 'react-boostrap'; +import {Pager, ProgressBar} from 'react-bootstrap'; class MolGroupSlider extends React.Component{ From 47a6502aa3a038df9024eae435a068ddeb112192 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:03:47 -0400 Subject: [PATCH 048/147] DEV --- js/components/molGroupSlider.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 0ce98e19f..2bc5b98cb 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -13,12 +13,11 @@ class MolGroupSlider extends React.Component{ constructor(props) { super(props); this.state = {currentlySelected: 0, progress: 0} - } render() { return
- Previous{' '} - Next + Previous{' '} + Next ;
; From 1705de374b54421e15cb2e4da084f4d4991e5118 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:05:44 -0400 Subject: [PATCH 049/147] DEV --- js/components/molGroupSlider.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 2bc5b98cb..fe9924630 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -12,7 +12,6 @@ class MolGroupSlider extends React.Component{ constructor(props) { super(props); - this.state = {currentlySelected: 0, progress: 0} } render() { return
From 37803ebd91b6c9b0473a522356e3e371a1d1906a Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:07:57 -0400 Subject: [PATCH 050/147] DEV --- js/components/molGroupSlider.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index fe9924630..535672ae6 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -12,7 +12,9 @@ class MolGroupSlider extends React.Component{ constructor(props) { super(props); + this.state = {currentlySelected: 0, progress: 0} } + render() { return
Previous{' '} @@ -23,16 +25,16 @@ class MolGroupSlider extends React.Component{ } handleClick(staging){ - var selected; - var progress; + var selected = this.state.currentlySelected; + var progress = this.state.progress; if (staging=='previous'){ - if (this.state.selected>0){ - selected=this.state.selected-1 + if (selected>0){ + selected-=1 } } else if (staging=='next'){ - if (this.state.selected Date: Thu, 22 Mar 2018 12:09:04 -0400 Subject: [PATCH 051/147] DEV --- js/components/molGroupSlider.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 535672ae6..83d78ca1f 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -16,11 +16,12 @@ class MolGroupSlider extends React.Component{ } render() { + this.progress = this.state.progress; return
Previous{' '} Next - ; + ;
; } From 2823d0d482d0a5ad3d96887d9890048cb684b1e4 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:10:10 -0400 Subject: [PATCH 052/147] DEV --- js/components/molGroupSlider.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 83d78ca1f..a82710fd6 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -21,7 +21,6 @@ class MolGroupSlider extends React.Component{ Previous{' '} Next - ;
; } From afedc22e87e3e063a5fddac44d066d6134fd5b8f Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:14:44 -0400 Subject: [PATCH 053/147] DEV --- js/components/molGroupSlider.js | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index a82710fd6..cff54e9d8 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -12,34 +12,38 @@ class MolGroupSlider extends React.Component{ constructor(props) { super(props); + this.handleForward = this.handleForward.bind(this); + this.handleBackward = this.handleBackward.bind(this); this.state = {currentlySelected: 0, progress: 0} } render() { this.progress = this.state.progress; return
- Previous{' '} - Next + Previous{' '} + Next + ;
; } - handleClick(staging){ + handleForward(){ var selected = this.state.currentlySelected; - var progress = this.state.progress; - if (staging=='previous'){ - if (selected>0){ - selected-=1 - } + if (selected ({currentlySelected: selected, progress: progress})) + } + handleBackward(){ + var selected = this.state.currentlySelected; + if (selected>0){ + selected-=1 } - progress = 100*selected/this.props.object_list.length + var progress = 100*selected/this.props.object_list.length this.setState(prevState => ({currentlySelected: selected, progress: progress})) } + } function mapStateToProps(state) { return { From dbae5587215749fe089d4c6f2186a565364cc8cc Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:16:38 -0400 Subject: [PATCH 054/147] DEV --- js/components/molGroupSlider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index cff54e9d8..69450ed19 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -20,8 +20,8 @@ class MolGroupSlider extends React.Component{ render() { this.progress = this.state.progress; return
- Previous{' '} - Next + Previous{' '} + Next ;
; From dea57ab78aa2f95fd473052b516a760095b8d88f Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:17:27 -0400 Subject: [PATCH 055/147] DEV --- js/components/molGroupSlider.js | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 69450ed19..46ba8cdd2 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -19,12 +19,17 @@ class MolGroupSlider extends React.Component{ render() { this.progress = this.state.progress; - return
- Previous{' '} - Next - - ; -
; + if(this.props.object_list==undefined){ + return null; + } + else { + return
+ Previous{' '} + Next + + ; +
; + } } handleForward(){ From c3915245efb7138ac2c518a82d01aff853802ec5 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:20:22 -0400 Subject: [PATCH 056/147] DEV --- js/components/molGroupSlider.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 46ba8cdd2..0163dc75c 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -14,6 +14,7 @@ class MolGroupSlider extends React.Component{ super(props); this.handleForward = this.handleForward.bind(this); this.handleBackward = this.handleBackward.bind(this); + this.handleChange = this.handleChange.bind(this); this.state = {currentlySelected: 0, progress: 0} } @@ -27,7 +28,7 @@ class MolGroupSlider extends React.Component{ Previous{' '} Next - ; +
; } } @@ -37,16 +38,19 @@ class MolGroupSlider extends React.Component{ if (selected ({currentlySelected: selected, progress: progress})) + handleChange(selected); } handleBackward(){ var selected = this.state.currentlySelected; if (selected>0){ selected-=1 } + handleChange(selected); + } + handleChange(selected){ var progress = 100*selected/this.props.object_list.length this.setState(prevState => ({currentlySelected: selected, progress: progress})) + this.props.setObjectOn(this.props.object_list[selected].id) } } From 429f92ad7f64dce3030014bb0e0634e5b83e8ef3 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:21:14 -0400 Subject: [PATCH 057/147] DEV --- js/components/molGroupSlider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 0163dc75c..7747a3840 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -38,14 +38,14 @@ class MolGroupSlider extends React.Component{ if (selected0){ selected-=1 } - handleChange(selected); + this.handleChange(selected); } handleChange(selected){ var progress = 100*selected/this.props.object_list.length From 0f2befbbee0747210ac7bf08d26368140abd764a Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:22:16 -0400 Subject: [PATCH 058/147] DEV --- js/components/molGroupSlider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 7747a3840..523223278 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -35,7 +35,7 @@ class MolGroupSlider extends React.Component{ handleForward(){ var selected = this.state.currentlySelected; - if (selected ({currentlySelected: selected, progress: progress})) this.props.setObjectOn(this.props.object_list[selected].id) } From c031e33ebce3d413f4a1e93baed71b8d0de70694 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:27:32 -0400 Subject: [PATCH 059/147] DEV --- js/components/molGroupSlider.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 523223278..fc1cdd8d1 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -53,6 +53,24 @@ class MolGroupSlider extends React.Component{ this.props.setObjectOn(this.props.object_list[selected].id) } + checkForUpdate(){ + + var selected; + for(var index in this.props.object_list) { + if(this.props.object_list[index].id==this.props.object_on){ + selected=index; + } + } + handleChange(selected); + } + + componentDidMoint(){ + + this.checkForUpdate(); + setInterval(this.checkForUpdate,50); + + } + } function mapStateToProps(state) { return { From 3fa7ec4a97ec805e1bc431d28b281556f1fa0e01 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:29:11 -0400 Subject: [PATCH 060/147] DEV --- js/components/molGroupSlider.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index fc1cdd8d1..c29dd83ba 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -54,7 +54,6 @@ class MolGroupSlider extends React.Component{ } checkForUpdate(){ - var selected; for(var index in this.props.object_list) { if(this.props.object_list[index].id==this.props.object_on){ @@ -64,8 +63,7 @@ class MolGroupSlider extends React.Component{ handleChange(selected); } - componentDidMoint(){ - + componentDidMount(){ this.checkForUpdate(); setInterval(this.checkForUpdate,50); From cc5309591faeb5f1f9052e40974bc550bf0bdb27 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:30:01 -0400 Subject: [PATCH 061/147] DEV --- js/components/molGroupSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index c29dd83ba..91f8376ec 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -60,7 +60,7 @@ class MolGroupSlider extends React.Component{ selected=index; } } - handleChange(selected); + this.handleChange(selected); } componentDidMount(){ From 140a4a755dc19dfe9e0fcc57f2b85fd95eb67da0 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:30:30 -0400 Subject: [PATCH 062/147] DEV --- js/components/molGroupSlider.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 91f8376ec..011365042 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -15,6 +15,7 @@ class MolGroupSlider extends React.Component{ this.handleForward = this.handleForward.bind(this); this.handleBackward = this.handleBackward.bind(this); this.handleChange = this.handleChange.bind(this); + this.checkForUpdate = this.checkForUpdate.bind(this); this.state = {currentlySelected: 0, progress: 0} } From 0be07c4ec65c8d0b671e67924667cfb3ca91ad11 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:31:42 -0400 Subject: [PATCH 063/147] DEV --- js/components/molGroupSlider.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 011365042..cdd54cc24 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -55,13 +55,15 @@ class MolGroupSlider extends React.Component{ } checkForUpdate(){ - var selected; - for(var index in this.props.object_list) { - if(this.props.object_list[index].id==this.props.object_on){ - selected=index; + if (this.props.object_list != undefined) { + var selected; + for (var index in this.props.object_list) { + if (this.props.object_list[index].id == this.props.object_on) { + selected = index; + } } + this.handleChange(selected); } - this.handleChange(selected); } componentDidMount(){ From beef21bbedbb6090ebcb2179cded61986118aaef Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:32:22 -0400 Subject: [PATCH 064/147] DEV --- js/components/molGroupSlider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index cdd54cc24..98113e587 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -55,8 +55,8 @@ class MolGroupSlider extends React.Component{ } checkForUpdate(){ - if (this.props.object_list != undefined) { - var selected; + if (this.props.object_list != []) { + var selected; for (var index in this.props.object_list) { if (this.props.object_list[index].id == this.props.object_on) { selected = index; From 7c075776c341f3c2218e4c1126c16f881a36d57b Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:34:44 -0400 Subject: [PATCH 065/147] DEV --- js/components/molGroupSlider.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 98113e587..3d7fd7a90 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -62,7 +62,9 @@ class MolGroupSlider extends React.Component{ selected = index; } } - this.handleChange(selected); + if(selecte!=undefined) { + this.handleChange(selected); + } } } From e463ac0e1fdb104a3a5693ae3602706c354cbf7b Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 12:35:03 -0400 Subject: [PATCH 066/147] DEV --- js/components/molGroupSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 3d7fd7a90..b5e077ece 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -62,7 +62,7 @@ class MolGroupSlider extends React.Component{ selected = index; } } - if(selecte!=undefined) { + if(selected!=undefined) { this.handleChange(selected); } } From 94372686c7430000473aa745a4d74703d3dacb7d Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:31:10 -0400 Subject: [PATCH 067/147] DEV --- js/components/molGroupSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index b5e077ece..c246afc83 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -62,7 +62,7 @@ class MolGroupSlider extends React.Component{ selected = index; } } - if(selected!=undefined) { + if(selected!=undefined && selected !=this.state.selected) { this.handleChange(selected); } } From e8c29cc602d05451fdf1dc6caab1509524cd4b31 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:33:04 -0400 Subject: [PATCH 068/147] DEV --- js/components/molGroupSlider.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index c246afc83..d32170d5b 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -38,15 +38,15 @@ class MolGroupSlider extends React.Component{ var selected = this.state.currentlySelected; if (selected0){ - selected-=1 + selected-=1 + this.handleChange(selected); } - this.handleChange(selected); } handleChange(selected){ var progress = 100*selected/(this.props.object_list.length-1) From 1b0d729b14f0d2dc751c285a312345a701c9da7e Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:35:57 -0400 Subject: [PATCH 069/147] DEV --- js/components/molGroupSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index d32170d5b..a0c72516a 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -62,7 +62,7 @@ class MolGroupSlider extends React.Component{ selected = index; } } - if(selected!=undefined && selected !=this.state.selected) { + if(selected!=undefined && selected !=this.state.currentlySelected) { this.handleChange(selected); } } From ba98dcfb1364f42313e01c7c74e673b8e25eb7d8 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:39:33 -0400 Subject: [PATCH 070/147] DEV --- js/components/molGroupSlider.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index a0c72516a..cedb2f33c 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -57,10 +57,12 @@ class MolGroupSlider extends React.Component{ checkForUpdate(){ if (this.props.object_list != []) { var selected; + var counter =0 for (var index in this.props.object_list) { if (this.props.object_list[index].id == this.props.object_on) { - selected = index; + selected = counter; } + counter+=1 } if(selected!=undefined && selected !=this.state.currentlySelected) { this.handleChange(selected); From b5b08f8b24541ea4e4115d81016e0e13cfbad2f5 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:44:23 -0400 Subject: [PATCH 071/147] DEV --- js/components/generalComponents.js | 69 ++++++++++++++++++++++++++++++ js/components/molGroupSlider.js | 68 ++--------------------------- 2 files changed, 72 insertions(+), 65 deletions(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index 2b155c644..be8503e15 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -195,4 +195,73 @@ export class GenericView extends React.Component{ this.current_style = this.state.isToggleOn ? this.selected_style : this.not_selected_style; return
{svg_image}
} +} + +export class Slider extends React.Component{ + + constructor(props) { + super(props); + this.handleForward = this.handleForward.bind(this); + this.handleBackward = this.handleBackward.bind(this); + this.handleChange = this.handleChange.bind(this); + this.checkForUpdate = this.checkForUpdate.bind(this); + this.state = {currentlySelected: 0, progress: 0} + } + + render() { + this.progress = this.state.progress; + if(this.props.object_list==undefined){ + return null; + } + else { + return
+ Previous{' '} + Next + + +
; + } + } + + handleForward(){ + var selected = this.state.currentlySelected; + if (selected0){ + selected-=1 + this.handleChange(selected); + } + } + handleChange(selected){ + var progress = 100*selected/(this.props.object_list.length-1) + this.setState(prevState => ({currentlySelected: selected, progress: progress})) + this.props.setObjectOn(this.props.object_list[selected].id) + } + + checkForUpdate(){ + if (this.props.object_list != []) { + var selected; + var counter =0 + for (var index in this.props.object_list) { + if (this.props.object_list[index].id == this.props.object_on) { + selected = counter; + } + counter+=1 + } + if(selected!=undefined && selected !=this.state.currentlySelected) { + this.handleChange(selected); + } + } + } + + componentDidMount(){ + this.checkForUpdate(); + setInterval(this.checkForUpdate,50); + } + } \ No newline at end of file diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index cedb2f33c..359070064 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -1,82 +1,20 @@ /** * Created by abradley on 22/03/2018. */ -import { ListGroupItem, ListGroup, Col} from 'react-bootstrap'; import React from 'react'; import { connect } from 'react-redux' import * as apiActions from '../actions/apiActions' -import {Pager, ProgressBar} from 'react-bootstrap'; +import {Slider} from './generalComponents' -class MolGroupSlider extends React.Component{ +class MolGroupSlider extends Slider{ constructor(props) { super(props); - this.handleForward = this.handleForward.bind(this); - this.handleBackward = this.handleBackward.bind(this); - this.handleChange = this.handleChange.bind(this); - this.checkForUpdate = this.checkForUpdate.bind(this); - this.state = {currentlySelected: 0, progress: 0} - } - - render() { - this.progress = this.state.progress; - if(this.props.object_list==undefined){ - return null; - } - else { - return
- Previous{' '} - Next - - -
; - } - } - - handleForward(){ - var selected = this.state.currentlySelected; - if (selected0){ - selected-=1 - this.handleChange(selected); - } - } - handleChange(selected){ - var progress = 100*selected/(this.props.object_list.length-1) - this.setState(prevState => ({currentlySelected: selected, progress: progress})) - this.props.setObjectOn(this.props.object_list[selected].id) - } - - checkForUpdate(){ - if (this.props.object_list != []) { - var selected; - var counter =0 - for (var index in this.props.object_list) { - if (this.props.object_list[index].id == this.props.object_on) { - selected = counter; - } - counter+=1 - } - if(selected!=undefined && selected !=this.state.currentlySelected) { - this.handleChange(selected); - } - } - } - - componentDidMount(){ - this.checkForUpdate(); - setInterval(this.checkForUpdate,50); - } } + function mapStateToProps(state) { return { object_list: state.apiReducers.mol_group_list, From b31059ce68c3b802ccb16faee39ac10c7f1a3bc2 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:45:02 -0400 Subject: [PATCH 072/147] DEV --- js/components/generalComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index be8503e15..df8f451a3 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -3,7 +3,7 @@ */ import SVGInline from "react-svg-inline" import React from 'react'; -import { ListGroup, Col } from 'react-bootstrap'; +import { ListGroup, Col,Pager,ProgressBar } from 'react-bootstrap'; import fetch from 'cross-fetch' import * as listTypes from './listTypes'; From 9ee34703c6ec332314ecf673f3b41a928489dc42 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:49:35 -0400 Subject: [PATCH 073/147] DEV --- js/components/MoleculeSlider.js | 28 ++++++++++++++++++++++++++++ js/components/generalComponents.js | 5 ++++- js/components/molGroupSlider.js | 2 +- 3 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 js/components/MoleculeSlider.js diff --git a/js/components/MoleculeSlider.js b/js/components/MoleculeSlider.js new file mode 100644 index 000000000..0d45da8d6 --- /dev/null +++ b/js/components/MoleculeSlider.js @@ -0,0 +1,28 @@ +/** + * Created by abradley on 22/03/2018. + */ + +import React from 'react'; +import { connect } from 'react-redux' +import * as apiActions from '../actions/apiActions' +import {Slider} from './generalComponents' + + +class MoleculeSlider extends Slider{ + + constructor(props) { + super(props); + this.slider_name = "MOLECULE" + } +} + +function mapStateToProps(state) { + return { + object_list: state.apiReducers.molecule_list, + object_on: state.apiReducers.molecule_on + } +} +const mapDispatchToProps = { + setObjectOn: apiActions.setMoleculeOn +} +export default connect(mapStateToProps, mapDispatchToProps)(MoleculeSlider); diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index df8f451a3..82952d30e 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -206,6 +206,7 @@ export class Slider extends React.Component{ this.handleChange = this.handleChange.bind(this); this.checkForUpdate = this.checkForUpdate.bind(this); this.state = {currentlySelected: 0, progress: 0} + this.slider_name = "DEFAULT" } render() { @@ -214,7 +215,9 @@ export class Slider extends React.Component{ return null; } else { - return
+ return
+ {this.slider_name} SELECTION + Previous{' '} Next diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index 359070064..acc73be16 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -11,8 +11,8 @@ class MolGroupSlider extends Slider{ constructor(props) { super(props); + this.slider_name = "Molgroup" } - } function mapStateToProps(state) { From ed1517676bb235e1d48d279f42c298added8eca6 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:50:28 -0400 Subject: [PATCH 074/147] DEV --- js/components/generalComponents.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index 82952d30e..27113bf6b 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -242,6 +242,9 @@ export class Slider extends React.Component{ } handleChange(selected){ var progress = 100*selected/(this.props.object_list.length-1) + if(this.props.object_list.length==1){ + progress=100; + } this.setState(prevState => ({currentlySelected: selected, progress: progress})) this.props.setObjectOn(this.props.object_list[selected].id) } From 4a2bf46b928e7c6a3046b80b97bdca135d36ed17 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:52:55 -0400 Subject: [PATCH 075/147] DEV --- js/components/generalComponents.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index 27113bf6b..6bfbd8627 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -205,7 +205,7 @@ export class Slider extends React.Component{ this.handleBackward = this.handleBackward.bind(this); this.handleChange = this.handleChange.bind(this); this.checkForUpdate = this.checkForUpdate.bind(this); - this.state = {currentlySelected: 0, progress: 0} + this.state = {currentlySelected: -1, progress: 0} this.slider_name = "DEFAULT" } @@ -242,9 +242,6 @@ export class Slider extends React.Component{ } handleChange(selected){ var progress = 100*selected/(this.props.object_list.length-1) - if(this.props.object_list.length==1){ - progress=100; - } this.setState(prevState => ({currentlySelected: selected, progress: progress})) this.props.setObjectOn(this.props.object_list[selected].id) } From 9320b4206c39ec680fbefa4053ffd673ab346aad Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:55:16 -0400 Subject: [PATCH 076/147] DEV --- js/components/generalComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index 6bfbd8627..843a98bcb 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -263,7 +263,7 @@ export class Slider extends React.Component{ } componentDidMount(){ - this.checkForUpdate(); + this.props.setObjectOn(this.props.object_list[0].id) setInterval(this.checkForUpdate,50); } From 7a8405aedaea35dd80b20d0a5bf24ad6fcc06d62 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 13:57:45 -0400 Subject: [PATCH 077/147] DEV --- js/components/generalComponents.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index 843a98bcb..a7d7acc5e 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -263,7 +263,6 @@ export class Slider extends React.Component{ } componentDidMount(){ - this.props.setObjectOn(this.props.object_list[0].id) setInterval(this.checkForUpdate,50); } From b94d15efeb2a41a13157f6a76d3233f48028d93a Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:02:21 -0400 Subject: [PATCH 078/147] DEV --- js/components/generalComponents.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index a7d7acc5e..070423bd9 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -3,7 +3,7 @@ */ import SVGInline from "react-svg-inline" import React from 'react'; -import { ListGroup, Col,Pager,ProgressBar } from 'react-bootstrap'; +import { ListGroup, Col,Page,ProgressBar } from 'react-bootstrap'; import fetch from 'cross-fetch' import * as listTypes from './listTypes'; @@ -217,10 +217,10 @@ export class Slider extends React.Component{ else { return
{this.slider_name} SELECTION - - Previous{' '} - Next - + + Previous{' '} + Next +
; } From 4756e9077972b2104136da7a35d8894106752d81 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:06:46 -0400 Subject: [PATCH 079/147] DEV --- js/components/generalComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index 070423bd9..5e249fd0c 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -3,7 +3,7 @@ */ import SVGInline from "react-svg-inline" import React from 'react'; -import { ListGroup, Col,Page,ProgressBar } from 'react-bootstrap'; +import { ListGroup, Col, Page, ProgressBar } from 'react-bootstrap'; import fetch from 'cross-fetch' import * as listTypes from './listTypes'; From 749dd9ffa3585a806ddaa5af981eb3479b52e8a7 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:07:57 -0400 Subject: [PATCH 080/147] DEV --- js/components/generalComponents.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index 5e249fd0c..a0d2c514f 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -3,10 +3,9 @@ */ import SVGInline from "react-svg-inline" import React from 'react'; -import { ListGroup, Col, Page, ProgressBar } from 'react-bootstrap'; +import { ListGroup, Col, Pager, ProgressBar } from 'react-bootstrap'; import fetch from 'cross-fetch' import * as listTypes from './listTypes'; - export function FillMe(props) { return

FILL ME UP PLEASE

; } @@ -217,10 +216,10 @@ export class Slider extends React.Component{ else { return
{this.slider_name} SELECTION - - Previous{' '} - Next - + + Previous{' '} + Next +
; } From 27312c44904a61e72111fa6dc4be06119a1c31f2 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:12:58 -0400 Subject: [PATCH 081/147] DEV --- js/components/generalComponents.js | 2 +- js/components/summaryView.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index a0d2c514f..47bfb6fa0 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -215,7 +215,7 @@ export class Slider extends React.Component{ } else { return
- {this.slider_name} SELECTION +

{this.slider_name} SELECTION

Previous{' '} Next diff --git a/js/components/summaryView.js b/js/components/summaryView.js index 8e0691069..734e89fcb 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -68,10 +68,10 @@ class SummaryView extends React.Component{ render(){ return
-

Number picked: {this.state.list_len}

-

Number vectors explored: {this.state.num_vectors}

-

Number series explored: {this.state.num_series}

-

Estimated cost: £{this.state.cost}

+

Number picked: {this.state.list_len}

+

Number vectors explored: {this.state.num_vectors}

+

Number series explored: {this.state.num_series}

+

Estimated cost: £{this.state.cost}

 From 369d61abd46e643f29df9cb43520ad8f2c24b353 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:14:34 -0400 Subject: [PATCH 082/147] DEV --- js/components/generalComponents.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index 47bfb6fa0..f85067799 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -3,7 +3,7 @@ */ import SVGInline from "react-svg-inline" import React from 'react'; -import { ListGroup, Col, Pager, ProgressBar } from 'react-bootstrap'; +import { ListGroup, Col, Pager, ProgressBar, Well } from 'react-bootstrap'; import fetch from 'cross-fetch' import * as listTypes from './listTypes'; export function FillMe(props) { @@ -214,14 +214,14 @@ export class Slider extends React.Component{ return null; } else { - return
+ return

{this.slider_name} SELECTION

Previous{' '} Next -
; + ; } } From 7ce6bb2c63e56ca0540422af5cd487ea7347ae40 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:15:54 -0400 Subject: [PATCH 083/147] DEV --- js/components/generalComponents.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index f85067799..9e9f9b42a 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -214,8 +214,8 @@ export class Slider extends React.Component{ return null; } else { - return -

{this.slider_name} SELECTION

+ return +

{this.slider_name} Selector

Previous{' '} Next From bbd07c867ce5fc6bae2b0b07525aba2a5b8c5f74 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:23:02 -0400 Subject: [PATCH 084/147] DEV --- js/components/molGroupSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/molGroupSlider.js b/js/components/molGroupSlider.js index acc73be16..69812c06e 100644 --- a/js/components/molGroupSlider.js +++ b/js/components/molGroupSlider.js @@ -11,7 +11,7 @@ class MolGroupSlider extends Slider{ constructor(props) { super(props); - this.slider_name = "Molgroup" + this.slider_name = "Molecule Cluster" } } From 1ae2ece0162aeb085da0a0d191341fc74f63054e Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:28:17 -0400 Subject: [PATCH 085/147] DEV --- js/components/summaryView.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/components/summaryView.js b/js/components/summaryView.js index 734e89fcb..1a4a0c549 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -68,10 +68,10 @@ class SummaryView extends React.Component{ render(){ return
-

Number picked: {this.state.list_len}

-

Number vectors explored: {this.state.num_vectors}

-

Number series explored: {this.state.num_series}

-

Estimated cost: £{this.state.cost}

+

Number picked: {this.state.list_len}

+

Number vectors explored: {this.state.num_vectors}

+

Number series explored: {this.state.num_series}

+

Estimated cost: £{this.state.cost}

 From 41d41b8f5d3d252f4e04618474dc513c53008425 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:29:53 -0400 Subject: [PATCH 086/147] DEV --- js/components/summaryView.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/components/summaryView.js b/js/components/summaryView.js index 1a4a0c549..ce412ab9e 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -72,9 +72,11 @@ class SummaryView extends React.Component{

Number vectors explored: {this.state.num_vectors}

Number series explored: {this.state.num_series}

Estimated cost: £{this.state.cost}

+ + + + - -
} } From 1310a954fec49bf2909b5e9bcb0b6a83195ad6be Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:30:58 -0400 Subject: [PATCH 087/147] DEV --- js/components/summaryView.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/components/summaryView.js b/js/components/summaryView.js index ce412ab9e..2de24ad86 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -75,6 +75,7 @@ class SummaryView extends React.Component{ +

Compounds to pick
From c2ca7d000542ee635fe283a74ebb7fc305cbf821 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:31:26 -0400 Subject: [PATCH 088/147] DEV --- js/components/generalComponents.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index 9e9f9b42a..bb3c9265d 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -210,11 +210,7 @@ export class Slider extends React.Component{ render() { this.progress = this.state.progress; - if(this.props.object_list==undefined){ - return null; - } - else { - return + return

{this.slider_name} Selector

Previous{' '} @@ -222,7 +218,6 @@ export class Slider extends React.Component{ ; - } } handleForward(){ From 4e638539e58a4e8eff70d5a1e5304defa4c2692c Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:32:21 -0400 Subject: [PATCH 089/147] DEV --- js/components/summaryView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/summaryView.js b/js/components/summaryView.js index 2de24ad86..c692d7a49 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -72,7 +72,7 @@ class SummaryView extends React.Component{

Number vectors explored: {this.state.num_vectors}

Number series explored: {this.state.num_series}

Estimated cost: £{this.state.cost}

- +

Compounds to pick

From af7684cc6fc591b4c261607a502d3d37d07d634b Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:48:36 -0400 Subject: [PATCH 090/147] Added toggle switch --- js/components/moleculeView.js | 18 ++++++++++++------ package.json | 1 + 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 683666fbb..df884ef09 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -10,6 +10,7 @@ import { GenericView } from './generalComponents' import * as nglObjectTypes from './nglObjectTypes' import * as selectionActions from '../actions/selectionActions' import * as listTypes from './listTypes' +import Toggle from 'react-bootstrap-toggle'; class MoleculeView extends GenericView { @@ -31,8 +32,6 @@ class MoleculeView extends GenericView { return base_url } - - /** * Convert the JSON into a list of arrow objects */ @@ -115,10 +114,20 @@ class MoleculeView extends GenericView { } + + render() { + const svg_image = ; + this.current_style = this.state.isToggleOn ? this.selected_style : this.not_selected_style; + return
+
{svg_image}
+ Complex + Vectors +
+ } + handleClick(e){ this.setState(prevState => ({isToggleOn: !prevState.isToggleOn})) if(this.state.isToggleOn){ - this.props.deleteObject(this.generateMolObject()) if(e.shiftKey) { this.props.deleteObject(this.generateObject()) @@ -135,7 +144,6 @@ class MoleculeView extends GenericView { error => console.log('An error occurred.', error) ) .then(json => this.handleVector(json)) - // Set this this.props.getFullGraph(this.props.data); // Do the query @@ -145,8 +153,6 @@ class MoleculeView extends GenericView { error => console.log('An error occurred.', error) ) .then(json => this.props.gotFullGraph(json)) - - } } } diff --git a/package.json b/package.json index 882139b14..4850b1244 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "react-bootstrap-table2-filter": "^0.1.3", "react-bootstrap-table2-overlay": "^0.1.1", "react-bootstrap-table2-paginator": "^0.1.1", + "react-bootstrap-toggle": "^2.2.6", "react-burger-menu": "^2.3.0", "react-chartjs": "^1.2.0", "react-dom": "^16.2.0", From f79cdeda88edae2c47d91ef61cda7ea58ff9ddce Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:49:51 -0400 Subject: [PATCH 091/147] DEV --- js/components/moleculeView.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index df884ef09..b1dca73d9 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -11,6 +11,7 @@ import * as nglObjectTypes from './nglObjectTypes' import * as selectionActions from '../actions/selectionActions' import * as listTypes from './listTypes' import Toggle from 'react-bootstrap-toggle'; +import SVGInline from "react-svg-inline" class MoleculeView extends GenericView { From 77b70383a5324f3995027b171e44e60102386f5e Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:52:08 -0400 Subject: [PATCH 092/147] DEV --- js/components/moleculeView.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index b1dca73d9..66d9138a9 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -122,7 +122,6 @@ class MoleculeView extends GenericView { return
{svg_image}
Complex - Vectors
} From b9b7228de9cc3d7268e71bbc71d06b0913846674 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:53:27 -0400 Subject: [PATCH 093/147] DEV --- 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 66d9138a9..9b9532ab1 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -121,7 +121,7 @@ class MoleculeView extends GenericView { this.current_style = this.state.isToggleOn ? this.selected_style : this.not_selected_style; return
{svg_image}
- Complex + Complex
} From a997a60aca986d0394d1af16361f69226cd42251 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:56:29 -0400 Subject: [PATCH 094/147] DEV --- js/components/moleculeView.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 9b9532ab1..5d6200a13 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -121,7 +121,6 @@ class MoleculeView extends GenericView { this.current_style = this.state.isToggleOn ? this.selected_style : this.not_selected_style; return
{svg_image}
- Complex
} From 7b5796b0da9f4af8fa1e3b0a48ded649fb418c2b Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:58:03 -0400 Subject: [PATCH 095/147] DEV --- js/components/compoundList.js | 2 +- js/components/moleculeList.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/compoundList.js b/js/components/compoundList.js index 12b0f5dbe..fa43f39b2 100644 --- a/js/components/compoundList.js +++ b/js/components/compoundList.js @@ -23,7 +23,7 @@ class CompoundList extends React.Component { input_data["mol"]=this.props.thisMol retArray.push() } - totArray.push({retArray}) + totArray.push({retArray}) } return totArray; } diff --git a/js/components/moleculeList.js b/js/components/moleculeList.js index 24d49bb51..5a483471f 100644 --- a/js/components/moleculeList.js +++ b/js/components/moleculeList.js @@ -25,7 +25,7 @@ class MoleculeList extends GenericList { render() { if (this.props != undefined && this.props.object_list) { console.log(this.props.message) - return + return { this.props.object_list.map((data) => ) } From 8e141daa32b127dac0dd5c9c91bea05c514b2f67 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 14:59:27 -0400 Subject: [PATCH 096/147] DEV --- js/components/compoundList.js | 2 +- js/components/moleculeList.js | 2 +- js/components/overallComponents.js | 2 +- js/components/summaryView.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/components/compoundList.js b/js/components/compoundList.js index fa43f39b2..12b0f5dbe 100644 --- a/js/components/compoundList.js +++ b/js/components/compoundList.js @@ -23,7 +23,7 @@ class CompoundList extends React.Component { input_data["mol"]=this.props.thisMol retArray.push() } - totArray.push({retArray}) + totArray.push({retArray}) } return totArray; } diff --git a/js/components/moleculeList.js b/js/components/moleculeList.js index 5a483471f..24d49bb51 100644 --- a/js/components/moleculeList.js +++ b/js/components/moleculeList.js @@ -25,7 +25,7 @@ class MoleculeList extends GenericList { render() { if (this.props != undefined && this.props.object_list) { console.log(this.props.message) - return + return { this.props.object_list.map((data) => ) } diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index c4cd5cda7..67c0352c9 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -31,7 +31,7 @@ class Tindspect extends Component { - + diff --git a/js/components/summaryView.js b/js/components/summaryView.js index c692d7a49..aea82146b 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -76,7 +76,7 @@ class SummaryView extends React.Component{

Compounds to pick

- +
} From c41c0b86bf92eaaefde837b64a39a32bc70597ea Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 15:03:58 -0400 Subject: [PATCH 097/147] DEV --- js/components/summaryView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/summaryView.js b/js/components/summaryView.js index aea82146b..2b8801e4c 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -76,7 +76,7 @@ class SummaryView extends React.Component{

Compounds to pick

- +
} From a8d807ff76385196f1fd6c31b7836b32d5c41934 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 15:07:58 -0400 Subject: [PATCH 098/147] DEV --- js/components/summaryView.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/js/components/summaryView.js b/js/components/summaryView.js index 2b8801e4c..22db54ff0 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -7,6 +7,9 @@ import { Button, Well } from 'react-bootstrap' import * as selectionActions from '../actions/selectionActions' import CompoundList from './compoundList'; + +const molStyle = {height: "300px", + overflow:"scroll"} class SummaryView extends React.Component{ constructor(props) { super(props); @@ -76,7 +79,7 @@ class SummaryView extends React.Component{

Compounds to pick

- +
} From ab698135566590008aa123cf8c1fb1d4e57373bd Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 15:10:25 -0400 Subject: [PATCH 099/147] DEV --- js/components/compoundList.js | 5 ++++- js/components/summaryView.js | 5 ++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/js/components/compoundList.js b/js/components/compoundList.js index 12b0f5dbe..ac3dd0f6d 100644 --- a/js/components/compoundList.js +++ b/js/components/compoundList.js @@ -6,6 +6,9 @@ import React from 'react'; import { connect } from 'react-redux' import CompoundView from './compoundView'; +const molStyle = {height: "300px", + overflow:"scroll"} + class CompoundList extends React.Component { constructor(props) { @@ -23,7 +26,7 @@ class CompoundList extends React.Component { input_data["mol"]=this.props.thisMol retArray.push() } - totArray.push({retArray}) + totArray.push({retArray}) } return totArray; } diff --git a/js/components/summaryView.js b/js/components/summaryView.js index 22db54ff0..e938411bb 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -8,8 +8,7 @@ import * as selectionActions from '../actions/selectionActions' import CompoundList from './compoundList'; -const molStyle = {height: "300px", - overflow:"scroll"} + class SummaryView extends React.Component{ constructor(props) { super(props); @@ -79,7 +78,7 @@ class SummaryView extends React.Component{

Compounds to pick

- +
} From 6aa72cffba0db7546e71da961f1cc8d8a7903bd8 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 15:12:05 -0400 Subject: [PATCH 100/147] DEV --- js/components/moleculeList.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/components/moleculeList.js b/js/components/moleculeList.js index 24d49bb51..cfb0c4f24 100644 --- a/js/components/moleculeList.js +++ b/js/components/moleculeList.js @@ -10,6 +10,8 @@ import * as listType from './listTypes' import * as nglLoadActions from '../actions/nglLoadActions' import MoleculeView from './moleculeView' +const molStyle = {height: "250px", + overflow:"scroll"} class MoleculeList extends GenericList { constructor(props) { @@ -25,7 +27,7 @@ class MoleculeList extends GenericList { render() { if (this.props != undefined && this.props.object_list) { console.log(this.props.message) - return + return { this.props.object_list.map((data) => ) } From fb9a4f380b4d64f9211cde62540556d64c9c5381 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 15:12:48 -0400 Subject: [PATCH 101/147] DEV --- js/components/moleculeList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/moleculeList.js b/js/components/moleculeList.js index cfb0c4f24..dbc380909 100644 --- a/js/components/moleculeList.js +++ b/js/components/moleculeList.js @@ -27,11 +27,11 @@ class MoleculeList extends GenericList { render() { if (this.props != undefined && this.props.object_list) { console.log(this.props.message) - return + return { this.props.object_list.map((data) => ) } - ; + ; } else { return null; From 3b75cc03346ee02bacc9376cd554e7fe82708a6b Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 15:14:35 -0400 Subject: [PATCH 102/147] DEV --- js/components/summaryView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/summaryView.js b/js/components/summaryView.js index e938411bb..f5b5ab72f 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -77,7 +77,7 @@ class SummaryView extends React.Component{ -

Compounds to pick

+

Compounds to pick: {this.props.to_select.length}
From ce688c40706cfa13240beea54dad5c7bc01b7860 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 15:17:35 -0400 Subject: [PATCH 103/147] DEV --- js/components/summaryView.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/js/components/summaryView.js b/js/components/summaryView.js index f5b5ab72f..79eb59831 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -67,6 +67,14 @@ class SummaryView extends React.Component{ } + getNum(){ + var tot_num=0; + for(var key in this.props.to_select){ + tot_num+=this.props.to_select[key].length; + } + return tot_num; + } + render(){ return
@@ -77,7 +85,7 @@ class SummaryView extends React.Component{ -

Compounds to pick: {this.props.to_select.length}

+

Compounds to pick: {this.getNum()}
From 8dd28ca17466364f54cc8be9eb12e9832f1d0fce Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 15:18:46 -0400 Subject: [PATCH 104/147] DEV --- js/components/summaryView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/summaryView.js b/js/components/summaryView.js index 79eb59831..c539780cf 100644 --- a/js/components/summaryView.js +++ b/js/components/summaryView.js @@ -85,7 +85,7 @@ class SummaryView extends React.Component{ -

Compounds to pick: {this.getNum()}

+

Compounds to pick. Mol total:{this.getNum()}
From cc9c50f1f0cb3ff476a2a10923a60cf33aa8ad22 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 19:38:07 -0400 Subject: [PATCH 105/147] DEV --- js/components/compoundList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/compoundList.js b/js/components/compoundList.js index ac3dd0f6d..d9609e718 100644 --- a/js/components/compoundList.js +++ b/js/components/compoundList.js @@ -6,7 +6,7 @@ import React from 'react'; import { connect } from 'react-redux' import CompoundView from './compoundView'; -const molStyle = {height: "300px", +const molStyle = {height: "400px", overflow:"scroll"} class CompoundList extends React.Component { From 95c5910e74e18ac11a7f91fec15701ef6c121522 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 19:38:50 -0400 Subject: [PATCH 106/147] DEV --- js/components/header.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/components/header.js b/js/components/header.js index 1353d2d43..825986eff 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -7,6 +7,7 @@ import { Navbar, Nav, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' export default class Header extends React.Component { render() { return
+
} } \ No newline at end of file From 462ed9fb42c2794b16f880c6cd79273915991c28 Mon Sep 17 00:00:00 2001 From: abradle Date: Thu, 22 Mar 2018 19:39:34 -0400 Subject: [PATCH 107/147] DEV --- js/components/overallComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index 67c0352c9..94b1f9083 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -22,7 +22,7 @@ class Tindspect extends Component {
START HERE - +
From c766a08ab1a1f3f209c71cb1f1d743e7f171d84e Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:32:39 -0400 Subject: [PATCH 108/147] DEV --- js/components/header.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/js/components/header.js b/js/components/header.js index 825986eff..a51dae424 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -3,11 +3,27 @@ */ import React from 'react'; import { Navbar, Nav, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' +import { Typeahead} export default class Header extends React.Component { render() { - return
- -
+ return + + } -} \ No newline at end of file +} + +function mapStateToProps(state) { + return { + target_id_list: state.apiReducers.target_id_list, + target_on: state.apiReducers.target_on + } +} +const mapDispatchToProps = { + setTargetOn: apiActions.setTargetOn, +} +export default connect(mapStateToProps, mapDispatchToProps)(TargetList) \ No newline at end of file From a63e856035c85d35dc5576acf4fcbca9de5aa7fd Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:35:27 -0400 Subject: [PATCH 109/147] DEV --- js/components/header.js | 4 ++-- package.json | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/js/components/header.js b/js/components/header.js index a51dae424..ac725e9e7 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -3,7 +3,7 @@ */ import React from 'react'; import { Navbar, Nav, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' -import { Typeahead} +import { Typeahead } from 'react-typeahead'; export default class Header extends React.Component { render() { @@ -26,4 +26,4 @@ function mapStateToProps(state) { const mapDispatchToProps = { setTargetOn: apiActions.setTargetOn, } -export default connect(mapStateToProps, mapDispatchToProps)(TargetList) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps)(Header) \ No newline at end of file diff --git a/package.json b/package.json index 4850b1244..8531c0d8d 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "react-redux": "^5.0.7", "react-redux-loading-bar": "^3.1.2", "react-svg-inline": "^2.1.0", + "react-typeahead": "^2.0.0-alpha.8", "redux": "^3.7.2", "redux-burger-menu": "^0.2.4", "redux-logger": "^3.0.6", From 74f0296b7a82e1451eef74abf4d67b6f9c02643d Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:35:51 -0400 Subject: [PATCH 110/147] DEV --- js/components/header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/header.js b/js/components/header.js index ac725e9e7..a2903b451 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -5,7 +5,7 @@ import React from 'react'; import { Navbar, Nav, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' import { Typeahead } from 'react-typeahead'; -export default class Header extends React.Component { +class Header extends React.Component { render() { return Date: Fri, 23 Mar 2018 07:36:25 -0400 Subject: [PATCH 111/147] DEV --- js/components/header.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/components/header.js b/js/components/header.js index a2903b451..6953bd46a 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -4,6 +4,8 @@ import React from 'react'; import { Navbar, Nav, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' import { Typeahead } from 'react-typeahead'; +import * as apiActions from '../actions/apiActions' + class Header extends React.Component { render() { From 2ef47d46bb9685c76e7d510815e31e973115ca0f Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:36:44 -0400 Subject: [PATCH 112/147] DEV --- js/components/header.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/components/header.js b/js/components/header.js index 6953bd46a..7cbef4134 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -5,6 +5,7 @@ import React from 'react'; import { Navbar, Nav, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' import { Typeahead } from 'react-typeahead'; import * as apiActions from '../actions/apiActions' +import { connect } from 'react-redux' class Header extends React.Component { From bd5993f0ea320a3f3ee80e4bdc47efb32db389d7 Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:40:10 -0400 Subject: [PATCH 113/147] DEV --- js/components/header.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/js/components/header.js b/js/components/header.js index 7cbef4134..2687a9c28 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -9,11 +9,27 @@ import { connect } from 'react-redux' class Header extends React.Component { + + constructor(props){ + super(props) + this.getTargetList = this.getTargetList.bind(this); + } + + getTargetList(){ + var newArray = new Array() + for(var key in this.props.target_id_list){ + newArray.push(this.props.target_id_list[key].title) + } + return newArray; + } + + + render() { return From 177b36086a3dab3d6cf3ad486ef992ea2ab29c5a Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:46:44 -0400 Subject: [PATCH 114/147] DEV --- js/components/header.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/js/components/header.js b/js/components/header.js index 2687a9c28..498eac5dc 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -22,6 +22,14 @@ class Header extends React.Component { } return newArray; } + selectTarget(option){ + for(var key in this.props.target_id_list){ + if(this.props.target_id_list[key].title==option){ + this.props.setTargetOn(this.props.target_id_list[key].id) + break; + } + } + } @@ -29,6 +37,7 @@ class Header extends React.Component { return From 517d1d3a139c6320f5cef3e67de9f230036fa9d0 Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:47:38 -0400 Subject: [PATCH 115/147] DEV --- js/components/header.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/components/header.js b/js/components/header.js index 498eac5dc..14eb6af13 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -13,6 +13,7 @@ class Header extends React.Component { constructor(props){ super(props) this.getTargetList = this.getTargetList.bind(this); + this.selectTarget = this.selectTarget.bind(this); } getTargetList(){ From 81f111dd1e6dbfd4e12dcba51e93db74663ceeca Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:51:09 -0400 Subject: [PATCH 116/147] DEV --- js/components/header.js | 40 ++++++++++++++++++++++++++++++++++++- js/components/targetList.js | 1 - 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/js/components/header.js b/js/components/header.js index 14eb6af13..5d5f44993 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -5,6 +5,7 @@ import React from 'react'; import { Navbar, Nav, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' import { Typeahead } from 'react-typeahead'; import * as apiActions from '../actions/apiActions' +import * as nglActions from '../actions/nglLoadActions' import { connect } from 'react-redux' @@ -14,8 +15,38 @@ class Header extends React.Component { super(props) this.getTargetList = this.getTargetList.bind(this); this.selectTarget = this.selectTarget.bind(this); + this.generateTargetObject = this.generateTargetObject.bind(this); } + getViewUrl(pk,get_view){ + var base_url = window.location.protocol + "//" + window.location.host + base_url += "/viewer/"+get_view+"/"+pk.toString()+"/" + return base_url + } + + generateTargetObject(targetOn){ + var targetData; + for(var index in this.props.target_id_list){ + var thisTarget = this.props.target_id_list[index]; + if (thisTarget.id==targetOn){ + targetData=thisTarget; + break; + } + } + // Now deal with this target + var prot_to_load = targetData.protein_set[0] + if(prot_to_load!=undefined) { + var out_object = { + "name": "PROTEIN_" + prot_to_load.toString(), + "prot_url": this.getViewUrl(prot_to_load, "prot_from_pk"), + "OBJECT_TYPE": nglObjectTypes.PROTEIN + } + return out_object + } + return undefined; + } + + getTargetList(){ var newArray = new Array() for(var key in this.props.target_id_list){ @@ -23,10 +54,16 @@ class Header extends React.Component { } return newArray; } + + selectTarget(option){ for(var key in this.props.target_id_list){ if(this.props.target_id_list[key].title==option){ - this.props.setTargetOn(this.props.target_id_list[key].id) + this.props.setTargetOn(this.props.target_id_list[key].id); + var targObject = this.generateTargetObject(new_value); + if(targObject) { + this.props.loadObject(targObject); + } break; } } @@ -53,6 +90,7 @@ function mapStateToProps(state) { } } const mapDispatchToProps = { + loadObject: nglActions.loadObject, setTargetOn: apiActions.setTargetOn, } export default connect(mapStateToProps, mapDispatchToProps)(Header) \ No newline at end of file diff --git a/js/components/targetList.js b/js/components/targetList.js index 93b8aef8f..9d54f8bdd 100644 --- a/js/components/targetList.js +++ b/js/components/targetList.js @@ -66,7 +66,6 @@ class TargetList extends GenericList { if(targObject) { this.props.loadObject(targObject); } - } render() { if (this.props != undefined && this.props.object_list) { From 1023c08f66a80d76b504fac9db9265fad0829acc Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:53:17 -0400 Subject: [PATCH 117/147] DEV --- js/components/header.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/js/components/header.js b/js/components/header.js index 5d5f44993..29249db58 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -24,15 +24,7 @@ class Header extends React.Component { return base_url } - generateTargetObject(targetOn){ - var targetData; - for(var index in this.props.target_id_list){ - var thisTarget = this.props.target_id_list[index]; - if (thisTarget.id==targetOn){ - targetData=thisTarget; - break; - } - } + generateTargetObject(targetData){ // Now deal with this target var prot_to_load = targetData.protein_set[0] if(prot_to_load!=undefined) { @@ -60,7 +52,7 @@ class Header extends React.Component { for(var key in this.props.target_id_list){ if(this.props.target_id_list[key].title==option){ this.props.setTargetOn(this.props.target_id_list[key].id); - var targObject = this.generateTargetObject(new_value); + var targObject = this.generateTargetObject(this.props.target_id_list[key]); if(targObject) { this.props.loadObject(targObject); } From e26e5d22f4236ccb147745feba04b0700b9193f8 Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:53:52 -0400 Subject: [PATCH 118/147] DEV --- js/components/header.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/header.js b/js/components/header.js index 29249db58..586b025a0 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -7,7 +7,7 @@ import { Typeahead } from 'react-typeahead'; import * as apiActions from '../actions/apiActions' import * as nglActions from '../actions/nglLoadActions' import { connect } from 'react-redux' - +import * as nglObjectTypes from '../components/nglObjectTypes' class Header extends React.Component { From e0cf9e998f27358b1c56992a76a81100d70f15bd Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:55:51 -0400 Subject: [PATCH 119/147] DEV --- js/components/header.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/components/header.js b/js/components/header.js index 586b025a0..ad3c62d95 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -53,9 +53,15 @@ class Header extends React.Component { if(this.props.target_id_list[key].title==option){ this.props.setTargetOn(this.props.target_id_list[key].id); var targObject = this.generateTargetObject(this.props.target_id_list[key]); + this.props.setMoleculeList([]); + for(var key in this.props.objectsInView){ + this.props.deleteObject(this.props.objectsInView[key]); + } if(targObject) { this.props.loadObject(targObject); } + + break; } } From bd5b67c6e6e10d3c6905a4fd37c7326260141b33 Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 07:56:53 -0400 Subject: [PATCH 120/147] DEV --- js/components/header.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/js/components/header.js b/js/components/header.js index ad3c62d95..9475565af 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -60,8 +60,6 @@ class Header extends React.Component { if(targObject) { this.props.loadObject(targObject); } - - break; } } From 7d67c4db78831d716c2f95a2be96c4bd323031c3 Mon Sep 17 00:00:00 2001 From: abradle Date: Fri, 23 Mar 2018 20:55:16 -0400 Subject: [PATCH 121/147] DEV --- js/components/header.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/components/header.js b/js/components/header.js index 9475565af..204c857ae 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -86,6 +86,8 @@ function mapStateToProps(state) { } } const mapDispatchToProps = { + setMoleculeList: apiActions.setMoleculeList, + deleteObject: nglActions.deleteObject, loadObject: nglActions.loadObject, setTargetOn: apiActions.setTargetOn, } From df147f09cbb9023c068c2e8617ef9f7f9e792c2d Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 09:37:40 +0200 Subject: [PATCH 122/147] DEV --- js/components/moleculeList.js | 1 - js/components/moleculeView.js | 66 ++++++++++++++++++++++++----------- 2 files changed, 46 insertions(+), 21 deletions(-) diff --git a/js/components/moleculeList.js b/js/components/moleculeList.js index dbc380909..72dd7ddc9 100644 --- a/js/components/moleculeList.js +++ b/js/components/moleculeList.js @@ -19,7 +19,6 @@ class MoleculeList extends GenericList { this.list_type = listType.MOLECULE; } - handleOptionChange(changeEvent) { const new_value = changeEvent.target.value; this.props.setObjectOn(new_value); diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 5d6200a13..a9a18f17d 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -22,8 +22,10 @@ class MoleculeView extends GenericView { this.generateMolObject = this.generateMolObject.bind(this); this.handleVector = this.handleVector.bind(this); this.getViewUrl = this.getViewUrl.bind(this); + this.onVector = this.onVector.bind(this); var base_url = window.location.protocol + "//" + window.location.host this.url = new URL(base_url + '/viewer/img_from_mol_pk/' + this.props.data.id + "/") + this.state = {vectorOn: false, complexOn: false, isToggleOn:false} } @@ -108,19 +110,29 @@ class MoleculeView extends GenericView { handleVector(json){ - var objList = this.generateObjectList(json); objList.forEach(item => this.props.loadObject(item)); this.props.setVectorList(objList) } - - + render() { const svg_image = ; this.current_style = this.state.isToggleOn ? this.selected_style : this.not_selected_style; return
{svg_image}
+ ON} + off={

OFF

} + size="xs" + offstyle="danger" + active={this.state.complexOn}/> + ON} + off={

OFF

} + size="xs" + offstyle="danger" + active={this.state.vectorOn}/>
} @@ -128,31 +140,45 @@ class MoleculeView extends GenericView { this.setState(prevState => ({isToggleOn: !prevState.isToggleOn})) if(this.state.isToggleOn){ this.props.deleteObject(this.generateMolObject()) - if(e.shiftKey) { - this.props.deleteObject(this.generateObject()) - this.props.vector_list.forEach(item => this.props.deleteObject(item)); - } } else{ this.props.loadObject(this.generateMolObject()) - if(e.shiftKey) { - this.props.loadObject(this.generateObject()) - fetch(this.getViewUrl(this.props.data.id,"get_vects_from_pk")) - .then( - response => response.json(), - error => console.log('An error occurred.', error) - ) - .then(json => this.handleVector(json)) - // Set this - this.props.getFullGraph(this.props.data); - // Do the query - fetch(this.getViewUrl(this.props.data.id,"get_graph_from_pk")) + } + } + + onComplex(){ + this.setState(prevState => ({complexOn: !prevState.complexOn})) + if(this.state.complexOn){ + this.props.deleteObject(this.generateObject()) + } + else{ + this.props.loadObject(this.generateObject()) + } + + } + + onVector(){ + this.setState(prevState => ({vectorOn: !prevState.vectorOn})) + if(this.state.vectorOn) { + this.props.vector_list.forEach(item => this.props.deleteObject(item)); + + } + else { + fetch(this.getViewUrl(this.props.data.id, "get_vects_from_pk")) + .then( + response => response.json(), + error => console.log('An error occurred.', error) + ) + .then(json => this.handleVector(json)) + // Set this + this.props.getFullGraph(this.props.data); + // Do the query + fetch(this.getViewUrl(this.props.data.id, "get_graph_from_pk")) .then( response => response.text(), error => console.log('An error occurred.', error) ) .then(json => this.props.gotFullGraph(json)) - } } } From 7628587885a5247019f063c1ce2f427f0ca552c2 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 09:41:19 +0200 Subject: [PATCH 123/147] DEV --- js/components/moleculeView.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index a9a18f17d..2cb1c88cd 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -25,10 +25,12 @@ class MoleculeView extends GenericView { this.onVector = this.onVector.bind(this); var base_url = window.location.protocol + "//" + window.location.host this.url = new URL(base_url + '/viewer/img_from_mol_pk/' + this.props.data.id + "/") - this.state = {vectorOn: false, complexOn: false, isToggleOn:false} + this.state.vectorOn= false + this.state.complexOn= false } + getViewUrl(pk,get_view){ var base_url = window.location.protocol + "//" + window.location.host base_url += "/viewer/"+get_view+"/"+pk.toString()+"/" @@ -115,7 +117,7 @@ class MoleculeView extends GenericView { this.props.setVectorList(objList) } - + render() { const svg_image = ; this.current_style = this.state.isToggleOn ? this.selected_style : this.not_selected_style; From d78fff9cb04b9a7bfd2f36140fcfe4779d4a329b Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 09:44:09 +0200 Subject: [PATCH 124/147] DEV --- js/components/moleculeView.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 2cb1c88cd..53292ce08 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -23,6 +23,7 @@ class MoleculeView extends GenericView { this.handleVector = this.handleVector.bind(this); this.getViewUrl = this.getViewUrl.bind(this); this.onVector = this.onVector.bind(this); + this.onComplex = this.onComplex.bind(this); var base_url = window.location.protocol + "//" + window.location.host this.url = new URL(base_url + '/viewer/img_from_mol_pk/' + this.props.data.id + "/") this.state.vectorOn= false From aaa6ef8252fdae88e9ce80732a90f901a03135c6 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 09:48:38 +0200 Subject: [PATCH 125/147] DEV --- js/components/moleculeView.js | 1 + 1 file changed, 1 insertion(+) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 53292ce08..e1080636c 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -10,6 +10,7 @@ import { GenericView } from './generalComponents' import * as nglObjectTypes from './nglObjectTypes' import * as selectionActions from '../actions/selectionActions' import * as listTypes from './listTypes' +import "node_modules/lib/bootstrap2-toggle.css"; import Toggle from 'react-bootstrap-toggle'; import SVGInline from "react-svg-inline" From e46d527c4501c078a9c7fdab18fce0e0442cb016 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 09:49:54 +0200 Subject: [PATCH 126/147] DEV --- 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 e1080636c..2a66613e6 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -10,7 +10,7 @@ import { GenericView } from './generalComponents' import * as nglObjectTypes from './nglObjectTypes' import * as selectionActions from '../actions/selectionActions' import * as listTypes from './listTypes' -import "node_modules/lib/bootstrap2-toggle.css"; +import "../../node_modules/lib/bootstrap2-toggle.css"; import Toggle from 'react-bootstrap-toggle'; import SVGInline from "react-svg-inline" From 6121109bdf5a4181cbf8306690a9f64fefe72ca4 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 09:52:59 +0200 Subject: [PATCH 127/147] DEV --- css/toggle.css | 111 ++++++++++++++++++++++++++++++++++ js/components/moleculeView.js | 2 +- 2 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 css/toggle.css diff --git a/css/toggle.css b/css/toggle.css new file mode 100644 index 000000000..746901683 --- /dev/null +++ b/css/toggle.css @@ -0,0 +1,111 @@ +/*! ======================================================================== + * Bootstrap Toggle: bootstrap2-toggle.css v2.2.0 + * http://www.bootstraptoggle.com + * ======================================================================== + * Copyright 2014 Min Hur, The New York Times Company + * Licensed under MIT + * ======================================================================== */ + + +label.checkbox .toggle, +label.checkbox.inline .toggle { + margin-left: -20px; + margin-right: 5px; +} + +.toggle { + min-width: 40px; + height: 20px; + position: relative; + overflow: hidden; +} + +.toggle-group { + position: absolute; + width: 200%; + top: 0; + bottom: 0; + left: 0; + transition: left 0.35s; + -webkit-transition: left 0.35s; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; +} + +.toggle.off .toggle-group { + left: -100%; +} + +.toggle-on { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 50%; + margin: 0; + border: 0; + border-radius: 0; +} + +.toggle-off { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + right: 0; + margin: 0; + border: 0; + border-radius: 0; +} + +.toggle-handle { + position: relative; + margin: 0 auto; + padding-top: 0px; + padding-bottom: 0px; + height: 100%; + width: 0px; + border-width: 0 1px; +} + +.toggle-handle.btn-mini { + top: -2px; +} + +.toggle-handle.btn-xs { + top: -2px; +} + +.toggle.btn { min-width: 30px; } +.toggle-on.btn { padding-right: 24px; display: flex; align-items: center; } +.toggle-off.btn { padding-left: 24px; display: flex; align-items: center; } + +.toggle.btn-large { min-width: 40px; } +.toggle-on.btn-large { padding-right: 35px; } +.toggle-off.btn-large { padding-left: 35px; } + +.toggle.btn-lg { min-width: 40px; } +.toggle-on.btn-lg { padding-right: 35px; } +.toggle-off.btn-lg { padding-left: 35px; } + + +.toggle.btn-small { min-width: 25px; } +.toggle-on.btn-small { padding-right: 20px; } +.toggle-off.btn-small { padding-left: 20px; } + +.toggle.btn-sm { min-width: 25px; } +.toggle-on.btn-sm { padding-right: 20px; } +.toggle-off.btn-sm { padding-left: 20px; } + +.toggle.btn-mini { min-width: 20px; } +.toggle-on.btn-mini { padding-right: 12px; } +.toggle-off.btn-mini { padding-left: 12px; } + +.toggle.btn-xs { min-width: 20px; } +.toggle-on.btn-xs { padding-right: 12px; } +.toggle-off.btn-xs { padding-left: 12px; } + +.slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; } +.fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; } +.quick .toggle-group { transition: none; -webkit-transition: none; } \ No newline at end of file diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 2a66613e6..ad0971060 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -10,7 +10,7 @@ import { GenericView } from './generalComponents' import * as nglObjectTypes from './nglObjectTypes' import * as selectionActions from '../actions/selectionActions' import * as listTypes from './listTypes' -import "../../node_modules/lib/bootstrap2-toggle.css"; +import '../../css/toggle.css'; import Toggle from 'react-bootstrap-toggle'; import SVGInline from "react-svg-inline" From 3e25dbd514391318d056764ffeb7a35565d89276 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 09:54:45 +0200 Subject: [PATCH 128/147] DEV --- js/components/moleculeView.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index ad0971060..63e1fb298 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -126,14 +126,14 @@ class MoleculeView extends GenericView { return
{svg_image}
ON} - off={

OFF

} + on={

Complex ON

} + off={

Complex OFF

} size="xs" offstyle="danger" active={this.state.complexOn}/> ON} - off={

OFF

} + on={

Vector ON

} + off={

Vector OFF

} size="xs" offstyle="danger" active={this.state.vectorOn}/> From 7a578431824624eab696febe9612dd3d1ca1b9a8 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 09:55:45 +0200 Subject: [PATCH 129/147] DEV --- css/toggle.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css/toggle.css b/css/toggle.css index 746901683..149412994 100644 --- a/css/toggle.css +++ b/css/toggle.css @@ -14,8 +14,8 @@ label.checkbox.inline .toggle { } .toggle { - min-width: 40px; - height: 20px; + min-width: 20px; + height: 10px; position: relative; overflow: hidden; } From e40fb2cff13744b532fbbc304e158477b6d0dc44 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 09:59:19 +0200 Subject: [PATCH 130/147] DEV --- css/toggle.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/toggle.css b/css/toggle.css index 149412994..500059455 100644 --- a/css/toggle.css +++ b/css/toggle.css @@ -102,9 +102,9 @@ label.checkbox.inline .toggle { .toggle-on.btn-mini { padding-right: 12px; } .toggle-off.btn-mini { padding-left: 12px; } -.toggle.btn-xs { min-width: 20px; } -.toggle-on.btn-xs { padding-right: 12px; } -.toggle-off.btn-xs { padding-left: 12px; } +.toggle.btn-xs { min-width: 10px; } +.toggle-on.btn-xs { padding-right: 7px; } +.toggle-off.btn-xs { padding-left: 7px; } .slow .toggle-group { transition: left 0.7s; -webkit-transition: left 0.7s; } .fast .toggle-group { transition: left 0.1s; -webkit-transition: left 0.1s; } From ec1f07cb6c36c401bb3451578aed90a828f3e331 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 10:01:02 +0200 Subject: [PATCH 131/147] DEV --- 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 63e1fb298..8e3b9643b 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -129,13 +129,13 @@ class MoleculeView extends GenericView { on={

Complex ON

} off={

Complex OFF

} size="xs" - offstyle="danger" + offstyle="warning" active={this.state.complexOn}/> Vector ON} off={

Vector OFF

} - size="xs" - offstyle="danger" + size=" xs" + offstyle="info" active={this.state.vectorOn}/>
} From 617c1d7fcaf02840f55bfeac8de14cc4baa8c94d Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 10:03:06 +0200 Subject: [PATCH 132/147] DEV --- js/components/moleculeView.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 8e3b9643b..3058be3aa 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -126,16 +126,16 @@ class MoleculeView extends GenericView { return
{svg_image}
Complex ON} - off={

Complex OFF

} + on={

Complex ON

} + off={

Complex OFF

} size="xs" - offstyle="warning" + offstyle="danger" active={this.state.complexOn}/> Vector ON} - off={

Vector OFF

} - size=" xs" - offstyle="info" + on={

Vector ON

} + off={

Vector OFF

} + size="xs" + offstyle="danger" active={this.state.vectorOn}/>
} From 9f0698944e21582fa833de5755c42972a5e5762d Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 10:04:11 +0200 Subject: [PATCH 133/147] DEV --- js/components/moleculeView.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 3058be3aa..20df77a60 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -126,14 +126,14 @@ class MoleculeView extends GenericView { return
{svg_image}
Complex ON} - off={

Complex OFF

} + on={

Complex ON

} + off={

Complex OFF

} size="xs" offstyle="danger" active={this.state.complexOn}/> Vector ON} - off={

Vector OFF

} + on={

Vector ON

} + off={

Vector OFF

} size="xs" offstyle="danger" active={this.state.vectorOn}/> From 61e77665809572686833d6f6e392ad08c9975d8f Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 10:05:02 +0200 Subject: [PATCH 134/147] DEV --- css/toggle.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/toggle.css b/css/toggle.css index 500059455..8c7602558 100644 --- a/css/toggle.css +++ b/css/toggle.css @@ -15,7 +15,7 @@ label.checkbox.inline .toggle { .toggle { min-width: 20px; - height: 10px; + height: 5px; position: relative; overflow: hidden; } From c1e704430637ebef775613253a3be4d821ddc383 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 10:06:31 +0200 Subject: [PATCH 135/147] DEV --- css/toggle.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/toggle.css b/css/toggle.css index 8c7602558..142b54399 100644 --- a/css/toggle.css +++ b/css/toggle.css @@ -77,7 +77,7 @@ label.checkbox.inline .toggle { top: -2px; } -.toggle.btn { min-width: 30px; } +.toggle.btn { min-width: 15px; } .toggle-on.btn { padding-right: 24px; display: flex; align-items: center; } .toggle-off.btn { padding-left: 24px; display: flex; align-items: center; } From 41b00a64fdac116babf4450269fd0a15b1eb4bbb Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 10:08:10 +0200 Subject: [PATCH 136/147] DEV --- css/toggle.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/toggle.css b/css/toggle.css index 142b54399..479876437 100644 --- a/css/toggle.css +++ b/css/toggle.css @@ -15,7 +15,7 @@ label.checkbox.inline .toggle { .toggle { min-width: 20px; - height: 5px; + height: 1px; position: relative; overflow: hidden; } From f50ce52ec419d6625a810c8b8c80694a4acb2724 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 10:14:16 +0200 Subject: [PATCH 137/147] DEV --- js/components/moleculeView.js | 17 ++++++++++++++--- js/components/nglComponents.js | 2 +- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 20df77a60..118b0c8b9 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -89,12 +89,13 @@ class MoleculeView extends GenericView { } } - generateMolObject(){ + generateMolObject(colourToggle=null){ // Get the data const data = this.props.data; var nglObject = { "name": "MOLLOAD" + "_" + data.id.toString(), "OBJECT_TYPE":nglObjectTypes.MOLECULE, + "colour": colourToggle, "sdf_info": data.sdf_info } return nglObject; @@ -140,13 +141,23 @@ class MoleculeView extends GenericView {
} + getRandomColor() { + var letters = '0123456789ABCDEF'; + var color = '#'; + for (var i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +} + handleClick(e){ - this.setState(prevState => ({isToggleOn: !prevState.isToggleOn})) + const colourToggle = this.getRandomColor(); + this.setState(prevState => ({isToggleOn: !prevState.isToggleOn, colourToggle: colourToggle})) if(this.state.isToggleOn){ this.props.deleteObject(this.generateMolObject()) } else{ - this.props.loadObject(this.generateMolObject()) + this.props.loadObject(this.generateMolObject(colourToggle)) } } diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index 72e6a3b20..ad5a213f8 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -90,7 +90,7 @@ export class NGLView extends React.Component { else if (input_dict["OBJECT_TYPE"]==nglObjectTypes.MOLECULE){ var stringBlob = new Blob( [ input_dict["sdf_info"] ], { type: 'text/plain'} ); this.stage.loadFile( stringBlob, { name: object_name,ext: "sdf" } ).then( function( comp ){ - comp.addRepresentation( "ball+stick", { multipleBond: true } ); + comp.addRepresentation( "ball+stick", { colorScheme: "element", colorValue:"cyan", multipleBond: true } ); }); } else if(input_dict["OBJECT_TYPE"]==nglObjectTypes.COMPLEX){ From 471402d751986bd4d04bc7bd78af5f58ad53a742 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 10:15:15 +0200 Subject: [PATCH 138/147] DEV --- js/components/nglComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/nglComponents.js b/js/components/nglComponents.js index ad5a213f8..e22bc100c 100644 --- a/js/components/nglComponents.js +++ b/js/components/nglComponents.js @@ -90,7 +90,7 @@ export class NGLView extends React.Component { else if (input_dict["OBJECT_TYPE"]==nglObjectTypes.MOLECULE){ var stringBlob = new Blob( [ input_dict["sdf_info"] ], { type: 'text/plain'} ); this.stage.loadFile( stringBlob, { name: object_name,ext: "sdf" } ).then( function( comp ){ - comp.addRepresentation( "ball+stick", { colorScheme: "element", colorValue:"cyan", multipleBond: true } ); + comp.addRepresentation( "ball+stick", { colorScheme: "element", colorValue:input_dict["colour"], multipleBond: true } ); }); } else if(input_dict["OBJECT_TYPE"]==nglObjectTypes.COMPLEX){ From 116d2832cc78843ddd1bcad3a0953792cdcb9e4c Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 10:18:25 +0200 Subject: [PATCH 139/147] DEV --- js/components/generalComponents.js | 2 +- js/components/moleculeView.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index bb3c9265d..dc93f25bf 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -131,7 +131,6 @@ export class GenericView extends React.Component{ super(props); this.loadFromServer = this.loadFromServer.bind(this); this.handleClick = this.handleClick.bind(this); - this.selected_style = {width: props.width.toString+'px', height: props.height.toString()+'px', backgroundColor: "#faebcc"} this.not_selected_style = {width: props.width.toString+'px', height: props.height.toString()+'px'} this.old_url = '' this.state = {isToggleOn: false, img_data: '' + @@ -149,6 +148,7 @@ export class GenericView extends React.Component{ ' ' + ' ' + ''} + this.selected_style = {width: props.width.toString+'px', height: props.height.toString()+'px', backgroundColor: this.state} } loadFromServer(width,height) { diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 118b0c8b9..a10b72c7b 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -123,6 +123,8 @@ class MoleculeView extends GenericView { render() { const svg_image = ; + const selected_style = {width: this.props.width.toString+'px', + height: this.props.height.toString()+'px', backgroundColor: this.state.backgroundColour} this.current_style = this.state.isToggleOn ? this.selected_style : this.not_selected_style; return
{svg_image}
@@ -152,7 +154,7 @@ class MoleculeView extends GenericView { handleClick(e){ const colourToggle = this.getRandomColor(); - this.setState(prevState => ({isToggleOn: !prevState.isToggleOn, colourToggle: colourToggle})) + this.setState(prevState => ({isToggleOn: !prevState.isToggleOn, backgroundColour: colourToggle})) if(this.state.isToggleOn){ this.props.deleteObject(this.generateMolObject()) } From 353ab47539870a1f55246037093c861fd34ac95b Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 10:19:58 +0200 Subject: [PATCH 140/147] DEV --- 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 a10b72c7b..f0ff5aa1a 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -125,7 +125,7 @@ class MoleculeView extends GenericView { const svg_image = ; const selected_style = {width: this.props.width.toString+'px', height: this.props.height.toString()+'px', backgroundColor: this.state.backgroundColour} - this.current_style = this.state.isToggleOn ? this.selected_style : this.not_selected_style; + this.current_style = this.state.isToggleOn ? selected_style : this.not_selected_style; return
{svg_image}
Date: Mon, 26 Mar 2018 10:25:46 +0200 Subject: [PATCH 141/147] DEV --- js/components/generalComponents.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/components/generalComponents.js b/js/components/generalComponents.js index dc93f25bf..e660f0c0c 100644 --- a/js/components/generalComponents.js +++ b/js/components/generalComponents.js @@ -148,7 +148,7 @@ export class GenericView extends React.Component{ ' ' + ' ' + ''} - this.selected_style = {width: props.width.toString+'px', height: props.height.toString()+'px', backgroundColor: this.state} + this.selected_style = {width: props.width.toString+'px', height: props.height.toString()+'px', backgroundColor: "#B7C185"} } loadFromServer(width,height) { From 8405e829e6472abc708b5737b688ebf682838112 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 17:56:17 +0100 Subject: [PATCH 142/147] DEV --- js/components/moleculeView.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index f0ff5aa1a..eec77602d 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -134,12 +134,6 @@ class MoleculeView extends GenericView { size="xs" offstyle="danger" active={this.state.complexOn}/> - Vector ON

} - off={

Vector OFF

} - size="xs" - offstyle="danger" - active={this.state.vectorOn}/>
} From f416e1deb9f9b52f1f4bb982185cd82d49faf993 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 18:01:00 +0100 Subject: [PATCH 143/147] DEV --- js/components/moleculeView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index eec77602d..bbf1cac0b 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -29,6 +29,7 @@ class MoleculeView extends GenericView { this.url = new URL(base_url + '/viewer/img_from_mol_pk/' + this.props.data.id + "/") this.state.vectorOn= false this.state.complexOn= false + this.colourToggle = this.getRandomColor(); } @@ -147,8 +148,7 @@ class MoleculeView extends GenericView { } handleClick(e){ - const colourToggle = this.getRandomColor(); - this.setState(prevState => ({isToggleOn: !prevState.isToggleOn, backgroundColour: colourToggle})) + this.setState(prevState => ({isToggleOn: !prevState.isToggleOn, backgroundColour: this.colourToggle})) if(this.state.isToggleOn){ this.props.deleteObject(this.generateMolObject()) } From 5c48ccc57a51f478260296a71001030bcf664ae1 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 18:03:00 +0100 Subject: [PATCH 144/147] DEV --- 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 bbf1cac0b..0848b59d3 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -153,7 +153,7 @@ class MoleculeView extends GenericView { this.props.deleteObject(this.generateMolObject()) } else{ - this.props.loadObject(this.generateMolObject(colourToggle)) + this.props.loadObject(this.generateMolObject(this.colourToggle)) } } From 2146318107aaf53459a3f9358c414a4287d62204 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 18:08:07 +0100 Subject: [PATCH 145/147] DEV --- js/components/overallComponents.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index 94b1f9083..9188e4ff5 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -28,15 +28,15 @@ class Tindspect extends Component { - + - + - + From 726eb89bca732e2c41c505f4b9766df9592d47f5 Mon Sep 17 00:00:00 2001 From: abradle Date: Mon, 26 Mar 2018 18:10:41 +0100 Subject: [PATCH 146/147] DEV --- js/components/overallComponents.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/components/overallComponents.js b/js/components/overallComponents.js index 9188e4ff5..94b1f9083 100644 --- a/js/components/overallComponents.js +++ b/js/components/overallComponents.js @@ -28,15 +28,15 @@ class Tindspect extends Component { - + - + - + From 8ea376d5f3b1fc9702b9eeee5730a09fabc0382a Mon Sep 17 00:00:00 2001 From: abradle Date: Tue, 27 Mar 2018 09:22:41 +0100 Subject: [PATCH 147/147] DEV --- js/components/moleculeView.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/components/moleculeView.js b/js/components/moleculeView.js index 0848b59d3..7d7fc6009 100644 --- a/js/components/moleculeView.js +++ b/js/components/moleculeView.js @@ -135,6 +135,12 @@ class MoleculeView extends GenericView { size="xs" offstyle="danger" active={this.state.complexOn}/> + Vector ON

} + off={

Vector OFF

} + size="xs" + offstyle="danger" + active={this.state.vectorOn}/>
}