#107 add not completed loading images of compounds

m2ms · Mar 2, 2020 · a3108fa · a3108fa
1 parent a7d521a
commit a3108fa
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 13 deletions.
diff --git a/js/components/preview/compounds/compoundView.js b/js/components/preview/compounds/compoundView.js
@@ -9,11 +9,17 @@ import { NglContext } from '../../nglView/nglProvider';
 import { compoundsColors } from './redux/constants';
 import { handleClickOnCompound, loadCompoundImageData } from './redux/dispatchActions';
 
+export const loadingCompoundImage = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px"><g>
+  <circle cx="50" cy="50" fill="none" stroke="#3f51b5" stroke-width="4" r="26" stroke-dasharray="150.79644737231007 52.26548245743669" transform="rotate(238.988 50 50)">
+    <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.689655172413793s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+  </circle>  '</svg>`;
+
 export const CompoundView = memo(({ height, width, data }) => {
   const dispatch = useDispatch();
   const highlightedCompoundId = useSelector(state => state.previewReducers.compounds.highlightedCompoundId);
   const { getNglView } = useContext(NglContext);
   const majorViewStage = getNglView(VIEWS.MAJOR_VIEW).stage;
+  const [image, setImage] = useState(loadingCompoundImage);
 
   const [state, setState] = useState();
 
@@ -53,8 +59,11 @@ export const CompoundView = memo(({ height, width, data }) => {
   }
 
   return (
-    <div onClick={event => dispatch(handleClickOnCompound({ event, data, majorViewStage }))} style={current_style}>
-      {data.image && <SVGInline svg={data.image} />}
+    <div
+      onClick={event => dispatch(handleClickOnCompound({ event, data, majorViewStage, setImage }))}
+      style={current_style}
+    >
+      <SVGInline svg={image} />
     </div>
   );
 });
diff --git a/js/components/preview/compounds/redux/dispatchActions.js b/js/components/preview/compounds/redux/dispatchActions.js
@@ -108,7 +108,7 @@ const showCompoundNglView = ({ majorViewStage, data }) => (dispatch, getState) =
   }
 };
 
-export const handleClickOnCompound = ({ data, event, majorViewStage }) => async (dispatch, getState) => {
+export const handleClickOnCompound = ({ data, event, majorViewStage, setImage }) => async (dispatch, getState) => {
   const state = getState();
   const currentCompoundClass = state.previewReducers.compounds.currentCompoundClass;
   const currentCompounds = state.previewReducers.compounds.currentCompounds;
@@ -129,7 +129,7 @@ export const handleClickOnCompound = ({ data, event, majorViewStage }) => async
   }
 };
 
-export const loadCompoundImageData = ({ width, height, onCancel, data }) => dispatch => {
+export const loadCompoundImageData = ({ width, height, onCancel, data, setImage }) => dispatch => {
   let url = undefined;
   let key = undefined;
 
@@ -147,7 +147,7 @@ export const loadCompoundImageData = ({ width, height, onCancel, data }) => disp
     width,
     height,
     key,
-    setImg_data: image => {}, //dispatch(updateCurrentCompound({ id: data.index, key: 'image', value: image })),
+    setImg_data: image => setImage(image),
     url,
     cancel: onCancel
   });

diff --git a/js/components/preview/compounds/redux/reducer.js b/js/components/preview/compounds/redux/reducer.js
@@ -1,10 +1,5 @@
 import { compoundsColors, constants } from './constants';
 
-export const loadingCompoundImage = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px"><g>
-  <circle cx="50" cy="50" fill="none" stroke="#3f51b5" stroke-width="4" r="26" stroke-dasharray="150.79644737231007 52.26548245743669" transform="rotate(238.988 50 50)">
-    <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="0.689655172413793s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
-  </circle>  '</svg>`;
-
 export const INITIAL_STATE = {
   currentPage: -1,
   compoundsPerPage: 20,
@@ -15,7 +10,6 @@ export const INITIAL_STATE = {
       mol:"CCNC(=O)Nc1cc(C)on1",
       index:0,
       selectedClass: undefined,
-      image: loadingCompoundImage,
       isShowed: false
    }] */
   currentCompounds: [],

diff --git a/js/reducers/selection/selectors.js b/js/reducers/selection/selectors.js
@@ -1,5 +1,4 @@
 import { createSelector } from 'reselect';
-import { loadingCompoundImage } from '../../components/preview/compounds/redux/reducer';
 
 const getToSelect = state => state.selectionReducers.to_select;
 const getToQuery = state => state.selectionReducers.to_query;
@@ -32,7 +31,6 @@ export const getAllCompoundsList = createSelector(
         inputData.mol = to_query;
         inputData.index = index;
         inputData.selectedClass = undefined;
-        inputData.image = loadingCompoundImage;
         inputData.isShowed = false;
         compoundsList.push(inputData);
       });