Merge pull request #146 from m2ms/master_v.0.2

added predefined filter in "Hit navigator" header and fixed "Download CSV"
m2ms · Mar 20, 2020 · 3cd3258 · 3cd3258
2 parents 943dfc4 + 95579c3
commit 3cd3258
Show file tree

Hide file tree

Showing 23 changed files with 757 additions and 244 deletions.
diff --git a/docker-compose.localhost.yml b/docker-compose.localhost.yml
@@ -0,0 +1,59 @@
+version: '3'
+
+services:
+  mysql:
+    image: mysql:5.7.23
+    volumes:
+      - ../data/mysql_data:/var/lib/mysql
+    environment:
+      MYSQL_ROOT_PASSWORD: password
+      MYSQL_DATABASE: django_db
+      MYSQL_PASSWORD: django_password
+      MYSQL_USER: django
+    ports:
+      - "3306:3306"
+  graph:
+    container_name: neo4j
+    image: neo4j
+    ports:
+      # Comment these two out in produciton
+      - "7474:7474"
+      - "7687:7687"
+    ulimits:
+      nofile:
+        soft: 40000
+        hard: 40000
+    volumes:
+      - ../data/neo4j/data:/data
+      - ../data/neo4j/logs:/logs
+    environment:
+      - NEO4J_AUTH=none
+      - NEO4J_dbms_memory_pagecache_size=4G
+  web:
+    container_name: web_dock
+    image: xchem/fragalysis-stack:latest
+    command: /bin/bash /code/launch-stack.sh
+    volumes:
+      - ../data/logs:/code/logs/
+      - ../data/media:/code/media/
+      - ../fragalysis-frontend:/code/frontend
+      - ../fragalysis-backend:/code/
+    ports:
+      - "8080:80"
+    depends_on:
+      - mysql
+      - graph
+  loader:
+    container_name: loader
+    image: loader:latest
+    volumes:
+      - ../data/input:/fragalysis
+      - ../data/media:/code/media
+    environment:
+      MYSQL_ROOT_PASSWORD: password
+      MYSQL_DATABASE: django_db
+      MYSQL_PASSWORD: django_password
+      MYSQL_USER: django
+      DATA_ORIGIN: EXAMPLE
+    depends_on:
+      - mysql
diff --git a/js/components/common/Modal/index.js b/js/components/common/Modal/index.js
@@ -1,5 +1,6 @@
 import { CircularProgress, makeStyles, Modal as MaterialModal } from '@material-ui/core';
 import React, { memo } from 'react';
+import classNames from 'classnames';
 
 const useStyles = makeStyles(theme => ({
   paper: {
@@ -14,10 +15,14 @@ const useStyles = makeStyles(theme => ({
   },
   withPadding: {
     padding: theme.spacing(2, 4, 3)
+  },
+  resizable: {
+    resize: 'both',
+    overflow: 'auto'
   }
 }));
 
-export const Modal = memo(({ children, open, loading, onClose, noPadding, ...rest }) => {
+export const Modal = memo(({ children, open, loading, onClose, noPadding, resizable, ...rest }) => {
   const classes = useStyles();
   const content = loading ? <CircularProgress /> : children;
   return (
@@ -28,7 +33,11 @@ export const Modal = memo(({ children, open, loading, onClose, noPadding, ...res
       onClose={onClose}
       {...rest}
     >
-      <div className={classes.paper}>
+      <div
+        className={classNames(classes.paper, {
+          [classes.resizable]: resizable
+        })}
+      >
         <div className={noPadding ? undefined : classes.withPadding}>{content}</div>
       </div>
     </MaterialModal>

diff --git a/js/components/common/Surfaces/Panel/index.js b/js/components/common/Surfaces/Panel/index.js
@@ -98,14 +98,14 @@ export const Panel = memo(
                 className={classes.headerGrid}
               >
                 {title && (
-                  <Grid item xs={hasExpansion || headerActions ? 6 : 12} className={classes.headerTitle}>
+                  <Grid item xs={hasExpansion || headerActions ? 4 : 12} className={classes.headerTitle}>
                     <Typography variant="h6" color="inherit" noWrap>
                       {title}
                     </Typography>
                   </Grid>
                 )}
                 {(headerActions || hasExpansion) && (
-                  <Grid item container direction="row" justify="flex-end" xs={title ? 6 : 12}>
+                  <Grid item container direction="row" justify="flex-end" xs={title ? 8 : 12}>
                     {headerActions &&
                       headerActions.map((action, index) => (
                         <Grid item key={index}>

diff --git a/js/components/preview/compounds/redux/dispatchActions.js b/js/components/preview/compounds/redux/dispatchActions.js
@@ -146,7 +146,7 @@ export const clearAllSelectedCompounds = majorViewStage => (dispatch, getState)
   dispatch(dispatch(setCurrentCompoundClass(compoundsColors.blue.key)));
 };
 
-export const handleClickOnCompound = ({ data, event, majorViewStage, index }) => async (dispatch, getState) => {
+export const handleClickOnCompound = ({ event, data, majorViewStage, index }) => async (dispatch, getState) => {
   const state = getState();
   const currentCompoundClass = state.previewReducers.compounds.currentCompoundClass;
   const showedCompoundList = state.previewReducers.compounds.showedCompoundList;
@@ -176,7 +176,7 @@ export const handleClickOnCompound = ({ data, event, majorViewStage, index }) =>
       dispatch(removeFromToBuyList(data));
     } else {
       await dispatch(addSelectedCompoundClass(currentCompoundClass, index));
-      dispatch(appendToBuyList(data));
+      dispatch(appendToBuyList(Object.assign({}, data, { class: currentCompoundClass })));
     }
   }
 };

diff --git a/js/components/preview/molecule/moleculeList.js b/js/components/preview/molecule/moleculeList.js
@@ -1,11 +1,21 @@
 /**
  * Created by abradley on 14/03/2018.
  */
-
-import { Grid, Chip, Tooltip, makeStyles, CircularProgress, Divider, Typography } from '@material-ui/core';
-import { FilterList } from '@material-ui/icons';
+import {
+  Grid,
+  Chip,
+  Tooltip,
+  makeStyles,
+  CircularProgress,
+  Divider,
+  Typography,
+  Select,
+  MenuItem,
+  FormControl
+} from '@material-ui/core';
+import { FilterList, ClearAll } from '@material-ui/icons';
 import React, { useState, useEffect, memo, useRef, useContext } from 'react';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import * as apiActions from '../../../reducers/api/actions';
 import * as listType from '../../../constants/listTypes';
 import MoleculeView from './moleculeView';
@@ -18,6 +28,14 @@ import { Panel } from '../../common/Surfaces/Panel';
 import { ComputeSize } from '../../../utils/computeSize';
 import { moleculeProperty } from './helperConstants';
 import { setSortDialogOpen } from './redux/actions';
+import { VIEWS } from '../../../constants/constants';
+import { NglContext } from '../../nglView/nglProvider';
+import { hideAllSelectedMolecules } from './redux/dispatchActions';
+import { setFilter, setFilterSettings } from '../../../reducers/selection/actions';
+import { initializeFilter, getListedMolecules } from '../../../reducers/selection/dispatchActions';
+import { PREDEFINED_FILTERS, DEFAULT_FILTER } from '../../../reducers/selection/constants';
+import { MOL_ATTRIBUTES } from './redux/constants';
+import { getFilteredMoleculesCount } from './moleculeListSortFilterDialog';
 
 const useStyles = makeStyles(theme => ({
   container: {
@@ -68,6 +86,28 @@ const useStyles = makeStyles(theme => ({
   filterTitle: {
     transform: 'rotate(-90deg)'
   },
+  formControl: {
+    color: 'inherit',
+    margin: theme.spacing(1),
+    minWidth: 87,
+    fontSize: '1.2rem'
+  },
+  select: {
+    color: 'inherit',
+    fill: 'inherit',
+    '&:hover:not(.Mui-disabled):before': {
+      borderColor: 'inherit'
+    },
+    '&:before': {
+      borderColor: 'inherit'
+    },
+    '&:not(.Mui-disabled)': {
+      fill: theme.palette.white
+    }
+  },
+  selectIcon: {
+    fill: 'inherit'
+  },
   molHeader: {
     marginLeft: 19,
     width: 'inherit'
@@ -102,11 +142,13 @@ const MoleculeList = memo(
     setFilterItemsHeight,
     filterItemsHeight,
     getJoinedMoleculeList,
+    filter,
     filterSettings,
     sortDialogOpen,
     setSortDialogOpen
   }) => {
     const classes = useStyles();
+    const dispatch = useDispatch();
     const list_type = listType.MOLECULE;
     const oldUrl = useRef('');
     const setOldUrl = url => {
@@ -118,13 +160,19 @@ const MoleculeList = memo(
     const imgHeight = 34;
     const imgWidth = 150;
 
+    const [filteredCount, setFilteredCount] = useState(0);
+    const [predefinedFilter, setPredefinedFilter] = useState(filter !== undefined ? filter.predefined : DEFAULT_FILTER);
+
     const isActiveFilter = !!(filterSettings || {}).active;
 
+    const { getNglView } = useContext(NglContext);
+    const stage = getNglView(VIEWS.MAJOR_VIEW) && getNglView(VIEWS.MAJOR_VIEW).stage;
+
     const filterRef = useRef();
 
     let joinedMoleculeLists = getJoinedMoleculeList;
 
-    // Reset Infinity scroll
+    // TODO Reset Infinity scroll
     /*useEffect(() => {
       // setCurrentPage(0);
     }, [object_selection]);*/
@@ -145,16 +193,19 @@ const MoleculeList = memo(
         setOldUrl: url => setOldUrl(url),
         old_url: oldUrl.current,
         list_type,
-        setObjectList: moleculeList => {
-          setMoleculeList(moleculeList);
-        },
+        setObjectList: setMoleculeList,
         setCachedMolLists,
         mol_group_on,
         cached_mol_lists
-      }).catch(error => {
-        throw new Error(error);
-      });
-    }, [list_type, mol_group_on, setMoleculeList, target_on, setCachedMolLists, cached_mol_lists]);
+      })
+        .then(() => {
+          console.log('initializing filter');
+          setPredefinedFilter(dispatch(initializeFilter()).predefined);
+        })
+        .catch(error => {
+          throw new Error(error);
+        });
+    }, [list_type, mol_group_on, setMoleculeList, target_on, setCachedMolLists, cached_mol_lists, dispatch]);
 
     const listItemOffset = (currentPage + 1) * moleculesPerPage;
     const currentMolecules = joinedMoleculeLists.slice(0, listItemOffset);
@@ -166,6 +217,44 @@ const MoleculeList = memo(
       }
     }, [isActiveFilter, setFilterItemsHeight]);
 
+    const handleFilterChange = filter => {
+      const filterSet = Object.assign({}, filter);
+      for (let attr of MOL_ATTRIBUTES) {
+        if (filterSet.filter[attr.key].priority === undefined || filterSet.filter[attr.key].priority === '') {
+          filterSet.filter[attr.key].priority = 0;
+        }
+      }
+      dispatch(setFilterSettings(filterSet));
+    };
+
+    const changePredefinedFilter = event => {
+      let newFilter = Object.assign({}, filter);
+
+      const preFilterKey = event.target.value;
+      setPredefinedFilter(preFilterKey);
+
+      if (preFilterKey !== 'none') {
+        newFilter.active = true;
+        newFilter.predefined = preFilterKey;
+        Object.keys(PREDEFINED_FILTERS[preFilterKey].filter).forEach(attr => {
+          const maxValue = PREDEFINED_FILTERS[preFilterKey].filter[attr];
+          newFilter.filter[attr].maxValue = maxValue;
+          newFilter.filter[attr].max = newFilter.filter[attr].max < maxValue ? maxValue : newFilter.filter[attr].max;
+        });
+        dispatch(setFilter(newFilter));
+      } else {
+        // close filter dialog options
+        setSortDialogAnchorEl(null);
+        setSortDialogOpen(false);
+        // reset filter
+        dispatch(setFilter(undefined));
+        newFilter = dispatch(initializeFilter());
+      }
+      // currently do not filter molecules by excluding them
+      /*setFilteredCount(getFilteredMoleculesCount(getListedMolecules(object_selection, cached_mol_lists), newFilter));
+      handleFilterChange(newFilter);*/
+    };
+
     return (
       <ComputeSize
         componentRef={filterRef.current}
@@ -177,6 +266,36 @@ const MoleculeList = memo(
           hasHeader
           title="Hit navigator"
           headerActions={[
+            <FormControl className={classes.formControl} disabled={!(object_selection || []).length || sortDialogOpen}>
+              <Select
+                className={classes.select}
+                value={predefinedFilter}
+                onChange={changePredefinedFilter}
+                inputProps={{
+                  name: 'predefined',
+                  id: 'predefined-label-placeholder',
+                  classes: { icon: classes.selectIcon }
+                }}
+                displayEmpty
+                name="predefined"
+              >
+                {Object.keys(PREDEFINED_FILTERS).map(preFilterKey => (
+                  <MenuItem key={`Predefined-filter-${preFilterKey}`} value={preFilterKey}>
+                    {PREDEFINED_FILTERS[preFilterKey].name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>,
+            <Button
+              color={'inherit'}
+              size="small"
+              variant="text"
+              startIcon={<ClearAll />}
+              disabled={!(object_selection || []).length}
+              onClick={() => dispatch(hideAllSelectedMolecules(stage, currentMolecules))}
+            >
+              Hide all
+            </Button>,
             <Button
               onClick={event => {
                 if (sortDialogOpen === false) {
@@ -188,7 +307,7 @@ const MoleculeList = memo(
                 }
               }}
               color={'inherit'}
-              disabled={!(object_selection || []).length}
+              disabled={!(object_selection || []).length || filter.predefined !== 'none'}
               variant="text"
               startIcon={<FilterList />}
               size="small"
@@ -203,6 +322,7 @@ const MoleculeList = memo(
               anchorEl={sortDialogAnchorEl}
               molGroupSelection={object_selection}
               cachedMolList={cached_mol_lists}
+              filter={filter}
               filterSettings={filterSettings}
             />
           )}
@@ -213,7 +333,7 @@ const MoleculeList = memo(
                   <Grid container spacing={1}>
                     <Grid item xs={1} container alignItems="center">
                       <Typography variant="subtitle2" className={classes.filterTitle}>
-                        Filters
+                        Filters #{filteredCount}
                       </Typography>
                     </Grid>
                     <Grid item xs={11}>
@@ -303,6 +423,7 @@ function mapStateToProps(state) {
     object_list: state.apiReducers.molecule_list,
     cached_mol_lists: state.apiReducers.cached_mol_lists,
     getJoinedMoleculeList: getJoinedMoleculeList(state),
+    filter: state.selectionReducers.filter,
     filterSettings: state.selectionReducers.filterSettings,
     sortDialogOpen: state.previewReducers.molecule.sortDialogOpen
   };