#369 loading all datasets data in Preview component

js/components/datasets/customDatasetList.js

@@ -2,34 +2,27 @@
  * Created by abradley on 14/03/2018.
  */
 import React, { useEffect, memo } from 'react';
-import { useDispatch } from 'react-redux';
-import { setMoleculeListIsLoading } from './redux/actions';
-import { clearDatasetSettings, initializeDatasetFilter, loadDatasetCompoundsWithScores } from './redux/dispatchActions';
+import { useDispatch, useSelector } from 'react-redux';
+import { clearDatasetSettings, initializeDatasetFilter } from './redux/dispatchActions';
 import { DatasetMoleculeList } from './datasetMoleculeList';
 
 export const CustomDatasetList = memo(
   ({ dataset, height, setFilterItemsHeight, filterItemsHeight, hideProjects, isActive }) => {
     const dispatch = useDispatch();
+    const isLoadingMoleculeList = useSelector(state => state.datasetsReducers.isLoadingMoleculeList);
 
     useEffect(() => {
-      if (dataset && dataset.id && isActive) {
-        dispatch(setMoleculeListIsLoading(true));
-        dispatch(loadDatasetCompoundsWithScores(dataset.id))
-          .catch(error => {
-            throw new Error(error);
-          })
-          .finally(() => {
-            dispatch(setMoleculeListIsLoading(false));
-            dispatch(initializeDatasetFilter(dataset && dataset.id));
-          });
-      } else if (dataset && dataset.id && !isActive) {
-        dispatch(clearDatasetSettings(dataset.id));
+      if (isLoadingMoleculeList === false) {
+        if (dataset && dataset.id && isActive) {
+          dispatch(initializeDatasetFilter(dataset && dataset.id));
+        } else if (dataset && dataset.id && !isActive) {
+          dispatch(clearDatasetSettings(dataset.id));
+        }
       }
-
       return () => {
         dispatch(clearDatasetSettings(dataset?.id));
       };
-    }, [dataset, dispatch, isActive]);
+    }, [dataset, dispatch, isActive, isLoadingMoleculeList]);
 
     const title = dataset && `${dataset.title} v.${dataset.version}`;
 

js/components/datasets/datasetMoleculeView.js

@@ -283,7 +283,7 @@ export const DatasetMoleculeView = memo(
 
     // componentDidMount
     useEffect(() => {
-      if (refOnCancelImage.current === undefined) {
+      if (refOnCancelImage.current === undefined && data && data.smiles) {
         let onCancel = () => {};
         let url = new URL(`${base_url}/viewer/img_from_smiles/`);
         const params = {
@@ -312,7 +312,7 @@ export const DatasetMoleculeView = memo(
           refOnCancelImage.current();
         }
       };
-    }, [complexList, currentID, data.smiles, ligandList, imageHeight, imageWidth]);
+    }, [complexList, currentID, data, ligandList, imageHeight, imageWidth]);
 
     const svg_image = (
       <SVGInline

js/components/datasets/redux/dispatchActions.js

@@ -185,10 +185,10 @@ export const loadDatasetCompoundsWithScores = () => (dispatch, getState) => {
   return Promise.all(
     datasets.map(dataset =>
       // Hint for develop purposes add param &limit=20
-      api({ url: `${base_url}/api/compound-mols-scores/?compound_set=${dataset.id}` }).then(response => {
+      api({ url: `${base_url}/api/compound-mols-scores/?computed_set=${dataset.id}` }).then(response => {
         dispatch(addMoleculeList(dataset.id, response.data.results));
 
-        return api({ url: `${base_url}/api/compound-scores/?compound_set=${dataset.id}` }).then(res => {
+        return api({ url: `${base_url}/api/compound-scores/?computed_set=${dataset.id}` }).then(res => {
           const scores = res?.data?.results;
           dispatch(
             updateFilterShowedScoreProperties({

js/components/datasets/redux/reducer.js

@@ -103,6 +103,7 @@ const initializeContainerLists = (state, datasetID) => {
   state.complexLists[datasetID] = [];
   state.surfaceLists[datasetID] = [];
   state.inspirationLists[datasetID] = [];
+  return state;
 };
 
 export const datasetsReducers = (state = INITIAL_STATE, action = {}) => {
@@ -117,14 +118,11 @@ export const datasetsReducers = (state = INITIAL_STATE, action = {}) => {
       return Object.assign({}, state, { datasets: action.payload });
 
     case constants.ADD_MOLECULELIST:
-      const increasedMolecules = Object.assign({}, state.moleculeLists);
-
-      if (increasedMolecules[action.payload.datasetID] === undefined) {
-        increasedMolecules[action.payload.datasetID] = action.payload.moleculeList;
-        // initialize also control containers
-        initializeContainerLists(state, action.payload.datasetID);
-      }
-      return Object.assign({}, state, { moleculeLists: increasedMolecules });
+      // initialize also control containers
+      const initializedState = initializeContainerLists(state, action.payload.datasetID);
+      return Object.assign({}, initializedState, {
+        moleculeLists: { ...initializedState.moleculeLists, [action.payload.datasetID]: action.payload.moleculeList }
+      });
 
     case constants.REMOVE_MOLECULELIST:
       const decreasedMolecules = Object.assign({}, state.moleculeLists);

js/components/preview/Preview.js

@@ -27,10 +27,11 @@ import { SaveSnapshotBeforeExit } from '../snapshot/modals/saveSnapshotBeforeExi
 import { ModalShareSnapshot } from '../snapshot/modals/modalShareSnapshot';
 //import HotspotList from '../hotspot/hotspotList';
 import { TabPanel } from '../common/Tabs';
-import { loadDataSets } from '../datasets/redux/dispatchActions';
+import { loadDatasetCompoundsWithScores, loadDataSets } from '../datasets/redux/dispatchActions';
 import { SelectedCompoundList } from '../datasets/selectedCompoundsList';
 import { DatasetSelectorMenuButton } from '../datasets/datasetSelectorMenuButton';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import { setMoleculeListIsLoading } from '../datasets/redux/actions';
 
 const hitNavigatorWidth = 504;
 
@@ -93,13 +94,25 @@ const Preview = memo(({ isStateLoaded, hideProjects }) => {
   const [selectedDatasetIndex, setSelectedDatasetIndex] = useState();
   const currentDataset = customDatasets[selectedDatasetIndex];
 
+  /*
+     Loading datasets
+   */
   useEffect(() => {
     if (customDatasets.length === 0) {
-      dispatch(loadDataSets()).then(results => {
-        if (Array.isArray(results) && results.length > 0) {
-          setSelectedDatasetIndex(0);
-        }
-      });
+      dispatch(setMoleculeListIsLoading(true));
+      dispatch(loadDataSets())
+        .then(results => {
+          if (Array.isArray(results) && results.length > 0) {
+            setSelectedDatasetIndex(0);
+          }
+          return dispatch(loadDatasetCompoundsWithScores());
+        })
+        .catch(error => {
+          throw new Error(error);
+        })
+        .finally(() => {
+          dispatch(setMoleculeListIsLoading(false));
+        });
     }
   }, [customDatasets.length, dispatch]);