From 56bdf613afee4dab016001ceaaa42777387345e8 Mon Sep 17 00:00:00 2001
From: Boris Kovar <boris.kovar@m2ms.sk>
Date: Tue, 8 Dec 2020 10:52:44 +0100
Subject: [PATCH] - finished caching

---
 js/components/datasets/datasetMoleculeView.js | 39 ++++---------------
 .../preview/molecule/moleculeView.js          | 39 ++++---------------
 .../preview/molecule/redux/dispatchActions.js | 10 +++--
 3 files changed, 20 insertions(+), 68 deletions(-)

diff --git a/js/components/datasets/datasetMoleculeView.js b/js/components/datasets/datasetMoleculeView.js
index 6292cb222..9e7533a42 100644
--- a/js/components/datasets/datasetMoleculeView.js
+++ b/js/components/datasets/datasetMoleculeView.js
@@ -41,6 +41,8 @@ import { isString } from 'lodash';
 import { SvgTooltip } from '../common';
 import { OBJECT_TYPE } from '../nglView/constants';
 import { getRepresentationsByType } from '../nglView/generatingObjects';
+import { getMolImage } from '../preview/molecule/redux/dispatchActions';
+import { MOL_TYPE } from '../preview/molecule/redux/constants';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -312,35 +314,9 @@ export const DatasetMoleculeView = memo(
 
     // componentDidMount
     useEffect(() => {
-      if (/*refOnCancelImage.current === undefined && */ data && data.smiles) {
-        let onCancel = () => {};
-        let url = new URL(`${base_url}/viewer/img_from_smiles/`);
-        const params = {
-          width: imageHeight,
-          height: imageWidth,
-          smiles: data.smiles
-        };
-        Object.keys(params).forEach(key => url.searchParams.append(key, params[key]));
-
-        api({
-          url,
-          cancel: onCancel
-        })
-          .then(response => {
-            if (response.data !== undefined) {
-              setImage(response.data);
-            }
-          })
-          .catch(error => {
-            throw new Error(error);
-          });
-        refOnCancelImage.current = onCancel;
-      }
-      return () => {
-        if (refOnCancelImage) {
-          refOnCancelImage.current();
-        }
-      };
+      dispatch(getMolImage(data.smiles, MOL_TYPE.DATASET, imageHeight, imageWidth)).then(i => {
+        setImage(i);
+      });
     }, [
       C,
       currentID,
@@ -350,7 +326,8 @@ export const DatasetMoleculeView = memo(
       imageWidth,
       data.smiles,
       data.id,
-      filteredDatasetMoleculeList
+      filteredDatasetMoleculeList,
+      dispatch
     ]);
 
     const svg_image = (
@@ -552,7 +529,6 @@ export const DatasetMoleculeView = memo(
       dispatch(moveSelectedMoleculeInspirationsSettings(data, nextItem));
       const inspirations = getInspirationsForMol(datasetID, nextItem.id);
       dispatch(setInspirationMoleculeDataList(inspirations));
-      // dispatch(setInspirationFragmentList(nextItem.computed_inspirations));
       dispatch(setCrossReferenceCompoundName(moleculeTitleNext));
       if (setRef && ref.current) {
         setRef(refNext);
@@ -576,7 +552,6 @@ export const DatasetMoleculeView = memo(
       dispatch(moveSelectedMoleculeInspirationsSettings(data, previousItem));
       const inspirations = getInspirationsForMol(datasetID, previousItem.id);
       dispatch(setInspirationMoleculeDataList(inspirations));
-      // dispatch(setInspirationFragmentList(previousItem.computed_inspirations));
       dispatch(setCrossReferenceCompoundName(moleculeTitlePrev));
       if (setRef && ref.current) {
         setRef(refPrevious);
diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
index 16ff1b31b..83ddd336b 100644
--- a/js/components/preview/molecule/moleculeView.js
+++ b/js/components/preview/molecule/moleculeView.js
@@ -25,7 +25,8 @@ import {
   removeDensity,
   addLigand,
   removeLigand,
-  searchMoleculeGroupByMoleculeID
+  searchMoleculeGroupByMoleculeID,
+  getMolImage
 } from './redux/dispatchActions';
 import { base_url } from '../../routes/constants';
 import { moleculeProperty } from './helperConstants';
@@ -33,6 +34,7 @@ import { centerOnLigandByMoleculeID } from '../../../reducers/ngl/dispatchAction
 import { SvgTooltip } from '../../common';
 import { OBJECT_TYPE } from '../../nglView/constants';
 import { getRepresentationsByType } from '../../nglView/generatingObjects';
+import {MOL_TYPE} from './redux/constants';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -280,37 +282,10 @@ const MoleculeView = memo(
 
     // 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 => {
-          throw new Error(error);
-        });
-        refOnCancel.current = onCancel;
-      }
-      return () => {
-        if (refOnCancel) {
-          refOnCancel.current();
-        }
-      };
-    }, [data.id, data.smiles, imageHeight, url, imageWidth]);
+      dispatch(getMolImage(data.id, MOL_TYPE.HIT, imageHeight, imageWidth)).then(i => {
+        setImg_data(i);
+      });
+    }, [data.id, data.smiles, imageHeight, url, imageWidth, dispatch]);
 
     useEffect(() => {
       if (searchMoleculeGroup) {
diff --git a/js/components/preview/molecule/redux/dispatchActions.js b/js/components/preview/molecule/redux/dispatchActions.js
index 535ad26e8..9695e6b7b 100644
--- a/js/components/preview/molecule/redux/dispatchActions.js
+++ b/js/components/preview/molecule/redux/dispatchActions.js
@@ -456,7 +456,7 @@ export const applyDirectSelection = (stage, stageSummaryView) => (dispatch, getS
 export const getMolImage = (molId, molType, width, height) => (dispatch, getState) => {
   const state = getState();
 
-  const imageCache = state.molecule.imageCache;
+  const imageCache = state.previewReducers.molecule.imageCache;
 
   const molIdStr = molId.toString();
   if (imageCache.hasOwnProperty(molIdStr)) {
@@ -464,8 +464,10 @@ export const getMolImage = (molId, molType, width, height) => (dispatch, getStat
       resolve(imageCache[molIdStr]);
     });
   } else {
-    loadMolImage(molId, molType, width, height).then(i => {
-      dispatch(addImageToCache(molId.toString(), i));
+    return loadMolImage(molId, molType, width, height).then(i => {
+      if (!imageCache.hasOwnProperty(molIdStr)) {
+        dispatch(addImageToCache(molId.toString(), i));
+      };
       return i;
     });
   }
@@ -488,7 +490,7 @@ export const loadMolImage = (molId, molType, width, height) => {
   }
 
   let onCancel = () => {};
-  api({
+  return api({
     url,
     onCancel
   }).then(response => {