From 014b431263ad92f3a247bd271d10c73245acf31f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adri=C3=A1na=20Kohanov=C3=A1?= Date: Wed, 14 Oct 2020 16:32:06 +0200 Subject: [PATCH] #407 Properly turn on/off inspiration fragments when using the next/previous arrows (bug of #384) --- js/components/datasets/datasetMoleculeList.js | 2 +- js/components/datasets/datasetMoleculeView.js | 35 ++++++++++++------- .../datasets/redux/dispatchActions.js | 12 ++++--- js/components/nglView/generatingObjects.js | 7 ++++ .../preview/molecule/moleculeView.js | 20 +++++++---- .../preview/molecule/redux/dispatchActions.js | 19 ++++++---- 6 files changed, 66 insertions(+), 29 deletions(-) diff --git a/js/components/datasets/datasetMoleculeList.js b/js/components/datasets/datasetMoleculeList.js index 626fe1714..e5a5d0162 100644 --- a/js/components/datasets/datasetMoleculeList.js +++ b/js/components/datasets/datasetMoleculeList.js @@ -286,7 +286,7 @@ export const DatasetMoleculeList = memo( }; const removeOfAllSelectedTypesOfInspirations = () => { - var molecules = [...getJoinedMoleculeList, ...inspirationMoleculeDataList]; + var molecules = [...getJoinedMoleculeList, ...inspirationMoleculeDataList]; // TODO dispatch(hideAllSelectedMolecules(stage, molecules)); }; diff --git a/js/components/datasets/datasetMoleculeView.js b/js/components/datasets/datasetMoleculeView.js index 69c7392b9..93ce8d66f 100644 --- a/js/components/datasets/datasetMoleculeView.js +++ b/js/components/datasets/datasetMoleculeView.js @@ -49,7 +49,8 @@ import { ArrowDownward, ArrowUpward, MyLocation } from '@material-ui/icons'; import { isNumber, isString } from 'lodash'; import { SvgTooltip } from '../common'; import { loadInspirationMoleculesDataList } from './redux/dispatchActions'; - +import { OBJECT_TYPE } from '../nglView/constants'; +import { getRepresentationsByType } from '../nglView/generatingObjects'; const useStyles = makeStyles(theme => ({ container: { @@ -289,6 +290,7 @@ export const DatasetMoleculeView = memo( const vectorOnListMolecule = useSelector(state => state.selectionReducers.vectorOnList); const filteredDatasetMoleculeList = useSelector(state => getFilteredDatasetMoleculeList(state, datasetID)); + const objectsInView = useSelector(state => state.nglReducers.objectsInView) || {}; const [image, setImage] = useState(img_data_init); @@ -541,19 +543,24 @@ export const DatasetMoleculeView = memo( molecules.forEach(molecule => { if (molecule) { if (isAnyInspirationLigandOn) { - dispatch(addLigand(stage, molecule, colourToggle)); + let representations = getRepresentationsByType(objectsInView, molecule, OBJECT_TYPE.LIGAND); + dispatch(addLigand(stage, molecule, colourToggle, false, representations)); } if (isAnyInspirationProteinOn) { - dispatch(addHitProtein(stage, molecule, colourToggle)); + let representations = getRepresentationsByType(objectsInView, molecule, OBJECT_TYPE.HIT_PROTEIN); + dispatch(addHitProtein(stage, molecule, colourToggle, representations)); } if (isAnyInspirationComplexOn) { - dispatch(addComplex(stage, molecule, colourToggle)); + let representations = getRepresentationsByType(objectsInView, molecule, OBJECT_TYPE.COMPLEX); + dispatch(addComplex(stage, molecule, colourToggle, representations)); } if (isAnyInspirationSurfaceOn) { - dispatch(addSurface(stage, molecule, colourToggle)); + let representations = getRepresentationsByType(objectsInView, molecule, OBJECT_TYPE.SURFACE); + dispatch(addSurface(stage, molecule, colourToggle, representations)); } if (isAnyInspirationDensityOn) { - dispatch(addDensity(stage, molecule, colourToggle)); + let representations = getRepresentationsByType(objectsInView, molecule, OBJECT_TYPE.DENSITY); + dispatch(addDensity(stage, molecule, colourToggle, representations)); } if (isAnyInspirationVectorOn) { dispatch(addVector(stage, molecule, colourToggle)); @@ -567,16 +574,20 @@ export const DatasetMoleculeView = memo( const moveSelectedMoleculeSettings = (newItemData, datasetIdOfMolecule) => { if (newItemData) { if (isLigandOn) { - dispatch(addDatasetLigand(stage, newItemData, colourToggle, datasetIdOfMolecule)); + let representations = getRepresentationsByType(objectsInView, data, OBJECT_TYPE.LIGAND, datasetID); + dispatch(addDatasetLigand(stage, newItemData, colourToggle, datasetIdOfMolecule, representations)); } if (isProteinOn) { - dispatch(addDatasetHitProtein(stage, newItemData, colourToggle, datasetIdOfMolecule)); + let representations = getRepresentationsByType(objectsInView, data, OBJECT_TYPE.PROTEIN, datasetID); + dispatch(addDatasetHitProtein(stage, newItemData, colourToggle, datasetIdOfMolecule, representations)); } if (isComplexOn) { - dispatch(addDatasetComplex(stage, newItemData, colourToggle, datasetIdOfMolecule)); + let representations = getRepresentationsByType(objectsInView, data, OBJECT_TYPE.COMPLEX, datasetID); + dispatch(addDatasetComplex(stage, newItemData, colourToggle, datasetIdOfMolecule, representations)); } if (isSurfaceOn) { - dispatch(addDatasetSurface(stage, newItemData, colourToggle, datasetIdOfMolecule)); + let representations = getRepresentationsByType(objectsInView, data, OBJECT_TYPE.SURFACE, datasetID); + dispatch(addDatasetSurface(stage, newItemData, colourToggle, datasetIdOfMolecule, representations)); } } }; @@ -587,9 +598,9 @@ export const DatasetMoleculeView = memo( const nextItem = (nextItemData.hasOwnProperty('molecule') && nextItemData.molecule) || nextItemData; const nextDatasetID = (nextItemData.hasOwnProperty('datasetID') && nextItemData.datasetID) || datasetID; - moveSelectedMoleculeSettings(nextItem, nextDatasetID); dispatch(loadInspirationMoleculesDataList(nextItem.computed_inspirations)).then(() => { + moveSelectedMoleculeSettings(nextItem, nextDatasetID); dispatch( moveSelectedMoleculeInspirationsSettings( nextItem, @@ -612,9 +623,9 @@ export const DatasetMoleculeView = memo( (previousItemData.hasOwnProperty('molecule') && previousItemData.molecule) || previousItemData; const previousDatasetID = (previousItemData.hasOwnProperty('datasetID') && previousItemData.datasetID) || datasetID; - moveSelectedMoleculeSettings(previousItem, previousDatasetID); dispatch(loadInspirationMoleculesDataList(previousItem.computed_inspirations)).then(() => { + moveSelectedMoleculeSettings(previousItem, previousDatasetID); dispatch( moveSelectedMoleculeInspirationsSettings( previousItem, diff --git a/js/components/datasets/redux/dispatchActions.js b/js/components/datasets/redux/dispatchActions.js index 166efe7e8..e1e59a50a 100644 --- a/js/components/datasets/redux/dispatchActions.js +++ b/js/components/datasets/redux/dispatchActions.js @@ -50,7 +50,7 @@ export const initializeDatasetFilter = datasetID => (dispatch, getState) => { dispatch(setFilterProperties(datasetID, initFilterProperties)); }; -export const addDatasetHitProtein = (stage, data, colourToggle, datasetID) => dispatch => { +export const addDatasetHitProtein = (stage, data, colourToggle, datasetID, representations = undefined) => dispatch => { dispatch( loadObject({ target: Object.assign( @@ -58,6 +58,7 @@ export const addDatasetHitProtein = (stage, data, colourToggle, datasetID) => di generateHitProteinObject(data, colourToggle, base_url, datasetID) ), stage, + previousRepresentations: representations, orientationMatrix: null }) ).finally(() => { @@ -80,7 +81,7 @@ export const removeDatasetHitProtein = (stage, data, colourToggle, datasetID) => dispatch(removeFromProteinList(datasetID, generateMoleculeId(data))); }; -export const addDatasetComplex = (stage, data, colourToggle, datasetID) => dispatch => { +export const addDatasetComplex = (stage, data, colourToggle, datasetID, representations = undefined) => dispatch => { dispatch( loadObject({ target: Object.assign( @@ -88,6 +89,7 @@ export const addDatasetComplex = (stage, data, colourToggle, datasetID) => dispa generateComplexObject(data, colourToggle, base_url, datasetID) ), stage, + previousRepresentations: representations, orientationMatrix: null }) ).finally(() => { @@ -107,7 +109,7 @@ export const removeDatasetComplex = (stage, data, colourToggle, datasetID) => di dispatch(removeFromComplexList(datasetID, generateMoleculeId(data))); }; -export const addDatasetSurface = (stage, data, colourToggle, datasetID) => dispatch => { +export const addDatasetSurface = (stage, data, colourToggle, datasetID, representations = undefined) => dispatch => { dispatch( loadObject({ target: Object.assign( @@ -115,6 +117,7 @@ export const addDatasetSurface = (stage, data, colourToggle, datasetID) => dispa generateSurfaceObject(data, colourToggle, base_url, datasetID) ), stage, + previousRepresentations: representations, orientationMatrix: null }) ).finally(() => { @@ -134,12 +137,13 @@ export const removeDatasetSurface = (stage, data, colourToggle, datasetID) => di dispatch(removeFromSurfaceList(datasetID, generateMoleculeId(data))); }; -export const addDatasetLigand = (stage, data, colourToggle, datasetID) => dispatch => { +export const addDatasetLigand = (stage, data, colourToggle, datasetID, representations = undefined) => dispatch => { const currentOrientation = stage.viewerControls.getOrientation(); dispatch( loadObject({ target: Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateMoleculeObject(data, colourToggle, datasetID)), stage, + previousRepresentations: representations, markAsRightSideLigand: true }) ).finally(() => { diff --git a/js/components/nglView/generatingObjects.js b/js/components/nglView/generatingObjects.js index c7803af1b..20afd37a5 100644 --- a/js/components/nglView/generatingObjects.js +++ b/js/components/nglView/generatingObjects.js @@ -212,3 +212,10 @@ export const getVectorWithColorByCountOfCompounds = (item, currentVectorCompound } return { ...item, colour: colour, radius: 0.3 }; }; + +export const getRepresentationsByType = (objectsInView, object, objectType, datasetId) => { + let parentItem = `${object.protein_code || object.name}_${objectType}${datasetId ? '_' + datasetId : ''}`; + let objectInView = objectsInView[parentItem]; + var representations = (objectInView && objectInView.representations) || undefined; + return representations; +}; diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js index aaeccdf85..cacb08eac 100644 --- a/js/components/preview/molecule/moleculeView.js +++ b/js/components/preview/molecule/moleculeView.js @@ -31,7 +31,8 @@ import { base_url } from '../../routes/constants'; import { moleculeProperty } from './helperConstants'; import { centerOnLigandByMoleculeID } from '../../../reducers/ngl/dispatchActions'; import { SvgTooltip } from '../../common'; - +import { OBJECT_TYPE } from '../../nglView/constants'; +import { getRepresentationsByType } from '../../nglView/generatingObjects'; const useStyles = makeStyles(theme => ({ container: { @@ -227,6 +228,8 @@ const MoleculeView = memo( const url = new URL(base_url + '/api/molimg/' + data.id + '/'); const [img_data, setImg_data] = useState(img_data_init); + const objectsInView = useSelector(state => state.nglReducers.objectsInView) || {}; + const { getNglView } = useContext(NglContext); const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage; @@ -498,19 +501,24 @@ const MoleculeView = memo( const moveSelectedMolSettings = newItemDataset => { if (newItemDataset) { if (isLigandOn) { - dispatch(addLigand(stage, newItemDataset, colourToggle)); + let representations = getRepresentationsByType(objectsInView, data, OBJECT_TYPE.LIGAND); + dispatch(addLigand(stage, newItemDataset, colourToggle, false, representations)); } if (isProteinOn) { - dispatch(addHitProtein(stage, newItemDataset, colourToggle)); + let representations = getRepresentationsByType(objectsInView, data, OBJECT_TYPE.HIT_PROTEIN); + dispatch(addHitProtein(stage, newItemDataset, colourToggle, representations)); } if (isComplexOn) { - dispatch(addComplex(stage, newItemDataset, colourToggle)); + let representations = getRepresentationsByType(objectsInView, data, OBJECT_TYPE.COMPLEX); + dispatch(addComplex(stage, newItemDataset, colourToggle, representations)); } if (isSurfaceOn) { - dispatch(addSurface(stage, newItemDataset, colourToggle)); + let representations = getRepresentationsByType(objectsInView, data, OBJECT_TYPE.SURFACE); + dispatch(addSurface(stage, newItemDataset, colourToggle, representations)); } if (isDensityOn) { - dispatch(addDensity(stage, newItemDataset, colourToggle)); + let representations = getRepresentationsByType(objectsInView, data, OBJECT_TYPE.DENSITY); + dispatch(addDensity(stage, newItemDataset, colourToggle, representations)); } if (isVectorOn) { dispatch(addVector(stage, newItemDataset)).catch(error => { diff --git a/js/components/preview/molecule/redux/dispatchActions.js b/js/components/preview/molecule/redux/dispatchActions.js index 74954664c..c938a3070 100644 --- a/js/components/preview/molecule/redux/dispatchActions.js +++ b/js/components/preview/molecule/redux/dispatchActions.js @@ -176,11 +176,12 @@ export const removeVector = (stage, data) => async (dispatch, getState) => { dispatch(setVectorList(vector_list.filter(item => item.moleculeId !== data.id))); }; -export const addHitProtein = (stage, data, colourToggle) => dispatch => { +export const addHitProtein = (stage, data, colourToggle, representations = undefined) => dispatch => { dispatch( loadObject({ target: Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateHitProteinObject(data, colourToggle, base_url)), stage, + previousRepresentations: representations, orientationMatrix: null }) ).finally(() => { @@ -200,11 +201,12 @@ export const removeHitProtein = (stage, data, colourToggle) => dispatch => { dispatch(removeFromProteinList(generateMoleculeId(data))); }; -export const addComplex = (stage, data, colourToggle) => dispatch => { +export const addComplex = (stage, data, colourToggle, representations = undefined) => dispatch => { dispatch( loadObject({ target: Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateComplexObject(data, colourToggle, base_url)), stage, + previousRepresentations: representations, orientationMatrix: null }) ).finally(() => { @@ -224,11 +226,12 @@ export const removeComplex = (stage, data, colourToggle) => dispatch => { dispatch(removeFromComplexList(generateMoleculeId(data))); }; -export const addSurface = (stage, data, colourToggle) => dispatch => { +export const addSurface = (stage, data, colourToggle, representations = undefined) => dispatch => { dispatch( loadObject({ target: Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateSurfaceObject(data, colourToggle, base_url)), stage, + previousRepresentations: representations, orientationMatrix: null }) ).finally(() => { @@ -248,13 +251,14 @@ export const removeSurface = (stage, data, colourToggle) => dispatch => { dispatch(removeFromSurfaceList(generateMoleculeId(data))); }; -export const addDensity = (stage, data, colourToggle) => dispatch => { +export const addDensity = (stage, data, colourToggle, representations = undefined) => dispatch => { console.log('TODO'); return; dispatch( loadObject({ target: Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateDensityObject(data, colourToggle, base_url)), stage, + previousRepresentations: representations, orientationMatrix: null }) ).finally(() => { @@ -276,14 +280,17 @@ export const removeDensity = (stage, data, colourToggle) => dispatch => { dispatch(removeFromDensityList(generateMoleculeId(data))); }; -export const addLigand = (stage, data, colourToggle, centerOn = false) => (dispatch, getState) => { +export const addLigand = (stage, data, colourToggle, centerOn = false, representations = undefined) => ( + dispatch, + getState +) => { const currentOrientation = stage.viewerControls.getOrientation(); dispatch(appendFragmentDisplayList(generateMoleculeId(data))); return dispatch( loadObject({ target: Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateMoleculeObject(data, colourToggle)), stage, - undefined + previousRepresentations: representations }) ).finally(() => { const ligandOrientation = stage.viewerControls.getOrientation();