Merge pull request #149 from m2ms/master_v.0.2

added sort by site and hit, removed status labels

js/components/nglView/renderingObjects.js

@@ -7,7 +7,7 @@ import {
 } from './generatingObjects';
 import { concatStructures, Selection, Shape } from 'ngl';
 
-const showSphere = (stage, input_dict, object_name, representations) => {
+const showSphere = (stage, input_dict, object_name, representations, orientationMatrix) => {
   let colour = input_dict.colour;
   let radius = input_dict.radius;
   let coords = input_dict.coords;
@@ -20,7 +20,7 @@ const showSphere = (stage, input_dict, object_name, representations) => {
   return Promise.resolve(assignRepresentationArrayToComp(reprArray, comp));
 };
 
-const showMol = (stage, input_dict, object_name, representations) => {
+const showMol = (stage, input_dict, object_name, representations, orientationMatrix) => {
   let stringBlob = new Blob([input_dict.sdf_info], { type: 'text/plain' });
   return stage.loadFile(stringBlob, { name: object_name, ext: 'sdf' }).then(comp => {
     const reprArray =
@@ -33,13 +33,16 @@ const showMol = (stage, input_dict, object_name, representations) => {
         })
       ]);
 
-    comp.autoView('ligand');
-
+    if (orientationMatrix) {
+      stage.viewerControls.orient(orientationMatrix);
+    } else {
+      comp.autoView('ligand');
+    }
     return assignRepresentationArrayToComp(reprArray, comp);
   });
 };
 
-const renderComplex = (ol, representations) => {
+const renderComplex = (ol, representations, orientationMatrix) => {
   let cs = concatStructures(
     ol[4],
     ol[0].structure.getView(new Selection('not ligand')),
@@ -67,14 +70,18 @@ const renderComplex = (ol, representations) => {
   });
 
   const reprArray = representations || createRepresentationsArray([repr2, repr3]);
-
-  comp.autoView('ligand');
+  if (orientationMatrix) {
+    stage.viewerControls.orient(orientationMatrix);
+  } else {
+    comp.autoView('ligand');
+  }
+  //TODO setFocus should be in condition
   comp.stage.setFocus(focus_let_temp);
 
   return assignRepresentationArrayToComp(reprArray, comp);
 };
 
-const showComplex = (stage, input_dict, object_name, representations) => {
+const showComplex = (stage, input_dict, object_name, representations, orientationMatrix) => {
   let stringBlob = new Blob([input_dict.sdf_info], { type: 'text/plain' });
   return Promise.all([
     stage.loadFile(input_dict.prot_url, { ext: 'pdb' }),
@@ -83,11 +90,11 @@ const showComplex = (stage, input_dict, object_name, representations) => {
     defaultFocus,
     object_name,
     input_dict.colour
-  ]).then(ol => renderComplex(ol, representations));
+  ]).then(ol => renderComplex(ol, representations, orientationMatrix));
 };
 
 // ligand
-const showEvent = (stage, input_dict, object_name, representations) =>
+const showEvent = (stage, input_dict, object_name, representations, orientationMatrix) =>
   Promise.all(
     [
       stage.loadFile(input_dict.pdb_info, { name: object_name, ext: 'pdb' }).then(comp => {
@@ -114,7 +121,12 @@ const showEvent = (stage, input_dict, object_name, representations) =>
         const repr4 = createRepresentationStructure(MOL_REPRESENTATION.ballPlusStick, {
           sele: 'LIG'
         });
-        comp.autoView('LIG');
+
+        if (orientationMatrix) {
+          stage.viewerControls.orient(orientationMatrix);
+        } else {
+          comp.autoView('LIG');
+        }
 
         const reprArray = representations || createRepresentationsArray([repr1, repr2, repr3, repr4]);
         return assignRepresentationArrayToComp(reprArray, comp);
@@ -194,16 +206,20 @@ const showArrow = (stage, input_dict, object_name, representations, orientationM
   return Promise.resolve(assignRepresentationArrayToComp(reprArray, comp));
 };
 
-const showProtein = (stage, input_dict, object_name, representations) =>
+const showProtein = (stage, input_dict, object_name, representations, orientationMatrix) =>
   stage.loadFile(input_dict.prot_url, { name: object_name, ext: 'pdb' }).then(comp => {
     const reprArray =
       representations || createRepresentationsArray([createRepresentationStructure(input_dict.nglProtStyle, {})]);
 
-    comp.autoView();
+    if (orientationMatrix) {
+      stage.viewerControls.orient(orientationMatrix);
+    } else {
+      comp.autoView();
+    }
     return Promise.resolve(assignRepresentationArrayToComp(reprArray, comp));
   });
 
-const showHotspot = (stage, input_dict, object_name, representations) => {
+const showHotspot = (stage, input_dict, object_name, representations, orientationMatrix) => {
   if (input_dict.map_type === 'AP') {
     return stage.loadFile(input_dict.hotUrl, { name: object_name, ext: 'dx' }).then(comp => {
       const reprArray =

js/components/preview/molecule/moleculeList.js

@@ -160,7 +160,6 @@ 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;
@@ -180,6 +179,7 @@ const MoleculeList = memo(
     if (isActiveFilter) {
       joinedMoleculeLists = filterMolecules(joinedMoleculeLists, filterSettings);
     } else {
+      // default sort is by site
       joinedMoleculeLists.sort((a, b) => a.site - b.site);
     }
 
@@ -333,7 +333,7 @@ const MoleculeList = memo(
                   <Grid container spacing={1}>
                     <Grid item xs={1} container alignItems="center">
                       <Typography variant="subtitle2" className={classes.filterTitle}>
-                        Filters #{filteredCount}
+                        Filters
                       </Typography>
                     </Grid>
                     <Grid item xs={11}>

js/components/preview/molecule/moleculeListSortFilterDialog.js

@@ -88,6 +88,7 @@ export const filterMolecules = (molecules, filterSettings) => {
   for (let molecule of molecules) {
     let add = true; // By default molecule passes filter
     for (let attr of MOL_ATTRIBUTES) {
+      if (!attr.filter) continue;
       const lowAttr = attr.key.toLowerCase();
       const attrValue = molecule[lowAttr];
       if (
@@ -105,15 +106,10 @@ export const filterMolecules = (molecules, filterSettings) => {
 
   // 2. Sort
   let sortedAttributes = filterSettings.priorityOrder.map(attr => attr);
-  sortedAttributes.push('site'); // Finally sort by site;
 
   return filteredMolecules.sort((a, b) => {
     for (let prioAttr of sortedAttributes) {
-      let order = 1;
-      if (prioAttr !== 'site') {
-        // Site is always arbitrary
-        order = filterSettings.filter[prioAttr].order;
-      }
+      const order = filterSettings.filter[prioAttr].order;
 
       const attrLo = prioAttr.toLowerCase();
       let diff = order * (a[attrLo] - b[attrLo]);
@@ -294,6 +290,7 @@ export const MoleculeListSortFilterDialog = memo(
                   disabled={predefinedFilter !== 'none'}
                   onChange={handleItemChange(attr)}
                   onChangePrio={handlePrioChange(attr)}
+                  filter={attrDef.filter}
                 />
               );
             })}

js/components/preview/molecule/moleculeListSortFilterItem.js

@@ -73,7 +73,7 @@ const widthMin = 30;
 const widthSlider = 170;
 
 const moleculeListSortFilterItem = memo(props => {
-  const { property, min, max, onChange, isFloat, color, disabled, onChangePrio } = props;
+  const { property, min, max, onChange, isFloat, color, disabled, onChangePrio, filter } = props;
   const { order, minValue, maxValue } = props;
   // Because Slider works only with Integers we convert Float to Int by multiplying with 100
   const MULT = 100;
@@ -165,28 +165,32 @@ const moleculeListSortFilterItem = memo(props => {
       <Grid item className={classNames(classes.property, classes.centered)} style={{ width: widthProperty }}>
         <Chip size="small" className={classes.propertyChip} label={property} style={{ backgroundColor: color }} />
       </Grid>
-      <Grid item className={classNames(classes.min, classes.centered)} style={{ width: widthMin }}>
-        {min}
-      </Grid>
-      <Grid item className={classNames(classes.centered, classes.slider)} style={{ width: widthSlider }}>
-        <Slider
-          value={sliderValue}
-          onChange={handleChangeSlider}
-          onChangeCommitted={handleCommitChangeSlider}
-          valueLabelDisplay="auto"
-          aria-labelledby="range-slider"
-          max={normMax}
-          min={normMin}
-          marks={isFloat !== true ? true : undefined}
-          valueLabelFormat={value => {
-            return isFloat ? value / MULT : value;
-          }}
-          disabled={disabled}
-        />
-      </Grid>
-      <Grid item className={classNames(classes.min, classes.centered)} style={{ width: widthMin }}>
-        {max}
-      </Grid>
+      {filter && (
+        <>
+          <Grid item className={classNames(classes.min, classes.centered)} style={{ width: widthMin }}>
+            {min}
+          </Grid>
+          <Grid item className={classNames(classes.centered, classes.slider)} style={{ width: widthSlider }}>
+            <Slider
+              value={sliderValue}
+              onChange={handleChangeSlider}
+              onChangeCommitted={handleCommitChangeSlider}
+              valueLabelDisplay="auto"
+              aria-labelledby="range-slider"
+              max={normMax}
+              min={normMin}
+              marks={isFloat !== true ? true : undefined}
+              valueLabelFormat={value => {
+                return isFloat ? value / MULT : value;
+              }}
+              disabled={disabled}
+            />
+          </Grid>
+          <Grid item className={classNames(classes.min, classes.centered)} style={{ width: widthMin }}>
+            {max}
+          </Grid>
+        </>
+      )}
     </Grid>
   );
 });
@@ -198,7 +202,8 @@ moleculeListSortFilterItem.propTypes = {
   max: PropTypes.number.isRequired,
   color: PropTypes.string.isRequired,
   isFloat: PropTypes.bool,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  filter: PropTypes.bool
 };
 
 export default moleculeListSortFilterItem;

js/components/preview/molecule/moleculeView.js

@@ -361,7 +361,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
             {target_on_name && data.protein_code && data.protein_code.replace(`${target_on_name}-`, '')}
           </Typography>
         </Grid>
-        {/* Status code */}
+        {/* Status code - #208 Remove the status labels (for now - until they are in the back-end/loader properly)
         <Grid item>
           <Grid container direction="row" justify="space-between" alignItems="center">
             {Object.values(molStatusTypes).map(type => (
@@ -370,7 +370,7 @@ const MoleculeView = memo(({ imageHeight, imageWidth, data }) => {
               </Grid>
             ))}
           </Grid>
-        </Grid>
+        </Grid>*/}
 
         {/* Control Buttons A, L, C, V */}
         <Grid item>

js/components/preview/molecule/redux/constants.js

@@ -7,55 +7,77 @@ export const constants = {
 };
 
 export const MOL_ATTR = {
+  SID: {
+    key: 'site',
+    name: 'Site ID (SID)',
+    isFloat: false,
+    color: '#72e5be',
+    filter: false
+  },
+  HID: {
+    key: 'id',
+    name: 'Hit ID (HID)',
+    isFloat: false,
+    color: '#daa520',
+    filter: false
+  },
   MW: {
     key: 'MW',
     name: 'Molecular weight (MW)',
     isFloat: true,
-    color: '#f96587'
+    color: '#f96587',
+    filter: true
   },
-  LOGP: { key: 'logP', name: 'logP', isFloat: true, color: '#3cb44b' },
+  LOGP: { key: 'logP', name: 'logP', isFloat: true, color: '#3cb44b', filter: true },
   TPSA: {
     key: 'TPSA',
     name: 'Topological polar surface area (TPSA)',
     isFloat: true,
-    color: '#ffe119'
+    color: '#ffe119',
+    filter: true
   },
-  HA: { key: 'HA', name: 'Heavy atom count', isFloat: false, color: '#079ddf' },
+  HA: { key: 'HA', name: 'Heavy atom count', isFloat: false, color: '#079ddf', filter: true },
   HACC: {
     key: 'Hacc',
     name: '# H-bond acceptors (Hacc)',
     isFloat: false,
-    color: '#f58231'
+    color: '#f58231',
+    filter: true
   },
   HDON: {
     key: 'Hdon',
     name: '# H-bond donors (Hdon)',
     isFloat: false,
-    color: '#86844a'
+    color: '#86844a',
+    filter: true
   },
   ROTS: {
     key: 'Rots',
     name: '# Rotatable bonds (Rots)',
     isFloat: false,
-    color: '#42d4f4'
+    color: '#42d4f4',
+    filter: true
   },
   RINGS: {
     key: 'Rings',
     name: '# rings (rings)',
     isFloat: false,
-    color: '#f032e6'
+    color: '#f032e6',
+    filter: true
   },
   VELEC: {
     key: 'Velec',
     name: '# valence electrons (velec)',
     isFloat: false,
-    color: '#bfef45'
+    color: '#bfef45',
+    filter: true
   },
   NCPD: {
     key: '#cpd',
     name: '# available follow-up cmpds. (#cpd)',
     isFloat: false,
-    color: '#fabebe'
+    color: '#fabebe',
+    filter: true
   }
 };