- #1483 - state based rendering is now done

js/components/datasets/redux/actions.js

@@ -623,3 +623,35 @@ export const setUpdatedDatasets = updatedDataset => ({
   type: constants.SET_UPDATED_DATASETS,
   payload: { updatedDataset }
 });
+
+export const setToBeDisplayedListForDataset = (datasetID, toBeDisplayedList) => {
+  return {
+    type: constants.SET_TO_BE_DISPLAYED_LIST_DATASET,
+    toBeDisplayedList: toBeDisplayedList,
+    datasetID: datasetID
+  };
+};
+
+export const appendToBeDisplayedListForDataset = (datasetID, item) => {
+  return {
+    type: constants.APPEND_TO_BE_DISPLAYED_LIST_DATASET,
+    item: item,
+    datasetID: datasetID
+  };
+};
+
+export const removeFromToBeDisplayedListForDataset = (datasetID, item) => {
+  return {
+    type: constants.REMOVE_FROM_TO_BE_DISPLAYED_LIST_DATASET,
+    item: item,
+    datasetID: datasetID
+  };
+};
+
+export const updateInToBeDisplayedListForDataset = (datasetID, item) => {
+  return {
+    type: constants.UPDATE_IN_TO_BE_DISPLAYED_LIST_DATASET,
+    item: item,
+    datasetID: datasetID
+  };
+};

js/components/datasets/redux/constants.js

@@ -122,7 +122,12 @@ export const constants = {
   SET_SELECTED_COMPOUNDS_ITERATOR: prefix + 'SET_SELECTED_COMPOUNDS_ITERATOR',
 
   SET_INSPIRATION_DIALOG_ACTION: prefix + 'SET_INSPIRATION_DIALOG_ACTION',
-  SET_INSPIRATION_DIALOG_OPENED_FOR_SELECTED_COMPOUND: prefix + 'SET_INSPIRATION_DIALOG_OPENED_FOR_SELECTED_COMPOUND'
+  SET_INSPIRATION_DIALOG_OPENED_FOR_SELECTED_COMPOUND: prefix + 'SET_INSPIRATION_DIALOG_OPENED_FOR_SELECTED_COMPOUND',
+
+  SET_TO_BE_DISPLAYED_LIST_DATASET: prefix + 'SET_TO_BE_DISPLAYED_LIST_DATASET',
+  APPEND_TO_BE_DISPLAYED_LIST_DATASET: prefix + 'APPEND_TO_BE_DISPLAYED_LIST_DATASET',
+  REMOVE_FROM_TO_BE_DISPLAYED_LIST_DATASET: prefix + 'REMOVE_FROM_TO_BE_DISPLAYED_LIST_DATASET',
+  UPDATE_IN_TO_BE_DISPLAYED_LIST_DATASET: prefix + 'UPDATE_IN_TO_BE_DISPLAYED_LIST_DATASET'
 };
 
 export const COUNT_OF_VISIBLE_SCORES = 7;

js/components/datasets/redux/dispatchActions.js

@@ -37,7 +37,9 @@ import {
   removeDataset,
   appendCompoundToSelectedCompoundsByDataset,
   setDatasetIterator,
-  setSelectedCompoundsIterator
+  setSelectedCompoundsIterator,
+  appendToBeDisplayedListForDataset,
+  updateInToBeDisplayedListForDataset
 } from './actions';
 import { base_url } from '../../routes/constants';
 import {
@@ -78,6 +80,7 @@ import { getRepresentationsByType } from '../../nglView/generatingObjects';
 import { getRandomColor } from '../../preview/molecule/utils/color';
 import { isCompoundFromVectorSelector } from '../../preview/compounds/redux/dispatchActions';
 import { getCompoundById } from '../../../utils/genericDispatchActions';
+import { NGL_OBJECTS } from '../../../reducers/ngl/constants';
 
 export const initializeDatasetFilter = datasetID => (dispatch, getState) => {
   const state = getState();
@@ -104,34 +107,26 @@ export const addDatasetHitProtein = (
   skipTracking = false,
   representations = undefined
 ) => async dispatch => {
-  dispatch(appendProteinList(datasetID, generateMoleculeCompoundId(data), skipTracking));
-  return dispatch(
-    loadObject({
-      target: Object.assign(
-        { display_div: VIEWS.MAJOR_VIEW },
-        generateHitProteinObject(data, colourToggle, base_url, datasetID)
-      ),
-      stage,
-      previousRepresentations: representations,
-      orientationMatrix: null
+  dispatch(
+    appendToBeDisplayedListForDataset(datasetID, {
+      type: NGL_OBJECTS.PROTEIN,
+      id: data.id,
+      display: true,
+      representations: representations,
+      datasetID: datasetID
     })
-  ).finally(() => {
-    const currentOrientation = stage.viewerControls.getOrientation();
-    dispatch(setOrientation(VIEWS.MAJOR_VIEW, currentOrientation));
-  });
+  );
 };
 
 export const removeDatasetHitProtein = (stage, data, colourToggle, datasetID, skipTracking = false) => dispatch => {
   dispatch(
-    deleteObject(
-      Object.assign(
-        { display_div: VIEWS.MAJOR_VIEW },
-        generateHitProteinObject(data, colourToggle, base_url, datasetID)
-      ),
-      stage
-    )
+    updateInToBeDisplayedListForDataset(datasetID, {
+      id: data.id,
+      display: false,
+      type: NGL_OBJECTS.PROTEIN,
+      datasetID: datasetID
+    })
   );
-  dispatch(removeFromProteinList(datasetID, generateMoleculeCompoundId(data), skipTracking));
 };
 
 export const addDatasetComplex = (
@@ -142,31 +137,26 @@ export const addDatasetComplex = (
   skipTracking = false,
   representations = undefined
 ) => async dispatch => {
-  dispatch(appendComplexList(datasetID, generateMoleculeCompoundId(data), skipTracking));
-  return dispatch(
-    loadObject({
-      target: Object.assign(
-        { display_div: VIEWS.MAJOR_VIEW },
-        generateComplexObject(data, colourToggle, base_url, datasetID)
-      ),
-      stage,
-      previousRepresentations: representations,
-      orientationMatrix: null
+  dispatch(
+    appendToBeDisplayedListForDataset(datasetID, {
+      type: NGL_OBJECTS.COMPLEX,
+      id: data.id,
+      display: true,
+      representations: representations,
+      datasetID: datasetID
     })
-  ).finally(() => {
-    const currentOrientation = stage.viewerControls.getOrientation();
-    dispatch(setOrientation(VIEWS.MAJOR_VIEW, currentOrientation));
-  });
+  );
 };
 
 export const removeDatasetComplex = (stage, data, colourToggle, datasetID, skipTracking = false) => dispatch => {
   dispatch(
-    deleteObject(
-      Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateComplexObject(data, colourToggle, base_url, datasetID)),
-      stage
-    )
+    updateInToBeDisplayedListForDataset(datasetID, {
+      id: data.id,
+      display: false,
+      type: NGL_OBJECTS.COMPLEX,
+      datasetID: datasetID
+    })
   );
-  dispatch(removeFromComplexList(datasetID, generateMoleculeCompoundId(data), skipTracking));
 };
 
 export const addDatasetSurface = (
@@ -176,31 +166,48 @@ export const addDatasetSurface = (
   datasetID,
   representations = undefined
 ) => async dispatch => {
-  dispatch(appendSurfaceList(datasetID, generateMoleculeCompoundId(data)));
-  return dispatch(
-    loadObject({
-      target: Object.assign(
-        { display_div: VIEWS.MAJOR_VIEW },
-        generateSurfaceObject(data, colourToggle, base_url, datasetID)
-      ),
-      stage,
-      previousRepresentations: representations,
-      orientationMatrix: null
+  dispatch(
+    appendToBeDisplayedListForDataset(datasetID, {
+      type: NGL_OBJECTS.SURFACE,
+      id: data.id,
+      display: true,
+      representations: representations,
+      datasetID: datasetID
     })
-  ).finally(() => {
-    const currentOrientation = stage.viewerControls.getOrientation();
-    dispatch(setOrientation(VIEWS.MAJOR_VIEW, currentOrientation));
-  });
+  );
+  // dispatch(appendSurfaceList(datasetID, generateMoleculeCompoundId(data)));
+  // return dispatch(
+  //   loadObject({
+  //     target: Object.assign(
+  //       { display_div: VIEWS.MAJOR_VIEW },
+  //       generateSurfaceObject(data, colourToggle, base_url, datasetID)
+  //     ),
+  //     stage,
+  //     previousRepresentations: representations,
+  //     orientationMatrix: null
+  //   })
+  // ).finally(() => {
+  //   const currentOrientation = stage.viewerControls.getOrientation();
+  //   dispatch(setOrientation(VIEWS.MAJOR_VIEW, currentOrientation));
+  // });
 };
 
 export const removeDatasetSurface = (stage, data, colourToggle, datasetID) => dispatch => {
   dispatch(
-    deleteObject(
-      Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateSurfaceObject(data, colourToggle, base_url, datasetID)),
-      stage
-    )
+    updateInToBeDisplayedListForDataset(datasetID, {
+      id: data.id,
+      display: false,
+      type: NGL_OBJECTS.SURFACE,
+      datasetID: datasetID
+    })
   );
-  dispatch(removeFromSurfaceList(datasetID, generateMoleculeCompoundId(data)));
+  // dispatch(
+  //   deleteObject(
+  //     Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateSurfaceObject(data, colourToggle, base_url, datasetID)),
+  //     stage
+  //   )
+  // );
+  // dispatch(removeFromSurfaceList(datasetID, generateMoleculeCompoundId(data)));
 };
 
 export const addDatasetLigand = (
@@ -211,42 +218,26 @@ export const addDatasetLigand = (
   skipTracking = false,
   representations = undefined
 ) => async (dispatch, getState) => {
-  dispatch(appendLigandList(datasetID, generateMoleculeCompoundId(data), skipTracking));
-  console.count(`Grabbed orientation before loading dataset ligand`);
-  const currentOrientation = stage.viewerControls.getOrientation();
-  return dispatch(
-    loadObject({
-      target: Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateMoleculeObject(data, colourToggle, datasetID)),
-      stage,
-      previousRepresentations: representations,
-      markAsRightSideLigand: true
+  dispatch(
+    appendToBeDisplayedListForDataset(datasetID, {
+      type: NGL_OBJECTS.LIGAND,
+      id: data.id,
+      display: true,
+      representations: representations,
+      datasetID: datasetID
     })
-  ).finally(() => {
-    const skipOrientation = false; //state.trackingReducers.skipOrientationChange;
-    if (!skipOrientation) {
-      const ligandOrientation = stage.viewerControls.getOrientation();
-      dispatch(setOrientation(VIEWS.MAJOR_VIEW, ligandOrientation));
-
-      dispatch(appendMoleculeOrientation(getDatasetMoleculeID(datasetID, data?.id), ligandOrientation));
-
-      // keep current orientation of NGL View
-      if (!skipOrientation) {
-        console.count(`Before applying orientation after loading dataset ligand.`);
-        stage.viewerControls.orient(currentOrientation);
-        console.count(`After applying orientation after loading dataset ligand.`);
-      }
-    }
-  });
+  );
 };
 
 export const removeDatasetLigand = (stage, data, colourToggle, datasetID, skipTracking = false) => dispatch => {
   dispatch(
-    deleteObject(
-      Object.assign({ display_div: VIEWS.MAJOR_VIEW }, generateMoleculeObject(data, undefined, datasetID)),
-      stage
-    )
+    updateInToBeDisplayedListForDataset(datasetID, {
+      id: data.id,
+      display: false,
+      type: NGL_OBJECTS.LIGAND,
+      datasetID: datasetID
+    })
   );
-  dispatch(removeFromLigandList(datasetID, generateMoleculeCompoundId(data), skipTracking));
 };
 
 export const loadDataSets = targetId => async dispatch => {

js/components/datasets/redux/reducer.js

@@ -87,7 +87,20 @@ export const INITIAL_STATE = {
 
   inspirationsDialogOpenedForSelectedCompound: false,
 
-  isSelectedDatasetScrolled: false
+  isSelectedDatasetScrolled: false,
+  //Map of datasetID and its objects which shape is bellow
+  //   Shape of the object in toBeDisplayedList:
+  // {
+  // 	type: 'L|P|C|S|V|RIBBON|etc...',
+  // 	id: 1,
+
+  // 		center: true,
+  // 		withQuality: true,
+  // 		representations: [] etc...
+
+  // 	display: true
+  // }
+  toBeDisplayedList: {}
 };
 
 /**
@@ -191,6 +204,45 @@ const removeDatasetFromState = (state, datasetId) => {
 
 export const datasetsReducers = (state = INITIAL_STATE, action = {}) => {
   switch (action.type) {
+    case constants.SET_TO_BE_DISPLAYED_LIST_DATASET: {
+      return setList(state, 'toBeDisplayedList', action.datasetID, action.list);
+    }
+    case constants.APPEND_TO_BE_DISPLAYED_LIST_DATASET: {
+      return {
+        ...state,
+        toBeDisplayedList: {
+          ...state.toBeDisplayedList,
+          [action.datasetID]: [...(state.toBeDisplayedList[action.datasetID] || []), action.item]
+        }
+      };
+    }
+    case constants.REMOVE_FROM_TO_BE_DISPLAYED_LIST_DATASET: {
+      return {
+        ...state,
+        toBeDisplayedList: {
+          ...state.toBeDisplayedList,
+          [action.datasetID]: state.toBeDisplayedList[action.datasetID].filter(
+            i => i.id !== action.item.id || i.type !== action.item.type
+          )
+        }
+      };
+    }
+    case constants.UPDATE_IN_TO_BE_DISPLAYED_LIST_DATASET: {
+      return {
+        ...state,
+        toBeDisplayedList: {
+          ...state.toBeDisplayedList,
+          [action.datasetID]: state.toBeDisplayedList[action.datasetID].map(item => {
+            if (item.id === action.item.id && item.type === action.item.type) {
+              return { ...item, ...action.item };
+            } else {
+              return item;
+            }
+          })
+        }
+      };
+    }
+
     case constants.ADD_DATASET:
       const increasedDatasets = state.datasets.slice();
       increasedDatasets.push(action.payload);

js/components/preview/Preview.js

@@ -47,6 +47,16 @@ import { setTagEditorOpen, setMoleculeForTagEdit, setToastMessages } from '../..
 import { LoadingContext } from '../loading';
 import { ToastContext } from '../toast';
 import { TOAST_LEVELS } from '../toast/constants';
+import { useDisplayLigandLHS } from '../../reducers/ngl/useDisplayLigandLHS';
+import { useDisplayProteinLHS } from '../../reducers/ngl/useDisplayProteinLHS';
+import { useDisplayComplexLHS } from '../../reducers/ngl/useDisplayComplexLHS';
+import { useDisplaySurfaceLHS } from '../../reducers/ngl/useDisplaySurfacesLHS';
+import { useDisplayVectorLHS } from '../../reducers/ngl/useDisplayVectorLHS';
+import { useDisplayDensityLHS } from '../../reducers/ngl/useDisplayDensityLHS';
+import { useDisplayLigandRHS } from '../../reducers/ngl/useDisplayLigandRHS';
+import { useDisplayProteinRHS } from '../../reducers/ngl/useDisplayProteinRHS';
+import { useDisplayComplexRHS } from '../../reducers/ngl/useDisplayComplexRHS';
+import { useDisplaySurfaceRHS } from '../../reducers/ngl/useDisplaySurfaceRHS';
 
 const ReactGridLayout = WidthProvider(ResponsiveGridLayout);
 
@@ -128,6 +138,18 @@ const Preview = memo(({ isStateLoaded, hideProjects, isSnapshot = false }) => {
 
   const { setMoleculesAndTagsAreLoading } = useContext(LoadingContext);
 
+  useDisplayLigandLHS();
+  useDisplayProteinLHS();
+  useDisplayComplexLHS();
+  useDisplaySurfaceLHS();
+  useDisplayVectorLHS();
+  useDisplayDensityLHS();
+
+  useDisplayLigandRHS();
+  useDisplayProteinRHS();
+  useDisplayComplexRHS();
+  useDisplaySurfaceRHS();
+
   useEffect(() => {
     if (target_on && !isSnapshot) {
       dispatch(loadMoleculesAndTagsNew(target_on));