- #441 - nearly finished implementation

js/components/datasets/datasetMoleculeView.js

@@ -43,6 +43,7 @@ import { isString } from 'lodash';
 import { SvgTooltip } from '../common';
 import { getMolImage } from '../preview/molecule/redux/dispatchActions';
 import { MOL_TYPE } from '../preview/molecule/redux/constants';
+import { deselectVectorCompound, isCompoundFromVectorSelector, showHideLigand } from '../preview/compounds/redux/dispatchActions';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -264,10 +265,12 @@ export const DatasetMoleculeView = memo(
     P,
     C,
     S,
-    V
+    V,
+    fromSelectedCompounds = false
   }) => {
     const selectedAll = useRef(false);
-    const currentID = (data && data.id) || undefined;
+    const currentID = (data && data.id) || (data && data.smiles) || undefined;
+    const isFromVectorSelector = isCompoundFromVectorSelector(data);
     const classes = useStyles();
     const ref = useRef(null);
     const dispatch = useDispatch();
@@ -299,7 +302,11 @@ export const DatasetMoleculeView = memo(
     const hasAllValuesOn = isLigandOn && isProteinOn && isComplexOn;
     const hasSomeValuesOn = !hasAllValuesOn && (isLigandOn || isProteinOn || isComplexOn || isSurfaceOn);
 
-    const areArrowsVisible = isLigandOn || isProteinOn || isComplexOn || isSurfaceOn;
+    let areArrowsVisible = isLigandOn || isProteinOn || isComplexOn || isSurfaceOn;
+
+    if (fromSelectedCompounds) {
+      areArrowsVisible = false;
+    }
 
     // const disableUserInteraction = useDisableUserInteraction();
 
@@ -359,10 +366,14 @@ export const DatasetMoleculeView = memo(
       } else if (calledFromSelectAll && selectedAll.current === false) {
         removeSelectedLigand(calledFromSelectAll);
       } else if (!calledFromSelectAll) {
-        if (isLigandOn === false) {
-          addNewLigand();
+        if (isFromVectorSelector) {
+          dispatch(showHideLigand(data, stage));
         } else {
-          removeSelectedLigand();
+          if (isLigandOn === false) {
+            addNewLigand();
+          } else {
+            removeSelectedLigand();
+          }
         }
       }
     };
@@ -558,6 +569,7 @@ export const DatasetMoleculeView = memo(
                     dispatch(appendMoleculeToCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
                   } else {
                     dispatch(removeMoleculeFromCompoundsOfDatasetToBuy(datasetID, currentID, moleculeTitle));
+                    dispatch(deselectVectorCompound(data));
                   }
                 }}
               />
@@ -646,7 +658,7 @@ export const DatasetMoleculeView = memo(
                         onProtein(true);
                         onComplex(true);
                       }}
-                      disabled={false}
+                      disabled={isFromVectorSelector}
                     >
                       A
                     </Button>
@@ -674,7 +686,7 @@ export const DatasetMoleculeView = memo(
                         [classes.contColButtonSelected]: isProteinOn
                       })}
                       onClick={() => onProtein()}
-                      disabled={false}
+                      disabled={isFromVectorSelector}
                     >
                       P
                     </Button>
@@ -689,7 +701,7 @@ export const DatasetMoleculeView = memo(
                         [classes.contColButtonSelected]: isComplexOn
                       })}
                       onClick={() => onComplex()}
-                      disabled={false}
+                      disabled={isFromVectorSelector}
                     >
                       C
                     </Button>
@@ -703,7 +715,7 @@ export const DatasetMoleculeView = memo(
                         [classes.contColButtonSelected]: isSurfaceOn
                       })}
                       onClick={() => onSurface()}
-                      disabled={false}
+                      disabled={isFromVectorSelector}
                     >
                       S
                     </Button>
@@ -729,7 +741,7 @@ export const DatasetMoleculeView = memo(
                             setRef(ref.current);
                           }
                         }}
-                        disabled={false}
+                        disabled={isFromVectorSelector}
                       >
                         F
                       </Button>
@@ -751,7 +763,7 @@ export const DatasetMoleculeView = memo(
                             setRef(ref.current);
                           }
                         }}
-                        disabled={false}
+                        disabled={isFromVectorSelector}
                       >
                         X
                       </Button>
@@ -776,7 +788,10 @@ export const DatasetMoleculeView = memo(
                   filteredScoreProperties[datasetID] &&
                   filteredScoreProperties[datasetID].map(score => {
                     //const item = scoreCompoundMap && scoreCompoundMap[data?.compound]?.find(o => o.score.id === score.id);
-                    const value = allScores[score.name];
+                    let value = allScores[score.name];
+                    if (!value) {
+                      value = data[score.name];
+                    }
                     return (
                       <Tooltip title={`${score.name} - ${score.description} : ${value}`} key={score.name}>
                         {(value && (

js/components/datasets/redux/reducer.js

@@ -275,12 +275,16 @@ export const datasetsReducers = (state = INITIAL_STATE, action = {}) => {
       return Object.assign({}, state, { scoreCompoundMap: {} });
 
     case constants.UPDATE_FILTER_SHOWED_SCORE_PROPERTIES:
-      return {
-        ...state,
-        filteredScoreProperties: {
-          ...state.filteredScoreProperties,
-          [action.payload.datasetID]: action.payload.scoreList
-        }
+      if (state.filteredScoreProperties[action.payload.datasetID]) {
+        return {...state};
+      } else {
+        return {
+          ...state,
+          filteredScoreProperties: {
+            ...state.filteredScoreProperties,
+            [action.payload.datasetID]: action.payload.scoreList
+          }
+        };
       };
 
     case constants.REMOVE_FROM_FILTER_SHOWED_SCORE_PROPERTIES:

js/components/datasets/redux/selectors.js

@@ -18,6 +18,8 @@ const densityList = state => state.selectionReducers.densityList;
 const vectorOnList = state => state.selectionReducers.vectorOnList;
 const filteredScoreProperties = state => state.datasetsReducers.filteredScoreProperties;
 
+const selectedVectorCompounds = state => state.previewReducers.compounds.allSelectedCompounds;
+
 export const getInitialDatasetFilterSettings = createSelector(
   (_, datasetID) => datasetID,
   scoreDatasetMap,
@@ -259,7 +261,7 @@ export const getFilteredDatasetMoleculeList = createSelector(
       const defaultFilterProperties = getInitialDatasetFilterProperties(state, datasetID);
 
       let sortedAttributes = filterSettings.priorityOrder
-        .filter(attr => defaultFilterProperties[attr]?.order != 0 || false)
+        .filter(attr => defaultFilterProperties[attr]?.order !== 0 || false)
         .map(attr => attr);
 
       return filteredMolecules.sort((a, b) => {
@@ -304,7 +306,8 @@ export const getFilteredDatasetMoleculeList = createSelector(
 export const getMoleculesObjectIDListOfCompoundsToBuy = createSelector(
   compoundsToBuyDatasetMap,
   moleculeLists,
-  (compoundsToBuyDatasetMap, moleculeLists) => {
+  selectedVectorCompounds,
+  (compoundsToBuyDatasetMap, moleculeLists, selectedVectorCompounds) => {
     let moleculeList = [];
     Object.keys(compoundsToBuyDatasetMap).forEach(datasetID => {
       compoundsToBuyDatasetMap[datasetID] &&
@@ -314,6 +317,9 @@ export const getMoleculesObjectIDListOfCompoundsToBuy = createSelector(
             if (foundedMolecule) {
               moleculeList.push({ molecule: foundedMolecule, datasetID });
             }
+          } else if (selectedVectorCompounds[moleculeID]) {
+            const cmp = selectedVectorCompounds[moleculeID];
+            moleculeList.push({ molecule: {...cmp, name: cmp.smiles}, datasetID });
           }
         });
     });

js/components/datasets/selectedCompoundsList.js

@@ -27,6 +27,8 @@ import { NglContext } from '../nglView/nglProvider';
 import { VIEWS } from '../../constants/constants';
 import FileSaver from 'file-saver';
 import JSZip from 'jszip';
+import { isCompoundFromVectorSelector } from '../preview/compounds/redux/dispatchActions';
+
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -86,6 +88,8 @@ export const SelectedCompoundList = memo(({ height }) => {
   const complexListAllDatasets = useSelector(state => state.datasetsReducers.complexLists);
   const surfaceListAllDatasets = useSelector(state => state.datasetsReducers.surfaceLists);
 
+  const showedCompoundList = useSelector(state => state.previewReducers.compounds.showedCompoundList);
+
   const removeOfAllSelectedTypes = () => {
     Object.keys(ligandListAllDatasets).forEach(datasetKey => {
       ligandListAllDatasets[datasetKey]?.forEach(moleculeID => {
@@ -236,26 +240,38 @@ export const SelectedCompoundList = memo(({ height }) => {
               }
               useWindow={false}
             >
-              {currentMolecules.map((data, index, array) => (
-                <DatasetMoleculeView
-                  key={index}
-                  index={index}
-                  imageHeight={imgHeight}
-                  imageWidth={imgWidth}
-                  data={data.molecule}
-                  datasetID={data.datasetID}
-                  setRef={setSelectedMoleculeRef}
-                  showCrossReferenceModal
-                  previousItemData={index > 0 && array[index - 1]}
-                  nextItemData={index < array?.length && array[index + 1]}
-                  removeOfAllSelectedTypes={removeOfAllSelectedTypes}
-                  L={ligandList.includes(data.molecule.id)}
-                  P={proteinList.includes(data.molecule.id)}
-                  C={complexList.includes(data.molecule.id)}
-                  S={surfaceList.includes(data.molecule.id)}
-                  V={false}
-                />
-              ))}
+              {currentMolecules.map((data, index, array) => {
+                const isFromVectorSelector = isCompoundFromVectorSelector(data.molecule);
+                let isLigandOn = false;
+                if (isFromVectorSelector) {
+                  if (showedCompoundList.find(item => item === data.molecule.smiles) !== undefined) {
+                    isLigandOn = true;
+                  }
+                } else {
+                  isLigandOn = ligandList.includes(data.molecule.id);
+                }
+                return (
+                  <DatasetMoleculeView
+                    key={index}
+                    index={index}
+                    imageHeight={imgHeight}
+                    imageWidth={imgWidth}
+                    data={data.molecule}
+                    datasetID={data.datasetID}
+                    setRef={setSelectedMoleculeRef}
+                    showCrossReferenceModal
+                    previousItemData={index > 0 && array[index - 1]}
+                    nextItemData={index < array?.length && array[index + 1]}
+                    removeOfAllSelectedTypes={removeOfAllSelectedTypes}
+                    L={isLigandOn}
+                    P={proteinList.includes(data.molecule.id)}
+                    C={complexList.includes(data.molecule.id)}
+                    S={surfaceList.includes(data.molecule.id)}
+                    V={false}
+                    fromSelectedCompounds={true}
+                  />
+                )
+              })}
             </InfiniteScroll>
           </Grid>
         )}

js/components/preview/compounds/compoundView.js

@@ -54,7 +54,7 @@ export const CompoundView = memo(({ height, width, data, index }) => {
   const currentCompoundIds = data.compound_ids;
 
   let current_style = Object.assign({}, not_selected_style);
-  if (showedCompoundList.find(item => item === index) !== undefined) {
+  if (showedCompoundList.find(item => item === data.smiles) !== undefined) {
     current_style = Object.assign(current_style, showedStyle);
   }
 

js/components/preview/compounds/redux/actions.js

@@ -20,6 +20,16 @@ export const resetCurrentCompoundsSettings = (withCompoundClasses = false) => as
   }
 };
 
+export const resetCurrentCompoundSettingsWithoutSelection = (withCompoundClasses = false) => async dispatch => {
+  await dispatch({
+    type: constants.RESET_CURRENT_COMPOUNDS_SETTINGS_WITHOUT_SELECTION
+  });
+
+  if (withCompoundClasses === true) {
+    dispatch(resetCompoundClasses());
+  }
+}
+
 export const updateCurrentCompound = ({ id, key, value }) => ({
   type: constants.UPDATE_COMPOUND,
   payload: {
@@ -92,3 +102,8 @@ export const reloadCompoundsReducer = newState => ({
   type: constants.RELOAD_REDUCER,
   payload: newState
 });
+
+export const setSelectedCompounds = selectedCompounds => ({
+  type: constants.SET_SELECTED_COMPOUNDS,
+  payload: selectedCompounds
+});

js/components/preview/compounds/redux/constants.js

@@ -4,6 +4,7 @@ export const constants = {
   SET_CURRENT_COMPOUNDS: prefix + 'SET_CURRENT_COMPOUNDS',
   SET_CURRENT_PAGE: prefix + 'SET_CURRENT_PAGE',
   RESET_CURRENT_COMPOUNDS_SETTINGS: prefix + 'RESET_CURRENT_COMPOUNDS_SETTINGS',
+  RESET_CURRENT_COMPOUNDS_SETTINGS_WITHOUT_SELECTION: prefix + 'RESET_CURRENT_COMPOUNDS_SETTINGS_WITHOUT_SELECTION',
   UPDATE_COMPOUND: prefix + 'UPDATE_COMPOUND',
   SET_CURRENT_COMPOUND_CLASS: prefix + 'SET_CURRENT_COMPOUND_CLASS',
   SET_COMPOUND_CLASSES: prefix + 'SET_COMPOUND_CLASSES',
@@ -19,6 +20,8 @@ export const constants = {
   REMOVE_SELECTED_COMPOUND_CLASS: prefix + 'REMOVE_SELECTED_COMPOUND_CLASS',
   RESET_SELECTED_COMPOUND_CLASS: prefix + 'RESET_SELECTED_COMPOUND_CLASS',
 
+  SET_SELECTED_COMPOUNDS: prefix + 'SET_SELECTED_COMPOUNDS',
+
   RELOAD_REDUCER: prefix + 'RELOAD_REDUCER'
 };