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

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

Hide file tree

Showing 3 changed files with 32 additions and 2 deletions.
diff --git a/js/components/datasets/datasetMoleculeList.js b/js/components/datasets/datasetMoleculeList.js
@@ -244,6 +244,16 @@ 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/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js
@@ -256,6 +256,7 @@ 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();
 
@@ -352,6 +353,16 @@ 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) {
@@ -741,6 +752,7 @@ 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,11 +206,13 @@ const MoleculeView = memo(
     index,
     previousItemData,
     nextItemData,
-    removeOfAllSelectedTypes
+    removeOfAllSelectedTypes,
+    setRef
   }) => {
     // const [countOfVectors, setCountOfVectors] = useState('-');
     // const [cmpds, setCmpds] = useState('-');
     const selectedAll = useRef(false);
+    const ref = useRef(null);
     const currentID = (data && data.id) || undefined;
     const classes = useStyles();
     const key = 'mol_image';
@@ -529,11 +531,17 @@ const MoleculeView = memo(
     };
 
     const handleClickOnDownArrow = () => {
+      if (setRef && ref.current) {
+        setRef(ref.current.nextSibling);
+      }
       removeOfAllSelectedTypes();
       moveSelectedMolSettings(nextItemData);
     };
 
     const handleClickOnUpArrow = () => {
+      if (setRef && ref.current) {
+        setRef(ref.current.previousSibling);
+      }
       removeOfAllSelectedTypes();
       moveSelectedMolSettings(previousItemData);
     };
@@ -542,7 +550,7 @@ const MoleculeView = memo(
 
     return (
       <>
-        <Grid container justify="space-between" direction="row" className={classes.container} wrap="nowrap">
+        <Grid container justify="space-between" direction="row" className={classes.container} wrap="nowrap" ref={ref}>
           {/* Site number */}
           <Grid item container justify="space-between" direction="column" className={classes.site}>
             <Grid item>