Merge a semi-stable frontend (#2)

Development of code further to usable frontend.

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: 20px;
+	height: 1px;
+	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: 15px; }
+.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: 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; }
+.quick .toggle-group { transition: none; -webkit-transition: none; }

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';

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)

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);

js/components/compoundList.js

@@ -6,6 +6,9 @@ import React from 'react';
 import { connect } from 'react-redux'
 import CompoundView from './compoundView';
 
+const molStyle = {height: "400px",
+    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(<CompoundView height={100} width={100} key={ele+"__"+key} data={input_data}/>)
             }
-            totArray.push(<Row key={key}>{retArray}</Row>)
+            totArray.push(<Row style={molStyle} key={key}>{retArray}</Row>)
         }
         return totArray;
     }

js/components/generalComponents.js

@@ -3,10 +3,9 @@
  */
 import SVGInline from "react-svg-inline"
 import React from 'react';
-import { ListGroup, Col } 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) {
     return <h1>FILL ME UP PLEASE</h1>;
 }
@@ -132,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: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="50px" height="50px"><g>' +
@@ -150,6 +148,7 @@ export class GenericView extends React.Component{
         '<circle cx="25" cy="6.6987298" r="5" transform="translate(5 5)"/> ' +
         '<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 55 55" to="360 55 55" dur="3s" repeatCount="indefinite" /> </g> ' +
         '</svg>'}
+        this.selected_style = {width: props.width.toString+'px', height: props.height.toString()+'px', backgroundColor: "#B7C185"}
   }
 
     loadFromServer(width,height) {
@@ -195,4 +194,70 @@ export class GenericView extends React.Component{
         this.current_style = this.state.isToggleOn ? this.selected_style : this.not_selected_style;
         return <div onClick={this.handleClick} style={this.current_style}>{svg_image}</div>
     }
+}
+
+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: -1, progress: 0}
+        this.slider_name = "DEFAULT"
+    }
+
+    render() {
+        this.progress = this.state.progress;
+        return <Well bsSize="small">
+                <h3>{this.slider_name} Selector</h3>
+                <Pager>
+                <Pager.Item onClick={this.handleBackward}>Previous</Pager.Item>{' '}
+                <Pager.Item onClick={this.handleForward}>Next</Pager.Item>
+            </Pager>
+                <ProgressBar active now={this.state.progress}/>
+            </Well>;
+    }
+
+    handleForward(){
+        var selected = this.state.currentlySelected;
+        if (selected<this.props.object_list.length-1){
+            selected+=1
+            this.handleChange(selected);
+        }
+    }
+    handleBackward(){
+        var selected = this.state.currentlySelected;
+        if (selected>0){
+            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(){
+        setInterval(this.checkForUpdate,50);
+    }
+
 }

js/components/header.js

@@ -3,10 +3,92 @@
  */
 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'
+import * as nglObjectTypes from '../components/nglObjectTypes'
+
+class Header extends React.Component {
+
+    constructor(props){
+        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(targetData){
+        // 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){
+        newArray.push(this.props.target_id_list[key].title)
+        }
+        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);
+                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;
+            }
+        }
+    }
+
+
 
-export default class Header extends React.Component {
   render() {
-    return <div>
-      </div>
+    return <Navbar>
+                <Typeahead
+                    labelKey="name"
+                    onOptionSelected={this.selectTarget}
+                    options={this.getTargetList()}
+                    placeholder="Choose a target..."
+                />
+      </Navbar>
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+      target_id_list: state.apiReducers.target_id_list,
+      target_on: state.apiReducers.target_on
   }
-}
+}
+const mapDispatchToProps = {
+    setMoleculeList: apiActions.setMoleculeList,
+    deleteObject: nglActions.deleteObject,
+    loadObject: nglActions.loadObject,
+    setTargetOn: apiActions.setTargetOn,
+}
+export default connect(mapStateToProps, mapDispatchToProps)(Header)

js/components/menu.js

@@ -1,7 +1,7 @@
 /**
  * Created by abradley on 20/03/2018.
  */
-import {slide 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);