xchem#117 fix error handling

pavol-brunclik-m2ms · Mar 10, 2020 · 44e1956 · 44e1956
1 parent 9a7272e
commit 44e1956
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 31 deletions.
diff --git a/js/components/header/errorReport.js b/js/components/header/errorReport.js
@@ -2,8 +2,9 @@
  * Created by abradley on 08/10/2018.
  */
 
-import React, { memo, useState } from 'react';
+import React, { memo, useContext, useState } from 'react';
 import { Button, makeStyles } from '@material-ui/core';
+import { HeaderContext } from './headerContext';
 const uuidv4 = require('uuid/v4');
 
 const useStyles = makeStyles(theme => ({
@@ -18,9 +19,10 @@ const useStyles = makeStyles(theme => ({
 export const ErrorReport = memo(() => {
   const classes = useStyles();
   const [throwError, setThrowError] = useState();
+  const { setError } = useContext(HeaderContext);
 
   if (throwError) {
-    throw new Error('Custom user error.' + uuidv4());
+    setError(new Error('Custom user error.' + uuidv4()));
   }
 
   return (

diff --git a/js/components/nglView/nglProvider.js b/js/components/nglView/nglProvider.js
@@ -1,14 +1,16 @@
-import React, { createContext, memo, useState } from 'react';
+import React, { createContext, memo, useContext, useState } from 'react';
+import { HeaderContext } from '../header/headerContext';
 
 export const NglContext = createContext();
 
 export const NglProvider = memo(props => {
   //const nglViewList = useRef([]);
   const [nglViewList, setNglViewList] = useState([]);
+  const { setError } = useContext(HeaderContext);
 
   const registerNglView = (id, stage) => {
     if (nglViewList.filter(ngl => ngl.id === id).length > 0) {
-      console.error('Cannot register NGL View with used ID! ', id);
+      setError(new Error('Cannot register NGL View with used ID! ', id));
     } else {
       let extendedList = nglViewList;
       extendedList.push({ id, stage });
@@ -18,7 +20,7 @@ export const NglProvider = memo(props => {
 
   const unregisterNglView = id => {
     if (nglViewList.filter(ngl => ngl.id === id).length === 0) {
-      console.error('Cannot remove NGL View with given ID! ', id);
+      setError(new Error('Cannot remove NGL View with given ID! ', id));
     } else {
       for (let i = 0; i < nglViewList.length; i++) {
         if (nglViewList[i].id === id) {
@@ -38,7 +40,7 @@ export const NglProvider = memo(props => {
       case 1:
         return filteredList[0];
       default:
-        console.error('Cannot found NGL View with given ID!');
+        setError(new Error('Cannot found NGL View with given ID!'));
         break;
     }
   };

diff --git a/js/components/nglView/nglView.js b/js/components/nglView/nglView.js
@@ -14,6 +14,7 @@ import { throttle } from 'lodash';
 import { BACKGROUND_COLOR, NGL_PARAMS } from './constants';
 import { makeStyles, useTheme } from '@material-ui/core';
 import { VIEWS } from '../../constants/constants';
+import { HeaderContext } from '../header/headerContext';
 
 const useStyles = makeStyles(theme => ({
   paper: {
@@ -31,6 +32,7 @@ const useStyles = makeStyles(theme => ({
 const NglView = memo(({ div_id, height, setOrientation, removeAllNglComponents, handleNglViewPick }) => {
   // connect to NGL Stage object
   const { registerNglView, unregisterNglView, getNglView } = useContext(NglContext);
+  const { setError } = useContext(HeaderContext);
   const [stage, setStage] = useState();
   const classes = useStyles();
   const theme = useTheme();
@@ -58,29 +60,29 @@ const NglView = memo(({ div_id, height, setOrientation, removeAllNglComponents,
     (newStage, getNglView) => {
       window.addEventListener('resize', handleResize);
       newStage.mouseControls.add('clickPick-left', (stage, pickingProxy) =>
-        handleNglViewPick(stage, pickingProxy, getNglView)
+        handleNglViewPick(stage, pickingProxy, getNglView, setError)
       );
 
       newStage.mouseObserver.signals.scrolled.add(handleOrientationChanged);
       newStage.mouseObserver.signals.dropped.add(handleOrientationChanged);
       newStage.mouseObserver.signals.dragged.add(handleOrientationChanged);
     },
-    [handleResize, handleOrientationChanged, handleNglViewPick]
+    [handleResize, handleOrientationChanged, handleNglViewPick, setError]
   );
 
   const unregisterStageEvents = useCallback(
     (stage, getNglView) => {
       window.addEventListener('resize', handleResize);
       window.removeEventListener('resize', handleResize);
       stage.mouseControls.remove('clickPick-left', (stage, pickingProxy) =>
-        handleNglViewPick(stage, pickingProxy, getNglView)
+        handleNglViewPick(stage, pickingProxy, getNglView, setError)
       );
 
       stage.mouseObserver.signals.scrolled.remove(handleOrientationChanged);
       stage.mouseObserver.signals.dropped.remove(handleOrientationChanged);
       stage.mouseObserver.signals.dragged.remove(handleOrientationChanged);
     },
-    [handleResize, handleOrientationChanged, handleNglViewPick]
+    [handleResize, handleOrientationChanged, handleNglViewPick, setError]
   );
 
   useEffect(() => {

diff --git a/js/components/nglView/redux/dispatchActions.js b/js/components/nglView/redux/dispatchActions.js
@@ -8,7 +8,7 @@ import { setDuckYankData, setMolGroupOn, setPanddaSiteOn } from '../../../reduce
 import * as listTypes from '../../../constants/listTypes';
 import { selectVectorAndResetCompounds } from '../../../reducers/selection/dispatchActions';
 
-export const toggleMoleculeGroup = (molGroupId, summaryViewStage, majorViewStage) => (dispatch, getState) => {
+export const toggleMoleculeGroup = (molGroupId, summaryViewStage, majorViewStage, setError) => (dispatch, getState) => {
   const state = getState();
   const molGroupSelection = state.selectionReducers.mol_group_selection;
   const objIdx = molGroupSelection.indexOf(molGroupId);
@@ -33,7 +33,9 @@ export const toggleMoleculeGroup = (molGroupId, summaryViewStage, majorViewStage
       loadObject(
         Object.assign({ display_div: VIEWS.SUMMARY_VIEW }, generateSphere(currentMolGroup, true)),
         summaryViewStage
-      )
+      ).catch(error => {
+        setError(error);
+      })
     );
   } else {
     selectionCopy.splice(objIdx, 1);
@@ -51,7 +53,9 @@ export const toggleMoleculeGroup = (molGroupId, summaryViewStage, majorViewStage
       loadObject(
         Object.assign({ display_div: VIEWS.SUMMARY_VIEW }, generateSphere(currentMolGroup, false)),
         summaryViewStage
-      )
+      ).catch(error => {
+        setError(error);
+      })
     );
     dispatch(
       clearAfterDeselectingMoleculeGroup({
@@ -78,7 +82,7 @@ const processInt = pickingProxy => {
   return { interaction: tot_name, complex_id: mol_int };
 };
 
-export const handleNglViewPick = (stage, pickingProxy, getNglView) => (dispatch, getState) => {
+export const handleNglViewPick = (stage, pickingProxy, getNglView, setError) => (dispatch, getState) => {
   const state = getState();
   if (pickingProxy) {
     // For assigning the ligand interaction
@@ -103,16 +107,20 @@ export const handleNglViewPick = (stage, pickingProxy, getNglView) => (dispatch,
         name: input_dict['interaction'] + SUFFIX.INTERACTION,
         OBJECT_TYPE: OBJECT_TYPE.ARROW
       };
-      dispatch(loadObject(objToLoad, stage));
+      dispatch(
+        loadObject(objToLoad, stage).catch(error => {
+          setError(error);
+        })
+      );
     } else if (pickingProxy.component && pickingProxy.component.object && pickingProxy.component.object.name) {
       let name = pickingProxy.component.object.name;
       // Ok so now perform logic
       const type = name.split('_')[0];
       const pk = parseInt(name.split('_')[1], 10);
       if (type === OBJECT_TYPE.MOLECULE_GROUP) {
-        dispatch(toggleMoleculeGroup(pk, stage, getNglView(VIEWS.MAJOR_VIEW).stage));
+        dispatch(toggleMoleculeGroup(pk, stage, getNglView(VIEWS.MAJOR_VIEW).stage), setError);
       } else if (type === OBJECT_TYPE.MOLGROUPS_SELECT) {
-        dispatch(toggleMoleculeGroup(pk, stage, getNglView(VIEWS.MAJOR_VIEW).stage));
+        dispatch(toggleMoleculeGroup(pk, stage, getNglView(VIEWS.MAJOR_VIEW).stage), setError);
       } else if (type === listTypes.PANDDA_SITE) {
         dispatch(setPanddaSiteOn(pk));
       }

diff --git a/js/components/preview/compounds/compoundList.js b/js/components/preview/compounds/compoundList.js
@@ -21,6 +21,7 @@ import InfiniteScroll from 'react-infinite-scroller';
 import { getCanLoadMoreCompounds, getCompoundClasses, getCompoundListOffset } from './redux/selectors';
 import { NglContext } from '../../nglView/nglProvider';
 import { VIEWS } from '../../../constants/constants';
+import { HeaderContext } from '../../header/headerContext';
 
 const useStyles = makeStyles(theme => ({
   textField: {
@@ -47,6 +48,7 @@ export const CompoundList = memo(({ height }) => {
   const dispatch = useDispatch();
   const { getNglView } = useContext(NglContext);
   const majorViewStage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
+  const { setError } = useContext(HeaderContext);
 
   const to_query = useSelector(state => state.selectionReducers.to_query);
   const compoundClasses = useSelector(state => getCompoundClasses(state));
@@ -123,7 +125,7 @@ export const CompoundList = memo(({ height }) => {
             </Button>
             <Button
               color="primary"
-              onClick={() => dispatch(clearAllSelectedCompounds(majorViewStage))}
+              onClick={() => dispatch(clearAllSelectedCompounds(majorViewStage, setError))}
               startIcon={<Delete />}
             >
               Clear Selection

diff --git a/js/components/preview/compounds/compoundView.js b/js/components/preview/compounds/compoundView.js
@@ -63,7 +63,7 @@ export const CompoundView = memo(({ height, width, data, index }) => {
 
   return (
     <div
-      onClick={event => dispatch(handleClickOnCompound({ event, data, majorViewStage, index }))}
+      onClick={event => dispatch(handleClickOnCompound({ event, data, majorViewStage, index, setError }))}
       style={current_style}
     >
       <SVGInline svg={image} />

diff --git a/js/components/preview/compounds/redux/dispatchActions.js b/js/components/preview/compounds/redux/dispatchActions.js
@@ -67,7 +67,7 @@ export const loadNextPageOfCompounds = () => (dispatch, getState) => {
   dispatch(setCurrentPage(nextPage));
 };
 
-const showCompoundNglView = ({ majorViewStage, data, index }) => (dispatch, getState) => {
+const showCompoundNglView = ({ majorViewStage, data, index, setError }) => (dispatch, getState) => {
   const state = getState();
   const to_query_sdf_info = state.selectionReducers.to_query_sdf_info;
   const configuration = state.previewReducers.compounds.configuration;
@@ -105,29 +105,29 @@ const showCompoundNglView = ({ majorViewStage, data, index }) => (dispatch, getS
       .then(response => {
         // Now load this into NGL
         const newConf = response.data[0];
-        dispatch(
+        dispatch(setConfiguration(index, newConf));
+        return dispatch(
           loadObject(
             Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateCompoundMolObject(newConf, data.smiles)),
             majorViewStage
           )
         );
-        dispatch(setConfiguration(index, newConf));
       })
       .catch(error => {
-        throw error;
+        setError(error);
       });
   }
 };
 
-export const clearAllSelectedCompounds = majorViewStage => (dispatch, getState) => {
+export const clearAllSelectedCompounds = (majorViewStage, setError) => (dispatch, getState) => {
   dispatch(setToBuyList([]));
   const state = getState();
   // reset objects from nglView and showedCompoundList
   const currentCompounds = state.previewReducers.compounds.currentCompounds;
   const showedCompoundList = state.previewReducers.compounds.showedCompoundList;
   showedCompoundList.forEach(index => {
     const data = currentCompounds[index];
-    dispatch(showCompoundNglView({ majorViewStage, data, index }));
+    dispatch(showCompoundNglView({ majorViewStage, data, index, setError }));
     dispatch(removeShowedCompoundFromList(index));
   });
   //  reset compoundsClasses
@@ -142,7 +142,10 @@ export const clearAllSelectedCompounds = majorViewStage => (dispatch, getState)
   dispatch(dispatch(setCurrentCompoundClass(compoundsColors.blue.key)));
 };
 
-export const handleClickOnCompound = ({ data, event, majorViewStage, index }) => async (dispatch, getState) => {
+export const handleClickOnCompound = ({ data, event, majorViewStage, index, setError }) => async (
+  dispatch,
+  getState
+) => {
   const state = getState();
   const currentCompoundClass = state.previewReducers.compounds.currentCompoundClass;
   const showedCompoundList = state.previewReducers.compounds.showedCompoundList;
@@ -151,7 +154,7 @@ export const handleClickOnCompound = ({ data, event, majorViewStage, index }) =>
   dispatch(setHighlightedCompoundId(index));
 
   if (event.shiftKey) {
-    await dispatch(showCompoundNglView({ majorViewStage, data, index }));
+    await dispatch(showCompoundNglView({ majorViewStage, data, index, setError }));
     if (showedCompoundList.find(item => item === index) !== undefined) {
       dispatch(removeShowedCompoundFromList(index));
     } else {

diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js
@@ -8,7 +8,6 @@ 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';
-import { deleteObject, loadObject } from '../../../reducers/ngl/dispatchActions';
 import MoleculeView from './moleculeView';
 import { MoleculeListSortFilterDialog, filterMolecules, getAttrDefinition } from './moleculeListSortFilterDialog';
 import { getJoinedMoleculeList } from './redux/selectors';
@@ -313,8 +312,6 @@ function mapStateToProps(state) {
 const mapDispatchToProps = {
   setMoleculeList: apiActions.setMoleculeList,
   setCachedMolLists: apiActions.setCachedMolLists,
-  deleteObject,
-  loadObject,
   setSortDialogOpen
 };
 MoleculeList.displayName = 'MoleculeList';

diff --git a/js/components/preview/moleculeGroups/molGroupSelector.js b/js/components/preview/moleculeGroups/molGroupSelector.js
@@ -11,6 +11,7 @@ import { withLoadingMolGroupList } from './withLoadingMolGroupList';
 import { NglContext } from '../../nglView/nglProvider';
 import { useDisableUserInteraction } from '../../helpers/useEnableUserInteracion';
 import { clearMoleculeGroupSelection } from './redux/dispatchActions';
+import { HeaderContext } from '../../header/headerContext';
 
 export const heightOfBody = '164px';
 
@@ -36,6 +37,7 @@ const MolGroupSelector = memo(({ handleHeightChange }) => {
   const { getNglView } = useContext(NglContext);
   const disableUserInteraction = useDisableUserInteraction();
   const dispatch = useDispatch();
+  const { setError } = useContext(HeaderContext);
 
   return (
     <Panel
@@ -46,7 +48,7 @@ const MolGroupSelector = memo(({ handleHeightChange }) => {
       title="Hit cluster selector"
       headerActions={[
         <Button
-          onClick={() => dispatch(clearMoleculeGroupSelection({ getNglView }))}
+          onClick={() => dispatch(clearMoleculeGroupSelection({ getNglView, setError }))}
           disabled={disableUserInteraction}
           color="inherit"
           variant="text"