forked from pavol-brunclik-m2ms/fragalysis-frontend
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
978bb88
commit 71f075f
Showing
11 changed files
with
246 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -42,4 +42,3 @@ export const compoundsColors = { | |
| }; | ||
|
|
||
| export const AUX_VECTOR_SELECTOR_DATASET_ID = 'vector_selector'; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
142 changes: 142 additions & 0 deletions
142
js/components/preview/molecule/useScrollToSelectedPose.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import { useCallback, useEffect, useState } from 'react'; | ||
| import { useDispatch, useSelector, shallowEqual } from 'react-redux'; | ||
| import { setScrollFiredForLHS } from '../../../reducers/selection/actions'; | ||
| import { getLHSCompoundsList } from './redux/selectors'; | ||
|
|
||
| /** | ||
| * A hook which scrolls to the first selected pose when a snapshot is loaded. | ||
| */ | ||
| export const useScrollToSelectedPose = (moleculesPerPage, setCurrentPage) => { | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const poses = useSelector(state => getLHSCompoundsList(state), shallowEqual); | ||
| const ligands = useSelector(state => state.selectionReducers.fragmentDisplayList); | ||
| const proteins = useSelector(state => state.selectionReducers.proteinList); | ||
| const complexes = useSelector(state => state.selectionReducers.complexList); | ||
| const surfaces = useSelector(state => state.selectionReducers.surfaceList); | ||
| const densityList = useSelector(state => state.selectionReducers.densityList); | ||
| const densityListCustom = useSelector(state => state.selectionReducers.densityListCustom); | ||
| const vectorOnList = useSelector(state => state.selectionReducers.vectorOnList); | ||
|
|
||
| const scrollFired = useSelector(state => state.selectionReducers.isScrollFiredForLHS); | ||
|
|
||
| const [moleculeViewRefs, setMoleculeViewRefs] = useState({}); | ||
| const [scrollToMoleculeId, setScrollToMoleculeId] = useState(null); | ||
|
|
||
| // First pass, iterates over all the molecules and checks if any of them is selected. If it is, | ||
| // it saves the ID of the molecule and determines how many pages of molecules should be displayed. | ||
| // This is done only once and only if right hand side is open. | ||
| // This also gets reset on snapshot change. | ||
| useEffect(() => { | ||
| if (!scrollFired) { | ||
| if ( | ||
| ligands?.length || | ||
| proteins?.length || | ||
| complexes?.length || | ||
| surfaces?.length || | ||
| densityList?.length || | ||
| densityListCustom?.length || | ||
| vectorOnList?.length | ||
| ) { | ||
| for (let i = 0; i < poses.length; i++) { | ||
| const pose = poses[i]; | ||
| const molsForCmp = pose.associatedObs; | ||
|
|
||
| if ( | ||
| containsAtLeastOne(ligands, molsForCmp) || | ||
| containsAtLeastOne(proteins, molsForCmp) || | ||
| containsAtLeastOne(complexes, molsForCmp) || | ||
| containsAtLeastOne(surfaces, molsForCmp) || | ||
| containsAtLeastOne(densityList, molsForCmp) || | ||
| containsAtLeastOne(densityListCustom, molsForCmp) || | ||
| containsAtLeastOne(vectorOnList, molsForCmp) | ||
| ) { | ||
| setCurrentPage(i / moleculesPerPage + 1); | ||
| setScrollToMoleculeId(pose.id); | ||
| break; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| dispatch(setScrollFiredForLHS(true)); | ||
| }, [ | ||
| dispatch, | ||
| poses, | ||
| moleculesPerPage, | ||
| scrollFired, | ||
| setCurrentPage, | ||
| ligands, | ||
| proteins, | ||
| complexes, | ||
| surfaces, | ||
| densityList.length, | ||
| densityListCustom.length, | ||
| densityList, | ||
| densityListCustom, | ||
| vectorOnList | ||
| ]); | ||
|
|
||
| // Second pass, once the list of molecules is displayed and the refs to their DOM nodes have been | ||
| // obtained, scroll to the the saved molecule from the first pass. | ||
| // setTimeout might be necessary for the scrolling to happen. | ||
| useEffect(() => { | ||
| if (scrollToMoleculeId !== null) { | ||
| const node = moleculeViewRefs[scrollToMoleculeId]; | ||
| if (node) { | ||
| setScrollToMoleculeId(null); | ||
| if (!elementIsVisibleInViewport(node)) { | ||
| setTimeout(() => { | ||
| node.scrollIntoView(); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| }, [moleculeViewRefs, scrollToMoleculeId]); | ||
|
|
||
| const elementIsVisibleInViewport = (el, partiallyVisible = false) => { | ||
| const { top, left, bottom, right } = el.getBoundingClientRect(); | ||
| const { innerHeight, innerWidth } = window; | ||
| return partiallyVisible | ||
| ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) && | ||
| ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth)) | ||
| : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth; | ||
| }; | ||
|
|
||
| // Used to attach the ref of DOM nodes. | ||
| // const addMoleculeViewRef = useCallback((moleculeId, node) => { | ||
| // setMoleculeViewRefs(prevRefs => ({ | ||
| // ...prevRefs, | ||
| // [moleculeId]: node | ||
| // })); | ||
| // }, []); | ||
|
|
||
| const addMoleculeViewRef = useCallback((moleculeId, node) => { | ||
| setMoleculeViewRefs(prevRefs => { | ||
| if (prevRefs.hasOwnProperty(moleculeId)) return prevRefs; | ||
| return { | ||
| ...prevRefs, | ||
| [moleculeId]: node | ||
| }; | ||
| }); | ||
| }, []); | ||
|
|
||
| const getNode = useCallback( | ||
| molId => { | ||
| return moleculeViewRefs[molId]; | ||
| }, | ||
| [moleculeViewRefs] | ||
| ); | ||
|
|
||
| const containsAtLeastOne = (list, molsList) => { | ||
| for (const mol in molsList) { | ||
| if (list.includes(mol.id)) { | ||
| return true; | ||
| } | ||
| } | ||
|
|
||
| return false; | ||
| }; | ||
|
|
||
| return { addMoleculeViewRef, setScrollToMoleculeId, getNode }; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters