xchem#41 fix indexes of compounds

pavol-brunclik-m2ms · Mar 10, 2020 · 683aa39 · 683aa39
1 parent 29f0cff
commit 683aa39
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 22 deletions.
diff --git 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 <CompoundView key={index} height={100} width={100} data={data} />;
+                    return <CompoundView key={index} height={100} width={100} data={data} index={index} />;
                   })}
                 </InfiniteScroll>
               </Box>

diff --git a/js/components/preview/compounds/compoundView.js b/js/components/preview/compounds/compoundView.js
@@ -14,7 +14,7 @@ export const loadingCompoundImage = `<svg xmlns="http://www.w3.org/2000/svg" ver
     <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.689655172413793s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
   </circle>  '</svg>`;
 
-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,24 +46,27 @@ 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
       });
     }
   });
 
   return (
-    <div onClick={event => dispatch(handleClickOnCompound({ event, data, majorViewStage }))} style={current_style}>
+    <div
+      onClick={event => dispatch(handleClickOnCompound({ event, data, majorViewStage, index }))}
+      style={current_style}
+    >
       <SVGInline svg={image} />
     </div>
   );

diff --git 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,44 +107,44 @@ const showCompoundNglView = ({ majorViewStage, data }) => (dispatch, getState) =
             majorViewStage
           )
         );
-        dispatch(setConfiguration(data.index, newConf));
+        dispatch(setConfiguration(index, newConf));
       })
       .catch(error => {
         throw error;
       });
   }
 };
 
-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;
       }
     }
 
     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
@@ -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
@@ -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);