#407 Properly turn on/off inspiration fragments when using the next/p…

…revious arrows (bug of #384)
m2ms · Oct 21, 2020 · 6cbbeb7 · 6cbbeb7
1 parent 174a35e
commit 6cbbeb7
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 44 deletions.
diff --git a/js/components/datasets/datasetMoleculeList.js b/js/components/datasets/datasetMoleculeList.js
@@ -244,16 +244,6 @@ export const DatasetMoleculeList = memo(
 
     const disableUserInteraction = useDisableUserInteraction();
 
-    useEffect(() => {
-      if (selectedMoleculeRef) {
-        selectedMoleculeRef.scrollIntoView({
-          behavior: 'smooth',
-          block: 'nearest',
-          inline: 'nearest'
-        });
-      }
-    }, [selectedMoleculeRef]);
-
     // TODO Reset Infinity scroll
 
     if (isActiveFilter) {

diff --git a/js/components/datasets/datasetMoleculeView.js b/js/components/datasets/datasetMoleculeView.js
@@ -516,7 +516,18 @@ export const DatasetMoleculeView = memo(
       }
     };
 
+    const scrollToElement = element => {
+      element.scrollIntoView({
+        behavior: 'auto',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    };
+
     const handleClickOnDownArrow = () => {
+      const refNext = ref.current.nextSibling;
+      scrollToElement(refNext);
+
       removeOfAllSelectedTypes();
       removeOfAllSelectedTypesOfInspirations();
 
@@ -529,11 +540,14 @@ export const DatasetMoleculeView = memo(
       dispatch(setInspirationFragmentList(nextItem.computed_inspirations));
       dispatch(setCrossReferenceCompoundName(moleculeTitleNext));
       if (setRef && ref.current) {
-        setRef(ref.current.nextSibling);
+        setRef(refNext);
       }
     };
 
     const handleClickOnUpArrow = () => {
+      const refPrevious = ref.current.previousSibling;
+      scrollToElement(refPrevious);
+
       removeOfAllSelectedTypes();
       removeOfAllSelectedTypesOfInspirations();
 
@@ -548,7 +562,7 @@ export const DatasetMoleculeView = memo(
       dispatch(setInspirationFragmentList(previousItem.computed_inspirations));
       dispatch(setCrossReferenceCompoundName(moleculeTitlePrev));
       if (setRef && ref.current) {
-        setRef(ref.current.previousSibling);
+        setRef(refPrevious);
       }
     };
 

diff --git a/js/components/datasets/inspirationDialog.js b/js/components/datasets/inspirationDialog.js
@@ -37,6 +37,7 @@ import { NglContext } from '../nglView/nglProvider';
 import { VIEWS } from '../../constants/constants';
 import { Panel } from '../common/Surfaces/Panel';
 import { changeButtonClassname } from './helpers';
+import { getMoleculeList } from '../preview/molecule/redux/selectors';
 
 const useStyles = makeStyles(theme => ({
   paper: {
@@ -148,6 +149,8 @@ export const InspirationDialog = memo(
       state => state.datasetsReducers.isLoadingInspirationListOfMolecules
     );
     const inspirationMoleculeDataList = useSelector(state => state.datasetsReducers.inspirationMoleculeDataList);
+    const allInspirationMoleculeDataList = useSelector(state => state.datasetsReducers.allInspirationMoleculeDataList);
+    const getJoinedMoleculeList = useSelector(state => getMoleculeList(state));
 
     const ligandList = useSelector(state => state.selectionReducers.fragmentDisplayList);
     const proteinList = useSelector(state => state.selectionReducers.proteinList);
@@ -219,28 +222,30 @@ export const InspirationDialog = memo(
     };
 
     const removeOfAllSelectedTypes = () => {
+      let molecules = [...getJoinedMoleculeList, ...allInspirationMoleculeDataList];
+
       proteinList?.forEach(moleculeID => {
-        const foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
         dispatch(removeHitProtein(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
       complexList?.forEach(moleculeID => {
-        const foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
         dispatch(removeComplex(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
       ligandList?.forEach(moleculeID => {
-        const foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
         dispatch(removeLigand(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
       surfaceList?.forEach(moleculeID => {
-        const foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
         dispatch(removeSurface(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
       densityList?.forEach(moleculeID => {
-        const foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
         dispatch(removeDensity(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
       vectorOnList?.forEach(moleculeID => {
-        const foundedMolecule = moleculeList?.find(mol => mol.id === moleculeID);
+        const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
         dispatch(removeVector(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
       });
     };

diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js
@@ -248,6 +248,8 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
   const mol_group_on = useSelector(state => state.apiReducers.mol_group_on);
   const cached_mol_lists = useSelector(state => state.apiReducers.cached_mol_lists);
 
+  const allInspirationMoleculeDataList = useSelector(state => state.datasetsReducers.allInspirationMoleculeDataList);
+
   const proteinsHasLoaded = useSelector(state => state.nglReducers.proteinsHasLoaded);
 
   const [predefinedFilter, setPredefinedFilter] = useState(filter !== undefined ? filter.predefined : DEFAULT_FILTER);
@@ -256,7 +258,6 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
 
   const { getNglView } = useContext(NglContext);
   const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
-  const [selectedMoleculeViewRef, setSelectedMoleculeViewRef] = useState(null);
 
   const filterRef = useRef();
 
@@ -353,16 +354,6 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
     }
   }, [isActiveFilter, setFilterItemsHeight]);
 
-  useEffect(() => {
-    if (selectedMoleculeViewRef) {
-      selectedMoleculeViewRef.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest'
-      });
-    }
-  }, [selectedMoleculeViewRef]);
-
   const handleFilterChange = filter => {
     const filterSet = Object.assign({}, filter);
     for (let attr of MOL_ATTRIBUTES) {
@@ -444,28 +435,30 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
   };
 
   const removeOfAllSelectedTypes = () => {
+    let molecules = [...getJoinedMoleculeList, ...allInspirationMoleculeDataList];
+
     proteinList?.forEach(moleculeID => {
-      const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID);
+      const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
       dispatch(removeHitProtein(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
     });
     complexList?.forEach(moleculeID => {
-      const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID);
+      const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
       dispatch(removeComplex(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
     });
     fragmentDisplayList?.forEach(moleculeID => {
-      const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID);
+      const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
       dispatch(removeLigand(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
     });
     surfaceList?.forEach(moleculeID => {
-      const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID);
+      const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
       dispatch(removeSurface(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
     });
     densityList?.forEach(moleculeID => {
-      const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID);
+      const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
       dispatch(removeDensity(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
     });
     vectorOnList?.forEach(moleculeID => {
-      const foundedMolecule = joinedMoleculeLists?.find(mol => mol.id === moleculeID);
+      const foundedMolecule = molecules?.find(mol => mol.id === moleculeID);
       dispatch(removeVector(stage, foundedMolecule, colourList[foundedMolecule.id % colourList.length]));
     });
   };
@@ -752,7 +745,6 @@ export const MoleculeList = memo(({ height, setFilterItemsHeight, filterItemsHei
                       previousItemData={index > 0 && array[index - 1]}
                       nextItemData={index < array?.length && array[index + 1]}
                       removeOfAllSelectedTypes={removeOfAllSelectedTypes}
-                      setRef={setSelectedMoleculeViewRef}
                     />
                   ))}
                 </InfiniteScroll>

diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
@@ -206,8 +206,7 @@ const MoleculeView = memo(
     index,
     previousItemData,
     nextItemData,
-    removeOfAllSelectedTypes,
-    setRef
+    removeOfAllSelectedTypes
   }) => {
     // const [countOfVectors, setCountOfVectors] = useState('-');
     // const [cmpds, setCmpds] = useState('-');
@@ -530,18 +529,26 @@ const MoleculeView = memo(
       }
     };
 
+    const scrollToElement = element => {
+      element.scrollIntoView({
+        behavior: 'auto',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    };
+
     const handleClickOnDownArrow = () => {
-      if (setRef && ref.current) {
-        setRef(ref.current.nextSibling);
-      }
+      const refNext = ref.current.nextSibling;
+      scrollToElement(refNext);
+
       removeOfAllSelectedTypes();
       moveSelectedMolSettings(nextItemData);
     };
 
     const handleClickOnUpArrow = () => {
-      if (setRef && ref.current) {
-        setRef(ref.current.previousSibling);
-      }
+      const refPrevious = ref.current.previousSibling;
+      scrollToElement(refPrevious);
+
       removeOfAllSelectedTypes();
       moveSelectedMolSettings(previousItemData);
     };