Update: Session Management (#34)

- browser bomb to warn of unsupported nature - add report error button to modal in case of no target available - add logos to header - set creation date as default title - rename session saving buttons and change saving modal text
xchem · Oct 23, 2018 · 4f17fff · 4f17fff
1 parent 6fbccde
commit 4f17fff
Show file tree

Hide file tree

Showing 13 changed files with 227 additions and 105 deletions.
diff --git a/js/components/browserBombModal.js b/js/components/browserBombModal.js
@@ -0,0 +1,86 @@
+/**
+ * Created by ricgillams on 14/06/2018.
+ */
+
+import React from "react";
+import {connect} from "react-redux";
+import ReactModal from "react-modal";
+import {Button} from 'react-bootstrap';
+
+const customStyles = {
+    overlay : {
+        zIndex: 50,
+        backgroundColor: 'rgba(0, 0, 0, 0.85)'
+    },
+    content : {
+        top: '50%',
+        left: '50%',
+        right: 'auto',
+        bottom: 'auto',
+        marginRight: '-20%',
+        transform: 'translate(-50%, -50%)',
+        border: '10px solid #7a7a7a'
+    }
+};
+
+export class BrowserBomb extends React.Component {
+    constructor(props) {
+        super(props);
+        this.closeModal = this.closeModal.bind(this);
+        this.checkBrowser = this.checkBrowser.bind(this);
+        this.state = {
+            currentBrowser: undefined,
+            notSupported: undefined
+        };
+    }
+
+    checkBrowser(){
+        if (typeof InstallTrigger !== 'undefined'){
+            this.setState(prevState => ({currentBrowser: "Firefox should be supported"}));
+            this.setState(prevState => ({notSupported: false}));
+        } else if (!!window.chrome && !!window.chrome.webstore){
+            this.setState(prevState => ({currentBrowser: "Chrome should be supported"}))
+            this.setState(prevState => ({notSupported: false}));
+        } else {
+            this.setState(prevState => ({currentBrowser: "This browser may not perform properly. Please consider using Firefox or Chrome."}))
+            this.setState(prevState => ({notSupported: true}));
+        }
+    }
+
+    closeModal(){
+        this.setState(prevState => ({notSupported:undefined}));
+    }
+
+    componentWillMount() {
+        ReactModal.setAppElement('body')
+        this.checkBrowser()
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.errorMessage != undefined){
+            this.setState(prevState => ({errorMessage: nextProps.errorMessage}))
+        }
+    }
+
+    render() {
+        return (
+            <ReactModal isOpen={this.state.notSupported} style={customStyles}>
+                <div>
+                    <h4>This browser is not supported by Fragalysis, please consider moving to
+                    <a href="https://www.google.com/chrome/"> Google Chrome</a> or <a href="https://www.mozilla.org/en-GB/firefox/">Mozilla Firefox.</a></h4>
+                    <Button bsSize="sm" bsStyle="success" onClick={this.closeModal}>Close</Button>
+                </div>
+            </ReactModal>
+        );
+    }
+}
+
+function mapStateToProps(state) {
+    return {
+    }
+}
+
+const mapDispatchToProps = {
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(BrowserBomb);
diff --git a/js/components/header.js b/js/components/header.js
@@ -11,14 +11,15 @@ import TargetList from "./targetList";
 import SessionManagement from "./sessionManagement";
 import {ErrorReport} from "./errorReport";
 
-
 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);
+        this.openXchem = this.openXchem.bind(this);
+        this.openDiamond = this.openDiamond.bind(this);
+        this.openSgc = this.openSgc.bind(this);
     }
 
     getViewUrl(pk, get_view) {
@@ -30,7 +31,7 @@ class Header extends React.Component {
     generateTargetObject(targetData) {
         // Now deal with this target
         var prot_to_load = targetData.protein_set[0]
-        if(prot_to_load!=undefined) {
+        if (prot_to_load != undefined) {
             var out_object = {
                 "name": "PROTEIN_" + prot_to_load.toString(),
                 "prot_url": this.getViewUrl(prot_to_load, "prot_from_pk"),
@@ -43,62 +44,76 @@ class Header extends React.Component {
 
     getTargetList() {
         var newArray = []
-        for(var key in this.props.target_id_list){
-        newArray.push(this.props.target_id_list[key].title)
+        for (var key in this.props.target_id_list) {
+            newArray.push(this.props.target_id_list[key].title)
         }
         return newArray;
     }
 
-
     selectTarget(option) {
         this.props.history.push("/viewer/react/preview/target/" + option)
     }
 
-  render() {
-      var landing = "/viewer/react/landing";
-      var login = "/accounts/login"
-      var logout = "/accounts/logout"
-      var new_ele;
-      var username = DJANGO_CONTEXT["username"];
-      if (username=="NOT_LOGGED_IN"){
-          new_ele =  <NavItem eventKey={1} href={login}>
-              <h5> Login </h5>
-          </NavItem>
-      }
-      else{
-          new_ele = <NavItem eventKey={1} href={logout}>
-              <h5><b>Hello {username}!</b> Logout.</h5>
-          </NavItem>
-      }
+    openXchem() {
+        window.location.href = 'https://www.diamond.ac.uk/Instruments/Mx/Fragment-Screening.html'
+    }
 
-    return <Navbar>
-          <Navbar.Header>
-              <Navbar.Brand>
-                  <h4>
-                      <a  href={landing}>FragalysisHome</a>
-                  </h4>
-              </Navbar.Brand>
-          </Navbar.Header>
-        <Nav pullLeft>
-            {new_ele}
-            <NavItem>
-                <SessionManagement/>
+    openDiamond() {
+        window.location.href = 'https://www.diamond.ac.uk/Home.html'
+    }
+
+    openSgc() {
+        window.location.href = 'https://www.sgc.ox.ac.uk/'
+    }
+
+    render() {
+        var landing = "/viewer/react/landing";
+        var login = "/accounts/login"
+        var logout = "/accounts/logout"
+        var new_ele;
+        var username = DJANGO_CONTEXT["username"];
+        if (username == "NOT_LOGGED_IN") {
+            new_ele = <NavItem eventKey={1} href={login}>
+                <h5> Login </h5>
             </NavItem>
-        </Nav>
-        <Nav pullRight>
-            <NavItem>
-                <ErrorReport />
+        }
+        else {
+            new_ele = <NavItem eventKey={1} href={logout}>
+                <h5><b>Hello {username}!</b> Logout.</h5>
             </NavItem>
-        </Nav>
-        <TargetList key="TARGLIST" render={false}/>
-      </Navbar>
-  }
+        }
+
+        return <Navbar>
+            <Navbar.Header>
+                <Navbar.Brand>
+                    <h4>
+                        <a href={landing}>FragalysisHome</a>
+                    </h4>
+                </Navbar.Brand>
+            </Navbar.Header>
+            <Nav pullLeft>
+                {new_ele}
+                <NavItem>
+                    <SessionManagement/>
+                </NavItem>
+            </Nav>
+            <Nav pullRight>
+                <NavItem>
+                    <img src={require('../img/xchemLogo.png')} width="67" height="31" onClick={this.openXchem}/>
+                    <img src={require('../img/dlsLogo.png')} width="100" height="31" onClick={this.openDiamond}/>
+                    <img src={require('../img/sgcLogo.png')} width="65" height="31" onClick={this.openSgc}/>
+                    <ErrorReport/>
+                </NavItem>
+            </Nav>
+            <TargetList key="TARGLIST" render={false}/>
+        </Navbar>
+    }
 }
 
 function mapStateToProps(state) {
-  return {
-      target_id_list: state.apiReducers.present.target_id_list,
-  }
+    return {
+        target_id_list: state.apiReducers.present.target_id_list,
+    }
 }
 const mapDispatchToProps = {
 }

diff --git a/js/components/landing.js b/js/components/landing.js
@@ -5,6 +5,7 @@ import {Col, Row} from "react-bootstrap";
 import React from "react";
 import {connect} from "react-redux";
 import TargetList from "./targetList";
+import {BrowserBomb} from "./browserBombModal";
 
 export class Welcome extends React.Component {
     constructor(props) {
@@ -34,6 +35,7 @@ export class Welcome extends React.Component {
                       <TargetList key="TARGLIST"/>
                   </div>
               </Col>
+                <BrowserBomb/>
           </Row>
         )
     }

diff --git a/js/components/modalErrorDisplay.js b/js/components/modalErrorDisplay.js
@@ -53,7 +53,7 @@ export class ModalErrorMessage extends React.Component {
                 <ReactModal isOpen={this.props.savingState} style={customStyles}>
                     <div>
                         <h3>Error occurred during state saving. Please contact Fragalysis support!</h3>
-                        <Button bsSize="large" bsStyle="success" onClick={this.closeModal}>Close</Button>
+                        <Button bsSize="sm" bsStyle="success" onClick={this.closeModal}>Close</Button>
                     </div>
                 </ReactModal>
             );

diff --git a/js/components/modalStateSave.js b/js/components/modalStateSave.js
@@ -5,7 +5,7 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";
 import ReactModal from "react-modal";
-import {Tooltip, OverlayTrigger, ButtonToolbar} from 'react-bootstrap';
+import {Tooltip, OverlayTrigger, ButtonToolbar, Row} from 'react-bootstrap';
 import * as apiActions from "../actions/apiActions";
 import Clipboard from 'react-clipboard.js';
 
@@ -70,34 +70,34 @@ export class ModalStateSave extends Component {
         );
         var urlToCopy = "";
         var information = "";
-        var text = "";
         if (this.state.fraggleBoxLoc != undefined) {
             if (this.props.savingState == "savingSnapshot") {
                 urlToCopy = window.location.protocol + "//" + window.location.hostname + "/viewer/react/snapshot/" + this.props.latestSnapshot.slice(1, -1);
-                information = "A snapshot of the current point in time has been saved and can ";
-                text = ". This snapshot cannot be overwritten.";
+                information = "A permanent, fixed snapshot of the current state has been saved ";
             } else if (this.props.savingState == "savingSession") {
                 urlToCopy = window.location.protocol + "//" + window.location.hostname + "/viewer/react/fragglebox/" + this.props.latestSession.slice(1, -1);
-                information = "A new session has been generated and can ";
-                text = ". The session can be overwritten.";
+                information = "A new session has been generated ";
             } else if (this.props.savingState == "overwritingSession") {
                 urlToCopy = window.location.protocol + "//" + window.location.hostname + "/viewer/react/fragglebox/" + this.props.latestSession.slice(1, -1);
-                information = "Your session has been updated and can still ";
-                text = ". This has overwritten the session record.";
+                information = "Your session has been overwritten and remains ";
             }
             return (
                 <ReactModal isOpen={this.props.savingState.startsWith("saving") || this.props.savingState.startsWith("overwriting")} style={customStyles}>
-                    <strong>
-                        {information} be viewed <a href={urlToCopy}>here </a>{text}
-                    </strong>
-                    <ButtonToolbar>
-                        <OverlayTrigger trigger="click" placement="bottom" overlay={tooltip}>
-                            <Clipboard option-container="modal" data-clipboard-text={urlToCopy}
-                                       button-title="Copy me!">Copy link</Clipboard>
-                        </OverlayTrigger>
-                        <button onClick={this.openFraggleLink}>Open in new tab</button>
-                        <button onClick={this.closeModal}>Close</button>
-                    </ButtonToolbar>
+                    <Row>
+                        <strong>
+                            {information} be viewed <a href={urlToCopy}>here.</a>
+                        </strong>
+                    </Row>
+                    <Row>
+                        <ButtonToolbar>
+                            <OverlayTrigger trigger="click" placement="bottom" overlay={tooltip}>
+                                <Clipboard option-container="modal" data-clipboard-text={urlToCopy}
+                                           button-title="Copy me!">Copy link</Clipboard>
+                            </OverlayTrigger>
+                            <button onClick={this.openFraggleLink}>Open in new tab</button>
+                            <button onClick={this.closeModal}>Close</button>
+                        </ButtonToolbar>
+                    </Row>
                 </ReactModal>
             );
         } else {

diff --git a/js/components/modalTargetUnrecognised.js b/js/components/modalTargetUnrecognised.js
@@ -8,6 +8,7 @@ import ReactModal from "react-modal";
 import {Button} from 'react-bootstrap';
 import * as apiActions from "../actions/apiActions";
 import TargetList from "./targetList";
+import {ErrorReport} from "./errorReport";
 
 const customStyles = {
     overlay : {
@@ -49,29 +50,27 @@ export class ModalTargetUnrecognised extends React.Component {
     }
 
     render() {
-        if (this.state.targetUnrecognised == true) {
-            if(this.state.targetListLength == 0) {
-                return (
-                    <ReactModal isOpen={this.state.targetUnrecognised} style={customStyles}>
-                        <div>
-                            <h3>No targets available.<br/>Please contact Fragalysis Support!</h3>
-                            <Button bsSize="large" bsStyle="success" onClick={this.closeModal}>Close</Button>
-                        </div>
-                    </ReactModal>
-                );
-            } else {
-                return (
-                    <ReactModal isOpen={this.state.targetUnrecognised} style={customStyles}>
-                        <div>
-                            <h3>Target was not recognised. <br/> Please select a target:</h3>
-                            <TargetList key="TARGLIST"/>
-                            <Button bsSize="large" bsStyle="success" onClick={this.closeModal}>Close</Button>
-                        </div>
-                    </ReactModal>
-                );
-            }
+        if (this.state.targetListLength == 0) {
+            return (
+                <ReactModal isOpen={this.state.targetUnrecognised} style={customStyles}>
+                    <div>
+                        <h3>The target was not recognised and there are no other available targets.</h3>
+                        <Button bsSize="sm" bsStyle="success" onClick={this.closeModal}>Close</Button>
+                        <ErrorReport />
+                    </div>
+                </ReactModal>
+            );
         } else {
-            return null;
+            return (
+                <ReactModal isOpen={this.state.targetUnrecognised} style={customStyles}>
+                    <div>
+                        <h3>Target was not recognised. <br/> Please select a target:</h3>
+                        <TargetList key="TARGLIST"/>
+                        <Button bsSize="sm" bsStyle="success" onClick={this.closeModal}>Close</Button>
+                        <ErrorReport/>
+                    </div>
+                </ReactModal>
+            );
         }
     }
 }

diff --git a/js/components/refinementOutcome.js b/js/components/refinementOutcome.js
@@ -59,7 +59,7 @@ class RefinementOutcome extends React.Component{
             return <Label bsStyle="success">{"Deposited"}</Label>;
         }
         else if (this.state.refinementOutcome==5){
-            return <Label bsStyle="warning">{"Ready"}</Label>;
+            return <Label bsStyle="warning">{"DepoReady"}</Label>;
         }
         else if (this.state.refinementOutcome==4){
             return <Label bsStyle="danger">{"CompChem"}</Label>;