diff --git a/js/components/preview/compounds/compoundList.js b/js/components/preview/compounds/compoundList.js index a27810390..1815e4932 100644 --- a/js/components/preview/compounds/compoundList.js +++ b/js/components/preview/compounds/compoundList.js @@ -107,7 +107,7 @@ export const CompoundList = memo(({ height }) => { useWindow={false} > {currentCompounds.slice(0, compoundsListOffset).map((data, index) => { - return ; + return ; })} diff --git a/js/components/preview/compounds/compoundView.js b/js/components/preview/compounds/compoundView.js index 8251f03d5..873ad185f 100644 --- a/js/components/preview/compounds/compoundView.js +++ b/js/components/preview/compounds/compoundView.js @@ -14,7 +14,7 @@ export const loadingCompoundImage = ` '`; -export const CompoundView = memo(({ height, width, data }) => { +export const CompoundView = memo(({ height, width, data, index }) => { const dispatch = useDispatch(); const highlightedCompoundId = useSelector(state => state.previewReducers.compounds.highlightedCompoundId); const showedCompoundList = useSelector(state => state.previewReducers.compounds.showedCompoundList); @@ -46,16 +46,16 @@ export const CompoundView = memo(({ height, width, data }) => { const highlightedStyle = { borderStyle: 'solid' }; let current_style = Object.assign({}, not_selected_style); - if (data && data.index && showedCompoundList.find(item => item === data.index) !== undefined) { + if (showedCompoundList.find(item => item === index) !== undefined) { current_style = Object.assign(current_style, showedStyle); } - if (data && data.index === highlightedCompoundId) { + if (index === highlightedCompoundId) { current_style = Object.assign(current_style, highlightedStyle); } Object.keys(selectedCompoundsClass).forEach(classKey => { - if (selectedCompoundsClass[classKey].find(item => item === data.index) !== undefined) { + if (selectedCompoundsClass[classKey].find(item => item === index) !== undefined) { current_style = Object.assign(current_style, { backgroundColor: compoundsColors[classKey].color }); @@ -63,7 +63,10 @@ export const CompoundView = memo(({ height, width, data }) => { }); return ( -
dispatch(handleClickOnCompound({ event, data, majorViewStage }))} style={current_style}> +
dispatch(handleClickOnCompound({ event, data, majorViewStage, index }))} + style={current_style} + >
); diff --git a/js/components/preview/compounds/redux/dispatchActions.js b/js/components/preview/compounds/redux/dispatchActions.js index 64271998c..c0432bb37 100644 --- a/js/components/preview/compounds/redux/dispatchActions.js +++ b/js/components/preview/compounds/redux/dispatchActions.js @@ -63,18 +63,18 @@ export const loadNextPageOfCompounds = () => (dispatch, getState) => { dispatch(setCurrentPage(nextPage)); }; -const showCompoundNglView = ({ majorViewStage, data }) => (dispatch, getState) => { +const showCompoundNglView = ({ majorViewStage, data, index }) => (dispatch, getState) => { const state = getState(); const to_query_sdf_info = state.selectionReducers.to_query_sdf_info; const configuration = state.previewReducers.compounds.configuration; const showedCompoundList = state.previewReducers.compounds.showedCompoundList; - if (showedCompoundList.find(item => item === data.index) !== undefined) { + if (showedCompoundList.find(item => item === index) !== undefined) { dispatch( deleteObject( Object.assign( { display_div: VIEWS.MAJOR_VIEW }, - generateCompoundMolObject(configuration[data.index] || false, data.smiles) + generateCompoundMolObject(configuration[index] || false, data.smiles) ), majorViewStage ) @@ -107,7 +107,7 @@ const showCompoundNglView = ({ majorViewStage, data }) => (dispatch, getState) = majorViewStage ) ); - dispatch(setConfiguration(data.index, newConf)); + dispatch(setConfiguration(index, newConf)); }) .catch(error => { throw error; @@ -115,25 +115,25 @@ const showCompoundNglView = ({ majorViewStage, data }) => (dispatch, getState) = } }; -export const handleClickOnCompound = ({ data, event, majorViewStage }) => async (dispatch, getState) => { +export const handleClickOnCompound = ({ data, event, majorViewStage, index }) => async (dispatch, getState) => { const state = getState(); const currentCompoundClass = state.previewReducers.compounds.currentCompoundClass; const showedCompoundList = state.previewReducers.compounds.showedCompoundList; const selectedCompoundsClass = state.previewReducers.compounds.selectedCompoundsClass; - dispatch(setHighlightedCompoundId(data.index)); + dispatch(setHighlightedCompoundId(index)); if (event.shiftKey) { - await dispatch(showCompoundNglView({ majorViewStage, data })); - if (showedCompoundList.find(item => item === data.index) !== undefined) { - dispatch(removeShowedCompoundFromList(data.index)); + await dispatch(showCompoundNglView({ majorViewStage, data, index })); + if (showedCompoundList.find(item => item === index) !== undefined) { + dispatch(removeShowedCompoundFromList(index)); } else { - dispatch(addShowedCompoundToList(data.index)); + dispatch(addShowedCompoundToList(index)); } } else { let isSelectedID; for (const classKey of Object.keys(selectedCompoundsClass)) { - const currentCmpdClassId = selectedCompoundsClass[classKey].find(item => item === data.index); + const currentCmpdClassId = selectedCompoundsClass[classKey].find(item => item === index); if (currentCmpdClassId !== undefined) { isSelectedID = currentCmpdClassId; break; @@ -141,10 +141,10 @@ export const handleClickOnCompound = ({ data, event, majorViewStage }) => async } if (isSelectedID !== undefined) { - await dispatch(removeSelectedCompoundClass(data.index)); + await dispatch(removeSelectedCompoundClass(index)); dispatch(removeFromToBuyList(data)); } else { - await dispatch(addSelectedCompoundClass(currentCompoundClass, data.index)); + await dispatch(addSelectedCompoundClass(currentCompoundClass, index)); dispatch(appendToBuyList(data)); } } diff --git a/js/components/preview/compounds/redux/reducer.js b/js/components/preview/compounds/redux/reducer.js index 7dc73867e..acb22e8f8 100644 --- a/js/components/preview/compounds/redux/reducer.js +++ b/js/components/preview/compounds/redux/reducer.js @@ -16,7 +16,6 @@ export const INITIAL_STATE = { show_frag:"Cc1cc(CN(C)C(C)C(N)=O)no1", vector:"CC1CCC([101Xe])C1", mol:"CCNC(=O)Nc1cc(C)on1", - index:0, }] */ currentCompounds: [], currentCompoundClass: compoundsColors.blue.key, diff --git a/js/reducers/selection/selectors.js b/js/reducers/selection/selectors.js index 3a386948d..f98969b49 100644 --- a/js/reducers/selection/selectors.js +++ b/js/reducers/selection/selectors.js @@ -22,14 +22,13 @@ export const getAllCompoundsList = createSelector( Object.keys(thisVectorList).forEach(key => { const vector_smi = thisVectorList[key].vector; const change_list = thisVectorList[key].addition; - change_list.forEach((data_transfer, index) => { + change_list.forEach(data_transfer => { const inputData = {}; inputData.smiles = data_transfer && data_transfer.end; // Set this back for now - because it's confusing - alter to change if want later inputData.show_frag = data_transfer && data_transfer.end; inputData.vector = vector_smi; inputData.mol = to_query; - inputData.index = index; inputData.selectedClass = undefined; inputData.isShowed = false; compoundsList.push(inputData);