WIP New Feature: State recording

js/actions/actonTypes.js

@@ -52,4 +52,6 @@ export const GOT_FULL_GRAPH = 'GOT_FULL_GRAPH';
 export const SELECT_VECTOR = 'SELECT_VECTOR';
 export const SET_MOL = 'SET_MOL';
 export const SET_VECTOR_LIST = 'SET_VECTOR_LIST';
-export const SET_ORIENTATION = 'SET_ORIENTATION'
+export const SET_ORIENTATION = 'SET_ORIENTATION';
+// State broadcast
+export const NGL_ORIENTATION = 'NGL_ORIENTATION';

js/actions/nglLoadActions.js

@@ -2,8 +2,8 @@
  * Created by abradley on 03/03/2018.
  */
 import {LOAD_OBJECT, LOAD_OBJECT_SUCCESS, LOAD_OBJECT_FAILURE, OBJECT_LOADING,
-    DELETE_OBJECT, DELETE_OBJECT_FAILURE, DELETE_OBJECT_SUCCESS,DELETE_OBJECT_TYPE, 
-    SET_ORIENTATION} from './actonTypes'
+    DELETE_OBJECT, DELETE_OBJECT_FAILURE, DELETE_OBJECT_SUCCESS,
+    DELETE_OBJECT_TYPE} from './actonTypes'
 
 
 export const loadObject = function (group) {
@@ -20,15 +20,6 @@ export const objectLoading = function (group){
         type: OBJECT_LOADING,
         group: group
     };
-
-}
-
-export const setOrientation = function (orientation){
-    console.log("ACTIONS: " + orientation);
-        return {
-        type: SET_ORIENTATION,
-        orientation: orientation
-    };
 }
 
 export const loadObjectSuccess = function (group) {

js/actions/nglRenderActions.js

@@ -2,7 +2,8 @@
  * Created by abradley on 03/03/2018.
  */
 
-import {SET_COLOR, SET_STYLE, SET_SPIN, SET_WATER, SET_HYDROGEN } from './actonTypes'
+import {SET_COLOR, SET_STYLE, SET_SPIN, SET_WATER, SET_HYDROGEN, REQUEST_ORIENTATION, RECEIVE_ORIENTATION,
+    SET_ORIENTATION} from './actonTypes'
 
 export const setColor = function (color) {
     console.log("ACTIONS: " + color);
@@ -91,4 +92,26 @@ export const setAssemblyOptions = function (structure) {
         type: SET_ASSEMBLY_OPTIONS,
         assemblyOptions: options
     };
-}
+}
+
+export const requestOrientation = function (){
+    console.log("ACTIONS: orientation requested");
+    return {
+        type: REQUEST_ORIENTATION
+    };
+}
+
+export const receiveOrientation = function (){
+    console.log("ACTIONS: orientation received");
+    return {
+        type: RECEIVE_ORIENTATION
+    };
+}
+
+export const setOrientation = function (orientation){
+    console.log("ACTIONS: " + orientation);
+    return {
+        type: SET_ORIENTATION,
+        orientation: orientation
+    };
+}

js/actions/selectionActions.js

@@ -37,7 +37,6 @@ export const getFullGraph = function (item) {
 }
 
 
-
 export const gotFullGraph = function (result){
     console.log("ACTIONS: "+ result)
     return {

js/components/compoundView.js

@@ -45,6 +45,8 @@ class CompoundView extends GenericView {
         this.loadFromServer(this.props.width,this.props.height);
         this.checkInList();
     }
+
+
     render() {
         const svg_image = <SVGInline svg={this.state.img_data}/>;
         this.current_style = this.state.isToggleOn ? this.selected_style : this.not_selected_style;

js/components/nglComponents.js

@@ -238,8 +238,6 @@ export class NGLView extends React.Component {
         }
     }
 
-
-
     generateSphere(data,selected=false,listType=listTypes.MOLGROUPS,view="summary_view"){
         var sele = ""
         var color = [0,0,1]
@@ -291,6 +289,12 @@ export class NGLView extends React.Component {
         }
     }
 
+
+//    setOrientation(){
+//        var orientation = this.stage.viewerControls.getOrientation();
+//        this.props.
+//    }
+
     /**
      * Function to deal with the logic of showing molecules
      */
@@ -343,7 +347,7 @@ function mapStateToProps(state) {
       objectsToDelete: state.nglReducers.objectsToDelete,
       objectsLoading: state.nglReducers.objectsLoading,
       objectsInView: state.nglReducers.objectsInView,
-      orientation: state.nglReducers.orientation,
+      nglOrientation: state.nglReducers.nglOrientation,
       objectsPicked: state.nglReducers.objectsPicked
   }
 }

js/components/stateView.js

@@ -0,0 +1,156 @@
+/**
+ * Created by rgillams on 22/05/2018.
+ */
+import React from 'react';
+import { connect } from 'react-redux'
+import { Button, Well, Col, Row } from 'react-bootstrap'
+import fetch from 'cross-fetch'
+import * as nglactions from '../actions/nglLoadActions'
+import { Stage, Shape, concatStructures, Selection } from 'ngl';
+
+class StateView extends React.Component{
+    constructor(props) {
+        super(props);
+        this.handleStateState = this.handleStateState.bind(this);
+        this.handleStateLoading = this.handleStateLoading.bind(this);
+        this.handlePostState = this.handlePostState.bind(this);
+        this.handleRenderState = this.handleRenderState.bind(this);
+        this.handleJson = this.handleJson.bind(this);
+//        this.handleStateOrientation = this.handleStateOrientation.bind(this);
+        this.handleGetOrientation = this.handleGetOrientation.bind(this);
+    }
+
+    handleGetOrientation() {
+        var orientation_requested = this.props.orientation_requested;
+        this.setState(prevState => ({orientation_requested: !prevState.orientation_requested}))
+        var orientation_acquired = JSON.stringify(this.props.orientation_acquired);
+        var orientationStates = {
+            requestOrientation: orientation_requested,
+            receiveOrientation: orientation_acquired
+        };
+        return alert(JSON.stringify(orientationStates))
+    }
+
+    handleStateState(){
+        var stateState = JSON.stringify(this.props.objects_in_view);
+        const uuidv4 = require('uuid/v4');
+        var TITLE = 'need to define title';
+        var formattedState = {
+            uuid: uuidv4(),
+            title: TITLE,
+            scene: stateState
+        };
+        return alert(JSON.stringify(formattedState))
+    }
+
+/*    handleStateOrientation(){
+        var curr_orient = this.props.set_orientation();
+        for (i = 0; i < curr_orient["elements"].length; i++) {
+            curr_orient["elements"][i] = ori["elements"][i];
+        }
+        this.stage.viewerControls.orient(curr_orient);
+        this.stage.setFocus(focus_var);
+        var stateOrientation = JSON.stringify(this.props.ngl_orientation);
+        var formattedOrientation = {
+            orientation: stateOrientation
+        };
+        return alert(JSON.stringify(curr_orient))
+    }
+*/
+    handleStateLoading(){
+        var stateLoading = JSON.stringify(this.props.objects_to_load);
+        var TITLE = 'To Load';
+        var formattedState = {
+            title: TITLE,
+            scene: stateLoading
+        };
+        return alert(JSON.stringify(formattedState))
+    }
+
+    handlePostState(){
+        var stateState = JSON.stringify(this.props.objects_in_view);
+        const uuidv4 = require('uuid/v4');
+        var TITLE = 'need to define title';
+        var formattedState = {
+            uuid: uuidv4(),
+            title: TITLE,
+            scene: stateState
+        };
+        fetch("/api/viewscene/", {
+            method: "post",
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(formattedState)
+        }).then(function(response) {
+            return response.json();
+        }).then(function(myJson) {
+            // window.location.protocol + window.location.hostname + "/api/viewscene/" + myJson.id.toString()
+            alert(myJson.id.toString())
+        });
+    }
+
+    handleJson(myJson){
+        var myDict = JSON.parse(myJson.scene)
+        for(var key in myDict){
+            this.props.load_object(myDict[key]);
+        }
+    };
+
+    handleRenderState(){
+        var pk = document.getElementById("state_selector").value;
+        fetch("/api/viewscene/"+pk)
+        .then(function(response) {
+            return response.json();
+        }).then(json => this.handleJson(json))
+    }
+        render(){
+        return <div>
+            <Well>
+                <Row>
+                <Col xs={6} md={6}>
+                    <Button bsSize="large" bsStyle="success" onClick={this.handlePostState}>Save State</Button>
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <h2><b>Type state P-Key here:</b></h2>
+                    <input id="state_selector" type="text" name="name" />
+                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <Button bsSize="large" bsStyle="success" onClick={this.handleRenderState}>Reload State</Button>
+                    <Button bsSize="large" bsStyle="success" onClick={this.handleGetOrientation}>Orientation</Button>
+                    <h3><b>Current State:</b></h3>
+                    <h3>Last saved pk:</h3>
+                    <h3>Target on? <b>{this.props.target_on}</b></h3>
+                    <h3>Number of objects? <b>{Object.keys(this.props.objects_in_view).length}</b></h3>
+                    <h3>Orientation? <b>{JSON.stringify(this.props.ngl_orientation)}</b></h3>
+                    <h3>Stringified state: <b>{JSON.stringify(this.props.objects_in_view)}</b></h3>
+                </Col>
+                </Row>
+            </Well>
+        </div>
+    }
+}
+function mapStateToProps(state) {
+  return {
+      to_buy_list: state.selectionReducers.to_buy_list,
+      to_select: state.selectionReducers.to_select,
+      this_vector_list: state.selectionReducers.this_vector_list,
+      vector_list: state.selectionReducers.vector_list,
+      querying: state.selectionReducers.querying,
+      to_query: state.selectionReducers.to_query,
+      target_on: state.apiReducers.target_on,
+      orientation: state.nglReducers.spin,
+      color: state.nglReducers.color,
+      objects_in_view: state.nglReducers.objectsInView,
+      objects_to_load: state.nglReducers.objectsToLoad,
+      orientation_requested: state.nglReducers.orientationRequested,
+      orientation_acquired: state.nglReducers.orientationAcquired,
+      ngl_orientation: state.nglReducers.nglOrientation
+  }
+}
+
+const mapDispatchToProps = {
+    load_object: nglactions.loadObject,
+    set_orientation: nglactions.setOrientation
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(StateView);

js/components/summaryView.js

@@ -178,8 +178,6 @@ function mapStateToProps(state) {
   }
 }
 
-
-
 const mapDispatchToProps = {
     appendToBuyList: selectionActions.appendToBuyList,
     selectVector: selectionActions.selectVector,

js/containers/app.js

@@ -30,7 +30,7 @@ class App extends Component {
     render() {
       return  (
       <div id="outer-container">
-          <MyMenu right pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } /> START HERE
+          <MyMenu right pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } /> BEGIN HERE
           <LoadingBar />
           <Grid fluid id="page-wrap">
               <Header/>

js/containers/previewHolder.js

@@ -9,6 +9,7 @@ import MolGroupList from '../components/molGroupList';
 import MoleculeList from '../components/moleculeList';
 import MolGroupSlider from '../components/molGroupSlider'
 import SummaryView from '../components/summaryView';
+import StateView from '../components/stateView';
 
 
 class Preview extends Component {
@@ -30,6 +31,7 @@ class Preview extends Component {
               </Col>
               <Col xs={5} md={5} >
                   <NGLView div_id="major_view" height="600px"/>
+                  <StateView />
               </Col>
               <Col xs={4} md={4}>
                   <SummaryView />

js/reducers/nglReducers.js

@@ -14,9 +14,11 @@ const INITIALSTATE = {
     spin: false,
     water: true,
     hydrogen: true,
+    orientationRequested: false,
+    orientationAcquired: false,
+    nglOrientation: {}
 }
 
-
 export default function nglReducers(state = INITIALSTATE, action) {
     console.log('REDUCERS FIRED OFF. OLD STATE');
     console.log(state);
@@ -130,9 +132,19 @@ export default function nglReducers(state = INITIALSTATE, action) {
                 hydrogen: action.hydrogen
             });
 
-        case actions.SET_ORIENTATION:
+        case actions.REQUEST_ORIENTATION:
+            return Object.assign({}, state, {
+                orientationRequested : action.orientationRequested
+            });
+
+        case actions.RECEIVE_ORIENTATION:
+            return Object.assign({}, state, {
+                orientationAcquired : action.orientationAcquired
+            });
+
+        case actions.SET_NGL_ORIENTATION:
             return Object.assign({}, state, {
-                orientation: action.orientation
+                nglOrientation: action.nglOrientation
             });
         // Cases like: @@redux/INIT
         default:

js/reducers/reducers.js

@@ -1,17 +1,14 @@
 /**
  * Created by abradley on 07/03/2018.
  */
-import { combineReducers } from 'redux'
+import { combineReducers } from 'redux';
 import apiReducers from './apiReducers';
 import nglReducers from './nglReducers';
 import selectionReducers from './selectionReducers';
 import renderReducers from './renderReducers';
-import { loadingBarReducer } from 'react-redux-loading-bar'
+import { loadingBarReducer } from 'react-redux-loading-bar';
 import {reducer as burgerMenu} from 'redux-burger-menu';
 
-
-
-
 const rootReducer = combineReducers({
     renderReducers,
     apiReducers,

js/reducers/selectionReducers.js

@@ -94,5 +94,3 @@ export default function selectionReducers(state = INITIALSTATE, action) {
             return state;
     }
 }
-
-

package.json

@@ -54,7 +54,8 @@
     "redux-burger-menu": "^0.2.4",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.2.0",
-    "style-loader": "^0.20.2"
+    "style-loader": "^0.20.2",
+    "uuid": "^3.2.1"
   },
   "devDependencies": {
     "babel-core": "^6.26.0",