Added Contributors

js/components/funders/fundersModal.js

@@ -4,7 +4,7 @@
 
 import React, { memo } from 'react';
 import Modal from '../common/Modal';
-import { Grid, makeStyles } from '@material-ui/core';
+import { Grid, makeStyles, Typography } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
   image: {
@@ -16,7 +16,7 @@ const useStyles = makeStyles(theme => ({
     cursor: 'pointer',
     margin: 'auto',
     display: 'block',
-    maxWidth: '95%',
+    maxWidth: '72%',
     maxHeight: '100%'
   }
 }));
@@ -29,53 +29,68 @@ export const FundersModal = memo(({ openModal, onModalClose }) => {
     onModalClose();
   }
 
+  const openLink = link => {
+    // window.location.href = link;
+    window.open(link, 'blank');
+  };
+
+  // funded by
   const openXchem = () => {
-    // window.location.href = 'https://www.diamond.ac.uk/Instruments/Mx/Fragment-Screening.html';
-    window.open('https://www.diamond.ac.uk/Instruments/Mx/Fragment-Screening.html', 'blank');
+    openLink('https://www.diamond.ac.uk/Instruments/Mx/Fragment-Screening.html');
   };
   const openDls = () => {
-    // window.location.href = 'https://www.diamond.ac.uk/Home.html';
-    window.open('https://www.diamond.ac.uk/Home.html', 'blank');
+    openLink('https://www.diamond.ac.uk/Home.html');
   };
   const openSgc = () => {
-    // window.location.href = 'https://www.sgc.ox.ac.uk/';
-    window.open('https://www.sgc.ox.ac.uk/', 'blank');
+    openLink('https://www.sgc.ox.ac.uk/');
   };
   const openInext = () => {
-    // window.location.href = 'http://www.inext-eu.org/';
-    window.open('http://www.inext-eu.org/', 'blank');
+    openLink('http://www.inext-eu.org/');
   };
   const openJff = () => {
-    // window.location.href = 'https://researchsupport.admin.ox.ac.uk/funding/internal/jff';
-    window.open('https://researchsupport.admin.ox.ac.uk/funding/internal/jff', 'blank');
+    openLink('https://researchsupport.admin.ox.ac.uk/funding/internal/jff');
   };
   const openNf = () => {
-    // window.location.href = 'https://www.newtonfund.ac.uk/';
-    window.open('https://www.newtonfund.ac.uk/', 'blank');
+    openLink('https://www.newtonfund.ac.uk/');
   };
   const openMrc = () => {
-    // window.location.href = 'https://mrc.ukri.org/';
-    window.open('https://mrc.ukri.org/', 'blank');
+    openLink('https://mrc.ukri.org/');
   };
   const openWt = () => {
-    // window.location.href = 'https://wellcome.ac.uk/';
-    window.open('https://wellcome.ac.uk/', 'blank');
+    openLink('https://wellcome.ac.uk/');
   };
   const openUltradd = () => {
-    // window.location.href = 'https://ultra-dd.org/';
-    window.open('https://ultra-dd.org/', 'blank');
+    openLink('https://ultra-dd.org/');
   };
   const openImi = () => {
-    // window.location.href = 'https://www.imi.europa.eu/';
-    window.open('https://www.imi.europa.eu/', 'blank');
+    openLink('https://www.imi.europa.eu/');
   };
   const openHorizon = () => {
-    // window.location.href = 'https://ec.europa.eu/programmes/horizon2020/';
-    window.open('https://ec.europa.eu/programmes/horizon2020/', 'blank');
+    openLink('https://ec.europa.eu/programmes/horizon2020/');
+  };
+  const openJanssen = () => {
+    openLink('https://www.janssen.com/');
+  };
+  // contributors and collaborators
+  const openM2ms = () => {
+    openLink('https://www.en.m2ms.sk/');
+  };
+  const openInformatics = () => {
+    openLink('https://www.informaticsmatters.com/');
+  };
+  const openAcellera = () => {
+    openLink('https://www.acellera.com/');
+  };
+  const openOxrse = () => {
+    openLink('https://www.rse.ox.ac.uk/');
+  };
+  const openMolsoft = () => {
+    openLink('https://www.molsoft.com/');
   };
 
   return (
     <Modal open={openModal} onClose={() => onModalClose()}>
+      <Typography variant="h5">Funded by:</Typography>
       <Grid container justify="center" alignItems="center">
         <Grid item xs={4} md={4} className={classes.image}>
           <img src={require('../../img/xchemLogo.png')} className={classes.img} onClick={() => openXchem()} />
@@ -99,17 +114,45 @@ export const FundersModal = memo(({ openModal, onModalClose }) => {
           <img src={require('../../img/jffLogo.jpg')} className={classes.img} onClick={() => openJff()} />
         </Grid>
         <Grid item xs={4} md={4} className={classes.image}>
-          <img src={require('../../img/nfLogo.png')} className={classes.img} onClick={() => openNf()} />
+          <img src={require('../../img/ultraddLogo.png')} className={classes.img} onClick={() => openUltradd()} />
         </Grid>
         <Grid item xs={4} md={4} className={classes.image}>
-          <img src={require('../../img/ultraddLogo.png')} className={classes.img} onClick={() => openUltradd()} />
+          <img src={require('../../img/nfLogo.png')} className={classes.img} onClick={() => openNf()} />
         </Grid>
         <Grid item xs={4} md={4} className={classes.image}>
           <img src={require('../../img/imiLogo.png')} className={classes.img} onClick={() => openImi()} />
         </Grid>
         <Grid item xs={4} md={4} className={classes.image}>
           <img src={require('../../img/horizon2020Logo.jpg')} className={classes.img} onClick={() => openHorizon()} />
         </Grid>
+        <Grid item xs={4} md={4} className={classes.image}>
+          <img src={require('../../img/janssenLogo.png')} className={classes.img} onClick={() => openJanssen()} />
+        </Grid>
+      </Grid>
+      <Typography variant="h5">Contributors and collaborators:</Typography>
+      <Grid container justify="center" alignItems="center">
+        <Grid item xs={4} md={4} className={classes.image}>
+          <img src={require('../../img/m2msLogo.png')} className={classes.img} onClick={() => openM2ms()} />
+        </Grid>
+        <Grid item xs={4} md={4} className={classes.image}>
+          <img
+            src={require('../../img/informaticsLogo.png')}
+            className={classes.img}
+            onClick={() => openInformatics()}
+          />
+        </Grid>
+        <Grid item xs={4} md={4} className={classes.image}>
+          <img src={require('../../img/acelleraLogo.png')} className={classes.img} onClick={() => openAcellera()} />
+        </Grid>
+        <Grid item xs={4} md={4} className={classes.image}>
+          <img src={require('../../img/oxrseLogo.png')} className={classes.img} onClick={() => openOxrse()} />
+        </Grid>
+        <Grid item xs={4} md={4} className={classes.image}>
+          <img src={require('../../img/molsoftLogo.png')} className={classes.img} onClick={() => openMolsoft()} />
+        </Grid>
+        <Grid item xs={4} md={4} className={classes.image}>
+          <img src={require('../../img/janssenLogo.png')} className={classes.img} onClick={() => openJanssen()} />
+        </Grid>
       </Grid>
     </Modal>
   );

js/components/header/index.js

@@ -251,7 +251,7 @@ export default memo(
                     size="small"
                     onClick={() => setOpenFunders(true)}
                   >
-                    Supported by
+                    Contributors
                   </Button>
                 </Grid>
               </Grid>
@@ -310,7 +310,7 @@ export default memo(
                 <ListItemIcon>
                   <SupervisorAccount />
                 </ListItemIcon>
-                <ListItemText primary="Supported by" />
+                <ListItemText primary="Contributors" />
               </ListItem>
               <Divider />
               {authListItem}

js/components/landing/Landing.js

@@ -9,8 +9,9 @@ import { connect } from 'react-redux';
 import * as apiActions from '../../reducers/api/actions';
 import * as selectionActions from '../../reducers/selection/actions';
 import { DJANGO_CONTEXT } from '../../utils/djangoContext';
+import { resetCurrentCompoundsSettings } from '../preview/compounds/redux/actions';
 
-const Landing = memo(({ resetSelectionState, resetTargetState }) => {
+const Landing = memo(({ resetSelectionState, resetTargetState, resetCurrentCompoundsSettings }) => {
   let text_div;
 
   if (DJANGO_CONTEXT['authenticated'] === true) {
@@ -30,7 +31,8 @@ const Landing = memo(({ resetSelectionState, resetTargetState }) => {
   useEffect(() => {
     resetTargetState();
     resetSelectionState();
-  }, [resetTargetState, resetSelectionState]);
+    resetCurrentCompoundsSettings(true);
+  }, [resetTargetState, resetSelectionState, resetCurrentCompoundsSettings]);
 
   return (
     <Grid container spacing={2}>
@@ -63,7 +65,8 @@ function mapStateToProps(state) {
 }
 const mapDispatchToProps = {
   resetSelectionState: selectionActions.resetSelectionState,
-  resetTargetState: apiActions.resetTargetState
+  resetTargetState: apiActions.resetTargetState,
+  resetCurrentCompoundsSettings
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Landing);

js/components/nglView/nglProvider.js

@@ -18,7 +18,7 @@ export const NglProvider = memo(props => {
 
   const unregisterNglView = id => {
     if (nglViewList.filter(ngl => ngl.id === id).length === 0) {
-      console(new Error('Cannot remove NGL View with given ID! ', id));
+      console.log(new Error('Cannot remove NGL View with given ID! ', id));
     } else {
       for (let i = 0; i < nglViewList.length; i++) {
         if (nglViewList[i].id === id) {
@@ -38,7 +38,7 @@ export const NglProvider = memo(props => {
       case 1:
         return filteredList[0];
       default:
-        console(new Error('Cannot found NGL View with given ID!'));
+        console.log(new Error('Cannot found NGL View with given ID!'));
         break;
     }
   };

js/components/preview/Preview.js

@@ -18,6 +18,7 @@ import { withLoadingProtein } from './withLoadingProtein';
 import { withSessionManagement } from '../session/withSessionManagement';
 import { useDispatch } from 'react-redux';
 import { removeAllNglComponents } from '../../reducers/ngl/actions';
+import { resetCurrentCompoundsSettings } from './compounds/redux/actions';
 //import HotspotList from '../hotspot/hotspotList';
 
 const hitNavigatorWidth = 504;
@@ -84,6 +85,8 @@ const Preview = memo(({ isStateLoaded, headerHeight }) => {
     // Unmount Preview - reset NGL state
     return () => {
       dispatch(removeAllNglComponents());
+      dispatch(resetCurrentCompoundsSettings(true));
+      console.log(' Unmount Preview ');
     };
   }, [dispatch]);
 

js/components/preview/compounds/compoundList.js

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { CompoundView } from './compoundView';
 import { Panel } from '../../common/Surfaces/Panel';
 import { Button } from '../../common/Inputs/Button';
-import { Grid, Box, makeStyles, TextField, useTheme, CircularProgress } from '@material-ui/core';
+import { Grid, Box, makeStyles, TextField, CircularProgress } from '@material-ui/core';
 import { SelectAll, Delete } from '@material-ui/icons';
 import {
   clearAllSelectedCompounds,
@@ -18,16 +18,40 @@ import {
 import { compoundsColors } from './redux/constants';
 // import { getTotalCountOfMolecules } from '../../../reducers/selection/selectors';
 import InfiniteScroll from 'react-infinite-scroller';
-import { getCanLoadMoreCompounds, getCompoundClasses, getCompoundListOffset } from './redux/selectors';
+import { getCanLoadMoreCompounds, getCompoundListOffset } from './redux/selectors';
 import { NglContext } from '../../nglView/nglProvider';
 import { VIEWS } from '../../../constants/constants';
+import classNames from 'classnames';
 
 const useStyles = makeStyles(theme => ({
   textField: {
     marginLeft: theme.spacing(1),
     marginRight: theme.spacing(1),
-    width: 50
+    width: 76,
+    '& .MuiFormLabel-root': {
+      paddingLeft: theme.spacing(1)
+    }
+  },
+  selectedInput: {
+    border: `2px groove ${theme.palette.primary.main}`
+  },
+
+  [compoundsColors.blue.key]: {
+    backgroundColor: compoundsColors.blue.color
+  },
+  [compoundsColors.red.key]: {
+    backgroundColor: compoundsColors.red.color
+  },
+  [compoundsColors.green.key]: {
+    backgroundColor: compoundsColors.green.color
+  },
+  [compoundsColors.purple.key]: {
+    backgroundColor: compoundsColors.purple.color
   },
+  [compoundsColors.apricot.key]: {
+    backgroundColor: compoundsColors.apricot.color
+  },
+
   paddingProgress: {
     padding: theme.spacing(1),
     width: 100,
@@ -43,13 +67,26 @@ const useStyles = makeStyles(theme => ({
 export const CompoundList = memo(({ height }) => {
   const classes = useStyles();
   const panelRef = useRef(null);
-  const theme = useTheme();
   const dispatch = useDispatch();
   const { getNglView } = useContext(NglContext);
   const majorViewStage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
 
   const to_query = useSelector(state => state.selectionReducers.to_query);
-  const compoundClasses = useSelector(state => getCompoundClasses(state));
+  // const compoundClasses = useSelector(state => getCompoundClasses(state));
+  const blueInput = useSelector(state => state.previewReducers.compounds[compoundsColors.blue.key]);
+  const redInput = useSelector(state => state.previewReducers.compounds[compoundsColors.red.key]);
+  const greenInput = useSelector(state => state.previewReducers.compounds[compoundsColors.green.key]);
+  const purpleInput = useSelector(state => state.previewReducers.compounds[compoundsColors.purple.key]);
+  const apricotInput = useSelector(state => state.previewReducers.compounds[compoundsColors.apricot.key]);
+
+  const inputs = {
+    [compoundsColors.blue.key]: blueInput,
+    [compoundsColors.red.key]: redInput,
+    [compoundsColors.green.key]: greenInput,
+    [compoundsColors.purple.key]: purpleInput,
+    [compoundsColors.apricot.key]: apricotInput
+  };
+
   const currentCompoundClass = useSelector(state => state.previewReducers.compounds.currentCompoundClass);
   // const totalCountOfMolecules = useSelector(state => getTotalCountOfMolecules(state));
   const canLoadMoreCompounds = useSelector(state => getCanLoadMoreCompounds(state));
@@ -58,17 +95,6 @@ export const CompoundList = memo(({ height }) => {
   const currentCompounds = useSelector(state => state.previewReducers.compounds.currentCompounds);
   const compoundsListOffset = useSelector(state => getCompoundListOffset(state));
 
-  Object.keys(compoundsColors).forEach(item => {
-    if (!!document.getElementById(item)) {
-      let inputId = document.getElementById(item);
-      inputId.style.backgroundColor = compoundsColors[item].color;
-      inputId.style.border = `1px solid ${theme.palette.primary.contrastText}`;
-      if (currentCompoundClass === item) {
-        inputId.style.border = `2px solid ${theme.palette.primary.main}`;
-      }
-    }
-  });
-
   let mol_string = currentCompounds.length + ' Compounds on vector to pick';
 
   if (to_query === '' || to_query === undefined) {
@@ -86,11 +112,16 @@ export const CompoundList = memo(({ height }) => {
                   <TextField
                     id={`${item}`}
                     key={`CLASS_${item}`}
-                    className={classes.textField}
+                    variant="standard"
+                    className={classNames(
+                      classes.textField,
+                      classes[item],
+                      currentCompoundClass === item && classes.selectedInput
+                    )}
                     label={compoundsColors[item].text}
                     onChange={e => dispatch(onChangeCompoundClassValue(e))}
                     onKeyDown={e => dispatch(onKeyDownCompoundClass(e))}
-                    value={compoundClasses[item] || ''}
+                    value={inputs[item] || ''}
                   />
                 </Grid>
               ))}

js/components/preview/compounds/redux/actions.js

@@ -1,5 +1,4 @@
 import { constants } from './constants';
-import { compounds } from './reducer';
 
 export const setCurrentCompounds = loadedCompounds => ({
   type: constants.SET_CURRENT_COMPOUNDS,
@@ -11,9 +10,15 @@ export const setCurrentPage = page => ({
   payload: page
 });
 
-export const resetCurrentCompoundsSettings = () => ({
-  type: constants.RESET_CURRENT_COMPOUNDS_SETTINGS
-});
+export const resetCurrentCompoundsSettings = (withCompoundClasses = false) => async dispatch => {
+  await dispatch({
+    type: constants.RESET_CURRENT_COMPOUNDS_SETTINGS
+  });
+
+  if (withCompoundClasses === true) {
+    dispatch(resetCompoundClasses());
+  }
+};
 
 export const updateCurrentCompound = ({ id, key, value }) => ({
   type: constants.UPDATE_COMPOUND,

js/components/preview/compounds/redux/dispatchActions.js

@@ -47,7 +47,11 @@ export const selectAllCompounds = () => (dispatch, getState) => {
 
 export const onChangeCompoundClassValue = event => (dispatch, getState) => {
   const state = getState();
-  const compoundClasses = state.previewReducers.compounds.compoundClasses;
+  const compoundClasses = {};
+  Object.keys(compoundsColors).forEach(color => {
+    compoundClasses[color] = state.previewReducers.compounds[color];
+  });
+  // const compoundClasses = state.previewReducers.compounds.compoundClasses;
 
   const newClassDescription = { [event.target.id]: event.target.value };
   const descriptionToSet = Object.assign(compoundClasses, newClassDescription);