#533 RHS tab and filters not preserved in snapshot

Author: Adriána Kohanová

js/components/datasets/datasetSelectorMenuButton.js

@@ -6,6 +6,7 @@ import Popper from '@material-ui/core/Popper';
 import MenuItem from '@material-ui/core/MenuItem';
 import MenuList from '@material-ui/core/MenuList';
 import { makeStyles } from '@material-ui/core';
+import { useDispatch } from 'react-redux';
 
 const useStyles = makeStyles(theme => ({
   dropDown: {
@@ -21,9 +22,10 @@ export const DatasetSelectorMenuButton = ({
   setSelectedDatasetIndex
 }) => {
   const classes = useStyles();
+  const dispatch = useDispatch();
 
   const handleMenuItemClick = (event, index) => {
-    setSelectedDatasetIndex(index);
+    dispatch(setSelectedDatasetIndex(index));
     setOpen(false);
     event.stopPropagation();
   };

js/components/datasets/redux/actions.js

@@ -26,6 +26,16 @@ export const setMoleculeListIsLoading = isLoading => ({
   payload: isLoading
 });
 
+export const setSelectedDatasetIndex = selectedIndex => ({
+  type: constants.SET_SELECTED_DATASET_INDEX,
+  payload: selectedIndex
+});
+
+export const setTabValue = (oldValue, tabValue, tabName, oldName) => ({
+  type: constants.SET_TAB_VALUE,
+  payload: { oldValue: oldValue, value: tabValue, name: tabName, oldName: oldName }
+});
+
 export const replaceAllMoleculeLists = allMoleculeLists => ({
   type: constants.REPLACE_ALL_MOLECULELISTS,
   payload: allMoleculeLists

js/components/datasets/redux/constants.js

@@ -7,6 +7,8 @@ export const constants = {
   ADD_MOLECULELIST: prefix + 'ADD_MOLECULELIST',
   REMOVE_MOLECULELIST: prefix + 'REMOVE_MOLECULELIST',
   SET_IS_LOADING_MOLECULE_LIST: prefix + 'SET_IS_LOADING_MOLECULE_LIST',
+  SET_SELECTED_DATASET_INDEX: prefix + 'SET_SELECTED_DATASET_INDEX',
+  SET_TAB_VALUE: prefix + 'SET_TAB_VALUE',
 
   SET_FILTER_SETTINGS: prefix + 'SET_FILTER_SETTINGS',
   SET_FILTER_PROPERTIES: prefix + 'SET_FILTER_PROPERTIES',

js/components/datasets/redux/reducer.js

@@ -7,6 +7,9 @@ export const INITIAL_STATE = {
   scoreDatasetMap: {}, // map of $datasetID and its $scoreList
   scoreCompoundMap: {}, // map of $compoundID and its $scoreList
 
+  selectedDatasetIndex: 0,
+  tabValue: 0,
+
   // filter
   filterDatasetMap: {}, // map of $datasetID and its $filterSettings
   filterPropertiesDatasetMap: {}, // map of $datasetID and its $filterProperties
@@ -138,7 +141,7 @@ export const datasetsReducers = (state = INITIAL_STATE, action = {}) => {
       return Object.assign({}, state, { datasets: action.payload });
 
     case constants.REPLACE_ALL_MOLECULELISTS:
-      return {...state, moleculeLists: action.payload};
+      return { ...state, moleculeLists: action.payload };
 
     case constants.ADD_MOLECULELIST:
       // initialize also control containers
@@ -161,6 +164,12 @@ export const datasetsReducers = (state = INITIAL_STATE, action = {}) => {
     case constants.SET_IS_LOADING_MOLECULE_LIST:
       return Object.assign({}, state, { isLoadingMoleculeList: action.payload });
 
+    case constants.SET_SELECTED_DATASET_INDEX:
+      return Object.assign({}, state, { selectedDatasetIndex: action.payload });
+
+    case constants.SET_TAB_VALUE:
+      return Object.assign({}, state, { tabValue: action.payload.value });
+
     case constants.SET_FILTER_SETTINGS:
       const { datasetID, filter } = action.payload;
       return { ...state, filterDatasetMap: { ...state.filterDatasetMap, [datasetID]: filter } };
@@ -347,7 +356,7 @@ export const datasetsReducers = (state = INITIAL_STATE, action = {}) => {
       return Object.assign({}, state, { inspirationFragmentList: [...diminishedInspirationFragmentList] });
 
     case constants.SET_ALL_INSPIRATIONS:
-      return {...state, allInspirations: action.payload};
+      return { ...state, allInspirations: action.payload };
 
     case constants.APPEND_MOLECULE_TO_COMPOUNDS_TO_BUY_OF_DATASET:
       const setOfMolecules = new Set(state.compoundsToBuyDatasetMap[action.payload.datasetID]);

js/components/preview/Preview.js

@@ -31,7 +31,12 @@ import { loadDatasetCompoundsWithScores, loadDataSets } from '../datasets/redux/
 import { SelectedCompoundList } from '../datasets/selectedCompoundsList';
 import { DatasetSelectorMenuButton } from '../datasets/datasetSelectorMenuButton';
 import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import { setMoleculeListIsLoading, setAllInspirations } from '../datasets/redux/actions';
+import {
+  setMoleculeListIsLoading,
+  setSelectedDatasetIndex,
+  setTabValue,
+  setAllInspirations
+} from '../datasets/redux/actions';
 
 const hitNavigatorWidth = 504;
 
@@ -91,14 +96,15 @@ const Preview = memo(({ isStateLoaded, hideProjects }) => {
   const dispatch = useDispatch();
 
   const customDatasets = useSelector(state => state.datasetsReducers.datasets);
-  const [selectedDatasetIndex, setSelectedDatasetIndex] = useState(0);
+  const selectedDatasetIndex = useSelector(state => state.datasetsReducers.selectedDatasetIndex);
   const currentDataset = customDatasets[selectedDatasetIndex];
   const target_on = useSelector(state => state.apiReducers.target_on);
   const isTrackingRestoring = useSelector(state => state.trackingReducers.isTrackingCompoundsRestoring);
 
   const all_mol_lists = useSelector(state => state.apiReducers.all_mol_lists);
   const moleculeLists = useSelector(state => state.datasetsReducers.moleculeLists);
   const isLoadingMoleculeList = useSelector(state => state.datasetsReducers.isLoadingMoleculeList);
+  const tabValue = useSelector(state => state.datasetsReducers.tabValue);
 
   /*
      Loading datasets
@@ -109,7 +115,7 @@ const Preview = memo(({ isStateLoaded, hideProjects }) => {
       dispatch(loadDataSets(target_on))
         .then(results => {
           if (Array.isArray(results) && results.length > 0) {
-            setSelectedDatasetIndex(0);
+            dispatch(setSelectedDatasetIndex(0));
           }
           return dispatch(loadDatasetCompoundsWithScores());
         })
@@ -189,14 +195,26 @@ const Preview = memo(({ isStateLoaded, hideProjects }) => {
   )}px - ${summaryViewHeight}px  - ${projectHistoryHeight}px - ${TABS_HEADER_HEIGHT}px )`;
   const [showHistory, setShowHistory] = useState(false);
 
-  const [tabValue, setTabValue] = useState(0);
   const getTabValue = () => {
     if (tabValue === 2) {
       return tabValue + selectedDatasetIndex;
     }
     return tabValue;
   };
 
+  const getTabName = () => {
+    if (tabValue === 0) {
+      return 'Vector selector';
+    }
+    if (tabValue === 1) {
+      return 'Selected compounds';
+    }
+    if (tabValue >= 2) {
+      return currentDataset?.title;
+    }
+    return '';
+  };
+
   useEffect(() => {
     // Unmount Preview - reset NGL state
     return () => {
@@ -253,13 +271,25 @@ const Preview = memo(({ isStateLoaded, hideProjects }) => {
               aria-label="outlined primary button group"
               className={classes.tabButtonGroup}
             >
-              <Button size="small" variant={getTabValue() === 0 ? 'contained' : 'text'} onClick={() => setTabValue(0)}>
+              <Button
+                size="small"
+                variant={getTabValue() === 0 ? 'contained' : 'text'}
+                onClick={() => dispatch(setTabValue(tabValue, 0, 'Vector selector', getTabName()))}
+              >
                 Vector selector
               </Button>
-              <Button size="small" variant={getTabValue() === 1 ? 'contained' : 'text'} onClick={() => setTabValue(1)}>
+              <Button
+                size="small"
+                variant={getTabValue() === 1 ? 'contained' : 'text'}
+                onClick={() => dispatch(setTabValue(tabValue, 1, 'Selected compounds', getTabName()))}
+              >
                 Selected compounds
               </Button>
-              <Button size="small" variant={getTabValue() >= 2 ? 'contained' : 'text'} onClick={() => setTabValue(2)}>
+              <Button
+                size="small"
+                variant={getTabValue() >= 2 ? 'contained' : 'text'}
+                onClick={() => dispatch(setTabValue(tabValue, 2, currentDataset?.title, getTabName()))}
+              >
                 {currentDataset?.title}
               </Button>
               <Button

js/reducers/tracking/constants.js

@@ -59,6 +59,9 @@ export const actionType = {
   REDO: 'REDO',
   ARROW_NAVIGATION: 'ARROW_NAVIGATION',
   SNAPSHOT: 'SNAPSHOT',
+  TAB: 'TAB',
+  DATASET_INDEX: 'DATASET_INDEX',
+  DATASET_FILTER: 'DATASET_FILTER',
   ALL_HIDE: 'ALL_HIDE',
   ALL_TURNED_ON: 'ALL_TURNED_ON',
   ALL_TURNED_OFF: 'ALL_TURNED_OFF',
@@ -103,7 +106,8 @@ export const actionDescription = {
   TARGET: 'Target',
   ALL: 'All',
   LIGANDS: 'Ligands',
-  SIDECHAINS: 'Sidechains'
+  SIDECHAINS: 'Sidechains',
+  TAB: 'Tab'
 };
 
 export const actionObjectType = {