#183 added site id and compound id into filter dialog for further sor…

…ting options

#208 hid compounds status labels

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
   }
 };