#190 Fix inconsistencies - Selecting and reselecting sites

m2ms · Apr 7, 2020 · d1eb2e4 · d1eb2e4
1 parent e60dcc4
commit d1eb2e4
Show file tree

Hide file tree

Showing 21 changed files with 360 additions and 333 deletions.
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -14,7 +14,7 @@ services:
       - "3306:3306"
   graph:
     container_name: neo4j
-    image: neo4j
+    image: neo4j:3.5
     ports:
 # Comment these two out in produciton
       - "7474:7474"
@@ -28,7 +28,7 @@ services:
       - ../data/neo4j/logs:/logs
     environment:
       - NEO4J_AUTH=none
-      - NEO4J_dbms_memory_pagecache_size=4G    
+      - NEO4J_dbms_memory_pagecache_size=4G
   web:
     container_name: web_dock
     image: xchem/fragalysis-stack:latest
@@ -55,4 +55,4 @@ services:
       MYSQL_USER: django
       DATA_ORIGIN: EXAMPLE
     depends_on:
-      - mysql
+      - mysql
diff --git a/docker-compose.localhost.yml b/docker-compose.localhost.yml
@@ -14,7 +14,7 @@ services:
       - "3306:3306"
   graph:
     container_name: neo4j
-    image: neo4j
+    image: neo4j:3.5
     ports:
       # Comment these two out in produciton
       - "7474:7474"

diff --git a/js/components/header/index.js b/js/components/header/index.js
@@ -73,7 +73,8 @@ const useStyles = makeStyles(theme => ({
     cursor: 'progress'
   },
   loadingProgress: {
-    height: '7px'
+    height: 2,
+    bottom: -2
   },
   clickableImage: {
     cursor: 'pointer'
@@ -256,6 +257,9 @@ export default memo(
               </Grid>
             </Grid>
           </Grid>
+          {(isLoading === true || disableUserInteraction === true) && (
+            <LinearProgress color="secondary" className={classes.loadingProgress} />
+          )}
         </AppBar>
         <FundersModal openModal={openFunders} onModalClose={() => setOpenFunders(false)} />
         <Drawer
@@ -319,18 +323,7 @@ export default memo(
             </Grid>
           </Grid>
         </Drawer>
-        <Box paddingTop={`${headerHeight}px`} width="100%">
-          {(isLoading === true || disableUserInteraction === true) && (
-            <>
-              <LinearProgress color="secondary" className={classes.loadingProgress} />
-              <Box
-                className={classes.loadingPaper}
-                width="100%"
-                height={`calc(${document.documentElement.offsetHeight}px - ${headerHeight}px)`}
-              />
-            </>
-          )}
-        </Box>
+        <Box paddingTop={`${headerHeight}px`} width="100%" />
       </ComputeSize>
     );
   })

diff --git a/js/components/nglView/generatingObjects.js b/js/components/nglView/generatingObjects.js
@@ -56,7 +56,7 @@ export const generateMoleculeObject = (data, colourToggle) => ({
 
 // Vector
 export const generateArrowObject = (data, start, end, name, colour) => ({
-  name: listTypes.VECTOR + '_' + name,
+  name: `${listTypes.VECTOR}_${name}`,
   OBJECT_TYPE: OBJECT_TYPE.ARROW,
   start: start,
   end: end,
@@ -68,7 +68,7 @@ export const generateArrowObject = (data, start, end, name, colour) => ({
 
 // Vector
 export const generateCylinderObject = (data, start, end, name, colour) => ({
-  name: listTypes.VECTOR + '_' + name,
+  name: `${listTypes.VECTOR}_${name}`,
   OBJECT_TYPE: OBJECT_TYPE.CYLINDER,
   start: start,
   end: end,
@@ -126,15 +126,18 @@ export const generateMoleculeId = data => ({
   id: data.id
 });
 
-export const getVectorWithColorByCountOfCompounds = (item, to_select) => {
-  var thisSmi = item.name.split('VECTOR_')[1];
+export const getVectorWithColorByCountOfCompounds = (item, currentVectorCompounds) => {
+  var thisSmi = item.name.split(`${listTypes.VECTOR}_`)[1];
+
   var counter = 0;
-  Object.keys(to_select).forEach(key => {
-    var smi = key.split('_')[0];
-    if (smi === thisSmi) {
-      counter += to_select[key]['addition'].length;
-    }
-  });
+  if (currentVectorCompounds) {
+    Object.keys(currentVectorCompounds).forEach(compoundKey => {
+      var smi = compoundKey.split('_')[0];
+      if (smi === thisSmi) {
+        counter += currentVectorCompounds[compoundKey]['addition'].length;
+      }
+    });
+  }
 
   var colour = [1, 0, 0];
 

diff --git a/js/components/nglView/redux/dispatchActions.js b/js/components/nglView/redux/dispatchActions.js
@@ -126,8 +126,8 @@ export const handleNglViewPick = (stage, pickingProxy, getNglView) => (dispatch,
       //else if (type === listTypes.MOLECULE) {
       //}
       else if (type === listTypes.VECTOR) {
-        const vectorSmi = name.split('_')[1];
-        dispatch(selectVectorAndResetCompounds(vectorSmi));
+        const vectorSmile = name.split('_')[1];
+        dispatch(selectVectorAndResetCompounds(vectorSmile));
       }
     }
   }

diff --git a/js/components/preview/Preview.js b/js/components/preview/Preview.js
@@ -86,7 +86,6 @@ const Preview = memo(({ isStateLoaded, headerHeight }) => {
     return () => {
       dispatch(removeAllNglComponents());
       dispatch(resetCurrentCompoundsSettings(true));
-      console.log(' Unmount Preview ');
     };
   }, [dispatch]);
 

diff --git a/js/components/preview/compounds/compoundList.js b/js/components/preview/compounds/compoundList.js
@@ -16,7 +16,6 @@ import {
   selectAllCompounds
 } from './redux/dispatchActions';
 import { compoundsColors } from './redux/constants';
-// import { getTotalCountOfMolecules } from '../../../reducers/selection/selectors';
 import InfiniteScroll from 'react-infinite-scroller';
 import { getCanLoadMoreCompounds, getCompoundListOffset } from './redux/selectors';
 import { NglContext } from '../../nglView/nglProvider';
@@ -71,8 +70,6 @@ export const CompoundList = memo(({ height }) => {
   const { getNglView } = useContext(NglContext);
   const majorViewStage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
 
-  const to_query = useSelector(state => state.selectionReducers.to_query);
-  // const compoundClasses = useSelector(state => getCompoundClasses(state));
   const blueInput = useSelector(state => state.previewReducers.compounds[compoundsColors.blue.key]);
   const redInput = useSelector(state => state.previewReducers.compounds[compoundsColors.red.key]);
   const greenInput = useSelector(state => state.previewReducers.compounds[compoundsColors.green.key]);
@@ -88,80 +85,73 @@ export const CompoundList = memo(({ height }) => {
   };
 
   const currentCompoundClass = useSelector(state => state.previewReducers.compounds.currentCompoundClass);
-  // const totalCountOfMolecules = useSelector(state => getTotalCountOfMolecules(state));
   const canLoadMoreCompounds = useSelector(state => getCanLoadMoreCompounds(state));
-  const querying = useSelector(state => state.selectionReducers.querying);
   const currentVector = useSelector(state => state.selectionReducers.currentVector);
   const currentCompounds = useSelector(state => state.previewReducers.compounds.currentCompounds);
   const compoundsListOffset = useSelector(state => getCompoundListOffset(state));
 
-  let mol_string = currentCompounds.length + ' Compounds on vector to pick';
-
-  if (to_query === '' || to_query === undefined) {
-    mol_string = '';
+  let headerMessage = currentCompounds.length + ' Compounds on vector to pick';
+  if (currentVector === null) {
+    headerMessage = 'Not selected vector';
   }
 
-  if (currentVector !== undefined && to_query !== undefined) {
-    return (
-      <Panel hasHeader title={querying ? 'Loading....' : mol_string} ref={panelRef}>
-        {currentCompounds && (
-          <Box height={height} width="100%">
-            <Grid container direction="row" justify="space-between" alignItems="center">
-              {Object.keys(compoundsColors).map(item => (
-                <Grid item key={item}>
-                  <TextField
-                    id={`${item}`}
-                    key={`CLASS_${item}`}
-                    variant="standard"
-                    className={classNames(
-                      classes.textField,
-                      classes[item],
-                      currentCompoundClass === item && classes.selectedInput
-                    )}
-                    label={compoundsColors[item].text}
-                    onChange={e => dispatch(onChangeCompoundClassValue(e))}
-                    onKeyDown={e => dispatch(onKeyDownCompoundClass(e))}
-                    value={inputs[item] || ''}
-                  />
-                </Grid>
-              ))}
-            </Grid>
-            <Grid container justify="flex-start" className={classes.infinityContainer}>
-              <Box width="inherit" style={{ height: `calc(${height} - 114px)` }} overflow="auto">
-                <InfiniteScroll
-                  pageStart={0}
-                  loadMore={() => dispatch(loadNextPageOfCompounds())}
-                  hasMore={canLoadMoreCompounds}
-                  loader={
-                    <div className="loader" key={`loader_${0}`}>
-                      <div className={classes.paddingProgress}>
-                        <CircularProgress />
-                      </div>
+  return (
+    <Panel hasHeader title={headerMessage} ref={panelRef}>
+      {currentCompounds && (
+        <Box height={height} width="100%">
+          <Grid container direction="row" justify="space-between" alignItems="center">
+            {Object.keys(compoundsColors).map(item => (
+              <Grid item key={item}>
+                <TextField
+                  id={`${item}`}
+                  key={`CLASS_${item}`}
+                  variant="standard"
+                  className={classNames(
+                    classes.textField,
+                    classes[item],
+                    currentCompoundClass === item && classes.selectedInput
+                  )}
+                  label={compoundsColors[item].text}
+                  onChange={e => dispatch(onChangeCompoundClassValue(e))}
+                  onKeyDown={e => dispatch(onKeyDownCompoundClass(e))}
+                  value={inputs[item] || ''}
+                />
+              </Grid>
+            ))}
+          </Grid>
+          <Grid container justify="flex-start" className={classes.infinityContainer}>
+            <Box width="inherit" style={{ height: `calc(${height} - 114px)` }} overflow="auto">
+              <InfiniteScroll
+                pageStart={0}
+                loadMore={() => dispatch(loadNextPageOfCompounds())}
+                hasMore={canLoadMoreCompounds}
+                loader={
+                  <div className="loader" key={`loader_${0}`}>
+                    <div className={classes.paddingProgress}>
+                      <CircularProgress />
                     </div>
-                  }
-                  useWindow={false}
-                >
-                  {currentCompounds.slice(0, compoundsListOffset).map((data, index) => {
-                    return <CompoundView key={index} height={100} width={100} data={data} index={index} />;
-                  })}
-                </InfiniteScroll>
-              </Box>
-            </Grid>
-            <Button color="primary" onClick={() => dispatch(selectAllCompounds())} startIcon={<SelectAll />}>
-              Select All
-            </Button>
-            <Button
-              color="primary"
-              onClick={() => dispatch(clearAllSelectedCompounds(majorViewStage))}
-              startIcon={<Delete />}
-            >
-              Clear Selection
-            </Button>
-          </Box>
-        )}
-      </Panel>
-    );
-  } else {
-    return null;
-  }
+                  </div>
+                }
+                useWindow={false}
+              >
+                {currentCompounds.slice(0, compoundsListOffset).map((data, index) => {
+                  return <CompoundView key={index} height={100} width={100} data={data} index={index} />;
+                })}
+              </InfiniteScroll>
+            </Box>
+          </Grid>
+          <Button color="primary" onClick={() => dispatch(selectAllCompounds())} startIcon={<SelectAll />}>
+            Select All
+          </Button>
+          <Button
+            color="primary"
+            onClick={() => dispatch(clearAllSelectedCompounds(majorViewStage))}
+            startIcon={<Delete />}
+          >
+            Clear Selection
+          </Button>
+        </Box>
+      )}
+    </Panel>
+  );
 });
diff --git a/js/components/preview/compounds/redux/dispatchActions.js b/js/components/preview/compounds/redux/dispatchActions.js
@@ -20,21 +20,27 @@ import { api, getCsrfToken, METHOD } from '../../../../utils/api';
 import { base_url } from '../../../routes/constants';
 import { loadFromServer } from '../../../../utils/genericView';
 import { compoundsColors } from './constants';
+import {
+  getCurrentVectorCompoundsFiltered,
+  getMoleculeOfCurrentVector
+} from '../../../../reducers/selection/selectors';
 
 export const selectAllCompounds = () => (dispatch, getState) => {
   const state = getState();
-  const thisVectorList = state.selectionReducers.this_vector_list;
-  const to_query = state.selectionReducers.to_query;
+  const currentVectorCompoundsFiltered = getCurrentVectorCompoundsFiltered(state);
+
+  const moleculeOfVector = getMoleculeOfCurrentVector(state);
+  const smiles = moleculeOfVector && moleculeOfVector.smiles;
   const currentCompoundClass = state.previewReducers.compounds.currentCompoundClass;
 
-  for (let key in thisVectorList) {
-    for (let index in thisVectorList[key]) {
+  for (let key in currentVectorCompoundsFiltered) {
+    for (let index in currentVectorCompoundsFiltered[key]) {
       if (index !== 'vector') {
-        for (let indexOfCompound in thisVectorList[key][index]) {
+        for (let indexOfCompound in currentVectorCompoundsFiltered[key][index]) {
           var thisObj = {
-            smiles: thisVectorList[key][index][indexOfCompound].end,
-            vector: thisVectorList[key].vector.split('_')[0],
-            mol: to_query,
+            smiles: currentVectorCompoundsFiltered[key][index][indexOfCompound].end,
+            vector: currentVectorCompoundsFiltered[key].vector.split('_')[0],
+            mol: smiles,
             class: parseInt(currentCompoundClass)
           };
           dispatch(appendToBuyList(thisObj));
@@ -73,7 +79,8 @@ export const loadNextPageOfCompounds = () => (dispatch, getState) => {
 
 const showCompoundNglView = ({ majorViewStage, data, index }) => (dispatch, getState) => {
   const state = getState();
-  const to_query_sdf_info = state.selectionReducers.to_query_sdf_info;
+  const moleculeOfVector = getMoleculeOfCurrentVector(state);
+  const sdf_info = moleculeOfVector && moleculeOfVector.sdf_info;
   const configuration = state.previewReducers.compounds.configuration;
   const showedCompoundList = state.previewReducers.compounds.showedCompoundList;
 
@@ -92,7 +99,7 @@ const showCompoundNglView = ({ majorViewStage, data, index }) => (dispatch, getS
     var post_data = {
       INPUT_VECTOR: data.vector,
       INPUT_SMILES: [data.smiles],
-      INPUT_MOL_BLOCK: to_query_sdf_info
+      INPUT_MOL_BLOCK: sdf_info
     };
 
     api({

diff --git a/js/components/preview/molecule/moleculeView.js b/js/components/preview/molecule/moleculeView.js
@@ -155,7 +155,6 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
   const key = 'mol_image';
 
   const dispatch = useDispatch();
-  const to_query = useSelector(state => state.selectionReducers.to_query);
   const proteinList = useSelector(state => state.selectionReducers.proteinList);
   const complexList = useSelector(state => state.selectionReducers.complexList);
   const surfaceList = useSelector(state => state.selectionReducers.surfaceList);
@@ -240,7 +239,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
         refOnCancel.current();
       }
     };
-  }, [complexList, data.id, data.smiles, fragmentDisplayList, imageHeight, to_query, url, vectorOnList, imageWidth]);
+  }, [complexList, data.id, data.smiles, fragmentDisplayList, imageHeight, url, vectorOnList, imageWidth]);
 
   const svg_image = (
     <SVGInline