- retrieve images from server and cache them

js/components/preview/molecule/redux/actions.js

@@ -9,3 +9,8 @@ export const reloadMoleculeReducer = newState => ({
   type: constants.SET_SORT_DIALOG_OPEN,
   payload: newState
 });
+
+export const addImageToCache = (molId, image) => ({
+  type: constants.ADD_IMAGE_TO_CACHE,
+  payload: {molId: molId, image: image}
+});

js/components/preview/molecule/redux/constants.js

@@ -2,7 +2,8 @@ const prefix = 'PREVIEW_MOLECULE_';
 
 export const constants = {
   SET_SORT_DIALOG_OPEN: prefix + 'SET_SORT_DIALOG_OPEN',
-  RELOAD_REDUCER: prefix + 'RELOAD_REDUCER'
+  RELOAD_REDUCER: prefix + 'RELOAD_REDUCER',
+  ADD_IMAGE_TO_CACHE: prefix + 'ADD_IMAGE_TO_CACHE'
 };
 
 export const MOL_ATTR = {
@@ -88,3 +89,8 @@ export const MOL_ATTR = {
 };
 
 export const MOL_ATTRIBUTES = Object.values(MOL_ATTR);
+
+export const MOL_TYPE = {
+  HIT: 'HIT',
+  DATASET: 'DATASET'
+};

js/components/preview/molecule/redux/dispatchActions.js

@@ -44,6 +44,8 @@ import { getMoleculeOfCurrentVector } from '../../../../reducers/selection/selec
 import { resetCurrentCompoundsSettings } from '../../compounds/redux/actions';
 import { selectMoleculeGroup } from '../../moleculeGroups/redux/dispatchActions';
 import { setDirectAccess, setDirectAccessProcessed } from '../../../../reducers/api/actions';
+import {MOL_TYPE} from './constants';
+import {addImageToCache} from './actions';
 
 /**
  * Convert the JSON into a list of arrow objects
@@ -450,3 +452,50 @@ export const applyDirectSelection = (stage, stageSummaryView) => (dispatch, getS
     dispatch(setDirectAccessProcessed(true));
   }
 };
+
+export const getMolImage = (molId, molType, width, height) => (dispatch, getState) => {
+  const state = getState();
+
+  const imageCache = state.molecule.imageCache;
+
+  const molIdStr = molId.toString();
+  if (imageCache.hasOwnProperty(molIdStr)) {
+    return new Promise((resolve, reject) => {
+      resolve(imageCache[molIdStr]);
+    });
+  } else {
+    loadMolImage(molId, molType, width, height).then(i => {
+      dispatch(addImageToCache(molId.toString(), i));
+      return i;
+    });
+  }
+};
+
+export const loadMolImage = (molId, molType, width, height) => {
+  let url = undefined;
+  if (molType === MOL_TYPE.HIT) {
+    url = new URL(`${base_url}/api/molimg/${molId}/`);
+    url.searchParams.append('width', width);
+    url.searchParams.append('height', height);
+  } else if (molType === MOL_TYPE.DATASET) {
+    url = new URL(`${base_url}/viewer/img_from_smiles/`);
+    url.searchParams.append('width', width);
+    url.searchParams.append('height', height);
+    url.searchParams.append('smiles', molId);
+  } else {
+    console.error('Trying to load image for unknown molecule type.');
+    return Promise.resolve();
+  }
+
+  let onCancel = () => {};
+  api({
+    url,
+    onCancel
+  }).then(response => {
+    if (molType === MOL_TYPE.HIT) {
+      return response.data['mol_image'];
+    } else {
+      return response.data;
+    }
+  });
+};

js/components/preview/molecule/redux/reducer.js

@@ -1,7 +1,8 @@
 import { constants } from './constants';
 
 export const INITIAL_STATE = {
-  sortDialogOpen: false
+  sortDialogOpen: false,
+  imageCache: {}
 };
 
 export const molecule = (state = INITIAL_STATE, action = {}) => {
@@ -14,6 +15,11 @@ export const molecule = (state = INITIAL_STATE, action = {}) => {
     case constants.RELOAD_REDUCER:
       return Object.assign({}, state, { ...action.payload });
 
+    case constants.ADD_IMAGE_TO_CACHE:
+      return {...state, imageCache: {
+        ...state.imageCache, [action.payload.molId]: action.payload.image
+      }};
+
     default:
       return state;
   }