diff --git a/js/components/funders/fundersModal.js b/js/components/funders/fundersModal.js index 50b9606c5..567132941 100644 --- a/js/components/funders/fundersModal.js +++ b/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 ( onModalClose()}> + Funded by: openXchem()} /> @@ -99,10 +114,10 @@ export const FundersModal = memo(({ openModal, onModalClose }) => { openJff()} /> - openNf()} /> + openUltradd()} /> - openUltradd()} /> + openNf()} /> openImi()} /> @@ -110,6 +125,34 @@ export const FundersModal = memo(({ openModal, onModalClose }) => { openHorizon()} /> + + openJanssen()} /> + + + Contributors and collaborators: + + + openM2ms()} /> + + + openInformatics()} + /> + + + openAcellera()} /> + + + openOxrse()} /> + + + openMolsoft()} /> + + + openJanssen()} /> + ); diff --git a/js/components/header/index.js b/js/components/header/index.js index 9905929a5..3772ef06a 100644 --- a/js/components/header/index.js +++ b/js/components/header/index.js @@ -251,7 +251,7 @@ export default memo( size="small" onClick={() => setOpenFunders(true)} > - Supported by + Contributors @@ -310,7 +310,7 @@ export default memo( - + {authListItem} diff --git a/js/components/landing/Landing.js b/js/components/landing/Landing.js index fb90a8785..18430f8c3 100644 --- a/js/components/landing/Landing.js +++ b/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 ( @@ -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); diff --git a/js/components/nglView/nglProvider.js b/js/components/nglView/nglProvider.js index 5d64bc138..b90b4fa35 100644 --- a/js/components/nglView/nglProvider.js +++ b/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; } }; diff --git a/js/components/preview/Preview.js b/js/components/preview/Preview.js index 089899572..dc2616290 100644 --- a/js/components/preview/Preview.js +++ b/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]); diff --git a/js/components/preview/compounds/compoundList.js b/js/components/preview/compounds/compoundList.js index cec8a47fe..91ce3b01c 100644 --- a/js/components/preview/compounds/compoundList.js +++ b/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 }) => { dispatch(onChangeCompoundClassValue(e))} onKeyDown={e => dispatch(onKeyDownCompoundClass(e))} - value={compoundClasses[item] || ''} + value={inputs[item] || ''} /> ))} diff --git a/js/components/preview/compounds/redux/actions.js b/js/components/preview/compounds/redux/actions.js index e918113cb..208d124ce 100644 --- a/js/components/preview/compounds/redux/actions.js +++ b/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, diff --git a/js/components/preview/compounds/redux/dispatchActions.js b/js/components/preview/compounds/redux/dispatchActions.js index 5ee3d1f3e..3959a62f2 100644 --- a/js/components/preview/compounds/redux/dispatchActions.js +++ b/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); diff --git a/js/components/preview/compounds/redux/reducer.js b/js/components/preview/compounds/redux/reducer.js index 007c1e9c1..a323640f7 100644 --- a/js/components/preview/compounds/redux/reducer.js +++ b/js/components/preview/compounds/redux/reducer.js @@ -27,9 +27,9 @@ export const INITIAL_STATE = { }] */ currentCompounds: [], currentCompoundClass: compoundsColors.blue.key, - compoundClasses: defaultCompoundsClasses, + ...defaultCompoundsClasses, selectedCompoundsClass: defaultSelectedCmpdsClass, - highlightedCompoundId: undefined, + highlightedCompoundId: null, showedCompoundList: [], // configuration: { @@ -62,11 +62,11 @@ export const compounds = (state = INITIAL_STATE, action = {}) => { }); case constants.SET_COMPOUND_CLASSES: return Object.assign({}, state, { - compoundClasses: action.payload + ...action.payload }); case constants.RESET_COMPOUND_CLASSES: - return Object.assign({}, state, { compoundClasses: {} }); + return Object.assign({}, state, { ...defaultCompoundsClasses }); case constants.SET_HIGHLIGHTED_COMPOUND_ID: return Object.assign({}, state, { highlightedCompoundId: action.payload }); diff --git a/js/components/preview/compounds/redux/selectors.js b/js/components/preview/compounds/redux/selectors.js index 76f47b88c..9da1e4528 100644 --- a/js/components/preview/compounds/redux/selectors.js +++ b/js/components/preview/compounds/redux/selectors.js @@ -4,11 +4,6 @@ import { compoundsColors } from './constants'; const getCompoundsPerPage = state => state.previewReducers.compounds.compoundsPerPage; const getCurrentPage = state => state.previewReducers.compounds.currentPage; const getCurrentCompounds = state => state.previewReducers.compounds.currentCompounds; -const getCompdClassBlue = state => state.previewReducers.compounds.compoundClasses[compoundsColors.blue.key]; -const getCompdClassRed = state => state.previewReducers.compounds.compoundClasses[compoundsColors.red.key]; -const getCompdClassGreen = state => state.previewReducers.compounds.compoundClasses[compoundsColors.green.key]; -const getCompdClassPurple = state => state.previewReducers.compounds.compoundClasses[compoundsColors.purple.key]; -const getCompdClassApricot = state => state.previewReducers.compounds.compoundClasses[compoundsColors.apricot.key]; export const getCompoundListOffset = createSelector( getCompoundsPerPage, @@ -25,18 +20,3 @@ export const getCanLoadMoreCompounds = createSelector( return compoundsListOffset < compoundsList.length; } ); - -export const getCompoundClasses = createSelector( - getCompdClassBlue, - getCompdClassRed, - getCompdClassGreen, - getCompdClassPurple, - getCompdClassApricot, - (blue, red, green, purple, apricot) => ({ - [compoundsColors.blue.key]: blue, - [compoundsColors.red.key]: red, - [compoundsColors.green.key]: green, - [compoundsColors.purple.key]: purple, - [compoundsColors.apricot.key]: apricot - }) -); diff --git a/js/components/preview/moleculeGroups/redux/dispatchActions.js b/js/components/preview/moleculeGroups/redux/dispatchActions.js index 383fc3496..900aaeaba 100644 --- a/js/components/preview/moleculeGroups/redux/dispatchActions.js +++ b/js/components/preview/moleculeGroups/redux/dispatchActions.js @@ -23,6 +23,7 @@ import { getUrl, loadFromServer } from '../../../../utils/genericList'; import { OBJECT_TYPE } from '../../../nglView/constants'; import { SCENES } from '../../../../reducers/ngl/constants'; import { setSortDialogOpen } from '../../molecule/redux/actions'; +import { resetCurrentCompoundsSettings } from '../../compounds/redux/actions'; export const clearAfterDeselectingMoleculeGroup = ({ molGroupId, majorViewStage }) => (dispatch, getState) => { dispatch(setObjectSelection([molGroupId])); @@ -159,6 +160,9 @@ export const clearMoleculeGroupSelection = ({ getNglView }) => dispatch => { dispatch(setFilterSettings(undefined)); // close sort dialog dispatch(setSortDialogOpen(false)); + + // reset compounds + dispatch(resetCurrentCompoundsSettings(true)); }; export const onSelectMoleculeGroup = ({ moleculeGroup, stageSummaryView, majorViewStage, event }) => ( diff --git a/js/components/session/redux/dispatchActions.js b/js/components/session/redux/dispatchActions.js index 17901e712..12e426d7d 100644 --- a/js/components/session/redux/dispatchActions.js +++ b/js/components/session/redux/dispatchActions.js @@ -212,6 +212,8 @@ export const reloadScene = ({ saveType, newSessionFlag, nextUuid, uuid, sessionI data: JSON.stringify(formattedState) }).then(response => { dispatch(updateCurrentTarget(response.data)); + // latest session should be set also because of proper saving cycle + dispatch(setLatestSession(uuid)); }); } else if (saveType === savingTypeConst.snapshotNew) { const uuidv4 = require('uuid/v4'); diff --git a/js/img/acelleraLogo.png b/js/img/acelleraLogo.png new file mode 100644 index 000000000..18b953ca0 Binary files /dev/null and b/js/img/acelleraLogo.png differ diff --git a/js/img/informaticsLogo.png b/js/img/informaticsLogo.png new file mode 100644 index 000000000..e853a6efa Binary files /dev/null and b/js/img/informaticsLogo.png differ diff --git a/js/img/m2msLogo.png b/js/img/m2msLogo.png new file mode 100644 index 000000000..8f5db7b96 Binary files /dev/null and b/js/img/m2msLogo.png differ diff --git a/js/img/molsoftLogo.png b/js/img/molsoftLogo.png new file mode 100644 index 000000000..ce6904046 Binary files /dev/null and b/js/img/molsoftLogo.png differ diff --git a/js/img/oxrseLogo.png b/js/img/oxrseLogo.png new file mode 100644 index 000000000..0569642c8 Binary files /dev/null and b/js/img/oxrseLogo.png differ diff --git a/js/reducers/selection/dispatchActions.js b/js/reducers/selection/dispatchActions.js index b3f985729..8b2d9285c 100644 --- a/js/reducers/selection/dispatchActions.js +++ b/js/reducers/selection/dispatchActions.js @@ -3,7 +3,7 @@ import { selectVector } from './actions'; import { getAllCompoundsList } from './selectors'; export const selectVectorAndResetCompounds = currentVector => async (dispatch, getState) => { - await dispatch(resetCurrentCompoundsSettings()); + await dispatch(resetCurrentCompoundsSettings(false)); dispatch(selectVector(currentVector)); dispatch(setCurrentCompounds(getAllCompoundsList(getState()))); };