From 09f99a213c439004a41565125e00918cd0258280 Mon Sep 17 00:00:00 2001 From: Tibor Postek Date: Thu, 20 Feb 2020 10:42:47 +0100 Subject: [PATCH] #66 Activate first hit of first cluster, display all --- js/components/nglView/nglProvider.js | 2 +- .../preview/molecule/moleculeList.js | 60 +- .../preview/molecule/moleculeView.js | 632 +++++++++--------- .../preview/molecule/redux/dispatchActions.js | 10 + .../moleculeGroups/molGroupSelector.js | 4 +- .../moleculeGroups/redux/dispatchActions.js | 50 +- .../moleculeGroups/withLoadingMolGroupList.js | 11 +- 7 files changed, 392 insertions(+), 377 deletions(-) diff --git a/js/components/nglView/nglProvider.js b/js/components/nglView/nglProvider.js index 99f0c5811..d8df7e892 100644 --- a/js/components/nglView/nglProvider.js +++ b/js/components/nglView/nglProvider.js @@ -44,7 +44,7 @@ export const NglProvider = memo(props => { }; return ( - + {props.children} ); diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js index c8b902902..f14594cc6 100644 --- a/js/components/preview/molecule/moleculeList.js +++ b/js/components/preview/molecule/moleculeList.js @@ -4,7 +4,7 @@ import { Grid, Chip, Tooltip, makeStyles, CircularProgress, Divider, Typography } from '@material-ui/core'; import { FilterList } from '@material-ui/icons'; -import React, { useState, useEffect, memo, useRef } from 'react'; +import React, { useState, useEffect, memo, useRef, useContext } from 'react'; import { connect } from 'react-redux'; import * as apiActions from '../../../reducers/api/actions'; import * as listType from '../../../constants/listTypes'; @@ -19,6 +19,9 @@ import { Panel } from '../../common/Surfaces/Panel'; import { ComputeSize } from '../../../utils/computeSize'; import { moleculeProperty } from './helperConstants'; import { setSortDialogOpen } from './redux/actions'; +import { selectFirstMolecule } from './redux/dispatchActions'; +import { VIEWS } from '../../../constants/constants'; +import { NglContext } from '../../nglView/nglProvider'; const useStyles = makeStyles(theme => ({ container: { @@ -98,14 +101,15 @@ const MoleculeList = memo( cached_mol_lists, target_on, mol_group_on, - setObjectList, + setMoleculeList, setCachedMolLists, setFilterItemsHeight, filterItemsHeight, getJoinedMoleculeList, filterSettings, sortDialogOpen, - setSortDialogOpen + setSortDialogOpen, + selectFirstMolecule }) => { const classes = useStyles(); const list_type = listType.MOLECULE; @@ -120,6 +124,9 @@ const MoleculeList = memo( const imgHeight = 34; const imgWidth = 150; + const { getNglView } = useContext(NglContext); + const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage; + const isActiveFilter = !!(filterSettings || {}).active; const filterRef = useRef(); @@ -142,21 +149,35 @@ const MoleculeList = memo( }; useEffect(() => { - loadFromServer({ - url: getUrl({ list_type, target_on, mol_group_on }), - setOldUrl: url => setOldUrl(url), - old_url: oldUrl.current, - list_type, - setObjectList, - setCachedMolLists, - mol_group_on, - cached_mol_lists - }).catch(error => { - setState(() => { - throw error; + if (stage) { + loadFromServer({ + url: getUrl({ list_type, target_on, mol_group_on }), + setOldUrl: url => setOldUrl(url), + old_url: oldUrl.current, + list_type, + setObjectList: moleculeList => { + setMoleculeList(moleculeList); + selectFirstMolecule(stage, moleculeList); + }, + setCachedMolLists, + mol_group_on, + cached_mol_lists + }).catch(error => { + setState(() => { + throw error; + }); }); - }); - }, [list_type, mol_group_on, setObjectList, target_on, setCachedMolLists, cached_mol_lists]); + } + }, [ + list_type, + mol_group_on, + setMoleculeList, + target_on, + setCachedMolLists, + cached_mol_lists, + stage, + selectFirstMolecule + ]); const listItemOffset = (currentPage + 1) * moleculesPerPage; const currentMolecules = joinedMoleculeLists.slice(0, listItemOffset); @@ -310,11 +331,12 @@ function mapStateToProps(state) { }; } const mapDispatchToProps = { - setObjectList: apiActions.setMoleculeList, + setMoleculeList: apiActions.setMoleculeList, setCachedMolLists: apiActions.setCachedMolLists, deleteObject, loadObject, - setSortDialogOpen + setSortDialogOpen, + selectFirstMolecule }; MoleculeList.displayName = 'MoleculeList'; export default connect(mapStateToProps, mapDispatchToProps)(MoleculeList); diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js index a3a492cf6..e601d9bfa 100644 --- a/js/components/preview/molecule/moleculeView.js +++ b/js/components/preview/molecule/moleculeView.js @@ -3,7 +3,7 @@ */ import React, { memo, useEffect, useState, useRef, useContext, useCallback } from 'react'; -import { connect } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { Grid, Button, makeStyles, Typography, Tooltip } from '@material-ui/core'; import SVGInline from 'react-svg-inline'; import MoleculeStatusView, { molStatusTypes } from './moleculeStatusView'; @@ -95,7 +95,7 @@ const useStyles = makeStyles(theme => ({ } })); -const colourList = [ +export const colourList = [ '#EFCDB8', '#CC6666', '#FF6E4A', @@ -115,372 +115,344 @@ export const img_data_init = ` '`; -const MoleculeView = memo( - ({ - imageHeight, - imageWidth, - data, - to_query, - complexList, - fragmentDisplayList, - vectorOnList, - addVector, - removeVector, - addComplex, - removeComplex, - addLigand, - removeLigand, - target_on_name - }) => { - const [state, setState] = useState(); - const [countOfVectors, setCountOfVectors] = useState('-'); - const [cmpds, setCmpds] = useState('-'); - const selectedAll = useRef(false); - const siteRef = useRef(); - const currentID = (data && data.id) || undefined; - const classes = useStyles(); - const key = 'mol_image'; +const MoleculeView = memo(({ imageHeight, imageWidth, data }) => { + const [state, setState] = useState(); + const [countOfVectors, setCountOfVectors] = useState('-'); + const [cmpds, setCmpds] = useState('-'); + const selectedAll = useRef(false); + const currentID = (data && data.id) || undefined; + const classes = useStyles(); + const key = 'mol_image'; - const url = new URL(base_url + '/api/molimg/' + data.id + '/'); - const [img_data, setImg_data] = useState(img_data_init); + const dispatch = useDispatch(); + const to_query = useSelector(state => state.selectionReducers.to_query); + const complexList = useSelector(state => state.selectionReducers.complexList); + const fragmentDisplayList = useSelector(state => state.selectionReducers.fragmentDisplayList); + const vectorOnList = useSelector(state => state.selectionReducers.vectorOnList); + const target_on_name = useSelector(state => state.apiReducers.target_on_name); - const { getNglView } = useContext(NglContext); - const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage; + const url = new URL(base_url + '/api/molimg/' + data.id + '/'); + const [img_data, setImg_data] = useState(img_data_init); - const isLigandOn = (currentID && fragmentDisplayList.includes(currentID)) || false; - const isComplexOn = (currentID && complexList.includes(currentID)) || false; - const isVectorOn = (currentID && vectorOnList.includes(currentID)) || false; + const { getNglView } = useContext(NglContext); + const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage; - const hasAllValuesOn = isLigandOn && isComplexOn && isVectorOn; + const isLigandOn = (currentID && fragmentDisplayList.includes(currentID)) || false; + const isComplexOn = (currentID && complexList.includes(currentID)) || false; + const isVectorOn = (currentID && vectorOnList.includes(currentID)) || false; - const disableUserInteraction = useDisableUserInteraction(); + const hasAllValuesOn = isLigandOn && isComplexOn && isVectorOn; - const oldUrl = useRef(''); - const setOldUrl = url => { - oldUrl.current = url; - }; - const refOnCancel = useRef(); - const getRandomColor = () => colourList[data.id % colourList.length]; - const colourToggle = getRandomColor(); + const disableUserInteraction = useDisableUserInteraction(); + + const oldUrl = useRef(''); + const setOldUrl = url => { + oldUrl.current = url; + }; + const refOnCancel = useRef(); + const getRandomColor = () => colourList[data.id % colourList.length]; + const colourToggle = getRandomColor(); - const getCalculatedProps = useCallback( - () => [ - { name: moleculeProperty.mw, value: data.mw }, - { name: moleculeProperty.logP, value: data.logp }, - { name: moleculeProperty.tpsa, value: data.tpsa }, - { name: moleculeProperty.ha, value: data.ha }, - { name: moleculeProperty.hacc, value: data.hacc }, - { name: moleculeProperty.hdon, value: data.hdon }, - { name: moleculeProperty.rots, value: data.rots }, - { name: moleculeProperty.rings, value: data.rings }, - { name: moleculeProperty.velec, value: data.velec }, - { name: moleculeProperty.vectors, value: countOfVectors }, - { name: moleculeProperty.cpd, value: cmpds } - ], - [ - cmpds, - countOfVectors, - data.ha, - data.hacc, - data.hdon, - data.logp, - data.mw, - data.rings, - data.rots, - data.tpsa, - data.velec - ] - ); + const getCalculatedProps = useCallback( + () => [ + { name: moleculeProperty.mw, value: data.mw }, + { name: moleculeProperty.logP, value: data.logp }, + { name: moleculeProperty.tpsa, value: data.tpsa }, + { name: moleculeProperty.ha, value: data.ha }, + { name: moleculeProperty.hacc, value: data.hacc }, + { name: moleculeProperty.hdon, value: data.hdon }, + { name: moleculeProperty.rots, value: data.rots }, + { name: moleculeProperty.rings, value: data.rings }, + { name: moleculeProperty.velec, value: data.velec }, + { name: moleculeProperty.vectors, value: countOfVectors }, + { name: moleculeProperty.cpd, value: cmpds } + ], + [ + cmpds, + countOfVectors, + data.ha, + data.hacc, + data.hdon, + data.logp, + data.mw, + data.rings, + data.rots, + data.tpsa, + data.velec + ] + ); - // componentDidMount - useEffect(() => { - if (refOnCancel.current === undefined) { - let onCancel = () => {}; - Promise.all([ - loadFromServer({ - width: imageHeight, - height: imageWidth, - key, - old_url: oldUrl.current, - setImg_data, - setOld_url: newUrl => setOldUrl(newUrl), - url, - cancel: onCancel - }), - api({ url: `${base_url}/api/vector/${data.id}` }).then(response => { - const vectors = response.data.vectors['3d']; - setCountOfVectors(generateObjectList(vectors).length); - }), - api({ url: `${base_url}/api/graph/${data.id}` }).then(response => { - setCmpds(getTotalCountOfCompounds(response.data.graph)); - }) - ]).catch(error => { - setState(() => { - throw error; - }); + // componentDidMount + useEffect(() => { + if (refOnCancel.current === undefined) { + let onCancel = () => {}; + Promise.all([ + loadFromServer({ + width: imageHeight, + height: imageWidth, + key, + old_url: oldUrl.current, + setImg_data, + setOld_url: newUrl => setOldUrl(newUrl), + url, + cancel: onCancel + }), + api({ url: `${base_url}/api/vector/${data.id}` }).then(response => { + const vectors = response.data.vectors['3d']; + setCountOfVectors(generateObjectList(vectors).length); + }), + api({ url: `${base_url}/api/graph/${data.id}` }).then(response => { + setCmpds(getTotalCountOfCompounds(response.data.graph)); + }) + ]).catch(error => { + setState(() => { + throw error; }); - refOnCancel.current = onCancel; + }); + refOnCancel.current = onCancel; + } + return () => { + if (refOnCancel) { + refOnCancel.current(); } - return () => { - if (refOnCancel) { - refOnCancel.current(); - } - }; - }, [complexList, data.id, data.smiles, fragmentDisplayList, imageHeight, to_query, url, vectorOnList, imageWidth]); - - const svg_image = ( - - ); - // Here add the logic that updates this based on the information - // const refinement = ; - const selected_style = { - backgroundColor: colourToggle }; - const not_selected_style = {}; - const current_style = isLigandOn || isComplexOn || isVectorOn ? selected_style : not_selected_style; + }, [complexList, data.id, data.smiles, fragmentDisplayList, imageHeight, to_query, url, vectorOnList, imageWidth]); - const addNewLigand = () => { - addLigand(stage, data, colourToggle); - }; + const svg_image = ( + + ); + // Here add the logic that updates this based on the information + // const refinement = ; + const selected_style = { + backgroundColor: colourToggle + }; + const not_selected_style = {}; + const current_style = isLigandOn || isComplexOn || isVectorOn ? selected_style : not_selected_style; - const removeSelectedLigand = () => { - removeLigand(stage, data); - selectedAll.current = false; - }; + const addNewLigand = () => { + dispatch(addLigand(stage, data, colourToggle)); + }; + + const removeSelectedLigand = () => { + dispatch(removeLigand(stage, data)); + selectedAll.current = false; + }; - const onLigand = calledFromSelectAll => { - if (calledFromSelectAll === true && selectedAll.current === true) { - if (isLigandOn === false) { - addNewLigand(); - } - } else if (calledFromSelectAll && selectedAll.current === false) { + const onLigand = calledFromSelectAll => { + if (calledFromSelectAll === true && selectedAll.current === true) { + if (isLigandOn === false) { + addNewLigand(); + } + } else if (calledFromSelectAll && selectedAll.current === false) { + removeSelectedLigand(); + } else if (!calledFromSelectAll) { + if (isLigandOn === false) { + addNewLigand(); + } else { removeSelectedLigand(); - } else if (!calledFromSelectAll) { - if (isLigandOn === false) { - addNewLigand(); - } else { - removeSelectedLigand(); - } } - }; + } + }; - const removeSelectedComplex = () => { - removeComplex(stage, data, colourToggle); - selectedAll.current = false; - }; + const removeSelectedComplex = () => { + dispatch(removeComplex(stage, data, colourToggle)); + selectedAll.current = false; + }; - const addNewComplex = () => { - addComplex(stage, data, colourToggle); - }; + const addNewComplex = () => { + dispatch(addComplex(stage, data, colourToggle)); + }; - const onComplex = calledFromSelectAll => { - if (calledFromSelectAll === true && selectedAll.current === true) { - if (isComplexOn === false) { - addNewComplex(); - } - } else if (calledFromSelectAll && selectedAll.current === false) { + const onComplex = calledFromSelectAll => { + if (calledFromSelectAll === true && selectedAll.current === true) { + if (isComplexOn === false) { + addNewComplex(); + } + } else if (calledFromSelectAll && selectedAll.current === false) { + removeSelectedComplex(); + } else if (!calledFromSelectAll) { + if (isComplexOn === false) { + addNewComplex(); + } else { removeSelectedComplex(); - } else if (!calledFromSelectAll) { - if (isComplexOn === false) { - addNewComplex(); - } else { - removeSelectedComplex(); - } } - }; + } + }; - const removeSelectedVector = () => { - removeVector(stage, data); - selectedAll.current = false; - }; + const removeSelectedVector = () => { + dispatch(removeVector(stage, data)); + selectedAll.current = false; + }; - const addNewVector = () => { - addVector(stage, data).catch(error => { - setState(() => { - throw error; - }); + const addNewVector = () => { + dispatch(addVector(stage, data)).catch(error => { + setState(() => { + throw error; }); - }; + }); + }; - const onVector = calledFromSelectAll => { - if (calledFromSelectAll === true && selectedAll.current === true) { - if (isVectorOn === false) { - addNewVector(); - } - } else if (calledFromSelectAll && selectedAll.current === false) { + const onVector = calledFromSelectAll => { + if (calledFromSelectAll === true && selectedAll.current === true) { + if (isVectorOn === false) { + addNewVector(); + } + } else if (calledFromSelectAll && selectedAll.current === false) { + removeSelectedVector(); + } else if (!calledFromSelectAll) { + if (isVectorOn === false) { + addNewVector(); + } else { removeSelectedVector(); - } else if (!calledFromSelectAll) { - if (isVectorOn === false) { - addNewVector(); - } else { - removeSelectedVector(); - } } - }; + } + }; - return ( - - {/* Site number */} - - - {data.site} - + return ( + + {/* Site number */} + + + {data.site} + - - {/* Title label */} - - - {target_on_name && data.protein_code && data.protein_code.replace(`${target_on_name}-`, '')} - - - {/* Status code */} - - - {Object.values(molStatusTypes).map(type => ( - - - - ))} - + + {/* Title label */} + + + {target_on_name && data.protein_code && data.protein_code.replace(`${target_on_name}-`, '')} + + + {/* Status code */} + + + {Object.values(molStatusTypes).map(type => ( + + + + ))} + - {/* Control Buttons A, L, C, V */} - - - - - - - - - - - - - - + onLigand(true); + onComplex(true); + onVector(true); + }} + disabled={disableUserInteraction} + > + A + - - - {/* Molecule properties */} - - {getCalculatedProps().map(item => ( - - - {item.name === moleculeProperty.mw && Math.round(item.value)} - {item.name === moleculeProperty.logP && Math.round(item.value).toPrecision(1)} - {item.name === moleculeProperty.tpsa && Math.round(item.value)} - {item.name !== moleculeProperty.mw && - item.name !== moleculeProperty.logP && - item.name !== moleculeProperty.tpsa && - item.value} - - - ))} + + + + + + + + - {/* Image */} - - {svg_image} + + {/* Molecule properties */} + + {getCalculatedProps().map(item => ( + + + {item.name === moleculeProperty.mw && Math.round(item.value)} + {item.name === moleculeProperty.logP && Math.round(item.value).toPrecision(1)} + {item.name === moleculeProperty.tpsa && Math.round(item.value)} + {item.name !== moleculeProperty.mw && + item.name !== moleculeProperty.logP && + item.name !== moleculeProperty.tpsa && + item.value} + + + ))} + - ); - } -); -function mapStateToProps(state) { - return { - to_query: state.selectionReducers.to_query, - complexList: state.selectionReducers.complexList, - fragmentDisplayList: state.selectionReducers.fragmentDisplayList, - vectorOnList: state.selectionReducers.vectorOnList, - target_on_name: state.apiReducers.target_on_name - }; -} -const mapDispatchToProps = { - addVector, - removeVector, - addComplex, - removeComplex, - addLigand, - removeLigand -}; + {/* Image */} + + {svg_image} + + + ); +}); MoleculeView.displayName = 'MoleculeView'; -export default connect(mapStateToProps, mapDispatchToProps)(MoleculeView); +export default MoleculeView; diff --git a/js/components/preview/molecule/redux/dispatchActions.js b/js/components/preview/molecule/redux/dispatchActions.js index b5b9e4ade..9829fdf3d 100644 --- a/js/components/preview/molecule/redux/dispatchActions.js +++ b/js/components/preview/molecule/redux/dispatchActions.js @@ -26,6 +26,7 @@ import { import { VIEWS } from '../../../../constants/constants'; import { api } from '../../../../utils/api'; import { selectVectorAndResetCompounds } from '../../../../reducers/selection/dispatchActions'; +import { colourList } from '../moleculeView'; /** * Convert the JSON into a list of arrow objects @@ -159,3 +160,12 @@ export const removeLigand = (stage, data) => dispatch => { dispatch(deleteObject(Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateMoleculeObject(data)), stage)); dispatch(removeFromFragmentDisplayList(generateMoleculeId(data))); }; + +export const selectFirstMolecule = (majorView, moleculeList) => (dispatch, getState) => { + if (moleculeList) { + const firstMolecule = moleculeList[0]; + dispatch(addLigand(majorView, firstMolecule, colourList[0])); + dispatch(addComplex(majorView, firstMolecule, colourList[0])); + dispatch(addVector(majorView, firstMolecule)); + } +}; diff --git a/js/components/preview/moleculeGroups/molGroupSelector.js b/js/components/preview/moleculeGroups/molGroupSelector.js index bfd5b2407..0a9841490 100644 --- a/js/components/preview/moleculeGroups/molGroupSelector.js +++ b/js/components/preview/moleculeGroups/molGroupSelector.js @@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({ } })); -const molGroupSelector = memo(({ handleHeightChange }) => { +const MolGroupSelector = memo(({ handleHeightChange }) => { const classes = useStyles(); const ref = useRef(null); @@ -75,4 +75,4 @@ const molGroupSelector = memo(({ handleHeightChange }) => { ); }); -export default withLoadingMolGroupList(molGroupSelector); +export default withLoadingMolGroupList(MolGroupSelector); diff --git a/js/components/preview/moleculeGroups/redux/dispatchActions.js b/js/components/preview/moleculeGroups/redux/dispatchActions.js index 3f441825c..eb5526892 100644 --- a/js/components/preview/moleculeGroups/redux/dispatchActions.js +++ b/js/components/preview/moleculeGroups/redux/dispatchActions.js @@ -23,6 +23,7 @@ import { getUrl, loadFromServer } from '../../../../utils/genericList'; import { OBJECT_TYPE } from '../../../nglView/constants'; import { SCENES } from '../../../../reducers/ngl/constants'; import { setSortDialogOpen } from '../../molecule/redux/actions'; +import { selectFirstMolecule } from '../../molecule/redux/dispatchActions'; export const clearAfterDeselectingMoleculeGroup = ({ molGroupId, majorViewStage }) => (dispatch, getState) => { dispatch(setObjectSelection([molGroupId])); @@ -75,7 +76,32 @@ export const saveMoleculeGroupsToNglView = (molGroupList, stage) => dispatch => } }; -export const loadMoleculeGroups = ({ stage, setOldUrl, oldUrl, onCancel, isStateLoaded }) => (dispatch, getState) => { +export const selectFirstMolGroup = ({ summaryView }) => (dispatch, getState) => { + const currentMolGroup = getState().apiReducers.mol_group_list[0]; + if (currentMolGroup) { + const currMolGroupID = currentMolGroup.id; + dispatch(setMolGroupOn(currMolGroupID)); + const currentMolGroupStringID = `${OBJECT_TYPE.MOLECULE_GROUP}_${currMolGroupID}`; + dispatch(setMolGroupSelection([currMolGroupID])); + dispatch( + deleteObject( + { + display_div: VIEWS.SUMMARY_VIEW, + name: currentMolGroupStringID + }, + summaryView + ) + ); + dispatch( + loadObject(Object.assign({ display_div: VIEWS.SUMMARY_VIEW }, generateSphere(currentMolGroup, true)), summaryView) + ); + } +}; + +export const loadMoleculeGroups = ({ summaryView, setOldUrl, oldUrl, onCancel, isStateLoaded }) => ( + dispatch, + getState +) => { const state = getState(); const group_type = state.apiReducers.group_type; const target_on = state.apiReducers.target_on; @@ -86,29 +112,11 @@ export const loadMoleculeGroups = ({ stage, setOldUrl, oldUrl, onCancel, isState url: getUrl({ list_type, target_on, group_type }), setOldUrl: url => setOldUrl(url), old_url: oldUrl, - afterPush: data_list => dispatch(saveMoleculeGroupsToNglView(data_list, stage)), + afterPush: data_list => dispatch(saveMoleculeGroupsToNglView(data_list, summaryView)), list_type, setObjectList: async mol_group_list => { await dispatch(setMolGroupList(mol_group_list)); - const currentMolGroup = state.apiReducers.mol_group_list[0]; - if (currentMolGroup) { - const currMolGroupID = currentMolGroup.id; - dispatch(setMolGroupOn(currMolGroupID)); - const currentMolGroupStringID = `${OBJECT_TYPE.MOLECULE_GROUP}_${currMolGroupID}`; - dispatch(setMolGroupSelection([currMolGroupID])); - dispatch( - deleteObject( - { - display_div: VIEWS.SUMMARY_VIEW, - name: currentMolGroupStringID - }, - stage - ) - ); - dispatch( - loadObject(Object.assign({ display_div: VIEWS.SUMMARY_VIEW }, generateSphere(currentMolGroup, true)), stage) - ); - } + dispatch(selectFirstMolGroup({ summaryView })); }, cancel: onCancel }); diff --git a/js/components/preview/moleculeGroups/withLoadingMolGroupList.js b/js/components/preview/moleculeGroups/withLoadingMolGroupList.js index f2f6fcafc..8a6262f4e 100644 --- a/js/components/preview/moleculeGroups/withLoadingMolGroupList.js +++ b/js/components/preview/moleculeGroups/withLoadingMolGroupList.js @@ -11,6 +11,7 @@ import { loadMoleculeGroups } from './redux/dispatchActions'; export const withLoadingMolGroupList = WrappedComponent => { return memo(({ isStateLoaded, ...rest }) => { const [state, setState] = useState(); + const [wasLoaded, setWasLoaded] = useState(false); const { getNglView } = useContext(NglContext); const [oldUrl, setOldUrl] = useState(''); @@ -19,11 +20,12 @@ export const withLoadingMolGroupList = WrappedComponent => { const dispatch = useDispatch(); useEffect(() => { - const nglView = getNglView(VIEWS.SUMMARY_VIEW); - if (nglView) { + const summaryView = getNglView(VIEWS.SUMMARY_VIEW); + + if (summaryView && wasLoaded === false) { dispatch( loadMoleculeGroups({ - stage: nglView.stage, + summaryView: summaryView.stage, setOldUrl, oldUrl: oldUrl.current, onCancel, @@ -34,12 +36,13 @@ export const withLoadingMolGroupList = WrappedComponent => { throw error; }); }); + setWasLoaded(true); } return () => { onCancel(); }; - }, [isStateLoaded, getNglView, onCancel, dispatch, oldUrl]); + }, [isStateLoaded, onCancel, dispatch, oldUrl, getNglView, wasLoaded]); return ; });