From 27787856d03bccde0dfee966bf21ec8331707f4b Mon Sep 17 00:00:00 2001 From: Tibor Postek Date: Fri, 28 Feb 2020 14:59:27 +0100 Subject: [PATCH] #125 fix undefined stage --- js/components/nglView/nglView.js | 41 +++++++++---------- .../nglView/redux/dispatchActions.js | 6 +-- .../preview/compounds/compoundList.js | 2 +- .../preview/compounds/compoundView.js | 8 +++- 4 files changed, 30 insertions(+), 27 deletions(-) diff --git a/js/components/nglView/nglView.js b/js/components/nglView/nglView.js index 1e8fd79a8..1faaf8dfe 100644 --- a/js/components/nglView/nglView.js +++ b/js/components/nglView/nglView.js @@ -58,33 +58,32 @@ const NglView = memo(({ div_id, height, setOrientation, removeAllNglComponents, const registerStageEvents = useCallback( (newStage, getNglView) => { - window.addEventListener('resize', handleResize); - newStage.mouseControls.add('clickPick-left', (stage, pickingProxy) => { - if (stage) { - return handleNglViewPick(stage, pickingProxy, getNglView, setError); - } - }); + if (newStage) { + window.addEventListener('resize', handleResize); + newStage.mouseControls.add('clickPick-left', (st, pickingProxy) => + handleNglViewPick(st, pickingProxy, getNglView, setError) + ); - newStage.mouseObserver.signals.scrolled.add(handleOrientationChanged); - newStage.mouseObserver.signals.dropped.add(handleOrientationChanged); - newStage.mouseObserver.signals.dragged.add(handleOrientationChanged); + newStage.mouseObserver.signals.scrolled.add(handleOrientationChanged); + newStage.mouseObserver.signals.dropped.add(handleOrientationChanged); + newStage.mouseObserver.signals.dragged.add(handleOrientationChanged); + } }, [handleResize, handleOrientationChanged, handleNglViewPick, setError] ); const unregisterStageEvents = useCallback( - (stage, getNglView) => { - window.addEventListener('resize', handleResize); - window.removeEventListener('resize', handleResize); - stage.mouseControls.remove('clickPick-left', (stage, pickingProxy) => { - if (stage) { - return handleNglViewPick(stage, pickingProxy, getNglView, setError); - } - }); - - stage.mouseObserver.signals.scrolled.remove(handleOrientationChanged); - stage.mouseObserver.signals.dropped.remove(handleOrientationChanged); - stage.mouseObserver.signals.dragged.remove(handleOrientationChanged); + (newStage, getNglView) => { + if (newStage) { + window.addEventListener('resize', handleResize); + window.removeEventListener('resize', handleResize); + newStage.mouseControls.remove('clickPick-left', (st, pickingProxy) => + handleNglViewPick(st, pickingProxy, getNglView, setError) + ); + newStage.mouseObserver.signals.scrolled.remove(handleOrientationChanged); + newStage.mouseObserver.signals.dropped.remove(handleOrientationChanged); + newStage.mouseObserver.signals.dragged.remove(handleOrientationChanged); + } }, [handleResize, handleOrientationChanged, handleNglViewPick, setError] ); diff --git a/js/components/nglView/redux/dispatchActions.js b/js/components/nglView/redux/dispatchActions.js index e3a624222..196f69d44 100644 --- a/js/components/nglView/redux/dispatchActions.js +++ b/js/components/nglView/redux/dispatchActions.js @@ -84,7 +84,7 @@ const processInt = pickingProxy => { export const handleNglViewPick = (stage, pickingProxy, getNglView, setError) => (dispatch, getState) => { const state = getState(); - if (pickingProxy) { + if (pickingProxy && stage) { // For assigning the ligand interaction if (pickingProxy.bond) { const duck_yank_data = state.apiReducers.duck_yank_data; @@ -115,9 +115,9 @@ export const handleNglViewPick = (stage, pickingProxy, getNglView, setError) => // Ok so now perform logic const type = name.split('_')[0]; const pk = parseInt(name.split('_')[1], 10); - if (type === OBJECT_TYPE.MOLECULE_GROUP) { + if (type === OBJECT_TYPE.MOLECULE_GROUP && getNglView(VIEWS.MAJOR_VIEW)) { dispatch(toggleMoleculeGroup(pk, stage, getNglView(VIEWS.MAJOR_VIEW).stage), setError); - } else if (type === OBJECT_TYPE.MOLGROUPS_SELECT) { + } else if (type === OBJECT_TYPE.MOLGROUPS_SELECT && getNglView(VIEWS.MAJOR_VIEW)) { dispatch(toggleMoleculeGroup(pk, stage, getNglView(VIEWS.MAJOR_VIEW).stage), setError); } else if (type === listTypes.PANDDA_SITE) { dispatch(setPanddaSiteOn(pk)); diff --git a/js/components/preview/compounds/compoundList.js b/js/components/preview/compounds/compoundList.js index a8fcc9efe..bf2c3d71a 100644 --- a/js/components/preview/compounds/compoundList.js +++ b/js/components/preview/compounds/compoundList.js @@ -16,7 +16,7 @@ import { selectAllCompounds } from './redux/dispatchActions'; import { compoundsColors } from './redux/constants'; -import { getTotalCountOfMolecules } from '../../../reducers/selection/selectors'; +// import { getTotalCountOfMolecules } from '../../../reducers/selection/selectors'; import InfiniteScroll from 'react-infinite-scroller'; import { getCanLoadMoreCompounds, getCompoundClasses, getCompoundListOffset } from './redux/selectors'; import { NglContext } from '../../nglView/nglProvider'; diff --git a/js/components/preview/compounds/compoundView.js b/js/components/preview/compounds/compoundView.js index b7367ea32..4ea7ec708 100644 --- a/js/components/preview/compounds/compoundView.js +++ b/js/components/preview/compounds/compoundView.js @@ -21,7 +21,7 @@ export const CompoundView = memo(({ height, width, data, index }) => { const showedCompoundList = useSelector(state => state.previewReducers.compounds.showedCompoundList); const selectedCompoundsClass = useSelector(state => state.previewReducers.compounds.selectedCompoundsClass); const { getNglView } = useContext(NglContext); - const majorViewStage = getNglView(VIEWS.MAJOR_VIEW).stage; + const majorViewStage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage; const [image, setImage] = useState(loadingCompoundImage); const { setError } = useContext(HeaderContext); @@ -63,7 +63,11 @@ export const CompoundView = memo(({ height, width, data, index }) => { return (
dispatch(handleClickOnCompound({ event, data, majorViewStage, index, setError }))} + onClick={event => { + if (majorViewStage) { + dispatch(handleClickOnCompound({ event, data, majorViewStage, index, setError })); + } + }} style={current_style} >