Bug Fix - compound loading and navigation (#20)

- Compound list shows as loading during loading. 
- Fixed bug which caused navigation to end of compound list on rightClick after onClick action.
- Cleaned up unused code.

js/components/compoundList.js

@@ -16,9 +16,8 @@ class CompoundList extends React.Component {
         this.handleClassNaming = this.handleClassNaming.bind(this);
         this.selectAll = this.selectAll.bind(this);
         this.clearAll = this.clearAll.bind(this);
-        this.highlightFirstCompound = this.highlightFirstCompound.bind(this)
-        this.colourClassBoxes = this.colourClassBoxes.bind(this)
-
+        this.highlightFirstCompound = this.highlightFirstCompound.bind(this);
+        this.colourClassBoxes = this.colourClassBoxes.bind(this);
     }
 
     handleClassNaming(e){
@@ -28,7 +27,6 @@ class CompoundList extends React.Component {
             var classDescription = this.props.compoundClasses;
             var descriptionToSet = Object.assign(classDescription, newClassDescription);
             this.props.setCompoundClasses(descriptionToSet);
-            var newCurrentClass = e.target.id;
             this.props.setCurrentCompoundClass(e.target.id);
         }
     }
@@ -93,14 +91,14 @@ class CompoundList extends React.Component {
 
     render() {
         var numMols = this.getNum();
-        var mol_string = "No mols found!!!";
+        var mol_string = "Loading...";
         if(numMols){
             mol_string = "Compounds to pick. Mol total: " + numMols
         }
         if(this.props.to_query=="" || this.props.to_query==undefined) {
             mol_string = ""
         }
-        if (this.props.currentVector != undefined) {
+        if (this.props.to_query != undefined) {
             var totArray = []
             totArray.push(<input id="1" key="CLASS_1" defaultValue={this.props.compoundClasses[1]} onKeyDown={ this.handleClassNaming }></input>)
             totArray.push(<input id="2" key="CLASS_2" defaultValue={this.props.compoundClasses[2]} onKeyDown={ this.handleClassNaming }></input>)
@@ -142,6 +140,8 @@ function mapStateToProps(state) {
       compoundClasses: state.selectionReducers.present.compoundClasses,
       currentCompoundClass: state.selectionReducers.present.currentCompoundClass,
       to_select: state.selectionReducers.present.to_select,
+      objectsInView: state.nglReducers.present.objectsInView,
+      querying: state.selectionReducers.present.querying,
   }
 }
 const mapDispatchToProps = {

js/components/generalComponents.js

@@ -158,7 +158,7 @@ export class GenericView extends React.Component{
         this.handleClick = this.handleClick.bind(this);
         this.not_selected_style = {width: props.width.toString+'px', height: props.height.toString()+'px'}
         this.old_url = ''
-        this.state = {isConfOn: false, isToggleOn: false, img_data: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="50px"><g>' +
+        this.state = {isToggleOn: false, img_data: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="50px"><g>' +
         '<circle cx="50" cy="0" r="5" transform="translate(5 5)"/>' +
         '<circle cx="75" cy="6.6987298" r="5" transform="translate(5 5)"/> ' +
         '<circle cx="93.3012702" cy="25" r="5" transform="translate(5 5)"/> ' +

js/components/header.js

@@ -9,7 +9,7 @@ import * as apiActions from "../actions/apiActions";
 import * as nglActions from "../actions/nglLoadActions";
 import {connect} from "react-redux";
 import * as nglObjectTypes from "../components/nglObjectTypes";
-import {withRouter, Link} from "react-router-dom";
+import {withRouter} from "react-router-dom";
 
 class Header extends React.Component {
 

js/components/modalLoadingScreen.js

@@ -5,7 +5,6 @@
 import React from "react";
 import {connect} from "react-redux";
 import ReactModal from "react-modal";
-import {Button, Well, Col, Row} from "react-bootstrap";
 
 const customStyles = {
     overlay : {

js/components/summaryView.js

@@ -209,7 +209,7 @@ class SummaryView extends React.Component{
             var vector_counter = 0;
             for (var vector in to_buy_by_vect[mol]) {
                 // TODO - something more meaningful for this name
-                var dock_name = f_name;
+                // var dock_name = f_name;
                 var smiles = to_buy_by_vect[mol][vector];
                 var csvContent = ""
                 smiles.forEach(function(smiles){

js/components/targetList.js

@@ -55,7 +55,7 @@ class TargetList extends GenericList {
     generateTargetObject(targetData) {
         // Now deal with this target
         var prot_to_load =  window.location.protocol + "//" + window.location.host + targetData.template_protein
-        if(prot_to_load!=undefined) {
+        if(JSON.stringify(prot_to_load)!=JSON.stringify(undefined)) {
             var out_object = {
                 "name": "PROTEIN_" + targetData.id.toString(),
                 "prot_url": prot_to_load,

js/configureStore.js

@@ -2,7 +2,7 @@
  * Created by abradley on 07/03/2018.
  */
 
-import {commpose, createStore, applyMiddleware} from "redux";
+import {createStore, applyMiddleware} from "redux";
 import thunkMiddleware from "redux-thunk";
 import {createLogger} from "redux-logger";
 import rootReducer from "./reducers/reducers";

js/containers/app.js

@@ -1,5 +1,4 @@
-import React, {Component} from "react";
-import {connect} from "react-redux";
+import React from "react";
 import {Grid} from "react-bootstrap";
 import Header from "../components/header";
 import {MyMenu} from "../components/menuView";

js/containers/fraggleBoxHolder.js

@@ -12,7 +12,7 @@ import SummaryView from "../components/summaryView";
 import CompoundList from '../components/compoundList';
 import NGLView from "../components/nglComponents";
 import NglViewerControls from "../components/nglViewerControls";
-import {Route, withRouter} from "react-router-dom";
+import {withRouter} from "react-router-dom";
 import * as nglLoadActions from "../actions/nglLoadActions";
 import ModalLoadingScreen from "../components/modalLoadingScreen";
 import HotspotList from "../components/hotspotList";

js/containers/previewHolder.js

@@ -61,7 +61,7 @@ class Preview extends Component {
                 this.props.setHighlighted(defaultSet)
             }
             else {
-                var indexToSet = Math.min(this.props.highlightedCompound["index"] + 1, this.props.this_vector_list[Object.keys(this.props.this_vector_list)].length - 1)
+                var indexToSet = Math.min(parseInt(this.props.highlightedCompound["index"]) + 1, this.props.this_vector_list[Object.keys(this.props.this_vector_list)].length - 1)
                 this.props.setHighlighted({
                     index: indexToSet,
                     smiles: this.props.this_vector_list[Object.keys(this.props.this_vector_list)][indexToSet]

js/utils/ngl_functions.js

@@ -118,7 +118,6 @@ class NGLFunctions {
 
     display_view(response) {
         var res = JSON.parse(response);
-        var title = res.title;
         this.setJsonView(res.scene);
     }
 

js/utils/util.js

@@ -28,29 +28,7 @@ function inspect(obj) {
         console.log(typeof obj);
     }
 }
-/**
- * Utility to function to check if two arrays are the same
- * @param a
- * @param b
- * @returns {boolean}
- */
-function arraysEqual(a, b) {
-    if (a === b) {
-        return true;
-    }
-    if (a == null || b == null) {
-        return false;
-    }
-    if (a.length != b.length) {
-        return false;
-    }
-    for (var i = 0; i < a.length; i += 1) {
-        if (a[i] !== b[i]) {
-            return false;
-        }
-    }
-    return true;
-}
+
 export function shuffle(a) {
     for (let i = a.length - 1; i > 0; i -= 1) {
         const j = Math.floor(Math.random() * (i + 1));